/* =====================================================================
   TOOLIFY-STIJL voor de Digitale Wachtrij (testlaag)
   Wordt NA style.css geladen en verandert enkel kleuren, vormen en lettertypes (geen indeling).
   De kleuren zijn die van de rest van Toolify (css/basis.css) en volgen dus ook het gekozen
   licht of donker thema van de site. Terug naar de vorige stijl: open de pagina met ?stijl=oud
   (of haal de regel <link id="toolifyStijl"> uit index.html weg).
   ===================================================================== */
@import url('/fonts/inter.css');
@import url('/fonts/poppins-robotomono-75eb97.css');

/* ---------- kleuren: donker (zoals de site) ---------- */
:root {
    --merk: #7a7cf7;

    --bg: #0e0f1d;
    --vlak: #161729;
    --vlak-2: #1d1f36;
    --vlak-hover: #23264a;
    --rand: #2a2c4d;
    --tekst: #eeedfb;
    --tekst-2: #a9a8c9;
    --tekst-3: #76779c;
    --kop-tint: #0a0b17;
    --kop-rand: #2a2c4d;
    --kop-schaduw: 0 8px 24px -14px rgba(0, 0, 0, 0.8);
    --gloed-1: rgba(122, 124, 247, 0.10);
    --gloed-2: rgba(232, 121, 249, 0.06);
    --stip: rgba(180, 184, 253, 0.12);
    --schaduw-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --schaduw-2: 0 12px 32px -14px rgba(0, 0, 0, 0.65);
    --teal: #2dd4bf;
    --r-s: 10px; --r-m: 16px; --r-l: 24px;
    color-scheme: dark;
}
/* ---------- kleuren: licht (de standaard van de site) ---------- */
:root.light-mode {
    --merk: #5b5be6;

    --bg: #f8f8fd;
    --vlak: #ffffff;
    --vlak-2: #f3f1fb;
    --vlak-hover: #ece8fb;
    --rand: #e4e1f2;
    --tekst: #1d1b36;
    --tekst-2: #55547a;
    --tekst-3: #8786a6;
    --kop-tint: #efeefa;
    --kop-rand: #e0ddf1;
    --kop-schaduw: 0 8px 24px -14px rgba(60, 40, 140, 0.28);
    --gloed-1: rgba(91, 91, 230, 0.09);
    --gloed-2: rgba(217, 70, 239, 0.06);
    --stip: rgba(91, 91, 230, 0.18);
    --schaduw-1: 0 1px 2px rgba(30, 20, 80, 0.06);
    --schaduw-2: 0 12px 30px -14px rgba(60, 40, 140, 0.25);
    --teal: #0d9488;
    color-scheme: light;
}

/* ---------- afgeleide kleuren en de kleuren die de gebruiker zelf kan kiezen ----------
   De Weergave-instellingen zetten --merk en --k-wachtrij / --k-loket1 / --k-loket2 op <html>; hieronder valt alles daarvan terug op de standaard. */
:root {
    --k-wachtrij: #e11d48;
    --k-loket1: var(--merk);
    --k-loket2: #0d9488;
    --k-wachtrij-fg: #ffffff;                 /* tekstkleur op de kop: wit, of donker op een lichte kleur (zet de JS) */
    --k-loket1-fg: var(--merk-fg, #ffffff);
    --k-loket2-fg: #ffffff;
    --merk-sterk: color-mix(in srgb, var(--merk) 82%, #000);
    --merk-zacht: color-mix(in srgb, var(--merk) 18%, var(--vlak));
    --merk-tekst: color-mix(in srgb, var(--merk) 55%, #fff);
    --verloop: linear-gradient(135deg, var(--merk), color-mix(in srgb, var(--merk) 75%, #fff));
}
:root.light-mode {
    --merk-zacht: color-mix(in srgb, var(--merk) 12%, #fff);
    --merk-tekst: var(--merk);
}

body::after { display: none; }

/* ---------- pagina ---------- */
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: color-mix(in srgb, var(--merk) 5%, var(--bg));
    color: var(--tekst);
}
body::before { background-image: none; }          /* één rustige, effen achtergrond: de kleur zit in de panelen zelf */

/* ---------- menubalk ---------- */
.header {
    background: var(--kop-tint);
    border-bottom: 1px solid var(--kop-rand);
    box-shadow: var(--kop-schaduw);
    color: var(--tekst);
}
h1 {
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    background: linear-gradient(135deg, var(--merk-tekst), color-mix(in srgb, var(--merk-tekst) 70%, #a78bfa));
    -webkit-background-clip: text;
    background-clip: text;
}
.menu button, .dropdown-btn, .header-knop {
    background: var(--vlak);
    color: var(--tekst);
    border: 1px solid var(--rand);
    border-radius: var(--r-m);
    backdrop-filter: none;
    text-shadow: none;
    font-weight: 600;
    box-shadow: var(--schaduw-1);
}
.menu button:hover, .dropdown-btn:hover, .header-knop:hover {
    background: var(--vlak-hover);
    border-color: var(--merk);
    transform: translateY(-1px);
}

.dropdown-content {
    background: var(--vlak);
    border: 1px solid var(--rand);
    border-radius: var(--r-m);
    box-shadow: var(--schaduw-2);
    backdrop-filter: none;
    color: var(--tekst);
}
.dropdown-content a, .dropdown-content .menu-actie { color: var(--tekst); text-shadow: none; }
.dropdown-content a:hover, .dropdown-content .menu-actie:hover { background: var(--vlak-hover); }
.dropdown-item-toggle { color: var(--tekst); }
.dropdown-item-toggle:hover { background: var(--vlak-hover); }
.dropdown-item-toggle input[type="checkbox"] { border-color: var(--tekst-3); background-color: var(--vlak); }
.dropdown-item-toggle input[type="checkbox"]:checked { background-color: var(--merk); border-color: var(--merk); }
.dropdown-separator { background: var(--rand); }
.dropdown-item-header, .kleur-kop { color: var(--tekst-3); }

.loket-mode-switch { background: var(--vlak-2); border: 1px solid var(--rand); box-shadow: none; border-radius: var(--r-s); }
.loket-mode-switch button {
    background: transparent; color: var(--tekst-2); border: 0; border-radius: 0; text-shadow: none; box-shadow: none; backdrop-filter: none;
}
.loket-mode-switch button:hover { background: var(--vlak-hover); transform: none; border-color: transparent; }
.loket-mode-switch button.active { background: var(--verloop); color: #fff; text-shadow: none; font-weight: 700; }

.loket-name-input-group { background: var(--vlak-2); border: 1px solid var(--rand); box-shadow: none; backdrop-filter: none; border-radius: var(--r-s); }
.loket-name-input-group:focus-within { border-color: var(--merk); background: var(--vlak); }
.loket-name-input-group label { color: var(--tekst-2); text-shadow: none; }
.loket-name-input-group input { color: var(--tekst); text-shadow: none; }
.loket-name-input-group input::placeholder { color: var(--tekst-3); }
.figure-select-radio-group { background: var(--vlak-2); border: 1px solid var(--rand); box-shadow: none; backdrop-filter: none; border-radius: var(--r-s); }
.figure-select-radio-group label { color: var(--tekst); }
.figure-select-radio-group label:hover { color: var(--merk); }
.figure-select-radio-group input[type="radio"] { border-color: var(--tekst-3); background-color: var(--vlak); }
.figure-select-radio-group input[type="radio"]:checked { background-color: var(--merk); border-color: var(--merk); }

/* ---------- kaarten ---------- */
.section, .children-section {
    background: var(--vlak);
    border: 1px solid var(--rand);
    border-radius: var(--r-l);
    box-shadow: var(--schaduw-2);
    backdrop-filter: none;
}
.section:hover { transform: none; box-shadow: var(--schaduw-2); }
/* elk paneel krijgt een tint van zijn eigen kleur (niet alleen de kop), met een zachte gloed naar boven */
.wachtrij-section { --paneel: var(--k-wachtrij); }
.loket1-section { --paneel: var(--k-loket1); }
.loket2 { --paneel: var(--k-loket2); }
.wachtrij-section, .loket1-section, .loket2 {
    background:
        radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--paneel) 16%, transparent), transparent 70%),
        color-mix(in srgb, var(--paneel) 9%, var(--vlak));
    border-color: color-mix(in srgb, var(--paneel) 38%, var(--rand));
}
.children-section {
    background: radial-gradient(120% 40% at 50% 0%, color-mix(in srgb, var(--merk) 12%, transparent), transparent 70%), color-mix(in srgb, var(--merk) 6%, var(--vlak));
    border-color: color-mix(in srgb, var(--merk) 30%, var(--rand));
}
.section-header { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 600; }
.wachtrij-section .section-header { --fg: var(--k-wachtrij-fg); background: linear-gradient(135deg, var(--k-wachtrij), color-mix(in srgb, var(--k-wachtrij) 86%, #fff)); }
.loket-section .section-header { --fg: var(--k-loket1-fg); background: linear-gradient(135deg, var(--k-loket1), color-mix(in srgb, var(--k-loket1) 86%, #fff)); }
.loket2 .section-header { --fg: var(--k-loket2-fg); background: linear-gradient(135deg, var(--k-loket2), color-mix(in srgb, var(--k-loket2) 86%, #fff)); }
.section-header.dark { --fg: #ffffff; background: linear-gradient(135deg, #1d1b36, #3b3a78); }
.next-btn, .loket2 .next-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    box-shadow: none;
    border-radius: var(--r-s);
    font-weight: 700;
}
.next-btn:hover, .loket2 .next-btn:hover { background: rgba(255, 255, 255, 0.32); box-shadow: none; }

/* ---------- wachtrij ---------- */
.queue-item { border-radius: 12px; box-shadow: var(--schaduw-1); }
.queue-list::-webkit-scrollbar-thumb { background: var(--merk); opacity: 0.5; }

/* ---------- loketten ---------- */
.loket-display {
    background: color-mix(in srgb, var(--k-loket1) 14%, var(--vlak));
    border: 3px dashed color-mix(in srgb, var(--k-loket1) 75%, transparent);
    color: var(--tekst);
    border-radius: var(--r-m);
}
.loket-display:not(:empty) { background: color-mix(in srgb, var(--k-loket1) 30%, var(--vlak)); border-color: var(--k-loket1); }
.loket2 .loket-display { background: color-mix(in srgb, var(--k-loket2) 20%, var(--vlak)); border-color: color-mix(in srgb, var(--k-loket2) 75%, transparent); }
.loket2 .loket-display:not(:empty) { background: color-mix(in srgb, var(--k-loket2) 30%, var(--vlak)); border-color: var(--k-loket2); }
.loket-display.drag-over-loket { border-color: #f59e0b; background: rgba(245, 158, 11, 0.12); box-shadow: 0 0 1.25rem 0.25rem rgba(245, 158, 11, 0.35); }

/* ---------- lijst met kinderen ---------- */
.child-btn { border-radius: 12px; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: var(--schaduw-1); }
.figure-mode-active .child-btn, .figure-mode-active .queue-item {
    background-color: var(--vlak-2) !important;
    border: 1px solid var(--rand);
    color: var(--tekst);
    text-shadow: none;
}
.figure-mode-active .child-btn.in-queue { background-color: var(--vlak-2) !important; opacity: 0.35; }
.import-file-btn, .toggle-add-menu-btn { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); border-radius: var(--r-s); }

.manual-add-block { background: var(--vlak-2); border: 1px solid var(--rand); box-shadow: none; border-radius: var(--r-m); }
.manual-add-name-group input { background: var(--vlak); border: 1px solid var(--rand); color: var(--tekst); border-radius: var(--r-s); }
.manual-add-name-group input::placeholder { color: var(--tekst-3); }
.manual-add-name-group input:focus { border-color: var(--merk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merk) 28%, transparent); background: var(--vlak); }
.manual-add-name-group button#addNameBtn { background: var(--verloop); border-radius: var(--r-s); box-shadow: var(--schaduw-1); font-weight: 700; }
.figure-picker-grid { background: var(--vlak); border: 1px solid var(--rand); }
.figure-picker-item { background: var(--vlak-2); border: 2px solid var(--rand); }
.figure-picker-item:hover { background: var(--merk-zacht); border-color: var(--merk); }
.figure-picker-item.already-selected { border-color: var(--rand); }
.kleur-chip { border-color: var(--vlak); box-shadow: 0 0 0 1px var(--rand); }
.kleur-chip[aria-checked="true"] { outline-color: var(--tekst); }

/* ---------- menu van een kind, meldingen, bevestiging ---------- */
.custom-context-menu { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--r-m); box-shadow: var(--schaduw-2); backdrop-filter: none; }
.context-menu-item { color: var(--tekst); }
.context-menu-item:hover { background: var(--merk-zacht); color: var(--merk-tekst); }
.context-kleuren { border-bottom-color: var(--rand); }
.queue-notification { background: #e11d48; border-radius: var(--r-m); }
.toast { background: #1d1b36; border-radius: var(--r-m); }
.toast button { background: var(--merk); }
.dialoog { background: var(--vlak); color: var(--tekst); border: 1px solid var(--rand); border-radius: var(--r-l); }
.dialoog p { color: var(--tekst-2); }
.dialoog-nee { background: var(--vlak-2); color: var(--tekst); }
.dialoog-nee:hover { background: var(--vlak-hover); }
.dialoog-ja { background: var(--fout, #e03131); }

button:focus-visible, input:focus-visible, label:has(input:focus-visible), .dropdown-btn:focus-visible { outline: 3px solid var(--merk-tekst); outline-offset: 2px; }


/* ---------- het stijlmenu (onder Weergave): licht/donker, kleurthema en eigen kleuren ---------- */
#menuWeergave { max-height: calc(100vh - 5.5rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--merk) transparent; }
.stijl-sectie { padding: 0.625rem 1.125rem 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 16.5rem; }
.stijl-sectie .dropdown-item-header { margin-top: 0.35rem; margin-bottom: 0; }
.thema-keuze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.thema-knop {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    background: var(--vlak-2); color: var(--tekst-2); border: 1px solid var(--rand); border-radius: var(--r-s);
    padding: 0.4rem 0.2rem 0.35rem; font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; box-shadow: none;
}
.thema-knop:hover { border-color: var(--merk); background: var(--vlak-hover); }
.thema-knop[aria-pressed="true"] { border-color: var(--merk); box-shadow: 0 0 0 2px var(--merk); color: var(--tekst); }
.thema-stippen { display: flex; }
.thema-stippen i { width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid var(--vlak-2); margin-left: -0.2rem; }
.thema-stippen i:first-child { margin-left: 0; }
.eigen-kleuren { margin-top: 0.15rem; }
.eigen-kleuren > summary { cursor: pointer; font-size: 0.8rem; font-weight: 700; color: var(--tekst-2); padding: 0.35rem 0; list-style-position: inside; }
.eigen-kleuren > summary:hover { color: var(--tekst); }
.eigen-kleuren[open] > summary { margin-bottom: 0.3rem; }
.eigen-kleuren .stijl-kleur { margin-bottom: 0.35rem; }
.stijl-kleur { display: flex; align-items: center; gap: 0.5rem; }
.stijl-kleur-naam { flex: 1; font-size: 0.8rem; font-weight: 600; color: var(--tekst-2); }
.kleur-veld {
    -webkit-appearance: none; appearance: none; width: 3.4rem; height: 1.9rem; padding: 0; cursor: pointer;
    border: 2px solid var(--vlak); border-radius: 999px; box-shadow: 0 0 0 1px var(--rand); background: none; overflow: hidden;
}
.kleur-veld::-webkit-color-swatch-wrapper { padding: 0; }
.kleur-veld::-webkit-color-swatch { border: 0; border-radius: 999px; }
.kleur-veld::-moz-color-swatch { border: 0; border-radius: 999px; }
.kleur-veld:hover { box-shadow: 0 0 0 2px var(--merk); }
.stijl-standaard {
    width: 1.9rem; height: 1.9rem; padding: 0; display: grid; place-items: center; font-size: 1rem; line-height: 1;
    border-radius: 999px; background: var(--vlak-2); color: var(--tekst-2); border: 1px solid var(--rand); box-shadow: none; cursor: pointer;
}
.stijl-standaard:hover:not(:disabled) { border-color: var(--merk); color: var(--tekst); background: var(--vlak-hover); }
.stijl-standaard:disabled { opacity: 0.35; cursor: default; }
.stijl-hint { font-size: 0.72rem; color: var(--tekst-3); line-height: 1.35; margin: 0.1rem 0 0; }
.stijl-sectie .menu-actie { padding: 0.55rem 0.6rem; margin-top: 0.3rem; border-radius: var(--r-s); text-align: center; border: 1px solid var(--rand); width: 100%; }
body.stijl-oud .stijl-sectie { display: none; }



/* "Vliegend figuurtje": de vier keuzes naast elkaar (korter menu) */
.figure-select-radio-group { flex-direction: row; flex-wrap: wrap; gap: 0.3rem 1rem; }


/* ---------- tekst op de gekozen kleuren: wit of donker, naargelang wat leesbaar is ---------- */
.section-header { color: var(--fg, #fff); }
#loket1Name, #loket2Name { color: var(--fg, #fff); text-shadow: none; }
.shortcuts { color: color-mix(in srgb, var(--fg, #fff) 92%, transparent); }
.keyboard-icon { color: color-mix(in srgb, var(--fg, #fff) 70%, transparent); }
.shortcut-key { background: color-mix(in srgb, var(--fg, #fff) 22%, transparent); color: var(--fg, #fff); box-shadow: none; }
.next-btn, .loket2 .next-btn {
    background: color-mix(in srgb, var(--fg, #fff) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--fg, #fff) 38%, transparent);
    color: var(--fg, #fff);
}
.next-btn:hover, .loket2 .next-btn:hover { background: color-mix(in srgb, var(--fg, #fff) 30%, transparent); }
.loket-mode-switch button.active, .manual-add-name-group button#addNameBtn, .toast button { color: var(--merk-fg, #fff); }