/* tco.css — het scherm TCO (module 6 deel C) in de cockpitlaag.
 *
 * Bouwt op cockpit.css (.ck, kaarten, tegels, tabellen) en actiecentrum.css
 * (kopblok en tabs). Alleen wat het TCO-scherm extra nodig heeft staat hier;
 * geen eigen tokens, geen kale pixelwaarden voor marge, tussenruimte,
 * lettergrootte of radius (tests/css-schaal.test.mjs, plafond 0).
 */

.ck-tco-main { display: flex; flex-direction: column; gap: var(--space-3); padding: 14px 24px 24px; }

/* balk boven een tabblad: kiezer, zoekveld, periode */
.ck-tco-balk { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.ck-tco-zoek, .ck-tco-peil { display: inline-flex; flex-direction: column; gap: var(--space-1); font-size: var(--ck-fs-12); }
.ck-tco-peil { flex-direction: row; align-items: center; gap: var(--space-2); }
.ck-tco-zoek .ck-invoer { min-width: 180px; }
.ck-tco-vink { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--ck-fs-12); color: var(--ck-ink-2); }
.ck-tco-leeg { padding: 24px 0; }
.ck-tco-pad { padding: 10px 14px; }
/* de melding bij een onbevestigd opslaan, onder de knop van het formulier; leeg neemt hij geen ruimte */
.ck-tco-onzeker > .ck-fout { margin-top: var(--space-2); }
/* een lange administratie- of bronnaam breekt af in plaats van de kaart te verbreden (veertiende ronde) */
.ck-tco-onzeker .ck-fout-tekst { overflow-wrap: anywhere; }

/* kentekenkaart en vloot: links de inhoud, rechts de zijkolom */
.ck-tco-kaart { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-3); align-items: start; }
.ck-tco-links, .ck-tco-rechts { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
@media (max-width: 1100px) { .ck-tco-kaart { grid-template-columns: minmax(0, 1fr); } }

.ck-tco-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-2) var(--space-4); }
.ck-tco-metaveld { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; font-size: var(--ck-fs-13); }

.ck-tco-bronnen { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--ck-fs-13); }
.ck-tco-bron { display: flex; align-items: center; gap: var(--space-2); }
.ck-tco-bol { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-badge); background: var(--ck-line-strong); flex: none; }
.ck-tco-bol.is-ok { background: var(--ck-pos); }
.ck-tco-bol.is-uit { background: var(--ck-line-strong); }
.ck-tco-bol.is-atts { background: var(--ck-ink); }
.ck-tco-bol.is-bv { background: var(--ck-ink-dim); }
.ck-tco-legenda { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--ck-fs-12); color: var(--ck-ink-2); }

.ck-tco-lijst { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--ck-fs-13); }

/* kostentabel: de gekozen periode licht op, totalen vet, verkoopresultaat apart */
.ck-tco-tbl th.is-gekozen, .ck-tco-tbl td.is-gekozen { background: var(--ck-panel-2); }
.ck-tco-tbl tr.is-totaal th, .ck-tco-tbl tr.is-totaal td { font-weight: 600; border-top: 1px solid var(--ck-line-strong); }
.ck-tco-tbl tr.is-apart th, .ck-tco-tbl tr.is-apart td { color: var(--ck-ink-2); border-top: 1px dashed var(--ck-line); }

/* maandstaven */
.ck-tco-staven { display: block; }
.ck-tco-staaf-atts { fill: var(--ck-ink); }
.ck-tco-staaf-bv { fill: var(--ck-ink-dim); }
.ck-tco-as { fill: var(--ck-ink-dim); font-size: var(--ck-fs-11); font-family: var(--ck-num); }

.ck-tco-boekingen { max-height: 420px; overflow-y: auto; }
.ck-tco-klikbaar tbody tr { cursor: pointer; }
.ck-tco-klikbaar tbody tr:hover, .ck-tco-klikbaar tbody tr:focus-visible { background: var(--ck-panel-2); }

/* import en beheer */
.ck-tco-importgrid, .ck-tco-beheergrid { align-items: stretch; }
.ck-tco-form { display: flex; flex-direction: column; gap: var(--space-2); }
.ck-tco-form label { display: flex; flex-direction: column; gap: var(--space-1); }
.ck-tco-formgrid { display: flex; flex-direction: column; gap: var(--space-3); }
/* een venster (openModal) met velden of een rapport pakt die in met .ck voor
   de tokens van de laag; zonder deze reset kwam de paginaopmaak van .ck mee
   (negatieve marge, 60vh hoog, grijs vlak buiten het venster) */
.modal-body > .ck { margin: 0; min-height: 0; padding-bottom: 0; background: none; }
/* .ck-invoer is een regel hoog; een tekstvak toont zijn rijen */
textarea.ck-invoer { height: auto; padding-top: var(--space-2); padding-bottom: var(--space-2); resize: vertical; }
.ck-tco-tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ck-tco-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ck-tco-rood .ck-stat-waarde { color: var(--ck-neg); }
.ck-tco-oranje .ck-stat-waarde { color: var(--ck-warn-ink); }
.ck-tco-rapport .ck-tco-lijst { margin-top: var(--space-3); }
/* knoppen in een tabelcel: de flex zit op een div in de cel, nooit op de td
   zelf (dan is het geen tabelcel meer en schuiven de knoppen naar de
   volgende rij; reviewronde 28-09-2026) */
.ck-tco-acties { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); }
.ck-tbl td.ck-tco-actiecel { white-space: nowrap; }

/* rijkop in de tabelromp: een gewone cel met de kleur van de inhoud, niet de
   stijl van de kolomkop */
.ck-tbl th.ck-tco-rijkop {
  text-align: left; vertical-align: middle; white-space: normal;
  font-size: var(--ck-fs-125); font-weight: 500; color: var(--ck-ink);
  border-bottom: 1px solid var(--ck-line);
}
.ck-tco-tbl tr.is-totaal th.ck-tco-rijkop { font-weight: 600; }
.ck-tco-tbl tr.is-apart th.ck-tco-rijkop { color: var(--ck-ink-2); }
/* smalle zijkolom: kolomkoppen mogen afbreken */
.ck-tco-rechts .ck-tbl thead th { white-space: normal; }

/* peildatum alleen op Kentekenkaart en Vloot; tijdens het laden gedimd */
.ck-tco-peil[hidden] { display: none; }
.ck-tco-main[aria-busy="true"] { opacity: 0.6; }

/* een knop die eruitziet als een link (Beheer, onbekende rekening indelen) */
.ck-tco button.ck-link { padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; font: inherit; font-weight: 600; }

/* WACS-vloot in Beheer (stap 5a): de drie kaarten met ritme ertussen en
   erboven, de kaartinhoud als kolom met tussenruimte, de stand van de ronde in
   één regel met de tag ervoor, en de kandidaten uit het register op een eigen
   regel onder de reden (niet aan de tekst geplakt; reviewronde) */
.ck-tco-blok { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.ck-tco-wacsbody { display: flex; flex-direction: column; gap: var(--space-3); }
.ck-tco-stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--ck-fs-13); }
.ck-tco-kandidaten { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }