/* ============================================================
   VKRNL - css/components.css
   Knoppen, kaarten, tabellen, statuslabels, meldingen, dialogen.
   ============================================================ */

/* --- Knoppen --------------------------------------------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-2);
  min-height: 42px;
  padding: 0 var(--ruimte-4);
  font-size: var(--tekst-md);
  font-weight: 600;
  color: var(--tekst);
  background: var(--vlak);
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--rond-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  white-space: nowrap;
}
.knop:hover { background: var(--vlak-zacht); text-decoration: none; }
.knop:active { transform: translateY(1px); }
.knop:disabled, .knop[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.knop-primair {
  color: var(--tekst-omgekeerd);
  background: var(--blauw-500);
  border-color: var(--blauw-500);
}
.knop-primair:hover { background: var(--blauw-600); border-color: var(--blauw-600); }

.knop-donker {
  color: var(--tekst-omgekeerd);
  background: var(--zijbalk-bg);
  border-color: var(--zijbalk-bg);
}
.knop-donker:hover { background: var(--blauw-900); }

.knop-gevaar {
  color: var(--rood);
  background: var(--rood-bg);
  border-color: #f3c6c1;
}
.knop-gevaar:hover { background: #fbdcd8; }

.knop-stil {
  background: transparent;
  border-color: transparent;
  color: var(--tekst-zacht);
}
.knop-stil:hover { background: var(--grijs-bg); }

.knop-klein { min-height: 34px; padding: 0 var(--ruimte-3); font-size: var(--tekst-sm); }
.knop-breed { width: 100%; }

.knop-rij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}

/* --- Kaarten --------------------------------------------- */
.kaart {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw-sm);
}
.kaart-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-3);
  padding: var(--ruimte-4) var(--ruimte-5);
  border-bottom: 1px solid var(--lijn);
}
.kaart-kop h2, .kaart-kop h3 { margin: 0; }
.kaart-inhoud { padding: var(--ruimte-5); }
.kaart-voet {
  padding: var(--ruimte-4) var(--ruimte-5);
  border-top: 1px solid var(--lijn);
  background: var(--vlak-zacht);
  border-radius: 0 0 var(--rond) var(--rond);
}

/* --- Kengetallen ----------------------------------------- */
.kengetallen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--ruimte-4);
  margin-bottom: var(--ruimte-5);
}
.kengetal {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--blauw-500);
  border-radius: var(--rond);
  padding: var(--ruimte-4);
  box-shadow: var(--schaduw-sm);
}
.kengetal-label {
  font-size: var(--tekst-sm);
  color: var(--tekst-zacht);
  font-weight: 600;
}
.kengetal-waarde {
  font-size: var(--tekst-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.kengetal-toelichting { font-size: var(--tekst-sm); color: var(--tekst-licht); }
.kengetal.rand-groen  { border-left-color: var(--groen); }
.kengetal.rand-oranje { border-left-color: var(--oranje); }
.kengetal.rand-rood   { border-left-color: var(--rood); }
.kengetal.rand-grijs  { border-left-color: var(--grijs); }

/* --- Tabellen -------------------------------------------- */
.tabel-omhulsel {
  overflow-x: auto;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--vlak);
}
table.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tekst-md);
}
table.tabel th {
  text-align: left;
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-zacht);
  background: var(--vlak-zacht);
  padding: var(--ruimte-3) var(--ruimte-4);
  border-bottom: 1px solid var(--lijn);
  white-space: nowrap;
}
table.tabel td {
  padding: var(--ruimte-3) var(--ruimte-4);
  border-bottom: 1px solid var(--lijn);
  vertical-align: middle;
}
table.tabel tbody tr:last-child td { border-bottom: 0; }
table.tabel tbody tr:hover { background: var(--blauw-50); }
table.tabel td.rechts, table.tabel th.rechts { text-align: right; }
.tabel-nummer { font-variant-numeric: tabular-nums; }

/* --- Statuslabels ---------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--rond-vol);
  font-size: var(--tekst-xs);
  font-weight: 650;
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.status-concept        { color: var(--grijs);     background: var(--grijs-bg); }
.status-bevestigd      { color: var(--turquoise); background: var(--turquoise-bg); }
.status-gepland        { color: var(--blauw-600); background: var(--blauw-100); }
.status-in_uitvoering  { color: var(--oranje);    background: var(--oranje-bg); }
.status-uitgevoerd     { color: var(--paars);     background: var(--paars-bg); }
.status-afgerond       { color: var(--groen);     background: var(--groen-bg); }
.status-geannuleerd    { color: var(--rood);      background: var(--rood-bg); }
.status-actief         { color: var(--groen);     background: var(--groen-bg); }
.status-inactief       { color: var(--grijs);     background: var(--grijs-bg); }
.status-ingediend      { color: var(--oranje);    background: var(--oranje-bg); }
.status-goedgekeurd    { color: var(--groen);     background: var(--groen-bg); }
.status-afgekeurd      { color: var(--rood);      background: var(--rood-bg); }
.status-vakantie       { color: var(--turquoise); background: var(--turquoise-bg); }
.status-ziek           { color: var(--rood);      background: var(--rood-bg); }
.status-verlof         { color: var(--paars);     background: var(--paars-bg); }
.status-cursus         { color: var(--blauw-600); background: var(--blauw-100); }
.status-niet_beschikbaar { color: var(--grijs);   background: var(--grijs-bg); }
.status-anders         { color: var(--grijs);     background: var(--grijs-bg); }

/* --- Formulieren ----------------------------------------- */
.veldgroep { margin-bottom: var(--ruimte-4); }
.veldgroep .hulp { font-size: var(--tekst-xs); color: var(--tekst-licht); margin-top: var(--ruimte-1); }
.veldgroep .fout { font-size: var(--tekst-xs); color: var(--rood); margin-top: var(--ruimte-1); }
.veldgroep.heeft-fout input,
.veldgroep.heeft-fout select,
.veldgroep.heeft-fout textarea { border-color: var(--rood); }

.velden {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--ruimte-4);
}
.kolom-2  { grid-column: span 2; }
.kolom-3  { grid-column: span 3; }
.kolom-4  { grid-column: span 4; }
.kolom-6  { grid-column: span 6; }
.kolom-8  { grid-column: span 8; }
.kolom-9  { grid-column: span 9; }
.kolom-12 { grid-column: span 12; }

.veldset-titel {
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--tekst-licht);
  margin: var(--ruimte-5) 0 var(--ruimte-3);
  padding-bottom: var(--ruimte-2);
  border-bottom: 1px solid var(--lijn);
}
.veldset-titel:first-child { margin-top: 0; }

.schakelaar {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  padding: var(--ruimte-3);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-sm);
  cursor: pointer;
  background: var(--vlak);
}
.schakelaar:hover { background: var(--vlak-zacht); }
.schakelaar input[type="checkbox"] {
  width: 20px; height: 20px;
  accent-color: var(--blauw-500);
  margin: 0;
  flex: none;
}
.schakelaar span { font-weight: 600; font-size: var(--tekst-md); color: var(--tekst); }

/* --- Zoek- en filterbalk --------------------------------- */
.filterbalk {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-3);
  align-items: flex-end;
  margin-bottom: var(--ruimte-4);
}
.filterbalk .veldgroep { margin-bottom: 0; }
.filterbalk .groeit { flex: 1 1 220px; }

/* --- Meldingen ------------------------------------------- */
.melding {
  display: flex;
  gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4);
  border-radius: var(--rond-sm);
  font-size: var(--tekst-md);
  margin-bottom: var(--ruimte-4);
  border: 1px solid transparent;
}
.melding-fout    { color: var(--rood);   background: var(--rood-bg);   border-color: #f3c6c1; }
.melding-goed    { color: var(--groen);  background: var(--groen-bg);  border-color: #bfe4cf; }
.melding-info    { color: var(--blauw-700); background: var(--blauw-50); border-color: var(--blauw-100); }
.melding-let-op  { color: var(--oranje); background: var(--oranje-bg); border-color: #f2dab0; }

/* --- Tijdelijke meldingen (toast) ------------------------ */
.meldingen-hoek {
  position: fixed;
  right: var(--ruimte-4);
  bottom: var(--ruimte-4);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-2);
  max-width: min(380px, calc(100vw - 32px));
}
.toast {
  padding: var(--ruimte-3) var(--ruimte-4);
  border-radius: var(--rond-sm);
  box-shadow: var(--schaduw-lg);
  color: var(--tekst-omgekeerd);
  background: var(--zijbalk-bg);
  font-weight: 600;
  font-size: var(--tekst-md);
  animation: toast-in .18s ease-out;
}
.toast-goed { background: var(--groen); }
.toast-fout { background: var(--rood); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Lege staat ------------------------------------------ */
.leeg {
  text-align: center;
  padding: var(--ruimte-7) var(--ruimte-4);
  color: var(--tekst-zacht);
}
.leeg h3 { color: var(--tekst); }

/* --- Laden ----------------------------------------------- */
.laden {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-3);
  padding: var(--ruimte-6);
  color: var(--tekst-zacht);
}
.tol {
  width: 20px; height: 20px;
  border: 2px solid var(--lijn-sterk);
  border-top-color: var(--blauw-500);
  border-radius: 50%;
  animation: draaien .7s linear infinite;
}
@keyframes draaien { to { transform: rotate(360deg); } }

/* --- Dialoog --------------------------------------------- */
.dialoog-achtergrond {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 33, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ruimte-4);
  z-index: 950;
}
/* Een venster bovenop een venster: bijvoorbeeld een projectrit
   toevoegen terwijl het urenformulier openstaat. De achtergrond
   van een gewoon dialoogvenster staat op 950, dus dit moet daar
   overheen. Eerder stond hier een inline waarde van 60, waardoor
   het tweede venster juist erachter verdween. */
.dialoog-achtergrond.dialoog-boven { z-index: 970; }

.dialoog {
  background: var(--vlak);
  border-radius: var(--rond-lg);
  box-shadow: var(--schaduw-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}
.dialoog-kop {
  padding: var(--ruimte-5) var(--ruimte-5) 0;
}
.dialoog-inhoud { padding: var(--ruimte-4) var(--ruimte-5); }
.dialoog-voet {
  display: flex;
  justify-content: flex-end;
  gap: var(--ruimte-2);
  padding: var(--ruimte-4) var(--ruimte-5) var(--ruimte-5);
}

/* --- Diversen -------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--rond-vol);
  background: var(--grijs-bg);
  color: var(--tekst-zacht);
  font-size: var(--tekst-xs);
  font-weight: 600;
}
.zacht { color: var(--tekst-zacht); }
.klein { font-size: var(--tekst-sm); }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }

/* ============================================================
   Toevoegingen stap 2 - module Projecten
   Zelfde ontwerptaal, alleen nieuwe onderdelen.
   ============================================================ */

/* --- Bredere dialoog met kopregel --- */
.dialoog-breed { max-width: 760px; }

.dialoog-kop-rij {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ruimte-3);
}
.dialoog-kop-rij h3 { margin: 0; }

.dialoog-sluiten {
  border: 0;
  background: transparent;
  color: var(--tekst-licht);
  font-size: 26px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  border-radius: var(--rond-sm);
}
.dialoog-sluiten:hover { color: var(--tekst); background: var(--grijs-bg); }

.formulier-bezig { opacity: .6; pointer-events: none; }

/* --- Invoerveld met knop ernaast --- */
.veld-met-knop { display: flex; gap: var(--ruimte-2); }
.veld-met-knop input { min-width: 0; }

/* --- Sorteerbare kolomkoppen --- */
table.tabel th.sorteerbaar {
  cursor: pointer;
  user-select: none;
  padding-right: var(--ruimte-5);
  position: relative;
}
table.tabel th.sorteerbaar:hover { color: var(--blauw-600); }
table.tabel th.sorteerbaar::after {
  content: "";
  position: absolute;
  right: var(--ruimte-3);
  top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-right: 2px solid var(--lijn-sterk);
  border-bottom: 2px solid var(--lijn-sterk);
  transform: rotate(45deg);
  opacity: .35;
}
table.tabel th.sorteerbaar.sorteer-op::after {
  border-color: var(--blauw-500);
  opacity: 1;
  transform: rotate(-135deg);
  margin-top: -1px;
}
table.tabel th.sorteerbaar.sorteer-af::after {
  border-color: var(--blauw-500);
  opacity: 1;
  transform: rotate(45deg);
  margin-top: -6px;
}

/* --- Acties in een tabelrij --- */
.tabel-acties {
  display: inline-flex;
  gap: var(--ruimte-1);
  justify-content: flex-end;
}
.knop-actie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-sm);
  background: var(--vlak);
  color: var(--tekst-zacht);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.knop-actie svg { width: 18px; height: 18px; }
.knop-actie:hover {
  background: var(--blauw-50);
  border-color: var(--blauw-100);
  color: var(--blauw-600);
}
.knop-actie-gevaar:hover {
  background: var(--rood-bg);
  border-color: #f3c6c1;
  color: var(--rood);
}

/* --- Paginering --- */
.paginering {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-3);
  flex-wrap: wrap;
  padding: var(--ruimte-4) var(--ruimte-5);
  border-top: 1px solid var(--lijn);
  background: var(--vlak-zacht);
  border-radius: 0 0 var(--rond) var(--rond);
}
.paginering-tekst {
  font-size: var(--tekst-sm);
  color: var(--tekst-zacht);
  font-variant-numeric: tabular-nums;
}
.paginering-knoppen {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
}
.paginering-pagina {
  font-size: var(--tekst-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Detailweergave --- */
.detail-kop {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-4);
}
.detailrijen { display: flex; flex-direction: column; }
.detailrij {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--ruimte-3);
  padding: var(--ruimte-2) 0;
  border-bottom: 1px solid var(--lijn);
  font-size: var(--tekst-md);
}
.detailrij:last-child { border-bottom: 0; }
.detaillabel {
  font-size: var(--tekst-sm);
  font-weight: 600;
  color: var(--tekst-zacht);
}
.detailwaarde { white-space: pre-wrap; word-break: break-word; }

/* --- Alleen op telefoon tonen --- */
.alleen-mobiel { display: none; }

/* --- Draaiende indicator in een knop --- */
.knop .tol {
  width: 16px;
  height: 16px;
  border-width: 2px;
  border-color: rgba(20, 33, 46, .25);
  border-top-color: var(--blauw-500);
  flex: none;
}
.knop-primair .tol,
.knop-donker .tol {
  border-color: rgba(255, 255, 255, .4);
  border-top-color: #fff;
}

/* --- Kaart met een tabel erin: hoeken netjes afronden --- */
.kaart-tabel { overflow: hidden; }

/* ============================================================
   Toevoegingen stap 3 - statuskleuren en navigatieknoppen
   ============================================================ */

/* Statuskleuren op basis van de centrale statuslijst */
.status-kleur-grijs     { color: var(--grijs);     background: var(--grijs-bg); }
.status-kleur-blauw     { color: var(--blauw-600); background: var(--blauw-100); }
.status-kleur-groen     { color: var(--groen);     background: var(--groen-bg); }
.status-kleur-oranje    { color: var(--oranje);    background: var(--oranje-bg); }
.status-kleur-rood      { color: var(--rood);      background: var(--rood-bg); }
.status-kleur-paars     { color: var(--paars);     background: var(--paars-bg); }
.status-kleur-turquoise { color: var(--turquoise); background: var(--turquoise-bg); }

/* Statuscodes die na stap 3 zijn toegevoegd (terugvaloptie) */
.status-offerte      { color: var(--turquoise); background: var(--turquoise-bg); }
.status-goedgekeurd  { color: var(--turquoise); background: var(--turquoise-bg); }
.status-gefactureerd { color: var(--groen);     background: var(--groen-bg); }
.status-gearchiveerd { color: var(--grijs);     background: var(--grijs-bg); }
.status-benodigd     { color: var(--grijs);     background: var(--grijs-bg); }
.status-gereserveerd { color: var(--blauw-600); background: var(--blauw-100); }
.status-uitgegeven   { color: var(--oranje);    background: var(--oranje-bg); }
.status-retour       { color: var(--groen);     background: var(--groen-bg); }
.status-beschadigd   { color: var(--rood);      background: var(--rood-bg); }
.status-vermist      { color: var(--rood);      background: var(--rood-bg); }

/* Navigatieknoppen naar de werklocatie */
.navigatieknoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}
.navigatieknoppen .knop { flex: 1 1 150px; }
.navigatieknoppen .pictogram { width: 18px; height: 18px; flex: none; }

/* Waarschuwingsregel binnen een lijst */
.waarschuwing {
  display: flex;
  gap: var(--ruimte-2);
  align-items: flex-start;
  padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--rond-sm);
  font-size: var(--tekst-sm);
  background: var(--oranje-bg);
  color: var(--oranje);
  border: 1px solid #f2dab0;
  margin-top: var(--ruimte-2);
}
.waarschuwing-ernstig { background: var(--rood-bg); color: var(--rood); border-color: #f3c6c1; }
.waarschuwing strong { font-weight: 700; }

/* ============================================================
   Gedeelde formulierindeling met samenvattende zijbalk
   Gebruikt door de medewerkersmodule en beschikbaar voor
   iedere volgende module met een groot formulier.
   ============================================================ */

.formulier-indeling {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--ruimte-5);
  align-items: start;
}
/* Voorkomt dat brede invoervelden de kolom oprekken */
.formulier-indeling > * { min-width: 0; }
.formulier-zijbalk { position: sticky; top: var(--ruimte-4); min-width: 0; }

.zijkaart {
  min-width: 0;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw-sm);
  padding: var(--ruimte-4);
  margin-bottom: var(--ruimte-3);
}
.zijkaart:last-child { margin-bottom: 0; }
.zijkaart h4 {
  margin: 0 0 var(--ruimte-3);
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-licht);
  font-weight: 700;
}

.zijregel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--ruimte-2) var(--ruimte-3);
  font-size: var(--tekst-sm);
  padding: 4px 0;
  line-height: 1.45;
}
.zijregel .kop { color: var(--tekst-zacht); white-space: nowrap; }
.zijregel .waarde {
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}
.zijregel .waarde.leeg { color: var(--tekst-licht); }

.zijchecklist { list-style: none; margin: 0; padding: 0; }
.zijchecklist li {
  display: flex;
  gap: var(--ruimte-2);
  align-items: flex-start;
  font-size: var(--tekst-sm);
  padding: 3px 0;
  color: var(--tekst-zacht);
}
.zijchecklist li.klaar { color: var(--groen); }
.zijchecklist li .vink { flex: none; width: 16px; text-align: center; font-weight: 700; }

@media (max-width: 980px) {
  .formulier-indeling { grid-template-columns: 1fr; gap: var(--ruimte-4); }
  .formulier-zijbalk { position: static; order: -1; }
}


/* ============================================================
   Totalenbalk onder een tabel

   Stond eerder in css/uren.css, maar wordt ook op de
   facturatiepagina gebruikt. Daar was uren.css niet ingeladen,
   waardoor de labels en bedragen ongestileerd onder elkaar in de
   linkermarge vielen. Uren.css erbij laden was geen optie: dat
   bestand overschrijft met opzet de statuskleuren voor uren, en
   dan zou de status Concept op het factuuroverzicht van kleur
   veranderen.
   ============================================================ */
/* --- Totalenbalk ------------------------------------------ */
.urentotalen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--ruimte-3);
  padding: var(--ruimte-4);
  border-top: 1px solid var(--lijn);
  background: var(--vlak-zacht);
  border-radius: 0 0 var(--rond) var(--rond);
}
.urentotaal .label {
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-licht);
  font-weight: 700;
}
.urentotaal .waarde {
  font-size: var(--tekst-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}



/* ============================================================
   Tabbladen

   Stonden eerder in css/project-detail.css, maar worden op acht
   pagina's gebruikt. Op de rapportagepagina was dat bestand niet
   ingeladen, waardoor de tabbladen als losse grijze knopjes op
   een rij stonden in plaats van als tabbladen.
   ============================================================ */
/* --- Tabbladen --- */
.tabbladen {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1px solid var(--lijn);
  margin-bottom: var(--ruimte-5);
  -webkit-overflow-scrolling: touch;
}
.tabblad {
  border: 0;
  background: transparent;
  padding: var(--ruimte-3) var(--ruimte-4);
  font-size: var(--tekst-md);
  font-weight: 600;
  color: var(--tekst-zacht);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.tabblad:hover { color: var(--tekst); background: var(--vlak-zacht); }
.tabblad.actief {
  color: var(--blauw-600);
  border-bottom-color: var(--blauw-500);
}
.tabblad .telling {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--rond-vol);
  background: var(--grijs-bg);
  color: var(--tekst-zacht);
  font-size: var(--tekst-xs);
  font-variant-numeric: tabular-nums;
}
.tabblad.actief .telling { background: var(--blauw-100); color: var(--blauw-700); }

.tabpaneel { display: none; }
.tabpaneel.actief { display: block; }

/* --- Tablet en telefoon ----------------------------------- */
@media (max-width: 860px) {
  .urentotalen { grid-template-columns: repeat(2, 1fr); }
  .tabblad { padding: var(--ruimte-3); font-size: var(--tekst-sm); }
}


/* ============================================================
   TIJDKEUZE
   Een tijdveld wordt in JavaScript vervangen door een keuzelijst
   met kwartieren (js/utils.js, tijdKeuzes). Die moet er precies zo
   uitzien als het veld dat hij vervangt - anders valt hij op tussen
   de datumvelden ernaast.
   ============================================================ */

select[data-tijdkeuze] {
  font-variant-numeric: tabular-nums;
}

/* Een afwijkende tijd uit oude gegevens - 07:23 - krijgt een eigen
   optie. Op het scherm zie je daar niets van; in de lijst staat er
   "(afwijkend)" achter, zodat je weet waarom hij er tussen staat. */
select[data-tijdkeuze] option[value=""] { color: var(--tekst-licht); }


/* ============================================================
   STAP 26A - ONTBREKENDE KLASSEN

   Deze klassen werden in de code gezet maar bestonden nergens in de
   opmaak. Gevonden door alle 573 gebruikte klassen te vergelijken
   met wat de css kent.
   ============================================================ */

/* .knop-rand stond 14 keer in de code zonder enige opmaak: die
   knoppen zagen eruit als kale tekst. Een omrande knop, tussen de
   gewone knop en de primaire in. */
.knop-rand {
  background: transparent;
  border-color: var(--blauw-400);
  color: var(--blauw-600);
}
.knop-rand:hover {
  background: var(--blauw-50);
  border-color: var(--blauw-500);
  color: var(--blauw-700);
}

/* Zes velden stonden op kolom-5; die viel terug op de volle breedte
   omdat alleen 4, 6 en 12 bestonden. */
.veldgroep.kolom-5 { grid-column: span 5; }

/* Een uitgeschakelde of geblokkeerde regel in een tabel. */
tr.rij-uit { opacity: .55; }
tr.rij-uit td { text-decoration: none; }

/* Het pijltje bij een sorteerbare kolomkop. Stond 9 keer in de
   code; zonder opmaak stond het pijltje pal tegen de tekst aan. */
.sorteerpijl {
  display: inline-block;
  margin-left: 4px;
  font-size: var(--tekst-xs);
  color: var(--tekst-licht);
  vertical-align: middle;
}

/* Kleine toelichting onder een kop of naast een veld. */
.toelichting {
  font-size: var(--tekst-sm);
  color: var(--tekst-licht);
  line-height: 1.45;
}

/* .bezig-laden staat op de body van 27 pagina's en wordt verwijderd
   zodra het laden klaar is.
   
   HIER STOND OPMAAK DIE DE INHOUD VERBORG ZOLANG DIE KLASSE ER
   STOND. Dat was fout: gaat er ergens in het laden iets mis, dan
   wordt de klasse nooit verwijderd en is de hele pagina onzichtbaar.
   Een fout die eerst zichtbaar was, werd daarmee een leeg scherm.
   
   Bewust GEEN opmaak. Dat de klasse zonder regel niets doet, is geen
   gebrek: hij is er om JavaScript te laten weten waar het staat, niet
   om iets te verbergen. */


/* Twee of meer schakelaars naast elkaar op één regel. Onder elkaar
   nemen ze onnodig veel hoogte in en lijken ze losse velden; naast
   elkaar zie je dat ze bij elkaar horen. Op een smal scherm vallen
   ze vanzelf onder elkaar. */
.schakelrij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-3) var(--ruimte-5);
  margin-bottom: var(--ruimte-2);
}

.schakelrij .schakelaar { margin: 0; }


/* Een hulptekst die ergens op wijst in plaats van alleen uitlegt.
   Bijvoorbeeld: deze klant eist een referentie op de factuur. */
.veldgroep .hulp.let-op {
  color: var(--oranje);
  font-weight: 600;
}