/* De opmaak van de uren-app van CGM Projects, in de look "vuur en vlok" van
   cgm-projects.nl.
   ----------------------------------------------------------------------
   Eén bestand voor alle pagina's. Tot v1.10 droeg elke pagina een eigen
   <style>-blok uit een oudere look (Raleway, Open Sans, pillen in
   Tailwind-kleuren) met de huisstijl er als laag overheen; dat is hier
   opnieuw gebouwd op de tokens van de website.

   Wat de look is, in vier regels:
   - Barlow Condensed voor koppen en grote getallen, Barlow voor de rest.
     Eén familie in twee breedtes, geen derde letter.
   - Navy is het donkere vlak (de kop, het inlogscherm), wit en het zachte
     grijsblauw het lichte. Oranje is nooit tekst op wit (2,8 op wit) en
     alleen een vlak op navy; blauw als tekst alleen in de donkere tint.
   - De temperatuurbalk, van koud naar warm, is het enige getekende
     merkteken: onder de kop, boven de inlogkaart.
   - De lijntekening van een split-unit als watermerk op de navy vlakken.

   Kleuren, maten en letters komen uit tokens.css (gegenereerd uit
   tools/tokens.py van de website). Hier staan alleen rollen en componenten;
   een hexwaarde hoort hier niet. De volgorde: basis, knoppen en velden,
   labels en meldingen, de kop, panelen en tabellen, dan per scherm. */

@font-face { font-family: 'Barlow Condensed'; src: url(fonts/BarlowCondensed-600.woff2) format("woff2");
             font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(fonts/BarlowCondensed-700.woff2) format("woff2");
             font-weight: 700; font-display: swap; }
@font-face { font-family: Barlow; src: url(fonts/Barlow-400.woff2) format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: Barlow; src: url(fonts/Barlow-600.woff2) format("woff2");
             font-weight: 600; font-display: swap; }

:root {
  /* De temperatuurbalk: koud links, warm rechts. */
  --temperatuur: linear-gradient(90deg, var(--cgm-blauw), var(--cgm-oranje));
  /* Lopende tekst op navy (8,8:1), en de gedempte variant. */
  --tekst-op-donker: var(--cgm-tekstopdonker);
  --lijn-op-donker: rgb(255 255 255 / .16);
  --vlak-op-donker: rgb(255 255 255 / .08);
  /* Het lichte oranje vlak nog een stap lichter: de dag van vandaag in de
     urenlijst, over de hele breedte, zonder dat het schreeuwt. */
  --vlak-vandaag: color-mix(in srgb, var(--cgm-oranjesoft) 45%, #FFFFFF);
  /* De breedte van de inhoud; smalle schermen zetten hem lager. */
  --wrap: 68rem;
  /* De vaste maten van de app. Een productscherm heeft een vaste schaal,
     geen vloeiende: de gebruiker zit altijd op dezelfde afstand. */
  --tekst-app: 0.9375rem;
  --tekst-app-line: 1.5;
}

/* ------------------------------------------------------------------ basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--tekst-app);
  line-height: var(--tekst-app-line);
  color: var(--color-text);
  background: var(--color-surface-sunken);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-text-accent); text-underline-offset: 3px;
    transition: text-decoration-thickness var(--motion-fast) var(--motion-ease); }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { font-family: var(--font-family-kop); font-weight: 700; letter-spacing: 0;
                 line-height: 1.1; margin: 0; text-wrap: balance; hyphens: manual; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--cgm-blauwsoft); color: var(--cgm-navy); }
:root { caret-color: var(--cgm-navy); accent-color: var(--cgm-navy); }
/* Getallen in tabellen en tijden staan onder elkaar; daar is een vaste
   cijferbreedte nodig. */
.getal, time, td, .invoer-tijd, .duur { font-variant-numeric: tabular-nums; }

.wrap { width: min(100% - var(--space-8), var(--wrap)); margin-inline: auto; }
.wrap-smal { --wrap: 46rem; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
                     overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* Op een navy vlak is de navy focusring onzichtbaar; daar wordt hij oranje. */
.kop, .donker, body.inlog { --color-focus-ring: var(--cgm-oranje); }

/* ---------------------------------------------------------------- knoppen
   Eén knopvorm voor de hele app. Primair is navy op licht; op navy is de
   primaire knop oranje met navy letters (wit op oranje haalt de norm niet).
   Stil is een omlijnde knop in de tekstkleur. Gevaar is de stille knop in
   de foutkleur: archiveren, verwijderen, vergrendelen. */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); min-height: 2.5rem;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-weight: 600; font-size: var(--tekst-app); line-height: 1.2; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  background: var(--button-primary-bg); color: var(--button-primary-fg);
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease);
}
.knop:active { transform: scale(.97); }
@media (hover: hover) {
  .knop:hover { background: var(--button-primary-bg-hover); color: var(--button-primary-fg-hover); }
}
.knop:disabled, .knop[aria-disabled="true"] {
  background: var(--button-primary-bg-disabled); color: var(--button-primary-fg-disabled);
  cursor: default; transform: none;
}
.knop-stil { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
@media (hover: hover) { .knop-stil:hover { background: var(--color-action-quiet-bg); color: var(--color-text); } }
.knop-gevaar { background: transparent; color: var(--color-feedback-danger-fg);
               border-color: color-mix(in srgb, var(--color-feedback-danger-fg) 45%, transparent); }
@media (hover: hover) { .knop-gevaar:hover { background: var(--color-feedback-danger-bg); color: var(--color-feedback-danger-fg); } }
.knop-goed { background: transparent; color: var(--color-feedback-success-fg);
             border-color: color-mix(in srgb, var(--color-feedback-success-fg) 45%, transparent); }
@media (hover: hover) { .knop-goed:hover { background: var(--color-feedback-success-bg); color: var(--color-feedback-success-fg); } }
.knop-klein { min-height: 2rem; padding: var(--space-1) var(--space-3); font-size: var(--text-body-sm-size); }
/* Na kopiëren naar het klembord kleurt de knop twee seconden groen (app.js). */
.knop.is-gekopieerd { color: var(--color-feedback-success-fg); border-color: var(--color-feedback-success-fg);
                      background: var(--color-feedback-success-bg); }
.knop-breed { width: 100%; }
/* Op navy: witte letters met een lichte rand, hover een licht vlak. */
.donker .knop-stil, .kop .knop-stil { color: #FFFFFF; border-color: rgb(255 255 255 / .38); }
@media (hover: hover) {
  .donker .knop-stil:hover, .kop .knop-stil:hover { background: rgb(255 255 255 / .12); color: #FFFFFF; }
}
.donker .knop-primair, .kop .knop-primair {
  background: var(--cgm-oranje); color: var(--cgm-navy);
}
@media (hover: hover) {
  .donker .knop-primair:hover, .kop .knop-primair:hover { background: #FFFFFF; color: var(--cgm-navy); }
}
/* Een knop die alleen een icoon draagt: vierkant, met de naam in aria-label. */
.knop-icoon { padding: 0; width: 2.25rem; min-height: 2.25rem; height: 2.25rem;
              border-radius: var(--radius-sm); color: var(--color-text-muted); background: transparent; border: 0; }
@media (hover: hover) { .knop-icoon:hover { background: var(--color-action-quiet-bg); color: var(--cgm-navy); } }
.knop-icoon.knop-gevaar { color: var(--color-text-muted); }
@media (hover: hover) { .knop-icoon.knop-gevaar:hover { background: var(--color-feedback-danger-bg); color: var(--color-feedback-danger-fg); } }
.icoon { flex: 0 0 auto; }

/* ----------------------------------------------------------------- velden
   Elk veld heeft een label erboven. De rand is de sterke randkleur, de
   focus is de merkblauwe ring; een fout zet de rand rood. */
.veld { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.veld > label, .veld-label { font-weight: 600; font-size: var(--text-body-sm-size); color: var(--color-text); }
.veld .optioneel { font-weight: 400; color: var(--color-text-muted); }
.veld .hint { font-size: var(--text-caption-size); color: var(--color-text-muted); margin: 0; }
.invoer, .veld input:not([type="checkbox"]):not([type="radio"]), .veld select, .veld textarea {
  width: 100%; min-width: 0;
  padding: var(--space-2) var(--space-3); min-height: 2.5rem;
  border: 1px solid var(--input-border); border-radius: var(--radius-sm);
  background: var(--input-bg); color: var(--input-fg);
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.invoer::placeholder, .veld input::placeholder { color: var(--input-placeholder); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .invoer:hover, .veld input:hover, .veld select:hover { border-color: var(--input-border-hover); }
}
.invoer:focus, .veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none; border-color: var(--cgm-blauw); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cgm-blauw) 18%, transparent);
}
.invoer:disabled, .invoer[readonly], .veld input:disabled { background: var(--input-bg-disabled); color: var(--color-text-muted); }
.invoer[aria-invalid="true"], .veld [aria-invalid="true"] { border-color: var(--input-border-error);
  box-shadow: inset 0 0 0 1px var(--input-border-error); }
.invoer-klein { min-height: 2rem; padding: var(--space-1) var(--space-2); font-size: var(--text-body-sm-size); }
.invoer-smal { width: 6.5rem; }
.invoer-code { font-family: var(--font-family-mono); font-size: var(--text-body-sm-size); letter-spacing: .02em; }
/* Het pijltje van een keuzelijst: een masker in de tekstkleur op een
   omhullende span, zodat de kleur uit de tokens komt en niet in een
   data-uri hoeft te staan. */
select.invoer, .veld select { appearance: none; -webkit-appearance: none; padding-right: var(--space-8); }
.keuze { position: relative; display: block; }
.keuze::after { content: ""; position: absolute; right: var(--space-3); top: 50%; width: 16px; height: 16px;
  transform: translateY(-50%); pointer-events: none; background: var(--color-text-muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.vinkje { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-sm-size); cursor: pointer; }
.vinkje input { width: 1.1rem; height: 1.1rem; margin: 0; }
/* Een rij velden naast elkaar, die op een smal scherm onder elkaar valt. */
.veldrij { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.veldrij .veld { flex: 1 1 10rem; }
.veldrij .veld-vast { flex: 0 0 auto; }
.veldrij .knop { flex: 0 0 auto; }

/* Een schakelaar met twee of drie standen (het tarief): één rand, de
   gekozen stand navy. */
.schakel { display: inline-flex; border: 1px solid var(--input-border); border-radius: var(--radius-sm);
           overflow: hidden; flex: 0 0 auto; }
.schakel button { border: 0; background: var(--color-surface); color: var(--color-text-muted);
                  padding: var(--space-1) var(--space-3); min-height: 2rem; font-size: var(--text-caption-size);
                  font-weight: 600; white-space: nowrap;
                  transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
.schakel button + button { border-left: 1px solid var(--input-border); }
@media (hover: hover) { .schakel button:hover { background: var(--color-action-quiet-bg); color: var(--cgm-navy); } }
.schakel button.is-actief { background: var(--cgm-navy); color: #FFFFFF; }
.schakel button:focus-visible { outline-offset: -2px; }
.schakel.is-vereist { border-color: var(--color-feedback-danger-fg); box-shadow: 0 0 0 3px var(--color-feedback-danger-bg); }

/* ----------------------------------------------------------------- labels
   Een status of een soort, in een klein vlak met navy of de feedbackkleur
   als tekst. Geen pillen: dezelfde kleine radius als de velden. */
.label { display: inline-flex; align-items: center; gap: var(--space-1); vertical-align: middle;
         padding: 2px var(--space-2); border-radius: var(--radius-sm);
         font-family: var(--font-family); font-size: var(--text-caption-size); font-weight: 600;
         line-height: 1.4; white-space: nowrap; letter-spacing: 0; }
.label-tijd, .label-cgm     { background: var(--cgm-blauwsoft);  color: var(--cgm-navy); }
.label-project, .label-onder { background: var(--cgm-oranjesoft); color: var(--cgm-navy); }
.label-uitgenodigd { background: var(--color-feedback-warning-bg); color: var(--color-feedback-warning-fg); }
.label-ingevuld    { background: var(--color-feedback-info-bg);    color: var(--color-feedback-info-fg); }
.label-goedgekeurd { background: var(--color-feedback-success-bg); color: var(--color-feedback-success-fg); }
.label-stil        { background: var(--color-surface-raised); color: var(--color-text-muted); }
.label-slot        { background: var(--color-feedback-danger-bg);  color: var(--color-feedback-danger-fg); }

/* -------------------------------------------------------------- meldingen
   Een vlak in de feedbackkleur met een dunne rand en een icoon; de tekst
   noemt het probleem en wat de lezer kan doen. */
.melding { display: flex; gap: var(--space-3); align-items: flex-start;
           padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid;
           font-size: var(--text-body-sm-size); }
.melding .icoon { margin-top: 2px; }
.melding p { margin: 0; }
.melding-goed { background: var(--color-feedback-success-bg); color: var(--color-feedback-success-fg);
                border-color: color-mix(in srgb, var(--color-feedback-success-fg) 35%, transparent); }
.melding-fout { background: var(--color-feedback-danger-bg); color: var(--color-feedback-danger-fg);
                border-color: color-mix(in srgb, var(--color-feedback-danger-fg) 35%, transparent); }
.melding-let  { background: var(--color-feedback-warning-bg); color: var(--color-feedback-warning-fg);
                border-color: color-mix(in srgb, var(--color-feedback-warning-fg) 35%, transparent); }
.melding-info { background: var(--color-feedback-info-bg); color: var(--color-feedback-info-fg);
                border-color: color-mix(in srgb, var(--color-feedback-info-fg) 35%, transparent); }
.melding strong { font-weight: 600; }

/* -------------------------------------------------------------------- kop
   Navy, met het watermerk rechts en de temperatuurbalk als onderrand.
   Bovenin het merk en de knoppen, daaronder de kop van het scherm en de
   maandbalk. */
.kop { position: relative; overflow: hidden; background: var(--cgm-navy); color: #FFFFFF;
       padding-top: env(safe-area-inset-top); }
.kop::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(watermerk.webp) right center / auto 140% no-repeat; opacity: .14;
}
.kop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--temperatuur); }
.kop > .wrap { position: relative; z-index: 1; padding-block: var(--space-4) var(--space-6); }
.kop-rij { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
           padding-bottom: var(--space-4); border-bottom: 1px solid var(--lijn-op-donker); }
.merk { display: flex; align-items: center; gap: var(--space-3); color: #FFFFFF; text-decoration: none; min-width: 0; }
.merk img { height: 40px; width: auto; flex: 0 0 auto; }
.merk-naam { display: flex; flex-direction: column; line-height: 1.1; }
.merk-naam-hoofd { font-weight: 600; font-size: 1.1rem; }
.merk-naam-payoff { font-size: var(--text-caption-size); color: var(--tekst-op-donker); }
.kop-acties { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.kop-acties .knop { min-height: 2.25rem; padding-block: var(--space-1); font-size: var(--text-body-sm-size); }
.kop-titel { font-size: 2.25rem; line-height: 1; margin-top: var(--space-6); }
.kop-titel::first-letter { text-transform: uppercase; }
.kop-titel .accent { color: var(--cgm-oranje); }
.kop-onder { color: var(--tekst-op-donker); margin-top: var(--space-2); font-size: var(--text-body-sm-size); }
.kop-onder strong { color: #FFFFFF; font-weight: 600; }

/* De maandbalk: pijlen om de maand heen, in de kopletter, en rechts de
   knoppen die bij de maand horen. */
.maandbalk { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5); }
.maand-naam { font-family: var(--font-family-kop); font-weight: 600; font-size: 1.375rem; line-height: 1;
              padding-inline: var(--space-2); min-width: 10rem; text-align: center; white-space: nowrap; }
.maand-naam::first-letter { text-transform: uppercase; }
.maand-pijl { width: 2.25rem; height: 2.25rem; min-height: 2.25rem; padding: 0; border-radius: var(--radius-sm);
              background: var(--vlak-op-donker); color: #FFFFFF; border: 1px solid var(--lijn-op-donker); }
@media (hover: hover) { .maand-pijl:hover { background: rgb(255 255 255 / .18); color: #FFFFFF; } }
.maandbalk-acties { display: flex; gap: var(--space-2); margin-left: auto; flex-wrap: wrap; }
/* Op het beheerscherm is de maand zelf de kop: de pijlen staan om de h1. */
.maandrij { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.maandrij .kop-titel { margin-top: 0; }

/* De voortgang van de maand: de temperatuurbalk als vulling. */
.voortgang { margin-top: var(--space-5); }
.voortgang-baan { height: 4px; border-radius: var(--radius-full); background: var(--lijn-op-donker); overflow: hidden; }
.voortgang-vulling { height: 100%; width: 100%; border-radius: var(--radius-full); background: var(--temperatuur);
                     transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--motion-ease); }
.voortgang-tekst { margin: var(--space-2) 0 0; font-size: var(--text-caption-size); color: var(--tekst-op-donker); }
.voortgang-tekst strong { color: #FFFFFF; font-weight: 600; }

/* ---------------------------------------------------------------- inhoud */
.inhoud { padding-block: var(--space-6) var(--space-10); }
.sectie + .sectie { margin-top: var(--space-10); }
.sectie-kop { font-size: 1.5rem; font-weight: 700; margin-bottom: var(--space-4); }
.sectie-kop small { font-family: var(--font-family); font-size: var(--text-body-sm-size); font-weight: 400;
                    color: var(--color-text-muted); margin-left: var(--space-2); }

/* ---------------------------------------------------------------- panelen
   Een wit vlak met een dunne rand en een lichte schaduw. Geen gekleurde
   randen bovenop of opzij: het vlak zelf zegt waar iets begint. */
.paneel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md);
          box-shadow: var(--card-shadow); overflow: hidden; }
.paneel + .paneel { margin-top: var(--space-4); }
.paneel-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
              padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.paneel-titel { font-size: 1.25rem; font-weight: 600; }
.paneel-inhoud { padding: var(--space-5); }
.paneel-inhoud > * + * { margin-top: var(--space-4); }
.paneel-leeg { padding: var(--space-5); color: var(--color-text-muted); }

/* ----------------------------------------------------------------- tabel */
.tabel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
              scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent;
              /* Het verborgen kopje van de actiekolom staat absoluut; zonder
                 eigen positie telt het mee in de breedte van de pagina. */
              position: relative; }
table { width: 100%; border-collapse: collapse; font-size: var(--tekst-app); }
th { text-align: left; padding: var(--space-2) var(--space-4); background: var(--color-surface-raised);
     color: var(--color-text-muted); font-size: var(--text-overline-size); font-weight: 600;
     letter-spacing: var(--text-overline-tracking); text-transform: uppercase; white-space: nowrap; }
.knop-icoon.knop-gevaar { color: var(--color-text-muted); }
td { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border); vertical-align: middle; }
td time { white-space: nowrap; }
tbody tr:first-child td { border-top: 0; }
th.cel-getal, td.cel-getal { text-align: right; }
td.cel-stil { color: var(--color-text-muted); }
td.cel-sterk { font-weight: 600; color: var(--cgm-navy); }
td.cel-acties { text-align: right; white-space: nowrap; padding-block: var(--space-1); width: 5.5rem; }
td.cel-acties form { display: inline; }
.tabel-wrap::-webkit-scrollbar { height: 6px; }
.tabel-wrap::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }
.tabel-wrap::-webkit-scrollbar-track { background: transparent; }
tfoot td { background: var(--color-surface-raised); font-weight: 600; }
tr.is-in-bewerking td { background: var(--cgm-blauwsoft); }
tr.rij-bewerken td { background: var(--color-surface-raised); padding: var(--space-3) var(--space-4); }
tr.rij-bewerken .veldrij { align-items: center; }
tr.rij-bewerken .veldrij .veld { flex: 0 1 auto; }

/* ================================================================ beheer */
.mw { margin-bottom: var(--space-5); }
.mw-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
          padding: var(--space-4) var(--space-5); }
.mw-naam { font-size: 1.375rem; font-weight: 700; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mw-meta { margin: var(--space-1) 0 0; font-size: var(--text-body-sm-size); color: var(--color-text-muted); }
.mw-meta a { display: inline-flex; align-items: center; gap: 4px; }
.mw-totaal { text-align: right; white-space: nowrap; margin: 0; line-height: 1; }
.mw-totaal strong { display: block; font-family: var(--font-family-kop); font-weight: 700; font-size: 1.75rem;
                    color: var(--cgm-navy); }
.mw-totaal span { font-size: var(--text-caption-size); color: var(--color-text-muted); }
/* De uren per tarief, met het bedrag erachter, op één regel als een lijstje. */
.tarieven { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0;
            padding: 0 var(--space-5) var(--space-4); font-size: var(--text-body-sm-size); }
.tarieven > div { display: flex; align-items: center; gap: var(--space-2); }
.tarieven dt { margin: 0; }
.tarieven dd { margin: 0; font-weight: 600; color: var(--cgm-navy); }
.tarieven dd small { font-weight: 400; color: var(--color-text-muted); margin-left: var(--space-1); }
.tarieven .tarieven-totaal { margin-left: auto; padding-left: var(--space-4); border-left: 1px solid var(--color-border); }
.tarieven .tarieven-totaal dd { font-family: var(--font-family-kop); font-size: 1.25rem; }
/* De vergrendeling van de maand: één regel met de stand en één knop. */
.slotbalk { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
            padding: var(--space-2) var(--space-5); background: var(--color-surface-raised);
            border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
            font-size: var(--text-body-sm-size); color: var(--color-text-muted); }
.slotbalk .slot-stand { display: inline-flex; align-items: center; gap: var(--space-2); }
.slotbalk.is-vergrendeld { color: var(--color-feedback-danger-fg); background: var(--color-feedback-danger-bg); }
.slotbalk form { margin-left: auto; }
.mw table thead th:first-child, .mw table td:first-child { padding-left: var(--space-5); }
.mw table th:last-child, .mw table td:last-child { padding-right: var(--space-5); }

/* Medewerker uitnodigen: een korte rij velden. */
.uitnodigen .veldrij .veld { flex: 1 1 14rem; }

/* De instellingen per medewerker: een uitklapblok per persoon, native
   <details>, zodat het zonder script werkt en de toets werkt. */
.instellingen { border-top: 1px solid var(--color-border); }
.instellingen:first-of-type { border-top: 0; }
.instellingen summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3);
                        padding: var(--space-3) var(--space-5); font-family: var(--font-family-kop);
                        font-weight: 600; font-size: 1.125rem; }
.instellingen summary::-webkit-details-marker { display: none; }
.instellingen summary .chevron { margin-left: auto; color: var(--color-text-muted);
                                 transition: transform var(--motion-fast) var(--motion-ease); }
.instellingen[open] summary .chevron { transform: rotate(180deg); }
@media (hover: hover) { .instellingen summary:hover { background: var(--color-surface-raised); } }
.instellingen[open] summary { background: var(--color-surface-raised); border-bottom: 1px solid var(--color-border); }
.instellingen summary .label { font-family: var(--font-family); }
.instellingen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
                       gap: var(--space-5); padding: var(--space-5); }
.instellingen-raster fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-3); align-content: start; }
.instellingen-raster legend { font-weight: 600; padding: 0; margin-bottom: var(--space-2); color: var(--cgm-navy); }
.instellingen-raster .melding { grid-column: 1 / -1; }
.instellingen-raster .veld-breed { grid-column: 1 / -1; }
.instellingen-status { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-body-sm-size); }
/* In een smalle kolom: het wachtwoordveld met de knoppen ernaast, de twee
   tarieven naast elkaar met de knop eronder. */
.veldrij-ww { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; }
.veldrij-tarief { display: grid; grid-template-columns: 1fr 1fr; }
.veldrij-tarief .knop { grid-column: 1 / -1; justify-self: start; }
/* Personeelsgegevens: een lijstje van label en waarde. */
.gegevens { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-2) var(--space-4);
            margin: 0; font-size: var(--text-body-sm-size); }
.gegevens div { min-width: 0; }
.gegevens dt { color: var(--color-text-muted); font-size: var(--text-caption-size); }
.gegevens dd { margin: 0; font-weight: 600; color: var(--cgm-navy); overflow-wrap: anywhere; }
/* Het archief: een rij per persoon, gedempt. */
.archief-rij { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
               padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); color: var(--color-text-muted); }
.archief-rij:first-of-type { border-top: 0; }
.archief-rij strong { display: block; color: var(--color-text); font-weight: 600; }
.archief-rij small { font-size: var(--text-caption-size); }
.archief-rij .acties { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ================================================================== uren
   Het scherm van de medewerker: de maand als lijst van dagen per week.
   Geen kaart per dag meer; een rij per dag in een paneel per week, want
   dertig kaarten met een schaduw zijn dertig keer hetzelfde en niets
   springt eruit. Nu springt vandaag eruit. */
.maandstaat { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
              padding: var(--space-4) var(--space-5); }
.maandstaat div { display: flex; flex-direction: column; }
.maandstaat .groot { font-family: var(--font-family-kop); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--cgm-navy); }
.maandstaat .klein { font-size: var(--text-body-sm-size); color: var(--color-text-muted); margin-top: var(--space-1); }
.maandstaat .rechts { margin-left: auto; text-align: right; }
.maandstaat .rechts .groot { font-size: 1.5rem; color: var(--color-text-accent); }

.week { margin-top: var(--space-6); }
.week-kop { font-size: var(--text-overline-size); font-weight: 600; letter-spacing: var(--text-overline-tracking);
            text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-2) var(--space-1);
            font-family: var(--font-family); }
.dagen { list-style: none; margin: 0; padding: 0; }
.dag { border-top: 1px solid var(--color-border); padding: var(--space-2) var(--space-4) var(--space-3); }
.dag:first-child { border-top: 0; }
.dag.is-weekend { background: var(--color-surface-raised); }
.dag.is-vandaag { background: var(--vlak-vandaag); }
.dag-kop { display: flex; align-items: baseline; gap: var(--space-3); }
.dag-nr { font-family: var(--font-family-kop); font-weight: 700; font-size: 1.375rem; line-height: 1;
          min-width: 2rem; color: var(--cgm-navy); }
.dag.is-weekend .dag-nr { color: var(--color-text-muted); }
.dag.is-vandaag .dag-nr { color: var(--cgm-navy); }
.dag-naam { font-size: var(--text-body-sm-size); color: var(--color-text-muted); flex: 1; }
.dag.is-vandaag .dag-naam::after { content: "vandaag"; margin-left: var(--space-2); font-weight: 600; color: var(--cgm-navy); }
.dag-totaal { font-family: var(--font-family-kop); font-weight: 600; font-size: 1rem; color: var(--color-text-accent); white-space: nowrap; }
.dag-totaal:empty { display: none; }
.dag.is-toekomst .dag-nr, .dag.is-toekomst .dag-naam { color: var(--color-text-muted); font-weight: 400; }
.dag.is-toekomst .toevoegen { display: none; }

.registraties { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.registraties:empty { margin: 0; }
/* Een registratie: van, naar, tot, duur, tarief, notitie, weg. Op een smal
   scherm gaat de notitie naar een tweede regel in plaats van weg. */
.registratie { display: grid; align-items: center; gap: var(--space-2);
               grid-template-columns: auto auto auto auto auto minmax(6rem, 1fr) auto; }
.registratie.is-project { grid-template-columns: minmax(8rem, 1.2fr) minmax(6rem, 1fr) auto; }
.registratie .pijl { color: var(--color-text-muted); display: inline-flex; }
.invoer-tijd { width: 5.75rem; font-weight: 600; text-align: center; }
.invoer-project { font-weight: 600; }
.duur { font-family: var(--font-family-kop); font-weight: 600; font-size: 1rem; color: var(--color-text-accent);
        min-width: 3.5rem; text-align: center; }
.duur:empty::before { content: "–"; color: var(--color-border-strong); }
.invoer-notitie { border-color: transparent; background: transparent; color: var(--color-text-muted); }
.invoer-notitie:focus { color: var(--color-text); background: var(--color-surface); }
@media (hover: hover) and (pointer: fine) { .invoer-notitie:hover { border-color: var(--input-border); background: var(--color-surface); } }
.invoer.is-opgeslagen { border-color: color-mix(in srgb, var(--cgm-blauw) 55%, var(--input-border)); }
/* Toevoegen is een stille tekstknop; dertig gestippelde vakken op een rij
   maakten de maand zwaarder dan de uren zelf. */
.toevoegen { margin: var(--space-1) 0 0 calc(-1 * var(--space-2)); color: var(--color-text-muted); border: 0;
             background: transparent; min-height: 2rem; padding: 0 var(--space-2); font-size: var(--text-body-sm-size); }
@media (hover: hover) { .toevoegen:hover { color: var(--cgm-navy); background: var(--color-surface-raised); } }
.dag.is-vandaag .toevoegen { color: var(--cgm-navy); }
/* Een vergrendelde maand: de velden staan vast, de knoppen zijn weg. */
.is-vergrendeld .toevoegen, .is-vergrendeld .knop-weg { display: none; }
.is-vergrendeld .registratie .invoer { pointer-events: none; background: var(--input-bg-disabled); color: var(--color-text-muted); border-color: var(--color-border); }
.is-vergrendeld .schakel button { pointer-events: none; opacity: .6; }

/* De toast: kort onderin, navy, met een vinkje. Fout in de foutkleur. */
.toast { position: fixed; left: 50%; bottom: max(var(--space-6), env(safe-area-inset-bottom)); z-index: 50;
         transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
         display: flex; align-items: center; gap: var(--space-2);
         padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
         background: var(--cgm-navy); color: #FFFFFF; font-weight: 600; font-size: var(--text-body-sm-size);
         box-shadow: var(--shadow-3);
         transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease); }
.toast.is-zichtbaar { opacity: 1; transform: translate(-50%, 0); }
.toast.is-fout { background: var(--color-feedback-danger-fg); }

/* Het wachtwoord wijzigen: een native <dialog>, dus focus en Escape zijn
   van de browser en het venster ontsnapt aan elke overflow. */
.dialoog { border: 0; border-radius: var(--radius-lg); padding: 0; width: min(100% - var(--space-8), 26rem);
           background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-3); }
.dialoog::backdrop { background: color-mix(in srgb, var(--cgm-navy2) 55%, transparent); backdrop-filter: blur(3px); }
.dialoog-in { padding: var(--space-8) var(--space-6) var(--space-6); display: grid; gap: var(--space-4); }
.dialoog-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.dialoog h2 { font-size: 1.5rem; }
.dialoog .kop-uitleg { color: var(--color-text-muted); font-size: var(--text-body-sm-size); margin: var(--space-1) 0 0; }
.dialoog form { display: grid; gap: var(--space-4); }
.eisen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-3);
         font-size: var(--text-caption-size); color: var(--color-text-muted); }
.eisen li { display: flex; align-items: center; gap: var(--space-1); }
.eisen li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-border-strong); flex: 0 0 auto;
                    transition: background-color var(--motion-fast) var(--motion-ease); }
.eisen li.is-ok { color: var(--color-feedback-success-fg); }
.eisen li.is-ok::before { background: var(--color-feedback-success-fg); }

/* ================================================================= inlog
   Het inlogscherm: navy met het watermerk in het midden, de witte kaart
   met de temperatuurbalk bovenop. */
body.inlog { background: var(--cgm-navy); color: var(--color-text); justify-content: center; align-items: center;
             padding: var(--space-6) var(--space-4); position: relative; overflow-x: hidden; }
body.inlog::before { content: ""; position: fixed; inset: 0; pointer-events: none;
                     background: url(watermerk.webp) center / min(92vw, 1100px) no-repeat; opacity: .18; }
body.inlog main { flex: 0 0 auto; width: 100%; max-width: 25rem; position: relative; z-index: 1; }
.inlogkaart { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; position: relative;
              box-shadow: 0 24px 60px color-mix(in srgb, var(--cgm-navy2) 35%, transparent); padding: var(--space-10) var(--space-8) var(--space-8); }
.inlogkaart::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--temperatuur); }
.inlog-merk { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.inlog-merk img { height: 64px; width: auto; }
.inlog-merk .merk-naam { align-items: center; color: var(--color-text); }
.inlogkaart h1 { font-size: 2rem; text-align: center; }
/* Op de witte kaart is het accent blauw; oranje tekst op wit haalt de norm niet. */
.inlogkaart h1 span { color: var(--color-text-accent); }
.inlog-uitleg { text-align: center; color: var(--color-text-muted); font-size: var(--text-body-sm-size); margin: var(--space-2) 0 var(--space-6); }
.inlogkaart form { display: grid; gap: var(--space-4); }
.inlogkaart .melding { margin-bottom: var(--space-4); }
.inlog-hulp { margin-top: var(--space-5); text-align: center; font-size: var(--text-caption-size); color: var(--color-text-muted); }
.inlog-links { display: flex; gap: var(--space-2); margin-top: var(--space-6); }
.inlog-links .knop { flex: 1; }
body.inlog .voet { color: var(--tekst-op-donker); position: relative; z-index: 1; }
body.inlog .voet a { color: #FFFFFF; }

/* ============================================================ onboarding
   Eén formulier in een kaart, met dezelfde kop als de app. */
.ob-kaart { max-width: 40rem; margin-inline: auto; }
.ob-kaart .paneel-inhoud > form { display: grid; gap: var(--space-4); }
.ob-kaart fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.ob-kaart fieldset + fieldset { margin-top: var(--space-4); }
.ob-kaart legend { font-family: var(--font-family-kop); font-weight: 600; font-size: 1.25rem; padding: 0; margin-bottom: var(--space-2); }
.ob-kaart .veld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ob-klaar { text-align: center; padding-block: var(--space-6); }
.ob-klaar .vink { width: 4rem; height: 4rem; border-radius: 50%; margin: 0 auto var(--space-4);
                  display: grid; place-items: center; background: var(--color-feedback-success-bg); color: var(--color-feedback-success-fg); }
.ob-klaar h2 { font-size: 1.75rem; margin-bottom: var(--space-2); }
.ob-klaar p { color: var(--color-text-muted); max-width: 32rem; margin-inline: auto; }
.verplicht { color: var(--color-feedback-danger-fg); font-weight: 400; }

/* =========================================================== handleiding
   Een document om te lezen en af te drukken. Het leest als een bladzijde
   van de website: de omslag navy met het watermerk, daarna rustige tekst
   op wit, per sectie een nummer. */
.doc-balk { background: var(--cgm-navy); color: #FFFFFF; position: relative; }
.doc-balk::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--temperatuur); }
.doc-balk .wrap { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding-block: var(--space-3); }
.doc-balk .schakel { margin-inline: auto; border-color: rgb(255 255 255 / .38); }
.doc-balk .schakel button { background: transparent; color: #FFFFFF; min-height: 2.25rem; font-size: var(--text-body-sm-size); }
.doc-balk .schakel button + button { border-left-color: rgb(255 255 255 / .38); }
.doc-balk .schakel button.is-actief { background: #FFFFFF; color: var(--cgm-navy); }
.doc-balk .schakel a { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none;
                       padding: var(--space-1) var(--space-3); min-height: 2.25rem; color: #FFFFFF; font-weight: 600; font-size: var(--text-body-sm-size); }
.doc-balk .schakel a + a { border-left: 1px solid rgb(255 255 255 / .38); }
.doc-balk .schakel a[aria-current="page"] { background: #FFFFFF; color: var(--cgm-navy); }
.doc { --wrap: 50rem; background: var(--color-surface); box-shadow: var(--shadow-2); margin: var(--space-8) auto var(--space-10); overflow: hidden; }
.doc-omslag { background: var(--cgm-navy); color: #FFFFFF; padding: var(--space-10) var(--space-10) var(--space-12); position: relative; overflow: hidden; }
.doc-omslag::before { content: ""; position: absolute; inset: 0; pointer-events: none;
                      background: url(watermerk.webp) right center / auto 130% no-repeat; opacity: .16; }
.doc-omslag::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--temperatuur); }
.doc-omslag > * { position: relative; z-index: 1; }
.doc-omslag .merk { margin-bottom: var(--space-12); }
.doc-omslag .merk-naam-payoff { color: var(--tekst-op-donker); }
.doc-omslag h1 { font-size: 3rem; line-height: .95; max-width: 14ch; }
.doc-omslag h1 span { display: block; color: var(--tekst-op-donker); font-weight: 600; font-size: .55em; line-height: 1.2; margin-top: var(--space-3); }
.doc-omslag .lead { color: var(--tekst-op-donker); max-width: 44ch; margin: var(--space-5) 0 0; }
.doc-inhoud { padding: var(--space-10); font-size: var(--text-body-size); line-height: var(--text-body-line); }
.doc-inhoud p { max-width: 66ch; margin-bottom: var(--space-4); hyphens: auto; -webkit-hyphens: auto; }
.doc-inhoud strong { font-weight: 600; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: anywhere; }
.inhoudsopgave { background: var(--color-surface-raised); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6);
                 margin-bottom: var(--space-10); }
.inhoudsopgave h2 { font-size: 1.25rem; margin-bottom: var(--space-3); }
.inhoudsopgave ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-6); }
.inhoudsopgave li { display: flex; gap: var(--space-2); }
.inhoudsopgave li a { color: var(--color-text); text-decoration: none; }
@media (hover: hover) { .inhoudsopgave li a:hover { text-decoration: underline; } }
.inhoudsopgave .nr { color: var(--color-text-accent); font-weight: 600; min-width: 1.5rem; font-variant-numeric: tabular-nums; }
.doc-sectie { margin-bottom: var(--space-10); scroll-margin-top: var(--space-6); }
.doc-sectie > h2 { display: flex; align-items: center; gap: var(--space-3); font-size: 1.75rem;
                   padding-bottom: var(--space-3); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.doc-sectie > h2 .nr { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
                       background: var(--cgm-navy); color: #FFFFFF; font-size: 1.125rem; }
.stappen { list-style: none; margin: var(--space-5) 0; padding: 0; display: grid; gap: var(--space-4); }
.stappen li { display: flex; gap: var(--space-4); align-items: flex-start; }
.stap-nr { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
           background: var(--cgm-blauwsoft); color: var(--cgm-navy); font-family: var(--font-family-kop); font-weight: 700; margin-top: 1px; }
.stap-tekst > strong { display: block; font-weight: 600; color: var(--cgm-navy); }
.stap-tekst span { color: var(--color-text-muted); font-size: var(--text-body-sm-size); }
.doc-inhoud .melding { margin: var(--space-5) 0; max-width: 66ch; }
.doc-inhoud table { margin: var(--space-5) 0; font-size: var(--text-body-sm-size); }
.doc-inhoud th { background: var(--cgm-navy); color: #FFFFFF; }
.doc-inhoud td:first-child { font-weight: 600; color: var(--cgm-navy); }
.platform { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin: var(--space-5) 0; overflow: hidden; }
.platform h3 { display: flex; align-items: center; gap: var(--space-2); font-size: 1.125rem; font-weight: 600;
               padding: var(--space-3) var(--space-5); background: var(--color-surface-raised); border-bottom: 1px solid var(--color-border); }
.platform > div { padding: var(--space-2) var(--space-5) var(--space-4); }
.platform .stappen { margin-block: var(--space-3); }
.doc-slot { background: var(--cgm-navy); color: #FFFFFF; border-radius: var(--radius-md); padding: var(--space-8); margin-top: var(--space-10);
            position: relative; overflow: hidden; }
.doc-slot::before { content: ""; position: absolute; inset: 0; pointer-events: none;
                    background: url(watermerk.webp) right center / auto 160% no-repeat; opacity: .14; }
.doc-slot > * { position: relative; z-index: 1; }
.doc-slot h2 { font-size: 1.75rem; margin-bottom: var(--space-3); }
.doc-slot p { color: var(--tekst-op-donker); }
.doc-slot strong { color: #FFFFFF; }
.doc-voet { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
            padding: var(--space-4) var(--space-10); border-top: 1px solid var(--color-border);
            font-size: var(--text-caption-size); color: var(--color-text-muted); }
.doc-voet a { color: inherit; }

/* ------------------------------------------------------------------ voet */
.voet { text-align: center; padding: var(--space-6) var(--space-4) max(var(--space-8), env(safe-area-inset-bottom));
        font-size: var(--text-body-sm-size); color: var(--color-text-muted); }
.voet a { color: inherit; }
.voet-klein { font-size: var(--text-caption-size); }

/* ---------------------------------------------------------- smal scherm */
@media (max-width: 48rem) {
  .wrap { width: min(100% - var(--space-4) * 2, var(--wrap)); }
  .kop-rij { padding-bottom: var(--space-3); }
  .merk img { height: 34px; }
  .merk-naam-hoofd { font-size: 1rem; }
  .merk-naam-payoff { display: none; }
  .kop-acties .knop { min-height: 2.25rem; padding-inline: var(--space-3); }
  .kop-acties .knop-tekst { display: none; }
  .kop-titel { font-size: 1.85rem; margin-top: var(--space-5); }
  .maandrij { margin-top: var(--space-5); gap: var(--space-2); }
  .maandbalk { gap: var(--space-2); }
  .maand-naam { min-width: 0; flex: 1; }
  .maandbalk-acties { flex-basis: 100%; margin-left: 0; }
  .maandbalk-acties .knop { flex: 1; }
  .inhoud { padding-block: var(--space-4) var(--space-8); }
  .paneel-kop, .paneel-inhoud, .mw-kop, .instellingen-raster, .archief-rij { padding-inline: var(--space-4); }
  .mw table thead th:first-child, .mw table td:first-child { padding-left: var(--space-4); }
  .mw table th:last-child, .mw table td:last-child { padding-right: var(--space-4); }
  .tarieven, .slotbalk, .instellingen summary { padding-inline: var(--space-4); }
  .tarieven .tarieven-totaal { margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; }
  th, td { padding-inline: var(--space-3); }
  /* Schuift de tabel opzij, dan blijven de knoppen van de rij in beeld en
     staat het totaal links, waar de lezer is. */
  .mw table th:last-child, .mw table td.cel-acties { position: sticky; right: 0; background: var(--card-bg);
    box-shadow: -8px 0 8px -8px color-mix(in srgb, var(--cgm-navy) 25%, transparent); }
  .mw table thead th:last-child { background: var(--color-surface-raised); }
  .mw table tr.is-in-bewerking td.cel-acties { background: var(--cgm-blauwsoft); }
  /* De cel van het totaal is zo breed als de tabel en kan zelf niet
     meeschuiven; de tekst erin wel. */
  .mw table tfoot td { text-align: left; }
  .mw table .tabel-totaal { display: inline-block; position: sticky; left: var(--space-4); }
  /* Het klokje van de browser past niet naast "07:30"; op een telefoon
     opent het veld zelf de kiezer, dus het klokje kan weg. */
  .invoer-tijd::-webkit-calendar-picker-indicator { display: none; }
  .invoer-tijd { width: 5rem; }
  .mw-totaal strong { font-size: 1.5rem; }
  .instellingen-raster { grid-template-columns: 1fr; }
  .dag { padding-inline: var(--space-3); }
  .registratie { grid-template-columns: auto auto auto auto auto; }
  .registratie .invoer-notitie { grid-column: 1 / -2; }
  .registratie .knop-weg { grid-column: -2 / -1; grid-row: 1; }
  .registratie.is-project { grid-template-columns: 1fr auto; }
  .registratie.is-project .invoer-notitie { grid-column: 1 / 2; }
  .schakel button { padding-inline: var(--space-2); }
  .maandstaat .groot { font-size: 1.75rem; }
  .inlogkaart { padding: var(--space-8) var(--space-5) var(--space-6); }
  .ob-kaart .veld-paar { grid-template-columns: 1fr; }
  .doc { margin: 0 auto var(--space-8); --wrap: 100%; box-shadow: none; border-radius: 0; }
  .doc-omslag { padding: var(--space-8) var(--space-5); }
  .doc-omslag h1 { font-size: 2.25rem; }
  .doc-inhoud { padding: var(--space-6) var(--space-5); }
  .doc-voet { padding-inline: var(--space-5); flex-direction: column; text-align: center; }
  .inhoudsopgave ol { grid-template-columns: 1fr; }
  .doc-balk .schakel { flex-basis: 100%; order: 3; }
  .doc-balk .schakel a { flex: 1; justify-content: center; }
  .doc-slot { padding: var(--space-6) var(--space-5); }
  .eisen { grid-template-columns: 1fr; }
}
@media (max-width: 26rem) {
  .registratie { grid-template-columns: auto auto auto 1fr auto; }
  .registratie .schakel { grid-column: 1 / -2; }
  .registratie .duur { text-align: right; }
}

/* ----------------------------------------------------------- afdrukken
   De handleiding wordt afgedrukt; de balk erboven en het watermerk niet. */
@media print {
  body { background: #FFFFFF; }
  .doc-balk, .voet { display: none; }
  .doc { box-shadow: none; margin: 0; --wrap: 100%; }
  .doc-omslag::before, .doc-slot::before { display: none; }
  .doc-omslag { page-break-after: always; min-height: 60vh; }
  .doc-sectie { page-break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* Wie beweging heeft uitgezet krijgt geen beweging. */
@media (prefers-reduced-motion: reduce) {
  .knop:active, .toast { transform: none; }
  .toast { transform: translate(-50%, 0); }
  .voortgang-vulling, .instellingen summary .chevron, .toast { transition: none; }
}