/**
 * themes.css — visuele thema's voor framework-componenten.
 *
 * Conventie:
 *  - Activatie via `data-theme="<naam>"` op een ancestor (body, container, form)
 *  - Componenten krijgen `data-mm-component="..."` zodat thema's specifiek targeten
 *  - Default theme = geen overrides; style.css regelt de basis
 *  - Componenten erven het dichtstbijzijnde data-theme op de boom
 *
 * Beschikbaar:
 *   default   (geen overrides)
 *   dark      (donker palet)
 *   material  (floating labels, ripple-style focus)
 *
 * Toekomstige componenten (kalender, datepicker, custom-select) krijgen hier
 * hun thema-overrides bij. Conventie:
 *   [data-theme="<naam>"] [data-mm-component="<comp>"] { ... }
 */

/* ──────────────────────────────────────────────────────────────────────────
   Theme switcher UI (gebruikt op de demo-pagina)
   ─────────────────────────────────────────────────────────────────────── */

.theme-switcher {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    background: var(--card, #fff);
    margin-bottom: 1rem;
}
.theme-switcher label {
    padding: .35rem .75rem;
    border-radius: 6px;
    cursor: pointer;
    font: 500 .85rem/1 system-ui;
    user-select: none;
    transition: background .15s, color .15s;
}
.theme-switcher input { display: none; }
.theme-switcher input:checked + span {
    background: var(--primary, #6366f1);
    color: #fff;
}
.theme-switcher label:hover span:not(:has(~ input:checked)) {
    background: var(--bg, #f9fafb);
}
.theme-switcher span {
    display: block;
    padding: .35rem .75rem;
    margin: -.35rem -.75rem;
    border-radius: 6px;
}

/* ──────────────────────────────────────────────────────────────────────────
   DARK theme
   ─────────────────────────────────────────────────────────────────────── */

[data-theme="dark"] {
    background: #0f172a;
    color: #e2e8f0;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #1e293b;
}

[data-theme="dark"] [data-mm-component="form-field"] .form-label,
[data-theme="dark"] [data-mm-component="radio-group"] legend {
    color: #cbd5e1;
}

[data-theme="dark"] [data-mm-component="input"],
[data-theme="dark"] [data-mm-component="textarea"],
[data-theme="dark"] [data-mm-component="select"] {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}
[data-theme="dark"] [data-mm-component="input"]:focus,
[data-theme="dark"] [data-mm-component="textarea"]:focus,
[data-theme="dark"] [data-mm-component="select"]:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, .25);
}
[data-theme="dark"] [data-mm-component="input"]::placeholder,
[data-theme="dark"] [data-mm-component="textarea"]::placeholder {
    color: #64748b;
}

/* Dark-theme checkbox: leeg vierkant met een GROENE check die over de border
   heen steekt — sticker-look. Native checkbox blijft form-source-of-truth,
   alleen visueel vervangen via `appearance: none`. Pure CSS, geen JS. */
[data-theme="dark"] [data-mm-component="checkbox"] {
    display: flex;
    align-items: center;
    gap: 1rem;     /* extra ruimte zodat de uitstekende check niet over de label loopt */
}
[data-theme="dark"] [data-mm-component="checkbox"] .form-checkbox__input {
    appearance: none;
    -webkit-appearance: none;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    border: 2.5px solid #cbd5e1;
    border-radius: 6px;
    background: transparent;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    overflow: visible;     /* check mag uitsteken */
    transition: border-color .2s ease;
}

/* Asymmetrische sticker: bottom-left van de check zit nét binnen het vakje,
   top-right steekt 30% uit. inset = top right bottom left → bovenaan en
   rechts negatief, onder en links 0 (= aan box-edge). */
[data-theme="dark"] [data-mm-component="checkbox"] .form-checkbox__input::after {
    content: "";
    position: absolute;
    inset: -30% -30% 0 0;
    pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2322c55e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='2.5,8.5 6.5,12.5 13.5,3.5'/></svg>") center/contain no-repeat;
    /* drop-shadow op de SVG zelf — volgt de stroke, geen vierkante shadow */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
    opacity: 0;
    transform: scale(.3) rotate(-15deg);
    /* Pop-in met overshoot — 'iets anders dan standaard' */
    transition:
        opacity   .18s ease,
        transform .32s cubic-bezier(.34, 1.56, .64, 1);
}

[data-theme="dark"] [data-mm-component="checkbox"] .form-checkbox__input:hover {
    border-color: #f1f5f9;
}
[data-theme="dark"] [data-mm-component="checkbox"] .form-checkbox__input:checked {
    border-color: #cbd5e1;
}
[data-theme="dark"] [data-mm-component="checkbox"] .form-checkbox__input:checked::after {
    opacity: 1;
    transform: scale(1) rotate(0);
}
[data-theme="dark"] [data-mm-component="checkbox"] .form-checkbox__input:focus-visible {
    outline: 2px solid #818cf8;
    outline-offset: 3px;
}
[data-theme="dark"] [data-mm-component="checkbox"] .form-checkbox__label {
    color: #cbd5e1;
    cursor: pointer;
}

[data-theme="dark"] [data-mm-component="radio"] .form-radio__input {
    accent-color: #818cf8;
}
[data-theme="dark"] [data-mm-component="radio"] .form-radio__label {
    color: #cbd5e1;
}

[data-theme="dark"] .form-field__hint  { color: #64748b; }
[data-theme="dark"] .form-field__error { color: #fca5a5; }

[data-theme="dark"] .btn--primary,
[data-theme="dark"] .btn-primary {
    background: #818cf8;
    border-color: #818cf8;
}
[data-theme="dark"] .btn--primary:hover,
[data-theme="dark"] .btn-primary:hover {
    background: #6366f1;
    border-color: #6366f1;
}

/* Custom-select (mm-select) — display zit IN de wrapper, dropdown wordt
   door custom-select.js aan body geappend en krijgt expliciet `data-theme`
   meegekopieerd zodat onderstaande selectors raken. */
[data-theme="dark"] .mm-select-display,
[data-theme="dark"].mm-select-dropdown {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}
[data-theme="dark"] .mm-select-display[data-empty="1"] .mm-select-label {
    color: #64748b;
}
[data-theme="dark"] .mm-select-display:focus-visible,
[data-theme="dark"] .mm-select-display[aria-expanded="true"] {
    border-color: #818cf8;
    outline-color: #818cf8;
}
[data-theme="dark"].mm-select-dropdown {
    box-shadow: 0 4px 18px rgba(0,0,0,.6);
}
[data-theme="dark"].mm-select-dropdown .mm-select-search {
    border-bottom-color: #334155;
}
[data-theme="dark"].mm-select-dropdown .mm-select-search input {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}
[data-theme="dark"].mm-select-dropdown .mm-select-search input:focus {
    border-color: #818cf8;
}
[data-theme="dark"].mm-select-dropdown .mm-select-group {
    color: #64748b;
}
[data-theme="dark"].mm-select-dropdown .mm-select-option:hover,
[data-theme="dark"].mm-select-dropdown .mm-select-option[data-highlighted="1"] {
    background: #818cf8;
    color: #0f172a;
}

/* ──────────────────────────────────────────────────────────────────────────
   MATERIAL theme — floating labels + onderlijning i.p.v. boxen
   ─────────────────────────────────────────────────────────────────────── */

/*
 * Variabelen voor strakke verticale uitlijning. De label "rust" op de input-
 * baseline en zwermt naar boven bij focus of wanneer er een waarde is.
 *
 * "Leeg" wordt bepaald door `data-empty` op de input (gezet door
 * form-empty-state.js). Dat werkt voor input/textarea én select — i.t.t.
 * `:placeholder-shown` dat alleen op input/textarea werkt.
 */
[data-theme="material"] {
    --mm-input-height: 2.25rem;
    --mm-label-shift:  -0.95rem;
    --mm-label-scale:  0.78;
}

/* Floating label-veld: alleen voor input/textarea/select.
   Checkbox/radio gebruiken hun eigen label en hebben dit niet nodig. */
[data-theme="material"] [data-mm-component="form-field"]:has([data-mm-component="input"]),
[data-theme="material"] [data-mm-component="form-field"]:has([data-mm-component="textarea"]),
[data-theme="material"] [data-mm-component="form-field"]:has([data-mm-component="select"]) {
    position: relative;
    padding-top: 1.2rem;   /* ruimte voor opgezweefde label */
}

/* Label rust EXACT op de input-baseline: zelfde line-height als input-height
   zorgt voor automatic vertical centering, ongeacht font-metrics. */
[data-theme="material"] [data-mm-component="form-field"]:has([data-mm-component="input"]) > .form-label,
[data-theme="material"] [data-mm-component="form-field"]:has([data-mm-component="textarea"]) > .form-label,
[data-theme="material"] [data-mm-component="form-field"]:has([data-mm-component="select"]) > .form-label {
    position: absolute;
    top: 1.2rem;                              /* gelijk aan padding-top form-field */
    left: 0;
    margin: 0;
    padding: 0;
    line-height: var(--mm-input-height);      /* label vertikaal binnen input-vlak */
    pointer-events: none;
    transform-origin: left top;
    transition: transform .15s ease, color .15s ease;
    color: #6b7280;
    font-weight: 400;
}

/* Label "zweeft" als de input focus heeft of niet leeg is. Voor customSelect
   loopt focus via de mm-select-display (button) — vandaar de aria-expanded
   en :focus checks op die laag erbij. */
[data-theme="material"] [data-mm-component="form-field"]:has([data-mm-component="input"]:focus) > .form-label,
[data-theme="material"] [data-mm-component="form-field"]:has([data-mm-component="input"]:not([data-empty])) > .form-label,
[data-theme="material"] [data-mm-component="form-field"]:has([data-mm-component="textarea"]:focus) > .form-label,
[data-theme="material"] [data-mm-component="form-field"]:has([data-mm-component="textarea"]:not([data-empty])) > .form-label,
[data-theme="material"] [data-mm-component="form-field"]:has([data-mm-component="select"]:focus) > .form-label,
[data-theme="material"] [data-mm-component="form-field"]:has([data-mm-component="select"]:not([data-empty])) > .form-label,
[data-theme="material"] [data-mm-component="form-field"]:has(.mm-select-display:focus) > .form-label,
[data-theme="material"] [data-mm-component="form-field"]:has(.mm-select-display[aria-expanded="true"]) > .form-label {
    transform: translateY(-1.1rem) scale(var(--mm-label-scale));
    color: var(--primary, #6366f1);
}

/* Onderlijn-stijl voor de 3 input-types */
[data-theme="material"] [data-mm-component="input"],
[data-theme="material"] [data-mm-component="textarea"],
[data-theme="material"] [data-mm-component="select"] {
    height: var(--mm-input-height);
    border: none;
    border-bottom: 1px solid #d1d5db;
    border-radius: 0;
    padding: 0 0 .25rem 0;
    background: transparent;
    box-shadow: none;
    transition: border-color .2s;
}

/* Material-conventie: de label IS de placeholder. De native placeholder-tekst
   moet dus weg zolang het veld leeg én niet focused is — anders zie je twee
   teksten over elkaar. Bij focus mag 'ie verschijnen als hint, want dan is
   de label al opgezweefd. */
[data-theme="material"] [data-mm-component="input"]::placeholder,
[data-theme="material"] [data-mm-component="textarea"]::placeholder {
    color: transparent;
    transition: color .15s ease;
}
[data-theme="material"] [data-mm-component="input"]:focus::placeholder,
[data-theme="material"] [data-mm-component="textarea"]:focus::placeholder {
    color: #9ca3af;
}

/* Native <select> heeft geen ::placeholder. Bij Material verbergen we de
   selected-text van de disabled placeholder-option op twee manieren:
   1. select-kleur transparent (werkt op Firefox)
   2. option-kleur transparent specifiek voor de placeholder-option
      (FormRenderer markt die met `data-placeholder=""`); Chromium leest die
      kleur uit de option zelf en negeert select-color voor de gesloten state.
   Open dropdown krijgt explicit kleur terug zodat opties leesbaar blijven. */
[data-theme="material"] [data-mm-component="select"][data-empty]:not(:focus) {
    color: transparent;
    -webkit-text-fill-color: transparent;  /* Chromium negeert anders 'color' voor selected disabled option */
}
[data-theme="material"] [data-mm-component="select"][data-empty]:not(:focus) option[data-placeholder] {
    color: transparent;
    -webkit-text-fill-color: transparent;
}
[data-theme="material"] [data-mm-component="select"] option:not([data-placeholder]) {
    color: #1f2937;
    -webkit-text-fill-color: initial;
}
[data-theme="material"] [data-mm-component="textarea"] {
    height: auto;
    min-height: var(--mm-input-height);
}
[data-theme="material"] [data-mm-component="input"]:focus,
[data-theme="material"] [data-mm-component="textarea"]:focus,
[data-theme="material"] [data-mm-component="select"]:focus {
    border-bottom-color: var(--primary, #6366f1);
    box-shadow: inset 0 -1px 0 0 var(--primary, #6366f1);  /* "2px" zonder layout-shift */
    outline: none;
}

/* Checkbox = Material-style toggle-switch (slide).
   Geen floating-label-padding op de wrapper. */
[data-theme="material"] [data-mm-component="form-field"]:has([data-mm-component="checkbox"]) {
    padding-top: 0;
}
[data-theme="material"] [data-mm-component="checkbox"] {
    display: flex;
    align-items: center;
    gap: .75rem;
}
[data-theme="material"] [data-mm-component="checkbox"] .form-checkbox__input {
    appearance: none;
    -webkit-appearance: none;
    width: 2.4rem;
    height: 1.4rem;
    margin: 0;
    border-radius: 999px;
    background: #cbd5e1;
    position: relative;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
}
[data-theme="material"] [data-mm-component="checkbox"] .form-checkbox__input::before {
    content: "";
    position: absolute;
    top: 50%;                       /* vertikaal gecentreerd, ongeacht knob-grootte */
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transform: translateY(-50%);
    transition: transform .2s;
}
[data-theme="material"] [data-mm-component="checkbox"] .form-checkbox__input:checked {
    background: var(--primary, #6366f1);
}
[data-theme="material"] [data-mm-component="checkbox"] .form-checkbox__input:checked::before {
    /* Combineer center + slide */
    transform: translate(1rem, -50%);
}
[data-theme="material"] [data-mm-component="checkbox"] .form-checkbox__input:focus-visible {
    outline: 2px solid var(--primary, #6366f1);
    outline-offset: 2px;
}

/* Radio idem — geen floating, gewoon material-accent */
[data-theme="material"] [data-mm-component="form-field"]:has([data-mm-component="radio-group"]) {
    padding-top: 0;
}
[data-theme="material"] [data-mm-component="radio-group"] {
    border: none;
    padding: 0;
}
[data-theme="material"] [data-mm-component="radio"] .form-radio__input {
    accent-color: var(--primary, #6366f1);
    width: 1.15rem;
    height: 1.15rem;
}

[data-theme="material"] .btn--primary,
[data-theme="material"] .btn-primary {
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
[data-theme="material"] .btn--primary:hover,
[data-theme="material"] .btn-primary:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
}

/* Custom-select in Material: onderlijn-stijl voor de display, lift-shadow
   voor de dropdown (geappend op body, krijgt data-theme via JS). */
[data-theme="material"] .mm-select-display {
    border: none;
    border-bottom: 1px solid #d1d5db;
    border-radius: 0;
    padding: .25rem 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    width: 100%;
    transition: border-color .2s;
}
[data-theme="material"] .mm-select-display:focus-visible,
[data-theme="material"] .mm-select-display[aria-expanded="true"] {
    outline: none;
    border-bottom-color: var(--primary, #6366f1);
    box-shadow: inset 0 -1px 0 0 var(--primary, #6366f1);
}
[data-theme="material"].mm-select-dropdown {
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
}

/* In Material is de form-label de visuele placeholder. De interne placeholder-
   tekst van mm-select-display moet weg zolang leeg + dropdown gesloten —
   anders zie je "Land" (form-label) én "Kies een land..." (mm-select-label)
   over elkaar. Bij open dropdown verschijnt de placeholder weer als hint. */
[data-theme="material"] .mm-select-display[data-empty="1"]:not([aria-expanded="true"]) .mm-select-label {
    color: transparent;
}

/* ──────────────────────────────────────────────────────────────────────────
   Placeholders voor toekomstige JS-componenten
   ─────────────────────────────────────────────────────────────────────── */

/* mm-calendar — wordt later toegevoegd
   [data-theme="dark"] [data-mm-component="calendar"] { ... }
   [data-theme="material"] [data-mm-component="calendar"] { ... } */

/* mm-datepicker, mm-timepicker, mm-modal, mm-tooltip — idem */

/* ──────────────────────────────────────────────────────────────────────────
   File Browser — dark + material varianten
   Default light-thema staat in modules/file-browser.css.
   ─────────────────────────────────────────────────────────────────────── */

[data-theme="dark"] [data-mm-component="file-browser"] {
    --fb-bg:           #0f172a;
    --fb-bg-alt:       #0b1220;
    --fb-bg-thumb:     #020617;
    --fb-border:       #1e293b;
    --fb-text:         #e2e8f0;
    --fb-text-soft:    #94a3b8;
    --fb-text-muted:   #64748b;
    --fb-tree-hover:   #1e293b;
    --fb-tree-active:  #1e3a8a;
    --fb-tree-active-fg: #ffffff;
    --fb-file-bg:      #0b1220;
    --fb-file-border:  #1e293b;
    --fb-file-hover:   #475569;
    --fb-file-selected-bg:     #1e1b4b;
    --fb-file-selected-border: #6366f1;
    --fb-btn-bg:       #1e293b;
    --fb-btn-bg-hover: #334155;
    --fb-btn-border:   #334155;
    --fb-btn-text:     #e2e8f0;
    --fb-btn-primary-bg: #4f46e5;
    --fb-btn-primary-bg-hover: #6366f1;
    --fb-btn-primary-text: #ffffff;
    --fb-btn-danger-bg: #7f1d1d;
    --fb-btn-danger-bg-hover: #991b1b;
    --fb-btn-danger-border: #991b1b;
    --fb-btn-danger-text: #fee2e2;
    --fb-input-bg:     #0f172a;
    --fb-input-border: #334155;
    --fb-folder-drop-bg: #3730a3;
}

[data-theme="material"] [data-mm-component="file-browser"] {
    --fb-bg:           #fafafa;
    --fb-bg-alt:       #f5f5f5;
    --fb-bg-thumb:     #eeeeee;
    --fb-border:       #e0e0e0;
    --fb-text:         #212121;
    --fb-text-soft:    #616161;
    --fb-text-muted:   #9e9e9e;
    --fb-tree-hover:   #eeeeee;
    --fb-tree-active:  #e3f2fd;
    --fb-tree-active-fg: #0d47a1;
    --fb-file-bg:      #ffffff;
    --fb-file-border:  #e0e0e0;
    --fb-file-hover:   #bdbdbd;
    --fb-file-selected-bg:     #e3f2fd;
    --fb-file-selected-border: #1976d2;
    --fb-btn-bg:       #ffffff;
    --fb-btn-bg-hover: #f5f5f5;
    --fb-btn-border:   #e0e0e0;
    --fb-btn-text:     #212121;
    --fb-btn-primary-bg: #1976d2;
    --fb-btn-primary-bg-hover: #1565c0;
    --fb-btn-primary-text: #ffffff;
    --fb-btn-danger-bg: #ffebee;
    --fb-btn-danger-bg-hover: #ffcdd2;
    --fb-btn-danger-border: #ef9a9a;
    --fb-btn-danger-text: #c62828;
    --fb-input-bg:     #ffffff;
    --fb-input-border: #bdbdbd;
    --fb-folder-drop-bg: #bbdefb;
}

/* Material: subtieler shadow op file-tiles ipv border */
[data-theme="material"] [data-mm-component="file-browser"] .mm-fb-file {
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    border: 1px solid transparent;
}
[data-theme="material"] [data-mm-component="file-browser"] .mm-fb-file:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
[data-theme="material"] [data-mm-component="file-browser"] .mm-fb-btn--primary {
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .05em;
    box-shadow: 0 2px 4px rgba(25, 118, 210, .25);
}

/* ──────────────────────────────────────────────────────────────────────────
   Dialog — dark + material varianten
   Default light-thema staat in modules/dialog.css. De dialog wordt op body
   ge-append, dus we matchen op het `<html data-theme>`-niveau.
   ─────────────────────────────────────────────────────────────────────── */

[data-theme="dark"] .mm-dialog {
    --dialog-bg:           #1e293b;
    --dialog-text:         #e2e8f0;
    --dialog-border:       #334155;
    --dialog-border-soft:  #1e293b;
    --dialog-header-bg:    #0f172a;
    --dialog-footer-bg:    #0f172a;
    --dialog-btn-bg:       #334155;
    --dialog-btn-hover:    #475569;
    --dialog-input-bg:     #0f172a;
    --dialog-input-border: #475569;
    --dialog-accent:       #6366f1;
    --dialog-accent-hover: #818cf8;
    --dialog-danger:       #ef4444;
    --dialog-danger-hover: #dc2626;
}
[data-theme="dark"] .mm-dialog-backdrop {
    background: rgba(0, 0, 0, .55);
}

[data-theme="material"] .mm-dialog {
    --dialog-bg:           #ffffff;
    --dialog-text:         #212121;
    --dialog-border:       #e0e0e0;
    --dialog-border-soft:  #f5f5f5;
    --dialog-header-bg:    #fafafa;
    --dialog-footer-bg:    #fafafa;
    --dialog-btn-bg:       #ffffff;
    --dialog-btn-hover:    #f5f5f5;
    --dialog-input-bg:     #ffffff;
    --dialog-input-border: #bdbdbd;
    --dialog-accent:       #1976d2;
    --dialog-accent-hover: #1565c0;
    --dialog-danger:       #d32f2f;
    --dialog-danger-hover: #c62828;
    border-radius: 4px;
    box-shadow:    0 24px 38px rgba(0,0,0,.14), 0 9px 46px rgba(0,0,0,.12), 0 11px 15px rgba(0,0,0,.20);
}
[data-theme="material"] .mm-dialog-btn--primary {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .05em;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(25, 118, 210, .25);
}