/* 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); }
/* de bronnaam breekt nooit af, alleen de waarde, rechts uitgelijnd (reviewronde 3) */
.ck-tco-bron-naam { flex: none; white-space: nowrap; }
.ck-tco-bron > .ck-dim { min-width: 0; text-align: end; }
/* de datum in een bronregel ("6 werkorders t/m 28-09-2026") breekt niet midden in de datum af, ook niet op 390 */
.ck-tco-bron .ck-tco-datum { white-space: nowrap; }
.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; }
/* de reden onder de knoppen breekt wel af: anders viel Anders toewijzen op 1366 buiten het vak (golf T1, reviewronde 1) */
.ck-tbl td.ck-tco-actiecel .ck-tweede { white-space: normal; }

/* 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; }

/* smal scherm (telefoon, naast het ingeklapte zijmenu): de periodekiezer breekt
   af in twee rijen en een kaartkop met knoppen of een lange titel breekt af in
   plaats van de pagina te verbreden; de tabellen scrollen in hun eigen vak
   (ck-scroll-x), dus geen horizontale paginascroll (schermharnas, 390 px) */
@media (max-width: 560px) {
  .ck-tco-main { padding-left: var(--space-3); padding-right: var(--space-3); }
  .ck-tco-balk .ck-seg { flex-wrap: wrap; height: auto; }
  .ck-tco .ck-card-kop { flex-wrap: wrap; padding-top: var(--space-1); padding-bottom: var(--space-1); }
  .ck-tco .ck-card-kop h2 { white-space: normal; }
  /* kerncijfers: twee per rij met de kleinere cijferstap, anders loopt een bedrag van vijf cijfers uit zijn tegel */
  .ck-tco .ck-stats.ck-stats-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-tco .ck-stat-waarde { font-size: var(--ck-fs-18); }
}

/* 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; }

/* onderhoud uit WACS op de kentekenkaart: de uitklap per ordertype, per
   budgettype en de regels is een native details-element in de kaart, met de
   kopregel als haarlijn en een eigen pijl (de markering van de browser uit);
   de regels scrollen in de kaart zoals de boekingen */
.ck-tco-uitklap { border-top: 1px solid var(--ck-line); }
.ck-tco-uitklap > summary {
  display: flex; align-items: center; gap: var(--space-2); padding: 10px 14px; cursor: pointer; list-style: none;
  font-size: var(--ck-fs-13); font-weight: 600; color: var(--ck-ink);
}
.ck-tco-uitklap > summary::-webkit-details-marker { display: none; }
.ck-tco-uitklap > summary::before {
  content: ''; flex: none; width: 6px; height: 6px; margin-right: var(--space-1);
  border-right: 1px solid var(--ck-ink-2); border-bottom: 1px solid var(--ck-ink-2); transform: rotate(-45deg);
}
.ck-tco-uitklap[open] > summary::before { transform: rotate(45deg); }
.ck-tco-uitklap > summary .ck-dim { font-weight: 400; }
.ck-tco-uitklap > summary:focus-visible { outline: 2px solid var(--ck-ink); outline-offset: -2px; }
.ck-tco-regels { max-height: 420px; overflow-y: auto; }
/* datum en werkordernummer blijven één regel; de tabel scrolt in zijn eigen vak (.ck-scroll-x), dus geen paginascroll */
.ck-tbl td.ck-tco-vast { white-space: nowrap; }

/* 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); }

/* ── de gebruikende BV (golf T1, docs/TCO_VLOOT_PER_BV.md §3) ──────────────
 * De kleur van een entiteit komt uit de data: tco-toewijzing.js zet hem als
 * custom property --tco-ent op het element (data-tco-kleur, kleurToepassen),
 * net als het aantal voertuigen van een segment (--tco-n). Hier staat geen
 * kale hex en geen kale pixelwaarde voor ritme; zonder kleur de haarlijn. */
/* een lange naam (Beheer laat 120 tekens toe) kapt af binnen het vak, met de volledige naam als title (reviewronde 2) */
.ck-tco-ent {
  display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; min-width: 0; min-height: 20px; overflow: hidden;
  padding: 0 var(--space-2) 0 var(--space-1); border: 1px solid var(--ck-line-strong); border-radius: var(--ck-r-tag);
  background: var(--ck-panel); color: var(--ck-ink); font-size: var(--ck-fs-12); font-weight: 500; white-space: nowrap; vertical-align: middle;
}
.ck-tco-ent-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* in een tabelcel geldt 100% niet (de cel groeit mee met de inhoud): daar een vaste bovengrens, zodat een lange naam
   de tabel niet breder maakt dan zijn vak */
.ck-tbl .ck-tco-ent { max-width: 8rem; }
.ck-tco-ent-bol { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: var(--radius-badge); background: var(--tco-ent, var(--ck-line-strong)); }
.ck-tco-ent.is-none { border-style: dashed; color: var(--ck-ink-2); }
/* in een filterchip alleen bol en naam, de chip zelf is de rand; de chip krimpt mee met een lange naam, het getal blijft */
.ck-tco-entfilter .ck-chip { max-width: 100%; min-width: 0; }
.ck-tco-entfilter .ck-chip .ck-tco-ent { min-height: 0; min-width: 0; padding: 0; border: 0; background: none; color: inherit; }
.ck-tco-entfilter .ck-chip .ck-dim { flex: none; }
.ck-tco-entfilter .ck-chip[aria-pressed="true"] .ck-dim { color: inherit; }

/* Eigenaar met slotje en In gebruik bij in de metakaart van de kentekenkaart */
.ck-tco-eigenaar { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; min-width: 0; }
.ck-tco-eigenaar .ck-ico { flex: none; color: var(--ck-ink-2); }
.ck-tco-gebruik { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; }
.ck-tco-twbody, .ck-tco-gebruikbody { display: flex; flex-direction: column; gap: var(--space-2); }
.ck-tco-twbody > .ck-notitie { margin: 0; }

/* de toewijzingshistorie als tijdlijn, nieuwste boven */
.ck-tco-tijdlijn { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ck-tco-tijdlijn-item { display: flex; flex-direction: column; gap: var(--space-1); padding-left: var(--space-3); border-left: 2px solid var(--ck-line); }
.ck-tco-tijdlijn-item:first-child { border-left-color: var(--ck-ink-2); }
.ck-tco-tijdlijn-kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--ck-fs-13); }
/* een vervallen toewijzing (R9, [AFW-6.84]): blijft zichtbaar, telt niet mee */
.ck-tco-tijdlijn-item.is-vervallen { border-left-style: dashed; color: var(--ck-ink-2); }
.ck-tco-tijdlijn-item.is-vervallen .ck-tco-ent { opacity: 0.6; }

/* de gesegmenteerde balk van de Vloot: een segment per entiteit, breed naar het aantal voertuigen,
   het getal op een vlak in de paneelkleur zodat het op elke entiteitskleur leesbaar is; klik = filter.
   Geen vaste minimale breedte: elk segment valt altijd binnen de balk, ook bij veel entiteiten op 390, en de
   breedte blijft naar het aantal; in een te smal segment verdwijnt het getal (het staat in aria-label, title en de
   filterchips eronder) (reviewronde 2) */
.ck-tco-segmenten {
  display: flex; width: 100%; min-height: 30px; overflow: hidden;
  border: 1px solid var(--ck-line-strong); border-radius: var(--ck-r); background: var(--ck-panel-2);
}
.ck-tco-segment {
  display: flex; flex: var(--tco-n, 1) 1 0; align-items: center; justify-content: center; min-width: 0; padding: 0; overflow: hidden;
  container-type: inline-size;
  border: 0; border-right: 1px solid var(--ck-panel); background: var(--tco-ent, var(--ck-line-strong)); font: inherit; cursor: pointer;
}
@container (max-width: 2rem) { .ck-tco-segment > span { display: none; } }
.ck-tco-segment:last-child { border-right: 0; }
.ck-tco-segment.is-none { background-image: repeating-linear-gradient(45deg, transparent 0 5px, var(--ck-panel) 5px 7px); }
.ck-tco-segment > span {
  padding: 0 var(--space-1); border-radius: var(--ck-r-tag); background: var(--ck-panel); color: var(--ck-ink);
  font-size: var(--ck-fs-12); font-weight: 600; line-height: 1.4;
}
.ck-tco-segmenten:has([aria-pressed="true"]) .ck-tco-segment[aria-pressed="false"] { opacity: 0.4; }
.ck-tco-segment[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ck-ink); }
.ck-tco-segment:focus-visible { outline: 2px solid var(--ck-ink); outline-offset: -2px; }

/* selectievakjes in de vloottabel en de bulkbalk (de donkere balk van het Actiecentrum) */
.ck-tbl th.ck-tco-kies, .ck-tbl td.ck-tco-kies { width: 34px; text-align: center; }
/* een lange kolomkop (Per maand met data) breekt af, zodat Per voertuig op 1366 in zijn vak past (reviewronde 1) */
.ck-tbl th.ck-tco-kopbreekt { white-space: normal; }
.ck-tco-kies input { width: 16px; height: 16px; margin: 0; accent-color: var(--ck-ink); cursor: pointer; }
.ck-tco-bulk[hidden] { display: none; }
.ck-tco-bulkveld { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--ck-fs-125); color: var(--ck-bar-ink-2); }
.ck-tco-bulk .ck-invoer { height: 32px; min-width: 0; }
.ck-tco-bulk select.ck-invoer { max-width: 220px; }
.ck-tco-bulkveld:has(#tco-bulk-reden) { flex: 1 1 180px; }
.ck-tco-bulkveld #tco-bulk-reden { flex: 1; }

/* een blijvende melding na een bulkactie: de overgeslagen kentekens met hun reden als lijst */
.ck-tco-melding { align-items: flex-start; }
.ck-tco-melding.is-aandacht { border-color: var(--ck-warn-line); background: var(--ck-warn-bg); color: var(--ck-warn-ink); }
.ck-tco-meldingtekst { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.ck-tco-meldingtekst .ck-tco-lijst { margin: 0; }

/* voorstellen: de signalen per bron, de score, en de signalen uit portaal_signalen. Een minimale breedte van 10rem: met
   twee chips op hun grens van 8rem (Nu en Voorstel) passen Overnemen en Anders toewijzen op 1366 in het vak; met 16rem
   vielen ze er bij een entiteitsnaam van realistische lengte buiten (reviewronde 3). De regels breken af (flex-wrap). */
.ck-tco-signalen { display: flex; flex-direction: column; gap: var(--space-1); min-width: 10rem; margin: 0; padding: 0; list-style: none; }
/* een datum of kenteken in een smalle kolom breekt niet midden in de waarde af; de tabel scrolt in zijn eigen vak */
.ck-tco-heel { white-space: nowrap; }
.ck-tco-signalen li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.ck-tco-signaalbron { color: var(--ck-ink-2); font-size: var(--ck-fs-12); }
.ck-tco-score { font-weight: 600; white-space: nowrap; }
.ck-tco-signaalblok { display: flex; flex-direction: column; gap: var(--space-1); }
.ck-tco-signaalblok + .ck-tco-signaalblok { padding-top: var(--space-2); border-top: 1px solid var(--ck-line); }
.ck-tco-signaalkop { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--ck-fs-13); }
.ck-tco-signaalblok .ck-tco-lijst { overflow-wrap: anywhere; }

/* een knop met een lange tekst (Alle voorstellen met twee of meer bronnen overnemen) breekt af op een smal scherm */
.ck-tco-knop-lang { max-width: 100%; height: auto; min-height: 34px; padding-top: var(--space-1); padding-bottom: var(--space-1); white-space: normal; text-align: start; line-height: 1.3; }

/* de fout in een venster (Toewijzen, Corrigeren, Entiteit): leeg neemt hij geen ruimte */
.ck-tco-formfout { margin: 0; color: var(--ck-neg); font-size: var(--ck-fs-13); font-weight: 600; overflow-wrap: anywhere; }
.ck-tco-formfout:empty { display: none; }
.ck-tco-kleurkeuze { width: 72px; padding: var(--space-1); cursor: pointer; }
.ck-tco-houder { gap: var(--space-1); }
.ck-tco-houder .ck-ico { flex: none; }