@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    /* Achtergoronden */
    --color-bg: rgb(250 250 249);
    --color-bg-mobile: rgb(30 42 78);
    --color-container: rgb(255 255 255);

    /* Tekst kleuren*/
    --color-text: rgb(51 51 51);
    --color-text-secondary: rgb(255 255 255);

    /* Algemene kleuren */
    --color-primair: rgb(30 42 78);
    --color-secundair: rgb(234 91 27);
    --color-secundair-hover: rgb(214 71 7);
    --color-accent: rgb(153 208 192);
    --color-white: rgb(255 255 255);

    /* Evenement kleuren */
    --color-groepsaccommodatie-ical: rgb(83 2 171);
    --color-groepsaccommodatie-ical-hover: rgb(103 22 191);
    --color-groepsaccommodatie-verlopen: rgb(117, 117, 117);
    --color-groepsaccommodatie-verlopen-hover: rgb(97, 97, 97);
    --color-groepsaccommodatie: rgb(26 132 95);
    --color-groepsaccommodatie-hover: rgb(20 102 75);
    --color-schoolkamp: rgb(255 230 4);
    --color-schoolkamp-hover: rgb(235 210 4); 
    --color-zeilschool: rgb(234 91 27);
    --color-zeilschool-hover: rgb(214 71 7);
    --color-afspraak: rgb(30 42 78);
    --color-afspraak-hover: rgb(40 52 98);
    --color-evenement: rgb(139 197 218);
    --color-evenement-hover: rgb(119 177 198);
    --color-blokkering: rgb(183 183 183);
    --color-blokkering-hover: rgb(163 163 163);

    --color-priveles-1: rgb(83 2 171);
    --color-priveles-1-hover: rgb(103 22 191);
    --color-priveles-2: rgb(255 0 0);
    --color-priveles-2-hover: rgb(235 0 0);
    --color-priveles-3: rgb(30 42 78);
    --color-priveles-3-hover: rgb(40 52 98);
    --color-bootverhuur: rgb(26 132 95);
    --color-bootverhuur-hover: rgb(20 102 75);

    --color-zaterdag: rgb(240 244 255);
    --color-zondag: rgb(214 225 255);

    --color-positive: rgb(33 110 0);
    --color-negative: rgb(255 0 0);

    /* Algemene fonts */
    --font-family: 'Montserrat', sans-serif;
    --font-size-base: 16px;
    --font-size-small: 0.7em;
    --font-size-medium: 0.8em;
    --font-size-large: 1em;
    --font-size-xlarge: 1.2em;
    --font-weight-base: 400;
    --font-weight-bold: 600;

    /* Algemene styling */
    --border-radius: 8px;
    --border-color: rgb(228 228 231);
    --opacity-icon: 0.8;
    --transition-duration: 0.3s;
    --overlay-background: rgba(0, 0, 0, 0.5);

    /* Container */
    --container-margin: 0px 5px 5px 5px;
    --container-border: 1.5px solid rgb(228 228 231);

    /* Table */
    --textcolor-table-header: rgb(113 113 112);
    --textcolor-table-body: rgb(51 51 51);
    --table-border: 1px solid rgb(228 228 231);
    --padding-table-header: 28px 16px 12px 16px;
    --padding-table-header-mobile: 12px 16px;
    --padding-table-body: 12px 16px;
    --color-table-sat: rgb(240 244 255);
    --color-table-sun: rgb(214 225 255);

    /* Gaps */
    --gap-standaard: 8px;
    --gap-icon-title: 8px;
    --gap-list-vertical: 4px;
    --gap-menu-items: 8px;
}


body {
    background-color: var(--color-bg);
    font-family: var(--font-family);
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}  

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(30, 42, 78, 0.22) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(30, 42, 78, 0.22);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(30, 42, 78, 0.32);
}

*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.toast-melding-positive {
    position: fixed;
    bottom: 32px;
    left: 32px;
    background: var(--color-positive);
    color: var(--color-text-secondary);
    padding: 16px 28px;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(30,42,78,0.15);
    z-index: 99999999;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .toast-melding-negative {
    position: fixed;
    bottom: 32px;
    left: 32px;
    background: var(--color-negative);
    color: var(--color-text-secondary);
    padding: 16px 28px;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(30,42,78,0.15);
    z-index: 99999999;
    opacity: 0;
    transition: opacity 0.3s;
  }