: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);
    --color-text-placeholder: rgb(113 113 112);
    --color-text-label: rgb(113 113 112);

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

    /* 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-positive: rgb(33 110 0);
    --color-positive-hover: rgb(23 90 0);
    --color-negative: rgb(223, 3, 3);
    --color-negative-hover: rgb(193, 3, 3);

    /* Algemene fonts */
    --font-family: 'Lato', Arial, 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-radius-small: 4px;
    --border-color: rgb(228 228 231);
    --opacity-icon: 0.8;
    --transition-duration: 0.3s;
    --overlay-background: rgba(0, 0, 0, 0.5);

    /* Container */
    --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-x: 8px;
    --gap-standaard-y: 8px;
    --gap-icon-title: 8px;
    --gap-list-vertical: 4px;

    /* Buttons */
    --btn-padding: 8px 16px;
    --btn-font-size: 12px;
    --btn-gap: 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: 12px 20px;
    border-radius: var(--border-radius-small);
    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: 12px 20px;
    border-radius: var(--border-radius-small);
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(30,42,78,0.15);
    z-index: 99999999;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .switch {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  
  .switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .switch-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #e5e7eb;
    border-radius: 999px;
    transition: background var(--transition-duration);
    box-shadow: inset 0 0 0 1px var(--border-color);
    cursor: pointer;
  }
  
  .switch-slider::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--color-white);
    border-radius: 50%;
    transition: transform var(--transition-duration);
  }
  
  .switch-input:checked + .switch-slider {
    background: var(--color-primair);
  }
  
  .switch-input:checked + .switch-slider::after {
    transform: translateX(20px);
}

@media screen and (max-width: 1100px) {
    body {
        background-color: var(--color-white);
        font-family: var(--font-family);
        overflow-x: hidden;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        margin: 0;
    }  
}

@media screen and (max-width: 700px) {
    .toast-melding-positive,
    .toast-melding-negative {
        position: fixed;
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
        bottom: auto;
        white-space: nowrap;
        top: 12px;
        padding: 8px 16px;
        font-size: 11px;
      }
    }