/* Huisstijl Lexavia ("Kantoor klassiek-fris", gekozen 26/10/2026).
   Kleuren uit het Lexavia-brandboard: charcoal #242424, champagne gold #B89A62 (enkel accent), warm ivory #F4F0E8,
   stone grey #7A7771. Serif voor titels (Iowan Old Style / Palatino / Georgia — systeemletters, geen externe fonts),
   strakke lijnen en kleine hoeken. Wordt NA lexavia.css en agenda.css geladen en zet vooral de variabelen. */
:root {
  --balk: #242424;              /* charcoal */
  --balk-tekst: #f4f0e8;
  --goud: #b89a62;              /* champagne gold op charcoal: 5,8:1 */
  --accent: #7a6232;            /* donker champagne als tekst op ivoor: 5,1:1 */
  --koperlijn: #b89a62;         /* champagne gold voor lijnen en markeringen */
  --tekst: #242424;
  --zacht: #5f5c57;
  --zacht-2: #66635e;
  --lijn: #ddd5c6;
  --lijn-zacht: #ece6db;
  --vlak: #fffdf8;
  --achtergrond: #f4f0e8;
  --link: #6e5626;
  --knop: #242424;
  --knop-tekst: #ffffff;
  --kop-vlak: #f8f4ec;
  --invoer-rand: #cbc2b1;
  --invoer-vlak: #fffefb;
  --focus: #e7cf9f;
  --focus-rand: #7a6232;
  --hover: #f7f1e5;
  --gekozen: #f1e7d3;
  --actief-rij: #ead9b8;
  --info-vlak: #f4efe4;
  --info-rand: #ddcfb4;
  --label-vlak: #ede7dc;
  --vandaag-vlak: #fbf3e2;
  --map-vlak: #f7f3eb;
  --accent-vlak: #f8f0df;
  --r: 2px;
  --r-groot: 3px;
  --schaduw: none;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-titel: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "TeX Gyre Pagella", Georgia, serif;
  --font-merk: var(--font-titel);
  --balk-hoogte: 48px;
}

/* titels in serif, met een fijne koperen lijn als signatuur */
h1, h2, .paneel-kop, .ai-kop h2, .op-venster h3 { font-family: var(--font-titel); }
h1 { font-weight: 600; font-size: 1.5rem; letter-spacing: .005em; }
h2 { color: var(--balk); font-weight: 600; font-size: 1.12rem; }
.kop { border-bottom: 1px solid var(--lijn); margin-bottom: .6rem; padding-bottom: .1rem; }
.kop h1 { margin-bottom: .4rem; }
.kop:has(~ .tabs) { border-bottom: 0; }

/* bovenbalk: charcoal met een gouden draad onderaan */
.balk { border-bottom: 3px solid var(--koperlijn); }
.balk .merk { letter-spacing: .22em; font-size: 1.3rem; }
.balk .merk span { color: var(--goud); }
.balk nav { gap: 1.2rem; }
.balk nav a, .balk nav details.menu summary { opacity: .82; letter-spacing: .01em; }
.balk nav a:hover, .balk nav a.actief,
.balk nav details.menu summary:hover, .balk nav details.menu summary.actief, .balk nav details.menu[open] summary {
  opacity: 1; border-bottom: 2px solid var(--goud); }
.balk .wie button { border-radius: var(--r); border-color: rgba(241, 236, 225, .4); }
.dossierzoeker input { border-radius: var(--r); background: rgba(255, 255, 255, .08); border-color: rgba(241, 236, 225, .3); }
.dossierzoeker input:focus { outline: 2px solid var(--goud); }
.balk nav details.menu .uitklap { border-radius: var(--r-groot); border-top: 2px solid var(--koperlijn); }

/* knoppen: charcoal, secundair als omlijnde knop */
.knop { letter-spacing: .01em; }
.knop:hover { background: #3a3835; }
.knop.licht { background: var(--vlak); color: var(--balk); border: 1px solid #b9b0a0; }
.knop.licht:hover { border-color: var(--balk); background: #fbf8f1; }
.gesplitst .knop.ai { border-left-color: rgba(184, 154, 98, .55); color: #e6d3a8; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--focus); border-color: var(--focus-rand); }
:focus-visible { outline: 2px solid var(--koperlijn); outline-offset: 1px; }

/* lijsten: strakke regels, kolomtitels in kleine kapitalen, kop met marine onderlijn */
.kaart { border-color: var(--lijn); }
#rijen table.lijst { border: 1px solid var(--lijn); border-top: 2px solid var(--balk); }
table.lijst th { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; color: var(--balk); font-weight: 700;
  border-bottom: 1px solid #cfc5b2; }
table.lijst thead th { background: var(--kop-vlak); }
table.lijst td { border-bottom-color: var(--lijn-zacht); }
table.lijst td a { color: var(--link); font-weight: 600; }
.ref { color: var(--accent); }
h1 .ref { font-family: var(--font-titel); }

/* labels: smalle etiketten met fijne rand */
.label { border-radius: var(--r); padding: 0 .4rem; border: 1px solid transparent; font-weight: 500; letter-spacing: .01em; }
.fase-intake { background: #efeaf6; color: #4f3a7a; border-color: #d9cfe9; }
.fase-lopend { background: #e8f1ea; color: #255c3a; border-color: #c7dccd; }
.fase-beraad { background: #f8eedb; color: #7a4f0c; border-color: #e8d3a9; }
.fase-vonnis { background: #f7e6e1; color: #8a2f1f; border-color: #e7c4ba; }
.fase-uitvoering { background: #e6edf6; color: #1f3d70; border-color: #c8d5e8; }
.fase-afgesloten, .fase-archief { background: #eeebe5; color: #5d5a54; border-color: #dcd7cd; }

/* tabbladen: koperen onderlijn, marine tekst */
.tabs { border-bottom-color: var(--lijn); }
.tabs a { color: var(--zacht); }
.tabs a:hover { color: var(--balk); }
.tabs a.actief { color: var(--balk); border-bottom: 2px solid var(--koperlijn); }
.fasebalk { gap: 0; border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.fasebalk button { border: 0; border-right: 1px solid var(--lijn); border-radius: 0; background: var(--vlak); color: var(--zacht); padding: 1px 9px; }
.fasebalk button:last-child { border-right: 0; }
.fasebalk button.actief { background: var(--balk); color: #e6d3a8; }

/* dossier */
.dossierpaneel { border-radius: var(--r-groot); border-top: 2px solid var(--balk); }
.paneel-kop { color: var(--balk); font-size: .95rem; border-bottom-color: var(--lijn); }
.pdfvoorbeeld { background: #e9e4da; }
.voorbeeldvenster, .voorbeeldbeeld { border-radius: var(--r); }
.kernpunten, .sj-uitleg { border-left-color: var(--koperlijn); }

/* agenda */
.ag-balk .groep { border-radius: var(--r); }
.ag-balk .periode { font-family: var(--font-titel); font-size: 1.1rem; }
.chip { border-radius: var(--r); }
.kal { border-color: var(--lijn); border-top: 2px solid var(--balk); }
.kal .kop-dag { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; color: var(--balk); font-weight: 700; }
.kal .vak, .kal .kop-dag { border-color: var(--lijn); }
.kal .vak.weekend { background: #faf7f1; }
.kal .vak.buiten { background: #f3efe7; }
.kal .vak.vandaag { box-shadow: inset 0 0 0 2px var(--koperlijn); }
.kal .vandaag .dagnr { color: var(--accent); }
.kal-item { border-radius: 1px; border-left-width: 3px; }
.kaartje { border-radius: var(--r); }
table.bord th { text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; color: var(--balk); }

/* ---------- donkere modus: charcoal met champagne ----------
   Nog niet automatisch: wordt actief met <html class="donker"> (keuze per gebruiker volgt na nazicht van alle schermen). */
html.donker {
  color-scheme: dark;
  --fout: #f2848b;
  --goed: #6fd396;
  --let-op: #f0b45a;
  --balk: #141413;
  --balk-tekst: #f4f0e8;
  --accent: #d4bb85;
  --koperlijn: #b89a62;
  --tekst: #ece6da;
  --zacht: #b4ad9f;
  --zacht-2: #9a9385;
  --lijn: #3a3834;
  --lijn-zacht: #2c2a27;
  --vlak: #1f1e1c;
  --achtergrond: #171615;
  --link: #d4bb85;
  --knop: #3a3835;
  --kop-vlak: #252422;
  --invoer-rand: #4a4741;
  --invoer-vlak: #141413;
  --focus: #6b5222;
  --focus-rand: #d4bb85;
  --hover: #2a2926;
  --gekozen: #2a2a26;
  --actief-rij: #3a3220;
  --info-vlak: #252422;
  --info-rand: #403d38;
  --label-vlak: #2c2a27;
  --vandaag-vlak: #2a2618;
  --map-vlak: #1a1918;
  --accent-vlak: #2a2618;
}
html.donker h2, html.donker .paneel-kop, html.donker table.lijst th, html.donker .kal .kop-dag, html.donker table.bord th, html.donker .tabs a.actief, html.donker .tabs a:hover { color: #e3d3b0; }
html.donker .knop.licht { background: transparent; color: var(--tekst); border-color: #5c5852; }
html.donker .knop.licht:hover { background: #2a2926; border-color: var(--accent); }
html.donker .knop:hover { background: #4a4741; }
html.donker #rijen table.lijst, html.donker .kal, html.donker .dossierpaneel { border-top-color: var(--koperlijn); }
html.donker .fasebalk button { background: var(--vlak); }
html.donker .fasebalk button.actief { background: #3a3835; color: #e6d3a8; }
html.donker .fase-intake { background: #2a2440; color: #cdbdf0; border-color: #3d3560; }
html.donker .fase-lopend { background: #183021; color: #9fd8b1; border-color: #24452f; }
html.donker .fase-beraad { background: #33270f; color: #f0c779; border-color: #4a3916; }
html.donker .fase-vonnis { background: #3a1d17; color: #f2a796; border-color: #552a21; }
html.donker .fase-uitvoering { background: #182740; color: #a9c1ea; border-color: #23395c; }
html.donker .fase-afgesloten, html.donker .fase-archief { background: #262b33; color: #b4ad9f; border-color: #353b45; }
html.donker .kal .vak.weekend, html.donker .kal .vak.buiten { background: #1a1918; }
html.donker .pdfvoorbeeld { background: #141413; }
/* vaste lichte vlakken uit lexavia.css/agenda.css donker maken */
html.donker .bericht-notitie { background: rgba(234, 179, 8, .10); }
html.donker tr.te-laat td, html.donker .kaartje.te-laat { background: rgba(239, 68, 68, .12); }
html.donker .kal-item.te-laat { background: rgba(239, 68, 68, .16); color: #fca5a5; }
html.donker .kaartje.termijn { background: var(--vlak); }
html.donker .status-open { background: #4a1d24; color: #fecdd3; } .status-voorbereiding { background: #45300c; color: #fde68a; }
html.donker .status-ok { background: #123826; color: #a7f3d0; }
html.donker .melding.waarschuwing, html.donker .bevestigen, html.donker .rolnummer-groot, html.donker .sleutel { background: #3a2c0c; border-color: #6b5214; }
html.donker .meldingen li { background: #12301f; color: #86efac; } .meldingen li.error { background: #3d1418; color: #fca5a5; }
html.donker .kal .vak.buiten .dagnr { color: #6b7686; }
html.donker table.bord td.zijkolom { background: var(--map-vlak); }


/* logo in de bovenbalk */
.balk .merk.beeld { display: inline-flex; align-items: center; padding: 0; letter-spacing: 0; }
.balk .merk.beeld img { height: 28px; width: auto; display: block; }
.aanmeldlogo { display: block; margin: 0 auto 1.2rem; width: 240px; max-width: 80%; height: auto; }
.aanmeldlogo.donker { display: none; }
html.donker .aanmeldlogo.licht { display: none; } html.donker .aanmeldlogo.donker { display: block; }