/* Google Sans */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Google_Sans_Normal_latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Google_Sans_Normal_latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Google Sans (Medium) */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Google_Sans_Halfvet_latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Google_Sans_Halfvet_latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Google Sans (Bold) */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Google_Sans_Vet_latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Google_Sans_Vet_latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Google Sans Text */
@font-face {
  font-family: 'Google Sans Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Google_Sans_Text_Normal_latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Google_Sans_Text_Normal_latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Google Sans Text (Medium) */
@font-face {
  font-family: 'Google Sans Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Google_Sans_Text_Halfvet_latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Google_Sans_Text_Halfvet_latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Google Sans Text (Bold) */
@font-face {
  font-family: 'Google Sans Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Google_Sans_Text_Vet_latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Google_Sans_Text_Vet_latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Material_Symbols_Outlined.woff2') format('woff2');
}

@font-face {
    font-family: 'Google Emojis';
    src: url(fonts/NotoColorEmoji.ttf) format('truetype');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

body.light-mode {
    /* --- Core Colors (Groen) --- */
    --md-sys-color-primary: #2f7b45;
    --md-sys-color-primary-container: #b8f3c0;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-primary-container: #06240e;

    --md-sys-color-secondary: #4f6352;
    --md-sys-color-secondary-container: #dce6de;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-on-secondary-container: #233227;

    --md-sys-color-tertiary: #3a656e;
    --md-sys-color-tertiary-container: #beeaf6;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-on-tertiary-container: #001f25;

    --md-sys-color-error: #ba1a1a;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-on-error-container: #410002;

    /* --- Surfaces & Backgrounds --- */
    --md-sys-color-background: #f3f8f4;
    --md-sys-color-on-background: #1b261d;
    
    --md-sys-color-surface: #ffffff;
    --md-sys-color-surface-container: #e8efe9;
    --md-sys-color-surface-container-high: #e2e8e3; /* Voor chat bubbels etc */
    --md-sys-color-surface-variant: #d5e2d6;
    
    --md-sys-color-on-surface: #1b261d;
    --md-sys-color-on-surface-variant: #434843;
    
    --md-sys-color-outline: #737973;
    --md-sys-color-outline-variant: #c3c8c3;

    /* --- Text Colors --- */
    --md-sys-color-text-primary: #1b261d;
    --md-sys-color-text-secondary: #4a5c4e;
    --md-sys-color-text-tertiary: #758779;

    /* --- UI Specifics --- */
    --md-card-bg: #ffffff;
    --md-nav-rail-bg: #f3f8f4;
    --subject-card-border: #e0e0e0;
    --search-bar-bg: #e8efe9;
    
    /* --- Status Colors --- */
    --status-green-bg: #d9f5e3;
    --status-green-text: #2f7b45;
    --status-green-fill: #34c76a;
    
    --gloeiend-voor-kaartje: rgba(0,0,0,0.25);
    --rood-voor-ophangen: #ba1a1a;

    /* --- Planner Events (Default) --- */
    --event-toets-bg: #ffdad6; --event-toets-text: #93000a;
    --event-taak-bg: #e7deff; --event-taak-text: #21005d;
    --event-afspraak-bg: #dce6de; --event-afspraak-text: #0f1d15;
    --event-huiswerk-bg: #b8f3c0; --event-huiswerk-text: #002105;
    --today-indicator: #2f7b45;
    --grid-line: #e0e0e0;

    /* --- Dynamische Planner / Mindmap Specifiek --- */
    --col-accent-1: #c2e7ff; --col-text-1: #001d35;
    --col-accent-2: #ffd8e4; --col-text-2: #31111d;
    --col-accent-3: #f2f2f2; --col-text-3: #1f1f1f;
    --col-accent-4: #c4eed0; --col-text-4: #072711;
}


body.dark-mode {
    /* --- Core Colors (Groen) --- */
    --md-sys-color-primary: #b8f3c0;
    --md-sys-color-primary-container: #2b5f35;
    --md-sys-color-on-primary: #00390a;
    --md-sys-color-on-primary-container: #d8ffdf;

    --md-sys-color-secondary: #b6ccb8;
    --md-sys-color-secondary-container: #3c4a3d;
    --md-sys-color-on-secondary: #223526;
    --md-sys-color-on-secondary-container: #ddeedd;

    --md-sys-color-tertiary: #a2ceda;
    --md-sys-color-tertiary-container: #204e56;
    --md-sys-color-on-tertiary: #02363e;
    --md-sys-color-on-tertiary-container: #beeaf6;

    --md-sys-color-error: #ffb4ab;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error: #690005;
    --md-sys-color-on-error-container: #ffdad6;

    /* --- Surfaces & Backgrounds --- */
    --md-sys-color-background: #0f1310;
    --md-sys-color-on-background: #e2e7e2;
    
    --md-sys-color-surface: #1a1f1b;
    --md-sys-color-surface-container: #1e231f; /* Iets lichter dan background */
    --md-sys-color-surface-container-high: #282e29;
    --md-sys-color-surface-variant: #3f4a40;
    
    --md-sys-color-on-surface: #e2e7e2;
    --md-sys-color-on-surface-variant: #c2c8c2;
    
    --md-sys-color-outline: #8d938d;
    --md-sys-color-outline-variant: #434843;

    /* --- Text Colors --- */
    --md-sys-color-text-primary: #e2e7e2;
    --md-sys-color-text-secondary: #c0c9c0;
    --md-sys-color-text-tertiary: #909a90;

    /* --- UI Specifics --- */
    --md-card-bg: #121612;
    --md-nav-rail-bg: #0f1310;
    --subject-card-border: #444746;
    --search-bar-bg: #1f231f;

    /* --- Status Colors --- */
    --status-green-bg: #072910;
    --status-green-text: #8ef0b2;
    --status-green-fill: #32d67a;

    --gloeiend-voor-kaartje: rgba(255, 255, 255, 0.25);
    --rood-voor-ophangen: #ffb4ab;

    /* --- Planner Events (Dark) --- */
    --event-toets-bg: #93000a; --event-toets-text: #ffdad6;
    --event-taak-bg: #4f378b; --event-taak-text: #eaddff;
    --event-afspraak-bg: #3c4a3d; --event-afspraak-text: #ddeedd;
    --event-huiswerk-bg: #2b5f35; --event-huiswerk-text: #b8f3c0;
    --today-indicator: #b8f3c0;
    --grid-line: #444746;
}


body.light-mode.theme-purple {
    --md-sys-color-primary: #6750a4;
    --md-sys-color-primary-container: #eaddff;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-primary-container: #21005d;
    
    --md-sys-color-secondary-container: #e8def8;
    --md-sys-color-on-secondary-container: #1d192b;
    
    --md-sys-color-tertiary: #7d5260;
    --md-sys-color-tertiary-container: #ffd8e4;
    
    --md-sys-color-background: #f7f2fa;
    --md-sys-color-on-background: #1c1b1f;
    --md-sys-color-surface: #fffbfe;
    --md-sys-color-surface-container: #f3edf7;
    --md-sys-color-surface-variant: #e7e0ec;
    
    --md-nav-rail-bg: #f7f2fa;
    --today-indicator: #6750a4;
    --status-green-fill: #6750a4;
}

body.dark-mode.theme-purple {
    --md-sys-color-primary: #d0bcff;
    --md-sys-color-primary-container: #4f378b;
    --md-sys-color-on-primary: #381e72;
    --md-sys-color-on-primary-container: #eaddff;
    
    --md-sys-color-secondary-container: #4a4458;
    --md-sys-color-on-secondary-container: #e8def8;
    
    --md-sys-color-tertiary: #efb8c8;
    --md-sys-color-tertiary-container: #633b48;
    
    --md-sys-color-background: #141218;
    --md-sys-color-on-background: #e6e1e5;
    --md-sys-color-surface: #141218;
    --md-sys-color-surface-container: #1d1b20;
    --md-sys-color-surface-variant: #49454f;
    
    --md-nav-rail-bg: #141218;
    --today-indicator: #d0bcff;
    --status-green-fill: #d0bcff;
}


body.light-mode.theme-red {
    --md-sys-color-primary: #ba1a1a;            /* Iets feller rood */
    --md-sys-color-primary-container: #ffdad6;  /* Standaard rood container, minder zalm */
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-primary-container: #410002;

    --md-sys-color-secondary-container: #ffdad6; 
    --md-sys-color-on-secondary-container: #410002;

    --md-sys-color-background: #fff8f7;         /* Warme, rode gloed */
    --md-sys-color-on-background: #201514;

    --md-sys-color-surface: #fff8f7;
    --md-sys-color-surface-container: #fceae9;  /* Duidelijk rood, niet roze */
    --md-sys-color-surface-variant: #f5dedc;    /* Aards rood */

    --md-nav-rail-bg: #fff8f7;
    --today-indicator: #ba1a1a;
    --status-green-fill: #ba1a1a;
}


body.dark-mode.theme-red {
    --md-sys-color-primary: #ffb4ab;
    --md-sys-color-primary-container: #93000a;
    --md-sys-color-on-primary: #690005;
    --md-sys-color-on-primary-container: #ffdad6;
    
    --md-sys-color-secondary-container: #5c3f3d; /* Iets warmer */
    --md-sys-color-on-secondary-container: #ffdad6;
    
    --md-sys-color-background: #201a1a;
    --md-sys-color-on-background: #ede0de;
    --md-sys-color-surface: #201a1a;
    --md-sys-color-surface-container: #2b2020; /* Warmer donker */
    --md-sys-color-surface-variant: #534341;
    
    --md-nav-rail-bg: #201a1a;
    --today-indicator: #ffb4ab;
    --status-green-fill: #ffb4ab;
}


body.light-mode.theme-blue {
    --md-sys-color-primary: #0061a4;
    --md-sys-color-primary-container: #d1e4ff;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-primary-container: #001d36;
    
    --md-sys-color-secondary-container: #d7e2ee;
    --md-sys-color-on-secondary-container: #101c2b;
    
    --md-sys-color-background: #f0f5fa;
    --md-sys-color-on-background: #191c20;
    --md-sys-color-surface: #fdfcff;
    --md-sys-color-surface-container: #eaf1f9;
    --md-sys-color-surface-variant: #dde3ea;
    
    --md-nav-rail-bg: #f0f5fa;
    --today-indicator: #0061a4;
    --status-green-fill: #0061a4;
}

body.dark-mode.theme-blue {
    --md-sys-color-primary: #9ecaff;
    --md-sys-color-primary-container: #00497d;
    --md-sys-color-on-primary: #003258;
    --md-sys-color-on-primary-container: #d1e4ff;
    
    --md-sys-color-secondary-container: #3c4754;
    --md-sys-color-on-secondary-container: #d7e2ee;
    
    --md-sys-color-background: #101418;
    --md-sys-color-on-background: #e0e2e8;
    --md-sys-color-surface: #101418;
    --md-sys-color-surface-container: #1c2024;
    --md-sys-color-surface-variant: #43474e;
    
    --md-nav-rail-bg: #101418;
    --today-indicator: #9ecaff;
    --status-green-fill: #9ecaff;
}


body.light-mode.theme-amber {
    --md-sys-color-primary: #855400;
    --md-sys-color-primary-container: #ffddb6;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-primary-container: #2b1700;
    
    --md-sys-color-secondary-container: #feddba;
    --md-sys-color-on-secondary-container: #281806;
    
    --md-sys-color-background: #fff8f0;
    --md-sys-color-on-background: #231b10;
    --md-sys-color-surface: #fffbff;
    --md-sys-color-surface-container: #fff1e0;
    --md-sys-color-surface-variant: #f0e0cf;
    
    --md-nav-rail-bg: #fff8f0;
    --today-indicator: #855400;
    --status-green-fill: #855400;
}

body.dark-mode.theme-amber {
    --md-sys-color-primary: #ffb959;
    --md-sys-color-primary-container: #643f00;
    --md-sys-color-on-primary: #452b00;
    --md-sys-color-on-primary-container: #ffddb6;
    
    --md-sys-color-secondary-container: #412d12;
    --md-sys-color-on-secondary-container: #feddba;
    
    --md-sys-color-background: #19120b;
    --md-sys-color-on-background: #efe0cf;
    --md-sys-color-surface: #19120b;
    --md-sys-color-surface-container: #251e16;
    --md-sys-color-surface-variant: #524436;
    
    --md-nav-rail-bg: #19120b;
    --today-indicator: #ffb959;
    --status-green-fill: #ffb959;
}

body.light-mode.theme-pink {
    --md-sys-color-primary: #bc0067;            /* Meer magenta/diep roze */
    --md-sys-color-primary-container: #ffd8ec;  /* Koeler roze (blauwige ondertoon) */
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-primary-container: #3e001e;

    --md-sys-color-secondary-container: #fcd8e8; /* Snoepjesroze */
    --md-sys-color-on-secondary-container: #3e001e;

    --md-sys-color-background: #fff8fa;         /* Koel wit-roze */
    --md-sys-color-on-background: #1f1a1d;

    --md-sys-color-surface: #fff8fa;
    --md-sys-color-surface-container: #faeef5;  /* Magenta tint */
    --md-sys-color-surface-variant: #f2dce4;    /* Berry tint */

    --md-nav-rail-bg: #fff8fa;
    --today-indicator: #bc0067;
    --status-green-fill: #bc0067;
}

body.dark-mode.theme-pink {
    --md-sys-color-primary: #ffb1c8;            /* Iets koeler lichtroze */
    --md-sys-color-primary-container: #8e004b;  /* Diep magenta */
    --md-sys-color-on-primary: #54002b;
    --md-sys-color-on-primary-container: #ffd8ec;
    
    --md-sys-color-secondary-container: #703756;
    --md-sys-color-on-secondary-container: #ffd8ec;
    
    --md-sys-color-background: #1e1a1d;
    --md-sys-color-on-background: #eae0e3;
    --md-sys-color-surface: #1e1a1d;
    --md-sys-color-surface-container: #282024; /* Magenta donker */
    --md-sys-color-surface-variant: #514348;
    
    --md-nav-rail-bg: #1e1a1d;
    --today-indicator: #ffb1c8;
    --status-green-fill: #ffb1c8;
}


:root {
    --md-primary: var(--md-sys-color-primary);
    --md-on-primary: var(--md-sys-color-on-primary);
    --md-primary-container: var(--md-sys-color-primary-container);
    --md-on-primary-container: var(--md-sys-color-on-primary-container);
    
    --md-surface: var(--md-sys-color-surface);
    --md-on-surface: var(--md-sys-color-on-surface);
    --md-surface-variant: var(--md-sys-color-surface-variant);
    --md-on-surface-variant: var(--md-sys-color-on-surface-variant);
    
    --md-outline: var(--md-sys-color-outline);
    --md-outline-variant: var(--md-sys-color-outline-variant);
    
    --bg-app: var(--md-sys-color-background);
    --bg-surface: var(--md-sys-color-surface);
    --bg-surface-variant: var(--md-sys-color-surface-container);
    --text-main: var(--md-sys-color-text-primary);
    --text-sub: var(--md-sys-color-text-secondary);
}

/* =========================================
   9. MODAL STYLING (Voor thema-manager.js)
   ========================================= */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }

.modal-content {
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-surface-variant);
    padding: 24px; border-radius: 28px; width: 90%; max-width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
    color: var(--md-sys-color-text-primary);
}
.modal-overlay.open .modal-content { transform: translateY(0); }

.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.modal-header h3 { margin: 0; font-size: 1.5rem; }

.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.theme-option {
    background: none; border: none; display: flex; flex-direction: column;
    align-items: center; gap: 8px; cursor: pointer; padding: 8px;
    border-radius: 12px; transition: background 0.2s;
}
.theme-option:hover { background-color: var(--md-sys-color-surface-variant); }
.theme-option span { font-size: 0.875rem; color: var(--md-sys-color-text-primary); font-weight: 500; }

.color-circle {
    width: 48px; height: 48px; border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.1); box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.theme-option:hover .color-circle { transform: scale(1.1); }
body.dark-mode .color-circle { border: 2px solid rgba(255,255,255,0.2); }


.rail-brand .custom-icon {
          height: 28px;       
          width: auto;        
          display: block;
      }