/* KTM Voyage CRM — official documents [DCX].
   De compliance-pagina: statustegels, tijdlijn van twaalf maanden, tabel met
   afteltellers, kaarten, groepen per soort, de verlengingsflow, het detail- en
   historiepaneel, en de opnieuw opgebouwde dialogen.

   Huisregels van dit bestand (gelijk aan components.css):
   - ALLEEN tokens uit tokens.css. Geen enkele hardgecodeerde kleur, zodat licht
     en donker allebei goed zijn zonder een tweede kleurenset.
   - Geen `content:"tekst"`. Elke leesbare string komt via t() uit de JS.
   - Geen emoji en geen pijl-glyphs; iconen komen uit icons.js.
   - Leesbaar en bedienbaar op 390px, met 44px tikdoelen op touch.

   LET OP bij het inhaken in index.html: dit bestand moet NA css/admin.css staan.
   admin.css bevat nog de oude, licht-only kleuren voor .adm-count / .adm-kind /
   .adm-doc; de regels hieronder zetten die om naar themabewuste tokens en winnen
   alleen op bronvolgorde (zelfde specificiteit). */

/* ---------- PAGINAKOP ---------- */
.dcx-page{min-width:0}
.dcx-head{align-items:flex-start}
.dcx-head-txt{min-width:0}
.dcx-head .desc{max-width:70ch}

/* ---------- COMPLIANCE-TEGELS ---------- */
.dcx-dash{margin-bottom:var(--sp-5)}
.dcx-dash .stat{cursor:pointer}
.dcx-dash .stat:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dcx-hint{display:flex;align-items:center;gap:7px;margin:var(--sp-3) 0 0;font-size:12.5px;color:var(--text-faint)}
.dcx-hint svg{flex:0 0 auto;color:var(--text-faint)}

/* ---------- TIJDLIJN (12 MAANDEN) ---------- */
.dcx-tl{margin-bottom:var(--sp-5);padding:var(--sp-5)}
.dcx-tlhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.dcx-tlhead h3{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--text-head)}
.dcx-tlhead h3 svg{color:var(--accent)}
.dcx-tlhead p{margin:0;font-size:12.5px;color:var(--text-muted)}
.dcx-tlgrid{--sx-bg:var(--surface);display:flex;align-items:flex-end;gap:var(--sp-2);padding-bottom:6px}
.dcx-tlcol{flex:1 1 0;min-width:46px;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:6px 2px;border:1px solid transparent;border-radius:var(--radius-sm);background:none;
  font:inherit;color:var(--text-muted);cursor:pointer}
.dcx-tlcol:hover:not([disabled]){border-color:var(--border-strong);background:var(--surface-2);color:var(--text)}
.dcx-tlcol:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dcx-tlcol.is-on{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));background:var(--surface-accent);color:var(--text-head)}
.dcx-tlcol.is-empty{cursor:default;opacity:.72}
.dcx-tlnum{min-height:15px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-head)}
.dcx-tlbarwrap{display:flex;align-items:flex-end;justify-content:center;width:100%;height:76px;
  border-radius:var(--radius-sm);background:color-mix(in srgb,var(--text) 6%,transparent)}
.dcx-tlbar{width:70%;min-height:3px;border-radius:var(--radius-sm) var(--radius-sm) 3px 3px;background:var(--accent);
  transition:height .3s cubic-bezier(.4,0,.2,1)}
.dcx-tlbar[data-tone=ok]{background:var(--ok)}
.dcx-tlbar[data-tone=warn]{background:var(--warn)}
.dcx-tlbar[data-tone=bad]{background:var(--bad)}
.dcx-tllbl{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.dcx-tlempty{display:flex;align-items:center;gap:8px;margin:0;padding:var(--sp-4);
  border:1px dashed var(--border);border-radius:var(--radius);color:var(--text-muted);font-size:13px}
.dcx-tlempty svg{flex:0 0 auto;color:var(--ok)}

/* ---------- WERKBALK ---------- */
.dcx-searchwrap{flex:1 1 230px;min-width:170px;max-width:340px}
.dcx-search{width:100%;min-height:40px;padding:9px 11px 9px 36px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface);font:inherit;font-size:13px;color:var(--text)}
.dcx-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.dcx-search::-webkit-search-cancel-button{-webkit-appearance:none}
.dcx-filter{min-height:40px;max-width:100%;padding:9px 11px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface);font:inherit;font-size:13px;color:var(--text)}
.dcx-filter:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.dcx-count{font-size:12.5px;font-weight:700;color:var(--text-muted);white-space:nowrap}

/* ---------- CELLEN ---------- */
/* Overschrijft de licht-only regels uit admin.css met themabewuste tokens. */
.adm-kind{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);
  font-size:12px;font-weight:700;white-space:nowrap}
.adm-kind svg{flex:0 0 auto;color:var(--text-faint)}
.adm-doc b{display:block;font-size:14px;color:var(--text);overflow-wrap:anywhere}
.adm-doc small{display:inline-flex;align-items:center;gap:5px;margin-top:2px;font-size:12px;color:var(--text-faint)}
.adm-doc small svg{flex:0 0 auto}
.dcx-doc .dcx-tags{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:5px}
.dcx-arch{border-style:dashed;color:var(--text-muted);background:none}
.dcx-date{font-variant-numeric:tabular-nums;white-space:nowrap}
.dcx-mut{color:var(--text-faint)}
.dcx-due{display:block;margin-top:3px;font-size:11.5px;color:var(--text-faint);white-space:nowrap}
.dcx-resp{display:inline-flex;align-items:center;gap:8px;min-width:0}
.dcx-resp span{overflow:hidden;text-overflow:ellipsis}
.dcx-rowacts{display:flex;gap:4px;justify-content:flex-end}
table.data tr.is-cursor>td{background:var(--surface-accent)}
table.data tr.is-selected>td{background:var(--accent-soft)}

/* ---------- AFTELCHIP ---------- */
/* De klassenamen adm-count / -ok / -warn / -expired zijn een contract met de
   browsersuite; hier krijgen ze alleen hun themabewuste uiterlijk terug. */
.adm-count{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 11px;
  border-radius:999px;border:1px solid transparent;font-size:12px;font-weight:700;
  line-height:1.25;white-space:nowrap}
.adm-count svg{flex:0 0 auto}
.adm-count span{overflow:hidden;text-overflow:ellipsis}
.adm-count-ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent);
  border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.adm-count-warn{color:var(--opt);background:color-mix(in srgb,var(--warn) 18%,transparent);
  border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.adm-count-expired{color:var(--bad-text,var(--bad));background:color-mix(in srgb,var(--bad) 16%,transparent);
  border-color:color-mix(in srgb,var(--bad) 48%,transparent)}
/* Een lopende verlenging is GEEN alarm meer: de chip wordt rustig en zegt met
   een streepjesrand dat er iets onderweg is. */
.dcx-cd-renew{color:var(--accent-text);background:var(--accent-soft);
  border-color:color-mix(in srgb,var(--accent) 50%,transparent);border-style:dashed}

/* ---------- KAARTEN ---------- */
.dcx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--sp-4)}
.dcx-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);box-shadow:var(--shadow-1);transition:box-shadow .15s ease,border-color .15s ease}
.dcx-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:var(--shadow-2)}
.dcx-card.is-arch{opacity:.72;border-style:dashed}
/* Onzichtbare knop over de hele kaart: één tikdoel, en toch echte toetsenbord-
   en schermlezerondersteuning (de knop draagt de aria-label). */
.dcx-cardhit{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:none;
  border-radius:var(--radius-lg);background:none;cursor:pointer}
.dcx-cardhit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dcx-cardtop{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dcx-cardtitle{font-size:15px;line-height:1.3;color:var(--text-head);overflow-wrap:anywhere}
.dcx-cardfacts{display:grid;grid-template-columns:auto 1fr;gap:3px var(--sp-4);width:100%;margin:2px 0 0;font-size:12.5px}
.dcx-cardfacts dt{color:var(--text-faint);font-weight:700;white-space:nowrap}
.dcx-cardfacts dd{margin:0;min-width:0;color:var(--text-muted);overflow-wrap:anywhere}

/* ---------- GROEPEN PER SOORT ---------- */
.dcx-groups{display:flex;flex-direction:column;gap:var(--sp-6)}
.dcx-grouphead{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.dcx-groupic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.dcx-grouphead h3{font-size:15px;color:var(--text-head)}
.dcx-groupn{font-size:12.5px;font-weight:700;color:var(--text-faint)}

/* ---------- VERLENGINGSFLOW ---------- */
.dcx-flow{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-4) 0}
.dcx-flowstep{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 6px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface-2);font-size:12px;font-weight:700;color:var(--text-faint)}
.dcx-flowdot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-faint)}
.dcx-flowstep.is-done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);
  background:color-mix(in srgb,var(--ok) 10%,transparent)}
.dcx-flowstep.is-done .dcx-flowdot{border-color:var(--ok);background:var(--ok);color:var(--accent-ink)}
.dcx-flowstep.is-now{color:var(--accent-text-strong);border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:var(--accent-soft)}
.dcx-flowstep.is-now .dcx-flowdot{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}

/* ---------- DIALOGEN ---------- */
.dcx-lead{margin:0 0 var(--sp-4);font-size:13.5px;line-height:1.55;color:var(--text-muted)}
.dcx-fgroup{margin-bottom:var(--sp-5);padding-top:var(--sp-2);border-top:1px solid var(--border)}
.dcx-fgroup:first-of-type{border-top:none;padding-top:0}
.dcx-fgroup-h{margin:0 0 var(--sp-2);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-faint)}
.dcx-fgroup-hint{margin:0 0 var(--sp-3);font-size:12px;line-height:1.5;color:var(--text-faint)}
/* De voettekst hoort BINNEN het formulier (zie de opmerking in documents.js);
   sticky houdt hem in beeld zodra de dialoog langer wordt dan het scherm. */
.dcx-foot{position:sticky;bottom:calc(var(--sp-5) * -1);z-index:1;display:flex;align-items:center;
  justify-content:flex-end;gap:var(--sp-3);flex-wrap:wrap;margin:var(--sp-5) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
  padding:var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);background:var(--surface-3);
  border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.dcx-oldver{display:flex;align-items:baseline;gap:var(--sp-3);margin:0 0 var(--sp-4);padding:11px 14px;
  border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--surface-2)}
.dcx-lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint)}
.dcx-oldver b{font-size:15px;color:var(--text-head);font-variant-numeric:tabular-nums}

/* Voorkeurstermijnen voor de waarschuwing */
.dcx-presets{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.dcx-preset{min-height:36px;padding:7px 13px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface);font:inherit;font-size:12.5px;font-weight:700;color:var(--text-muted);cursor:pointer}
.dcx-preset:hover{border-color:var(--border-strong);color:var(--text)}
.dcx-preset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dcx-preset.is-on{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.dcx-when{margin:0 0 var(--sp-4);font-size:12.5px;font-weight:700;color:var(--accent-text-strong);min-height:1em}

/* Het mailkader: dit is de zin die voorkomt dat iemand denkt dat hier post uitgaat. */
.dcx-note{margin:0 0 var(--sp-2);padding:12px 14px;border:1px solid var(--border);
  border-left:3px solid var(--info);border-radius:var(--radius);background:var(--surface-2)}
.dcx-note h4{display:flex;align-items:center;gap:7px;margin:0 0 5px;font-size:12.5px;color:var(--text-head)}
.dcx-note h4 svg{color:var(--info)}
.dcx-note p{margin:0;font-size:12.5px;line-height:1.55;color:var(--text-muted)}

/* ---------- DETAILPANEEL ---------- */
.dcx-banner{display:flex;align-items:center;gap:8px;margin:0 0 var(--sp-4);padding:10px 13px;
  border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--surface-2);
  font-size:12.5px;color:var(--text-muted)}
.dcx-drwtop{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.dcx-drwh{margin:var(--sp-5) 0 var(--sp-3);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-faint)}
.dcx-facts{display:flex;flex-direction:column;gap:0;margin:0}
.dcx-fact{display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:var(--sp-3);
  padding:9px 0;border-bottom:1px solid var(--border)}
.dcx-fact:last-child{border-bottom:none}
.dcx-fact dt{font-size:12.5px;color:var(--text-faint)}
.dcx-fact dd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;min-width:0;
  font-size:13.5px;color:var(--text);overflow-wrap:anywhere}
.dcx-mailnote{display:flex;align-items:flex-start;gap:8px;margin:var(--sp-4) 0 0;padding:11px 13px;
  border:1px solid var(--border);border-left:3px solid var(--info);border-radius:var(--radius);
  background:var(--surface-2);font-size:12px;line-height:1.55;color:var(--text-muted)}
.dcx-mailnote svg{flex:0 0 auto;margin-top:2px;color:var(--info)}
.dcx-drwacts{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-5);
  padding-top:var(--sp-4);border-top:1px solid var(--border)}

/* ---------- VERSIES ---------- */
.dcx-vers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.dcx-ver{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;padding:10px 13px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);font-size:13px}
.dcx-ver.is-cur{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:var(--surface-accent)}
.dcx-verbadge{flex:0 0 auto;padding:2px 9px;border-radius:999px;background:var(--surface);
  border:1px solid var(--border);font-size:11px;font-weight:700;color:var(--text-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dcx-ver.is-cur .dcx-verbadge{border-color:var(--accent);color:var(--accent-text-strong)}
.dcx-ver small{flex:1 1 100%;font-size:11.5px;color:var(--text-faint)}
.dcx-notebox{max-height:220px;overflow:auto;margin:var(--sp-3) 0 0;padding:11px 13px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface-2);font-family:inherit;font-size:12.5px;
  line-height:1.6;color:var(--text-muted);white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- POPOVERS ---------- */
.dcx-pophint{margin:0 0 var(--sp-2);padding:0 11px;font-size:11.5px;line-height:1.5;color:var(--text-faint)}
.dcx-viewrow{display:flex;align-items:center;gap:4px}
.dcx-viewrow .pop-item{flex:1 1 auto;min-width:0}
.dcx-keyrow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:6px 11px;font-size:12.5px;color:var(--text-muted)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .dcx-tlbarwrap{height:60px}
}
@media(max-width:768px){
  .dcx-head .btn{width:100%}
  .dcx-searchwrap{flex:1 1 100%;max-width:none}
  .dcx-filter{flex:1 1 44%;min-width:0}
  .dcx-tl{padding:var(--sp-4)}
  .dcx-tlgrid{gap:5px}
  .dcx-tlcol{min-width:40px}
  .dcx-tlbarwrap{height:52px}
  .dcx-tllbl{font-size:10px}
  .dcx-cards{grid-template-columns:1fr}
  .dcx-fact{grid-template-columns:1fr;gap:2px}
  .dcx-drwacts .btn{flex:1 1 auto}
}
@media(max-width:560px){
  /* Volledig scherm: de dialoog is hier een sheet, dus de voettekst plakt aan de
     onderrand van dat sheet in plaats van aan de body van de dialoog. */
  .dcx-foot{margin:var(--sp-4) calc(var(--sp-4) * -1) calc(var(--sp-4) * -1);
    padding:12px var(--sp-4) calc(12px + env(safe-area-inset-bottom));border-radius:0;bottom:0}
  .dcx-foot .btn{flex:1 1 auto;min-height:46px}
  .dcx-preset{flex:1 1 auto;text-align:center}
  .dcx-flow{gap:5px}
  .dcx-flowstep{font-size:11px;padding:4px 10px 4px 5px}
}

/* ---------- TOUCH ---------- */
@media(pointer:coarse){
  .dcx-tlcol{min-height:44px}
  .dcx-preset{min-height:44px}
  .dcx-search,.dcx-filter{min-height:44px}
}

/* ---------- PRINT ---------- */
/* Wat Vasko in de map stopt: de kop, de tegels en de tabel — geen knoppen,
   geen tijdlijn, geen filters.
   Hier stonden twee vaste kleuren (#999, #000) met als reden: papier is altijd
   wit, dus een token dat het schermthema volgt drukt in donkere modus een zwarte
   chip op wit papier. Die reden klopte niet — tokens.css zet BINNEN @media print
   de hele lichte set terug op alle drie de :root-selectors, dus een token IS hier
   al de papierwaarde. Vaste kleuren waren dus niet nodig en kostten alleen de
   garantie dat dit vel dezelfde grijzen gebruikt als de rest van de app. */
@media print{
  .dcx-dash .stat{break-inside:avoid;box-shadow:none}
  .dcx-tl,.tbar,.fchips,.bulkbar,.dcx-rowacts,.dcx-head .btn,.dcx-cardhit{display:none !important}
  .dcx-cards{grid-template-columns:1fr 1fr}
  .dcx-card,.dcx-group{break-inside:avoid}
  .adm-count,.adm-kind{border:1px solid var(--text-faint) !important;background:none !important;color:var(--text) !important}
  table.data th.cb,table.data td.cb{display:none}
}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  .dcx-tlbar{transition:none !important}
}