/* Lead Out Tax, eigen stijl.
   Geen framework en geen externe bronnen. Donker staat standaard aan, licht is een knop
   in de balk; beide komen uit dezelfde tokens.

   Opzet: bovenin de tokens, daaronder negen componenten die alle schermen delen. Paginakop,
   toolbar, segmented control, badge, kaart, tabelcontainer, knop, invoerveld en rijmarkering.
   Elk scherm is een combinatie daarvan, zodat een wijziging in de vormgeving op een plek gebeurt.

   Urgentie en status zijn ook zonder kleur te onderscheiden: er staat altijd tekst in de badge.
   Dat is bewust, want kleurenblindheid is bij zes mensen niet ondenkbaar. */

/* ------------------------------------------------------------------- lettertype */

/* Helvetica Neue, als bestand in de repository. Geen enkele externe aanvraag bij het laden. */
@font-face {
  font-family: "Helvetica Neue LOT";
  src: url("../fonts/helveticaneue-400.53cac135657f.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue LOT";
  src: url("../fonts/helveticaneue-500.00796c01005d.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue LOT";
  src: url("../fonts/helveticaneue-700.37816b0f7721.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------------- tokens */

/* De vormtaal komt uit het ontwerp Aangiftesysteem van 13 september 2026: een donkere grond,
   dunne lijnen in plaats van vlakken, kaarten met een zachte rand, en cijfers in een monospace
   letter. Donker staat standaard aan; de knop in de balk zet hem op licht en onthoudt dat per
   browser.

   De namen van de tokens zijn met opzet niet veranderd. Elk scherm leest ze al, dus met deze
   laag verandert de hele toepassing mee zonder dat er een sjabloon aan te pas komt. */

:root {
  /* Accent. Op een donkere grond is "donkerder" juist lichter: dat is de toon voor hover en
     voor tekst op een accentvlak. */
  --primair: #5b93e8;
  --primair-donker: #a9c6f5;
  --primair-licht: rgba(91, 147, 232, 0.14);
  --accent: #a9c6f5;
  --op-primair: #0b1018;

  --inkt: #e9eff8;
  --inkt-zacht: #96a5bb;
  --inkt-flauw: #65748b;

  --papier: #0b1018;
  --vlak: #141c2a;
  --vlak-zacht: #1a2433;

  --rand: rgba(233, 240, 250, 0.10);
  --rand-zacht: rgba(233, 240, 250, 0.06);
  --rand-sterk: rgba(233, 240, 250, 0.18);

  /* Op een donkere grond is diepte een randje plus omgevingsdonker, geen zachte grijze schaduw. */
  --schaduw: none;
  --schaduw-op: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* Afstanden op een schaal van 8. */
  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-5: 24px;
  --ruimte-6: 32px;

  --hoek: 7px;
  --hoek-groot: 10px;

  --regelhoogte: 1.45;
  --hoogte-balk: 56px;
  --hoogte-veld: 38px;
  --breedte: 1560px;

  /* Cijfers, datums en nummers in een monospace letter: kolommen zijn dan te vergelijken zonder
     dat er lijnen omheen hoeven. Uit de systeemletters, dus zonder extra bestand. */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Urgentie. Drie tonen: te laat, let op, in orde. Per stap een markering, een tint en een
     badge; er staat altijd tekst bij, want kleur alleen is bij zes mensen niet genoeg. */
  --te-laat: #e0614d;
  --te-laat-tint: rgba(224, 97, 77, 0.12);
  --te-laat-badge: rgba(224, 97, 77, 0.22);
  --deze-week: #d9a441;
  --deze-week-tint: rgba(217, 164, 65, 0.12);
  --deze-week-badge: rgba(217, 164, 65, 0.22);
  --deze-maand: #c9b26a;
  --deze-maand-tint: rgba(201, 178, 106, 0.10);
  --deze-maand-badge: rgba(201, 178, 106, 0.18);
  --later: #4fb286;
  --later-tint: rgba(79, 178, 134, 0.12);
  --later-badge: rgba(79, 178, 134, 0.20);
  --geen-deadline: #8b9ab1;
  --geen-deadline-tint: rgba(139, 154, 177, 0.10);
  --geen-deadline-badge: rgba(139, 154, 177, 0.18);
  --klaar: #4fb286;
  --klaar-tint: rgba(79, 178, 134, 0.10);
  --klaar-badge: rgba(79, 178, 134, 0.18);
  --vervallen: #65748b;
  --vervallen-tint: rgba(101, 116, 139, 0.10);
  --vervallen-badge: rgba(101, 116, 139, 0.18);

  --markering: rgba(217, 164, 65, 0.22);
}

/* De lichte modus. Zelfde tokens, andere waarden; alle componenten volgen vanzelf. */
:root[data-modus="licht"] {
  --primair: #3161ab;
  --primair-donker: #24497f;
  --primair-licht: rgba(49, 97, 171, 0.09);
  --accent: #24497f;
  --op-primair: #ffffff;

  --inkt: #0d1626;
  --inkt-zacht: #55647c;
  --inkt-flauw: #7c8ba1;

  --papier: #eef1f6;
  --vlak: #ffffff;
  --vlak-zacht: #f2f5fa;

  --rand: rgba(13, 25, 45, 0.10);
  --rand-zacht: rgba(13, 25, 45, 0.06);
  --rand-sterk: rgba(13, 25, 45, 0.20);

  --schaduw: 0 1px 2px rgba(13, 25, 45, 0.04), 0 1px 3px rgba(13, 25, 45, 0.06);
  --schaduw-op: 0 2px 6px rgba(13, 25, 45, 0.08);

  --te-laat: #b93a29;
  --te-laat-tint: rgba(185, 58, 41, 0.08);
  --te-laat-badge: rgba(185, 58, 41, 0.16);
  --deze-week: #8a5e10;
  --deze-week-tint: rgba(154, 106, 18, 0.10);
  --deze-week-badge: rgba(154, 106, 18, 0.18);
  --deze-maand: #7a6412;
  --deze-maand-tint: rgba(122, 100, 18, 0.08);
  --deze-maand-badge: rgba(122, 100, 18, 0.16);
  --later: #2f7d5b;
  --later-tint: rgba(47, 125, 91, 0.10);
  --later-badge: rgba(47, 125, 91, 0.18);
  --geen-deadline: #6b7078;
  --geen-deadline-tint: rgba(107, 112, 120, 0.08);
  --geen-deadline-badge: rgba(107, 112, 120, 0.16);
  --klaar: #1f6570;
  --klaar-tint: rgba(31, 101, 112, 0.08);
  --klaar-badge: rgba(31, 101, 112, 0.16);
  --vervallen: #8a898b;
  --vervallen-tint: rgba(138, 137, 139, 0.08);
  --vervallen-badge: rgba(138, 137, 139, 0.16);

  --markering: #fdf3d0;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 15px;
}

/* De paginakleur staat op het html-element, zodat het beeldmerk ertussen past: achter de
   inhoud maar voor de achtergrond. */
html {
  background: var(--papier);
}

/* Geen samengevoegde letterparen. De medium-variant van Helvetica Neue voegt i en j samen
   tot een ij-ligatuur, en die rendert met wat op een hoofdletter J lijkt: "MiJn" in plaats
   van "Mijn". Nederlands staat vol met ij, dus dat raakt bijwerken, wijzigen en tijdelijk
   net zo goed. Hiermee vervallen ook fi en fl; dat ziet niemand, een verkeerd gespeld woord
   wel. */
body {
  font-variant-ligatures: no-common-ligatures;
  margin: 0;
  font-family: "Helvetica Neue LOT", Inter, Helvetica, Arial, sans-serif;
  font-size: 0.92rem;
  line-height: var(--regelhoogte);
  color: var(--inkt);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  /* Een eigen stapelcontext, zodat het beeldmerk hieronder achter de inhoud blijft. */
  position: relative;
  z-index: 0;
}

/* Het beeldmerk linksonder, zoals op het briefpapier. Vast, dus tabellen scrollen eroverheen
   terwijl de bol blijft staan. Hij loopt links en onder van het scherm af, zodat het een
   achtergrond is en geen plaatje. Puur decoratief: geen element in de pagina, niet aan te
   klikken en niet voorgelezen. */
body::before {
  content: "";
  position: fixed;
  left: -7vw;
  bottom: -12vh;
  width: 40vw;
  height: 40vw;
  min-width: 420px;
  min-height: 420px;
  background: url("../img/leadout-beeldmerk.fa28c541fb13.svg") left bottom / contain no-repeat;
  /* Alleen op de lichte grond. Het beeldmerk is voor wit papier getekend; op de donkere
     grond bleven er lichte vegen van over die niets betekenen. */
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

@media print {
  body::before {
    display: none;
  }
}

:root[data-modus="licht"] body::before {
  opacity: 0.11;
}

a {
  color: var(--primair);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  color: var(--inkt);
}

h2 {
  margin: var(--ruimte-6) 0 var(--ruimte-3);
  font-size: 1.02rem;
}

p {
  margin: 0 0 var(--ruimte-3);
}

:focus-visible {
  outline: 2px solid var(--primair);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- 1. navigatiebalk */

/* De balk is hoger dan de 48 pixels uit het ontwerp, zodat het logo groot genoeg kan om de
   regel "By Lead GoC" leesbaar te houden. Op 24 pixels viel die weg. */

.navigatiebalk {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ruimte-4);
  height: var(--hoogte-balk);
  padding: 0 var(--ruimte-5);
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
}

/* Een dunne accentstreep onder de balk, die aan beide einden wegloopt. */
.navigatiebalk::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primair) 14%,
    var(--primair) 86%, transparent);
  opacity: 0.45;
}

.merk {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.merk:hover {
  text-decoration: none;
}

.merk {
  gap: var(--ruimte-2);
}

.merk img {
  height: 26px;
  width: 26px;
  object-fit: contain;
  display: block;
}

/* De naam in twee regels, zoals in het ontwerp: het kantoor boven, waar dit scherm over
   gaat eronder. */
.merknaam {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--inkt);
  line-height: 1.15;
}

.merkonder {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
  line-height: 1.15;
}

.navigatie {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
}

/* Tabbladen als vlakjes en niet als onderstreping: op een donkere grond leest een gevuld
   vlakje rustiger dan een lijn. */
.navigatie a {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: var(--hoek);
  color: var(--inkt-zacht);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
}

.navigatie a:hover {
  background: var(--vlak-zacht);
  color: var(--inkt);
  text-decoration: none;
}

.navigatie a.actief,
.navigatie a[aria-current="page"] {
  background: var(--primair-licht);
  color: var(--accent);
}

.gebruiker {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  margin-left: auto;
  white-space: nowrap;
}

.gebruiker-naam {
  font-weight: 500;
  font-size: 0.82rem;
}

/* De knop die tussen donker en licht wisselt. Alleen een woord; hij hoeft niet op te
   vallen, want je gebruikt hem een keer. */
.modusknop {
  padding: 5px 10px;
  border: 1px solid var(--rand-sterk);
  border-radius: var(--hoek);
  background: transparent;
  color: var(--inkt-zacht);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}

.modusknop:hover {
  border-color: var(--primair);
  color: var(--accent);
}

.gebruiker-rollen {
  font-size: 0.78rem;
  color: var(--inkt-flauw);
}

.uitlogformulier {
  margin: 0;
}

/* ------------------------------------------------------------- 2. paginakop */

.omhulsel {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-6);
}

.kopbalk {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-4);
  margin-bottom: var(--ruimte-4);
}

.kopbalk h1 {
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.acties {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  margin-left: auto;
}

.totaal {
  color: var(--inkt-flauw);
  font-size: 0.85rem;
}

/* ----------------------------------------------- 3. segmented control (weergaven) */

.weergaven {
  display: inline-flex;
  gap: var(--ruimte-1);
  margin-bottom: var(--ruimte-3);
  padding: var(--ruimte-1);
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--hoek-groot);
  box-shadow: var(--schaduw);
}

.weergave {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  padding: 6px var(--ruimte-3);
  border-radius: var(--hoek);
  color: var(--inkt-zacht);
  font-weight: 500;
  font-size: 0.86rem;
  white-space: nowrap;
}

.weergave:hover {
  background: var(--papier);
  color: var(--inkt);
  text-decoration: none;
}

.weergave.actief {
  background: var(--primair-licht);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--primair);
}

.weergave.actief:hover {
  background: var(--primair-licht);
  color: var(--accent);
}

.telling {
  font-family: var(--mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--rand-zacht);
  color: var(--inkt-zacht);
  font-size: 0.74rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.weergave.actief .telling {
  background: var(--primair-licht);
  color: var(--accent);
}

/* -------------------------------------------------------------- 4. toolbars */

.filters,
.bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-3);
  margin-bottom: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--hoek-groot);
  box-shadow: var(--schaduw);
}

/* Een bulkbalk met meer dan een handeling: elke regel op zijn eigen lijn. */
.bulk .bulkregel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-3);
  flex-basis: 100%;
}

.bulk > .uitleg {
  flex-basis: 100%;
  margin: 0;
}

.filters label,
.bulk label {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  margin: 0;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}

.filters label.vinkje,
.bulk label.vinkje {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.84rem;
  color: var(--inkt-zacht);
}

.uitleg {
  color: var(--inkt-flauw);
  font-size: 0.82rem;
}

/* ---------------------------------------------------------------- 5. knoppen */

.knop,
.knop-klein,
.knop-hoofd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-2);
  height: 36px;
  padding: 0 var(--ruimte-4);
  border-radius: var(--hoek);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

/* De hoofdknop is een omlijnd accent en geen gevuld vlak; gevuld gaat hij pas bij hover.
   Zo blijft de kleur een lijn en geen plas, ook als er drie knoppen naast elkaar staan. */
.knop,
.knop-hoofd {
  background: var(--primair-licht);
  border-color: var(--primair);
  color: var(--accent);
}

.knop:hover,
.knop-hoofd:hover {
  background: var(--primair);
  border-color: var(--primair);
  color: var(--op-primair);
  text-decoration: none;
}

.knop-klein {
  background: transparent;
  border-color: var(--rand-sterk);
  color: var(--inkt-zacht);
}

.knop-klein:hover {
  border-color: var(--primair);
  color: var(--accent);
  background: transparent;
  text-decoration: none;
}

.knop-kaal {
  background: none;
  border: none;
  padding: 0;
  color: var(--primair);
  font: inherit;
  cursor: pointer;
}

/* ------------------------------------------------------- 6. formuliervelden */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="number"],
input[type="url"],
input[type="tel"],
select,
textarea {
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--inkt);
  background: var(--papier);
  border: 1px solid var(--rand-sterk);
  border-radius: var(--hoek);
  padding: 0 var(--ruimte-3);
  height: 32px;
}

textarea {
  height: auto;
  padding: var(--ruimte-2) var(--ruimte-3);
  line-height: var(--regelhoogte);
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primair);
  box-shadow: 0 0 0 3px var(--primair-licht);
}

input::placeholder {
  color: var(--inkt-flauw);
}

/* In formulieren zijn de velden ruimer. In tabellen blijft de bediening compact, want daar
   telt hoeveel regels er op een scherm passen. */
.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="password"],
.formulier input[type="search"],
.formulier input[type="date"],
.formulier input[type="number"],
.formulier input[type="url"],
.formulier input[type="tel"],
.formulier select {
  height: var(--hoogte-veld);
  width: 100%;
}

.formulier textarea {
  width: 100%;
}

.veld {
  margin-bottom: var(--ruimte-3);
}

/* Een datumveld met de knop vandaag ernaast. De houder en de knop worden door leadout.js
   gemaakt; zonder JavaScript blijft het gewone veld over. */
.datumveld {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
}

.formulier .datumveld {
  width: 100%;
}

.formulier .datumveld input[type="date"] {
  flex: 1;
  width: auto;
  min-width: 0;
}

.vandaagknop {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid var(--rand-sterk);
  border-radius: var(--hoek);
  background: transparent;
  color: var(--inkt-zacht);
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.6;
  cursor: pointer;
}

.vandaagknop:hover {
  border-color: var(--primair);
  color: var(--accent);
}

/* De kalender opent bij een klik in het veld, dus het hele veld is een knop. */
input[type="date"] {
  cursor: pointer;
}

.veld label {
  display: block;
  margin-bottom: var(--ruimte-1);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--inkt-zacht);
}

.verplicht {
  color: var(--te-laat);
  margin-left: 2px;
}

.hulp {
  display: block;
  margin-top: var(--ruimte-1);
  font-size: 0.78rem;
  color: var(--inkt-flauw);
}

.fout {
  display: block;
  margin-top: var(--ruimte-1);
  font-size: 0.8rem;
  color: var(--te-laat);
}

.veld-fout input,
.veld-fout select,
.veld-fout textarea {
  border-color: var(--te-laat);
}

.foutlijst {
  margin: 0 0 var(--ruimte-4);
  padding: var(--ruimte-3) var(--ruimte-4);
  list-style: none;
  border-radius: var(--hoek);
  border-left: 3px solid var(--te-laat);
  background: var(--te-laat-tint);
  color: var(--te-laat);
}

/* ----------------------------------------------------------------- 7. kaarten */

.formulier {
  max-width: none;
}

.formulierblokken {
  columns: 22rem 3;
  column-gap: var(--ruimte-5);
}

/* Twee tabellen naast elkaar. Met kolomstroming gaan ze op ongelijke hoogte staan, doordat de
   browser de inhoud over de kolommen verdeelt. Een raster zet ze allebei tegen de bovenrand
   en laat ze hun eigen hoogte houden. */
.overzichtblokken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--ruimte-5);
  align-items: start;
}

.overzichtblokken > section {
  min-width: 0;
}

.overzichtblokken > section > h2 {
  margin-top: 0;
}

.formulierblokken > fieldset,
.formulierblokken > section {
  break-inside: avoid;
  page-break-inside: avoid;
}

.formulier fieldset,
.kaart {
  display: block;
  margin: 0 0 var(--ruimte-5);
  padding: var(--ruimte-5);
  border: 1px solid var(--rand);
  border-radius: var(--hoek-groot);
  background: var(--vlak);
  box-shadow: var(--schaduw);
}

/* Een gewone kaartkop in plaats van een legenda die door de rand loopt. */
.formulier legend {
  display: block;
  float: left;
  width: 100%;
  margin: 0 0 var(--ruimte-4);
  padding: 0 0 var(--ruimte-2);
  border-bottom: 1px solid var(--rand-zacht);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.formulier legend + * {
  clear: both;
}

.formulier fieldset.breed {
  padding-bottom: var(--ruimte-4);
}

.paneel {
  margin: 0 0 var(--ruimte-4);
  padding: var(--ruimte-4);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--rand);
  border-radius: var(--hoek);
  background: var(--vlak);
}

.paneel-fout {
  border-left-color: var(--te-laat);
  background: var(--te-laat-tint);
}

.paneel-let-op {
  border-left-color: var(--deze-week);
  background: var(--deze-week-tint);
}

.paneel p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------- 8. tabelcontainer */

.tabelhouder,
table.lijst,
table.werklijst,
table.verplichtingen,
table.beconschema,
table.beconkandidaten,
table.kwaliteitslijst,
table.aangiftekeuze {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--hoek-groot);
  box-shadow: var(--schaduw);
  overflow: hidden;
}

table.aangiftekeuze {
  box-shadow: none;
  border-radius: var(--hoek);
}

/* Een brede tabel schuift binnen zijn eigen kader. Zonder dit viel de rechterkolom van de
   werklijst en het beconoverzicht buiten beeld: er was geen schuifbalk en niets liet zien
   dat er meer stond. overflow-y op clip en niet op auto, want auto maakt hiervan ook een
   verticale schuifbak en dan blijft de kolomkop niet meer boven in beeld plakken. */
.tabelhouder,
.schuifbaar {
  overflow-x: auto;
  overflow-y: clip;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--ruimte-2) var(--ruimte-3);
  background: var(--vlak-zacht);
  border-bottom: 1px solid var(--rand-sterk);
  text-align: left;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
  white-space: nowrap;
}

tbody td {
  padding: var(--ruimte-2) var(--ruimte-3);
  border-bottom: 1px solid var(--rand-zacht);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: var(--vlak-zacht);
}

tfoot th {
  padding: var(--ruimte-2) var(--ruimte-3);
  border-top: 2px solid var(--rand);
  background: var(--vlak-zacht);
  text-align: left;
  font-weight: 700;
}

/* Datums in de huisletter en niet in de monospace: een datum lees je als geheel en vergelijk
   je niet cijfer voor cijfer, en een tabel die per kolom van lettertype wisselt oogt rommelig.
   Gemeten in Helvetica Neue op 14 september 2026: gewone datums als 13-05-2026, 28-02-2026 en
   30-09-2026 zijn alle drie precies even breed; alleen een datum vol enen scheelt 2,7 pixel.
   tabular-nums doet in dit lettertype niets, maar blijft staan voor als het ooit vervangen
   wordt. Echte getallen blijven wel monospace; zie hieronder bij dagen en aantallen. */
td.datum,
th.datum {
  white-space: nowrap;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

td.dagen,
th.dagen,
td.getal,
th.getal,
td.cijfer,
th.cijfer,
td.aantal,
th.aantal,
.controle-telling {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

td.kies,
th.kies {
  width: 32px;
  padding-right: 0;
}

td.klant a {
  font-weight: 500;
}

.groepskop td {
  position: sticky;
  top: 30px;
  background: var(--papier);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--inkt-zacht);
}

.groepsaantal {
  margin-left: var(--ruimte-2);
  color: var(--inkt-flauw);
  font-weight: 400;
}

.contact,
.land,
.vast {
  color: var(--inkt-flauw);
  font-size: 0.8rem;
}

.land {
  display: inline-block;
  padding: 0 4px;
  border: 1px solid var(--rand);
  border-radius: 4px;
}

/* ------------------------------------------------ 9. rijmarkering en badges */

/* Een smalle markering links, een zeer lichte tint, en een badge met tekst. De tekst is wat
   het onderscheid draagt; de kleur is ondersteunend. */
tbody tr[class*="urgentie-"] td:first-child {
  box-shadow: inset 3px 0 0 0 var(--markeerkleur, transparent);
}

.urgentie-te-laat {
  --markeerkleur: var(--te-laat);
  background: var(--te-laat-tint);
}

.urgentie-deze-week {
  --markeerkleur: var(--deze-week);
  background: var(--deze-week-tint);
}

.urgentie-deze-maand {
  --markeerkleur: var(--deze-maand);
  background: var(--deze-maand-tint);
}

.urgentie-later {
  --markeerkleur: var(--later);
}

.urgentie-geen-deadline {
  --markeerkleur: var(--geen-deadline);
}

.urgentie-klaar {
  --markeerkleur: var(--klaar);
}

.urgentie-vervallen {
  --markeerkleur: var(--vervallen);
  color: var(--inkt-flauw);
}

.urgentie-vervallen .periodelabel {
  text-decoration: line-through;
}

.badge,
.werkstatus span,
.afwijkend {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--ruimte-2);
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
}

.werkstatus span {
  background: var(--geen-deadline-badge);
  color: var(--geen-deadline);
}

.urgentie-te-laat .werkstatus span {
  background: var(--te-laat-badge);
  color: var(--te-laat);
}

.urgentie-deze-week .werkstatus span {
  background: var(--deze-week-badge);
  color: var(--deze-week);
}

.urgentie-deze-maand .werkstatus span {
  background: var(--deze-maand-badge);
  color: var(--deze-maand);
}

.urgentie-later .werkstatus span {
  background: var(--later-badge);
  color: var(--later);
}

.urgentie-klaar .werkstatus span {
  background: var(--klaar-badge);
  color: var(--klaar);
}

.urgentie-vervallen .werkstatus span {
  background: var(--vervallen-badge);
  color: var(--vervallen);
}

.afwijkend {
  margin-left: var(--ruimte-1);
  background: var(--markering);
  color: var(--inkt-zacht);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Statuskeuze in de lijst: compact, met een rustige tint per status. */
.status-keuze {
  height: 30px;
  padding: 0 var(--ruimte-2);
  font-size: 0.82rem;
  max-width: 12rem;
}

.status-nog-niet-gestart {
  color: var(--inkt-zacht);
}

.status-brondata-opgevraagd {
  border-color: var(--deze-week);
  background: var(--deze-week-tint);
}

.status-brondata-ontvangen {
  border-color: var(--accent);
  background: var(--primair-licht);
}

.status-in-bewerking {
  border-color: var(--accent);
  background: var(--primair-licht);
}

.status-in-review {
  border-color: var(--klaar);
  background: var(--klaar-tint);
}

.status-afgehandeld {
  border-color: var(--later);
  background: var(--later-tint);
}

/* --------------------------------------------------------------- berichten */

.berichten {
  max-width: var(--breedte);
  margin: var(--ruimte-3) auto 0;
  padding: 0 var(--ruimte-5);
  list-style: none;
}

.berichten li {
  margin-bottom: var(--ruimte-2);
  padding: var(--ruimte-3) var(--ruimte-4);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--accent);
  border-radius: var(--hoek);
  background: var(--vlak);
  box-shadow: var(--schaduw);
}

.bericht-success {
  border-left-color: var(--later);
}

.bericht-warning {
  border-left-color: var(--deze-week);
}

.bericht-error {
  border-left-color: var(--te-laat);
}

/* --------------------------------------------------------- overige onderdelen */

/* Een formulier met een handvol velden hoeft niet zo breed als het scherm; een invoerveld
   van 1400 pixels voor een telefoonnummer leest als een fout. */
.formulier fieldset.smal {
  max-width: 44rem;
}

/* Een lege lijst krijgt dezelfde vorm als een volle: zonder rand zweeft de zin los onder een
   kop en lijkt het scherm halverwege afgebroken. */
.leeg {
  padding: var(--ruimte-5);
  border: 1px dashed var(--rand);
  border-radius: var(--hoek-groot);
  color: var(--inkt-flauw);
  text-align: center;
}

td.leeg {
  padding: var(--ruimte-3) var(--ruimte-4);
  border: 0;
  text-align: left;
}

/* Binnen een kaart of een paneel staat de rand er al omheen. */
.kaart .leeg,
.werkpaneel .leeg,
.werkrijen .leeg,
.klantblok .leeg {
  border: 0;
}

.kengetallen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--ruimte-3);
  margin-bottom: var(--ruimte-4);
}

.kengetal {
  padding: var(--ruimte-4);
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--hoek-groot);
  box-shadow: var(--schaduw);
}

.kengetal-naam {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}

.kengetal-waarde {
  display: block;
  margin-top: var(--ruimte-1);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.klantgegevens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ruimte-3) var(--ruimte-5);
  margin: 0 0 var(--ruimte-5);
  padding: var(--ruimte-5);
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--hoek-groot);
  box-shadow: var(--schaduw);
}

.klantgegevens dt {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}

.klantgegevens dd {
  margin: 2px 0 0;
}

.dossierafspraken {
  margin: 0 0 var(--ruimte-5);
  padding: var(--ruimte-4) var(--ruimte-5);
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--hoek-groot);
  box-shadow: var(--schaduw);
}

.dossierafspraken h2 {
  margin-top: 0;
}

/* Wat er is aangevraagd, in dezelfde vorm als de rest van het scherm: een kaart met regels,
   in plaats van bolletjes onder een kop. */
.aangiftelijst {
  list-style: none;
  margin: 0 0 var(--ruimte-5);
  padding: 0;
  border: 1px solid var(--rand);
  border-radius: var(--hoek-groot);
  background: var(--vlak);
}

.aangiftelijst li {
  padding: var(--ruimte-3) var(--ruimte-4);
  border-bottom: 1px solid var(--rand-zacht);
  font-size: 0.86rem;
}

.aangiftelijst li:last-child {
  border-bottom: none;
}

.aangiftekeuze td label {
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.aangiftekeuze select {
  width: auto;
  min-width: 11rem;
}

.paginering {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-4);
  margin-top: var(--ruimte-4);
  color: var(--inkt-flauw);
  font-size: 0.85rem;
}

.waarschuwing {
  color: var(--deze-week);
  font-weight: 500;
}

.let-op {
  color: var(--te-laat);
  font-weight: 700;
}

.controles .controle-naam {
  font-weight: 500;
}

.controle-toelichting,
.controle-tekst {
  color: var(--inkt-flauw);
  font-size: 0.82rem;
}

.aantal-geen {
  color: var(--inkt-flauw);
}

.peilmoment {
  font-weight: 500;
}

.kopje {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}

.smal {
  max-width: 32rem;
}

/* ------------------------------------------------------------- inlogpagina */

.inlogkader {
  max-width: 22rem;
  margin: 8vh auto 0;
  padding: var(--ruimte-6);
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--hoek-groot);
  box-shadow: var(--schaduw-op);
}

.inlogkader .merk {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-5);
}

.inlogkader .merk img {
  height: 32px;
  width: 32px;
}

.inlogkader h1 {
  margin: 0 0 var(--ruimte-1);
  font-size: 1.08rem;
  letter-spacing: -0.015em;
}

.inlogkader .ondertitel {
  margin: 0 0 var(--ruimte-5);
  color: var(--inkt-zacht);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* De labels in het aanmeldscherm als kopjes, zoals de kolomkoppen elders. */
.inlogkader label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}

.inlogkader .knop {
  width: 100%;
  margin-top: var(--ruimte-2);
}

/* ------------------------------------------------------------------- htmx */

@keyframes oplichten {
  from {
    background-color: var(--markering);
  }
}

.htmx-added td,
.htmx-settling td,
.opgelicht td {
  animation: oplichten 1.1s ease-out;
}

.htmx-request {
  opacity: 0.6;
}

.rij-fout td {
  background: var(--te-laat-tint);
}

@media (prefers-reduced-motion: reduce) {
  .htmx-added td,
  .htmx-settling td,
  .opgelicht td {
    animation: none;
  }
}

/* Het voorbeeld van een mail aan een klant. Wit vlak met een rand eromheen, zodat duidelijk is
   dat het bericht daar ophoudt en de knoppen van de toepassing weer beginnen. De inhoud krijgt
   bewust geen stijl van ons mee: wat hier staat moet lijken op wat de klant straks ziet. */
.voorbeeldbericht {
  padding: var(--ruimte-4);
  background: #ffffff;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
}

.voorbeeldbericht img {
  max-width: 100%;
  height: auto;
}

.voorbeeld-plat {
  margin: var(--ruimte-3) 0 var(--ruimte-4);
  font-size: 0.9rem;
}

.voorbeeld-plat summary {
  cursor: pointer;
  color: var(--inkt-flauw);
}

/* Het bewerkbare bericht in het voorbeeldscherm. Ruim opgezet: hier wordt gelezen en getypt,
   niet gefilterd, dus de velden staan onder elkaar en niet in een balk. */
.berichtformulier .veld {
  display: block;
  margin-bottom: var(--ruimte-3);
}

.berichtformulier .veld > span {
  display: block;
  margin-bottom: var(--ruimte-2);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}

.berichtformulier input[type="text"],
.berichtformulier textarea {
  width: 100%;
  padding: var(--ruimte-3);
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
  background: var(--vlak);
  font: inherit;
}

.berichtformulier textarea {
  resize: vertical;
  line-height: 1.55;
}

/* Een formulier binnen een tabelregel, zoals de datum van indienen op het klantoverzicht. */
.regelformulier {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════════════════════
   Ontwerp Aangiftesysteem, 13 september 2026. De patronen die alle schermen delen: een kop
   met een ondertitel die zegt waar het scherm over gaat, kaarten met een eigen kop, tellers
   in de monospace letter, en rijen die op 38 pixels staan zodat er meer op een scherm past.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* — paginakop — */

.kopbalk {
  align-items: flex-end;
  margin-bottom: var(--ruimte-4);
}

.kopbalk h1 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Eén regel onder de titel die zegt waar het scherm voor is. Wie het scherm niet dagelijks
   gebruikt, weet zo waar hij naar kijkt zonder de handleiding erbij. */
.paginauitleg {
  margin: var(--ruimte-1) 0 0;
  font-size: 0.82rem;
  color: var(--inkt-zacht);
}

/* — kaarten met een kop — */

.kaartkop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4);
  border-bottom: 1px solid var(--rand);
}

.kaartkop h2 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
}

.kaartkop .telling,
.kaartkop .totaal {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--inkt-flauw);
  background: none;
}

/* — kengetallen — */

.kengetallen {
  gap: var(--ruimte-3);
}

.kengetal {
  padding: var(--ruimte-3) var(--ruimte-4);
  border: 1px solid var(--rand);
  border-radius: var(--hoek-groot);
  background: var(--vlak);
  box-shadow: var(--schaduw);
}

.kengetal-naam {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}

.kengetal-waarde {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--inkt);
}

/* — tabellen — */

.tabelhouder,
table.lijst,
table.werklijst,
table.verplichtingen,
table.beconschema,
table.beconkandidaten,
table.kwaliteitslijst {
  border-radius: var(--hoek-groot);
}

tbody td {
  padding: var(--ruimte-2) var(--ruimte-3);
  font-size: 0.86rem;
}

/* Alleen echte getallen in de monospace letter: dan staan ze onder elkaar zonder dat er lijnen
   omheen hoeven, en dat is waar het om gaat bij aantallen en dagen te gaan. Periodelabels
   (Q3 2026, Augustus 2026) en peilmomenten zijn voor de helft woorden en horen er niet bij. */
td.dagen,
td.getal,
td.cijfer,
td.aantal,
td.telling,
.controle-telling,
.groepsaantal {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

td.periodelabel,
.peilmoment {
  white-space: nowrap;
}

/* — filterbalk en bulkbalk — */

.filters,
.bulk {
  gap: var(--ruimte-2) var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4);
  border-radius: var(--hoek-groot);
}

.filters label,
.bulk label {
  font-size: 0.68rem;
  letter-spacing: 0.09em;
}

/* — panelen — */

.paneel {
  border-radius: var(--hoek-groot);
}

/* — de tabbalk — */

.weergaven {
  padding: var(--ruimte-1);
  border-radius: var(--hoek-groot);
}

.weergave {
  font-size: 0.84rem;
}

/* — berichten — */

.bericht {
  border-radius: var(--hoek-groot);
}

/* Een waarschuwing die op een scherm blijft staan, zoals het gat in het beconschema: getint
   kader met een rand aan de kopse kant, zodat hij opvalt zonder te schreeuwen. Alleen als
   alinea: dezelfde klasse staat elders inline in een regel, en die hoort gewoon tekst te zijn. */
p.waarschuwing {
  display: block;
  margin: 0 0 var(--ruimte-4);
  padding: var(--ruimte-3) var(--ruimte-4);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--deze-week);
  border-radius: var(--hoek-groot);
  background: var(--deze-week-tint);
  color: var(--inkt-zacht);
  font-size: 0.84rem;
  line-height: 1.55;
}


/* — vooruitblik per medewerker — */

.vooruitblik-weken,
.vooruitblik-regel {
  display: grid;
  grid-template-columns: 11rem repeat(4, minmax(0, 1fr)) 4rem;
  align-items: end;
  gap: var(--ruimte-2);
  padding: var(--ruimte-2) 0;
}

.vooruitblik-weken {
  padding-bottom: var(--ruimte-1);
  border-bottom: 1px solid var(--rand);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}

.vooruitblik-regel {
  border-bottom: 1px solid var(--rand-zacht);
}

.vooruitblik-naam {
  font-size: 0.86rem;
}

/* De staaf staat op zijn eigen hoogte binnen een vaste bak, zodat de regels op één lijn blijven
   ook als een week leeg is. */
.vooruitblik-staaf {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 34px;
}

.vooruitblik-staaf > span:first-child {
  width: 100%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--primair);
  opacity: 0.55;
}

.vooruitblik-aantal {
  position: absolute;
  top: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--inkt-zacht);
}

.vooruitblik-totaal {
  font-family: var(--mono);
  font-size: 0.86rem;
  text-align: right;
  color: var(--inkt-zacht);
}


/* — aandachtspunten op de klantkaart — */

.aandachtspunten {
  padding: 0;
}

.aandachtspunt {
  display: flex;
  align-items: flex-start;
  gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4);
  border-bottom: 1px solid var(--rand-zacht);
}

.aandachtspunt:last-child {
  border-bottom: none;
}

.aandachtspunt-stip {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--deze-week);
}

.aandachtspunt-tekst {
  flex: 1;
  min-width: 0;
}

.aandachtspunt-tekst .hulp {
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   De werklijst: een lijst over de volle breedte, en het gekozen werk als laag daaroverheen.
   De tabel met veertien kolommen paste op geen enkel scherm; wat daar buiten beeld viel,
   staat nu in de laag, in woorden. De tabelweergave blijft bestaan voor het bijwerken van
   meer regels tegelijk; zie werklijst_tabel.html.

   Tot 14 september 2026 stonden lijst en laag naast elkaar, met de laag altijd open. Dat
   kostte de halve breedte van de lijst, ook als er nog niets was gekozen.
   ══════════════════════════════════════════════════════════════════════════════════════ */

.werkrijen {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rand);
  border-radius: var(--hoek-groot);
  background: var(--vlak);
  overflow: hidden;
}

/* De kolommen van een regel. De kop erboven gebruikt hetzelfde raster, zodat ze uitlijnen.
   Het raster staat op de lijst en niet op de regel: een regel die na een statuswijziging los
   terugkomt weet niet uit welke lijst hij kwam, en zou anders scheef gaan staan.

   Met wie: op het kantooroverzicht staat de verantwoordelijke erbij, op Mijn werk niet, want
   daar is dat altijd dezelfde persoon. De cel staat wel in elke regel en wordt hier verborgen. */
.werkrijen .werkrij,
.werkrijen .werkrij-kolomkop {
  display: grid;
  grid-template-columns: 3px minmax(0, 2.2fr) minmax(0, 1.8fr) 10.5rem 7rem 4rem;
  align-items: center;
  gap: var(--ruimte-3);
  width: 100%;
  text-align: left;
}

.werkrijen.met-wie .werkrij,
.werkrijen.met-wie .werkrij-kolomkop {
  grid-template-columns: 3px minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1fr) 10.5rem 7rem 4rem;
}

.werkrijen:not(.met-wie) .werkrij-wie {
  display: none;
}

.werkrij-kolomkop {
  padding: var(--ruimte-2) var(--ruimte-4) var(--ruimte-2) 0;
  background: var(--vlak-zacht);
  border-bottom: 1px solid var(--rand);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}

.werkrij-kolomkop .rechts {
  text-align: right;
}

/* De kop leent de kolomklasse om te kunnen verdwijnen, maar niet de kleur van een regel. */
.werkrij-kolomkop .werkrij-wie {
  color: inherit;
}

/* Een regel is een knop: met de muis te kiezen, met de tabtoets te bereiken en met j en k te
   doorlopen. */
.werkrij {
  padding: var(--ruimte-2) var(--ruimte-4) var(--ruimte-2) 0;
  border: 0;
  border-bottom: 1px solid var(--rand-zacht);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.werkrij:last-child {
  border-bottom: none;
}

.werkrij:hover {
  background: var(--vlak-zacht);
}

.werkrij.gekozen {
  background: var(--primair-licht);
}

/* De kleurstreep links zegt hoe dringend het is; de laag zegt het ook in woorden. */
.werkrij-gutter {
  align-self: stretch;
  background: var(--geen-deadline);
}

.werkrij.urgentie-te-laat .werkrij-gutter { background: var(--te-laat); }
.werkrij.urgentie-deze-week .werkrij-gutter { background: var(--deze-week); }
.werkrij.urgentie-deze-maand .werkrij-gutter { background: var(--deze-maand); }
.werkrij.urgentie-later .werkrij-gutter { background: var(--later); }
.werkrij.urgentie-klaar .werkrij-gutter { background: var(--klaar); }

.werkrij-klant,
.werkrij-wat,
.werkrij-wie {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.werkrij-klant {
  font-weight: 500;
}

.werkrij-wat,
.werkrij-wie {
  color: var(--inkt-zacht);
}

.werkrij-datum {
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--inkt-zacht);
}

.werkrij-dagen {
  font-family: var(--mono);
  font-size: 0.82rem;
  text-align: right;
  color: var(--inkt-zacht);
}

.werkrij.urgentie-te-laat .werkrij-dagen {
  color: var(--te-laat);
}

/* Onder de 900 pixels past het raster niet meer; dan komt alles onder elkaar. */
@media (max-width: 900px) {
  .werkrij-kolomkop {
    display: none;
  }

  .werkrijen .werkrij,
  .werkrijen.met-wie .werkrij {
    grid-template-columns: 3px minmax(0, 1fr) 4rem;
    row-gap: 2px;
  }

  .werkrij-wat,
  .werkrij-wie,
  .werkrij .werkrij-status,
  .werkrij-datum {
    grid-column: 2;
    font-size: 0.78rem;
  }
}

.werkrij-kop {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  padding: var(--ruimte-2) var(--ruimte-3);
  background: var(--vlak-zacht);
  border-bottom: 1px solid var(--rand);
  font-size: 0.78rem;
  font-weight: 500;
}

.werklijst-toetsen {
  display: flex;
  gap: var(--ruimte-4);
  margin: var(--ruimte-3) 0 0;
  font-size: 0.72rem;
  color: var(--inkt-flauw);
}

.werklijst-toetsen kbd {
  padding: 1px 5px;
  border: 1px solid var(--rand-sterk);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.72rem;
}

/* — de laag met het gekozen werk — */

/* Over de lijst heen, zoals een mailprogramma een bericht opent. De lijst blijft eronder
   staan waar hij stond, dus na sluiten ben je niet kwijt waar je was. */
.paneellaag {
  position: fixed;
  /* Onder de navigatiebalk, zodat je nog naar een ander scherm kunt zonder eerst te sluiten. */
  inset: var(--hoogte-balk) 0 0 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  background: rgba(4, 8, 14, 0.55);
  overflow: hidden;
}

.paneellaag.dicht {
  display: none;
}

/* De lijst eronder mag niet meescrollen zolang de laag eroverheen ligt; leadout.js zet de
   klasse op body zodra de laag opengaat. */
body.paneel-open {
  overflow: hidden;
}

.werkpaneel {
  position: relative;
  width: min(920px, 100%);
  height: 100%;
  overflow-y: auto;
  background: var(--vlak);
  border-left: 1px solid var(--rand);
  box-shadow: var(--schaduw-op);
}

@media (max-width: 700px) {
  .werkpaneel {
    width: 100%;
    border-left: none;
  }
}

/* Het kruisje blijft staan terwijl de inhoud eronder doorscrolt. */
.paneelsluiten {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: var(--ruimte-3) var(--ruimte-3) 0 0;
  border-radius: var(--hoek);
  background: var(--vlak);
  color: var(--inkt-flauw);
  font-size: 1.3rem;
  line-height: 1;
}

.paneelsluiten:hover {
  background: var(--vlak-zacht);
  color: var(--inkt);
  text-decoration: none;
}

.werkpaneel-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ruimte-5);
  padding: var(--ruimte-4) var(--ruimte-5);
  border-bottom: 1px solid var(--rand);
}

.werkpaneel-kicker {
  display: flex;
  gap: var(--ruimte-2);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}

.werkpaneel-titel h2 {
  margin: var(--ruimte-1) 0 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.werkpaneel-wat {
  margin: var(--ruimte-1) 0 0;
  color: var(--inkt-zacht);
}

.werkpaneel-tijd {
  flex: 0 0 auto;
  text-align: right;
}

.werkpaneel-dagen {
  font-family: var(--mono);
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--inkt);
}

.werkpaneel-dagen span {
  font-size: 0.76rem;
  color: var(--inkt-flauw);
}

.werkpaneel-dagen.urgentie-te-laat {
  color: var(--te-laat);
}

.werkpaneel-tijd .knop-klein {
  margin-top: var(--ruimte-2);
}

.werkpaneel-wacht {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  margin: 0;
  padding: var(--ruimte-3) var(--ruimte-5);
  background: var(--deze-week-tint);
  border-bottom: 1px solid var(--rand);
  font-size: 0.82rem;
  color: var(--inkt-zacht);
}

.stip {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--deze-week);
}

.werkpaneel-feiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rand);
  border-bottom: 1px solid var(--rand);
}

.werkpaneel-feiten > div {
  padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--papier);
}

.werkpaneel-feiten .waarde {
  display: block;
  margin-top: 2px;
  font-size: 0.9rem;
}

.kopje {
  display: block;
  margin: var(--ruimte-4) 0 var(--ruimte-2);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}

.werkpaneel-inhoud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

@media (max-width: 900px) {
  .werkpaneel-inhoud {
    grid-template-columns: minmax(0, 1fr);
  }
}

.werkpaneel-hoofd {
  padding: 0 var(--ruimte-5) var(--ruimte-5);
  min-width: 0;
}

.werkpaneel-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}

.statusknop {
  padding: 6px 11px;
  border: 1px solid var(--rand-sterk);
  border-radius: var(--hoek);
  background: transparent;
  color: var(--inkt-zacht);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.statusknop:hover {
  border-color: var(--primair);
  color: var(--accent);
}

.statusknop.gekozen {
  border-color: var(--primair);
  background: var(--primair-licht);
  color: var(--accent);
}

.werkpaneel-waarom {
  max-width: 62ch;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--inkt-zacht);
}

.verloopregel {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-3);
  padding: 3px 0;
  font-size: 0.84rem;
  color: var(--inkt-zacht);
}

.verloopregel .datum {
  flex: 0 0 5.5rem;
  font-size: 0.78rem;
  color: var(--inkt-flauw);
}

.verloopregel .stip {
  background: var(--rand-sterk);
}

.werkpaneel-notitie {
  padding: var(--ruimte-2) 0;
  border-bottom: 1px solid var(--rand-zacht);
  font-size: 0.86rem;
  color: var(--inkt-zacht);
}

.werkpaneel-hoofd textarea {
  width: 100%;
  max-width: 62ch;
  margin: var(--ruimte-2) 0;
}

.werkpaneel-zij {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ruimte-2);
  padding: 0 var(--ruimte-4) var(--ruimte-5);
  border-left: 1px solid var(--rand);
  background: var(--vlak-zacht);
}

.werkpaneel-zij .kopje {
  margin-bottom: 0;
}

.werkpaneel-punt {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-2);
  font-size: 0.82rem;
  color: var(--inkt-zacht);
}

.werkpaneel-punt:hover {
  color: var(--accent);
}

/* Onder de keuzelijst van de frequentie, zodat de tabel niet breder wordt. */
.frequentie-vanaf {
  display: block;
  margin-top: 0.25rem;
  white-space: nowrap;
}

/* Een dag van de maand: twee cijfers, niet de volle breedte van een tekstveld. */
.smal-getal {
  width: 3.5rem;
}


/* ------------------------------------------------- inklapbare groepen en de i

   Sinds 6 oktober 2026, eerst op Klantgegevens wijzigen en daarna op de andere schermen:
   een groep klapt in en toont dan de kern in de kop, uitleg staat achter een i bij het label,
   en Bewaren staat in een balk die onderaan in beeld blijft. Wat je open- of dichtklapt
   onthoudt leadout.js per groep (data-sectie). */

.sectiepaar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: 0 var(--ruimte-4);
  align-items: start;
}

.sectie {
  /* Zonder min-width duwt een lange samenvatting in de kop de kaart breder dan zijn kolom. */
  min-width: 0;
  margin: 0 0 var(--ruimte-3);
  border: 1px solid var(--rand);
  border-radius: var(--hoek-groot);
  background: var(--vlak);
  box-shadow: var(--schaduw);
}

.sectie > summary {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4);
  cursor: pointer;
  list-style: none;
}

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

.sectie > summary::before {
  content: "\25B8";
  color: var(--inkt-flauw);
  transition: transform 0.15s;
}

.sectie[open] > summary::before {
  transform: rotate(90deg);
}

.sectie[open] > summary {
  border-bottom: 1px solid var(--rand-zacht);
}

.sectiekop {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.samenvatting {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--inkt-flauw);
}

.samenvatting.waarschuwing {
  color: var(--te-laat);
}

.sectie[open] > summary .samenvatting {
  display: none;
}

.sectie-inhoud {
  padding: var(--ruimte-3) var(--ruimte-4) var(--ruimte-2);
}

.veldenraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0 var(--ruimte-4);
  align-items: end;
}

.veldenraster .veld {
  margin-bottom: var(--ruimte-2);
  min-width: 0;
}

.veldenraster .veld label {
  font-size: 0.78rem;
}

.veldenraster .veld input:not([type="checkbox"]),
.veldenraster .veld select,
.veldenraster .veld textarea {
  width: 100%;
  max-width: none;
}

.veldenraster .veld-breed {
  grid-column: 1 / -1;
}

.veldenraster .veld-vinkje label {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  padding-bottom: 0.4rem;
}

.uitleg-i {
  margin-left: 4px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--inkt-flauw);
  cursor: help;
}

/* Blijft onderaan in beeld, zodat je voor Bewaren niet eerst naar beneden hoeft. */
.bewaarbalk {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: var(--ruimte-3);
  align-items: center;
  margin-top: var(--ruimte-3);
  padding: var(--ruimte-3) 0;
  border-top: 1px solid var(--rand);
  background: var(--papier);
}


/* De status als label in een regel van de werklijst, in de tint van de statuskeuze. */
.statuslabel {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--ruimte-2);
  border: 1px solid var(--rand);
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Lijst of tabel: twee knoppen als een schakelaar. */
.wissel {
  display: inline-flex;
}

.wissel .knop-klein {
  border-radius: 0;
}

.wissel .knop-klein:first-child {
  border-radius: var(--hoek) 0 0 var(--hoek);
}

.wissel .knop-klein:last-child {
  border-radius: 0 var(--hoek) var(--hoek) 0;
  margin-left: -1px;
}

/* Ook het getoonde jaar in de jaarknoppen van het beconschema. */
.wissel .actief,
.knop-klein.actief {
  background: var(--primair-licht);
  border-color: var(--accent);
  color: var(--accent);
}

/* De regel die opengaat onder Afgehandeld in het werkpaneel. */
.afhandelen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-2) var(--ruimte-3);
  margin-top: var(--ruimte-2);
  padding: var(--ruimte-2) var(--ruimte-3);
  border: 1px solid var(--deze-week);
  border-radius: var(--hoek);
  background: var(--deze-week-tint);
  font-size: 0.84rem;
}

.afhandelen[hidden] {
  display: none;
}

.afhandelen label {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
}

/* ------------------------------------------------------ werklijst: filteren en zoeken

   Sinds 3 november 2026. De lijst ververst terwijl je typt of kiest; soort, status en land zijn
   uitklappers met vinkjes; wat er aan staat komt als chips onder de balk. De tabbladen gaan
   alleen nog over tijd, met de snelkoppelingen ernaast.

   Eén balk zonder kaart eromheen en zonder koppen boven de velden. Alle velden zijn even hoog en
   zien er hetzelfde uit, of het nu een keuzelijst van de browser is of een uitklapper met
   vinkjes. Een filter dat aan staat krijgt een blauwe rand. */

.werkacties {
  display: contents;
}

.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.werktabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-2) var(--ruimte-4);
  margin-bottom: var(--ruimte-3);
}

.werktabs .weergaven {
  margin-bottom: 0;
  flex-wrap: wrap;
}

.snelkoppelingen {
  font-size: 0.82rem;
  color: var(--inkt-flauw);
}

.werkfilters {
  --filterhoogte: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-3);
}

/* Het zoekveld, met een vergrootglas links en de sneltoets rechts. */
.werkfilters .zoekveld {
  position: relative;
  flex: 1 1 20rem;
  min-width: 14rem;
  margin: 0;
}

.werkfilters .zoekveld input {
  width: 100%;
  height: var(--filterhoogte);
  padding: 0 2.2rem 0 2.1rem;
  background: var(--vlak) no-repeat 11px center / 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%237c8ba1' stroke-width='1.6'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%237c8ba1' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  border-color: var(--rand-sterk);
  box-shadow: var(--schaduw);
}

.werkfilters .zoekveld kbd {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  padding: 0 6px;
  border: 1px solid var(--rand-sterk);
  border-radius: 4px;
  color: var(--inkt-flauw);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
  pointer-events: none;
}

.werkfilters .zoekveld input:focus + kbd {
  display: none;
}

/* De knoppen van de filters: uitklappers en gewone keuzelijsten in dezelfde jas. */
.filterknop,
.werkfilters .filterkeuze {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--filterhoogte);
  max-width: 17rem;
  padding: 0 2rem 0 var(--ruimte-3);
  border: 1px solid var(--rand-sterk);
  border-radius: var(--hoek);
  background: var(--vlak) no-repeat right 11px center / 10px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237c8ba1' stroke-width='1.5'/%3E%3C/svg%3E");
  box-shadow: var(--schaduw);
  color: var(--inkt);
  font-family: inherit;
  font-size: 0.88rem;
  white-space: nowrap;
  cursor: pointer;
}

.werkfilters .filterkeuze {
  appearance: none;
  -webkit-appearance: none;
}

.filterknop:hover,
.werkfilters .filterkeuze:hover {
  border-color: var(--inkt-flauw);
}

.filterknop.gekozen,
.werkfilters .filterkeuze.gekozen {
  border-color: var(--primair);
  background-color: var(--primair-licht);
}

.filternaam {
  color: var(--inkt-zacht);
}

.filterknop.gekozen .filternaam::after {
  content: ":";
}

.filterwaarde {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent);
  font-weight: 500;
}

.filterwaarde:empty {
  display: none;
}

.werkfilters .filterkeuze.gekozen {
  color: var(--accent);
  font-weight: 500;
}

.filtervinkjes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ruimte-1) var(--ruimte-4);
  margin-left: var(--ruimte-2);
}

.filtervinkjes label.vinkje {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.86rem;
  color: var(--inkt-zacht);
  white-space: nowrap;
  cursor: pointer;
}

/* De uitklapper met vinkjes. De lijst ligt over de werklijst heen. */
.meerkeuze {
  position: relative;
}

.meerkeuze > summary {
  list-style: none;
}

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

.meerkeuze[open] > .filterknop {
  border-color: var(--primair);
  box-shadow: 0 0 0 3px var(--primair-licht);
}

.meerkeuze-lijst {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 15rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: var(--ruimte-2);
  background: var(--vlak);
  border: 1px solid var(--rand-sterk);
  border-radius: var(--hoek-groot);
  box-shadow: 0 8px 24px rgba(13, 25, 45, 0.16);
}

.meerkeuze-lijst label.vinkje {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  margin: 0;
  padding: 5px var(--ruimte-2);
  border-radius: var(--hoek);
  font-size: 0.86rem;
  color: var(--inkt);
  white-space: nowrap;
  cursor: pointer;
}

.meerkeuze-lijst label.vinkje:hover {
  background: var(--primair-licht);
}

.meerkeuze-snel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-1) var(--ruimte-3);
  margin-bottom: var(--ruimte-1);
  padding: 2px var(--ruimte-2) var(--ruimte-2);
  border-bottom: 1px solid var(--rand-zacht);
}

.knop-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.knop-link:hover {
  text-decoration: underline;
}

/* De chips onder de balk: wat er aan staat, elk met een kruisje. */
.filterchips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-2);
  margin: calc(var(--ruimte-1) * -1) 0 var(--ruimte-3);
  font-size: 0.82rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 2px 2px 10px;
  border-radius: 12px;
  background: var(--primair-licht);
  color: var(--accent);
  white-space: nowrap;
}

.chip a {
  padding: 0 7px;
  border-radius: 10px;
  color: inherit;
  font-size: 1rem;
  line-height: 1.2;
}

.chip a:hover {
  background: var(--primair-licht);
  text-decoration: none;
}

.chips-wissen {
  margin-left: var(--ruimte-1);
}

/* Terwijl htmx de lijst ophaalt, zakt hij iets weg: dan zie je dat er iets gebeurt. */
.werkfilters.htmx-request ~ #werkresultaat {
  opacity: 0.55;
  transition: opacity 120ms;
}

@media (max-width: 700px) {
  .werktabs {
    flex-direction: column;
    align-items: stretch;
  }

  .werkfilters .zoekveld {
    flex-basis: 100%;
  }

  .meerkeuze,
  .werkfilters .filterkeuze {
    flex: 1 1 45%;
  }

  .filterknop {
    width: 100%;
    max-width: none;
  }

  .werkfilters .filterkeuze {
    max-width: none;
  }

  .filtervinkjes {
    margin-left: 0;
  }

  .meerkeuze-lijst {
    min-width: 100%;
  }
}