/* =====================================================================
   NOCTURNE THEMA — Q&A Portaal Jongeren Al Ihsaan
   ---------------------------------------------------------------------
   Laadt NA style.css en overschrijft alleen kleur, contrast en
   knopvorm. Geen enkele layoutregel, geen klassewijziging in de views.
   Licht/donker is een HANDMATIGE keuze van de bezoeker (knop in het
   menu), geen automatische systeemdetectie. Voorkeur wordt onthouden
   via localStorage ("theme") en toegepast als data-theme-attribuut op
   <html>, via het gedeelde /js/theme-toggle.js.

   Installatie: zet dit bestand in /public en voeg in elke view direct
   onder de bestaande style.css-link toe:

     <link rel="stylesheet" href="/nocturne.css">
     <script nonce="{{NONCE}}">document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') || 'light');</script>
     <script src="/js/theme-toggle.js" nonce="{{NONCE}}"></script>

   Verwijderen = de links weghalen. style.css blijft ongewijzigd.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */

:root {
    color-scheme: light;

    --qa-bg: #f4f7fa;
    --qa-surface: #ffffff;
    --qa-raised: #f8fafc;
    --qa-text: #1e293b;
    --qa-muted: #64748b;
    --qa-border: #e2e8f0;
    --qa-border-soft: #e6ecf3;

    --qa-accent: #796cbf;
    --qa-accent-text: #5d5294;
    --qa-tint: #f8f8fd;
    --qa-tint-border: #d2cefd;

    --qa-ok: #15803d;
    --qa-ok-tint: #eafaf0;
    --qa-ok-border: #bfe6cd;
    --qa-warn: #92400e;
    --qa-warn-tint: #fdf6e7;
    --qa-warn-border: #eddbb0;
    --qa-danger: #b42318;
    --qa-danger-tint: #fdf1f0;
    --qa-danger-border: #f0c4c0;

    --qa-shadow: 0 1px 2px rgba(17, 46, 88, 0.05);
    --qa-shadow-md: 0 4px 16px rgba(17, 46, 88, 0.08);
    --qa-glow: 0 0 0 rgba(0, 0, 0, 0);

    /* Bestaande variabelen uit style.css opnieuw gericht */
    --navy: var(--qa-accent-text);
    --navy-soft: var(--qa-accent-text);
    --gray-900: var(--qa-text);
    --gray-600: var(--qa-muted);
    --gray-500: var(--qa-muted);
    --gray-400: var(--qa-muted);
    --gray-200: var(--qa-border);
    --gray-100: var(--qa-border-soft);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --qa-bg: #161826;
    --qa-surface: #232532;
    --qa-raised: #1c1e2b;
    --qa-text: #e9e9ed;
    --qa-muted: #9397ab;
    --qa-border: #3f424d;
    --qa-border-soft: #292b31;

    --qa-accent: #9184d9;
    --qa-accent-text: #d2cefd;
    --qa-tint: #2b2741;
    --qa-tint-border: #5d5294;

    --qa-ok: #7fd8a4;
    --qa-ok-tint: #1d2b26;
    --qa-ok-border: #2f4a3c;
    --qa-warn: #e8c98a;
    --qa-warn-tint: #2b2618;
    --qa-warn-border: #4a4128;
    --qa-danger: #f0a49c;
    --qa-danger-tint: #2c1e1e;
    --qa-danger-border: #4d3230;

    --qa-shadow: 0 0 0 1px #292b31;
    --qa-shadow-md: 0 0 0 1px #3f424d, 0 6px 18px rgba(0, 0, 0, 0.5);
    --qa-glow: 0 0 16px rgba(145, 132, 217, 0.25);
}

/* ---------- 2. Grond en typografie ---------- */

body,
.admin-body,
.vraag-body {
    background: var(--qa-bg);
    color: var(--qa-text);
}

.logo,
.vraag-logo,
a.vraag-logo,
.admin-logo,
.page-title,
.toegang-titel,
.vraag-titel,
.admin-page-titel,
.admin-welkom-arabic,
.admin-welkom-naam,
.modal-titel,
.les-card h3,
.admin-kaart-body h3,
.admin-les-titel {
    color: var(--qa-text);
}

.admin-page-sub,
.toegang-ondertitel,
.modal-tekst,
.veld-hint,
.anoniem-melding {
    color: var(--qa-muted);
}

/* ---------- 3. Oppervlakken ---------- */

.header,
.vraag-header,
.admin-header,
.dashboard-header,
.toegang-card,
.vraag-menu,
.vraag-card,
.vraag-card.mine,
.les-card,
.admin-kaart,
.admin-les-header,
.q-card,
.modal-card,
.btn-toggle,
.btn-action,
.vraag-invoer-pill {
    background: var(--qa-surface);
    color: var(--qa-text);
    border-color: var(--qa-border);
}

.vraag-header {
    backdrop-filter: none;
    box-shadow: none;
    border-bottom: 1px solid var(--qa-border);
}

.vraag-footer {
    background: var(--qa-bg);
}

.admin-sidebar,
.admin-kaart-foto.geen-foto,
.les-kaart-foto.geen-foto {
    background: var(--qa-raised);
    border-color: var(--qa-border);
}

.admin-kaart-acties {
    background: var(--qa-raised);
}

.header,
.admin-header,
.admin-sidebar-top,
.admin-sidebar-bottom,
.les-card-footer,
.les-kaart-footer,
.toegang-footer,
.vraag-card,
.q-card,
.admin-kaart,
.admin-kaart-footer {
    border-color: var(--qa-border);
}

.vraag-card,
.q-card,
.admin-kaart,
.les-card,
.toegang-card,
.admin-les-header,
.dashboard-header {
    box-shadow: var(--qa-shadow);
}

.vraag-card:hover,
.admin-kaart:hover,
.les-card:hover {
    box-shadow: var(--qa-shadow-md);
}

.modal-card {
    box-shadow: var(--qa-shadow-md);
}

.vraag-invoer-pill {
    border: 1px solid var(--qa-border);
    box-shadow: var(--qa-shadow-md);
}

/* ---------- 4. Navigatie ---------- */

.header nav a {
    color: var(--qa-accent-text);
    border-bottom-color: var(--qa-accent);
}

.admin-icoon,
.admin-link,
.vraag-nav a,
.vraag-terug-link,
.toegang-terug,
.back-link {
    color: var(--qa-muted);
}

.admin-icoon:hover,
.vraag-terug-link:hover,
.toegang-terug:hover,
.back-link:hover {
    color: var(--qa-accent-text);
}

.vraag-nav a.actief {
    color: var(--qa-accent-text);
    border-bottom-color: var(--qa-accent);
}

.vraag-menu-item,
.admin-nav-item {
    color: var(--qa-muted);
}

.vraag-menu-item:hover,
.admin-nav-item:hover {
    background: var(--qa-tint);
    color: var(--qa-accent-text);
}

.admin-nav-item.actief {
    background: var(--qa-tint);
    color: var(--qa-accent-text);
    border-right-color: var(--qa-accent);
}

.admin-nav-sectie,
.admin-sidebar-label {
    color: var(--qa-muted);
}

.admin-logout {
    color: var(--qa-muted);
}

.admin-logout:hover {
    background: var(--qa-danger-tint);
    color: var(--qa-danger);
}

/* ---------- 5. Knoppen: omlijnd in plaats van gevuld ---------- */

.toegang-btn,
.admin-nieuwe-les-btn,
.btn-versturen,
.modal-btn-opslaan,
.les-card-btn {
    background: transparent;
    color: var(--qa-accent);
    border: 1px solid var(--qa-accent);
    box-shadow: var(--qa-glow);
    text-transform: none;
    letter-spacing: 0;
}

.toegang-btn:hover,
.admin-nieuwe-les-btn:hover,
.btn-versturen:hover,
.modal-btn-opslaan:hover {
    background: var(--qa-tint);
    color: var(--qa-accent);
    transform: none;
    box-shadow: var(--qa-glow);
}

.toegang-btn:active,
.admin-nieuwe-les-btn:active,
.btn-versturen:active,
.modal-btn-opslaan:active {
    background: var(--qa-tint-border);
}

.vraag-verstuur-rond {
    background: transparent;
    color: var(--qa-accent);
    border: 1px solid var(--qa-accent);
    box-shadow: var(--qa-glow);
}

.vraag-verstuur-rond:hover {
    background: var(--qa-tint);
}

.modal-btn-annuleer,
.btn-toggle,
.btn-action,
.admin-kaart-edit-btn,
.admin-kaart-order-btn {
    background: transparent;
    color: var(--qa-muted);
    border: 1px solid var(--qa-border);
}

.modal-btn-annuleer:hover,
.btn-action:hover,
.admin-kaart-edit-btn:hover,
.admin-kaart-order-btn:hover {
    background: var(--qa-tint);
    color: var(--qa-accent-text);
    border-color: var(--qa-tint-border);
}

.btn-toggle.sluiten {
    color: var(--qa-danger);
    border-color: var(--qa-danger-border);
}

.btn-toggle.sluiten:hover {
    background: var(--qa-danger-tint);
    color: var(--qa-danger);
}

.btn-toggle.openen {
    color: var(--qa-ok);
    border-color: var(--qa-ok-border);
}

.btn-toggle.openen:hover {
    background: var(--qa-ok-tint);
    color: var(--qa-ok);
}

.modal-btn-verwijder,
.btn-delete-all,
.admin-kaart-del-btn,
.user-delete-btn,
.delete-btn {
    background: transparent;
    color: var(--qa-danger);
    border: 1px solid transparent;
}

.modal-btn-verwijder {
    border-color: var(--qa-danger);
}

.modal-btn-verwijder:hover,
.btn-delete-all:hover,
.admin-kaart-del-btn:hover,
.delete-btn:hover {
    background: var(--qa-danger-tint);
    color: var(--qa-danger);
    border-color: var(--qa-danger-border);
}

.check-btn {
    background: transparent;
    color: var(--qa-muted);
}

.check-btn:hover,
.check-btn.actief {
    background: var(--qa-ok-tint);
    color: var(--qa-ok);
}

/* Raakvlakken: minimaal 44px (WCAG 2.5.5) */
.user-delete-btn,
.delete-btn,
.check-btn,
.hamburger,
.admin-hamburger,
.admin-kaart-del-btn,
.admin-kaart-order-btn,
.toegang-input-wrapper button {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    border-radius: 8px;
}

.hamburger,
.admin-hamburger {
    color: var(--qa-muted);
}

.hamburger:hover,
.admin-hamburger:hover {
    background: var(--qa-tint);
    color: var(--qa-accent-text);
}

/* ---------- 6. Formuliervelden ---------- */

.toegang-input-wrapper input,
.modal-veld input,
.modal-veld select,
.modal-veld textarea,
.roadmap-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
    background: var(--qa-bg);
    color: var(--qa-text);
    border-color: var(--qa-border);
}

.vraag-invoer-pill input {
    background: transparent;
}

.admin-bericht-invoer input {
    background: var(--qa-surface);
    color: var(--qa-text);
    border-color: var(--qa-border);
}

.toegang-input-wrapper input:focus,
.modal-veld input:focus,
.admin-bericht-invoer input:focus {
    border-color: var(--qa-accent);
    box-shadow: 0 0 0 3px var(--qa-tint);
}

.admin-bericht-invoer input:focus-visible,
.vraag-invoer-pill input:focus-visible {
    outline: none;
}

::placeholder {
    color: var(--qa-muted);
    opacity: 1;
}

.toegang-veld label,
.modal-veld label {
    color: var(--qa-muted);
}

.toegang-icon {
    background: var(--qa-tint);
    border: 1px solid var(--qa-tint-border);
    color: var(--qa-accent);
}

.dag-optie,
.radio-optie {
    background: var(--qa-surface);
    border-color: var(--qa-border);
    color: var(--qa-text);
    min-height: 44px;
}

.dag-optie:hover,
.radio-optie:hover {
    border-color: var(--qa-accent);
    background: var(--qa-tint);
}

/* ---------- 7. Vraagkaarten: leesbaarheid ---------- */

.vraag-tijdstip {
    color: var(--qa-muted);
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
}

.vraag-tekst {
    color: var(--qa-text);
    font-size: 17px;
    line-height: 1.55;
    text-wrap: pretty;
}

.vraag-card.mine {
    border-color: var(--qa-tint-border);
    border-left-color: var(--qa-accent);
    background: var(--qa-tint);
}

/* Was 9px in hoofdletters — nu een leesbare chip */
.vraag-card .my-tag {
    position: static;
    display: none;
    width: fit-content;
    margin-bottom: 6px;
    padding: 3px 9px;
    border: 1px solid var(--qa-tint-border);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--qa-accent-text);
}

.vraag-card.mine .my-tag {
    display: inline-flex;
}

.vraag-card.verwijderd {
    opacity: 1;
    background: var(--qa-raised);
    border-style: dashed;
    border-left-color: var(--qa-border);
}

.verwijderd-tekst {
    color: var(--qa-muted);
    font-style: normal;
}

.vraag-card.admin-bericht,
.q-card.admin-bericht {
    background: var(--qa-warn-tint);
    border-color: var(--qa-warn-border);
    border-left-color: var(--qa-warn);
}

.vraag-card .admin-tag,
.q-card .admin-tag {
    color: var(--qa-warn);
}

.q-card.beantwoord {
    background: var(--qa-ok-tint);
    border-color: var(--qa-ok-border);
}

.q-card-tekst {
    color: var(--qa-text);
}

/* Niet-cursief en 16px: voorkomt automatisch inzoomen op iOS */
.vraag-invoer-pill input {
    font-family: inherit;
    font-style: normal;
    font-size: 16px;
    color: var(--qa-text);
}

.vraag-invoer-pill input::placeholder {
    color: var(--qa-muted);
}

.geen-vragen {
    color: var(--qa-muted);
    font-style: normal;
}

.count-badge {
    background: var(--qa-tint);
    border: 1px solid var(--qa-tint-border);
    color: var(--qa-accent-text);
}

.feedback-msg {
    color: var(--qa-ok);
}

/* ---------- 8. Badges en banners ---------- */

.badge.open,
.les-kaart-badge.open,
.pub-badge.gepubliceerd,
.badge-bbq-ja {
    background: var(--qa-ok-tint);
    border: 1px solid var(--qa-ok-border);
    color: var(--qa-ok);
}

.badge.closed,
.les-kaart-badge.gesloten,
.badge-bbq-nee {
    background: transparent;
    border: 1px solid var(--qa-border);
    color: var(--qa-muted);
}

.pub-badge.concept {
    background: var(--qa-warn-tint);
    border: 1px solid var(--qa-warn-border);
    color: var(--qa-warn);
}

.type-badge {
    background: transparent;
    border: 1px solid var(--qa-border);
    color: var(--qa-muted);
}

.gesloten-banner {
    background: var(--qa-raised);
    border: 1px solid var(--qa-border);
    color: var(--qa-text);
    font-weight: 500;
}

.preview-banner {
    background: var(--qa-warn-tint);
    border-color: var(--qa-warn-border);
    color: var(--qa-warn);
}

.modal-fout {
    background: var(--qa-danger-tint);
    border: 1px solid var(--qa-danger-border);
    color: var(--qa-danger);
}

.modal-succes {
    color: var(--qa-ok);
}

.modal-overlay {
    background: rgba(10, 11, 20, 0.6);
}

.sidebar-overlay {
    background: rgba(10, 11, 20, 0.6);
}

/* ---------- 9. Tabbladen en lijsten (gebruikersbeheer) ---------- */

.admin-tabs {
    border-bottom: 1px solid var(--qa-border);
}

.tab-knop {
    background: transparent;
    color: var(--qa-muted);
    border: none;
}

.tab-knop.actief {
    color: var(--qa-accent-text);
    background: transparent;
    border-bottom: 2px solid var(--qa-accent);
}

.tab-count,
.tab-knop.actief .tab-count {
    background: var(--qa-tint);
    border: 1px solid var(--qa-tint-border);
    color: var(--qa-accent-text);
}

.admin-lijst,
.admin-rij {
    background: var(--qa-surface);
    border-color: var(--qa-border);
    color: var(--qa-text);
}

.admin-rij-naam {
    color: var(--qa-text);
}

.admin-rij-tijd,
.admin-laden,
.admin-leeg,
.insch-leeg {
    color: var(--qa-muted);
}

/* ---------- 10. Interactiestatussen ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--qa-accent);
    outline-offset: 2px;
}

::selection {
    background: var(--qa-tint-border);
    color: var(--qa-text);
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =====================================================================
   11. NIEUWE ONDERDELEN
   Alleen nodig als je ook de markup uit README.md toevoegt.
   Zonder die markup doen deze regels niets.
   ===================================================================== */

/* Sessiecontext in de vraagheader */
.qa-sessie {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.qa-sessie-naam {
    font-size: 17px;
    font-weight: 600;
    color: var(--qa-text);
    line-height: 1.2;
}

.qa-sessie-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--qa-accent-text);
}

.qa-sessie-stip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--qa-accent);
    box-shadow: var(--qa-glow);
}

/* Tijdscheiding in de vragenlijst */
.qa-tijdgroep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 2px 0;
}

.qa-tijdgroep span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qa-muted);
}

.qa-tijdgroep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--qa-border), transparent);
}

/* Dagkeuze als raster met teller */
.dagen-keuze {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.dag-optie {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.dag-optie:has(input:checked) {
    background: var(--qa-tint);
    border-color: var(--qa-accent);
    color: var(--qa-text);
}

.dag-optie input {
    accent-color: var(--qa-accent);
    width: 18px;
    height: 18px;
}

.qa-dagen-teller {
    font-size: 12px;
    color: var(--qa-accent-text);
}

.qa-dagen-teller.vol {
    color: var(--qa-muted);
}

/* Zoek- en filterrij op het beheerpaneel */
.qa-filterrij {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.qa-zoek {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--qa-border);
    background: var(--qa-surface);
    min-width: 240px;
}

.qa-zoek input {
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--qa-text);
    width: 100%;
}

.qa-zoek .material-symbols-outlined {
    font-size: 18px;
    color: var(--qa-muted);
}

.qa-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--qa-border);
    background: transparent;
    color: var(--qa-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.qa-chip:hover {
    background: var(--qa-tint);
    color: var(--qa-accent-text);
    border-color: var(--qa-tint-border);
}

.qa-chip.actief {
    background: var(--qa-tint);
    border-color: var(--qa-accent);
    color: var(--qa-accent-text);
}

/* Cijfers op de eventkaarten */
.qa-kaart-cijfers {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding-top: 4px;
}

.qa-kaart-cijfer {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qa-kaart-cijfer b {
    font-size: 20px;
    font-weight: 600;
    color: var(--qa-text);
}

.qa-kaart-cijfer span {
    font-size: 11px;
    color: var(--qa-muted);
}

/* Statuskolom en inline bevestiging bij uitnodigingen */
.qa-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.qa-status.openstaand {
    background: var(--qa-warn-tint);
    border: 1px solid var(--qa-warn-border);
    color: var(--qa-warn);
}

.qa-status.verlopen {
    border: 1px solid var(--qa-border);
    color: var(--qa-muted);
}

.qa-rij-bevestig {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--qa-tint);
    border: 1px solid var(--qa-tint-border);
    font-size: 13px;
    color: var(--qa-text);
}

.qa-rij-bevestig-acties {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qa-rij-bevestig button {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--qa-border);
    color: var(--qa-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.qa-rij-bevestig button.gevaar {
    border-color: var(--qa-danger);
    color: var(--qa-danger);
}

/* =====================================================================
   13. THEMA-SCHAKELAAR
   Knop-reset zodat een <button> zich als menu-item kan voordoen, bv.
   <button class="vraag-menu-item theme-toggle"> of
   <button class="admin-nav-item theme-toggle">. Icoon/label worden
   door /js/theme-toggle.js bijgewerkt naar de huidige stand.
   ===================================================================== */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
}

/* =====================================================================
   14. GEMISTE OPPERVLAKKEN
   Deze elementen hadden een eigen vaste achtergrondkleur die nergens
   hierboven werd meegenomen, terwijl hun tekst wél via --gray-* / --navy
   (die al naar --qa-* wijzen) meeschakelt — dat gaf onleesbare
   combinaties (lichte tekst op de nooit aangepaste lichte achtergrond).
   ===================================================================== */
.inschrijf-info {
    background: var(--qa-tint);
    border: 1px solid var(--qa-tint-border);
}

.inschrijf-card,
.insch-tabel-wrapper,
.mail-template-preview,
.mail-template-kaart {
    background: var(--qa-surface);
    border-color: var(--qa-border);
}

.insch-tabel th {
    color: var(--qa-muted);
    border-color: var(--qa-border);
}

.mail-var {
    background: var(--qa-tint);
    border: 1px solid var(--qa-tint-border);
    color: var(--qa-accent-text);
}