/* ============================================================
   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); }
/* Blauw voor een getal dat opvalt zonder dat er iets mis is: uren in
   de nacht of het weekend zijn geen probleem, maar wel waar je naar
   kijkt als je de toeslagen nareken. */
.kengetal.rand-blauw  { border-left-color: var(--blauw-500); }

/* Een kengetal dat de lijst eronder filtert, is een knop. Hij ziet er
   hetzelfde uit als de andere kaarten - het is geen aparte bediening,
   maar dezelfde kaart die toevallig iets doet. Een knop en geen div,
   zodat tabben en een schermlezer hem ook vinden. */
.kengetal-knop {
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--blauw-500);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.kengetal-knop:hover { filter: brightness(0.97); }
.kengetal-knop:focus-visible { outline: 2px solid var(--blauw-500); outline-offset: 2px; }

/* De balk waarop je hebt geklikt blijft aangezet staan, zodat je ziet
   waar de lijst eronder vandaan komt. */
.kengetal-knop.gekozen {
  box-shadow: inset 0 0 0 2px var(--blauw-500), var(--schaduw-sm);
}

/* --- 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;
  /* Passen de knoppen niet naast elkaar - de dienstkaart heeft er
     vijf zodra "Gegevens aanvullen" erbij komt (v406) - dan vouwen
     ze naar een tweede regel in plaats van links uit het venster
     te lopen. */
  flex-wrap: wrap;
  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;
}

/* De soort van een project (Verhuur, Tekeningen, Offerte) naast het
   projectnummer. Blauw en niet grijs, zodat hij te onderscheiden is
   van het merkje Archief dat er soms naast staat: dat laatste zegt
   iets over de staat, dit over het soort werk. Werk krijgt geen
   merkje - dat is het gewone geval. */
.chip-soort {
  background: var(--blauw-50);
  color: var(--blauw-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; }

/* Voor een venster met een brede tabel erin. 760px dwingt daar een
   horizontale schuifbalk af, en dan moet je slepen om de kolom te
   zien waarop je een keuze maakt. Kleinere schermen houden hun
   marge via de min(). */
.dialoog-zeerbreed { max-width: min(1280px, 94vw); }

.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; }

/* Een compactere variant van hetzelfde, voor blokken die naast
   elkaar staan: het uitklappen van een urenregistratie en van een
   week op de medewerkerskaart. Label en waarde naast elkaar in
   plaats van in een vast raster. */
.detailregel {
  display: flex;
  gap: var(--ruimte-3);
  padding: 2px 0;
  font-size: var(--tekst-sm);
  align-items: baseline;
}
.detailregel .detaillabel { flex: 0 0 42%; font-weight: 400; }
.detailregel .detailwaarde { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.detailregel.valt-op .detailwaarde { font-weight: 650; color: var(--oranje); }

@media (max-width: 860px) {
  .detailregel .detaillabel { flex: 0 0 45%; }
}

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

/* ============================================================
   DE ACTIEKOLOM BLIJFT STAAN

   De actieknoppen staan in de laatste kolom. Past de tabel niet in
   het venster, dan schoven die knoppen buiten beeld en moest je
   eerst naar rechts scrollen voordat je iets kon doen - op de
   pagina's Projecten, Klanten, Facturatie en Medewerkers de meest
   voorkomende handeling.

   De kolom blijft nu aan de rechterkant plakken. Alleen de kolom
   met de kop "Acties" (class rechts) en de bijbehorende cellen
   (data-label="Acties"), zodat tabellen zonder actiekolom niets
   merken.

   Op telefoon niet: daar wordt de tabel een kaartenlijst en is er
   niets om aan vast te plakken.
   ============================================================ */
@media (min-width: 861px) {
  table.tabel thead th.rechts:last-child,
  table.tabel tbody td[data-label="Acties"] {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--vlak);
    box-shadow: -6px 0 6px -6px rgba(0, 0, 0, .18);
  }

  table.tabel thead th.rechts:last-child {
    z-index: 3;
    background: var(--vlak-zacht);
  }

  /* De rij houdt zijn eigen achtergrond bij zweven en archief, anders
     valt de vastgezette cel op als een blok in een andere kleur. */
  table.tabel tbody tr:hover td[data-label="Acties"] {
    background: var(--blauw-50);
  }
}

/* ------------------------------------------------------------
   Mijn werkomgeving: welke modules in je eigen menu staan.
   ------------------------------------------------------------ */

.modulelijst {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px 20px;
}

.moduleregel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
}
.moduleregel input { margin-top: 3px; flex: 0 0 auto; }
.moduleregel-tekst { display: flex; flex-direction: column; gap: 1px; }
.moduleregel-uit { cursor: default; opacity: 0.55; }

/* Een melding die opgeslagen is maar ergens op wijst (9041). */
.toast-let-op { background: var(--oranje, #b45309); }

/* Nog aan te vullen (9041): oranje balk op het project. */
.aanvulbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid #f2dab0;
  border-left: 4px solid var(--oranje, #b45309);
  border-radius: 8px;
  background: var(--oranje-bg, #fff7ea);
  color: #7a4a0a;
}
.aanvulbalk.verborgen { display: none; }
.aanvulbalk .knop { flex: 0 0 auto; }
@media (max-width: 860px) {
  .aanvulbalk { flex-direction: column; align-items: stretch; }
}

/* Een aanvinkregel in een kaartkop: "Archief tonen" en dergelijke.
   Label en vinkje naast elkaar, allebei klikbaar. */
.keuzeregel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: var(--tekst-sm);
  color: var(--tekst-zacht);
  cursor: pointer;
}
.keuzeregel input { margin: 0; cursor: pointer; }

/* Een gearchiveerde regel in een tabel staat er nog, maar vraagt geen
   aandacht meer. Stond in klanten.css en materieel.css; nu op één
   plek, want het weekverslag heeft hem ook nodig. */
table.tabel tbody tr.gearchiveerd td { opacity: .62; }
table.tabel tbody tr.gearchiveerd:hover td { opacity: 1; }

/* ------------------------------------------------------------
   Uitklapbare regels in een overzichtstabel

   Een overzicht dat alleen totalen laat zien, stuurt je door naar
   een andere module zodra je wilt weten waar dat getal vandaan komt.
   Elke regel klapt daarom open naar de registraties eronder.

   Stond eerder in rapportages.css en gold alleen daar. Het
   urenscherm heeft dezelfde drie overzichten (per week, per
   medewerker, per project) en had hetzelfde doodlopende einde;
   daarom staat de opmaak nu hier, bij de gedeelde onderdelen.
   De print-regels blijven in rapportages.css - alleen een
   rapportage wordt uitgedraaid.
   ------------------------------------------------------------ */
   Elke regel klapt daarom open naar de registraties eronder.
   ------------------------------------------------------------ */
table.rapporttabel tbody tr.rapportrij { cursor: pointer; }
table.rapporttabel tbody tr.rapportrij:hover td { background: var(--vlak-2, rgba(0, 0, 0, .02)); }
table.rapporttabel tbody tr.rapportrij.opengeklapt td {
  background: var(--vlak-2, rgba(0, 0, 0, .03));
  font-weight: 600;
}
table.rapporttabel tbody tr.rapportrij:focus-visible td {
  outline: 2px solid var(--blauw-500);
  outline-offset: -2px;
}

table.rapporttabel tbody tr.rapportdetail > td {
  padding: var(--ruimte-4);
  background: var(--vlak-2, rgba(0, 0, 0, .02));
  border-top: 0;
}

.rapporttabel .klapper {
  display: inline-block;
  width: 1em;
  color: var(--tekst-licht);
  font-size: var(--tekst-sm);
}

.detailgroep + .detailgroep { margin-top: var(--ruimte-4); }

.detailgroep h4 {
  margin: 0 0 var(--ruimte-2);
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tekst-licht);
}

table.detailtabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tekst-sm);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  overflow: hidden;
}

table.detailtabel th {
  text-align: left;
  font-weight: 650;
  color: var(--tekst-zacht);
  background: var(--vlak-2, rgba(0, 0, 0, .03));
  padding: 6px 10px;
  white-space: nowrap;
}

table.detailtabel td {
  padding: 6px 10px;
  border-top: 1px solid var(--lijn);
  vertical-align: top;
}

table.detailtabel th.getal, table.detailtabel td.getal {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Op een telefoon is een tabel in een tabel te smal; laat hem dan
   zelf schuiven in plaats van de kolommen plat te drukken. */
@media (max-width: 860px) {
  table.rapporttabel tbody tr.rapportdetail > td { padding: var(--ruimte-3); }
  .detailgroep { overflow-x: auto; }
}

/* ------------------------------------------------------------
   Een opklapper binnen een uitgeklapte regel

   Voor lijsten die onder een samenvatting horen maar niet meteen in
   beeld hoeven: alle losse afwezigheidsregistraties van een
   medewerker bijvoorbeeld. Iemand met een vaste vrije dag heeft er
   al snel vijftig in een jaar.
   ------------------------------------------------------------ */
.detailopklap { margin-top: var(--ruimte-3); }

.detailopklap > summary {
  cursor: pointer;
  font-size: var(--tekst-sm);
  font-weight: 650;
  color: var(--blauw-600);
  padding: var(--ruimte-2) 0;
  list-style: none;
}

.detailopklap > summary::-webkit-details-marker { display: none; }

.detailopklap > summary::before {
  content: '▸ ';
  display: inline-block;
  color: var(--tekst-licht);
}

.detailopklap[open] > summary::before { content: '▾ '; }
.detailopklap > summary:hover { text-decoration: underline; }
.detailopklap > table { margin-top: var(--ruimte-2); }

/* ============================================================
   v418 - WIE HEEFT HET GEWIJZIGD (js/wijziging-info.js)
   ============================================================ */
.link-knop {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--blauw-600);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-knop:hover { color: var(--blauw-500); }
.wijziging-kop-plek { margin-top: 2px; color: var(--tekst-zacht); }
.wijziging-kop-plek strong { color: var(--tekst); font-weight: 600; }
.wijziging-lijst { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.wijziging-regel {
  border-left: 3px solid var(--blauw-400, #6b9be0);
  padding: var(--ruimte-1) 0 var(--ruimte-1) var(--ruimte-3);
}
.wijziging-kop { margin-bottom: 2px; }
.wijziging-velden { margin: 4px 0 0; padding-left: 18px; font-size: var(--tekst-sm); }
.wijziging-velden li { margin: 2px 0; overflow-wrap: anywhere; }

/* v505: API-sleutelvelden tonen bolletjes zonder type="password",
   zodat de browser niet vraagt om een "wachtwoord" op te slaan. */
.geheim-veld { -webkit-text-security: disc; text-security: disc; font-family: monospace; }

/* v507: knop "Bellen" naast een telefoonnummer (medewerker-omgeving).
   Altijd zichtbaar, ook op smalle telefoons; groot genoeg om te tikken. */
.belregel { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.belknop {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 14px; border-radius: 999px;
  background: #16a34a; color: #fff !important; font-weight: 600; font-size: .9rem;
  text-decoration: none !important; white-space: nowrap; line-height: 1;
}
.belknop:hover, .belknop:focus-visible { background: #15803d; }
.belknop svg { flex: none; }
@media print { .belknop { display: none; } }

/* v510: zolang de eigen weergave van een medewerker nog niet staat,
   het plannersscherm niet even laten zien. Wordt altijd binnen 4
   seconden weer weggehaald (js/eigen-omgeving.js). */
html.eigen-wacht main.inhoud,
html.eigen-wacht .kopbalk-acties,
body.eigen-wacht main.inhoud,
body.eigen-wacht .kopbalk-acties { visibility: hidden; }