:root {
  --navy: #0d1b38;
  --navy-soft: #152747;
  --mint: #3abd9d;
  --mint-dark: #169276;
  --teal: #165d64;
  --green-light: #e7f8f3;
  --ink: #172332;
  --muted: #65717f;
  /* Ingetrokken bericht: zacht lavendel, rustig en leesbaar, los van mint/oranje/rood (Gio 15 sep). */
  --ingetrokken-tekst: #5a4f99; --ingetrokken-rand: #c9c2ec; --ingetrokken-vlak: #f4f2fc;
  --line: #dfe6e9;
  --surface: #ffffff;
  --background: var(--vlak-zacht);
  --warning: #bb7623;
  --warning-bg: #fff5e8;
  /* Tekstvarianten. --mint-dark en --warning blijven ongewijzigd als accent-,
     achtergrond- en randkleur; als tekst haalden ze de contrastnorm niet
     (3,54:1 en 3,40:1 tegenover de vereiste 4,5:1). Zelfde tint, alleen donker
     genoeg om te lezen. */
  /* Tekstvariant voor het donkerblauw. --navy zelf blijft ongewijzigd, want dat
     is ook achtergrond en rand; als tekst moet hij in donkere modus juist licht
     worden. */
  --navy-tekst: #0d1b38;
  --tabelkop: #67727d;
  /* Vlakken. Deze stonden als vaste lichte kleuren door de hele opmaak, waardoor
     de donkere modus ze niet kon omdraaien: de tekst werd licht, het vlak bleef
     wit. Een naam per soort vlak is een plek om het te regelen in plaats van
     zestig. */
  --vlak: #ffffff;
  --vlak-zacht: #f6f9f8;
  --vlak-warm: #fffaf4;
  /* --surface-muted werd op 19 plekken als achtergrond gebruikt (panelkoppen,
     maandkoppen in de werkvoorraad, tabelrijen van het teamoverzicht, het
     logovoorbeeld, de sjabloonkaart) maar was nergens gedefinieerd. Een
     var() naar een onbekend token maakt de hele declaratie ongeldig, dus
     kregen al die vlakken geen achtergrond in plaats van een verdiepte -- ze
     stonden transparant op het paneel. Dat is een deel van de vlakheid die
     bij "ik zie geen diepte" hoort. Iets donkerder dan --vlak-zacht, want
     dit vlak ligt bínnen een paneel dat zelf al op --vlak-zacht staat. */
  --surface-muted: #f1f5f4;
  --mint-dark-tekst: #037f63;
  --warning-tekst: #a5600d;
  /* De blauwe "loopt nog"-statuspil (.status-submitted/.status-ready) stond als
     enige van de vier statuskleuren op een vaste hex i.p.v. op tokens. Gevolg:
     groen, grijs en oranje draaiden netjes mee met de donkere modus, maar deze
     bleef een lichtblauw vlak met donkerblauwe tekst midden in een donker
     scherm. Zelfde tint, nu wel als token zodat het donkere blok hem kan
     omdraaien -- precies zoals bij --warning-bg/--warning-tekst. */
  --info-bg: #eaf1fa;
  --info-tekst: #315d91;
  /* Amberkleurige "let op"-rand (correctiebanner, aandachtsrijen in de
     teamtabel). Stond op twee plekken als dezelfde vaste hex; als token kan
     het donkere blok hem omdraaien zonder dat de lichte modus verandert. */
  --warning-rand: #edc58f;
  --danger: #a34b4b;
  /* Rood voor TEKST. --danger is gemaakt voor vlakken en randen en heeft één
     waarde voor licht en donker; als tekst haalde hij op de donkere achtergrond
     maar 3,0:1 (gezien 18 sep). Hier een eigen waarde per thema, zodat
     scripts/contrast-licht-donker.mjs hem ook kan narekenen. */
  --danger-tekst: #a34b4b;
  --shadow: 0 14px 35px rgba(13, 27, 56, 0.08);
  --radius: 18px;
  /* Hoogteschaal. Rand en schaduw zeggen allebei "los object", en ze stonden
     los van elkaar per component ingesteld: dezelfde schaduwwaarde op zes
     plekken overgetypt, met net andere alfa's. Drie niveaus met een betekenis:
       rust     -- ligt in de pagina (tabelrijen, vlakken binnen een paneel)
       kaart    -- een zelfstandig blok op de achtergrond
       zwevend  -- hangt boven de pagina (uitklap, dialoog, meldingen)
     Wie een vierde nodig denkt te hebben, heeft meestal een hiërarchieprobleem
     en geen schaduwprobleem. */
  --hoogte-rust: none;
  --hoogte-kaart: 0 1px 2px rgba(13, 27, 56, .04), 0 10px 30px rgba(13, 27, 56, .05);
  --hoogte-zwevend: 0 18px 48px rgba(13, 27, 56, .16);
  /* Randen horen zachter te worden naarmate de schaduw het werk overneemt. */
  --line-zacht: #e8eeef;
  /* Koptypeschaal. Hiervoor stonden er zeven verschillende clamp()-waarden
     door het bestand voor wat in feite twee koptypes zijn: 28/40, 28/38,
     28/38, 27/37 voor schermkoppen en 25/33, 27/34 als mobiele varianten.
     Onderling nauwelijks te onderscheiden, maar samen zorgen ze ervoor dat
     koppen net niet gelijk aanvoelen van scherm tot scherm. Eén token per
     rol; dezelfde bedoeling, zonder de willekeur. */
  --kop-scherm: clamp(28px, 4vw, 38px);
  --kop-scherm-mobiel: clamp(26px, 8.5vw, 34px);
  --kop-topbalk: clamp(24px, 3vw, 31px);
  --kop-sectie: 20px;
  --kop-paneel: 19px;

  /* Letters. Hier stond op 21 plekken een slab-stapel met Georgia als
     terugval, en in de body een Roboto-stapel -- maar geen van beide wordt
     ergens geladen: er is
     geen @font-face en geen fontkoppeling. In de praktijk rendert Klassiek dus
     op wat het besturingssysteem toevallig heeft (op Windows Segoe UI en
     Georgia, op een Mac iets anders). De typografie was daarmee geen keuze
     maar een uitkomst, en ze verschilt per apparaat.
     Nu één stapel per rol, expliciet. Bewust géén serif voor de koppen: Nieuw
     heeft al een redactionele schreefletter (Fraunces, lokaal geladen) en dat
     is juist wat die skin onderscheidt. Klassiek gaat de andere kant op --
     een strakke schreefloze kop, iets krapper gespatieerd en zwaarder gezet.
     Twee skins, twee stemmen, en geen extra lettertype om te laden. */
  --letter-tekst: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --letter-kop: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* Karakter van de koppen in Klassiek. Een schreefloze kop op standaardgewicht
   en -spatiëring is braaf; het gewicht en de krappere letterafstand geven hem
   de stevigheid die de slab eerst leverde, zonder een schreefletter te lenen
   van Nieuw. text-wrap:balance voorkomt de losse hangende laatste woorden
   waar een kop over twee regels valt. */
html:not([data-skin="new"]) :where(.login-panel h1, .topbar h1, .hero-copy h2, .view-heading h2,
       .employee-hero h2, .modal h2, .panel-heading h3, .settings-card h3,
       .summary-card h3, .dashboard-next-action-copy h3, .empty-state h3,
       .approval-period-heading h3, .invoice-month-overview-copy h3,
       .month-batch-title-row h3, .announcement-item-head h3,
       .employee-announcement-card h3, .employee-customer-timesheet-heading h3) {
  font-weight: 700;
  letter-spacing: -.018em;
  text-wrap: balance;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--background);
  color: var(--ink);
  font-family: var(--letter-tekst);
  -webkit-font-smoothing: antialiased;
}

body.auth-booting {
  background: var(--navy);
}

body.auth-booting .login-screen,
body.auth-booting .app-shell {
  display: none !important;
}

button, input, select { font: inherit; }
button { color: inherit; }

/* Eén zichtbare focusring voor alles wat met het toetsenbord te bereiken is.
   Links en elementen die via tabindex/role focusbaar zijn gemaakt hadden er
   geen -- daardoor was met Tab niet te zien waar je stond. */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(58, 189, 157, 0.28);
  outline-offset: 2px;
}

.app-shell { min-height: 100vh; }

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background:
    radial-gradient(circle at 15% 15%, rgba(58, 189, 157, .22), transparent 28%),
    radial-gradient(circle at 88% 85%, rgba(22, 93, 100, .24), transparent 31%),
    var(--navy);
  padding: 28px;
}

.login-panel {
  width: min(100%, 610px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: var(--vlak);
  box-shadow: 0 28px 80px rgba(0,0,0,.25);
  padding: 42px;
  animation: login-panel-in .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes login-panel-in {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .login-panel { animation: none; }
}

.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
.login-brand img { width: 130px; height: auto; }
.login-brand > span { border-left: 1px solid var(--line); color: var(--teal); font-size: 12px; font-weight: 700; padding-left: 14px; }
.login-panel h1 { margin: 9px 0 10px; color: var(--navy-tekst); font-family: var(--letter-kop); font-size: var(--kop-scherm); letter-spacing: -.025em; }
.login-panel > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.demo-employee-picker { margin-top: 22px; border-radius: 14px; background: #f4f8f7; padding: 14px; }
.demo-employee-picker label, .demo-employee-picker small { display: block; }
.demo-employee-picker label { color: var(--navy-tekst); font-size: 11px; font-weight: 800; }
.demo-employee-picker small { margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.login-account-picker { position: relative; margin-top: 7px; }
.account-picker-trigger { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--vlak); color: var(--ink); cursor: pointer; font: inherit; padding: 0 36px 0 11px; text-align: left; }
.account-picker-trigger::after { position: absolute; top: 50%; right: 13px; content: "⌄"; color: var(--teal); font-size: 15px; transform: translateY(-55%); }
.account-picker-trigger[aria-expanded="true"] { border-color: var(--mint-dark); box-shadow: 0 0 0 3px rgba(58,189,157,.13); }
.account-choice-panel { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; left: 0; display: grid; max-height: 245px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--vlak); box-shadow: 0 18px 42px rgba(13,27,56,.18); padding: 6px; }
.account-choice-panel[hidden] { display: none; }
.account-choice-panel button { border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; padding: 10px; text-align: left; }
.account-choice-panel button strong, .account-choice-panel button small { display: block; }
.account-choice-panel button strong { color: var(--navy-tekst); font-size: 11px; }
.account-choice-panel button small { margin-top: 3px; font-size: 9px; }
.account-choice-panel button:hover, .account-choice-panel button.is-active { background: var(--green-light); }
.login-options { display: grid; gap: 12px; margin: 16px 0 20px; }
.login-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--vlak);
  cursor: pointer;
  padding: 16px;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  animation: login-option-in .45s ease both;
}
.login-option:nth-of-type(1) { animation-delay: .08s; }
.login-option:nth-of-type(2) { animation-delay: .16s; }
@keyframes login-option-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .login-option { animation: none; }
}
.login-option:hover { border-color: var(--mint); box-shadow: 0 10px 30px rgba(13,27,56,.09); transform: translateY(-2px); }
.login-option:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(13,27,56,.08); }
.login-option strong, .login-option small { display: block; }
.login-option strong { color: var(--navy-tekst); font-size: 15px; }
.login-option small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.login-avatar { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 800; }
.login-avatar.employee { background: var(--mint); color: var(--navy); }
.login-arrow { color: var(--mint-dark-tekst); font-size: 22px; }
.login-panel .login-note { border-radius: 12px; background: var(--green-light); color: var(--teal); font-size: 11px; padding: 12px 14px; }
.login-panel .login-note[hidden] { display: none; }
.login-panel.is-production-login { width: min(100%, 560px); padding: 42px 56px 30px; }
.login-panel.is-production-login .login-brand { margin-bottom: 34px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
#auth-login-form { display: grid; gap: 9px; margin-top: 22px; }
#auth-login-form > label { color: var(--navy-tekst); font-size: 12px; font-weight: 800; }
/* 16px, niet 14px, en zonder mobiele media query: dit is het inlogscherm,
   het eerste wat iedere mobiele gebruiker ziet. Onder 16px zoomt iOS Safari
   de hele pagina in zodra e-mail of wachtwoord focus krijgt -- op geen
   enkele breedte gewenst, dus meteen in de basisregel. */
#auth-login-form > input,
.login-password-field input { width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 11px; background: var(--vlak); color: var(--navy-tekst); padding: 12px 14px; font: inherit; font-size: 16px; }
#auth-login-form > input:focus,
.login-password-field input:focus { border-color: var(--mint-dark); outline: 3px solid rgba(58,189,157,.16); }
.login-password-field { position: relative; display: block; }
.login-password-field input { padding-right: 52px; }
.login-password-field button { position: absolute; top: 50%; right: 8px; display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--navy-tekst); cursor: pointer; transform: translateY(-50%); }
.login-password-field button:hover { background: var(--vlak-zacht); }
#auth-login-submit { width: 100%; min-height: 50px; margin-top: 8px; }
#auth-forgot-password { justify-self: center; min-height: auto; border: 0; background: transparent; color: var(--navy-tekst); padding: 7px 4px; text-decoration: underline; text-underline-offset: 3px; }
#auth-login-feedback { margin: 0; border-radius: 9px; background: var(--warning-bg); padding: 10px 12px; font-size: 11px; }
.login-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 20px; border-top: 1px solid var(--line); color: var(--muted); padding-top: 16px; font-size: 9px; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  display: flex;
  width: 250px;
  flex-direction: column;
  background:
    radial-gradient(circle at 0 0, rgba(58, 189, 157, 0.19), transparent 34%),
    var(--navy);
  color: #fff;
  padding: 28px 20px 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  text-decoration: none;
}

.brand img {
  width: 112px;
  height: auto;
  object-fit: contain;
}

.brand span {
  max-width: 72px;
  color: #b9c7d3;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.25;
}

/* Besluit Gio (19 sep): op telefoon krijgt de beheerdersbalk in Klassiek korte
   labels, want zes volledige woorden passen niet op 320-360px ("Dashbo...",
   "Goedke..."). De volledige naam blijft voorleesbaar en als tooltip; de korte
   is alleen beeld. Zie de regels in het blok max-width 820px. */
.nav-label-kort { display: none; }

.nav-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 26px;
  margin-top: 40px;
}

/* Groepen in het beheermenu (zie de toelichting in index.html). Het kopje is
   een oriëntatiepunt, geen knop: klein, uitgespatieerd en gedempt, zodat het
   zich niet met de items meet. De haarlijn erboven doet het scheiden -- bij de
   eerste groep niet, want daar scheidt het logo al. */
.nav-group { display: flex; flex-direction: column; gap: 5px; }
.nav-group-items { display: flex; flex-direction: column; gap: 5px; }
.nav-group-title {
  margin: 0 0 4px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #7e93a6;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 14px 14px 0;
  text-transform: uppercase;
}
.nav-group:first-child .nav-group-title { border-top: 0; padding-top: 0; }

.nav-item {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #afbdca;
  cursor: pointer;
  padding: 0 14px;
  text-align: left;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.is-active { background: rgba(58, 189, 157, .15); color: #fff; font-weight: 600; }

/* "Je bent hier" is een plaats, geen accentkleur. Het gevulde vlak alleen zei
   vooral "dit is opgelicht"; de rail links zegt wáár je staat, en laat de
   vulling zachter zijn. */
.nav-item.is-active::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--mint);
}

.nav-marker {
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 3px;
  /* Zes identieke ruitjes onder elkaar dragen geen informatie; ze mogen dus
     wijken voor de tekst. Alleen het actieve ruitje vult zich en telt mee. */
  opacity: .45;
  transform: rotate(45deg);
  transition: opacity .2s ease;
}

.nav-item:hover .nav-marker { opacity: .7; }
.nav-item.is-active .nav-marker { border-color: var(--mint); background: var(--mint); opacity: 1; }
.nav-count { margin-left: auto; border-radius: 999px; background: var(--mint); color: var(--navy); font-size: 11px; font-weight: 800; padding: 2px 7px; }
.nav-count-group { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-count-group[hidden] { display: none; }
.nav-count-group .nav-count { margin-left: 0; }
.nav-count.is-blocked { background: var(--warning); }
.nav-count.is-ready { background: var(--mint); }
.nav-count.is-backoffice { background: var(--warning); }
.nav-count.is-employee { background: var(--mint); }

/* De voet hoort bij elkaar en niet bij de navigatie erboven: een haarlijn en
   wat lucht maken daar één blok van, i.p.v. drie losse dingen die toevallig
   onderaan zijn beland. */
.sidebar-footer { display: grid; gap: 14px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 18px; }
/* Modern-only secties: in Klassiek onzichtbaar, styles-new.css zet ze aan.
   .new-admin-overzicht erbij sinds 1.0.89 -- de oude Storyline had zo'n
   verbergregel in styles-new.css die met de Storyline-CSS mee verdween,
   waardoor de Modern-sectie in Klassiek bovenaan het dashboard stond
   (DASH-H-012 op mobile-safari na de merge van 1.0.86). */
.new-employee-bento, .new-admin-overzicht, .new-invoices, .new-employees, .new-announcements, .new-settings-acties, .new-maanden, .new-tabbalk { display: none; }
/* Tekst die alleen in Modern hoort (25 sep, Berichten): in Klassiek verborgen,
   styles-new.css zet hem aan en verbergt dan de Klassieke tegenhanger. */
.alleen-modern, .alleen-modern-blok { display: none; }
.app-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; padding: 16px 2px 4px; }
.app-footer-version { margin-left: auto; }
.workspace-user { display: flex; align-items: center; gap: 10px; }
.workspace-user .avatar { display: grid; width: 36px; height: 36px; place-items: center; overflow: hidden; border-radius: 10px; background: var(--mint); color: var(--navy); font-size: 12px; font-weight: 800; background-position: center; background-size: cover; }
.workspace-user strong, .workspace-user small { display: block; }
.workspace-user strong { font-size: 13px; }
.workspace-user small { margin-top: 2px; color: #91a4b6; font-size: 11px; }
.demo-badge { width: fit-content; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #9eb0c1; font-size: 10px; letter-spacing: .07em; padding: 5px 9px; text-transform: uppercase; }
/* Dezelfde badge staat op twee heel verschillende ondergronden: in de donkere
   zijbalk (waar #9eb0c1 klopt) en in de lichte topbalk. Daar kwam hij uit op
   2,06:1, ruim onder de 4,5 die WCAG 1.4.3 vraagt -- en het is het
   versienummer, precies wat je wilt kunnen aflezen als je een melding maakt.
   Alleen de lichte context krijgt een donkerder tint (4,62:1); de zijbalk
   blijft zoals hij was. Gevonden door de contrastverkenning (22 sep). */
.topbar .demo-badge { color: #5d7285; border-color: rgba(13, 27, 56, .14); }
.topbar-context { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
/* Gio (25 sep, telefoon): het versienummer staat al in de voettekst, dus niet
   ook in de kop. Het element blijft (set-version.mjs telt het), alleen niet
   zichtbaar -- op elke breedte, in beide skins. */
.topbar-context .mobile-version-badge { display: none; }
.environment-badge { display: inline-flex; width: fit-content; align-items: center; border: 1px solid #e6b66a; border-radius: 999px; background: #fff4df; color: #8b5200; font-size: 9px; font-weight: 900; letter-spacing: .08em; padding: 5px 9px; text-transform: uppercase; }
.environment-badge.is-local { border-color: #8fd9c7; background: var(--green-light); color: var(--mint-dark-tekst); }
/* Oranje strook bovenaan op TEST, ook op het inlogscherm (Remy-LeBeau, 2 okt). Nooit op PROD. */
.testomgeving-strook { padding: 5px 12px; background: #e8963a; color: #2b1700; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.testomgeving-strook[hidden] { display: none; }
/* Was een onderstreepte tekstlink en las daardoor als "ga hier weg". Het is
   een handeling binnen de app, dus een rustige knop met een rand -- zichtbaar
   klikbaar, maar zonder te concurreren met de navigatie erboven. */
.switch-role { width: fit-content; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: transparent; color: #b9c7d3; cursor: pointer; font-size: 11px; font-weight: 600; padding: 7px 11px; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.switch-role:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.06); color: #fff; }

/* Fase 17-audit (13 sep), vervolg op de .help-launcher-fix hierboven: tussen
   721 en 820px verdwijnt #switch-role met de rest van .sidebar-footer (de
   sidebar wordt daar de compacte onderste navigatiebalk, zonder ruimte voor
   een footer), en #mobile-switch-role hoort bij de complete topbar-herbouw
   die zelf pas bij max-width:720px begint -- dus geen enkele manier om van
   rol te wisselen of uit te loggen op die breedte. Niet de hele topbar-
   herbouw naar 820px optrekken (ongeteste, grote wijziging op een breedte
   met meer ruimte dan de telefoon waarvoor die herbouw is ontworpen); in
   plaats daarvan #switch-role zelf zichtbaar maken als een losse zwevende
   knop, zelfde stijltaal als .help-launcher maar linksonder zodat ze nooit
   overlappen. */
@media (max-width: 820px) {
  .switch-role {
    display: inline-flex;
    position: fixed;
    left: 16px;
    bottom: 78px;
    z-index: 80;
    min-height: 42px;
    align-items: center;
    border: 0;
    background: var(--navy);
    color: #fff;
    box-shadow: 0 16px 38px rgba(13,27,56,.25);
    padding: 10px 15px;
  }
  .switch-role:hover { background: var(--navy-soft); border-color: transparent; color: #fff; }
}

.main-content {
  min-height: 100vh;
  margin-left: 250px;
  padding: 0 34px 60px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(243, 247, 246, .91);
  border-bottom: 1px solid rgba(213, 224, 225, .8);
  backdrop-filter: blur(12px);
}

.topbar h1 { margin: 2px 0 0; font-family: var(--letter-kop); font-size: var(--kop-topbalk); letter-spacing: 0; }
.mobile-topbar-home { display: none; }
.eyebrow, .section-label { margin: 0; color: var(--mint-dark-tekst); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
/* De topbalk had vijf bedieningselementen op gelijke sterkte: allemaal pillen
   met een rand, allemaal even groot, allemaal even ver uit elkaar. Daardoor
   leidde niets en las de hele rij als één blok knoppen. Onderscheid in plaats
   van herstyling:
     status   -- de mailstatus en de omgeving zijn meldingen, geen knoppen;
     hulpmiddelen -- demo herstellen en de vormgevingswissel, rustig tot hover;
     hoofdbediening -- de maandkiezer, het enige element dat wél een kaart mag zijn;
     account  -- bel en avatar, met een haarlijn ervoor als scheiding.
   De ruimte tussen de groepen is groter dan binnen een groep; dat doet het
   werk dat vijf randen eerst probeerden te doen. */
/* Deze rij mag afbreken zodra hij niet past -- op élke breedte, niet pas
   onder 590px zoals eerst. Daartussen liep hij simpelweg buiten het venster:
   op 1280 (een doodgewone laptop, én de breedte waarop alle desktoptests
   draaien) stak de avatar er 8px overheen en kreeg de pagina een horizontale
   schuifbalk. Dat stond er al voor deze ontwerpronde; het viel niet op omdat
   alleen de mobiele tests op overloop controleren. Afbreken maakt de balk een
   regel hoger, en dat is altijd beter dan inhoud die naast het scherm valt. */
.topbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; row-gap: 8px; }
.safety-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--warning-tekst);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 7px 2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.safety-badge::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 999px; background: currentColor; }
.safety-badge.is-active { background: transparent; color: #0a6b57; }
.safety-badge.is-paused { background: transparent; color: var(--warning-tekst); }
.safety-badge.is-toggleable { cursor: pointer; }
.safety-badge.is-toggleable:hover { filter: brightness(.97); }
.safety-badge.is-toggleable:focus-visible { outline: 3px solid rgba(61, 195, 157, .3); outline-offset: 2px; }
.mail-acceptance-controls { display: flex; align-items: center; gap: 8px; }
/* inline-flex met gap: tussen het pijltje en het woord stond in de HTML een
   spatie, maar een flexcontainer gooit witruimte tussen items weg -- op de
   knop stond daardoor "↶HERSTEL DEMO" aan elkaar geplakt. */
.topbar-quick-reset { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 8px 11px; text-transform: uppercase; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.topbar-quick-reset:hover { border-color: var(--line); background: var(--surface); color: var(--mint-dark-tekst); }
/* Marge links: begin van het blok hulpmiddelen, los van de statusmelding.
   Niet in New, waar de rij al afbreekt en elke extra breedte een regel kost. */
html:not([data-skin="new"]) .topbar-quick-reset { margin-left: 10px; }
.appearance-switches { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 4px; }
.appearance-switch { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 10px; padding: 0 9px; }
.appearance-switch strong { color: inherit; font-size: inherit; }
.appearance-switch:hover, .appearance-switch[aria-pressed="true"] { background: var(--green-light); color: var(--mint-dark-tekst); }
.appearance-switch:focus-visible { outline: 3px solid rgba(58,189,157,.3); outline-offset: 2px; }

/* De maandkiezer is de enige echte hoofdbediening in de balk en mag daarom als
   enige een kaart zijn. Extra lucht ervoor markeert de overgang van
   hulpmiddelen naar hoofdbediening. */
.period-control { display: flex; min-height: 48px; align-items: center; gap: 3px; margin-left: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 5px 18px rgba(13,27,56,.05); padding: 0 4px; transition: border-color .18s ease, box-shadow .18s ease; }
.period-control:hover, .period-control:focus-within { border-color: #b9ddd2; box-shadow: 0 7px 22px rgba(13,27,56,.08); }

/* Haarlijn vóór het accountblok (bel en avatar): die twee horen bij elkaar en
   niet bij de bediening ervoor.
   Alleen in Klassiek. De New-skin zet in de beheerschermen bewust
   flex-wrap:wrap op deze rij, en daar duwde de extra 32px de avatar naar een
   eigen regel. Een scheiding die een afbreking veroorzaakt scheidt niets. */
html:not([data-skin="new"]) .topbar-actions .topbar-popover:first-of-type { position: relative; margin-left: 16px; padding-left: 16px; }
html:not([data-skin="new"]) .topbar-actions .topbar-popover:first-of-type::before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 26px; transform: translateY(-50%); background: var(--line); }
.period-control button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; }
.period-control button:hover { background: var(--green-light); }
.period-picker-wrap { display: grid; min-width: 184px; gap: 1px; padding: 4px 3px; }
.period-picker-caption { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.period-picker-fields { display: grid; grid-template-columns: minmax(96px,1fr) 72px; gap: 4px; align-items: center; }
.period-picker-fields input { width: 100%; height: 26px; border: 0; outline: 0; background: transparent; color: var(--navy-tekst); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.period-picker-fields input { cursor: text; }
.period-picker-fields input:focus-visible, .month-picker-trigger:focus-visible, .month-choice-panel button:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--mint); }
.month-picker { position: relative; display: block; min-width: 0; }
.period-control .month-picker-trigger, .customer-timesheet-upload-grid .month-picker-trigger { display: flex; width: 100%; min-height: 26px; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 7px; background: transparent; color: var(--navy-tekst); padding: 3px 6px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; text-align: left; }
/* Een langere maandnaam (december, september) mag nooit tegen de ▾-pijl
   aanschuiven -- gemeld met een screenshot. De naam krijgt een eigen element
   (zie syncPeriodControls) dat mag inkorten; de pijl krijgt gegarandeerde
   eigen ruimte die nooit wegvalt. */
.month-picker-trigger-label { overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
.month-picker-trigger::after { flex: 0 0 auto; color: var(--muted); content: "▾"; font-size: 10px; }
.period-control .month-picker-trigger:hover, .customer-timesheet-upload-grid .month-picker-trigger:hover { background: var(--green-light); }
.month-choice-panel { position: absolute; z-index: 80; top: calc(100% + 7px); left: 0; display: grid; width: 292px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 18px 42px rgba(13,27,56,.18); padding: 10px; }
.month-choice-panel[hidden] { display: none; }
/* In de bovenbalk staat de maandkiezer rechts, en het paneel van 292 pixels
   opende naar rechts vanaf zijn knop. Op een venster rond 768 pixels liep het
   daardoor 42 pixels buiten beeld: de laatste maanden waren niet aan te klikken.
   Gevonden door de monkey-verkenning op 21 sep (seed 94, op Medewerkers en op
   het dashboard). Rechts uitlijnen houdt het paneel binnen het scherm, en op
   een breed venster verandert er niets zichtbaars. Alleen voor deze plek: in
   het uploadraster staat dezelfde kiezer links, en daar zou rechts uitlijnen
   hem juist naar buiten duwen. */
.period-control .month-choice-panel { right: 0; left: auto; }
.period-control .month-choice-panel button, .customer-timesheet-upload-grid .month-choice-panel button { width: auto; height: auto; min-height: 34px; border: 1px solid transparent; border-radius: 8px; background: var(--surface-muted); color: var(--ink); padding: 7px 8px; cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; line-height: 1.2; }
.period-control .month-choice-panel button:hover, .customer-timesheet-upload-grid .month-choice-panel button:hover { border-color: var(--mint); background: var(--green-light); }
.period-control .month-choice-panel button.is-active, .customer-timesheet-upload-grid .month-choice-panel button.is-active { border-color: var(--mint-dark); background: var(--mint); color: var(--navy); }
html[data-theme="dark"] .period-control .month-picker-trigger,
html[data-theme="dark"] .customer-timesheet-upload-grid .month-picker-trigger { color: var(--ink); background: #0c1723; }
html[data-theme="dark"] .month-picker-trigger::after { color: var(--muted); }
html[data-theme="dark"] .month-choice-panel { background: #0c1723; }
html[data-theme="dark"] .period-control .month-choice-panel button,
html[data-theme="dark"] .customer-timesheet-upload-grid .month-choice-panel button { background: #132131; color: var(--ink); }
html[data-theme="dark"] .period-control .month-choice-panel button:hover,
html[data-theme="dark"] .customer-timesheet-upload-grid .month-choice-panel button:hover { background: #183148; }
.notification-button { position: relative; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }

.view { display: none; animation: viewIn .28s ease; }
.view.is-active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 32px;
  align-items: center;
  min-height: 220px;
  margin: 24px 0 16px;
  border-radius: 14px;
  background: linear-gradient(120deg, #0d1b38 0%, #102746 62%, #164b57 100%);
  color: #fff;
  padding: 30px 34px;
  box-shadow: 0 12px 30px rgba(13,27,56,.12);
}

.hero-card::after { display: none; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy h2 { max-width: 670px; margin: 9px 0 10px; font-family: var(--letter-kop); font-size: var(--kop-scherm); letter-spacing: 0; line-height: 1.12; }
.hero-copy p { max-width: 680px; margin: 0; color: #d2dce4; font-size: 14px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.button { min-height: 42px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; font-size: 13px; font-weight: 700; padding: 10px 17px; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-1px); }
}
/* Glanslaag 5 uit het designcontract, de indrukgloed. Waarden exact uit
   handoff/medewerker-wild.bron.txt: de hoofdknop krijgt daar
   `style-active="transform:scale(.965);box-shadow:0 2px 26px rgba(58,189,157,.6)"`,
   de tweede knop `transform:scale(.975)`. Dat vervangt hier de oude
   `translateY(0) + brightness(.97)` -- die deed bij een knop die niet zweeft
   zichtbaar niets, want er was geen verschuiving om terug te draaien.

   De gloed alleen op de primaire knop: de mintschaduw hoort bij de hoofdactie,
   en op elke knop zou hij niets meer aanwijzen. Bij minder beweging blijft de
   knop stilstaan en houdt alleen de lichte verdonkering over.

   Het krimpen geldt overal, de mintgloed alleen in Klassiek. In Modern is de
   primaire knop amber (`--path-amber`, met een amber schaduw in
   styles-new.css:257) -- een mintgloed eromheen zou daar een tweede accentkleur
   introduceren die nergens anders in die vormgeving voorkomt. Modern houdt dus
   het krimpen zonder gloed, tot daar een eigen waarde voor is vastgelegd. */
.button:active:not(:disabled) { transform: scale(.975); filter: brightness(.97); }
html:not([data-skin="new"]) .button-primary:active:not(:disabled) { transform: scale(.965); box-shadow: 0 2px 26px rgba(58,189,157,.6); }
@media (prefers-reduced-motion: reduce) {
  .button:active:not(:disabled),
  html:not([data-skin="new"]) .button-primary:active:not(:disabled) { transform: none; }
}
.button:disabled { cursor: not-allowed; filter: grayscale(.25); opacity: .48; transform: none; }
.button-primary { background: var(--mint); color: var(--navy); box-shadow: 0 8px 18px rgba(58,189,157,.2); }
.button-primary:hover { background: #48caa9; box-shadow: 0 11px 23px rgba(58,189,157,.25); }
.button-danger { border-color: #913f3f; background: var(--danger); color: #fff; box-shadow: 0 8px 18px rgba(163,75,75,.22); }
.button-danger:hover { background: #8d3d3d; box-shadow: 0 11px 23px rgba(163,75,75,.28); }
.button-ghost { border-color: var(--line); background: var(--vlak); color: var(--navy-tekst); }
.hero-card .button-ghost { border-color: rgba(255,255,255,.19); background: rgba(255,255,255,.08); color: #fff; }
.hero-card .button-ghost:hover { background: rgba(255,255,255,.13); }
.hero-task-math { position: relative; z-index: 1; display: grid; gap: 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.06); padding: 18px; }
.hero-task-math > span { color: #b9c7d4; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
/* "Werkvoorraad laden…" is veel langer dan de uiteindelijke waarde ("7 open
   acties") en woog op deze 26px-regel zwaar genoeg om te wrappen naar twee
   regels; zodra de echte telling binnenkwam, kromp het blok weer terug en
   verschoof alles eronder -- het scherm "sprong". Eén regel, met ellips
   erachter als een tekst toch een keer te lang is; de tekstinhoud (en dus wat
   een screenreader voorleest en wat een test met toHaveText() ziet) verandert
   niet, alleen hoe hij visueel afbreekt. */
/* "20 open acties" is de kop van de kaart, geen bijzin. Met extra tekstafstand
   liep die over de 26px-regel heen en stond er "20 open acti..." -- gevonden op
   CI (21 sep). Een kop die zijn eigen einde kwijtraakt is erger dan een kop die
   op twee regels staat, dus hij breekt nu af in plaats van afgekapt te worden. */
.hero-task-math > strong { display: block; font-family: var(--letter-kop); font-size: 26px; line-height: 1.15; }
.hero-task-math > div { display: grid; gap: 3px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; }
.hero-task-math small { color: #b9c7d4; font-size: 10px; }
.hero-task-math b { color: #fff; font-size: 12px; line-height: 1.4; }

.dashboard-next-action-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,auto); gap: 28px; align-items: center; margin-bottom: 16px; border: 1px solid var(--line); border-left: 4px solid var(--mint-dark); border-radius: 10px; background: var(--surface); padding: 18px 24px; box-shadow: 0 4px 14px rgba(13,27,56,.035); }
.dashboard-next-action-card.is-waiting { border-left-color: var(--warning); background: linear-gradient(135deg,var(--surface),var(--warning-bg)); }
.dashboard-next-action-card.is-complete { border-left-color: var(--mint-dark); background: linear-gradient(135deg,var(--surface),var(--green-light)); }
.dashboard-next-action-copy h3 { margin: 5px 0 7px; color: var(--navy-tekst); font-family: var(--letter-kop); font-size: var(--kop-sectie); }
.dashboard-next-action-copy p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--ink); font-size: 11px; }
/* De naam en de periode zijn flexkinderen en kromp daardoor niet: bij een lange
   omschrijving liep de naam tot 1161 pixels in een venster van 412 en duwde hij
   de hele kaart buiten beeld. Gevonden door de monkey-verkenning op 21 sep
   (seed 94, telefoon, dashboard). Met min-width: 0 mogen ze krimpen en breekt
   een lange tekst desnoods middenin een woord -- onleesbaar is nog altijd beter
   dan onzichtbaar. */
.dashboard-next-action-copy p > * { min-width: 0; overflow-wrap: anywhere; }
/* En de kolom zelf mag krimpen. Een rastercel heeft standaard `min-width: auto`
   en weigert daarmee smaller te worden dan zijn eigen min-content -- dus als het
   afbreken van dat lange woord om welke reden dan ook niet aanslaat, groeit de
   hele kaart buiten het scherm in plaats van dat de tekst afbreekt. Op 22 sep
   viel KLV-N-029 op CI om met een kaart van 628 pixels in een venster van 412,
   terwijl dezelfde meting hier 384 gaf; de oorzaak van dat verschil heb ik niet
   kunnen reproduceren, maar deze regel haalt weg dát het kan gebeuren. De p
   krijgt hetzelfde mee, want de bescherming stond alleen op zijn kinderen. */
.dashboard-next-action-copy { min-width: 0; }
.dashboard-next-action-copy p { min-width: 0; overflow-wrap: anywhere; }
.dashboard-next-action-copy p span::before { margin-right: 8px; color: var(--muted); content: "·"; }
.dashboard-next-action-copy > small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.dashboard-next-action-side { display: grid; justify-items: end; gap: 4px; text-align: right; }
.dashboard-next-action-side > strong { color: var(--navy-tekst); font-size: 12px; }
.dashboard-next-action-side > small { color: var(--muted); font-size: 11px; }
.dashboard-next-action-side > div { margin-top: 9px; }
.dashboard-next-action-side .small-button { min-height: 42px; border-color: var(--warning); background: var(--surface); color: var(--navy-tekst); font-size: 11px; padding: 10px 17px; }
.text-button { border: 0; background: transparent; color: var(--teal); cursor: pointer; font-size: 12px; font-weight: 800; padding: 7px; }
.text-button:hover { color: var(--mint-dark-tekst); }
.text-button.danger-text { color: var(--danger-tekst); }
.text-button.danger-text:hover { color: #7f3030; }

.progress-ring { --size: 70px; display: grid; flex: 0 0 auto; width: var(--size); height: var(--size); place-items: center; border-radius: 50%; background: conic-gradient(var(--mint) calc(var(--progress) * 1%), rgba(255,255,255,.11) 0); }
.progress-ring::before { grid-area: 1/1; width: 53px; height: 53px; border-radius: 50%; background: var(--navy-soft); content: ""; }
.progress-ring span { z-index: 1; grid-area: 1/1; font-size: 13px; font-weight: 800; }

/* Vier tegels naast elkaar zijn één object, geen vier losse. Ze delen daarom
   dezelfde binnenmaten en dezelfde volgorde van onderdelen: label boven, getal
   groot, toelichting eronder, actie onderaan. Het getal draagt de tegel, dus
   dat mag groter dan het was; het label wordt juist stiller. De tegel die
   aandacht vraagt onderscheidt zich door kleur, niet door een ander formaat --
   anders lijkt hij een andere soort. */
/* Vast op vier kolommen liet het medewerkerdashboard -- dat er vijf heeft --
   de laatste tegel alleen op een tweede rij staan, met drie lege plekken
   ernaast. Een raster dat zich naar het aantal voegt vult de rij: vier tegels
   bij beheer, vijf bij de medewerker, en het valt vanzelf netjes terug naarmate
   het scherm smaller wordt. */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { display: flex; min-height: 138px; flex-direction: column; border: 1px solid var(--line-zacht); border-radius: 12px; background: var(--surface); padding: 20px; box-shadow: var(--hoogte-kaart); }
.metric-card.attention { border-color: #efddc7; background: linear-gradient(150deg, #fff, #fff8ef); }
.metric-label { display: block; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.metric-card > strong { display: block; margin: 12px 0 8px; color: var(--navy-tekst); font-family: var(--letter-kop); font-size: 32px; letter-spacing: -.01em; line-height: 1; }
/* Kleur was #9aa4ae: 2,53:1 op de witte kaart, terwijl dit de noemer is van
   "1 / 4" -- zonder dat getal weet je niet waarvan die 1 er een is. Dat is
   inhoud en geen versiering, dus hij hoort de 4,5:1 van WCAG 1.4.3 te halen.
   Nu 4,75:1 en nog steeds duidelijk lichter dan het cijfer ervoor, dus de
   nadruk blijft waar hij hoort. Gevonden door de contrastverkenning (22 sep). */
.metric-card > strong small { color: #6a7480; font-size: 15px; }
/* margin-top:auto duwt de actie naar de onderrand, zodat de vier links op
   dezelfde hoogte staan ook als de toelichting erboven twee regels wordt.
   Daarvoor sprongen ze per tegel, en dan lijken het vier losse kaartjes. */
.metric-link { display: block; width: fit-content; margin-top: auto; padding-top: 13px; border: 0; background: transparent; color: var(--teal); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--teal) 35%, transparent); text-underline-offset: 4px; }
.metric-link:hover { text-decoration-color: currentColor; }
.metric-link:hover { color: var(--navy-tekst); }
.metric-note { color: var(--muted); font-size: 11px; }
.metric-note.positive { color: var(--mint-dark-tekst); }

.panel { border: 1px solid var(--line-zacht); border-radius: var(--radius); background: var(--surface); box-shadow: var(--hoogte-kaart); }
/* Zelfde sticky-topbar-overlap als .settings-card[id] hierboven: de knoppen
   "Bekijk alle ... acties" / "N bij Backoffice" / "N wachten op medewerkers"
   springen hierheen en verstopten de kop van dit paneel achter de topbalk. */
/* De sticky topbalk heeft geen vaste hoogte: hij groeit mee met de inhoud en
   met de letterweergave van het besturingssysteem. 104px was een momentopname
   op deze machine; op de Linux-runner meet dezelfde balk 106 en landde het
   paneel er 2,3 pixel achter (ADM-WR-H-022). app.js zet nu bij elke
   hertekening en bij venstergrootte de gemeten hoogte in --topbar-hoogte; de
   104px hieronder blijft als terugval voor het moment vóór de eerste meting. */
#admin-task-panel { scroll-margin-top: calc(var(--topbar-hoogte, 104px) + 10px); }
.workflow-panel { margin-bottom: 18px; padding: 24px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px 17px; }
.workflow-panel .panel-heading { padding: 0 0 24px; }
/* Toelichtingsregel direct onder een panelkop (Klanturenstaten op het
   Urenoverzicht). Deze klasse had helemaal geen opmaak: de alinea stond dus
   op de panelrand terwijl de kop erboven 24px inspringt, en liep daardoor
   zichtbaar links buiten de rest van de kaart. Gemeld met een screenshot van
   het Nieuw-dashboard ("teveel naar links"), maar het gold in beide skins. */
.open-periods-intro { max-width: 74ch; margin: -4px 0 16px; color: var(--muted); font-size: 12px; line-height: 1.6; padding: 0 24px; }
.workflow-overview { display: grid; grid-template-columns: minmax(230px,.38fr) minmax(0,1fr); gap: 24px; align-items: center; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-muted); padding: 18px; }
.workflow-progress-card { display: flex; width: 100%; align-items: center; gap: 14px; margin: 0; border-right: 1px solid var(--line); color: var(--navy-tekst); padding: 2px 20px 2px 0; }
.workflow-progress-card .progress-ring { --size: 54px; background: conic-gradient(var(--mint-dark) calc(var(--progress) * 1%), #dfe8e5 0); }
.workflow-progress-card .progress-ring::before { width: 41px; height: 41px; background: var(--surface); }
.workflow-progress-card strong, .workflow-progress-card small { display: block; }
.workflow-progress-card strong { font-size: 11px; }
.workflow-progress-card small { max-width: 320px; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.workflow-heading-meta { display: grid; justify-items: end; gap: 3px; text-align: right; }
.workflow-heading-meta strong { color: var(--navy-tekst); font-size: 12px; }
.workflow-heading-meta small { color: var(--muted); font-size: 10px; }
.panel-heading h3, .settings-card h3, .summary-card h3 { margin: 4px 0 0; font-family: var(--letter-kop); font-size: var(--kop-paneel); }
.updated-label { color: var(--muted); font-size: 10px; }
.workflow-track { display: flex; align-items: center; justify-content: space-between; }
.workflow-step { display: flex; min-width: 126px; align-items: center; gap: 11px; color: #99a4ae; }
.workflow-step > span { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--vlak); font-size: 11px; font-weight: 800; }
.workflow-step strong, .workflow-step small { display: block; }
.workflow-step strong { color: #73808c; font-size: 12px; }
.workflow-step small { margin-top: 3px; font-size: 9px; }
.workflow-step.is-done > span { border-color: var(--mint); background: var(--mint); color: var(--navy); }
.workflow-step.is-done strong, .workflow-step.is-current strong { color: var(--navy-tekst); }
.workflow-step.is-current > span { border-color: var(--mint); background: var(--green-light); color: var(--mint-dark-tekst); }
.workflow-line { flex: 1; height: 1px; min-width: 20px; background: var(--line); margin: 0 12px; }
.workflow-line.is-done { background: var(--mint); }

/* Op een eigen pagina i.p.v. tussen de dashboardpanelen.
   Dit paneel was ontworpen voor een smalle plek op het dashboard: vier fasen
   geperst in de rechterhelft, met een ring van 54px ernaast en 9px bijschriften.
   Sinds het zijn eigen scherm heeft (Procesvoortgang) staat diezelfde krappe
   opzet in een leeg veld -- klein én verloren tegelijk. Hier krijgt het de
   ruimte die er nu is: de meter boven de fasen in plaats van ernaast, en de
   vier fasen over de volle breedte met leesbare bijschriften. Alleen op dit
   scherm; op het dashboard blijft de compacte versie staan. */
#view-teamstatus .workflow-overview { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 26px; }
#view-teamstatus .workflow-progress-card { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 22px; }
#view-teamstatus .workflow-progress-card .progress-ring { --size: 74px; }
#view-teamstatus .workflow-progress-card .progress-ring::before { width: 57px; height: 57px; }
#view-teamstatus .workflow-progress-card strong { font-size: 15px; }
#view-teamstatus .workflow-progress-card small { max-width: 60ch; font-size: 11px; }
#view-teamstatus .workflow-step { min-width: 0; flex: 1 1 0; gap: 13px; }
#view-teamstatus .workflow-step > span { width: 42px; height: 42px; font-size: 13px; }
#view-teamstatus .workflow-step strong { font-size: 14px; }
#view-teamstatus .workflow-step small { font-size: 11px; }
@media (max-width: 900px) {
  #view-teamstatus .workflow-track { align-items: flex-start; flex-direction: column; gap: 14px; }
  #view-teamstatus .workflow-line { width: 1px; height: 18px; min-width: 0; flex: 0 0 auto; margin: 0 0 0 21px; }
}

.table-wrap { overflow-x: auto; }
/* Cijfers die onder elkaar staan horen ook onder elkaar uit te lijnen.
   Zonder tabular-nums is een "1" smaller dan een "8", waardoor urenkolommen,
   bedragen en tellers subtiel gaan dansen zodra het cijfer verandert. Dit
   raakt alleen cijferbreedtes, letters blijven ongemoeid -- daarom kan het
   ruim worden toegepast op alles waar getallen in kolommen of naast elkaar
   staan. */
.data-table,
.hours-table,
.metric-card > strong,
.hero-task-math,
.summary-card dd,
.employee-history,
.admin-task-row,
.progress-ring,
.hero-owner-badge,
.status-pill,
.nav-count,
.nav-count-group,
#hours-total,
#hours-visible-total,
#close-progress-value {
  font-variant-numeric: tabular-nums;
}

.data-table, .hours-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 14px 22px; border-top: 1px solid #edf1f2; text-align: left; white-space: nowrap; }
.data-table th { color: var(--tabelkop); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.data-table td { font-size: 12px; }
.data-table td strong, .data-table td small { display: block; }
.data-table td small { margin-top: 3px; color: var(--muted); font-size: 9px; }
/* Rijritme gelijk aan .hours-table: zonder hover voelde een rij in Facturen,
   Auditlog en Teamstatus dood aan vergeleken met het urenraster ernaast. */
.data-table tbody tr { transition: background .15s ease; }
.data-table tbody tr:hover { background: var(--vlak); }
.audit-log-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 14px 0; }
.audit-log-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
.audit-log-filters select { min-width: 200px; }
.audit-log-table-wrap { overflow-x: auto; }
.audit-log-table td.audit-log-actor small { color: var(--muted); }
.audit-log-paginering { padding-inline: 0; }
/* Telefoon (Remy-LeBeau 25 sep): geen tabel om zijwaarts door te scrollen, maar per
   gebeurtenis een korte kaart. Bovenaan wat er gebeurde met rechts het tijdstip,
   daaronder wie, en onderaan waarover. De kolomkoppen zijn dan overbodig. */
@media (max-width: 720px) {
  .audit-log-filters { gap: 10px; }
  .audit-log-filters label { flex: 1 1 140px; min-width: 0; }
  .audit-log-filters select { min-width: 0; width: 100%; }
  .audit-log-table-wrap { overflow-x: visible; }
  .audit-log-table, .audit-log-table tbody { display: block; width: 100%; }
  .audit-log-table thead { display: none; }
  .audit-log-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "wat tijd" "wie wie" "waarover waarover";
    column-gap: 12px;
    row-gap: 3px;
    padding: 11px 0;
    border-top: 1px solid var(--line-zacht, #edf1f2);
  }
  .audit-log-table tbody td { padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  .audit-log-table td.audit-log-wat { grid-area: wat; font-weight: 700; font-size: 13px; }
  .audit-log-table td.audit-log-tijd { grid-area: tijd; color: var(--muted); font-size: 11px; white-space: nowrap; text-align: right; }
  .audit-log-table td.audit-log-actor { grid-area: wie; font-size: 12px; }
  .audit-log-table td.audit-log-actor strong, .audit-log-table td.audit-log-actor small { display: inline; font-weight: 600; }
  .audit-log-table td.audit-log-actor small { margin: 0 0 0 6px; font-size: 11px; font-weight: 400; }
  .audit-log-table td.audit-log-waarover { grid-area: waarover; color: var(--muted); font-size: 11px; }
}
.server-log-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--vlak); margin: 14px 0; }
.server-log-list-line { padding: 7px 14px; border-bottom: 1px solid #edf1f2; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.5; color: var(--navy-tekst); white-space: pre-wrap; word-break: break-word; }
.server-log-list-line:last-child { border-bottom: none; }
.server-log-actions { display: flex; gap: 10px; }
.person-cell { display: flex; align-items: center; gap: 10px; }
.mini-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--green-light); color: var(--teal); font-size: 10px; font-weight: 800; }

.status-pill { display: inline-flex; min-height: 25px; align-items: center; border-radius: 999px; font-size: 9px; font-weight: 800; padding: 4px 9px; }
/* .status-success (bv. "Extern bevestigd") had nooit een regel: de pil
   toonde daardoor geen kleur, terwijl het semantisch dezelfde afgeronde
   status is als goedgekeurd/verzonden. */
.status-approved, .status-sent, .status-success { background: var(--green-light); color: var(--mint-dark-tekst); }
.status-submitted, .status-ready { background: var(--info-bg); color: var(--info-tekst); }
/* Vaste lichte pil met grijze tekst: bleef wit in de donkere modus, en 3,9:1 is
   ook bij daglicht te weinig voor een statuslabel. */
.status-concept { background: var(--vlak-zacht); color: var(--muted); }
.status-warning { background: var(--warning-bg); color: var(--warning-tekst); }
.status-done { background: rgba(58,189,157,.16); color: var(--mint-tekst); }
.status-pending { background: var(--surface-muted); color: var(--muted); }

.view-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin: 35px 0 22px; }
.view-heading h2 { margin: 5px 0 7px; font-family: var(--letter-kop); font-size: var(--kop-scherm); letter-spacing: -.025em; }
.view-heading p { max-width: 680px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.view-loading { margin: 4px 0 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--vlak-zacht); color: var(--muted); font-size: 13px; font-weight: 600; }
.heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.approval-heading-actions { align-items: center; }
.approval-period-filters { max-width: min(650px, 62vw); flex-wrap: wrap; justify-content: flex-end; }
.approval-period-filters button { white-space: nowrap; }
.dashboard-team-actions { align-items: center; }
.dashboard-team-panel .panel-heading { align-items: flex-end; padding-bottom: 14px; }
.dashboard-team-panel .panel-heading p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.dashboard-team-table-wrap { padding: 0 16px 16px; }
.dashboard-team-table { border-collapse: separate; border-spacing: 0 8px; }
.dashboard-team-table th { border: 0; padding-block: 8px; }
.dashboard-team-table td { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-muted); padding-block: 15px; }
.dashboard-team-table td:first-child { border-left: 1px solid var(--line); border-radius: 12px 0 0 12px; }
.dashboard-team-table td:last-child { border-right: 1px solid var(--line); border-radius: 0 12px 12px 0; text-align: right; }
.dashboard-team-table .person-cell strong { color: var(--navy-tekst); font-size: 12px; }
.dashboard-team-table .dashboard-team-row.status-submitted td { border-color: #cbdcf0; background: var(--vlak-zacht); }
/* Deze twee statusrijen raakten hun markering kwijt in "Dekkingsronde 3: dode
   CSS opgeruimd" (093ec97d). Daar is de declaratie van de .status-draft-regel
   verwijderd, maar de erboven staande, met een komma verbonden selector voor
   .status-correction bleef staan -- die plakte daardoor aan de volgende regel
   (.dashboard-team-action { min-width: 116px }). Twee gevolgen: correctie- en
   conceptrijen waren in de teamtabel niet meer van een gewone rij te
   onderscheiden, en elke cel van een correctierij kreeg ten onrechte de
   min-width die alleen voor de actiekolom bedoeld was. .status-draft is
   bovendien niet dood: app.js bouwt de klasse dynamisch op uit
   record.timesheetStatus, en "draft" is juist de meest voorkomende stand.
   Randkleur nu via --warning i.p.v. de vaste #edc58f, zodat de rij ook in de
   donkere modus meekleurt (de achtergrond stond al op een token). */
.dashboard-team-table .dashboard-team-row.status-correction td,
.dashboard-team-table .dashboard-team-row.status-draft td { border-color: var(--warning-rand); background: var(--vlak-warm); }
.dashboard-team-action { min-width: 116px; }

.correction-banner { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; align-items: start; margin: 0 0 18px; border: 1px solid var(--warning-rand); border-radius: 16px; background: var(--warning-bg); color: var(--ink); padding: 17px 19px; }
.correction-banner.dashboard-correction { grid-template-columns: auto minmax(0,1fr) auto; align-items: center; }
.correction-banner-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--warning); color: var(--navy); font-size: 16px; font-weight: 900; }
.correction-banner strong, .correction-banner p, .correction-banner small { display: block; }
.correction-banner strong { color: var(--warning-tekst); font-size: 12px; }
.correction-banner p { margin: 5px 0 4px; font-size: 12px; line-height: 1.5; white-space: pre-line; }
.correction-banner small { color: var(--muted); font-size: 9px; }

.timesheet-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.timesheet-layout > * { min-width: 0; }
.timesheet-panel { overflow: hidden; }
.assignment-bar { display: grid; grid-template-columns: 1.4fr .6fr .7fr; gap: 18px; background: var(--navy); color: #fff; padding: 20px 24px; }
.assignment-bar small, .assignment-bar strong { display: block; }
.assignment-bar small { color: #9fb0c0; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.assignment-bar strong { margin-top: 5px; font-size: 12px; }
.hours-view-toolbar { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(320px,1.6fr) auto; gap: 18px; align-items: center; border-bottom: 1px solid var(--line); background: var(--vlak); padding: 14px 24px; }
.hours-view-toolbar > div:first-child strong, .hours-view-toolbar > div:first-child small { display: block; }
.hours-view-toolbar > div:first-child strong { color: var(--navy-tekst); font-size: 11px; }
.hours-view-toolbar > div:first-child small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.hours-week-filter-wrap { min-width: 0; }
.hours-week-filter { width: fit-content; }
.hours-week-scroll-hint { display: none; }
.hours-visible-total { text-align: right; }
/* De ontbrekende werkdagen bij "Hele maand". Amber, want dit is een openstaande
   taak en geen fout -- dezelfde kleurtaal als de waarschuwingspillen elders.
   Bij nul ontbrekende dagen wordt hetzelfde blok mint met één regel, zodat de
   plek op het scherm niet verspringt zodra de laatste dag is ingevuld. */
.hours-missing-days { grid-column: 1 / -1; margin-top: 14px; border: 1px solid var(--warning-rand); border-radius: 14px; background: var(--warning-bg); padding: 12px 14px; }
.hours-missing-days.is-compleet { border-color: var(--mint); background: var(--green-light); }
#hours-missing-days-title { display: block; color: var(--warning-tekst); font-size: 11.5px; font-weight: 800; }
.hours-missing-days.is-compleet #hours-missing-days-title { color: var(--teal); }
.hours-missing-days-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.hours-missing-days-chips:empty { display: none; }
.hours-missing-day { min-height: 32px; border: 1px solid var(--warning-rand); border-radius: 999px; background: var(--vlak); color: var(--warning-tekst); cursor: pointer; font-size: 11.5px; font-weight: 700; padding: 0 12px; transition: background .16s ease, border-color .16s ease; }
.hours-missing-day:hover { border-color: var(--warning-tekst); background: var(--warning-bg); }
#hours-missing-days-rest { display: block; margin-top: 8px; color: var(--warning-tekst); font-size: 11px; }
.hours-visible-total span, .hours-visible-total strong { display: block; }
.hours-visible-total span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.hours-visible-total strong { margin-top: 3px; color: var(--navy-tekst); font-size: 13px; }
.hours-table th, .hours-table td { min-width: 88px; border-bottom: 1px solid #edf1f2; padding: 11px 10px; text-align: center; vertical-align: middle; }
.hours-table th { background: var(--vlak); color: var(--tabelkop); font-size: 10px; }
.hours-table tbody tr { transition: background .15s ease; }
.hours-table tbody tr:hover { background: var(--vlak); }
.hours-table td:first-child { min-width: 100px; color: var(--teal); font-size: 11px; font-weight: 800; }
.hours-day-entry { display: grid; justify-items: center; gap: 7px; width: fit-content; margin: 0 auto; }
/* Elke dag droeg een mintgroene pil. Vijfentwintig accenten in één raster
   betekent dat het accent niets meer aanwijst: het oog heeft geen plek om
   te landen. De datum is een bijschrift bij het invoerveld, niet een status,
   dus hij wordt een rustig label. Het groen komt daarmee vrij voor wat het
   wél moet zeggen -- focus, vandaag, klaar. */
.hours-table .date-number { display: inline-flex; min-width: 46px; min-height: 19px; align-items: center; justify-content: center; border-radius: 999px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .03em; text-transform: lowercase; }
.hours-table input { width: 64px; height: 42px; border: 1px solid var(--line); border-radius: 11px; background: var(--vlak); color: var(--navy-tekst); font-size: 14px; font-weight: 700; text-align: center; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.hours-table input:hover { border-color: #b9d9d1; }
.hours-table input:focus { outline: 0; border-color: var(--mint); box-shadow: 0 0 0 4px rgba(58,189,157,.14); transform: translateY(-1px); }
/* Testfeedback: 0/8/9-snelkeuze bestond alleen in Nieuw se bento-kaartjes;
   Klassiek had helemaal geen snelkeuze. Compact onder het uurveld, altijd
   zichtbaar per dag (net als in Nieuw, na dezelfde feedback daar). */
.hours-day-presets { display: flex; gap: 3px; width: 64px; }
.hours-day-presets button { flex: 1 1 0; min-height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--vlak); color: var(--navy-tekst); font-size: 10px; font-weight: 700; cursor: pointer; }
.hours-day-presets button:hover { border-color: var(--mint); background: var(--green-light); color: var(--teal); }
.hours-day-presets button:disabled { cursor: default; opacity: .5; }
.hours-table .outside-month { background: var(--vlak); color: var(--muted); }
.outside-month-mark { display: grid; width: 64px; height: 42px; place-items: center; margin: 26px auto 0; border-radius: 11px; background: var(--vlak-zacht); color: var(--muted); }
/* Weektotalen staan onder elkaar en horen dus op de komma uit te lijnen;
   met evenredige cijfers deden ze dat niet. */
.hours-table .week-total { color: var(--navy-tekst); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hours-review-grid .workday-cell { display: table-cell; }
.hours-review-grid .workday-cell .date-number { display: block; margin: 0 auto 7px; width: fit-content; }
.hours-review-grid .workday-cell strong { display: block; color: var(--navy-tekst); font-size: 14px; }
.hours-table tfoot th { border: 0; background: var(--green-light); color: var(--teal); text-align: right; }
.hours-table tfoot th:last-child { text-align: center; }
.timesheet-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; }
.timesheet-actions p { margin: 0; }
.timesheet-actions strong, .timesheet-actions small { display: block; }
.timesheet-actions strong { font-size: 12px; }
.timesheet-actions small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.timesheet-action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.summary-card { align-self: start; padding: 24px; }
.summary-card dl { margin: 22px 0; }
.summary-card dl div { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid #edf1f2; padding: 12px 0; }
.summary-card dt { color: var(--muted); font-size: 11px; }
.summary-card dd { margin: 0; color: var(--navy-tekst); font-size: 11px; font-weight: 800; }
.summary-note { border-radius: 13px; background: var(--green-light); padding: 16px; }
.summary-note strong { color: var(--teal); font-size: 11px; }
.summary-note p { margin: 6px 0 0; color: #517178; font-size: 10px; line-height: 1.55; }

.approval-list { display: grid; gap: 20px; }
.approval-period-group { display: grid; gap: 11px; }
.approval-period-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; padding: 0 4px; }
.approval-period-heading h3 { margin: 4px 0 0; color: var(--navy-tekst); font-family: var(--letter-kop); font-size: var(--kop-sectie); }
.approval-card { display: grid; grid-template-columns: 1.2fr .8fr .75fr auto; gap: 22px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--vlak); padding: 20px 22px; box-shadow: 0 7px 22px rgba(13,27,56,.03); }
.approval-person { display: flex; align-items: center; gap: 12px; }
.approval-person .mini-avatar { width: 42px; height: 42px; }
.approval-person strong, .approval-person small, .approval-data strong, .approval-data small { display: block; }
.approval-person strong, .approval-data strong { font-size: 12px; }
.approval-person small, .approval-data small { margin-top: 4px; color: var(--muted); font-size: 10px; }
/* Goedkeurkaart. Besluit van Gio (14 sep), voor de telefoon: Goedkeuren
   bovenaan, mint met donkere tekst; Correctie vragen eronder met alleen een
   rand; 10px ertussen; volle breedte; minimaal 44px. Dat staat in het
   590px-blok verderop.

   De volgorde zit in de DOM, niet in CSS `order`: `order` verplaatst alleen
   het beeld en liet Tab op desktop van rechts naar links lopen, een
   toegankelijkheidsfout (DESIGN-BESLUITEN "Vier vragen uit de bouw").
   ordenGoedkeurActies() in app.js zet de knoppen per breedte in de volgorde
   die je ziet. Ook niet met flex-direction: row-reverse -- dat is hetzelfde
   probleem, en justify-content: flex-end pakt dan links. */
.approval-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.empty-state { border: 1px dashed #b9d9d1; border-radius: 20px; background: var(--vlak-zacht); padding: 70px 25px; text-align: center; }
.empty-check { display: grid; width: 48px; height: 48px; place-items: center; margin: 0 auto 15px; border-radius: 50%; background: var(--mint); color: var(--navy); font-weight: 900; }
.empty-state h3 { margin: 0; font-family: var(--letter-kop); }
.empty-state p { color: var(--muted); font-size: 12px; }
.approval-empty-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.invoice-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 22px; }
.invoice-filter-groups { display: grid; gap: 8px; min-width: 0; }
.invoice-document-filter button { font-size: 9px; }
.invoice-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.invoice-search input { width: min(320px, 40vw); min-height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--vlak); color: var(--navy-tekst); padding: 9px 12px; font: inherit; font-size: 11px; }
.invoice-search input:focus { border-color: var(--mint-dark); outline: 3px solid rgba(58,189,157,.16); }
.invoice-page-size { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.invoice-page-size select { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--vlak); color: var(--navy-tekst); padding: 7px 28px 7px 10px; font: inherit; }
.invoice-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); }
.invoice-document-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.document-availability-badge { min-height: 30px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; padding: 5px 9px; font: inherit; font-size: 9px; font-weight: 900; transition: transform .15s ease, box-shadow .15s ease; }
.document-availability-badge:hover { box-shadow: 0 5px 12px rgba(13,27,56,.09); transform: translateY(-1px); }
.document-availability-badge:focus-visible { outline: 3px solid rgba(58,189,157,.25); outline-offset: 2px; }
.document-availability-badge.is-present { border-color: #bce7dc; background: var(--green-light); color: var(--teal); }
.document-availability-badge.is-missing { border-color: #efc98d; background: var(--warning-bg); color: var(--warning-tekst); }

.modal-summary > .invoice-document-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; color: inherit; }
.invoice-document-card { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--vlak); padding: 15px; }
.invoice-document-card.is-present { border-color: #bce7dc; }
.invoice-document-card.is-missing { border-color: #efc98d; }
.invoice-document-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 11px; }
.invoice-document-card > header strong { font-size: 13px; }
.document-status-pill { border: 1px solid transparent; border-radius: 999px; padding: 4px 8px; font-size: 9px; font-weight: 900; }
.document-status-pill.is-present { border-color: #bce7dc; background: var(--green-light); color: var(--teal); }
.document-status-pill.is-missing { border-color: #efc98d; background: var(--warning-bg); color: var(--warning-tekst); }
.invoice-document-card-body { display: grid; gap: 13px; padding-top: 12px; }
.invoice-document-links { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.invoice-document-metadata { display: grid; gap: 7px; margin: 0; border-top: 1px solid var(--line); padding-top: 11px; }
.invoice-document-metadata > div { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 10px; }
.invoice-document-metadata dt { color: var(--muted); font-size: 9px; font-weight: 800; }
.invoice-document-metadata dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--navy-tekst); font-size: 10px; font-weight: 800; }
.invoice-document-missing-note { min-height: 32px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
/* "Extern bevestigd" / "Rechtstreeks gemaild" is geen fout (dus niet rood), maar
   mag ook niet wegvallen als grijze notitie -- de beheerder moet in één oogopslag
   zien dat er bewust geen bestand in de app staat. */
.document-note-flagged { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; border: 1px solid var(--line); border-left: 4px solid var(--warning); border-radius: 12px; background: color-mix(in srgb, var(--warning-bg) 55%, var(--surface)); padding: 11px 13px; }
.document-note-flag { flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent); border-radius: 999px; background: var(--warning-bg); color: var(--warning-tekst); font-size: 9px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; }
.document-note-flagged p { margin: 0; color: var(--warning-tekst); font-size: 10.5px; line-height: 1.5; }
.document-note-actor { display: inline-block; margin-top: 3px; opacity: .85; font-weight: 700; }
.invoice-document-restore { display: grid; gap: 7px; }
.small-button.document-restore-action { width: 100%; min-height: 44px; border: 2px solid var(--warning); border-left-width: 6px; background: var(--warning-bg); color: var(--warning-tekst); font-size: 11px; font-weight: 900; box-shadow: 0 6px 16px rgba(187,118,35,.18); }
.small-button.document-restore-action::before { content: "\21B6"; margin-right: 7px; font-size: 15px; line-height: 0; }
.small-button.document-restore-action:hover { border-color: var(--danger); background: color-mix(in srgb,var(--warning-bg) 68%,var(--vlak)); color: var(--danger); box-shadow: 0 8px 20px rgba(177,67,67,.2); }
.small-button.document-restore-action:focus-visible { outline: 3px solid color-mix(in srgb,var(--warning) 30%,transparent); outline-offset: 2px; }
.invoice-document-restore small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.external-timesheet-warning { display: grid; gap: 7px; border: 1px solid color-mix(in srgb,var(--danger) 48%,var(--line)); border-left: 4px solid var(--danger); border-radius: 11px; background: color-mix(in srgb,var(--danger) 8%,var(--vlak)); color: var(--navy-tekst); padding: 12px 13px; }
.external-timesheet-warning strong { color: var(--danger-tekst); }
.external-timesheet-warning p { margin: 0; color: var(--muted); line-height: 1.55; }
.external-timesheet-warning ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; color: var(--navy-tekst); line-height: 1.5; }
.invoice-document-upload { display: grid; gap: 7px; margin: 0; }
.invoice-document-upload input[type="file"], .invoice-document-upload input[type="text"] { width: 100%; min-width: 0; }
.invoice-document-upload small { color: var(--muted); line-height: 1.45; }
.invoice-month-overview { display: grid; gap: 16px; margin-bottom: 17px; border: 1px solid var(--line); border-left: 4px solid var(--mint); border-radius: 15px; background: var(--vlak); padding: 16px 18px; box-shadow: 0 5px 18px rgba(13,27,56,.025); }
.invoice-month-overview[hidden] { display: none; }
.invoice-month-overview[data-state="blocked"] { border-left-color: var(--warning); background: linear-gradient(135deg,#fff,#fffaf4); }
.invoice-month-overview[data-state="ready"] { border-left-color: var(--mint); background: linear-gradient(135deg,#fff,#f7fffc); }
/* De uitleg links stond op .7fr tegenover 1.3fr voor de maandkaarten rechts,
   en kreeg 10px mee. In die smalle kolom brak elke zin over drie regels
   terwijl er rechts ruimte over was. De verhouding is nu gelijk en de tekst
   krijgt een leesbare maat -- het is de enige plek op dit scherm waar wordt
   uitgelegd hoe je verder komt. */
.invoice-month-overview-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,1fr); gap: 24px; align-items: center; }
.invoice-month-overview-copy h3 { margin: 5px 0 0; color: var(--navy-tekst); font-family: var(--letter-kop); font-size: var(--kop-paneel); }
.invoice-month-overview-copy p { max-width: 58ch; margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.invoice-month-overview-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 8px; }
.invoice-month-overview-item { display: grid; min-height: 62px; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.82); color: var(--navy-tekst); cursor: pointer; padding: 10px 12px; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.invoice-month-overview-item:hover, .invoice-month-overview-item.is-current { border-color: #9edccb; background: var(--green-light); box-shadow: 0 8px 18px rgba(13,27,56,.07); transform: translateY(-1px); }
.invoice-month-overview[data-state="blocked"] .invoice-month-overview-item.is-blocked,
.invoice-month-overview-item.is-blocked.is-current { border-color: #f0d2a8; background: var(--warning-bg); }
.invoice-month-overview-item strong, .invoice-month-overview-item small { display: block; }
.invoice-month-overview-item strong { font-size: 11px; white-space: normal; }
.invoice-month-overview-item small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.invoice-month-overview-action { display: grid; gap: 4px; justify-items: end; }
.invoice-month-overview-action small { border: 1px solid var(--line); border-radius: 999px; background: var(--vlak); color: var(--navy-tekst); font-size: 9px; font-weight: 900; padding: 5px 8px; text-decoration: none; }
.invoice-month-overview-item.is-detail-open .invoice-month-overview-action small { border-color: var(--mint-dark); background: var(--mint); }
.invoice-month-overview-item.is-blocked .invoice-month-overview-action small { border-color: #f0d2a8; }
.invoice-month-overview-empty { border: 1px dashed var(--line); border-radius: 12px; background: rgba(255,255,255,.65); color: var(--muted); font-size: 10px; font-weight: 800; padding: 13px; text-align: center; }
.month-batch-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,260px); gap: 18px 26px; align-items: center; margin-bottom: 17px; border: 1px solid var(--line); border-left: 4px solid var(--mint-dark); border-radius: 15px; background: var(--surface); padding: 19px 21px; box-shadow: 0 5px 18px rgba(13,27,56,.025); }
.month-batch-card[hidden], .invoice-status-guide[hidden], #invoice-detail-panel[hidden] { display: none; }
.invoice-month-overview .month-batch-card { margin-bottom: 0; box-shadow: none; }
.month-batch-card[data-state="blocked"] { border-left-color: var(--warning); background: linear-gradient(135deg, #fff, #fffaf4); }
.month-batch-card[data-state="ready"] { border-left-color: var(--mint); background: linear-gradient(135deg, #fff, #f7fffc); }
.month-batch-card[data-state="controlled"] { border-left-color: var(--mint-dark); }
.month-batch-card[data-state="empty"] { border-left-color: var(--line); }
.month-batch-summary { min-width: 0; }
.month-batch-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 12px; margin-top: 5px; }
.month-batch-title-row h3 { margin: 0; color: var(--navy-tekst); font-family: var(--letter-kop); font-size: var(--kop-paneel); }
.month-batch-summary > p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.month-batch-progress { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 11px; align-items: center; min-width: 0; }
.month-batch-progress::before { grid-area: 1/1; height: 9px; border-radius: 999px; background: #e5ecea; content: ""; }
.month-batch-progress > span { z-index: 1; grid-area: 1/1; width: 0; max-width: 100%; height: 9px; border-radius: 999px; background: var(--mint-dark); transition: width .2s ease; }
.month-batch-card[data-state="blocked"] .month-batch-progress > span { background: var(--warning); }
.month-batch-progress > strong { color: var(--navy-tekst); font-size: 11px; }
.month-batch-blockers { display: grid; grid-column: 1/-1; gap: 8px; border-top: 1px solid var(--line); padding-top: 13px; }
.month-batch-blockers[hidden] { display: none; }
/* De drie kolommen hadden een harde ondergrens (170 + 150 + de knop van 126),
   en die past samen met de marges niet meer in een venster rond 820 pixels: de
   kaart stak er dan 8 pixels uit. Gevonden door de monkey-verkenning, seed 44
   (Facturen, dialoog open). Onder 900 pixels staan de drie delen nu onder
   elkaar -- dat leest daar toch prettiger dan drie geknepen kolommen. */
.month-batch-blocker { display: grid; grid-template-columns: minmax(170px,1fr) minmax(150px,.75fr) auto; gap: 14px; align-items: center; border-radius: 12px; background: rgba(255,255,255,.78); padding: 11px 12px; }
@media (max-width: 900px) {
  .month-batch-blocker { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .month-batch-blocker .small-button { justify-self: start; }
}
.month-batch-blocker-copy, .month-batch-blocker-owner { min-width: 0; }
.month-batch-blocker-copy strong, .month-batch-blocker-copy small, .month-batch-blocker-owner strong, .month-batch-blocker-owner small { display: block; }
.month-batch-blocker-copy strong, .month-batch-blocker-owner strong { overflow: hidden; color: var(--navy-tekst); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.month-batch-blocker-copy small, .month-batch-blocker-owner small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.month-batch-blocker .small-button { min-width: 126px; }
.invoice-status-guide { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 17px; }
/* Waren <div>'s; nu knoppen die de factuurlijst eronder filteren. Vandaar de
   font/text-align/width-reset: zonder die drie regels erft een knop de
   browserstijl en staat de tekst gecentreerd in een te smal vlak. */
.invoice-status-guide > button { display: flex; width: 100%; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--vlak); cursor: pointer; font: inherit; padding: 14px 16px; text-align: left; box-shadow: 0 5px 18px rgba(13,27,56,.025); transition: border-color .15s ease, box-shadow .15s ease; }
.invoice-status-guide > button:hover { border-color: var(--mint-dark); }
.invoice-status-guide > button:focus-visible { outline: 3px solid rgba(58,189,157,.32); outline-offset: 2px; }
.invoice-status-guide > button[aria-pressed="true"] { border-color: var(--mint-dark); box-shadow: 0 0 0 2px rgba(58,189,157,.28), 0 6px 20px rgba(58,189,157,.12); }
.invoice-status-guide > button.is-current { border-color: #9edccb; background: var(--green-light); box-shadow: 0 6px 20px rgba(58,189,157,.09); }
.invoice-status-guide > button.is-blocked { border-color: #f0d2a8; background: var(--warning-bg); }
.invoice-status-guide > button > span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px; background: var(--green-light); color: var(--teal); font-size: 11px; font-weight: 900; }
.invoice-status-guide > button.is-current > span { background: var(--mint); color: var(--navy); }
.invoice-status-guide > button.is-blocked > span { background: var(--warning); color: var(--navy); }
.invoice-status-guide p, .invoice-status-guide strong, .invoice-status-guide small { display: block; margin: 0; }
.invoice-status-guide strong { color: var(--navy-tekst); font-size: 11px; }
.invoice-status-guide small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.mail-route-guide { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 17px; }
.mail-route-guide article { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 15px 16px; box-shadow: 0 5px 18px rgba(13,27,56,.025); }
.mail-route-guide article > span { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 9px; background: var(--green-light); color: var(--teal); font-size: 11px; font-weight: 900; }
.mail-route-guide strong, .mail-route-guide small { display: block; }
.mail-route-guide strong { color: var(--navy-tekst); font-size: 11px; }
.mail-route-guide small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
/* Testfeedback: alleen .hours-week-filter kon zelf schuiven bij te veel
   knoppen; de andere .segmented-control-rijen (Goedkeuringen, Facturen,
   Mededelingen, Medewerkers) hadden geen overflow-x en liepen dus gewoon uit
   hun bak bij genoeg knoppen op een smal scherm. Nu generiek op de basis-
   klasse, plus dezelfde altijd-zichtbare schuifaanduiding (zie
   refreshSegmentedControlScrollIndicators() in app.js) i.p.v. alleen de
   overlay-scrollbar die op mobiel onzichtbaar blijft tot je 'm aanraakt.

   Herzien 11 sep: er stonden inmiddels drie signalen boven elkaar dat deze
   rij kan schuiven -- de tekst "Schuif voor andere weken", een eigen mint
   balk met duim, en een mint gekleurde native scrollbar. Elk was los
   toegevoegd zonder de vorige weg te halen, en samen lazen ze als een
   voortgangsbalk die vol staat in plaats van als "hier valt meer te zien"
   (de duim vult bijna de hele breedte zodra er maar net iets overloopt).
   Nu één signaal: de rij vervaagt aan de kant waar nog inhoud zit, gestuurd
   door data-schuifrand. De native scrollbar blijft staan als sleepgreep voor
   de muis, maar neutraal en dun i.p.v. mint met pijlknoppen. */
.employee-filter-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.employee-filter-toolbar .invoice-search { flex: 0 1 auto; }
/* Op een telefoon is 38px (de .invoice-search-standaard) onder de 44px
   tikdoel-ondergrens die de rest van deze pagina wel aanhoudt (zie de
   toelichting hierboven bij .approval-person). MOB-H-008 meet dit hard. */
#employee-search { min-height: 44px; }
.segmented-control { display: flex; gap: 4px; border-radius: 10px; background: #f0f4f4; padding: 3px; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: rgba(13, 27, 56, .26) transparent; scrollbar-width: thin; }
.segmented-control::-webkit-scrollbar { height: 5px; }
.segmented-control::-webkit-scrollbar-button { display: none; }
.segmented-control::-webkit-scrollbar-track { background: transparent; }
.segmented-control::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(13, 27, 56, .22); }
.segmented-control:hover::-webkit-scrollbar-thumb { background: rgba(13, 27, 56, .34); }
/* De maskerrand hoort bij de kant waar inhoud buiten beeld staat, dus hij
   verdwijnt vanzelf zodra je het einde bereikt -- dat is precies het verschil
   met een balk, die altijd blijft staan en niets meer zegt. */
.segmented-control[data-schuifrand="rechts"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%); }
.segmented-control[data-schuifrand="links"] { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px); mask-image: linear-gradient(to right, transparent 0, #000 34px); }
.segmented-control[data-schuifrand="beide"] { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); }
.segmented-control button { flex: 0 0 auto; white-space: nowrap; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; padding: 7px 12px; }
.segmented-control button.is-active { background: var(--vlak); color: var(--navy-tekst); box-shadow: 0 3px 9px rgba(13,27,56,.08); }
.invoice-action { display: flex; align-items: center; gap: 6px; }
.invoice-action-note { color: var(--muted); font-size: 9px; font-weight: 700; }
.small-button { border: 1px solid var(--line); border-radius: 9px; background: var(--vlak); color: var(--teal); cursor: pointer; font-size: 10px; font-weight: 800; padding: 7px 10px; }
.small-button:hover { border-color: var(--mint); background: var(--green-light); }
.small-button.send { border-color: var(--mint); background: var(--mint); color: var(--navy); }

.employee-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.employee-card { border: 1px solid var(--line-zacht); border-radius: var(--radius); background: var(--vlak); padding: 22px; box-shadow: var(--hoogte-kaart); }
.employee-card-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.employee-card-head .mini-avatar { width: 45px; height: 45px; }
/* min-width: 0 op allebei de niveaus. Zonder dat staat een flex-kind op
   min-width: auto -- het krimpt dus niet onder zijn inhoud, en de naamregel met
   het volledige e-mailadres duwt de statuspil rechts eruit. Op 360px viel de pil
   daardoor buiten de rechterrand (367px in Klassiek, 371px in Nieuw), en onder
   720px staat html,body op overflow-x: hidden -- je kunt er dus niet naartoe
   vegen, hij is weg. [MOB-H-030] ving dat op de CI-runner; lokaal bleef hij
   groen omdat Windows-fonts smaller renderen dan die van Linux. Dat verschil is
   precies waarom hier speling hoort en geen preciezere breedte: hetzelfde blok
   loopt anders om op een Android-systeemfont of bij vergrote tekst. */
.employee-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.employee-identity > span:last-child { min-width: 0; }
.employee-identity strong, .employee-identity small { display: block; overflow-wrap: anywhere; }
.employee-identity strong { font-size: 13px; }
.employee-identity small { margin-top: 4px; color: var(--muted); font-size: 10px; }
/* Klant, uren per week en broker stonden in grijze afgeronde vakjes en
   leken daardoor invulvelden -- ze zijn alleen-lezen; aanpassen gaat via
   "Gegevens aanpassen". Een vorm die iets belooft wat hij niet doet, kost
   iedere lezer een klikje om erachter te komen. Nu wat het is: drie
   label/waarde-paren, gescheiden door een haarlijn boven de rij. De waarde
   mag daardoor ook groter dan het label, wat eerst omgekeerd aanvoelde
   (label 9px, waarde 10px). */
.employee-details { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px 18px; margin-top: 18px; border-top: 1px solid var(--line-zacht); padding-top: 16px; }
.employee-details div { min-width: 0; }
.employee-details small, .employee-details strong { display: block; }
.employee-details small { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
/* Klant, makelaar en tarief van een medewerker. Die stonden op nowrap met
   puntjes in drie kolommen die elk een derde van de kaart krijgen, en met de
   tekstafstand die WCAG 1.4.12 vraagt past "Belastingdienst" daar niet meer in
   -- gevonden op CI (22 sep). Een klantnaam die halverwege ophoudt is geen
   detail: daar herken je de medewerker aan. Ze breken nu af op een tweede regel
   in plaats van afgekapt te worden. */
.employee-details strong { margin-top: 4px; color: var(--navy-tekst); font-size: 13px; overflow-wrap: anywhere; }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 17px; }
/* Deze knoppen springen naar een sectie verderop op de pagina; ze schakelen
   niets om. In een witte kaart met rand en slagschaduw lazen ze als tabbladen,
   en een tabrij zonder actieve tab is een belofte die niet wordt ingelost --
   je blijft zoeken waar je bent. Zonder die kaart is het wat het is: een rij
   verwijzingen boven de inhoud. Het pijltje maakt de richting expliciet. */
.settings-section-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 20px; border: 0; border-bottom: 1px solid var(--line-zacht); border-radius: 0; background: transparent; box-shadow: none; padding: 0 2px 14px; }
.settings-section-nav button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; padding: 7px 12px; font-size: 10px; font-weight: 800; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.settings-section-nav button::after { content: "↓"; font-size: 11px; opacity: .55; }
.settings-section-nav button:hover, .settings-section-nav button:focus-visible { border-color: color-mix(in srgb, var(--mint-dark) 45%, transparent); outline: 0; background: var(--green-light); color: var(--teal); }
/* De sticky .topbar (min-height 88px, z-index 8) verborg de kop van elke
   sectie waarnaar de settings-section-nav-knoppen springen -- 18px was veel
   te weinig om eronderuit te komen, dus de bestemming landde onder de balk
   in plaats van eronder. */
/* Zelfde verhaal als bij #admin-task-panel hierboven: gemeten hoogte, met de
   oude 104px als terugval. De springlinks in Instellingen leunen hierop. */
.settings-card[id] { scroll-margin-top: calc(var(--topbar-hoogte, 104px) + 10px); }
.settings-card { padding: 24px; }
.settings-card.full-width { grid-column: 1/-1; }
.settings-card h3 { margin-bottom: 20px; }
.reminder-rules { display: grid; gap: 10px; margin-top: 18px; }
.reminder-rule { position: relative; display: grid; grid-template-columns: minmax(300px,1fr) 170px 150px; gap: 14px; align-items: center; overflow: visible; border: 1px solid var(--line); border-radius: 13px; background: var(--vlak); padding: 13px 15px; }
.check-row { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); }
.check-row input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--mint-dark); }
.check-row strong, .check-row small { display: block; }
.check-row strong { font-size: 10px; }
.check-row small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.reminder-choice-field { min-width: 0; color: var(--muted); font-size: 9px; font-weight: 700; }
.reminder-choice-field > span, .reminder-fixed-moment small, .reminder-fixed-moment strong { display: block; }
.reminder-fixed-moment small { margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.reminder-fixed-moment strong { color: var(--ink); font-size: 10px; }
.reminder-choice-picker { position: relative; margin-top: 4px; }
.standard-choice-picker { display: block; width: 100%; min-width: 150px; margin-top: 6px; }
.preference-row .standard-choice-picker { width: 180px; margin-top: 0; }
.reminder-choice-trigger { display: flex; width: 100%; height: 40px; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--vlak); color: var(--ink); cursor: pointer; padding: 0 11px; font: inherit; font-size: 10px; font-weight: 700; text-align: left; }
/* De gekozen tekst is een flexkind en kromp daardoor niet: bij een lange keuze
   stak hij 12 pixels buiten het scherm (monkey-verkenning, seed 41, Instellingen
   bij 1024 pixels). Met min-width: 0 mag hij wel krimpen, en omdat de knop dan
   hoger wordt in plaats van breder staat de hoogte niet langer vast. Liever een
   knop van twee regels dan een keuze die half buiten beeld hangt. */
.reminder-choice-trigger { height: auto; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.reminder-choice-value { min-width: 0; overflow-wrap: anywhere; }
.reminder-choice-trigger:hover, .reminder-choice-trigger[aria-expanded="true"] { border-color: var(--mint-dark); box-shadow: 0 0 0 3px rgba(58,189,157,.12); }
.reminder-choice-trigger:focus-visible, .reminder-choice-panel button:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--mint); }
.reminder-choice-trigger:disabled { cursor: not-allowed; opacity: .46; box-shadow: none; }
.reminder-choice-panel { position: absolute; z-index: 90; top: calc(100% + 6px); right: 0; left: 0; display: grid; gap: 4px; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--vlak); box-shadow: 0 16px 36px rgba(13,27,56,.18); padding: 5px; }
.reminder-choice-panel[hidden] { display: none; }
.reminder-choice-panel button { border: 0; border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; padding: 9px 10px; font: inherit; font-size: 10px; font-weight: 700; text-align: left; }
.reminder-choice-panel button:hover, .reminder-choice-panel button.is-active { background: var(--green-light); color: var(--teal); }
.reminder-fixed-moment { color: var(--muted); font-size: 10px; }
.reminder-schedule-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 15px; border-radius: 12px; background: var(--green-light); padding: 13px 15px; }
.reminder-schedule-summary { min-width: 0; color: var(--teal); }
.reminder-schedule-summary > strong { display: block; margin-bottom: 7px; font-size: 10px; }
.reminder-schedule-summary > div { display: flex; flex-wrap: wrap; gap: 6px; }
.reminder-schedule-summary span { display: block; border: 1px solid rgba(14,119,94,.16); border-radius: 999px; background: rgba(255,255,255,.58); padding: 5px 8px; font-size: 9px; line-height: 1.35; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.organization-settings-grid { align-items: start; }
.brand-logo-setting { display: grid; gap: 10px; }
.leave-sick-toggle { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--vlak); padding: 14px 18px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.leave-sick-toggle:hover, .leave-sick-toggle:focus-within { border-color: var(--mint-dark); box-shadow: 0 0 0 3px rgba(58,189,157,.12); }
.leave-sick-toggle-copy { display: grid; gap: 4px; min-width: 0; }
.leave-sick-toggle-copy strong { color: var(--ink); font-size: 11px; }
.leave-sick-toggle-copy small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.switch-track { position: relative; flex: 0 0 auto; width: 42px; height: 24px; }
.switch-track input { position: absolute; inset: 0; margin: 0; cursor: pointer; opacity: 0; }
.switch-thumb { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .15s ease; }
.switch-thumb::before { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(13,27,56,.32); transition: transform .15s ease; }
/* De focusrand hoort op het bolletje, niet op het invoerveld. Het invoerveld
   ligt met opacity 0 over de schakelaar heen, en een rand om iets doorzichtigs
   is zelf ook onzichtbaar -- wie met het toetsenbord op deze schakelaar landde
   zag dus helemaal niets (WCAG 2.4.7). Gevonden op 22 sep door VERK-TAB, de
   controle die de echte tabvolgorde afloopt; dit was meteen zijn eerste vondst.
   Zelfde vorm en kleur als de focusrand op elke andere knop. */
.switch-track input:focus-visible ~ .switch-thumb { outline: 3px solid rgba(58, 189, 157, .3); outline-offset: 2px; }
.switch-track input:checked ~ .switch-thumb { background: var(--mint-dark); }
.switch-track input:checked ~ .switch-thumb::before { transform: translateX(18px); }
.brand-logo-preview { display: flex; align-items: center; gap: 14px; min-height: 72px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); padding: 12px 14px; }
/* Het voorbeeld toont altijd de lichte logovariant (PATH_LOGO_OP_LICHT in
   app.js) of een zelf geüploade PNG. In de donkere modus en in Nieuw stond dat
   donkere woordmerk op een donkere ondergrond en was het niet te zien -- je
   controleerde dus een logo dat je niet kon bekijken. Een lichte drager achter
   het beeld lost dat op voor beide gevallen, ook voor een eigen logo waarvan we
   de kleuren niet kennen. Zelfde aanpak als de logobadge in de topbalk. */
.brand-logo-preview img { width: 130px; max-height: 54px; border-radius: 8px; background: #f4f1e6; object-fit: contain; object-position: left center; padding: 5px 9px; }
.form-grid label { color: var(--muted); font-size: 10px; font-weight: 700; }
.form-grid input, .form-grid select { width: 100%; height: 42px; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--vlak); color: var(--ink); padding: 0 12px; }

/* Een kleurkiezer die de volle kolombreedte krijgt, wordt een balk van
   vijfhonderd pixels effen kleur -- het schreeuwt over het formulier heen en
   het zegt niets meer dan een staal van vier centimeter. Zo groot als het
   moet zijn om de kleur te zien en aan te klikken, niet groter. */
.form-grid input[type="color"] { display: block; width: 78px; min-width: 78px; padding: 4px; cursor: pointer; }
.form-grid input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.form-grid input[type="color"]::-webkit-color-swatch { border: 1px solid var(--line); border-radius: 6px; }

/* Het bestandsveld liet de systeemknop van de browser zien: een grijze knop
   met Engelse tekst ("Choose File"), midden in een Nederlands formulier dat
   verder volledig eigen opmaak heeft. De knop zelf blijft de echte
   bestandskiezer -- alleen zijn uiterlijk doet nu mee. */
.form-grid input[type="file"] { height: auto; min-height: 42px; padding: 7px 10px; font-size: 11px; }
.form-grid input[type="file"]::file-selector-button {
  margin-right: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--teal);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 7px 12px;
}
.form-grid input[type="file"]::file-selector-button:hover { border-color: var(--mint); background: var(--green-light); }
.settings-template-intro { margin: -6px 0 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.customer-timesheet-template-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.customer-timesheet-template-card { display: grid; gap: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-muted); padding: 16px; }
.customer-timesheet-template-card h4 { margin: 4px 0 0; color: var(--ink); font-size: 15px; }
.customer-timesheet-template-card label { color: var(--muted); font-size: 10px; font-weight: 700; }
.customer-timesheet-template-card input, .customer-timesheet-template-card textarea { display: block; width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; padding: 10px 12px; }
.customer-timesheet-template-card input { min-height: 42px; }
.customer-timesheet-template-card textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.customer-timesheet-template-card > small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.form-grid input.is-invalid, .modal-form input.is-invalid, .modal-form textarea.is-invalid { border-color: var(--danger); background: var(--vlak-warm); box-shadow: 0 0 0 3px rgba(163,75,75,.09); }
.settings-warning { margin: 15px 0 0; border-radius: 11px; background: var(--warning-bg); color: var(--warning-tekst); font-size: 10px; line-height: 1.5; padding: 11px 13px; }
.invoice-identity-preview { display: grid; gap: 3px; border: 1px solid rgba(58,189,157,.34); border-radius: 12px; background: var(--green-light); padding: 13px 15px; }
.invoice-identity-preview span { color: var(--teal); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.invoice-identity-preview strong { color: var(--ink); font-family: var(--letter-kop); font-size: 17px; }
.invoice-identity-preview small { color: var(--muted); font-size: 10px; }
.hero-owner-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.hero-owner-badge { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font: inherit; font-size: 10px; font-weight: 800; padding: 7px 11px; cursor: pointer; transition: border-color .18s ease, transform .18s ease; }
.hero-owner-badge b { font-size: 12px; }
.hero-owner-badge.is-backoffice { background: rgba(187,118,35,.2); color: #ffe0ab; }
.hero-owner-badge.is-employee { background: rgba(58,189,157,.16); color: #bff5e8; }
.hero-owner-badge:hover { border-color: rgba(255,255,255,.55); transform: translateY(-1px); }
.hero-owner-badge:focus-visible { outline: 3px solid rgba(255,255,255,.55); outline-offset: 2px; }
.safe-domain-note { margin: 15px 0 5px; border-radius: 11px; background: var(--green-light); color: var(--teal); font-size: 10px; line-height: 1.5; padding: 11px 13px; }
/* A cleared form is the only other sign that setting a password worked, which
   reads as "nothing happened" -- so confirm it unmistakably. */
#auth-reset-complete-feedback.is-success { margin: 14px 0 12px; border-radius: 12px; border: 1px solid var(--mint); background: var(--green-light); color: var(--teal); font-size: 13px; font-weight: 700; line-height: 1.5; padding: 14px 16px; }
.team-account-local-notice { display: grid; gap: 4px; margin: 10px 0 0; border-radius: 11px; background: #fff5e6; color: #8a5a12; font-size: 11px; line-height: 1.5; padding: 10px 12px; }
.team-account-local-notice strong { color: #7a4d0a; }
.team-account-local-notice .text-button { justify-self: start; margin-top: 2px; color: #7a4d0a; font-weight: 800; text-decoration: underline; }
.email-template-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; }
/* Op een smalle telefoon past een lange pil ("Voorbereiding · niet automatisch") niet
   naast de kop: dan gaat hij eronder en mag hij zelf omlopen (KLV-N-022). */
.email-template-heading > div { min-width: 0; }
.email-template-heading > .status-pill { max-width: 100%; white-space: normal; text-align: left; }
.template-list { display: grid; gap: 10px; margin-top: 18px; }
.template-item { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.4fr) auto; align-items: center; gap: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--vlak); padding: 14px; }
.template-person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.template-person strong, .template-person small, .template-subject strong, .template-subject small { display: block; }
/* Deze twee regels stonden op één afgekapte regel met een ellipsis. Dat leest
   netjes zolang de tekst net past, maar wie zijn browser meer letter- en
   woordafstand geeft (WCAG 1.4.12) raakt zo het eind van een onderwerpregel of
   een ontvangerslijst kwijt -- gevonden door de verkenning van 20 sep op
   Instellingen: "circle8: factuur · Boekhouder: ..." liep tot 488px in een vak
   van 483px. Ze mogen nu doorlopen op een tweede regel; een lange sleutel zonder
   spaties breekt desnoods middenin, want onleesbaar is beter dan onzichtbaar. */
.template-person strong, .template-subject strong { color: var(--navy-tekst); font-size: 11px; overflow-wrap: anywhere; }
.template-person small, .template-subject small { margin-top: 3px; color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
/* Rules that always apply and are deliberately not switchable: same card shape as
   the toggles they replaced, minus the control that suggested a choice. */
.settings-rule-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.settings-rule-list li { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 13px; padding: 15px; }
.settings-rule-list strong { font-size: 10px; }
.settings-rule-list small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(5,13,27,.58); padding: 20px; backdrop-filter: blur(5px); }
.modal-backdrop[hidden] { display: none; }
/* `dvh` i.p.v. `vh`: op mobiel is 100vh de grote viewport (adresbalk weg), groter
   dan wat je ziet als de adresbalk er is. Met `vh` werd de dialoog hoger dan het
   zichtbare scherm en verdween de bovenrand -- met het kruisje erin -- achter de
   browserchrome. `dvh` volgt het zichtbare gebied. `vh` blijft als fallback. */
.modal { position: relative; display: flex; flex-direction: column; width: min(470px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: hidden; border-radius: 22px; background: var(--vlak); box-shadow: 0 30px 80px rgba(0,0,0,.26); animation: modalIn .2s ease; }
.modal.is-wide { width: min(780px, 100%); }
/* Met open softwaretoetsenbord: passen in wat er echt zichtbaar is. De
   waarden komen uit window.visualViewport via volgZichtbaarGebiedVoorDialoog()
   in app.js; waarom `dvh` en `100vh` hier allebei tekortschieten staat daar.

   Alleen onder [data-zichtbaar]. Dat attribuut zet de JavaScript pas als de
   browser visualViewport kent, dus een browser zonder houdt de regels
   hierboven. Een var() met teruggreep in de gewone regel had dat risico niet
   weggenomen: een ongeldige waarde maakt de hele declaratie ongeldig op
   rekentijd, en dan valt de max-height weg in plaats van terug te vallen. */
.modal-backdrop[data-zichtbaar] { inset: auto 0; top: var(--zichtbaar-boven); height: var(--zichtbaar-hoogte); }
.modal-backdrop[data-zichtbaar] .modal { max-height: calc(var(--zichtbaar-hoogte) - 40px); }
@keyframes modalIn { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }
/* Alleen deze binnenlaag scrollt; de dialoogrampartij (.modal) staat stil,
   zodat het kruisje er absoluut op vastgezet kan worden en nooit meewegscrolt.
   `position: sticky` op de knop was op mobiele browsers onbetrouwbaar in een
   lange dialoog -- de knop verdween alsnog boven de rand. */
.modal-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 30px; }
.modal-scroll > .section-label { padding-right: 34px; }
.modal h2 { margin: 8px 0; font-family: var(--letter-kop); }
#modal-message { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; white-space: pre-line; }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: #f1f4f4; cursor: pointer; font-size: 21px; line-height: 1; }
.modal-close:hover { background: #e6ebeb; }
.modal-close:focus-visible { outline: 3px solid rgba(58,189,157,.32); outline-offset: 2px; }
.modal-summary { display: grid; gap: 8px; margin: 20px 0; border-radius: 14px; background: var(--vlak-zacht); padding: 15px; }
.modal-summary > div { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 11px; }
.modal-summary strong { color: var(--navy-tekst); }
.modal-queue { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; margin: 20px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
.modal-queue[hidden] { display: none; }
.modal-queue > div { min-width: 0; text-align: center; }
.modal-queue strong, .modal-queue small { display: block; }
.modal-queue strong { color: var(--navy-tekst); font-size: 11px; }
.modal-queue small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.modal-queue .small-button { min-width: 92px; }
.modal-queue .small-button:disabled { cursor: not-allowed; opacity: .42; }
.modal-form { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px !important; color: var(--muted); }
.modal-form label { display: block; color: var(--muted); font-size: 10px; font-weight: 700; }
.modal-form label.full, .modal-form .full { grid-column: 1/-1; }
/* De vijf weekdagen als week, niet als lijst: vijf gelijke kolommen die op een
   smal scherm terugvallen op wat past. De invoervelden mogen hier smaller --
   er gaan hoogstens twee cijfers en een komma in. */
.modal-dagenrij { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.modal-dagenrij label { font-size: 9px; letter-spacing: .03em; }
.modal-dagenrij input { text-align: center; padding-inline: 6px; }
/* Met weekenduren aan komen Za en Zo erbij: dezelfde rij, zeven kolommen. */
.modal-dagenrij.met-weekend { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.modal-dagenrij:not(.met-weekend) .is-weekend-veld { display: none; }
@media (max-width: 560px) {
  .modal-dagenrij, .modal-dagenrij.met-weekend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.modal-form input, .modal-form textarea { display: block; width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--vlak); color: var(--ink); font: inherit; font-size: 12px; padding: 10px 12px; }
.modal-form input { height: 40px; }
.modal-form textarea { min-height: 105px; resize: vertical; line-height: 1.5; }
.modal-form .form-help { margin: 0; border-radius: 10px; background: var(--green-light); color: var(--teal); font-size: 9px; line-height: 1.5; padding: 10px 12px; }
/* Standaardredenen bij "Correctie aanvragen": klikbare knopjes die het
   tekstveld vullen i.p.v. het automatisch al bij openen in te vullen --
   zie de toelichting bij showCorrectionEditor() in app.js. */
.correction-reason-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: -2px; }
.chip-button { border: 1px solid var(--line); background: var(--vlak-zacht); color: var(--navy-tekst); font-size: 10.5px; font-weight: 700; line-height: 1.3; padding: 7px 11px; border-radius: 999px; cursor: pointer; text-align: left; }
.chip-button:hover { background: var(--green-light); border-color: var(--mint); color: var(--mint-dark-tekst); }
.chip-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
/* Sectiekop in een lang formulier. De groepering bestond al, maar de
   kopjes hadden dezelfde groene help-opmaak als de uitlegteksten eronder,
   waardoor je in één lange scroll niet zag waar een blok begon. Nu een
   echte kop met een scheidingslijn erboven; .form-help blijft voor
   werkelijke uitleg. */
.modal-form-sectie { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.modal-form > .modal-form-sectie:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* De knoppenrij stond binnen het scrollgebied en schoof dus mee naar beneden.
   Bij een korte bevestiging maakt dat niets uit, maar het medewerkerformulier
   is drie schermen lang: om op te slaan moest je eerst helemaal naar beneden,
   zonder dat ergens te zien was dat daar een knop stond. Nu plakt de rij aan
   de onderkant van de dialoog -- de inhoud schuift eronder door. De negatieve
   marges trekken hem tot in de binnenmarge van .modal-scroll, zodat hij de
   volle breedte pakt en de lijn erboven echt een scheiding is. */
.modal-actions { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 9px; margin: 22px -30px 0; border-top: 1px solid var(--line-zacht); background: var(--vlak); padding: 15px 30px 26px; }
/* De balk levert zelf de ondermarge, anders blijft er onder hem een strook
   van de binnenmarge over waar inhoud doorheen schuift. Alleen bij dialogen
   die daadwerkelijk een knoppenrij hebben -- een dialoog zonder knoppen houdt
   zijn gewone marge. */
.modal-scroll:has(.modal-actions) { padding-bottom: 0; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 150; max-width: 350px; border-radius: 12px; background: var(--navy); color: #fff; box-shadow: var(--shadow); font-size: 12px; opacity: 0; padding: 14px 18px; pointer-events: none; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity: 1; transform: none; }

/* Klikbare pop-up voor een nieuwe melding, los van .toast (die niet klikbaar
   is en voor korte statusberichten bedoeld blijft). */
.notification-popup { position: fixed; top: 24px; right: 24px; z-index: 155; max-width: 340px; display: flex; flex-direction: column; gap: 4px; text-align: left; border: 0; border-radius: 12px; background: var(--navy); color: #fff; box-shadow: var(--shadow); font: inherit; font-size: 13px; padding: 14px 18px; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(-12px); transition: opacity .2s ease, transform .2s ease; }
.notification-popup.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.notification-popup strong { font-size: 13px; }
.notification-popup span { color: rgba(255, 255, 255, .85); }
@media (max-width: 640px) {
  .notification-popup { left: 12px; right: 12px; top: 12px; max-width: none; }
}

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-card { grid-template-columns: minmax(0, 1fr); }
  .timesheet-layout { grid-template-columns: minmax(0, 1fr); }
  .summary-card { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
  .summary-card .section-label, .summary-card h3 { grid-column: 1/-1; }
  .approval-card { grid-template-columns: 1fr 1fr; }
  .approval-actions { justify-content: flex-end; }
}

/* Op smalle schermen moet een kolom kunnen krimpen. `1fr` betekent
   `minmax(auto, 1fr)` en kan niet kleiner worden dan zijn inhoud, waardoor een
   lang invoerveld het hele paneel breder duwde dan het scherm en de tekst
   rechts werd afgesneden. `minmax(0, 1fr)` laat de kolom wel krimpen. */
@media (max-width: 820px) {
  .sidebar { inset: auto 0 0; width: auto; height: 68px; padding: 7px 10px; box-shadow: 0 -7px 25px rgba(13,27,56,.16); }
  .brand { display: none; }
  /* Fase 17-audit (13 sep): niet meer .sidebar-footer zelf op display:none --
     dat verbergt ook zijn kinderen onherroepelijk, dus het vast-gepositioneerde
     #switch-role hieronder (zie de fixed-knop-regel bij .switch-role) zou
     nooit zichtbaar worden. display:contents laat #switch-role gewoon door;
     de twee onderdelen die hier niet passen (avatar/naam, versiebadge) worden
     los verborgen. */
  .sidebar-footer { display: contents; }
  .sidebar-footer .workspace-user, .sidebar-footer .demo-badge { display: none; }
  .nav-list { display: grid; grid-template-columns: repeat(6,1fr); gap: 3px; margin: 0; }
  /* Onderin de telefoon is de navigatie een knoppenbalk, geen lijst met
     kopjes. De groepen lossen daarom op in het raster (display:contents) en de
     kopjes verdwijnen. De :not([hidden]) is nodig: een klassenselector wint van
     het [hidden]-attribuut, en zonder die uitzondering zouden de knoppen van de
     verkeerde rol alsnog in de balk verschijnen. */
  .nav-group:not([hidden]), .nav-group-items { display: contents; }
  .nav-group-title { display: none; }
  .nav-item { min-width: 0; min-height: 54px; flex-direction: column; justify-content: center; gap: 5px; padding: 3px; text-align: center; }
  .nav-item span:nth-child(2), .nav-item > .nav-label-kort { overflow: hidden; width: 100%; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  /* Korte labels op telefoonbreedte, in ALLEBEI de vormgevingen.
     Tot 21 sep gold dit alleen in Klassiek, en Modern liet de volledige namen
     staan. Gemeten op een telefoon (mobile-chrome, 390px): het vakje is 57px
     breed en "Goedkeuringen" heeft er 75 nodig, "Mededelingen" 70 en
     "Medewerkers" 65. Daar stond dus gewoon "Goedkeurin...", "Mededelinge..."
     en "Medewerke..." -- zonder dat iemand aan de instellingen had gedraaid.
     Klassiek had dit al opgelost (besluit Gio, KLV-N-028: korte namen in beeld,
     de volledige voor schermlezers); Modern heeft diezelfde behandeling nooit
     gekregen. Een afgekapt woord is geen vormgevingskeuze. */
  .nav-item > .nav-label-kort { display: block; }
  /* Volledige naam alleen voor schermlezers (visually hidden), de korte in beeld. */
  .nav-item:has(> .nav-label-kort) > .nav-label-vol { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-count { position: absolute; top: 3px; right: 8px; }
  .nav-count-group { position: absolute; top: 3px; right: 4px; gap: 2px; }
  .nav-count-group .nav-count { position: static; padding: 1px 5px; }
  .nav-marker { width: 7px; height: 7px; }
  .main-content { margin-left: 0; padding: 0 16px 95px; }
  .topbar { min-height: 82px; gap: 8px; }
  .eyebrow { display: none; }
  .notification-button { display: none; }
  .safety-badge { display: inline-flex; font-size: 9px; padding: 6px 8px; }
  /* Fase 17.5-audit (13 sep), derde keer ditzelfde patroon. Hier stond
     `display: none`. Samen met de herstelregel in het 720px-blok verderop
     (`.topbar-quick-reset:not([hidden]) { display: inline-flex; ... }`)
     betekende dat: zichtbaar op desktop (>820px), zichtbaar op telefoon
     (<=720px), en onzichtbaar in precies de band 721-820px. Deze regel was in
     de praktijk dus geen "verberg op mobiel" maar een "verberg op tablet", wat
     vrijwel zeker niet de bedoeling was -- op een iPad in portret had een
     tester geen Herstel demo terwijl smallere én bredere schermen die wel
     hebben. Gevonden doordat het nieuwe tablet-chromium-project 10 cases rood
     zag gaan op #quick-reset-demo.

     Waarom het weghalen veilig kan en niet blind is: de twee buren hierboven
     (.eyebrow en .notification-button) blijven wél verborgen, dus de kop houdt
     de ruimte die daar is vrijgemaakt; alleen deze ene knop komt terug. Dat is
     gemeten op 768px met het tablet-project, dat juist op horizontale overflow
     let -- zie MASTERCHECKLIST 17.5. De knop zelf is bovendien alleen op
     LOCAL/TEST zichtbaar (syncResetControlVisibility), dus op productie
     verandert er niets aan de kop. */
  .hero-card { margin-top: 20px; padding: 28px; }
  .workflow-track { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .workflow-heading-meta { justify-items: start; text-align: left; }
  .dashboard-next-action-card { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dashboard-next-action-side { justify-items: start; text-align: left; }
  .dashboard-next-action-side .button, .dashboard-next-action-side .small-button { width: 100%; }
  .dashboard-next-action-side > div { width: 100%; }
  .workflow-line { display: none; }
  .workflow-step { min-width: 0; }
  .assignment-bar { grid-template-columns: 1fr 1fr; }
  .assignment-bar > div:first-child { grid-column: 1/-1; }
  .hours-view-toolbar { grid-template-columns: minmax(0, 1fr); }
  .hours-visible-total { text-align: left; }
  .reminder-rule { grid-template-columns: 1fr 1fr; }
  .reminder-rule .check-row { grid-column: 1/-1; }
  .invoice-month-overview-head { grid-template-columns: minmax(0, 1fr); }
  .invoice-month-overview-action { justify-items: start; }
  .month-batch-card { grid-template-columns: minmax(0, 1fr); }
  .month-batch-blockers { grid-column: auto; }
  .invoice-status-guide { grid-template-columns: minmax(0, 1fr); }
  .employee-grid, .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-rule-list { grid-template-columns: minmax(0, 1fr); }
  .settings-card.full-width { grid-column: auto; }
  .template-item { grid-template-columns: 1fr auto; }
  .template-subject { grid-column: 1/-1; grid-row: 2; }
  body[data-role="employee"] .nav-list { grid-template-columns: repeat(4,1fr); }
}

@media (max-width: 590px) {
  .login-screen { align-items: start; padding: 18px 12px; }
  .login-panel { border-radius: 20px; padding: 28px 20px; }
  .login-panel.is-production-login { padding: 28px 20px 22px; }
  .login-brand { margin-bottom: 30px; }
  .login-option { gap: 11px; padding: 14px 12px; }
  .login-avatar { width: 39px; height: 39px; }
  .login-footer { align-items: center; flex-direction: column; gap: 4px; }
  .app-footer { justify-content: center; text-align: center; padding: 16px 10px 8px; }
  .app-footer-version { flex-basis: 100%; margin-left: 0; }
  .main-content { padding-inline: 12px; }
  .topbar h1 { font-size: 21px; }
  .period-picker-wrap { min-width: 166px; }
  .period-picker-fields { grid-template-columns: minmax(86px,1fr) 68px; }
  /* #period-year-picker (het enige echte <input> hier) apart op 16px
     gehouden, ook op deze smallere 590px-drempel -- anders wint de latere
     720px-regel hierboven soms toevallig door bronvolgorde in plaats van
     door een bewuste keuze. .month-picker-trigger is een knop, geen getypt
     veld, en mag wel klein blijven. */
  .period-picker-fields input { font-size: 16px; }
  .period-control .month-picker-trigger { font-size: 10px; }
  .hero-card { border-radius: 18px; padding: 24px 20px; }
  .hero-copy h2 { font-size: 29px; }
  .hero-actions, .hero-actions .button { width: 100%; }
  .hours-week-filter { width: 100%; padding-bottom: 9px; }
  .hours-week-scroll-hint { display: block; margin: 5px 4px 0; color: var(--muted); font-size: 10px; font-weight: 700; }
  .reminder-rule { grid-template-columns: minmax(0, 1fr); }
  .reminder-rule .check-row { grid-column: auto; }
  .month-batch-blocker { grid-template-columns: minmax(0, 1fr); }
  .month-batch-blocker .small-button { width: 100%; }
  .reminder-schedule-footer { align-items: stretch; flex-direction: column; }
  .reminder-schedule-footer .small-button { width: 100%; }
  .progress-ring { --size: 60px; }
  .progress-ring::before { width: 45px; height: 45px; }
  .metric-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .metric-card { min-height: 115px; padding: 16px; }
  .metric-card > strong { font-size: 22px; }
  .panel-heading { align-items: flex-start; padding: 18px; }
  /* Alleen de notitie die naar de indeling verwijst verbergen: op een telefoon staat
     er niets naast, dus die zin klopt daar niet. De overige toelichtingen blijven wel
     staan -- ze verklaren wat je ziet -- en gaan naar 11px, de ondergrens voor
     schermtekst op een telefoon. */
  .updated-label.is-indelingsnotitie { display: none; }
  .updated-label { font-size: 11px; }
  .view-heading { align-items: flex-start; flex-direction: column; }
  .view-heading .button { width: 100%; }
  .heading-actions { width: 100%; }
  .approval-heading-actions { align-items: stretch; flex-direction: column; }
  .approval-heading-actions .segmented-control { width: 100%; }
  .approval-heading-actions .segmented-control button { flex: 1; }
  .timesheet-actions { align-items: stretch; flex-direction: column; }
  .timesheet-action-buttons { display: grid; grid-template-columns: minmax(0, 1fr); }
  .timesheet-action-buttons .button { width: 100%; }
  .summary-card { display: block; }
  .approval-card { grid-template-columns: minmax(0, 1fr); }
  /* Het besluit van Gio. order: 0 zet de DOM-volgorde terug, dus hier klopt
     de tabvolgorde wel met het beeld. flex: none en niet flex: 1 -- in een kolom
     rekt flex: 1 de knoppen in de hoogte op. De basis-.button heeft
     min-height: 42px, dus 44 moet expliciet.

     De tweede selector heeft specificiteit (0,3,0) met opzet: het donkere thema
     zet html[data-theme="dark"] .button-ghost op een gevuld vlak (0,2,1), en
     dat wint van een eenvoudiger regel. Bekijken krijgt dezelfde randstijl als
     Correctie vragen: met alleen Correctie transparant zou Bekijken, de
     zijweg, zwaarder ogen dan de correctie. */
  .approval-actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .approval-actions .button { width: 100%; min-height: 44px; flex: none; }
  .approval-card .approval-actions .button-ghost { background: transparent; border: 1px solid var(--line); box-shadow: none; }
  .invoice-toolbar { align-items: flex-start; flex-direction: column; }
  /* Hier stapelt de factuurbalk tot een kolom, en dan is de vaste
     `width: min(320px, 40vw)` van het zoekveld juist knellend: op een telefoon
     van 375px is dat ~150px, terwijl de hele kolombreedte beschikbaar is. Met
     de 16px uit het blok hierboven (iOS-zoomgrens) zou daar nauwelijks tekst
     in passen. Volle breedte lost allebei op en sluit aan bij hoe de andere
     bedieningselementen in deze balk zich hier al gedragen. */
  .invoice-search { width: 100%; }
  .invoice-search input { width: 100%; }
  .segmented-control { width: 100%; overflow-x: auto; }
  .employee-details, .form-grid, .team-account-overview, .team-account-groups, .administrator-row, .mail-recipient-setting, .mail-route-choice, .template-item, .announcement-meta, .customer-timesheet-admin-list { grid-template-columns: minmax(0, 1fr); }
  .team-account-overview, .team-account-groups, .administrator-row, .mail-recipient-setting, .mail-route-choice, .template-item { gap: 10px; }
  .customer-timesheet-admin-list { padding: 12px 16px 16px; }
  .template-item { grid-template-columns: minmax(0, 1fr); }
  .template-person { min-width: 0; }
  .template-subject { grid-column: auto; grid-row: auto; }
  .announcement-meta { gap: 8px; }
  .modal-scroll { padding: 25px 20px; }
  /* Zelfde vastgezette knoppenbalk, maar met de binnenmarge van dit formaat. */
  .modal-actions { margin-inline: -20px; padding: 13px 20px 22px; }
  .modal-form { grid-template-columns: minmax(0, 1fr); }
  .modal-form label.full, .modal-form .full { grid-column: auto; }
  .modal-queue { grid-template-columns: 1fr 1fr; }
  .modal-queue > div { grid-column: 1/-1; grid-row: 1; }
  .modal-queue .small-button { width: 100%; }
  .modal-actions .button { flex: 1; }
  .toast { right: 12px; bottom: 82px; left: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* v0.7: accounts, notifications, employee dashboard and help */
/* Het inlogscherm bood drie manieren om binnen te komen -- twee
   accountkiezers, twee snelknoppen en het e-mailformulier -- allemaal op
   gelijke sterkte onder elkaar. Wie hier voor het eerst komt weet niet welke
   de echte is, en het formulier (de enige die ook in productie bestaat) staat
   onderaan.
   De snelkeuzes zitten al in een eigen container die in productie verborgen
   wordt; die grens is nu ook te zien. Eén omkaderd blok "dit zijn de
   demo-ingangen", en daaronder staat het echte formulier vrij op het paneel.
   Omdat de lijn bij het blok zelf hoort, verdwijnt hij vanzelf mee zodra de
   demo-ingangen weg zijn. */
#local-account-login-tools:not([hidden]) {
  display: block;
  margin: 20px 0 22px;
  border: 1px solid var(--line-zacht);
  border-radius: 16px;
  background: var(--vlak-zacht);
  padding: 4px 16px 18px;
}
#local-account-login-tools .login-options { margin-bottom: 0; }
/* Het blok levert nu het vlak; de twee kiezers hoeven er niet nóg een vlak
   binnenin te tekenen. Doos in doos leest als twee niveaus waar er maar één
   is. */
#local-account-login-tools .demo-employee-picker { background: transparent; padding: 0; }

.demo-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.demo-account-grid .demo-employee-picker { margin-top: 0; }

.topbar-popover { position: relative; }
/* Dit was een blokje met alleen een boven- en zijrand: een boog, geen bel. En de
   kleur stond vast op --navy, wat in de donkere modus juist de achtergrond is, dus
   daar was hij helemaal weg. Nu een echte belvorm die de tekstkleur volgt. */
/* De bel vult de knop en staat gecentreerd. Er stond hier eerder een tweede regel
   (.notification-button span) die alleen boven- en zijranden tekende -- een boog,
   geen bel -- en die bleef naast de nieuwe vorm staan. */
.notification-button { display: grid; place-items: center; }
.notification-button .bell-shape { display: grid; place-items: center; color: var(--navy-tekst); }
.notification-button .bell-shape svg { width: 22px; height: 22px; }
.notification-button b { position: absolute; top: -6px; right: -6px; display: grid; min-width: 20px; height: 20px; place-items: center; border: 2px solid var(--background); border-radius: 999px; background: var(--mint); color: var(--navy); font-size: 9px; padding: 0 4px; }
.profile-menu-button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; padding: 0; }
.topbar-avatar, .profile-menu-avatar, .profile-photo-preview { display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--mint); color: var(--navy); font-size: 11px; font-weight: 900; background-position: center; background-size: cover; }
.topbar-avatar { width: 32px; height: 32px; }
.profile-menu-avatar { width: 42px; height: 42px; }
.popover-panel { position: absolute; top: calc(100% + 11px); right: 0; z-index: 60; width: min(360px, calc(100vw - 28px)); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 24px 55px rgba(13,27,56,.18); }
.popover-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding: 16px; }
.popover-heading small, .popover-heading strong { display: block; }
.popover-heading small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.popover-heading strong { margin-top: 3px; font-size: 13px; }
.icon-button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 9px; background: var(--green-light); color: var(--teal); cursor: pointer; font-size: 16px; }
.notification-list { max-height: 365px; overflow-y: auto; }
.notification-item { display: grid; grid-template-columns: 9px 1fr; gap: 11px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; padding: 14px 16px; text-align: left; }
.notification-item:hover { background: var(--green-light); }
.notification-item-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: transparent; }
.notification-item.is-unread .notification-item-dot { background: var(--mint); }
.notification-item strong, .notification-item small, .notification-item span { display: block; }
.notification-item strong { color: var(--ink); font-size: 11px; }
.notification-item span { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.notification-item small { margin-top: 6px; color: var(--teal); font-size: 9px; }
.notification-empty { color: var(--muted); font-size: 11px; line-height: 1.5; padding: 26px 18px; text-align: center; }
.profile-menu { width: 270px; padding: 8px; }
.profile-menu-person { display: flex; align-items: center; gap: 11px; width: 100%; margin-bottom: 5px; border: 0; border-radius: 12px; background: var(--green-light); padding: 12px; cursor: pointer; font: inherit; text-align: left; }
.profile-menu-person:hover { background: var(--vlak-zacht); }
.profile-menu-person strong, .profile-menu-person small { display: block; }
.profile-menu-person strong { font-size: 11px; }
.profile-menu-person small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.profile-menu > button { width: 100%; border: 0; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; font-size: 11px; padding: 10px 11px; text-align: left; }
.profile-menu > button:hover { background: var(--vlak-zacht); }
.profile-menu .danger-menu-item { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; color: var(--danger-tekst); }

/* Avatarkiezer in het profielmenu (17 sep, handoff). Klappen doet
   #avatar-picker-panel open/dicht; kiezen is direct (geen los opslaan) en
   sluit het paneel niet -- alleen de knop zelf (#avatar-picker-trigger)
   bepaalt of het menu openblijft, zodat je meteen kunt doorbladeren. */
.avatar-picker-panel { margin-bottom: 6px; border-radius: 12px; background: var(--vlak-zacht); padding: 10px; }
.avatar-picker-panel[hidden] { display: none; }
.avatar-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.avatar-picker-optie { position: relative; border: 2px solid transparent; border-radius: 9px; padding: 2px; background: transparent; cursor: pointer; aspect-ratio: 1; }
.avatar-picker-optie img { width: 100%; height: 100%; border-radius: 7px; display: block; object-fit: cover; }
.avatar-picker-optie:hover { border-color: var(--line); }
.avatar-picker-optie.is-gekozen { border-color: var(--mint); }
.avatar-picker-optie .avatar-picker-vink { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--mint); color: var(--navy); display: grid; place-items: center; font-size: 10px; font-weight: 900; line-height: 1; box-shadow: 0 0 0 2px var(--surface); }
.avatar-picker-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
.avatar-picker-nav button { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; width: 28px; height: 28px; font-size: 15px; line-height: 1; }
.avatar-picker-nav button:hover { background: var(--green-light); }
.avatar-picker-nav button:disabled { opacity: .4; cursor: default; }
.avatar-picker-nav span { color: var(--muted); font-size: 10px; font-weight: 700; min-width: 30px; text-align: center; }

/* Het medewerkerdashboard krijgt een bovengrens in de breedte. Waarde exact uit
   de desktopreferentie (handoff/medewerker-gui.html): de dashboardkolom staat
   daar op `max-width:1060px`. Zonder die grens rekt dit scherm op een breed
   monitor door tot de volle vensterbreedte, en dan staan een hero-regel en een
   maandregel over anderhalve meter uit elkaar.

   Geen media query nodig: op telefoon- en tabletbreedte is het venster smaller
   dan 1060px, dus de regel doet daar niets. Ook op het desktop-testproject
   (1280px) verandert er niets -- met de zijbalk van 250px en 34px padding
   blijft er 962px over. Hij bijt pas boven ongeveer 1378px vensterbreedte,
   precies waar het probleem zit.

   Alleen Klassiek: de bento in Modern heeft een eigen driekolomsraster met een
   eigen maatvoering, en die hoort hier niet onder te vallen.

   Gecentreerd, niet links uitgelijnd. Correctie van 14 sep: de eerste versie
   hiervan lijnde links uit, maar de bron zet alle drie de lagen (kopbalk,
   paginakop, inhoud) op `max-width:var(--pagina);margin:0 auto`. De tokennaam
   is die uit de bron overgenomen.

   De topbalk blijft ongemoeid: die is van de hele app en niet van de
   medewerkerschermen, dus die centreren zou ook de beheerderskant verschuiven.
   Dat is een aparte beslissing. */
:root { --pagina: 1060px; }
html:not([data-skin="new"]) #view-employee-dashboard,
html:not([data-skin="new"]) #view-timesheet,
html:not([data-skin="new"]) #view-historie,
html:not([data-skin="new"]) #view-employee-announcements { max-width: var(--pagina); margin-inline: auto; }
.employee-hero { display: grid; grid-template-columns: minmax(0, 720px); gap: 34px; align-items: center; margin: 30px 0 18px; border-radius: 24px; background: linear-gradient(135deg, #0d1b38, #174b55); color: #fff; padding: 36px 40px; box-shadow: 0 18px 45px rgba(13,27,56,.14); }
.employee-hero.is-complete { padding-block: 28px; }
/* Shawn's punt (WhatsApp, screenshot met "MIJN OPEN ACTIES" rood omcirkeld):
   dit .hero-task-math-blok herhaalde exact dezelfde telling als de
   #employee-open-overview-sectie eronder ("Open acties per maand") -- de
   stijl die hij daarbij expliciet prettiger noemde. In New-skin (Nieuw) was
   dat al opgelost (v1.0.46), maar Klassiek deelt dezelfde HTML/JS en toonde
   het dubbel nog steeds. Zelfde oplossing hier: het losse tellingsblok
   verbergen, de kolomindeling van .employee-hero (voorheen alleen bij
   .is-complete) is daarom nu altijd de enkele-kolom-variant. */
.employee-hero .hero-task-math { display: none; }
.employee-hero h2 { margin: 9px 0 8px; color: #fff; font-family: var(--letter-kop); font-size: var(--kop-scherm); }
.employee-hero p { margin: 6px 0 4px; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; }
.employee-next-action-label { display: block; margin-top: 22px; color: var(--mint); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.employee-next-action-meta { display: block; margin-bottom: 17px; color: #b9c7d4; font-size: 10px; }
.employee-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.employee-all-actions-button { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.08); color: #fff; }
.employee-all-actions-button:hover { background: rgba(255,255,255,.15); }
.employee-all-actions-button[hidden] { display: none; }
.linear-progress { height: 8px; margin-top: 18px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.linear-progress span { height: 100%; border-radius: inherit; background: var(--mint); }
.employee-customer-timesheet-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center; margin: 0 0 18px; border: 1px solid var(--line); border-left: 4px solid var(--mint-dark); border-radius: 16px; background: var(--surface); padding: 19px 22px; box-shadow: 0 10px 28px rgba(13,27,56,.07); }
.employee-customer-timesheet-card.is-open { border-color: #e7d4a8; border-left-color: var(--warning); background: var(--warning-bg); }
.employee-customer-timesheet-card.is-complete { border-left-color: var(--mint-dark); }
.employee-customer-timesheet-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 7px; }
.employee-customer-timesheet-heading h3 { margin: 0; color: var(--navy-tekst); font-family: var(--letter-kop); font-size: var(--kop-sectie); }
.employee-customer-timesheet-card p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.employee-customer-timesheet-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* Klanturenstaatkaart, nieuwe onderdelen in Klassiek (opdracht 14 sep). Waarden
   1-op-1 uit handoff/medewerker-wild.html r164-212 en medewerker-gui.html
   r228/r235-270; de kaart zelf houdt zijn Klassieke opmaak. */
@media (min-width: 821px) { .employee-customer-timesheet-card:has(.klantkaart) { grid-template-columns: minmax(0,1fr) minmax(260px,340px); } }
.klantkaart { display: grid; gap: 0; justify-content: stretch; }
.klantkaart-stand[hidden] { display: none; }
.employee-customer-timesheet-card .klantkaart-uitleg { margin: 11px 0 12px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.klantkaart-stand > .klantkaart-uitleg:first-child { margin-top: 0; }
.klantkaart-kies { display: grid; gap: 8px; }
.klantkaart-knop-bestand, .klantkaart-knop-foto { min-height: 48px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; }
.klantkaart-knop-bestand { border: 1px dashed var(--line); background: var(--surface-muted); color: var(--ink); }
.klantkaart-knop-foto { border: 1px solid var(--line); background: transparent; color: var(--muted); }
.klantkaart-bestand { display: flex; align-items: center; gap: 11px; margin: 0 0 11px; border: 1px solid var(--line-zacht); border-radius: 12px; background: var(--surface-muted); padding: 11px 12px; }
.klantkaart-badge { display: grid; width: 34px; height: 40px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 9px; font-weight: 800; }
.klantkaart-bestand-tekst { flex: 1; min-width: 0; }
.klantkaart-bestand-tekst strong { display: block; overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.klantkaart-bestand-tekst small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.klantkaart-weg { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 14px; }
.klantkaart-weg[hidden] { display: none; }
.klantkaart-verstuur { width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: var(--mint); color: var(--navy); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; box-shadow: 0 8px 20px rgba(58,189,157,.3); transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s; }
.klantkaart-verstuur:active { transform: scale(.975); box-shadow: 0 2px 24px rgba(58,189,157,.58); }
.klantkaart-klaar { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.klantkaart-vink { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--mint); color: var(--navy); font-size: 10px; font-weight: 900; }
.klantkaart-klaar strong { color: var(--mint-dark-tekst); font-size: 12.5px; font-weight: 700; }
.klantkaart #employee-customer-timesheet-skip { width: 100%; min-height: 46px; margin-top: 9px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 700; padding: 0 18px; box-shadow: none; transition: border-color .16s; }
.klantkaart #employee-customer-timesheet-skip:hover { border-color: var(--mint); }
@media (prefers-reduced-motion: reduce) { .klantkaart-verstuur { transition: none; } .klantkaart-verstuur:active { transform: none; } }
.employee-metrics .compact-metric { font-size: 20px; }
/* De vijfstappenketen in Klassiek. Dezelfde standen als in Modern (ze komen
   uit statusKetenStappen in app.js), maar in de Klassieke kaarttaal in plaats
   van de bento: paneel op --vlak, mint voor afgerond, amber voor de huidige
   stap, gedempt voor wat nog wacht. Die drie kleuren zijn niet verzonnen maar
   dezelfde die de statuspillen hier al gebruiken.

   De lijn tussen de bollen is één ::before per stap in plaats van losse
   lijnstuk-elementen. Reden: in Modern zijn die lijnstukken flex-broers van de
   <li> en dat heeft daar twee keer een reparatie gekost (zie het commentaar bij
   .new-bento-step-segment). Een ::before die aan de bol zelf hangt kan niet uit
   de rij lopen. De laatste stap krijgt geen lijn, anders loopt hij door naar
   niets. */
.employee-status-keten { margin: 0 0 22px; }
.status-keten-lijst { display: grid; gap: 0; margin: 0; padding: 0 16px 16px; list-style: none; }
.status-keten-lijst li { position: relative; display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 0 12px; padding: 0 0 16px; }
.status-keten-lijst li:last-child { padding-bottom: 0; }
.status-keten-lijst li::before { content: ""; position: absolute; top: 20px; bottom: 0; left: 9px; width: 2px; background: var(--line); }
.status-keten-lijst li:last-child::before { display: none; }
.status-keten-lijst li.is-af::before { background: var(--mint); }
/* Teken in de bol volgens de referentie (medewerker-gui.html r373: 10px/900 in
   de maandlijst; r276: 11px op het dashboard). Op mint altijd var(--navy),
   nooit wit: wit op #3abd9d haalt 2,35:1 (DESIGN-BESLUITEN "Contrast op mint en
   amber"). De huidige stap is sinds de export van 14 sep 04:07Z een massieve
   amberbol var(--warning) met het teken in var(--navy), in licht en donker
   (DESIGN-BESLUITEN "Vijf terugmeldingen uit de bouw", punt 2). */
.keten-bol { position: relative; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 2px solid var(--line); border-radius: 50%; background: var(--vlak); font-size: 10px; font-weight: 900; line-height: 1; }
.employee-status-keten .keten-bol { font-size: 11px; }
.status-keten-lijst li.is-af .keten-bol { border-color: var(--mint); background: var(--mint); color: var(--navy); }
.status-keten-lijst li.is-nu .keten-bol { border-color: var(--warning); background: var(--warning); color: var(--navy); box-shadow: 0 0 0 4px var(--warning-bg); }
.status-keten-lijst li strong { grid-column: 2; color: var(--navy-tekst); font-size: 14px; }
.status-keten-lijst li small { grid-column: 2; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.status-keten-lijst li.is-af strong { color: var(--mint-dark-tekst); }
.status-keten-lijst li.is-nu strong { color: var(--warning-tekst); }
.status-keten-lijst li.is-wacht strong { color: var(--muted); font-weight: 600; }
.employee-open-overview { scroll-margin-top: calc(var(--topbar-hoogte, 110px) + 16px); margin: 0 0 22px; overflow: hidden; border-radius: 22px; background-color: var(--vlak); background-image: linear-gradient(180deg, var(--vlak), var(--vlak-zacht)); box-shadow: 0 16px 34px rgba(13,27,56,.06); }
.employee-open-overview .panel-heading { align-items: flex-start; }
.employee-open-overview-list { display: grid; gap: 12px; padding: 0 24px 24px; }
.employee-open-overview-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 24px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 16px 18px; }
.employee-open-overview-next > div { min-width: 0; }
/* Zonder display:block liepen label/titel/detail (drie los tegen elkaar aan
   staande inline-elementen: span.section-label + strong + small) zonder
   spatie of regeleinde in elkaar over, bv. "...voor September 2026September
   2026 · actie 1 van 2" -- gemeld door een TEST-tester (10 sep). */
.employee-open-overview-next .section-label,
.employee-open-overview-next strong,
.employee-open-overview-next small { display: block; }
.employee-open-overview-next strong { margin-top: 4px; color: var(--navy-tekst); font-size: 15px; }
.employee-open-overview-next small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.employee-open-month { border: 1px solid var(--line); border-radius: 18px; background-color: var(--vlak); background-image: linear-gradient(135deg, var(--vlak), var(--vlak-zacht)); overflow: hidden; }
.employee-open-month.is-current { border-color: var(--mint-dark); box-shadow: 0 0 0 2px rgba(37,150,124,.08), 0 12px 24px rgba(13,27,56,.08); }
.employee-open-month-heading { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; padding: 15px 16px; text-align: left; transition: background .16s ease; }
.employee-open-month-heading:hover { background: var(--green-light); }
.employee-open-month-heading-copy { min-width: 0; }
.employee-open-month-heading-copy strong, .employee-open-month-heading-copy small { display: block; }
.employee-open-month-heading-copy strong { color: var(--navy-tekst); font-size: 14px; }
.employee-open-month-heading-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.employee-open-month-heading-side { display: flex; align-items: center; gap: 10px; }
.employee-open-month-chevron { width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid var(--navy-tekst); border-bottom: 2px solid var(--navy-tekst); transform: rotate(-45deg); transition: transform .18s ease; }
.employee-open-month-heading[aria-expanded="true"] .employee-open-month-chevron { transform: rotate(45deg); }
.employee-open-month-body { border-top: 1px solid var(--line); background: var(--vlak-zacht); }
.employee-open-action-list { display: grid; }
.employee-open-action-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 14px 16px; }
.employee-open-action-row + .employee-open-action-row { border-top: 1px solid var(--line); }
.employee-open-action-copy span, .employee-open-action-copy strong, .employee-open-action-copy small { display: block; }
.employee-open-action-copy span { color: var(--mint-dark-tekst); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.employee-open-action-copy strong { margin-top: 4px; color: var(--navy-tekst); font-size: 12px; }
.employee-open-action-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.employee-open-month-heading .status-pill { min-width: 138px; justify-content: center; }
.employee-history { display: grid; gap: 10px; padding: 18px 24px 24px; }
.employee-history-head { display: none; }
.employee-history-row { border: 1px solid var(--line-zacht); border-radius: 15px; background: var(--surface); overflow: hidden; }
.employee-history-row.is-open { border-color: var(--mint); box-shadow: 0 12px 28px rgba(13,27,56,.08); }
.employee-history-summary { display: grid; width: 100%; grid-template-columns: minmax(0,1fr) minmax(90px,.34fr) auto auto; gap: 16px; align-items: center; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; padding: 15px 16px; text-align: left; }
.employee-history-summary:hover { background: var(--green-light); }
.employee-history-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.employee-history-verloop { border-top: 1px solid var(--line); background: var(--surface-muted); padding: 14px 16px 16px; }
.employee-history-verloop .status-keten-lijst { padding: 0; }
.employee-history-weeks { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-bottom: 14px; }
.employee-history-weeks > div { border: 1px solid var(--line-zacht); border-radius: 12px; background: color-mix(in srgb, var(--surface) 82%, var(--green-light)); padding: 10px 12px; }
.employee-history-pdf { display: grid; gap: 4px; }
.employee-history-verloop-chevron { width: 9px; height: 9px; border-right: 2px solid var(--navy-tekst); border-bottom: 2px solid var(--navy-tekst); transform: rotate(45deg); transition: transform .16s ease; }
.employee-history-summary[aria-expanded="true"] .employee-history-verloop-chevron { transform: rotate(-135deg); }
.employee-history-row strong, .employee-history-row small { display: block; }
.employee-history-row strong { font-size: 15.5px; }
.employee-history-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.employee-history-current { display: inline-flex; margin-left: 8px; border-radius: 999px; background: var(--green-light); color: var(--mint-dark-tekst); font-size: 9px; font-weight: 900; padding: 4px 7px; vertical-align: middle; }

.timesheet-submit-note { margin: 0; color: var(--muted); font-size: 11px; font-style: italic; }
.admin-task-panel { margin-bottom: 18px; overflow: hidden; }
.admin-task-heading { align-items: flex-start; cursor: pointer; border-radius: var(--radius) var(--radius) 0 0; transition: background .15s ease; }
.admin-task-heading:hover { background: color-mix(in srgb, var(--surface) 85%, var(--green-light)); }
.admin-task-heading h3 { margin-bottom: 4px; }
.admin-task-heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.admin-task-heading > .small-button { flex: 0 0 auto; }
/* Op een telefoon wordt deze knop schermbreed. Met de standaard ghost-omlijning
   en links uitgelijnde tekst las hij als een half getekend kader met veel lege
   ruimte ernaast. Een gevuld mintvlak met gecentreerde tekst leest als een echte
   knop. */
/* Maandverdeling als tegels i.p.v. een rekensom in de samenvattingszin.
   Elke tegel: maandnaam, een balkje dat het aandeel toont t.o.v. de drukste
   maand, en het getal zelf -- dat getal blijft leidend, het balkje is alleen
   om in één oogopslag te zien waar het zwaartepunt ligt. */
/* Historie-teaser op het Dashboard: één regel met de omvang plus een link,
   in plaats van de volledige tabel die er altijd uitgeklapt onder hing. */
.workflow-teaser { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.workflow-teaser strong { display: block; margin-top: 3px; color: var(--navy-tekst); font-family: var(--letter-kop); font-size: var(--kop-paneel); font-variant-numeric: tabular-nums; }

.employee-history-teaser { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.employee-history-teaser strong { display: block; margin-top: 3px; color: var(--navy-tekst); font-family: var(--letter-kop); font-size: var(--kop-paneel); }

.admin-task-months { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Vaste kolombreedtes: anders krijgt "AUGUSTUS" een smallere balkbaan dan
   "JULI" en zijn de balkjes onderling niet meer te vergelijken -- precies
   wat zo'n verdeling juist zichtbaar moet maken.

   Let op de scope: .admin-task-month is per ongeluk twee componenten. Hier
   zijn het de maandtegeltjes in #admin-task-months, verderop (.admin-task-list)
   de uitklapbare maandsecties met hun eigen kop en lijst. Zonder deze scope
   kreeg zo'n sectie het raster van een tegeltje: de kop werd in een kolom van
   68px geperst en viel over de rijen heen. Gemeld met een screenshot van het
   Urenoverzicht, waar "Eerdere maand - nog niet afgerond" dwars door
   "Juli 2026 - 5 open acties" liep. */
/* De maandkolom is 68px breed en de naam stond op nowrap met puntjes. Met de
   tekstafstand die WCAG 1.4.12 vraagt past "AUGUSTUS" daar niet meer in, en dan
   staat er "AUGUST..." -- gevonden op CI (21 sep), met de lettertypen van Linux;
   op Windows paste het net. De kolom groeit nu mee met de langste naam in plaats
   van de tekst af te kappen. */
.admin-task-months .admin-task-month { display: grid; grid-template-columns: minmax(68px, auto) 1fr 22px; align-items: center; gap: 8px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; background: var(--vlak); }
.admin-task-months .admin-task-month b { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.admin-task-months .admin-task-month i { display: block; width: 56px; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.admin-task-months .admin-task-month i::before { content: ""; display: block; width: var(--aandeel, 0%); height: 100%; border-radius: 999px; background: var(--mint); }
.admin-task-months .admin-task-month u { color: var(--navy-tekst); font-size: 13px; font-weight: 800; text-decoration: none; font-variant-numeric: tabular-nums; }

.admin-task-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: 0 0 auto; white-space: nowrap; border-color: transparent; background: var(--green-light); color: var(--mint-dark-tekst); font-weight: 800; }
.admin-task-toggle:hover { background: color-mix(in srgb, var(--green-light) 76%, var(--mint)); }
.admin-task-toggle-chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; }
.admin-task-toggle[aria-expanded="true"] .admin-task-toggle-chevron { transform: rotate(-135deg); }
.admin-task-filters { display: flex; flex-wrap: wrap; gap: 7px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-muted); padding: 11px 24px; }
.admin-task-filters button { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 9px; font-weight: 800; padding: 8px 11px; }
.admin-task-filters button.is-active { border-color: var(--mint-dark); background: var(--green-light); color: var(--mint-dark-tekst); }
.admin-task-list { display: grid; }
/* Scheiding tussen twee maandsecties in de lijst. Ongescoped raakte deze
   regel ook de maandtegeltjes, die naast elkaar staan: elke tegel na de
   eerste kreeg er een balk van 10px bovenop. */
.admin-task-list .admin-task-month + .admin-task-month { border-top: 10px solid var(--surface-muted); }
.admin-task-month-heading { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-muted); color: inherit; cursor: pointer; font: inherit; padding: 14px 24px; text-align: left; }
.admin-task-month-heading:hover { background: color-mix(in srgb, var(--surface-muted) 78%, var(--green-light)); }
.admin-task-month-heading:focus-visible { position: relative; z-index: 1; outline: 3px solid color-mix(in srgb, var(--mint-dark) 35%, transparent); outline-offset: -3px; }
.admin-task-month-heading-copy, .admin-task-month-heading-copy > span, .admin-task-month-heading-copy > strong, .admin-task-month-heading small { display: block; }
.admin-task-month-heading-copy > span { color: var(--mint-dark-tekst); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.admin-task-month-heading-copy > strong { margin-top: 3px; color: var(--navy-tekst); font-family: var(--letter-kop); font-size: 16px; }
.admin-task-month-heading small { color: var(--muted); font-size: 9px; font-weight: 700; text-align: right; }
.admin-task-month-heading-side { display: flex; align-items: center; gap: 14px; color: inherit; letter-spacing: normal; text-transform: none; }
.admin-task-month-heading-side small { font-size: 11px; }
.admin-task-month-chevron { width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); transition: transform .18s ease; }
.admin-task-month-heading[aria-expanded="false"] .admin-task-month-chevron { transform: rotate(-45deg); }
.admin-task-owner-heading { border-bottom: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .04em; padding: 10px 24px; text-transform: uppercase; }
.admin-task-owner-heading.is-actionable { color: var(--mint-dark-tekst); }
.admin-task-owner-heading.is-waiting { color: #a86b13; }
.admin-task-row { display: grid; grid-template-columns: minmax(145px,.7fr) minmax(175px,.8fr) minmax(260px,1.25fr) auto; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); padding: 15px 24px; }
.admin-task-owner-group:last-child .admin-task-row:last-child { border-bottom: 0; }
.admin-task-row.is-actionable { box-shadow: inset 4px 0 0 var(--mint-dark); }
.admin-task-row.is-waiting { box-shadow: inset 4px 0 0 var(--warning); background: color-mix(in srgb, var(--warning-bg) 26%, var(--surface)); }
.admin-task-kind span, .admin-task-kind strong, .admin-task-person strong, .admin-task-person small, .admin-task-note small { display: block; }
.admin-task-kind span { color: var(--mint-dark-tekst); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.admin-task-kind strong { margin-top: 4px; color: var(--navy-tekst); font-size: 11px; }
.admin-task-person strong { font-size: 11px; }
.admin-task-person small, .admin-task-note small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.admin-task-note .status-pill { margin-bottom: 4px; }
.admin-task-action { display: flex; justify-content: flex-end; }
.admin-task-action .small-button { white-space: nowrap; }

.dashboard-action-empty { border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; padding: 24px; }

.summary-hours-input { width: 72px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-weight: 800; text-align: right; padding: 0 8px; }
/* Verlof/ziekte staan hier altijd uit (via de salarisadministratie); zonder deze
   regel las het vetgedrukte, zwarte cijfer als een gewoon invulbaar veld. */
.summary-hours-input:disabled { color: var(--muted); font-weight: 600; cursor: not-allowed; opacity: .7; }
.employee-scope-filter { width: fit-content; margin: 0 0 16px; }
.team-account-overview { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(360px,1.2fr); gap: 24px; align-items: center; margin-bottom: 16px; padding: 20px 24px; }
.team-account-overview-copy h3 { margin: 4px 0 2px; }
.team-account-overview-copy small, .team-account-group small { color: var(--muted); font-size: 9px; }
/* Twee vaste kolommen die pas bij 820px inklappen: daartussen (rond 900px)
   pasten de twee groepen niet meer naast elkaar en liep het blok het venster
   uit. Met auto-fit klapt hij in zodra het écht niet past, ongeacht waar het
   breekpunt toevallig ligt. */
.team-account-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.team-account-group { display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); padding: 12px 14px; }
.team-account-group strong, .team-account-group small { display: block; }
.team-account-group strong { font-size: 11px; }
.team-account-avatars { display: flex; min-width: 48px; padding-left: 8px; }
.team-account-avatar { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--green-light); color: var(--teal); font-size: 9px; font-weight: 900; }
.team-account-avatar.admins { background: var(--navy); color: #fff; }
.employee-card.is-inactive { opacity: .72; }
/* "Gegevens aanpassen" is de gewone handeling en staat vooraan; de twee
   knoppen erachter zijn uitzonderingen. Marge ervoor duwt ze weg van de
   gewone weg. */
.employee-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 16px; }
.employee-card-actions .text-button:first-child { margin-right: auto; }

/* Deactiveren zag er precies zo uit als Wachtwoord resetten, terwijl het de
   toegang van iemand afsluit. Niet permanent rood -- dat schreeuwt bij elke
   kaart en went binnen een dag -- maar op het moment dat je erheen gaat:
   rustig tot hover/focus, dan de waarschuwkleur. Alleen bij een actief
   account; op een inactieve kaart heet dezelfde knop "Opnieuw activeren" en
   is er niets te waarschuwen. */
.employee-card:not(.is-inactive) [data-toggle-employee],
.administrator-row [data-toggle-admin] {
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.employee-card:not(.is-inactive) [data-toggle-employee]:hover:not(:disabled),
.employee-card:not(.is-inactive) [data-toggle-employee]:focus-visible:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, var(--vlak));
  color: var(--danger);
}
.administrators-panel { margin-top: 22px; }
.administrator-list { display: grid; }
.administrator-row { display: grid; grid-template-columns: 1fr auto auto; gap: 15px; align-items: center; border-top: 1px solid var(--line); padding: 14px 24px; }
/* var(--accent) verwees hier naar een token dat nergens is gedefinieerd. Een
   ongeldige waarde maakt de hele outline-declaratie ongeldig, dus kreeg een
   dubbel-accountconflict alleen de zachte glow (box-shadow) te zien en niet de
   bedoelde scherpe rand eromheen -- gevonden via een scan op alle var()-
   verwijzingen zonder eigen definitie. --mint is dezelfde kleurfamilie als de
   glow ernaast. */
.account-conflict-focus {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px rgba(66, 196, 164, 0.18);
}
.administrator-person { display: flex; align-items: center; gap: 11px; }
.administrator-person strong, .administrator-person small { display: block; }
.administrator-person strong { font-size: 11px; }
.administrator-person small { margin-top: 3px; color: var(--muted); font-size: 9px; }

.profile-editor { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.profile-photo-preview { width: 82px; height: 82px; border-radius: 22px; font-size: 20px; }
.profile-editor-copy strong, .profile-editor-copy small { display: block; }
.profile-editor-copy strong { font-size: 14px; }
.profile-editor-copy small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.profile-photo-control { margin-top: 9px; }
.profile-photo-control input { width: 100%; font-size: 10px; }
.preference-list { display: grid; gap: 11px; }
/* Binnen een modal wint anders ".modal-summary > div { display:flex }" op
   specificiteit, waardoor de voorkeurenrijen naast elkaar komen te staan en
   buiten de dialoog vallen. Deze regel houdt ze onder elkaar. */
.modal-summary > .preference-list { display: grid; grid-template-columns: 1fr; }
.preference-row { display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 13px; }
.preference-row strong, .preference-row small { display: block; }
.preference-row strong { font-size: 11px; }
.preference-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.preference-row select { min-width: 140px; height: 36px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); padding: 0 9px; }
.preference-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--mint-dark); }
.modal-form select { display: block; width: 100%; height: 40px; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 0 10px; }
.modal-form .check-row { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line); border-radius: 10px; padding: 11px; }
.modal-form .check-row input { width: 17px; height: 17px; margin: 0; accent-color: var(--mint-dark); }

.announcement-list { display: grid; }
.announcement-item { border-top: 1px solid var(--line); padding: 20px 24px; }
/* 27 sep: een woord zonder spaties (een lange link, of 1500 tekens uit een
   grenswaardetest) maakte de hele lijst 11.000px breed; op een telefoon viel alles
   buiten beeld (MOB-H-008/030, KLV-N-006). Lange woorden breken nu af. */
.announcement-item, .employee-announcement-card { overflow-wrap: anywhere; }
.announcement-item.is-draft { background: color-mix(in srgb, var(--background) 72%, var(--surface)); }
.announcement-item.is-withdrawn { border-left: 4px solid var(--warning); background: color-mix(in srgb, var(--warning-bg) 42%, var(--surface)); }
.announcement-item:first-child { border-top: 0; }
.announcement-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.announcement-item-head h3 { margin: 8px 0 0; font-family: var(--letter-kop); font-size: var(--kop-paneel); }
.announcement-item-head > small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.announcement-item > p { margin: 13px 0; color: var(--ink); font-size: 12px; line-height: 1.6; white-space: pre-line; }
/* Dezelfde ingreep als bij de medewerkerkaarten: ontvangers, mailkeuze en
   afzender zijn feiten over deze mededeling, geen invulvelden. In grijze
   afgeronde vakjes lazen ze als formulier. Nu drie label/waarde-paren onder
   een haarlijn, met de waarde groter dan het opschrift erboven -- dat stond
   eerst omgekeerd. */
.announcement-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px 18px; border-top: 1px solid var(--line-zacht); padding-top: 14px; }
.announcement-meta span { min-width: 0; border-radius: 0; background: transparent; color: var(--navy-tekst); font-size: 11px; line-height: 1.45; padding: 0; }
.announcement-meta strong { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.announcement-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-top: 13px; }

.recipient-settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0 12px; }
.recipient-settings-heading h4 { margin: 3px 0 0; font-size: 17px; }
.mail-recipient-settings-list, .mail-route-choice-list { display: grid; gap: 10px; }
/* De standaardtekst per soort ontvanger. Eigen onderdeel, want hij hoort bij het
   soort en niet bij een ontvanger. */
/* Het instellingenscherm zet zijn onderdelen in twee kolommen. Zonder deze regel
   stond dit blok in een halve kolom met een lege witte helft ernaast. */
.mail-standaardtekst-lijst { grid-column: 1 / -1; display: grid; gap: 10px; margin-bottom: 18px; }
.mail-channel-template { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); }
.mail-channel-template strong { display: block; }
.mail-channel-template small { display: block; margin-top: 3px; color: var(--muted); }
/* Onderwerp en tekst horen er hetzelfde uit te zien: het is dezelfde mail. Het
   onderwerpveld erfde een kleiner lettertype van .route-template. */
.mail-channel-template input, .mail-channel-template textarea { font-family: inherit; font-size: 13px; }
.mail-channel-template textarea { min-height: 190px; }
.mail-recipient-setting, .mail-route-choice { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); }
.mail-recipient-setting.is-inactive { opacity: .62; }
/* De broker is hier alleen te lezen: hij staat per opdracht, niet in deze lijst. */
.mail-recipient-setting.is-informational { background: var(--vlak-warm); }
.mail-recipient-setting.is-informational .form-help { margin: 0; }
/* De standaardtekst per ontvanger. Dichtgeklapt zodat de lijst kort blijft, maar
   uitklapbaar zodat je kunt zien wat er verstuurd wordt zonder te versturen. */
.mail-standaardtekst { grid-column: 1 / -1; margin-top: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.mail-standaardtekst > summary { cursor: pointer; color: var(--mint-dark-tekst); font-size: 13px; }
.mail-standaardtekst-onderwerp { margin: 8px 0 4px; font-size: 13px; color: var(--navy-tekst); }
.mail-standaardtekst-inhoud { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--vlak-zacht); border: 1px solid var(--line); color: var(--navy-tekst); font: inherit; font-size: 13px; white-space: pre-wrap; overflow-x: auto; }
.mail-recipient-setting strong, .mail-route-choice strong { display: block; }
.mail-recipient-setting small, .mail-route-choice small { display: block; margin-top: 3px; color: var(--muted); }
/* Optional per-recipient overrides. They span the full row so the two toggles
   keep their own line, and an empty field stays visibly optional. */
.route-template { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 5px; font-size: 10px; }
.route-template small { display: inline; margin: 0; color: var(--muted); font-size: 9px; }
.route-template input, .route-template textarea { width: 100%; }
.mail-acceptance-console { margin-top: 22px; padding: 16px; border: 1px solid rgba(200,125,16,.32); border-radius: 14px; background: var(--surface-muted); }
.mail-acceptance-scenarios { display: grid; gap: 9px; }
.mail-acceptance-scenario { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.mail-acceptance-copy { display: grid; gap: 5px; }
.mail-acceptance-attachments { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; }
.mail-acceptance-attachment { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.modal-summary > .mail-acceptance-attachments { justify-content: flex-end; }
.mail-acceptance-copy { min-width: 0; }
.mail-acceptance-copy strong, .mail-acceptance-copy small { display: block; }
.mail-acceptance-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.mail-acceptance-label { display: inline-block !important; width: fit-content; margin: 0 0 3px; padding: 2px 7px; border-radius: 999px; background: #fff0dc; color: #9a5a00 !important; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
html[data-theme="dark"] .mail-acceptance-label { background: #4b3520; color: #ffd59b !important; }
.mail-delivery-history { margin-top: 24px; padding-top: 2px; border-top: 1px solid var(--line); }
.mail-delivery-history-controls { display: grid; grid-template-columns: minmax(240px,1fr) minmax(150px,.3fr) minmax(120px,.2fr); gap: 10px; margin: 14px 0; }
.mail-delivery-history-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.mail-delivery-history-controls input, .mail-delivery-history-controls select { width: 100%; min-height: 40px; }
.mail-delivery-history-list { display: grid; gap: 9px; }
.mail-delivery-history-item { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(180px,.8fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); }
.mail-delivery-history-item[data-mail-delivery-status="failed"], .mail-delivery-history-item[data-mail-stalled="true"] { border-color: #e2a755; background: #fff8ed; }
html[data-theme="dark"] .mail-delivery-history-item[data-mail-delivery-status="failed"], html[data-theme="dark"] .mail-delivery-history-item[data-mail-stalled="true"] { background: #35291d; }
.mail-delivery-history-main, .mail-delivery-history-meta { min-width: 0; }
.mail-delivery-history-main strong, .mail-delivery-history-main small, .mail-delivery-history-meta span { display: block; }
.mail-delivery-history-main strong { overflow-wrap: anywhere; }
.mail-delivery-history-main small, .mail-delivery-history-meta span { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.mail-delivery-history-state { display: grid; justify-items: end; gap: 5px; text-align: right; }
.mail-delivery-history-state small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.mail-delivery-history-state .small-button { margin-top: 3px; }
.mail-delivery-error { max-width: 360px; color: #a14f24 !important; white-space: normal !important; }
.mail-delivery-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.mail-delivery-pagination span { min-width: 120px; color: var(--muted); font-size: 11px; text-align: center; }

@media (max-width: 760px) {
  .mail-acceptance-console { padding: 13px; }
  .mail-acceptance-scenario { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .mail-acceptance-scenario .small-button { width: 100%; min-height: 44px; }
  .mail-delivery-history-item { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .mail-delivery-history-state { justify-items: start; text-align: left; }
  .mail-delivery-history-controls { grid-template-columns: minmax(0,1fr); }
  .mail-delivery-pagination { justify-content: space-between; }
  #refresh-mail-delivery-history { min-height: 44px; }
}

.customer-timesheet-upload-panel { margin-top: 22px; }
/* Drie stappen als echte reeks: genummerde muntjes in merkkleur, een
   verbindingslijn ertussen en een zachtere kaart -- in plaats van drie losse
   bordjes met "1." / "2." / "3." in de tekst. */
.customer-timesheet-flow { counter-reset: klantstap; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.customer-timesheet-flow li { position: relative; display: grid; gap: 5px; align-content: start; border: 1px solid var(--line); border-radius: 14px; background: var(--vlak-zacht); padding: 30px 15px 14px; box-shadow: 0 6px 18px rgba(13,27,56,.04); }
.customer-timesheet-flow li::before { counter-increment: klantstap; content: counter(klantstap); position: absolute; top: -14px; left: 15px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mint); color: var(--navy); font-size: 12px; font-weight: 800; box-shadow: 0 4px 12px rgba(58,189,157,.3); }
.customer-timesheet-flow li:not(:first-child)::after { content: ""; position: absolute; top: 0; left: -14px; width: 14px; height: 1px; background: var(--line); }
.customer-timesheet-flow strong, .customer-timesheet-flow span { display: block; }
.customer-timesheet-flow strong { color: var(--navy-tekst); font-size: 12px; }
.customer-timesheet-flow span { color: var(--muted); font-size: 11px; line-height: 1.55; }
.customer-timesheet-upload-grid { display: grid; grid-template-columns: minmax(180px,.65fr) minmax(240px,1fr) minmax(300px,auto); gap: 14px; align-items: end; margin-top: 18px; }
.customer-timesheet-upload-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.customer-timesheet-upload-grid input { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 9px 11px; }
.customer-timesheet-period-control { display: grid; gap: 7px; }
.customer-timesheet-field-label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.customer-timesheet-period-fields { display: grid; grid-template-columns: minmax(120px,1fr) 92px; gap: 8px; }
.customer-timesheet-upload-grid .customer-timesheet-period-fields .month-picker-trigger { min-height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 9px 11px; }
.customer-month-choice-panel { width: min(292px,calc(100vw - 48px)); }
/* Mocht deze knoppenrij niet passen, dan breekt hij af i.p.v. het venster uit
   te lopen -- dat gebeurde rond 980px, ruim boven het breekpunt waar hij op
   één kolom overgaat. */
.customer-timesheet-upload-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.customer-timesheet-upload-actions .button:disabled { opacity: .48; cursor: not-allowed; }
.customer-timesheet-action-help { grid-column: 1/-1; color: var(--muted); font-size: 10px; line-height: 1.5; }
.customer-timesheet-action-help.is-warning { color: var(--warning-tekst); font-weight: 700; }
.customer-timesheet-action-help.is-ready { color: var(--teal); font-weight: 700; }
.customer-timesheet-current { margin-top: 16px; }
.customer-timesheet-current > div, .customer-timesheet-admin-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-muted); padding: 13px 15px; }
.customer-timesheet-current strong, .customer-timesheet-current small, .customer-timesheet-admin-row strong, .customer-timesheet-admin-row small { display: block; }
.customer-timesheet-current small, .customer-timesheet-admin-row small { margin-top: 4px; color: var(--muted); }
/* Zelfde ongedefinieerde-token-bug als .account-conflict-focus hierboven:
   var(--accent) bestond niet, dus stond dit kaartje zonder de bedoelde
   linkerrand-accent. --mint sluit aan bij de mint-tint van dit kaartje. */
.customer-timesheet-admin-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px 20px 20px; }
.customer-timesheet-admin-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; align-items: stretch; min-width: 0; padding: 16px; }
.customer-timesheet-admin-person strong { color: var(--navy-tekst); font-size: 13px; }
.customer-timesheet-admin-meta { display: grid; grid-template-columns: minmax(90px,.35fr) minmax(0,1fr); gap: 8px; }
.customer-timesheet-admin-meta > span { min-width: 0; border-radius: 9px; background: var(--surface); padding: 9px 10px; }
.customer-timesheet-admin-meta small { margin: 0 0 4px; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.customer-timesheet-admin-meta strong { overflow-wrap: anywhere; font-size: 10px; }
.customer-timesheet-admin-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.customer-timesheet-admin-row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.admin-hours-detail { display: grid; gap: 8px; }
.admin-hours-detail > div { display: flex; justify-content: space-between; gap: 20px; }
.admin-hours-detail small { color: var(--muted); }
@media (max-width: 820px) {
  .admin-task-heading { align-items: stretch; flex-direction: column; }
  .admin-task-heading .button { width: 100%; }
  .admin-task-month-heading { align-items: flex-start; flex-direction: column; }
  .admin-task-month-heading small { text-align: left; }
  .admin-task-month-heading-side { width: 100%; justify-content: space-between; }
  .admin-task-row { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .admin-task-action { justify-content: stretch; }
  .admin-task-action .small-button { width: 100%; }
  .workflow-overview { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .workflow-progress-card { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 16px; }
  .employee-customer-timesheet-card { grid-template-columns: minmax(0, 1fr); }
  .employee-customer-timesheet-actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .employee-customer-timesheet-actions .button { width: 100%; }
  .customer-timesheet-template-grid { grid-template-columns: minmax(0, 1fr); }
  .customer-timesheet-flow { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .customer-timesheet-flow li:not(:first-child)::after { display: none; }
  .customer-timesheet-upload-grid { grid-template-columns: minmax(0, 1fr); }
  .customer-timesheet-upload-grid .button { width: 100%; }
  .customer-timesheet-period-fields { grid-template-columns: minmax(0,1fr) 92px; }
  .customer-timesheet-upload-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .customer-timesheet-current > div { grid-template-columns: minmax(0, 1fr); }
  .customer-timesheet-admin-list { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .customer-timesheet-admin-row { grid-template-columns: minmax(0, 1fr); }
  .customer-timesheet-admin-row-actions { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .dashboard-team-panel .panel-heading { align-items: flex-start; }
  .dashboard-team-table-wrap { padding: 0 12px 12px; overflow: visible; }
  .dashboard-team-table thead { display: none; }
  .dashboard-team-table, .dashboard-team-table tbody { display: block; width: 100%; }
  .dashboard-team-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
  .dashboard-team-table td { display: block; min-width: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 12px; white-space: normal; }
  .dashboard-team-table td::before { display: block; margin-bottom: 5px; color: var(--muted); content: attr(data-label); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .dashboard-team-table td:first-child { grid-column: 1/-1; border: 0; border-radius: 0; }
  .dashboard-team-table td:last-child { grid-column: 1/-1; border: 0; border-top: 1px solid var(--line); border-radius: 0; text-align: left; }
  .dashboard-team-table .dashboard-team-action { width: 100%; min-height: 40px; }
  .customer-timesheet-admin-footer { align-items: stretch; flex-direction: column; }
  .customer-timesheet-admin-row-actions, .customer-timesheet-admin-row-actions .small-button { width: 100%; }
}
.modal-form label.route-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; }
.modal-form .route-toggle input { display: inline-block; width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--mint-dark); }

/* Papier blijft papier: dit voorbeeld laat zien wat er straks uit de printer
   komt, dus het wisselt bewust niet mee met de donkere modus. */
.invoice-document-preview { padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: #ffffff; color: #122034; }
.invoice-preview-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.invoice-preview-table th, .invoice-preview-table td { padding: 11px 8px; border-bottom: 1px solid #dfe7e5; text-align: right; }
.invoice-preview-table th:first-child, .invoice-preview-table td:first-child { text-align: left; }
.invoice-preview-total { padding-top: 8px; border-top: 2px solid #122034; font-size: 18px; font-weight: 800; }
.invoice-branded-template { overflow: hidden; padding: 0; border: 0; border-radius: 16px; box-shadow: 0 14px 40px rgba(13,27,56,.12); }
.invoice-brand-header { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; min-height: 174px; background: var(--navy); color: #fff; padding: 28px 34px; }
.invoice-brand-logo img { display: block; width: 155px; max-width: 100%; }
.invoice-brand-logo span { display: block; margin-top: 12px; color: #bfd9d2; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.invoice-brand-title { text-align: right; }
.invoice-brand-title h3 { margin: 0; color: #fff; font-size: 34px; letter-spacing: .02em; }
.invoice-brand-title > small { display: block; }
.invoice-brand-title > small { margin-top: 9px; color: #dceae6; font-size: 10px; }
.invoice-brand-number-line { display: flex; justify-content: flex-end; align-items: baseline; gap: 5px; margin-top: 7px; color: #fff; }
.invoice-brand-number-line span { font-size: 8px; font-weight: 800; }
.invoice-brand-number-line strong { color: #fff; font-size: 14px; }
.invoice-brand-title > span { display: inline-block; margin-top: 11px; border-radius: 999px; background: var(--mint); color: var(--navy); font-size: 8px; font-weight: 900; padding: 7px 12px; }
.invoice-brand-accent { height: 6px; background: var(--mint); }
.invoice-brand-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 28px 34px 0; }
.invoice-brand-party { min-height: 238px; border: 1px solid var(--line); border-radius: 16px; background: var(--vlak-zacht); padding: 22px 24px; }
.invoice-brand-party.recipient { border-color: transparent; background: var(--green-light); }
.invoice-brand-label { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; }
.invoice-brand-party h4 { margin: 13px 0 9px; color: var(--navy-tekst); font-size: 19px; }
.invoice-brand-party p { margin: 0; font-size: 11px; line-height: 1.7; }
.invoice-brand-party .invoice-brand-identity { margin: -4px 0 8px; color: var(--teal); font-size: 9px; font-weight: 800; }
.invoice-brand-party dl { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 7px 12px; margin: 16px 0 0; border-top: 1px solid var(--line); padding-top: 13px; font-size: 10px; }
.invoice-brand-party.recipient dl { grid-template-columns: auto 1fr; border-color: #c6e9e0; }
.invoice-brand-party dt { color: var(--muted); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.invoice-brand-party dd { margin: 0; font-weight: 700; }
.invoice-brand-contact { margin-top: 12px !important; color: var(--teal); font-size: 9px !important; }
.invoice-brand-references { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin: 20px 34px 0; border-radius: 15px; background: var(--navy-soft); color: #fff; padding: 20px 24px; }
.invoice-brand-references span, .invoice-brand-references strong { display: block; }
.invoice-brand-references span { color: #a9c6c0; font-size: 7px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.invoice-brand-references strong { margin-top: 10px; color: #fff; font-size: 15px; }
.invoice-brand-intro { margin: 24px 34px 0; font-size: 11px; line-height: 1.65; }
.invoice-brand-intro p { margin: 0 0 5px; }
.invoice-branded-template .invoice-preview-table { width: calc(100% - 68px); margin: 24px 34px 0; }
.invoice-branded-template .invoice-preview-table th { border: 0; background: var(--navy); color: #fff; font-size: 9px; text-transform: uppercase; }
.invoice-branded-template .invoice-preview-table th:first-child { border-radius: 10px 0 0 10px; }
.invoice-branded-template .invoice-preview-table th:last-child { border-radius: 0 10px 10px 0; }
.invoice-branded-template .invoice-preview-table td { border: 0; background: var(--vlak-zacht); font-size: 11px; }
.invoice-branded-template .invoice-preview-table td:first-child, .invoice-branded-template .invoice-preview-table td:last-child { font-weight: 800; }
.invoice-brand-totals { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; width: 46%; margin: 24px 34px 0 auto; font-size: 10px; }
.invoice-brand-totals span { color: var(--muted); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.invoice-brand-totals strong { text-align: right; }
.invoice-brand-totals .invoice-preview-total { border-color: var(--mint); color: var(--navy-tekst); }
.invoice-brand-payment { margin: 28px 34px 0; border-radius: 15px; background: var(--green-light); padding: 18px 22px; }
.invoice-brand-payment p { margin: 9px 0 0; color: var(--teal); font-size: 10px; line-height: 1.65; }
.invoice-brand-closing { margin: 26px 34px; font-size: 11px; }
.invoice-brand-closing p { margin: 0 0 8px; }
.invoice-brand-closing strong { color: var(--navy-tekst); }
.invoice-brand-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 54px; background: var(--navy); color: #dceae6; font-size: 8px; padding: 14px 34px; }
.invoice-brand-footer strong { color: var(--mint); }
.announcement-withdrawal-note { border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--line)); border-radius: 10px; background: var(--warning-bg); color: var(--warning-tekst); font-size: 10px; line-height: 1.55; margin: 13px 0; padding: 11px 12px; }
.announcement-withdrawal-note strong { display: block; margin-bottom: 3px; }
.announcement-archive-filter { width: fit-content; margin: 0 0 16px; padding: 4px; background: color-mix(in srgb, var(--surface) 84%, var(--mint) 8%); border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(13,27,56,.06); }
#view-employee-announcements .view-heading p { max-width: 64ch; }
.employee-announcement-list { display: grid; } .employee-announcement-list[hidden] { display: none; }
.employee-announcement-card { border-top: 1px solid var(--line); padding: 20px 24px; }
.employee-announcement-card:first-child { border-top: 0; }
.employee-announcement-card.is-unread { box-shadow: inset 4px 0 0 var(--mint-dark); }
.employee-announcement-card.is-withdrawn { background: color-mix(in srgb, var(--warning-bg) 40%, var(--surface)); }
.employee-announcement-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.employee-announcement-card h3 { margin: 8px 0 0; font-family: var(--letter-kop); font-size: var(--kop-paneel); }
.employee-announcement-card header > small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.employee-announcement-card > p { color: var(--ink); font-size: 12px; line-height: 1.65; margin: 13px 0; white-space: pre-line; }
.employee-announcement-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 9px; }
/* Berichten in- en uitklapbaar (besluit Gio 15 sep). De kop is één knop over de hele
   breedte: label, titel, datum en een chevron. Ingeklapt is een bericht één rustige
   regel; open staat de tekst eronder. Nieuwe berichten staan open met het mintstreepje. */
.employee-announcement-list .employee-announcement-card { padding: 0; }
.bericht-kop { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: center; gap: 14px; width: 100%; min-height: 56px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 14px 24px; }
.bericht-kop:hover { background: color-mix(in srgb, var(--mint) 6%, transparent); }
.bericht-kop:focus-visible { outline: 2px solid var(--mint-dark); outline-offset: -2px; }
.bericht-kop-tekst { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
.bericht-kop-tekst .status-pill { flex: 0 0 auto; }
.employee-announcement-card .bericht-kop h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.employee-announcement-card.is-dicht .bericht-kop h3 { font-size: 15px; font-weight: 600; }
/* Eén regel samenvatting onder de titel, ingeklapt (Gio 15 sep: "verzin bij melding ook
   zoals bij Nieuw in de app"). Open staat de volledige tekst al eronder, dus dan weg. */
.bericht-snippet { display: block; width: 100%; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.employee-announcement-card.is-open .bericht-snippet { display: none; }
.bericht-kop > small { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bericht-chevron { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .16s ease; justify-self: end; }
.bericht-kop[aria-expanded="true"] .bericht-chevron { transform: rotate(45deg); }
.bericht-inhoud { padding: 0 24px 18px; }
.bericht-inhoud > p { color: var(--ink); font-size: 13px; line-height: 1.65; margin: 4px 0 12px; max-width: 70ch; white-space: pre-line; }
.bericht-inhoud .announcement-withdrawal-note { margin-top: 0; }
/* Ronde 2: kop en het kleine knopje "Markeer als gelezen" op één rij; een ongelezen
   bericht is ingeklapt maar valt op door Nieuw en een vette titel. */
/* De onderste kaart (ingetrokken of onder de muis) heeft een eigen achtergrond met rechte
   hoeken en stak over de ronde hoeken van het paneel heen (Gio 15 sep, "die hoekjes").
   Het paneel knipt nu zijn inhoud af; focusranden liggen binnen de kop (outline-offset -2px). */
#view-employee-announcements .panel:has(> .employee-announcement-list) { overflow: hidden; border-color: color-mix(in srgb, var(--line) 74%, var(--mint) 26%); box-shadow: 0 18px 42px rgba(13,27,56,.08); }
/* Vorige/Volgende onder lange lijsten (Nieuw in de app, Berichten). De stand staat in het
   midden in tabelcijfers, zodat "6–10 van 20" niet verspringt. */
.lijst-paginering { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line-zacht); padding: 12px 24px 16px; }
.lijst-paginering [data-pagina-stand] { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.lijst-paginering .button { min-height: 44px; padding-inline: 16px; }
.lijst-paginering .button:disabled { opacity: .45; cursor: default; }
.berichten-afgekapt { margin: 0; border-top: 1px solid var(--line-zacht); color: var(--muted); font-size: 12px; padding: 12px 24px; }
.notification-rest { margin: 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; padding: 12px 16px; }
@media (max-width: 720px) { .lijst-paginering { padding-inline: 16px; } }
/* Ingetrokken = afgedaan, geen waarschuwing (Gio 15 sep: "de kleur van ingetrokken, wat
   past daar beter"). Het warme oranje met bruine vlakken las als alarm en werd in donker
   modderig. Nu rustig en neutraal: geen eigen achtergrond, een omlijnd grijs label, een
   gedempte titel, en de reden als citaat met een dun streepje. Ronde 2: een eigen zachte
   lavendeltint (--ingetrokken-*) in plaats van grijs, prettiger om te zien. */
.employee-announcement-list .employee-announcement-card { background: color-mix(in srgb, var(--surface) 94%, var(--mint) 6%); }
.employee-announcement-list .employee-announcement-card:nth-child(even) { background: color-mix(in srgb, var(--surface) 98%, var(--mint) 2%); }
.employee-announcement-list .employee-announcement-card.is-open { background: color-mix(in srgb, var(--surface) 88%, var(--mint) 12%); }
.employee-announcement-list .employee-announcement-card.is-withdrawn { background: color-mix(in srgb, var(--ingetrokken-vlak) 42%, var(--surface)); }
.status-pill.bericht-label-ingetrokken { border: 1px solid var(--ingetrokken-rand); background: var(--ingetrokken-vlak); color: var(--ingetrokken-tekst); }
.employee-announcement-card.is-withdrawn .bericht-kop h3 { color: var(--ink); font-weight: 650; }
.employee-announcement-card.is-withdrawn .announcement-withdrawal-note { border: 0; border-left: 3px solid var(--ingetrokken-rand); border-radius: 0 8px 8px 0; background: var(--ingetrokken-vlak); color: var(--ink); }
.employee-announcement-card.is-withdrawn .announcement-withdrawal-note strong { color: var(--ingetrokken-tekst); }
.employee-announcement-card.is-withdrawn .bericht-inhoud > p { color: var(--ink); }
.bericht-kop-rij { display: flex; align-items: center; }
.bericht-kop-rij > .bericht-kop { flex: 1 1 auto; min-width: 0; }
.bericht-markeer { flex: 0 0 auto; min-height: 44px; margin-right: 16px; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.bericht-markeer:hover { color: var(--mint-dark-tekst); }
.employee-announcement-card.is-unread.is-dicht .bericht-kop h3 { font-weight: 800; }
.berichten-kop-acties { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 14px; text-align: right; }
.berichten-kop-acties small { color: var(--muted); }
html[data-theme="dark"] .announcement-archive-filter { background: color-mix(in srgb, var(--surface) 88%, var(--mint) 5%); box-shadow: 0 18px 44px rgba(0,0,0,.22); }
html[data-theme="dark"] #view-employee-announcements .panel:has(> .employee-announcement-list) { border-color: color-mix(in srgb, var(--line) 72%, var(--mint) 28%); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
html[data-theme="dark"] .employee-announcement-list .employee-announcement-card { background: color-mix(in srgb, var(--surface) 88%, var(--mint) 8%); }
html[data-theme="dark"] .employee-announcement-list .employee-announcement-card:nth-child(even) { background: color-mix(in srgb, var(--surface) 94%, var(--mint) 3%); }
html[data-theme="dark"] .employee-announcement-list .employee-announcement-card.is-open { background: color-mix(in srgb, var(--surface) 78%, var(--mint) 12%); }
html[data-theme="dark"] .employee-announcement-list .employee-announcement-card.is-withdrawn { background: color-mix(in srgb, var(--ingetrokken-vlak) 52%, var(--surface)); }
@media (prefers-reduced-motion: reduce) { .bericht-chevron { transition: none; } }
@media (max-width: 720px) {
  .bericht-kop { grid-template-columns: minmax(0, 1fr) 12px; padding: 14px 16px; }
  .bericht-kop > small { grid-column: 1; grid-row: 2; }
  .bericht-chevron { grid-column: 2; grid-row: 1 / span 2; }
  .bericht-inhoud { padding: 0 16px 16px; }
  .bericht-kop-tekst { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bericht-kop-rij { flex-wrap: wrap; }
  .bericht-kop-rij > .bericht-kop { flex-basis: 100%; }
  .bericht-markeer { margin: -10px 0 4px 16px; min-height: 40px; }
  .berichten-kop-acties { justify-content: flex-start; text-align: left; }
}
.recipient-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.recipient-choice { display: flex !important; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.recipient-choice input { width: 17px !important; height: 17px !important; margin: 0 !important; accent-color: var(--mint-dark); }
.recipient-choice strong, .recipient-choice small { display: block; }
.recipient-choice strong { color: var(--ink); font-size: 10px; }
.recipient-choice small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.fixed-audience { border: 1px solid var(--line); border-radius: 10px; background: var(--background); padding: 12px; }
.fixed-audience strong, .fixed-audience span { display: block; }
.fixed-audience strong { color: var(--ink); font-size: 10px; }
.fixed-audience span { margin-top: 4px; font-size: 9px; }

.help-launcher { position: fixed; right: 24px; bottom: 22px; z-index: 80; display: flex; min-height: 48px; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; cursor: pointer; box-shadow: 0 16px 38px rgba(13,27,56,.25); padding: 6px 15px 6px 7px; }
.help-launcher > span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: var(--mint); color: var(--navy); font-size: 16px; font-weight: 900; }
.help-launcher strong { font-size: 11px; }
/* Fase 17-audit (13 sep): de sidebar wordt al bij max-width:820px de onderste
   navigatiebalk (zie .sidebar), maar .help-launcher schoof pas vanaf 590px
   omhoog om daarboven uit te komen. Tussen 591 en 820px stond de hulpknop dus
   boven op de navigatieknoppen en onderschepte hij klikken (gevonden door het
   nieuwe tablet-chromium-testproject op 768px). Moet ná deze onvoorwaardelijke
   basisregel staan: een eerdere poging plaatste 'm er per ongeluk vóór, en een
   latere regel zonder @media wint dan altijd, ongeacht viewport -- precies
   hoe deze fix zelf de eerste keer stil faalde. Zelfde bottom-waarde als de
   bestaande 590px-regel verderop, alleen breder toegepast. */
@media (max-width: 820px) {
  .help-launcher { bottom: 78px; }
  /* Vervolg van dezelfde audit: .help-launcher bleek niet het enige vast
     gepositioneerde element onderin dat de navigatiebalk niet kende. Nog twee
     gevonden, met exact dezelfde oorzaak -- een lift die pas bij een smallere
     breedte intreedt dan waar de balk ontstaat.
     - .toast werd pas vanaf 590px opgetild, dus tussen 591 en 820px lag hij
       op de navigatieknoppen. Hij heeft pointer-events:none en blokkeert dus
       geen kliks, maar dekt de knoppen wel af zolang hij zichtbaar is.
       Dezelfde waarde als de bestaande 590px-regel, alleen breder toegepast.
     - .install-banner had helemaal geen lift, op geen enkele breedte, terwijl
       zijn eigen toelichting zegt dat hij boven de balk hoort te staan. Die
       heeft wél knoppen, dus die onderschepte de navigatie ook echt.
       env(safe-area-inset-bottom) blijft erin: op een iPhone met home-balkje
       moet hij daar nog steeds bovenuit komen. */
  .toast { bottom: 82px; }
  .install-banner { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
.help-panel { position: fixed; right: 24px; bottom: 82px; z-index: 90; display: grid; width: min(420px, calc(100vw - 28px)); max-height: min(700px, calc(100vh - 110px)); grid-template-rows: auto auto minmax(120px,1fr) auto; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 28px 70px rgba(13,27,56,.24); transform-origin: bottom right; opacity: 0; transform: scale(.95) translateY(10px); transition: opacity .18s ease, transform .18s ease; }
.help-panel.is-open { opacity: 1; transform: scale(1) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .help-panel { transition: none; }
}
.help-panel header { display: flex; align-items: center; justify-content: space-between; gap: 15px; background: linear-gradient(135deg, #0d1b38, #174b55); color: #fff; padding: 18px; }
.help-panel header small, .help-panel header strong { display: block; }
.help-panel header small { color: #9eb0c1; font-size: 9px; text-transform: uppercase; }
.help-panel header strong { margin-top: 3px; font-size: 13px; }
.help-header-actions { display: flex; align-items: center; gap: 8px; }
.help-clear { border: 0; background: transparent; color: #d7e7e7; cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.help-clear:hover { color: #fff; }
.help-messages { display: grid; align-content: start; gap: 10px; overflow-y: auto; background: var(--vlak-zacht); padding: 15px; }
.help-message { max-width: 88%; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 4px 14px rgba(13,27,56,.05); font-size: 11px; line-height: 1.55; padding: 11px 13px; animation: help-message-in .18s ease; }
.help-message.user { justify-self: end; background: var(--navy); color: #fff; }
@keyframes help-message-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .help-message { animation: none; }
}
.help-message p { margin: 0; white-space: pre-line; }
.help-message a { display: inline-block; margin-top: 9px; color: var(--teal); font-weight: 800; }
.help-message .small-button { margin-top: 9px; }
.help-contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.help-contact-actions a, .help-contact-actions button { display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--teal); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; padding: 9px 14px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.help-contact-actions a:hover, .help-contact-actions button:hover { border-color: var(--teal); }
.help-contact-actions a:active, .help-contact-actions button:active { transform: translateY(1px); }
/* Eén duidelijke hoofdactie (mailapp openen) in merkkleur, kopiëren als
   rustige, minder opvallende tweede optie -- zodat er niet twee gelijkwaardig
   ogende keuzes naast elkaar staan voor wat feitelijk één bedoeling is. */
.help-contact-actions a { border-color: transparent; background: var(--mint); color: var(--navy); box-shadow: 0 6px 16px rgba(58,189,157,.24); }
.help-contact-actions a:hover { background: #48caa9; border-color: transparent; }
.help-contact-actions a::before { content: "✉"; }
.help-contact-actions button::before { content: "⧉"; }
.help-faq { border-top: 1px solid var(--line); background: var(--surface); padding: 12px; }
.help-faq-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.help-faq-heading strong { color: var(--navy-tekst); font-size: 11px; }
.help-faq-heading small { color: var(--muted); font-size: 9px; }
.help-suggestions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 9px; max-height: 150px; overflow-y: auto; }
.help-suggestions button { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--teal); cursor: pointer; font-size: 9px; font-weight: 700; padding: 8px 10px; text-align: left; }
.help-suggestions button::after { content: "›"; font-size: 14px; line-height: 1; }
.help-suggestions button:hover { border-color: var(--teal); background: var(--green-light); }
.help-suggestions [data-help-topic="contact"] { grid-column: 1 / -1; border-color: transparent; background: var(--green-light); color: var(--navy-tekst); font-weight: 900; }
.help-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; border-bottom: 1px solid var(--line); background: var(--surface); padding: 11px; }
.help-form input { min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 0 11px; }
.help-form button { border: 0; border-radius: 10px; background: var(--mint); color: var(--navy); cursor: pointer; font-size: 10px; font-weight: 900; padding: 0 14px; }
.help-inline-topics { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.help-inline-topics button { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--navy-tekst); cursor: pointer; font-size: 10px; font-weight: 900; padding: 8px 11px; text-align: left; }
.help-inline-topics button:hover { border-color: var(--mint); background: var(--green-light); }

html[data-theme="dark"] { color-scheme: dark; --danger-tekst: #e58d8d; --ingetrokken-tekst: #c4bdf2; --ingetrokken-rand: #4d4679; --ingetrokken-vlak: #1c1a33; --ink: #e7eef4; --muted: #b1bfcb; --line: #2a3a4a; --line-zacht: #223243; --surface: #111d2b; --background: #09131f; --green-light: #15352f; --teal: #64d7bd; --mint-dark: #51caae; --warning-bg: #332618; --warning: #efb76f; --shadow: 0 14px 35px rgba(0,0,0,.35);
  /* Schaduwen moeten in het donker dieper en zwarter zijn; dezelfde blauwe
     alfa's als in de lichte modus zijn daar onzichtbaar. */
  --hoogte-kaart: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.28);
  --hoogte-zwevend: 0 18px 48px rgba(0,0,0,.5);
  /* Tekstvarianten omgekeerd: in donkere modus moeten ze juist licht zijn.
     Zonder deze drie regels was 119 keer tekst onleesbaar, waarvan de helft
     op 1,00:1 -- dezelfde kleur als de achtergrond. */
  --navy-tekst: #dbe6f2;
  --mint-dark-tekst: #5fd7ba;
  --warning-tekst: #f0bd7a;
  /* Diepblauw vlak met lichtblauwe letter, in dezelfde verhouding als
     --warning-bg/--warning-tekst hierboven (7,6:1, ruim boven de 4,5:1). */
  --info-bg: #16293d;
  --info-tekst: #8fb8e8;
  /* Gedempter dan de lichte variant: op een donkere ondergrond schreeuwt
     hetzelfde lichte amber, terwijl een rand alleen hoeft af te bakenen. */
  --warning-rand: #7a5a2c;
  --tabelkop: #b1bfcb;
  /* En de vlakken zelf. Deze drie ontbraken hier, en dat was geen detail: de
     tekstkleuren hierboven werden wel licht, de vlakken bleven wit. Zo kreeg je
     een witte knop met witte tekst -- "Open detail" en "Alle openstaande" waren
     daardoor onleesbaar in de donkere modus. Een lichte vlakkleur die hier niet
     staat, blijft licht. */
  --vlak: #111d2b;
  --vlak-zacht: #16232f;
  --vlak-warm: #2b2318;
  /* Zie de toelichting bij --surface-muted in de lichte modus. Hier iets
     lichter dan --surface, want in het donker ligt een verdiept vlak
     hoger, niet lager. */
  --surface-muted: #16242f; }
html[data-theme="dark"] .login-screen { background: radial-gradient(circle at 15% 15%, rgba(58,189,157,.17), transparent 28%), #07111d; }
html[data-theme="dark"] .login-panel,
html[data-theme="dark"] .approval-card,
html[data-theme="dark"] .invoice-month-overview,
html[data-theme="dark"] .invoice-status-guide > button,
html[data-theme="dark"] .month-batch-card,
html[data-theme="dark"] .month-batch-card[data-state="blocked"],
html[data-theme="dark"] .month-batch-card[data-state="ready"],
html[data-theme="dark"] .mail-route-guide article,
html[data-theme="dark"] .employee-card,
html[data-theme="dark"] .small-button,
html[data-theme="dark"] .button-ghost { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .invoice-month-overview[data-state="blocked"],
html[data-theme="dark"] .invoice-month-overview[data-state="ready"],
html[data-theme="dark"] .month-batch-blocker { background: rgba(9,19,31,.52); }
html[data-theme="dark"] .invoice-month-overview-item { border-color: var(--line); background: #0d1825; color: var(--ink); }
html[data-theme="dark"] .invoice-month-overview-item:hover,
html[data-theme="dark"] .invoice-month-overview-item.is-current { background: #10231f; }
html[data-theme="dark"] .invoice-month-overview-item.is-blocked.is-current { background: var(--warning-bg); }
html[data-theme="dark"] .invoice-month-overview-empty { background: rgba(9,19,31,.42); }
html[data-theme="dark"] .month-batch-progress::before { background: #263746; }
html[data-theme="dark"] .topbar { border-color: var(--line); background: rgba(9,19,31,.92); }
html[data-theme="dark"] .demo-employee-picker,
html[data-theme="dark"] .modal-summary,
html[data-theme="dark"] .employee-details div,
html[data-theme="dark"] .segmented-control,
html[data-theme="dark"] .help-messages { background: #0d1825; }
/* De sluitknop hield een vaste lichtgrijze achtergrond zonder eigen
   tekstkleur: in donkere modus werd het een witte blok met een bijna
   onzichtbaar kruisje. Lichte modus blijft ongewijzigd. */
html[data-theme="dark"] .modal-close { background: #1d2b3b; color: var(--navy-tekst); }
html[data-theme="dark"] .modal-close:hover { background: #263a4e; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .account-picker-trigger,
html[data-theme="dark"] .account-choice-panel,
html[data-theme="dark"] .hours-table input,
html[data-theme="dark"] .form-grid input,
html[data-theme="dark"] .form-grid select,
html[data-theme="dark"] .modal-form input,
html[data-theme="dark"] .modal-form textarea { border-color: var(--line); background: #0c1723; color: var(--ink); }
html[data-theme="dark"] .account-choice-panel button strong { color: var(--ink); }
html[data-theme="dark"] .main-content h1,
html[data-theme="dark"] .view-heading h2,
html[data-theme="dark"] .panel h3,
html[data-theme="dark"] .metric-card > strong,
html[data-theme="dark"] .data-table strong,
html[data-theme="dark"] .summary-card dd,
html[data-theme="dark"] .template-person strong,
html[data-theme="dark"] .template-subject strong,
html[data-theme="dark"] .approval-data strong,
html[data-theme="dark"] .approval-person strong { color: var(--ink); }
html[data-theme="dark"] .data-table th,
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] .hours-table th,
html[data-theme="dark"] .hours-table td,
html[data-theme="dark"] .summary-card dl div { border-color: var(--line); }
html[data-theme="dark"] .hours-table th,
html[data-theme="dark"] .hours-table .outside-month { background: #0d1825; }
html[data-theme="dark"] .hours-table tbody tr:hover,
html[data-theme="dark"] .data-table tbody tr:hover { background: #0e1a27; }
/* Deze losse uitzondering is niet meer nodig: .outside-month-mark staat nu op
   tokens die zelf al meewisselen, en #607181 haalde hier 3,4:1. */
html[data-theme="dark"] .outside-month-mark { background: var(--vlak-zacht); color: var(--muted); }
html[data-theme="dark"] .help-faq-heading strong { color: var(--ink); }
html[data-theme="dark"] .metric-card.attention { border-color: #5f4327; background: linear-gradient(150deg,#111d2b,#211a12); }
html[data-theme="dark"] .modal { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .correction-banner { border-color: #60482a; }
html[data-theme="dark"] .hours-view-toolbar,
html[data-theme="dark"] .reminder-rule { border-color: var(--line); background: #0d1825; }
html[data-theme="dark"] .reminder-choice-trigger, html[data-theme="dark"] .reminder-choice-panel { border-color: var(--line); background: #101d2d; color: var(--ink); }
html[data-theme="dark"] .reminder-schedule-summary span { background: rgba(13,27,56,.38); }

@media (max-width: 1100px) {
  .employee-hero { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .notification-button { display: block; }
  .profile-menu-button { width: 38px; height: 38px; }
  .topbar-actions { gap: 6px; }
  .employee-history-summary { grid-template-columns: minmax(0, 1fr) auto; }
  .employee-history-hours, .employee-history-summary .status-pill { grid-column: 1 / -1; }
  .employee-history-head { display: none; }
  .administrator-row { grid-template-columns: 1fr auto; }
  .mail-recipient-setting, .mail-route-choice { grid-template-columns: 1fr auto; }
  body[data-role="employee"] .nav-list { grid-template-columns: repeat(4,1fr); }
  .mail-route-guide { grid-template-columns: minmax(0, 1fr); }
  .announcement-meta { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 590px) {
  .demo-account-grid { grid-template-columns: minmax(0, 1fr); }
  .topbar { gap: 8px; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .period-control { order: 2; }
  .notification-button { width: 38px; height: 38px; }
  .profile-menu-button { width: 38px; height: 38px; }
  .employee-hero { border-radius: 18px; padding: 26px 20px; }
  .employee-open-action-row { grid-template-columns: minmax(0, 1fr); }
  .employee-open-action-row .small-button { width: 100%; }
  .employee-hero-actions .button { width: 100%; }
  .employee-history { padding-inline: 18px; }
  .admin-task-month-heading, .admin-task-owner-heading, .admin-task-row { padding-inline: 18px; }
  .open-periods-intro { padding-inline: 18px; }
  .correction-banner.dashboard-correction { grid-template-columns: auto 1fr; }
  .correction-banner.dashboard-correction .button { grid-column: 1/-1; width: 100%; }
  .administrator-row { grid-template-columns: minmax(0, 1fr); }
  .team-account-overview, .team-account-groups { grid-template-columns: minmax(0, 1fr); }
  .mail-recipient-setting, .mail-route-choice { grid-template-columns: minmax(0, 1fr); }
  .recipient-settings-heading { align-items: flex-start; flex-direction: column; }
  .invoice-document-preview { padding: 18px; }
  .invoice-branded-template { padding: 0; }
  .invoice-brand-header, .invoice-brand-parties { grid-template-columns: minmax(0, 1fr); }
  .invoice-brand-header { gap: 22px; padding: 26px 22px; }
  .invoice-brand-title { text-align: left; }
  .invoice-brand-number-line { justify-content: flex-start; }
  .invoice-brand-parties { padding: 22px 18px 0; }
  .invoice-brand-party { min-height: auto; }
  .invoice-brand-references { grid-template-columns: minmax(0, 1fr); margin-inline: 18px; }
  .invoice-brand-intro { margin-inline: 18px; }
  .invoice-branded-template .invoice-preview-table { width: calc(100% - 36px); margin-inline: 18px; }
  .invoice-brand-totals { width: auto; margin-inline: 18px; }
  .invoice-brand-payment { margin-inline: 18px; }
  .invoice-brand-closing { margin-inline: 18px; }
  .invoice-brand-footer { align-items: flex-start; flex-direction: column; padding-inline: 18px; }
  .announcement-item { padding: 18px; }
  .announcement-item-head { flex-direction: column; }
  .employee-announcement-card { padding: 18px; }
  .employee-announcement-card header, .employee-announcement-card footer { align-items: flex-start; flex-direction: column; }
  /* 27 sep, Klassiek nagelopen: de vijf filters schoven op een telefoon rechts
     buiten beeld (Ingetrokken half, Alles helemaal), zonder te laten zien dat je
     kon schuiven. Nu over twee regels, alle vijf in beeld. */
  .announcement-archive-filter { width: 100%; flex-wrap: wrap; overflow-x: visible; }
  html:not([data-skin="new"]) .announcement-archive-filter button { flex: 1 1 auto; }
  .recipient-choice-grid { grid-template-columns: minmax(0, 1fr); }
  .help-launcher { right: 12px; bottom: 78px; }
  .help-panel { right: 12px; left: 12px; bottom: 12px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .help-suggestions { grid-template-columns: minmax(0, 1fr); }
  .help-suggestions [data-help-topic="contact"] { grid-column: 1; }
}

/* v0.9.45 · mobiele bediening: dezelfde functies, maar met duidelijke touch-layouts. */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }

  .main-content {
    width: 100%;
    padding: 0 14px 96px;
  }

  /* De mobiele .topbar stapelt (logo, titel, badges, knoppen, bel, avatar)
     en is daardoor veel hoger dan op desktop -- de settings-section-nav-
     sprong heeft hier dus een ruimere marge nodig dan de 104px hierboven. */
  .settings-card[id] { scroll-margin-top: 300px; }
  #admin-task-panel { scroll-margin-top: 300px; }

  .topbar {
    display: grid;
    min-height: auto;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    padding: 10px 0 8px;
  }

  .mobile-topbar-home {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-brand-home,
  .mobile-role-switch {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    color: var(--navy-tekst);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    padding: 8px 11px;
    box-shadow: 0 5px 18px rgba(13,27,56,.04);
  }

  .mobile-brand-home {
    max-width: min(190px, 58vw);
    gap: 9px;
    /* Regression: met de standaard var(--line)-rand en een schaduw van 4%
       dekking viel deze knop tegen de bijna-identiek gekleurde topbalk
       (rgba(243,247,246,.91)) niet te onderscheiden van platte tekst -- hij
       werkt wel (zie [data-home] in app.js), maar oogde niet klikbaar. */
    border-color: rgba(58,189,157,.45);
    box-shadow: 0 5px 18px rgba(13,27,56,.08);
  }
  .mobile-brand-home:active { transform: translateY(1px); background: var(--vlak-zacht); }

  .mobile-brand-home img {
    width: 72px;
    max-width: 35vw;
    height: auto;
    object-fit: contain;
  }

  .mobile-brand-home span {
    white-space: nowrap;
  }

  .mobile-role-switch {
    flex: 0 0 auto;
    background: var(--green-light);
    color: var(--teal);
  }

  /* Titel en omgevingsbadge op één regel (Gio 25 sep: "veel ruimte boven"). */
  .topbar-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    column-gap: 10px;
    row-gap: 2px;
  }

  .topbar-title .eyebrow { display: none; }
  .topbar-title h1 { flex: 0 1 auto; min-width: 0; }
  .topbar-title .topbar-context { flex: 0 0 auto; }

  .topbar h1 {
    overflow: hidden;
    max-width: 100%;
    font-size: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-actions {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 8px;
    align-items: center;
  }

  /* De knoppenrij stapelde op de telefoon tot vier losse regels: de
     maandkiezer, dan "Herstel demo" alleen links, dan de vormgevingswissel,
     dan bel en avatar met een gat ertussen. Samen met de merkregel en de
     titel eroverheen was ruim een derde van het scherm op vóór de eerste
     inhoud. Door de plaatsing expliciet te maken staat er niets meer in zijn
     eentje op een regel: maandkiezer bovenaan (de enige bediening die er op
     elk scherm toe doet), daaronder herstel + bel + avatar naast elkaar, en
     als laatste de vormgevingswissel over de volle breedte. Drie regels in
     plaats van vier, en geen zwevende elementen. */
  .appearance-switches {
    order: 1;
    grid-column: 1 / -1;
    width: 100%;
  }

  .appearance-switch {
    min-height: 44px;
    flex: 1;
    justify-content: center;
    font-size: 12px;
  }

  .topbar-quick-reset:not([hidden]) {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    grid-column: 1;
    justify-self: start;
    /* Op desktop is deze knop rustig tot hover; op een aanraakscherm bestaat
       hover niet, dus daar moet de rand er meteen zijn -- anders leest hij
       als losse tekst tussen de knoppen. */
    border-color: var(--line);
    background: var(--surface);
    padding-inline: 14px;
  }

  .topbar-actions .topbar-popover:nth-last-of-type(2) { grid-column: 2; }
  .topbar-actions .topbar-popover:last-of-type { grid-column: 3; }

  .period-control {
    order: -1;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 46px;
    justify-content: space-between;
    gap: 5px;
    padding: 3px;
  }

  .period-control > button {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    font-size: 22px;
  }

  .period-picker-wrap {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 5px;
  }

  .period-picker-caption {
    font-size: 9px;
    text-align: center;
  }

  .period-picker-fields {
    grid-template-columns: minmax(0,1fr) 76px;
    gap: 5px;
  }

  .period-control .month-picker-trigger,
  .period-picker-fields input {
    min-height: 32px;
    font-size: 12px;
    text-align: center;
  }

  .month-choice-panel {
    left: 50%;
    width: min(330px, calc(100vw - 32px));
    max-height: 58vh;
    grid-template-columns: repeat(2, minmax(0,1fr));
    overflow-y: auto;
    transform: translateX(-50%);
  }

  .period-control .month-choice-panel button,
  .customer-timesheet-upload-grid .month-choice-panel button {
    min-height: 42px;
    font-size: 11px;
  }

  .notification-button,
  .profile-menu-button {
    width: 42px;
    height: 42px;
  }

  .popover-panel {
    position: fixed;
    top: 82px;
    right: 12px;
    left: 12px;
    width: auto;
    /* Fase 17.5-audit (13 sep): hier stond alleen de 100vh-variant. Op mobiele
       Safari is 100vh de GROTE viewport (adresbalk weggescrold), dus met de
       adresbalk in beeld -- de normale toestand -- rekent dit paneel zich
       hoger dan er zichtbaar is en valt de onderkant achter die balk. Dit is
       exact dezelfde fout die voor .help-panel al is gevonden en opgelost
       (zie de toelichting daar, "schoof de koptekst achter de mobiele
       adresbalk"); .popover-panel was daarbij over het hoofd gezien, terwijl
       juist de notificatiebel en het profielmenu erin zitten. Zelfde
       oplossing: eerst vh als terugval voor oudere browsers, dan dvh voor
       browsers die de zichtbare hoogte kennen. */
    max-height: calc(100vh - 170px);
    max-height: calc(100dvh - 170px);
    overflow-y: auto;
  }

  .view-heading {
    gap: 12px;
    margin: 24px 0 16px;
  }

  .view-heading h2 {
    font-size: var(--kop-scherm-mobiel);
    line-height: 1.08;
  }

  .view-heading p {
    font-size: 12px;
  }

  .heading-actions,
  .heading-actions .button,
  .heading-actions .small-button {
    width: 100%;
  }

  .invoice-month-overview,
  .month-batch-card,
  .panel,
  .metric-card,
  .employee-customer-timesheet-card,
  .dashboard-next-action-card {
    border-radius: 15px;
  }

  .invoice-month-overview {
    padding: 14px;
  }

  .invoice-month-overview-head {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .invoice-month-overview-copy h3 {
    font-size: 17px;
  }

  .invoice-month-overview-list {
    grid-template-columns: 1fr;
  }

  .invoice-month-overview-item {
    min-height: 74px;
    gap: 10px;
    padding: 12px;
  }

  .invoice-month-overview-item strong {
    white-space: normal;
  }

  .invoice-month-overview-action {
    align-self: stretch;
    justify-items: end;
  }

  .invoice-detail-toggle {
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
  }

  .month-batch-card {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .month-batch-title-row h3 {
    font-size: 18px;
  }

  .month-batch-progress {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .month-batch-progress > strong {
    justify-self: start;
  }

  .invoice-status-guide {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .invoice-status-guide > button {
    min-height: 58px;
    padding: 12px;
  }

  .invoice-toolbar {
    gap: 11px;
    padding: 13px 14px;
  }

  .invoice-toolbar .segmented-control {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    overflow: visible;
  }

  .invoice-toolbar .segmented-control button {
    min-height: 40px;
    padding-inline: 8px;
    white-space: normal;
  }

  .table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .invoice-table {
    min-width: 0;
  }

  .invoice-table thead {
    display: none;
  }

  .invoice-table,
  .invoice-table tbody,
  .invoice-table tr,
  .invoice-table td {
    display: block;
    width: 100%;
  }

  .invoice-table tr {
    border-top: 1px solid var(--line);
    padding: 12px 14px;
  }

  .invoice-table tr:first-child {
    border-top: 0;
  }

  .invoice-table td {
    display: grid;
    grid-template-columns: minmax(94px,.42fr) minmax(0,1fr);
    gap: 12px;
    align-items: start;
    border: 0;
    padding: 8px 0;
    white-space: normal;
  }

  .invoice-table td::before {
    color: var(--muted);
    content: "";
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .invoice-table td:nth-child(1)::before { content: "Factuur"; }
  .invoice-table td:nth-child(2)::before { content: "Consultant"; }
  .invoice-table td:nth-child(3)::before { content: "Documenten"; }
  .invoice-table td:nth-child(4)::before { content: "Bedrag"; }
  .invoice-table td:nth-child(5)::before { content: "Status"; }
  .invoice-table td:nth-child(6)::before { content: "Actie"; }

  .invoice-action {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    justify-items: stretch;
  }

  .invoice-action .small-button,
  .invoice-action-note {
    width: 100%;
    min-height: 40px;
    text-align: center;
  }

  .invoice-filter-groups,
  .invoice-toolbar-actions {
    width: 100%;
  }

  .invoice-document-badges {
    align-items: stretch;
    flex-direction: column;
  }

  .document-availability-badge {
    width: 100%;
    min-height: 40px;
    text-align: left;
  }

  .modal-summary > .invoice-document-card-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .admin-task-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px 14px;
    -webkit-overflow-scrolling: touch;
  }

  .admin-task-filters button {
    flex: 0 0 auto;
    min-height: 39px;
  }

  .admin-task-month-heading,
  .admin-task-owner-heading,
  .admin-task-row,
  .administrator-row,
  .announcement-item,
  .employee-announcement-card {
    padding-inline: 14px;
  }

  .admin-task-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 12px;
    padding: 13px 14px;
  }

  .admin-task-kind { grid-column: 1; grid-row: 1; }
  .admin-task-person { grid-column: 1; grid-row: 2; }
  .admin-task-note { grid-column: 1 / -1; grid-row: 3; }
  .admin-task-action { grid-column: 2; grid-row: 1 / 3; align-self: center; }

  .admin-task-kind strong,
  .admin-task-person strong,
  .admin-task-note small,
  .month-batch-blocker-copy strong,
  .month-batch-blocker-owner strong {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .button,
  .small-button,
  .text-button,
  .metric-link {
    min-height: 42px;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: auto;
    padding: 16px;
  }

  .hero-card,
  .employee-hero {
    min-height: auto;
    margin-top: 16px;
    padding: 22px 18px;
  }

  .hero-copy h2,
  .employee-hero h2 {
    font-size: var(--kop-scherm-mobiel);
  }

  .employee-customer-timesheet-card { grid-template-columns: 1fr; }

  .employee-customer-timesheet-actions {
    justify-content: stretch;
  }

  .modal-backdrop {
    align-items: end;
    padding: 10px;
  }

  .modal {
    width: 100%;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 20px 20px 16px 16px;
  }

  /* Zelfde toetsenbordregel als bovenin, met de marge van deze breedte: de
     achtergrond heeft hier 10px padding in plaats van 20px. */
  .modal-backdrop[data-zichtbaar] .modal { max-height: calc(var(--zichtbaar-hoogte) - 20px); }

  .modal-scroll {
    padding: 24px 18px 18px;
  }

  .modal-actions { margin-inline: -18px; padding: 13px 18px 20px; }

  .modal h2 {
    padding-right: 38px;
    font-size: 23px;
    line-height: 1.12;
  }

  .modal-summary > div {
    flex-direction: column;
    gap: 4px;
  }

  .modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .modal-actions .button {
    width: 100%;
  }

  .modal-queue {
    grid-template-columns: 1fr 1fr;
  }

  .modal-queue > div {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .help-launcher {
    right: 12px;
    bottom: 78px;
    min-height: 44px;
    padding-right: 8px;
  }

  .help-launcher strong {
    display: none;
  }

  .help-panel {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    /* Van onderaf gestapeld met een op 100vh gebaseerde max-hoogte schoof de
       koptekst (met het kruisje) achter de mobiele adresbalk zodra een antwoord
       het paneel liet groeien. Nu boven én onder verankerd en gemeten aan de
       zichtbare hoogte (dvh), zodat de koptekst altijd in beeld blijft. */
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
}

@media (max-width: 390px) {
  .main-content { padding-inline: 10px; }
  .mobile-brand-home { max-width: 54vw; }
  .mobile-brand-home img { width: 60px; }
  .mobile-brand-home span { font-size: 10px; }
  .mobile-role-switch { padding-inline: 9px; }
  .period-picker-fields { grid-template-columns: minmax(0,1fr) 66px; }
  .period-control > button { width: 38px; flex-basis: 38px; }
  .topbar-actions { grid-template-columns: minmax(0,1fr) auto auto; }
  .invoice-month-overview-item { grid-template-columns: minmax(0, 1fr); }
  .invoice-month-overview-action { justify-items: start; }
  .invoice-toolbar .segmented-control { grid-template-columns: minmax(0, 1fr); }
  .invoice-table td { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}


/* ---------------------------------------------------------------------------
   Telefoonoptimalisatie
   ---------------------------------------------------------------------------
   Gemeten op een scherm van 412px breed. Drie soorten problemen kwamen eruit:
   tekst onder de 11px die op een telefoon niet te lezen is, tikdoelen onder de
   44px die je met een duim structureel mist, en invoervelden waarop iOS inzoomt
   zodra hun tekst kleiner is dan 16px -- dat laatste verspringt het hele scherm.

   Alles hieronder geldt alleen op smalle schermen; de desktopweergave blijft
   ongewijzigd.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Leesbaarheid. De kleinste teksten stonden op 8, 9 en 10px. */
  .section-label,
  .form-help,
  .settings-template-intro,
  .safe-domain-note { font-size: 11px; }

  small,
  .status-pill,
  .mail-recipient-setting small,
  .mail-route-choice small,
  .route-template small,
  .employee-card small,
  .administrator-row small { font-size: 11px; }

  .team-account-avatar,
  .mini-avatar { font-size: 11px; }

  /* Tikdoelen. De norm van zowel Apple als Google is 44px; filterknoppen zaten
     op 28 en de hero-filters op 32. */
  .segmented-control { padding: 4px; gap: 6px; }
  .segmented-control button { min-height: 44px; padding: 0 14px; font-size: 12px; }

  .hero-owner-badge,
  .text-button,
  .small-button { min-height: 44px; }

  .button,
  button.button,
  .heading-actions .button { min-height: 44px; }

  /* Een vinkje van 17px is met een duim niet te raken. Het label eromheen wordt
     het tikgebied, zodat de hele regel werkt in plaats van alleen het vierkantje. */
  .check-row,
  .route-toggle,

  .check-row input[type="checkbox"],
  .route-toggle input[type="checkbox"],

  /* iOS zoomt in op een veld met tekst onder 16px en verspringt dan het scherm.
     16px voorkomt dat; de veldhoogte gaat mee naar de tikdoelnorm. */
  input,
  select,
  textarea,
  .form-grid input,
  .form-grid select,
  .modal-form input,
  .modal-form select,
  .modal-form textarea { font-size: 16px; }

  .form-grid input,
  .form-grid select,
  .modal-form input,
  .modal-form select { min-height: 44px; }

  /* Veilige zones: op toestellen met een notch of een home-balk viel de onderste
     navigatie deels achter de systeembalk. */
  .sidebar { height: calc(68px + env(safe-area-inset-bottom, 0px)); padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px)); }
  .app-shell { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Tweede ronde: regels met een hogere specificiteit die het blok hierboven niet
   overrulde, plus de laatste velden onder de tikdoelnorm. */
@media (max-width: 700px) {
  .settings-warning,
  .form-help,
  .small-button,
  .text-button { font-size: 11px; }

  .summary-hours-input { height: 44px; font-size: 16px; }
  .hours-input { min-height: 44px; font-size: 16px; }

  /* De keuzeknoppen van de standaardkeuzemenu's bleven op 40px steken. */
  .standard-choice-trigger,
  .reminder-choice-field button,
  [data-standard-choice-target],
  [id$="-trigger"] { min-height: 44px; }

  /* Losse meta-teksten die op 9px stonden. */
  #hours-autosave-status,
  #timesheet-correction-meta,
  .hours-visible-total span { font-size: 11px; }
}

/* Derde ronde: de laatste elementen die net onder de norm bleven steken. De
   vinkjes zelf blijven bewust 22px -- het label eromheen is het tikgebied van
   44px, dus een meting op het invoerveld alleen geeft daar een vertekend beeld. */
@media (max-width: 700px) {
  .metric-link,
  .month-picker,
  #customer-timesheet-month,
  #customer-timesheet-year { min-height: 44px; }

  .settings-card input,
  .settings-card select,
  .settings-card button { min-height: 44px; }

  /* De dagnummers in de urenstaat stonden op 8px, de kolomkoppen op 10px.
     Dat is precies de tekst die je moet kunnen lezen terwijl je uren invult. */
  .hours-table th { font-size: 12px; }
  .date-number { font-size: 12px; }
  .hours-table td small,
  .hours-table th small { font-size: 11px; }

  /* Resterende meta-teksten van 9 en 10px op de kaarten en dashboards. */
  .metric-card small,
  .metric-card span,
  .employee-dashboard-next small,
  .employee-dashboard-next span,
  .announcement-item small,
  .employee-announcement-card small,
  #admin-task-summary,
  #invoice-month-overview-note { font-size: 11px; }
}

/* ---------------------------------------------------------------------------
   Aanraakgedrag op iOS en Android
   ---------------------------------------------------------------------------
   Deze regels gelden op elk formaat: ze raken alleen aanraakbediening en doen
   niets met een muis. Zonder `touch-action: manipulation` wacht de browser na
   elke tik 300ms af of er een dubbeltik volgt, wat de app traag laat aanvoelen.
   --------------------------------------------------------------------------- */
button,
a,
label,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button,
.button,
.small-button,
.text-button,
.segmented-control button {
  -webkit-user-select: none;
  user-select: none;
}

/* Doorschieten van een scrollend paneel mag de hele pagina niet meeslepen. */
.table-wrap,
.help-panel {
  -webkit-overflow-scrolling: touch;
}

/* Tabellen mogen horizontaal binnen hun eigen vak blijven, maar een verticaal
   muiswiel of touchpad boven de urentabel moet de pagina blijven scrollen. */
.table-wrap {
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}
.help-panel { overscroll-behavior: contain; }

/* Let op: geef body hier GEEN overscroll-behavior. Onder 720px staat er al
   html, body { overflow-x: hidden }, waardoor body een eigen scrollgebied wordt
   dat precies zo hoog is als zijn inhoud -- er valt daar dus niets te scrollen.
   Containment op body blokkeert dan het doorgeven van de veeg naar het document
   erboven, en de telefoon scrollt helemaal niet meer. Zie MOB-H-010. */

/* ---------------------------------------------------------------------------
   Urenstaat op een telefoon: rijen per dag in plaats van een weekraster
   ---------------------------------------------------------------------------
   Zeven kolommen van 88px passen niet op 412px, dus schoof je zijwaarts heen en
   weer terwijl je cijfers typte. Elke dagcel bevat al de datum én het veld, dus
   die kunnen we stapelen: per week een blok, daarbinnen per dag een regel met de
   datum links en het invoerveld rechts. Alleen CSS -- de opbouw blijft dezelfde
   tabel, zodat de logica en de toegankelijkheid ongemoeid blijven.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .hours-table,
  .hours-table tbody,
  .hours-table tr,
  .hours-table td { display: block; width: 100%; }

  /* De kolomkoppen zeggen niets meer zodra de dagen onder elkaar staan; de datum
     staat immers op elke regel zelf. */
  .hours-table thead { display: none; }

  .hours-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }

  /* Eerste cel van de rij is het weeknummer en wordt de kop van het blok. */
  .hours-table tr > td:first-child {
    border-bottom: 1px solid var(--line);
    background: var(--surface-muted);
    font-weight: 700;
    text-align: left;
    padding: 12px 14px;
  }

  .hours-table td { min-width: 0; border-bottom: 0; text-align: left; padding: 0; }

  .workday-cell { border-bottom: 1px solid #edf1f2; }

  .hours-day-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 6px 14px;
  }

  .hours-day-entry .date-number { flex: 1; text-align: left; font-size: 13px; }
  .hours-day-entry .hours-input { width: 96px; flex: 0 0 auto; text-align: center; }

  /* Dagen buiten de maand voegen niets toe zodra alles onder elkaar staat. */
  .hours-table .outside-month { display: none; }

  .hours-table .week-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-muted);
    font-weight: 700;
    padding: 12px 14px;
  }
  .hours-table .week-total::before { content: "Weektotaal"; font-weight: 400; color: var(--muted); }

  /* Zijwaarts schuiven is niet meer nodig. */
  .table-wrap { overflow-x: visible; }
}

/* Inklapbare instellingenpanelen op smalle schermen. De kop blijft altijd
   zichtbaar en werkt als knop; de rest verschijnt pas als je hem opent. */
@media (max-width: 700px) {
  /* Alleen Klassiek: in Modern is het tabblad de keuze en overschreef de
     revert-regel alle Modern-opmaak van de kaartinhoud. :where() houdt de
     specificiteit gelijk, dus in Klassiek verandert er niets. */
  :where(html:not([data-skin="new"])) .settings-card[data-settings-collapsible="true"] > * { display: none; }
  :where(html:not([data-skin="new"])) .settings-card[data-settings-collapsible="true"] > .settings-card-heading { display: block; }
  :where(html:not([data-skin="new"])) .settings-card[data-settings-collapsible="true"][data-settings-open="true"] > * { display: revert; }
  /* display:revert hierboven haalt ALLE directe kinderen terug, ook de onderdelen die met
     opzet verborgen zijn omdat ze alleen in Modern bestaan. Op 1 okt stond daardoor het
     blok "Demo herstellen" op PRODUCTIE op de telefoon van een beheerder, zichtbaar maar
     ongestyled: r.415 zet .alleen-modern-blok op display:none met voorrang 0,1,0, en de
     regel hierboven overrulet dat met 0,3,0. Deze regel haalt ze er weer uit, met 0,4,0. */
  :where(html:not([data-skin="new"])) .settings-card[data-settings-collapsible="true"][data-settings-open="true"] > .alleen-modern,
  :where(html:not([data-skin="new"])) .settings-card[data-settings-collapsible="true"][data-settings-open="true"] > .alleen-modern-blok { display: none; }

  .settings-card-heading {
    position: relative;
    min-height: 44px;
    cursor: pointer;
    padding-right: 34px;
  }

  /* Een chevron die meedraait, zodat je ziet of een paneel open of dicht is. */
  .settings-card-heading::after {
    position: absolute;
    top: 50%;
    right: 6px;
    color: var(--muted);
    content: "\203A";
    font-size: 22px;
    line-height: 1;
    transform: translateY(-50%) rotate(90deg);
    transition: transform .18s ease;
  }
  .settings-card[data-settings-open="true"] > .settings-card-heading::after {
    transform: translateY(-50%) rotate(-90deg);
  }

  .settings-card-heading:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 3px;
  }
}

/* ---------------------------------------------------------------------------
   Regellengte van lopende tekst
   ---------------------------------------------------------------------------
   Boven ongeveer 75 tekens per regel raakt je oog bij het terugspringen de
   volgende regel kwijt; je leest dan dezelfde regel dubbel of slaat er een over.
   Gemeten op 1440px liepen de correctieberichten op tot 172 tekens -- en juist
   dat is de tekst die een medewerker aandachtig moet lezen om te weten wat er
   moet gebeuren. Kaarten, tabellen en knoppen blijven de volle breedte houden;
   dit raakt alleen alinea's.
   --------------------------------------------------------------------------- */
.view p,
.view li,
.form-help,
.settings-warning,
.safe-domain-note,
.settings-template-intro,
#admin-task-summary,
#timesheet-correction-message,
#employee-dashboard-correction-message {
  max-width: 75ch;
}

/* Op smalle schermen is de schermbreedte al de begrenzing en zou een vaste
   maximumbreedte alleen maar ruimte weggooien. */
@media (max-width: 700px) {
  .view p,
  .view li,
  .form-help,
  .settings-warning,
  .safe-domain-note,
  .settings-template-intro,
  #admin-task-summary,
  #timesheet-correction-message,
  #employee-dashboard-correction-message {
    max-width: none;
  }
}



/* ---------------------------------------------------------------------------
   Uitnodiging om de app te installeren
   ---------------------------------------------------------------------------
   Onderin, want daar zit de duim. Boven de mobiele onderbalk zodat hij niets
   afdekt, en met ruimte voor de veilige zone van een iPhone.

   Fase 17.5-audit (13 sep): die tweede zin klopte niet met de code. 16px is
   niet boven de onderbalk -- die is 68px hoog en verschijnt al vanaf
   max-width:820px (zie .sidebar). Deze banner staat bovendien buiten
   #app-shell, dus hij legde zich op elke mobiele en tabletbreedte over de
   navigatieknoppen heen, mét zijn eigen knoppen eroverheen. De lift staat nu
   in het 820px-blok verderop, bij dezelfde breedte waar de balk ontstaat.
   --------------------------------------------------------------------------- */
.install-banner {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  /* Onder een dialoogvenster (backdrop staat op 100): een uitnodiging mag nooit
     boven iets liggen waar iemand mee bezig is. */
  z-index: 90;
  display: flex;
  max-width: 460px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-inline: auto;
  border-radius: 16px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 18px 45px rgba(13, 27, 56, .3);
  padding: 14px 16px;
}

.install-banner[hidden] { display: none; }
.install-banner-copy { display: grid; gap: 3px; min-width: 0; }
.install-banner-copy strong { font-size: 13px; }
.install-banner-copy small { color: #c9d5e2; font-size: 11px; }
.install-banner-actions { display: flex; align-items: center; gap: 8px; }
.install-banner-actions .button { min-height: 44px; padding-inline: 18px; }
.install-banner-actions .text-button { min-height: 44px; color: #c9d5e2; }

@media (max-width: 520px) {
  .install-banner { flex-direction: column; align-items: stretch; }
  .install-banner-actions { justify-content: space-between; }
  .install-banner-actions .button { flex: 1; }
}

/* Onderin zit op een telefoon de navigatiebalk; die mag niet worden afgedekt. */
@media (max-width: 720px) {
  .install-banner { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------------------
   Veilige zone aan de bovenkant
   ---------------------------------------------------------------------------
   Als de app vanaf het beginscherm wordt geopend, staat er op iOS geen adresbalk
   meer boven de pagina. Met `apple-mobile-web-app-status-bar-style` op
   black-translucent loopt de pagina dan door tot achter de statusbalk -- de klok,
   het batterijpictogram en het netwerkicoon liggen daardoor over de bovenbalk van
   de app heen. Wat daaronder zit is niet meer aan te tikken.

   Dat trof Rol kiezen: in de browser werkte die knop wel, in de app niet, omdat
   daar de adresbalk die ruimte innam.

   env(safe-area-inset-top) is precies zo hoog als die statusbalk, en nul zodra
   er geen statusbalk overheen ligt -- dus in de browser en op desktop verandert
   er niets. De achtergrond van de balk loopt wel door tot de rand, zodat het
   geen witte strook wordt.
   --------------------------------------------------------------------------- */
.topbar {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Ook het loginscherm en de zijbalk beginnen bovenaan het scherm. */
.login-screen {
  padding-top: calc(28px + env(safe-area-inset-top, 0px));
}

@media (max-width: 720px) {
  /* De uitklappanelen hangen onder de bovenbalk; die schuiven mee omlaag. */
  .popover-panel {
    top: calc(82px + env(safe-area-inset-top, 0px));
  }
}

/* Zolang het installatieaanbod in beeld staat, schuift de pagina eronder mee.
   Anders ligt de balk over knoppen heen die daar toevallig staan. */
body.toont-installatieaanbod .main-content {
  padding-bottom: 190px;
}

/* === Leesbare tekstgrootte op een telefoon === */
/*
   Op desktop mag tekst klein zijn: je hebt ruimte en zit verder van het scherm.
   Op 412px is dat anders. Gemeten kwam de gemiddelde tekst hier uit op 12,9px,
   terwijl Apple en Google voor gewone tekst eerder 15 tot 17 aanhouden.

   Elke maat onder de 16px krijgt er twee pixels bij, en nooit minder dan 11px --
   die ondergrens blijft gelden, want twee pixels bij 8px is nog steeds te klein.
   Niet alles gelijktrekken, want dan verdwijnt het verschil tussen een kopje en
   de tekst eronder. Aangemaakt door analyse van de stylesheet, niet met de hand.

   Kosten, gemeten: de pagina wordt ongeveer 3% langer. Dat valt mee omdat de
   meeste ruimte naar kaarten en marges gaat, niet naar de letters zelf.
*/
@media (max-width: 720px) {
  .account-choice-panel button small { font-size: 11px; }
  .account-choice-panel button strong { font-size: 13px; }
  .admin-task-filters button { font-size: 11px; }
  .admin-task-heading p { font-size: 12px; }
  .admin-task-kind span { font-size: 11px; }
  .admin-task-kind strong { font-size: 13px; }
  /* 11px is de leesbaarheidsondergrens op de telefoon (MOB-H-011); bij die
     maat past "AUGUSTUS" niet meer in de 68px labelkolom, dus die groeit
     mee. De balk zelf houdt zijn vaste 56px, want juist daardoor zijn de
     maanden onderling te vergelijken. */
  .admin-task-months .admin-task-month { grid-template-columns: 78px 1fr 22px; }
  .admin-task-months .admin-task-month b { font-size: 11px; }
  .admin-task-month-heading small { font-size: 11px; }
  .admin-task-month-heading-copy > span { font-size: 12px; }
  .admin-task-month-heading-side small { font-size: 13px; }
  .admin-task-note small { font-size: 11px; }
  .admin-task-owner-heading { font-size: 11px; }
  .admin-task-person small { font-size: 11px; }
  .admin-task-person strong { font-size: 13px; }
  .administrator-person small { font-size: 11px; }
  .administrator-person strong { font-size: 13px; }
  .administrator-row small { font-size: 13px; }
  .announcement-item > p { font-size: 14px; }
  .announcement-item small { font-size: 13px; }
  .announcement-item-head > small { font-size: 11px; }
  .announcement-meta span { font-size: 11px; }
  .announcement-meta strong { font-size: 12px; }
  .announcement-withdrawal-note { font-size: 12px; }
  .approval-data small { font-size: 12px; }
  .approval-data strong { font-size: 14px; }
  .approval-person small { font-size: 12px; }
  .approval-person strong { font-size: 14px; }
  .assignment-bar small { font-size: 11px; }
  .assignment-bar strong { font-size: 14px; }
  .brand span { font-size: 13px; }
  .button { font-size: 15px; }
  .correction-banner p { font-size: 14px; }
  .correction-banner small { font-size: 11px; }
  .correction-banner strong { font-size: 14px; }
  .customer-timesheet-action-help { font-size: 12px; }
  .customer-timesheet-admin-meta small { font-size: 11px; }
  .customer-timesheet-admin-meta strong { font-size: 12px; }
  .customer-timesheet-admin-person strong { font-size: 15px; }
  .customer-timesheet-field-label { font-size: 12px; }
  .customer-timesheet-flow span { font-size: 13px; }
  .customer-timesheet-template-card > small { font-size: 11px; }
  .customer-timesheet-template-card h4 { font-size: 17px; }
  /* 16px: getypte onderwerp-/berichtvelden, zelfde iOS-zoomdrempel als elders. */
  .customer-timesheet-template-card input { font-size: 16px; }
  .customer-timesheet-template-card label { font-size: 12px; }
  .customer-timesheet-template-card textarea { font-size: 16px; }
  .customer-timesheet-upload-grid .month-choice-panel button { font-size: 13px; }
  .customer-timesheet-upload-grid .month-picker-trigger { font-size: 13px; }
  .customer-timesheet-upload-grid label { font-size: 12px; }
  .dashboard-action-empty { font-size: 13px; }
  .dashboard-next-action-copy > small { font-size: 13px; }
  .dashboard-next-action-copy p { font-size: 13px; }
  .dashboard-next-action-side .small-button { font-size: 13px; }
  .dashboard-next-action-side > small { font-size: 13px; }
  .dashboard-next-action-side > strong { font-size: 14px; }
  .dashboard-team-panel .panel-heading p { font-size: 12px; }
  .dashboard-team-table .person-cell strong { font-size: 14px; }
  .data-table td { font-size: 14px; }
  .data-table td small { font-size: 11px; }
  .data-table th { font-size: 11px; }
  .date-number { font-size: 14px; }
  .demo-badge { font-size: 12px; }
  .demo-employee-picker label { font-size: 13px; }
  .demo-employee-picker small { font-size: 12px; }
  .employee-announcement-card > p { font-size: 14px; }
  .employee-announcement-card footer { font-size: 11px; }
  .employee-announcement-card header > small { font-size: 11px; }
  .employee-announcement-card small { font-size: 13px; }
  .employee-card small { font-size: 13px; }
  .employee-customer-timesheet-card p { font-size: 13px; }
  .employee-dashboard-next small { font-size: 13px; }
  .employee-dashboard-next span { font-size: 13px; }
  .employee-details small { font-size: 11px; }
  .employee-details strong { font-size: 12px; }
  .employee-hero p { font-size: 16px; }
  .employee-history-current { font-size: 11px; }
  .employee-history-row small { font-size: 11px; }
  .employee-history-row strong { font-size: 13px; }
  .employee-identity small { font-size: 12px; }
  .employee-identity strong { font-size: 15px; }
  .employee-next-action-label { font-size: 11px; }
  .employee-next-action-meta { font-size: 12px; }
  .employee-open-action-copy small { font-size: 12px; }
  .employee-open-action-copy span { font-size: 11px; }
  .employee-open-action-copy strong { font-size: 14px; }
  .employee-open-month-heading-copy small { font-size: 12px; }
  .employee-open-month-heading-copy strong { font-size: 16px; }
  .empty-state p { font-size: 14px; }
  .environment-badge { font-size: 11px; }
  .eyebrow { font-size: 12px; }
  .fixed-audience span { font-size: 11px; }
  .fixed-audience strong { font-size: 12px; }
  .form-grid label { font-size: 12px; }
  .help-clear { font-size: 12px; }
  .help-contact-actions a { font-size: 11px; }
  .help-contact-actions button { font-size: 11px; }
  .help-faq-heading small { font-size: 11px; }
  .help-faq-heading strong { font-size: 13px; }
  .help-form button { font-size: 12px; }
  .help-inline-topics button { font-size: 12px; }
  .help-launcher strong { font-size: 13px; }
  .help-message { font-size: 13px; }
  .help-panel header small { font-size: 11px; }
  .help-panel header strong { font-size: 15px; }
  .help-suggestions button { font-size: 11px; }
  .hero-copy p { font-size: 16px; }
  .hero-owner-badge { font-size: 12px; }
  .hero-owner-badge b { font-size: 14px; }
  .hero-task-math > span { font-size: 12px; }
  .hero-task-math b { font-size: 14px; }
  .hero-task-math small { font-size: 12px; }
  .hours-day-entry .date-number { font-size: 15px; }
  .hours-review-grid .workday-cell strong { font-size: 16px; }
  .hours-table .date-number { font-size: 11px; }
  .hours-table .week-total { font-size: 14px; }
  .hours-table input { font-size: 16px; }
  .hours-table td small { font-size: 13px; }
  .hours-table td:first-child { font-size: 13px; }
  .hours-table th { font-size: 12px; }
  .hours-table th small { font-size: 13px; }
  .hours-view-toolbar > div:first-child small { font-size: 11px; }
  .hours-view-toolbar > div:first-child strong { font-size: 13px; }
  .hours-visible-total span { font-size: 13px; }
  .hours-visible-total strong { font-size: 15px; }
  .install-banner-copy small { font-size: 13px; }
  .install-banner-copy strong { font-size: 15px; }
  .invoice-action-note { font-size: 11px; }
  .invoice-brand-closing { font-size: 13px; }
  .invoice-brand-contact { font-size: 11px; }
  .invoice-brand-footer { font-size: 11px; }
  .invoice-brand-intro { font-size: 13px; }
  .invoice-brand-label { font-size: 11px; }
  .invoice-brand-logo span { font-size: 11px; }
  .invoice-brand-number-line span { font-size: 11px; }
  .invoice-brand-number-line strong { font-size: 16px; }
  .invoice-brand-party .invoice-brand-identity { font-size: 11px; }
  .invoice-brand-party dl { font-size: 12px; }
  .invoice-brand-party dt { font-size: 11px; }
  .invoice-brand-party p { font-size: 13px; }
  .invoice-brand-payment p { font-size: 12px; }
  .invoice-brand-references span { font-size: 11px; }
  .invoice-brand-references strong { font-size: 17px; }
  .invoice-brand-title > small { font-size: 12px; }
  .invoice-brand-title > span { font-size: 11px; }
  .invoice-brand-totals { font-size: 12px; }
  .invoice-brand-totals span { font-size: 11px; }
  .invoice-branded-template .invoice-preview-table td { font-size: 13px; }
  .invoice-branded-template .invoice-preview-table th { font-size: 11px; }
  .invoice-identity-preview small { font-size: 12px; }
  .invoice-identity-preview span { font-size: 11px; }
  .invoice-month-overview-action small { font-size: 11px; }
  .invoice-month-overview-copy p { font-size: 12px; }
  .invoice-month-overview-empty { font-size: 12px; }
  .invoice-month-overview-item small { font-size: 11px; }
  .invoice-month-overview-item strong { font-size: 13px; }
  .invoice-status-guide > button > span { font-size: 13px; }
  .invoice-status-guide small { font-size: 11px; }
  .invoice-status-guide strong { font-size: 13px; }
  .login-avatar { font-size: 14px; }
  .login-brand > span { font-size: 14px; }
  .login-option small { font-size: 13px; }
  .login-option strong { font-size: 17px; }
  .login-panel .login-note { font-size: 13px; }
  .login-panel > p { font-size: 15px; }
  .mail-acceptance-copy small { font-size: 12px; }
  .mail-delivery-history-main small { font-size: 11px; }
  .mail-delivery-history-meta span { font-size: 11px; }
  .mail-delivery-history-state small { font-size: 11px; }
  .mail-recipient-setting small { font-size: 13px; }
  .mail-route-choice small { font-size: 13px; }
  .mail-route-guide article > span { font-size: 13px; }
  .mail-route-guide small { font-size: 11px; }
  .mail-route-guide strong { font-size: 13px; }
  .metric-card > strong small { font-size: 17px; }
  .metric-card span { font-size: 13px; }
  .metric-label { font-size: 13px; }
  .metric-link { font-size: 13px; }
  .metric-note { font-size: 13px; }
  .mini-avatar { font-size: 13px; }
  .mobile-brand-home { font-size: 13px; }
  .mobile-brand-home span { font-size: 12px; }
  .mobile-role-switch { font-size: 13px; }
  #modal-message { font-size: 14px; }
  .modal-form .form-help { font-size: 11px; }
  /* 16px, niet 14px: onder 16px zoomt iOS Safari de hele pagina in zodra dit
     veld focus krijgt (hetzelfde al bewust opgelost voor .hours-input/
     .summary-hours-input hierboven). Deze velden komen voor in tientallen
     dialogen (medewerker/beheerder aanmaken, mededelingen, mailontvangers,
     correcties) -- zonder deze regel springt de pagina bij elk van die
     dialogen ongewenst uit op een iPhone. */
  .modal-form input { font-size: 16px; }
  .modal-form label { font-size: 12px; }
  .modal-form label.route-toggle { font-size: 13px; }
  .modal-form textarea { font-size: 16px; }
  .modal-queue small { font-size: 11px; }
  .modal-queue strong { font-size: 13px; }
  .modal-summary > div { font-size: 13px; }
  .month-batch-blocker-copy small { font-size: 11px; }
  .month-batch-blocker-copy strong { font-size: 12px; }
  .month-batch-blocker-owner small { font-size: 11px; }
  .month-batch-blocker-owner strong { font-size: 12px; }
  .month-batch-progress > strong { font-size: 13px; }
  .month-batch-summary > p { font-size: 12px; }
  .nav-count { font-size: 13px; }
  .nav-item span:nth-child(2), .nav-item > .nav-label-kort { font-size: 11px; }
  .notification-button b { font-size: 11px; }
  .notification-empty { font-size: 13px; }
  .notification-item small { font-size: 11px; }
  .notification-item span { font-size: 12px; }
  .notification-item strong { font-size: 13px; }
  .period-control .month-choice-panel button { font-size: 13px; }
  .period-control .month-picker-trigger { font-size: 14px; }
  .period-picker-caption { font-size: 11px; }
  /* 16px: #period-year-picker (het enige echte <input> in dit stel, de
     maandkiezer is een knop) is een getypt jaartal met een echt toetsenbord
     op iOS -- onder 16px zoomt Safari de pagina in bij het openen ervan. */
  .period-picker-fields input { font-size: 16px; }
  /* De laatste twee getypte velden onder de 16px-grens, bij [MOB-H-026]
     bewust uitgesteld omdat ze allebei eerst een blik op de breedte nodig
     hadden. Zoekveld in de factuurbalk (was 11px) en de mailsjabloon-editor
     onder Instellingen (was 13px); zonder deze regels zoomt iOS Safari bij
     het aantikken ervan de hele pagina in. Voor .invoice-search zie ook de
     breedteregel in het 590px-blok hieronder. */
  .invoice-search input { font-size: 16px; }
  .mail-channel-template input, .mail-channel-template textarea { font-size: 16px; }
  .popover-heading small { font-size: 11px; }
  .popover-heading strong { font-size: 15px; }
  .preference-row small { font-size: 11px; }
  .preference-row strong { font-size: 13px; }
  .profile-editor-copy small { font-size: 12px; }
  .profile-editor-copy strong { font-size: 16px; }
  .profile-menu > button { font-size: 13px; }
  .profile-menu-avatar { font-size: 13px; }
  .profile-menu-person small { font-size: 11px; }
  .profile-menu-person strong { font-size: 13px; }
  .profile-photo-control input { font-size: 12px; }
  .profile-photo-preview { font-size: 13px; }
  .progress-ring span { font-size: 15px; }
  .recipient-choice small { font-size: 11px; }
  .recipient-choice strong { font-size: 12px; }
  .reminder-choice-field { font-size: 11px; }
  .reminder-choice-panel button { font-size: 12px; }
  .reminder-choice-trigger { font-size: 12px; }
  .reminder-fixed-moment { font-size: 12px; }
  .reminder-fixed-moment small { font-size: 11px; }
  .reminder-fixed-moment strong { font-size: 12px; }
  .reminder-rule .check-row small { font-size: 11px; }
  .reminder-rule .check-row strong { font-size: 12px; }
  .reminder-schedule-summary > strong { font-size: 12px; }
  .reminder-schedule-summary span { font-size: 11px; }
  .route-template small { font-size: 13px; }
  .safe-domain-note { font-size: 12px; }
  .safety-badge { font-size: 11px; }
  .section-label { font-size: 12px; }
  .segmented-control button { font-size: 14px; }
  .settings-rule-list small { font-size: 11px; }
  .settings-rule-list strong { font-size: 12px; }
  .settings-section-nav button { font-size: 12px; }
  .settings-template-intro { font-size: 13px; }
  .settings-warning { font-size: 12px; }
  .small-button { font-size: 12px; }
  .status-pill { font-size: 13px; }
  .summary-card dd { font-size: 13px; }
  .summary-card dt { font-size: 13px; }
  .summary-note p { font-size: 12px; }
  .summary-note strong { font-size: 13px; }
  .switch-role { font-size: 13px; }
  .team-account-avatar { font-size: 13px; }
  .team-account-group small { font-size: 11px; }
  .team-account-group strong { font-size: 13px; }
  .team-account-local-notice { font-size: 13px; }
  .team-account-overview-copy small { font-size: 11px; }
  .template-person small { font-size: 11px; }
  .template-person strong { font-size: 13px; }
  .template-subject small { font-size: 11px; }
  .template-subject strong { font-size: 13px; }
  .text-button { font-size: 14px; }
  .timesheet-actions small { font-size: 12px; }
  .timesheet-actions strong { font-size: 14px; }
  .timesheet-submit-note { font-size: 13px; }
  .toast { font-size: 14px; }
  .topbar-avatar { font-size: 13px; }
  .topbar-quick-reset { font-size: 12px; }
  .updated-label { font-size: 13px; }
  .view-heading p { font-size: 15px; }
  .workflow-heading-meta small { font-size: 12px; }
  .workflow-heading-meta strong { font-size: 14px; }
  .workflow-progress-card small { font-size: 11px; }
  .workflow-progress-card strong { font-size: 13px; }
  .workflow-step > span { font-size: 13px; }
  .workflow-step small { font-size: 11px; }
  .workflow-step strong { font-size: 14px; }
  .workspace-user .avatar { font-size: 14px; }
  .workspace-user small { font-size: 13px; }
  .workspace-user strong { font-size: 15px; }
  }
/* Tweede mobiele ronde: hogere specificiteit dan de algemene regels hierboven. */
@media (max-width: 700px) {
  #hours-autosave-status,
  .metric-card small,
  #admin-task-summary,
  #invoice-month-overview-note,
  #timesheet-correction-meta { font-size: 13px; }
  .route-template { font-size: 12px; }
  .hours-table th { font-size: 14px; }
  #auth-reset-complete-feedback.is-success { font-size: 15px; }
}


/* Klassiek: standaardurenknop subtiel herkenbaar naast opslaan/indienen. */
#fill-standard-hours {
  border-color: rgba(58, 189, 157, .38);
  background: var(--green-light);
  color: var(--teal);
  font-weight: 700;
}

#fill-standard-hours:hover {
  border-color: rgba(22, 146, 118, .58);
  background: #dff5ee;
}

/* ==================================================================
   Medewerkerdashboard, telefoon — referentie handoff/medewerker-wild.html
   ==================================================================
   Bron: de designexport van Gio (zie DESIGNEXPORT-HERKOMST.md voor de sha256
   van de versie waartegen is gebouwd). Waarden zijn letterlijk overgenomen,
   niet afgerond en niet geinterpreteerd -- dat is een expliciete eis.

   Deze vormgeving vervangt de oude Klassieke look op telefoonformaat. Modern
   (data-skin="new") blijft ongemoeid: dat ontwerp loopt apart en mag hier niet
   door veranderen, vandaar de :not()-afbakening. De desktop-GUI volgt later uit
   handoff/medewerker-gui.html en wordt hier bewust niet geraakt. */

/* Standaard verborgen, en bewust zonder het hidden-attribuut: regel 116 zet
   [hidden] { display: none !important }, en daar komt geen media query
   overheen. De zichtbaarheid is hier een opmaakvraag (welke breedte), geen
   datavraag, dus die hoort in CSS te zitten en niet in JavaScript. */
.employee-hero .hero-oog,
.employee-hero .hero-maandtotaal,
.employee-hero .hero-contractregel { display: none; }

@media (max-width: 720px) {
  html:not([data-skin="new"]) .employee-hero {
    --w-mint-tekst: #037f63;
    --w-muted: #56655f;
    --w-hero-ink: #102235;
    --w-hero-tekst: #3d4c56;
    --w-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

    /* De hero is in de lichte modus zelf ook licht. Een donkere hero op een
       lichte pagina is in het ontwerptraject expliciet afgekeurd en drie keer
       teruggedraaid; dat mag niet terugkomen. */
    background: linear-gradient(146deg, #c3d8d2 0%, #b4cfca 46%, #9dc4c1 100%);
    border: 1px solid rgba(255, 255, 255, .5);
    color: var(--w-hero-ink);
    gap: 0;
    padding: 22px 18px 20px;
  }

  html[data-theme="dark"]:not([data-skin="new"]) .employee-hero {
    --w-mint-tekst: #5fd3b3;
    --w-muted: #93a2ac;
    --w-hero-ink: #fff;
    --w-hero-tekst: #c6d5e0;
    background: linear-gradient(142deg, #08142c 0%, #12294d 48%, #0f4a52 100%);
    border-color: rgba(255, 255, 255, .1);
  }

  /* "Mijn werkvoorraad" is in het ontwerp geen aparte regel meer: de begroeting
     zelf is de bovenste, ver uiteengezette kapitaalregel. */
  html:not([data-skin="new"]) .employee-hero .section-label { display: none; }

  html:not([data-skin="new"]) .employee-hero h2 {
    margin: 0;
    color: var(--w-mint-tekst);
    font-family: var(--letter-tekst);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
  }

  /* Statuspil: 999px, 10px/800, letter-spacing .1em, padding 5px 10px,
     kapitalen, met een stip van 6px in dezelfde inktkleur ervoor. */
  html:not([data-skin="new"]) .employee-hero .hero-oog {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 5px 10px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  html:not([data-skin="new"]) .employee-hero .hero-oog-stip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentcolor;
  }

  html:not([data-skin="new"]) .employee-hero .hero-oog[data-stand="jij"] {
    border: 1px solid #edc58f;
    background: #fff5e8;
    color: #a5600d;
  }

  html:not([data-skin="new"]) .employee-hero .hero-oog[data-stand="backoffice"] {
    border: 1px solid rgba(16, 34, 53, .16);
    background: rgba(255, 255, 255, .5);
    color: var(--w-mint-tekst);
  }

  html[data-theme="dark"]:not([data-skin="new"]) .employee-hero .hero-oog[data-stand="jij"] {
    border-color: #5a4526;
    background: #2d2313;
    color: #f0bd7a;
  }

  html[data-theme="dark"]:not([data-skin="new"]) .employee-hero .hero-oog[data-stand="backoffice"] {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
  }

  /* Maandtotaal: schreefletter 64px/400, letter-spacing -.045em, tabular-nums,
     regelhoogte .84 op de rij, 8px tussen getal en eenheid. */
  html:not([data-skin="new"]) .employee-hero .hero-maandtotaal {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin: 10px 0 0;
    line-height: .84;
  }

  html:not([data-skin="new"]) .employee-hero #employee-hero-maanduren {
    color: var(--w-hero-ink);
    font-family: var(--w-display);
    font-size: 64px;
    font-weight: 400;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
  }

  html:not([data-skin="new"]) .employee-hero .hero-maandtotaal-eenheid {
    padding-bottom: 9px;
    color: var(--w-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
  }

  html:not([data-skin="new"]) .employee-hero .hero-contractregel {
    display: block;
    margin-top: 7px;
    color: var(--w-muted);
    font-size: 11.5px;
    font-weight: 700;
  }

  /* "Volgende actie" wordt in het ontwerp het antwoord op "wat moet ik nu
     doen", in de schreefletter op 23px. Het labeltje erboven vervalt: de zin
     zegt het zelf al. */
  html:not([data-skin="new"]) .employee-hero .employee-next-action-label { display: none; }

  html:not([data-skin="new"]) .employee-hero p {
    margin: 8px 0 0;
    color: var(--w-hero-ink);
    font-family: var(--w-display);
    font-size: 23px;
    font-weight: 400;
    letter-spacing: -.024em;
    line-height: 1.18;
    text-wrap: balance;
  }

  html:not([data-skin="new"]) .employee-hero .employee-next-action-meta {
    display: block;
    margin-top: 14px;
    color: var(--w-hero-tekst);
    font-size: 13.5px;
    line-height: 1.6;
  }

  /* Hoofdactie: min-height 50px, radius 13px, mint vlak met navy tekst,
     14.5px/700 en de zachte mint-schaduw eronder. */
  html:not([data-skin="new"]) .employee-hero .employee-hero-actions {
    display: grid;
    gap: 8px;
    margin-top: 18px;
  }

  html:not([data-skin="new"]) .employee-hero .employee-hero-actions .button-primary {
    min-height: 50px;
    border: 0;
    border-radius: 13px;
    background: #3abd9d;
    color: #0d1b38;
    font-size: 14.5px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(58, 189, 157, .32);
  }

  html:not([data-skin="new"]) .employee-hero .employee-hero-actions .button-ghost {
    min-height: 50px;
    border: 1px solid rgba(16, 34, 53, .1);
    border-radius: 13px;
    background: rgba(255, 255, 255, .4);
    color: var(--w-hero-ink);
    font-size: 14px;
    font-weight: 700;
  }
}

/* Dagregels in Mijn uren op telefoon, volgens dezelfde referentie als de hero
   hierboven. In de export is een dag een rustige regel: dagnaam met datum
   links, dan de 0/8/9-keuze als aaneengesloten groep, en rechts het invulveld
   in de schreefletter. De app heeft dezelfde drie onderdelen maar in een andere
   volgorde en met een ander uiterlijk; alleen de vorm gaat mee, de werking
   blijft. Modern blijft ongemoeid (:not()-afbakening). */
@media (max-width: 720px) {
  html:not([data-skin="new"]) .hours-day-entry {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Volgorde uit de export: dag links, dan de snelkeuze, en het invulveld
     rechts. In de markup staat het veld vóór de snelkeuze, dus die volgorde
     wordt hier omgezet met order -- de DOM blijft ongemoeid, zodat de
     tabvolgorde en de bestaande testselectors kloppen. */
  html:not([data-skin="new"]) .hours-day-entry .date-number {
    order: 1;
    flex: 1;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    /* De basisregel maakt dit label een inline-flex met gecentreerde inhoud;
       met flex:1 erbij komt de tekst dan in het midden te hangen in plaats van
       links, zoals in de export. */
    justify-content: flex-start;
    text-align: left;
  }

  html:not([data-skin="new"]) .hours-day-entry .hours-day-presets { order: 2; }
  html:not([data-skin="new"]) .hours-day-entry .hours-input { order: 3; }

  /* De snelkeuze is in het ontwerp één aaneengesloten groep met een rand
     eromheen en haarlijnen ertussen, geen drie losse knoppen. */
  html:not([data-skin="new"]) .hours-day-entry .hours-day-presets {
    display: flex;
    flex: 0 0 auto;
    /* De basisregel geeft deze groep width: 64px. Daarin kromp elke knop van
       44px naar 20px: onder de WCAG-minimummaat van 24px en lastig te raken
       (verkenning doelgrootte, 19 sep; KLV-N-027). */
    width: auto;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    overflow: hidden;
  }

  html:not([data-skin="new"]) .hours-day-entry .hours-day-presets button {
    width: 44px;
    min-height: 46px;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
  }

  html:not([data-skin="new"]) .hours-day-entry .hours-day-presets button:first-child {
    border-left: 0;
  }

  /* Het uurgetal in de schreefletter, zoals de export: het is een bedrag, geen
     formulierveld. Breedte en hoogte exact uit de bron. */
  html:not([data-skin="new"]) .hours-day-entry .hours-input {
    width: 56px;
    flex: 0 0 auto;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 11px;
    font-family: var(--letter-kop);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    padding: 0 6px;
  }

  html:not([data-skin="new"]) .hours-day-entry .hours-input:focus {
    border-color: #3abd9d;
  }
}

/* Een indienknop met nog openstaande dagen. Gedempt, niet uitgeschakeld: de
   bevestiging blijft de poort, de knop vertelt alleen hoeveel er nog open
   staat. Ontwerpronde 14 sep, "grijs met Nog N dagen". */
.button.is-gedempt { background: var(--surface-muted); color: var(--muted); box-shadow: none; }
.button.is-gedempt:hover { background: var(--vlak-zacht); color: var(--navy-tekst); box-shadow: none; }

/* ===========================================================================
   Vandaag — de nieuwe Klassiek op desktop, 1-op-1 naar handoff/medewerker-gui.html
   (scope rechtgezet 14 sep: de referentie is Klassiek). Elke waarde komt uit de
   referentie; het regelnummer staat erbij, na te trekken in
   handoff/medewerker-gui.bron.txt.

   De tokens van de referentie (r11-45) staan onder hun eigen namen op #vandaag.
   Zo nemen onderdelen die hierheen verhuizen, zoals de klanturenstaatkaart, de
   referentiewaarden vanzelf over, zonder een tweede set regels.

   Waar de bestaande Klassieke opmaak botst met de referentie, wint de
   referentie: op desktop verdwijnen de oude hero, "Open acties per maand", de
   correctiebanner, de stappenlijst, de kerncijfers en de archiefregel, want de
   referentie heeft die blokken niet ("Nog te doen" neemt de open acties over,
   het verloop de stappenlijst). Op telefoon blijft voorlopig de huidige
   Klassiek, tot medewerker-wild.html is nagebouwd.
   ======================================================================== */
.vandaag { display: none; }
html:not([data-skin="new"]) #vandaag {
  /* r12-28 */
  --navy: #0d1b38; --mint: #3abd9d; --mint-tekst: #037f63; --mint-dark-tekst: #037f63;
  --ink: #172332; --muted: #485651; --line: #bfcec8; --line-zacht: #d0dcd6;
  /* Doorschijnend, zodat het veldverloop door de kaarten loopt (Gio 14 sep, export
     16:10; gui r14). Niet het dichte palet "salie" dat pas() nog over :root zet. */
  --surface: rgba(255,255,255,.78); --surface-muted: rgba(255,255,255,.46); --vlak: rgba(255,255,255,.78);
  --weekvlak: rgba(255,255,255,.55); --dag-leeg: rgba(232,176,106,.5); --dag-leeg-ink: #8a5510;
  --warning: #bb7623; --warning-bg: #fff5e8; --warning-tekst: #a5600d; --warning-rand: #edc58f;
  --hero-ring-leeg: rgba(16,34,53,.1);
  --kaart-ring: #ffffff; --kaart-glans: rgba(255,255,255,.9); --halo: rgba(58,189,157,.2);
  --schaduw: 0 6px 18px rgba(16,34,53,.07);
  --oog-taak: #8a5c1c; --oog-klaar: #1f6b4f;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --kop: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui, Arial, sans-serif;
  /* r184: kolom met gap 18px, max-width var(--pagina), gecentreerd */
  gap: 18px;
  max-width: var(--pagina);
  margin: 0 auto;
  color: var(--ink);
  font-family: var(--sans);
}
html[data-theme="dark"]:not([data-skin="new"]) #vandaag {
  --weekvlak: rgba(255,255,255,.05); --dag-leeg: #e8b06a; --dag-leeg-ink: #3a2205;
  /* r30-45; de pilkleuren uit r619 */
  --ink: #dde6ea; --muted: #93a2ac; --line: #22323d; --line-zacht: #1d2c36;
  --surface: #101c26; --surface-muted: #16242f; --vlak: #101c26;
  --mint-tekst: #5fd3b3; --mint-dark-tekst: #5fd3b3;
  --warning-bg: #2d2313; --warning-tekst: #f0bd7a; --warning-rand: #5a4526;
  --hero-ring-leeg: rgba(255,255,255,.13);
  --kaart-ring: #0a131a; --kaart-glans: rgba(255,255,255,.07); --halo: rgba(58,189,157,.5);
  --schaduw: 0 6px 20px rgba(0,0,0,.3);
  --oog-taak: #f0bd7a; --oog-klaar: #7fe0c0;
}

/* Kopkaart, gui r189-256 (DESIGN-BESLUITEN "Kop van het dashboard: maandspoor").
   Eén kaart: begroeting, maandkiezer, open dagen, spoor, weken, eerdere maanden
   en de hoofdknop. Geen eigen verloop op de kaart, alleen de mintgloed. */
@keyframes vd-ademen { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .68; transform: scale(1.07); } }
@keyframes vd-aandacht { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }
@keyframes vd-rijzen { from { transform: scaleY(.06); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
#vandaag .vd-kopkaart { position: relative; border-radius: 22px; background: var(--surface); padding: 20px clamp(18px, 3vw, 26px) 18px; overflow: hidden; box-shadow: inset 0 1px 0 var(--kaart-glans), var(--schaduw); }
#vandaag .vd-kopkaart-halo { position: absolute; top: -110px; right: -40px; width: 300px; height: 300px; border-radius: 50%; background: var(--halo); filter: blur(32px); opacity: .5; animation: vd-ademen 10s ease-in-out infinite; pointer-events: none; }
#vandaag .vd-kopkaart-boven { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px; }
#vandaag .vd-kop-tekst { min-width: 0; }
#vandaag .vd-kop-label { display: block; color: var(--mint-tekst); font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
#vandaag .vd-kop-titel { margin: 8px 0 0; color: var(--ink); font-family: var(--kop); font-size: clamp(24px, 2.5vw, 31px); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; }
#vandaag .vd-spreuk { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; font-style: italic; }
#vandaag .vd-kop-rechts { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 12px; }
#vandaag .vd-maandpil { display: flex; align-items: center; gap: 2px; border-radius: 999px; background: var(--surface); padding: 3px; box-shadow: inset 0 1px 0 var(--kaart-glans), 0 1px 2px rgba(16,34,53,.05); }
#vandaag .vd-maandpil button { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: 17px; }
#vandaag .vd-maandpil button:hover:not(:disabled) { background: var(--surface-muted); color: var(--ink); }
#vandaag .vd-maandpil button:disabled { color: var(--line); cursor: default; }
#vandaag .vd-maandpil strong { min-width: 118px; text-align: center; font-size: 12.5px; font-weight: 800; }
#vandaag .vd-kopcijfer { display: flex; align-items: flex-end; gap: 11px; }
#vandaag .vd-kopcijfer > strong { color: var(--ink); font-family: var(--kop); font-size: 46px; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -.055em; line-height: .82; }
#vandaag .vd-kopcijfer > span { padding-bottom: 5px; text-align: left; }
#vandaag .vd-kopcijfer small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
#vandaag .vd-kopcijfer small:first-child { margin-top: 0; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
#vandaag .vd-kopcijfer .vd-kop-uren { color: var(--mint-tekst); font-weight: 700; }
#vandaag .vd-wijs { position: relative; display: flex; align-items: baseline; gap: 9px; margin-top: 20px; min-height: 17px; }
#vandaag .vd-wijs strong { color: var(--ink); font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
#vandaag .vd-wijs small { color: var(--muted); font-size: 11.5px; }
#vandaag .vd-wijs small.is-leeg { color: var(--warning-tekst); }
#vandaag .vd-spoorvak { position: relative; margin-top: 14px; }
#vandaag .vd-spoorlijn { position: absolute; bottom: 0; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: var(--line-zacht); }
#vandaag .vd-spoor { display: flex; align-items: flex-end; gap: 0; height: 26px; }
#vandaag .vd-streep { display: grid; flex: 1; height: 26px; place-items: end center; cursor: pointer; }
#vandaag .vd-streep:hover { opacity: .55; }
/* Het streepje zelf, kopVals r551-558. */
.vd-streep > span, .vd-tel-streep > span { width: 2px; height: 26px; border-radius: 1px; background: var(--warning); box-shadow: none; transform-origin: bottom; animation: vd-rijzen .45s cubic-bezier(.22,1,.36,1) both, vd-aandacht 2.6s ease-in-out infinite; transition: height .45s cubic-bezier(.22,1,.36,1), background .45s ease; }
.vd-streep.is-gevuld > span, .vd-tel-streep.is-gevuld > span { height: 18px; background: #2f9e80; box-shadow: 0 0 10px rgba(58,189,157,.55); animation: vd-rijzen .45s cubic-bezier(.22,1,.36,1) both; }
.vd-streep.is-vrij > span, .vd-tel-streep.is-vrij > span { width: 1.5px; height: 8px; background: var(--line); animation: vd-rijzen .45s cubic-bezier(.22,1,.36,1) both; }
/* Weken, r229-237 en kopVals r594-596: elke kaart zo breed als hij dagen in de
   maand heeft (flex: <dagen> 1 0, in de markup gezet). */
#vandaag .vd-kopweken { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
#vandaag .vd-weekkaart { display: grid; gap: 3px; border: 0; border-radius: 12px; background: rgba(187,118,35,.12); color: var(--ink); cursor: pointer; min-width: 0; min-height: 60px; padding: 10px 12px; font: inherit; text-align: left; }
#vandaag .vd-weekkaart:hover { background: var(--surface-muted); }
#vandaag .vd-weekkaart:active { transform: scale(.985); }
#vandaag .vd-weekkaart strong { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vandaag .vd-weekkaart small { color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vandaag .vd-weekkaart .vd-weekstand { color: var(--warning-tekst); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
#vandaag .vd-weekkaart.is-compleet { background: rgba(58,189,157,.16); }
#vandaag .vd-weekkaart.is-compleet .vd-weekstand { color: var(--mint-tekst); }
#vandaag .vd-weekkaart.is-dicht { background: var(--surface-muted); }
#vandaag .vd-weekkaart.is-dicht .vd-weekstand { color: var(--muted); }
/* Eerdere maanden en de hoofdknop, r238-255. */
#vandaag .vd-nogtedoen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; border-top: 1px solid var(--line-zacht); padding-top: 14px; }
#vandaag .vd-eerder { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
#vandaag .vd-eerder > small[hidden] { display: none; }
#vandaag .vd-eerder > small { color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
#vandaag .vd-nogtedoen-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
#vandaag .vd-maandchip { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; min-height: 36px; font: inherit; font-size: 12px; font-weight: 700; padding: 0 14px; white-space: nowrap; }
#vandaag .vd-maandchip:hover { border-color: var(--mint); }
#vandaag .vd-maandchip:active { transform: scale(.97); }
#vandaag .vd-maandchip small { color: var(--muted); font-weight: 600; }
#vandaag .vd-maandchip span[aria-hidden] { opacity: .5; }
#vandaag .vd-kop-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#vandaag .vd-knop-hoofd { min-height: 44px; border: 0; border-radius: 999px; background: var(--mint); color: var(--navy); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; padding: 0 22px; flex: 0 0 auto; white-space: nowrap; box-shadow: 0 8px 20px rgba(58,189,157,.3); transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s; }
#vandaag .vd-knop-hoofd:hover { box-shadow: 0 11px 26px rgba(58,189,157,.44); }
#vandaag .vd-knop-hoofd:active { transform: scale(.97); box-shadow: 0 2px 22px rgba(58,189,157,.55); }
#vandaag .vd-knop-mail { min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; padding: 0 18px; flex: 0 0 auto; white-space: nowrap; transition: border-color .16s; }
#vandaag .vd-knop-mail:hover { border-color: var(--mint); }
#vandaag .vd-knop-mail[hidden] { display: none; }
/* gui r66-73: tot 780px breed wrappen de weken per twee en staat de onderrij
   onder elkaar. */
@media (max-width: 780px) {
  #vandaag .vd-kopweken > button { flex: 1 1 46% !important; min-height: 54px; }
  #vandaag .vd-streep { cursor: default; pointer-events: none; }
  #vandaag .vd-nogtedoen { flex-direction: column; align-items: stretch; gap: 9px; }
  #vandaag .vd-eerder { gap: 6px; }
  #vandaag .vd-nogtedoen button { flex: 1 1 auto; justify-content: space-between; min-height: 46px; font-size: 13px; padding: 0 13px; }
}

/* Onder de kopkaart, r258-259: de klanturenstaatkaart en het verloop. */
#vandaag .vd-onder { display: grid; gap: 16px; align-content: start; min-width: 0; }
#vandaag .vd-klant-plek:empty { display: none; }

/* Klanturenstaatkaart in Vandaag, r237-273. De kaart verhuist hierheen; zijn
   Klassieke kop maakt plaats voor de kop uit de referentie. */
.klantkaart-kop { display: none; }
#vandaag .employee-customer-timesheet-card { display: block; margin: 0; border: 1px solid var(--line-zacht); border-radius: 18px; background: var(--surface); padding: 16px 16px 14px; box-shadow: inset 0 1px 0 var(--kaart-glans), var(--schaduw); }
#vandaag .employee-customer-timesheet-card[data-klantkaart-stand="gekozen"] { border-color: var(--mint); }
#vandaag .employee-customer-timesheet-card .klantkaart-oude-kop { display: none; }
#vandaag .klantkaart-kop { display: flex; align-items: center; gap: 10px; }
#vandaag .klantkaart-icoon { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: rgba(58,189,157,.14); color: var(--mint-tekst); font-size: 14px; }
#vandaag .klantkaart-icoon.is-gemaild { background: var(--surface-muted); color: var(--muted); }
#vandaag .klantkaart-kop-tekst { flex: 1; min-width: 0; }
#vandaag .klantkaart-kop-tekst strong { display: block; color: var(--ink); font-size: 14px; font-weight: 700; }
#vandaag .klantkaart-kop-tekst small { display: block; margin-top: 1px; color: var(--muted); font-size: 11.5px; }
#vandaag .klantkaart-stand > .klantkaart-uitleg:first-child { margin-top: 11px; }
#vandaag .klantkaart-bestand { margin-top: 12px; }

/* Verloop, r276-287; teken en kleuren r565-569 */
#vandaag .vd-verloop { display: grid; gap: 14px; border: 1px solid var(--line-zacht); border-radius: 16px; background: var(--surface); padding: 16px 18px; box-shadow: inset 0 1px 0 var(--kaart-glans), var(--schaduw); }
#vandaag .vd-verloop-kop { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
#vandaag .vd-verloop-lijst { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
#vandaag .vd-stap { display: flex; align-items: flex-start; gap: 12px; }
#vandaag .vd-stap-bol { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--surface-muted); color: var(--muted); font-size: 11px; font-weight: 900; }
#vandaag .vd-stap div { min-width: 0; }
#vandaag .vd-stap strong { display: block; color: var(--muted); font-size: 13px; font-weight: 700; }
#vandaag .vd-stap small { display: block; margin-top: 1px; color: var(--muted); font-size: 11.5px; }
#vandaag .vd-stap.is-af .vd-stap-bol { background: #3abd9d; color: var(--navy); }
#vandaag .vd-stap.is-af strong { color: var(--mint-tekst); }
#vandaag .vd-stap.is-nu .vd-stap-bol { background: var(--warning); color: var(--navy); }
#vandaag .vd-stap.is-nu strong { color: var(--warning-tekst); }

@media (prefers-reduced-motion: reduce) {
  #vandaag .vd-kopkaart-halo, .vd-streep > span, .vd-tel-streep > span { animation: none; }
  #vandaag .vd-knop-hoofd, .vd-streep > span, .vd-tel-streep > span { transition: none; }
}

/* Welke opbouw waar: Vandaag in Klassiek vanaf 721px, en de blokken die de
   referentie niet heeft gaan daar weg. Modern en telefoon blijven zoals ze zijn. */
@media (min-width: 721px) {
  html:not([data-skin="new"]) #vandaag { display: grid; }
  html:not([data-skin="new"]) #view-employee-dashboard > .employee-hero,
  html:not([data-skin="new"]) #view-employee-dashboard > #employee-open-overview,
  html:not([data-skin="new"]) #view-employee-dashboard > #employee-dashboard-correction,
  html:not([data-skin="new"]) #view-employee-dashboard > #employee-status-keten,
  html:not([data-skin="new"]) #view-employee-dashboard > .employee-metrics { display: none !important; }
}
/* ===========================================================================
   Vandaag op telefoon — 1-op-1 naar handoff/medewerker-wild.html r113-212.
   Tokens uit r12-48, op #vd-tel onder hun eigen namen, zodat de klanturenstaat-
   kaart die hierheen verhuist de telefoonwaarden overneemt.
   ======================================================================== */
.vd-tel { display: none; }
html:not([data-skin="new"]) #vd-tel {
  /* r13-31 */
  --navy: #0d1b38; --mint: #3abd9d; --mint-tekst: #037f63; --mint-dark-tekst: #037f63;
  /* wild r13-18 (export 16:10), doorschijnend zodat het veld doorloopt. */
  --ink: #16241f; --muted: #5c6d66; --line: rgba(22,36,31,.09); --line-zacht: rgba(22,36,31,.05);
  --surface: rgba(255,255,255,.66); --surface-muted: rgba(22,52,42,.045); --vlak: rgba(255,255,255,.66);
  --weekvlak: rgba(255,255,255,.55); --dag-leeg: rgba(232,176,106,.5); --dag-leeg-ink: #8a5510;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --getal: #12332a; --ring-leeg: 22,36,31,.1;
  --warning: #bb7623; --warning-bg: #fff5e8; --warning-tekst: #a5600d; --warning-rand: #edc58f;
  --kaart-glans: rgba(255,255,255,.85); --halo: rgba(47,158,128,.3);
  --kaart-schaduw: 0 1px 1px rgba(22,52,42,.03), 0 6px 18px rgba(22,52,42,.055);
  --schaduw: var(--kaart-schaduw);
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--ink);
  font-family: var(--sans);
}
html[data-theme="dark"]:not([data-skin="new"]) #vd-tel {
  --weekvlak: rgba(255,255,255,.05); --dag-leeg: #e8b06a; --dag-leeg-ink: #3a2205;
  /* r33-47 */
  --ink: #dde6ea; --muted: #93a2ac; --line: #22323d; --line-zacht: #1d2c36;
  --surface: rgba(255,255,255,.05); --surface-muted: rgba(255,255,255,.055); --vlak: rgba(255,255,255,.05);
  --getal: #eaf3f0; --ring-leeg: 255,255,255,.11;
  --mint-tekst: #5fd3b3; --mint-dark-tekst: #5fd3b3;
  --warning-bg: #2d2313; --warning-tekst: #f0bd7a; --warning-rand: #5a4526;
  --kaart-glans: rgba(255,255,255,.07); --halo: rgba(58,189,157,.34);
}

/* Hero, r114-148 */
@keyframes vd-tel-ademen { 0%, 100% { opacity: .5; transform: translateX(-50%) scale(1); } 50% { opacity: .78; transform: translateX(-50%) scale(1.04); } }
#vd-tel .vd-tel-herovak { position: relative; margin: 8px 0 14px; }
#vd-tel .vd-tel-halo { position: absolute; bottom: 6px; left: 50%; width: 70%; height: 58px; border-radius: 50%; background: var(--halo); filter: blur(26px); animation: vd-tel-ademen 5.5s ease-in-out infinite; pointer-events: none; }
#vd-tel .vd-tel-hero { position: relative; padding: 6px 2px 4px; color: var(--ink); }
#vd-tel .vd-tel-groet { position: relative; margin: 0; color: var(--mint-tekst); font-size: 11px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }
#vd-tel .vd-tel-rij { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 10px; }
#vd-tel .vd-tel-cijfers { flex: 1; min-width: 0; }
#vd-tel .vd-tel-maandtotaal { display: flex; align-items: flex-end; gap: 8px; margin: 0; line-height: .84; }
#vd-tel .vd-tel-maandtotaal strong { font-family: var(--display); font-size: 52px; font-weight: 400; letter-spacing: -.045em; font-variant-numeric: tabular-nums; background: var(--getal); -webkit-background-clip: text; background-clip: text; color: transparent; }
#vd-tel .vd-tel-maandtotaal span { padding-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
#vd-tel .vd-tel-contractregel { display: block; margin-top: 5px; color: var(--muted); font-size: 11.5px; font-weight: 700; }
#vd-tel .vd-tel-antwoord { margin: 6px 0 0; color: var(--ink); font-family: var(--display); font-size: 20px; font-weight: 400; letter-spacing: -.024em; line-height: 1.18; text-wrap: balance; }
#vd-tel .vd-tel-ring { position: relative; display: grid; width: 70px; height: 70px; flex: 0 0 auto; place-items: center; }
#vd-tel .vd-tel-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
#vd-tel .vd-tel-ring circle { fill: none; stroke-width: 9; }
#vd-tel .vd-tel-ring-leeg { stroke: rgba(var(--ring-leeg)); }
#vd-tel .vd-tel-ring-boog { stroke: #2f9e80; stroke-linecap: round; stroke-dasharray: 229.3; stroke-dashoffset: 229.3; transition: stroke-dashoffset .8s cubic-bezier(.22,1,.36,1); filter: drop-shadow(0 0 7px rgba(58,189,157,.6)); }
#vd-tel .vd-tel-ring-binnen { position: relative; display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--kaart-glans); }
#vd-tel .vd-tel-ring-binnen strong { color: var(--ink); font-family: var(--display); font-weight: 400; font-size: 16px; font-variant-numeric: tabular-nums; line-height: 1; }
#vd-tel .vd-tel-toelichting { position: relative; margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
#vd-tel .vd-tel-toelichting[hidden] { display: none; }
#vd-tel .vd-tel-spreuk { position: relative; margin: 13px 0 0; color: var(--muted); font-family: var(--display); font-size: 14.5px; font-weight: 400; font-style: italic; letter-spacing: -.008em; line-height: 1.45; text-wrap: pretty; }
#vd-tel .vd-tel-acties { position: relative; display: grid; gap: 8px; margin-top: 14px; }
#vd-tel .vd-tel-knop-hoofd { min-height: 46px; border: 0; border-radius: 13px; background: var(--mint); color: var(--navy); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; box-shadow: 0 8px 20px rgba(58,189,157,.32); transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s; }
#vd-tel .vd-tel-knop-hoofd:active { transform: scale(.965); box-shadow: 0 2px 26px rgba(58,189,157,.6); }
#vd-tel .vd-tel-knop-mail { min-height: 50px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; }
#vd-tel .vd-tel-knop-mail[hidden] { display: none; }

/* Spoorkaart, wild r152-182: tussen hero en verloop. */
#vd-tel .vd-tel-spoorkaart { margin-bottom: 12px; border: 1px solid var(--line-zacht); border-radius: 18px; background: var(--surface); padding: 14px 15px 13px; box-shadow: inset 0 1px 0 var(--kaart-glans), var(--kaart-schaduw); }
#vd-tel .vd-tel-spoorkop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
#vd-tel .vd-tel-wijs { display: flex; align-items: baseline; gap: 8px; min-height: 16px; }
#vd-tel .vd-tel-wijs strong { font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
#vd-tel .vd-tel-wijs small { color: var(--muted); font-size: 11.5px; }
#vd-tel .vd-tel-open { display: flex; flex: 0 0 auto; align-items: flex-end; gap: 8px; }
#vd-tel .vd-tel-open strong { font-family: var(--display); font-size: 30px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: .84; }
#vd-tel .vd-tel-open small { padding-bottom: 3px; color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
#vd-tel .vd-tel-spoorvak { position: relative; margin-top: 12px; }
#vd-tel .vd-tel-spoorlijn { position: absolute; bottom: 0; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: var(--line-zacht); }
#vd-tel .vd-tel-spoor { display: flex; align-items: flex-end; gap: 0; height: 24px; }
#vd-tel .vd-streep { display: grid; flex: 1; height: 24px; place-items: end center; }
#vd-tel .vd-tel-weken { display: flex; gap: 5px; margin-top: 11px; }
#vd-tel .vd-tel-weekkaart { display: grid; flex: 1 !important; gap: 2px; border: 0; border-radius: 11px; background: rgba(187,118,35,.12); color: var(--ink); cursor: pointer; min-width: 0; min-height: 46px; padding: 7px 6px; font: inherit; text-align: center; }
#vd-tel .vd-tel-weekkaart:active { transform: scale(.97); }
#vd-tel .vd-tel-weekkaart strong { font-size: 11px; font-weight: 800; white-space: nowrap; }
#vd-tel .vd-tel-weekkaart small:not(.vd-weekstand) { display: none; }
#vd-tel .vd-tel-weekkaart .vd-weekstand { color: var(--warning-tekst); font-size: 9.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vd-tel .vd-tel-weekkaart.is-compleet { background: rgba(58,189,157,.16); }
#vd-tel .vd-tel-weekkaart.is-compleet .vd-weekstand { color: var(--mint-tekst); }
#vd-tel .vd-tel-weekkaart.is-dicht { background: var(--surface-muted); }
#vd-tel .vd-tel-weekkaart.is-dicht .vd-weekstand { color: var(--muted); }

/* Verloop als lijst, r150-162 */
#vd-tel .vd-tel-verloop { display: grid; gap: 1px; border: 1px solid var(--line-zacht); border-radius: 18px; background: var(--line-zacht); overflow: hidden; box-shadow: var(--kaart-schaduw); }
#vd-tel .vd-tel-verloop-kop { display: flex; width: 100%; align-items: center; gap: 10px; background: var(--surface); color: var(--ink); padding: 13px 16px 12px; text-align: left; }
#vd-tel .vd-tel-verloop-kop strong { flex: 1; min-width: 0; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
#vd-tel .vd-tel-verloop-kop small { color: var(--mint-tekst); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
#vd-tel .vd-tel-verloop-lijst { display: contents; margin: 0; padding: 0; list-style: none; }
#vd-tel .vd-tel-stap { display: flex; align-items: center; gap: 12px; background: var(--surface); color: var(--ink); padding: 14px 16px; }
#vd-tel .vd-tel-stap-bol { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--surface-muted); color: var(--muted); font-size: 11px; font-weight: 900; }
#vd-tel .vd-tel-stap strong { flex: 1; min-width: 0; color: var(--muted); font-size: 13.5px; font-weight: 700; }
#vd-tel .vd-tel-stap small { color: var(--muted); font-size: 11.5px; text-align: right; }
#vd-tel .vd-tel-stap.is-af .vd-tel-stap-bol { background: #3abd9d; color: var(--navy); }
#vd-tel .vd-tel-stap.is-af strong { color: var(--mint-tekst); }
#vd-tel .vd-tel-stap.is-nu .vd-tel-stap-bol { background: var(--warning); color: var(--navy); }
#vd-tel .vd-tel-stap.is-nu strong { color: var(--warning-tekst); }

/* Klanturenstaatkaart op telefoon, r165 (margin-bottom 12px, radius 18px). De
   kaartonderdelen zelf staan al onder #vandaag; hier alleen de telefoonplek. */
#vd-tel .vd-tel-klant-plek { margin-top: 12px; }
#vd-tel .vd-tel-klant-plek:empty { display: none; }
#vd-tel .employee-customer-timesheet-card { display: block; margin: 0 0 12px; border: 1px solid var(--line-zacht); border-radius: 18px; background: var(--surface); padding: 16px 16px 14px; box-shadow: inset 0 1px 0 var(--kaart-glans), var(--kaart-schaduw); }
#vd-tel .employee-customer-timesheet-card[data-klantkaart-stand="gekozen"] { border-color: var(--mint); }

@media (prefers-reduced-motion: reduce) {
  #vd-tel .vd-tel-halo { animation: none; }
  #vd-tel .vd-tel-ring-boog, #vd-tel .vd-tel-knop-hoofd { transition: none; }
}

/* Welke opbouw waar op telefoon. Vandaag staat in Klassiek nu op elke breedte;
   op telefoon toont hij de Wild-opbouw en verdwijnen de desktopdelen. Tegelijk
   gaan de oude Klassieke blokken ook op telefoon weg, "Open acties per maand"
   inbegrepen: dat mag pas nu, nu de telefoon Vandaag heeft (besluit Gio). De
   archiefregel verdwijnt op elke breedte: Maanden is een eigen tab. */
@media (max-width: 720px) {
  html:not([data-skin="new"]) #vandaag { display: block; }
  html:not([data-skin="new"]) #vd-tel { display: block; }
  html:not([data-skin="new"]) #vandaag > .vd-kopkaart,
  html:not([data-skin="new"]) #vandaag > .vd-onder { display: none !important; }
  html:not([data-skin="new"]) #view-employee-dashboard > .employee-hero,
  html:not([data-skin="new"]) #view-employee-dashboard > #employee-open-overview,
  html:not([data-skin="new"]) #view-employee-dashboard > #employee-dashboard-correction,
  html:not([data-skin="new"]) #view-employee-dashboard > #employee-status-keten,
  html:not([data-skin="new"]) #view-employee-dashboard > .employee-metrics { display: none !important; }
}
html:not([data-skin="new"]) #view-employee-dashboard > #employee-history-teaser { display: none !important; }

/* ===========================================================================
   Testomgevingsbalk, TEST 2.0.59 punt 8 (gecorrigeerd 14 sep). Alleen bij de
   medewerker in Klassiek; plaatsTestknoppen() in app.js zet de knoppen hier.
   Een smalle balk in de omgevingskleur boven de topbalk: hij hoort bij de
   testomgeving, niet bij het scherm, en scrolt dus gewoon mee weg. Binnen de
   zijmarge van de inhoud, want die verschilt per breedte.
   ======================================================================== */
.testbalk { display: none; }
/* Compact rechtsboven, geen band door de app (Gio 14 sep). */
html:not([data-skin="new"]) body[data-role="employee"] .testbalk:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px 8px;
  margin: 6px 0 0;
  border: 0;
  background: transparent;
  color: #a5600d;
  padding: 0;
}
html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] .testbalk:not([hidden]) {
  color: #f0bd7a;
}
/* In de menubalk op desktop: één regel, onderaan uitgelijnd met de tabs. */
html:not([data-skin="new"]) body[data-role="employee"] .sidebar > .testbalk:not([hidden]) {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-self: flex-end;
  margin: 0 6px 0 0;
  padding-bottom: 5px;
}
.testbalk-label { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .8; white-space: nowrap; }
.testbalk-knoppen { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 2px; }
html:not([data-skin="new"]) .testbalk .topbar-quick-reset { margin-left: 0; min-height: 32px; padding-inline: 8px; color: inherit; font-size: 10px; white-space: nowrap; }
html:not([data-skin="new"]) .testbalk .appearance-switches { border-color: rgba(165,96,13,.24); background: rgba(255,255,255,.26); padding: 2px; }
html:not([data-skin="new"]) .testbalk .appearance-switch { min-height: 32px; border: 1px solid transparent; padding-inline: 8px; color: inherit; }
html:not([data-skin="new"]) .testbalk .topbar-quick-reset:hover,
html:not([data-skin="new"]) .testbalk .appearance-switch:hover,
html:not([data-skin="new"]) .testbalk .appearance-switch[aria-pressed="true"] { border-color: var(--warning); background: rgba(187,118,35,.14); color: #7a4a09; }
html[data-theme="dark"]:not([data-skin="new"]) .testbalk .appearance-switches { border-color: #5b4328; background: rgba(255,255,255,.06); }
html[data-theme="dark"]:not([data-skin="new"]) .testbalk .topbar-quick-reset,
html[data-theme="dark"]:not([data-skin="new"]) .testbalk .appearance-switch { color: #ffd59b; }
html[data-theme="dark"]:not([data-skin="new"]) .testbalk .topbar-quick-reset:hover,
html[data-theme="dark"]:not([data-skin="new"]) .testbalk .appearance-switch:hover,
html[data-theme="dark"]:not([data-skin="new"]) .testbalk .appearance-switch[aria-pressed="true"] { border-color: #efb76f; background: rgba(239,183,111,.18); color: #fff2dd; }
@media (max-width: 820px) {
  html:not([data-skin="new"]) .testbalk .topbar-quick-reset,
  html:not([data-skin="new"]) .testbalk .appearance-switch { min-height: 44px; }
}

/* De omgeving en versie staan nu in de balk; niet nog eens onder de titel. En
   op Vandaag begint het scherm met de begroeting: geen paginatitel erboven. */
html:not([data-skin="new"]) body[data-role="employee"] .topbar-context { display: none; }
/* Elk medewerkerscherm heeft zijn eigen kop (Vandaag de kopkaart, de andere
   schermen hun view-heading). De paginatitel in de topbalk toonde hetzelfde
   nog eens (Gio 14 sep: "Mijn maanden" en "Mijn mededelingen" dubbel). */
html:not([data-skin="new"]) body[data-role="employee"] .topbar-title { display: none; }

/* TEST 2.0.59, punt 9: op telefoon zweefde deze knop over de klanturenstaat-
   kaart en de tabbalk. Daar staat dezelfde actie al in de topbalk
   (#mobile-switch-role), dus in Klassiek hoeft de zwevende knop er niet.
   Onderaan het bestand en niet bij .switch-role: [MOB-H-028] leest de eerste
   max-width:720px-query in dit bestand. */
@media (max-width: 720px) {
  html:not([data-skin="new"]) #switch-role { display: none; }
}

/* ===========================================================================
   Eén veld over de hele pagina (DESIGN-BESLUITEN "Licht samenhangend houden",
   14 sep avond). Alleen licht; donker bleef deze ronde ongemoeid.
   - Het verloop hangt aan het venster (background-attachment: fixed, size cover),
     niet aan de inhoud: anders zit elke kaart in een andere toon.
   - Kaarten hebben geen eigen verloop; de menubalk is doorschijnend met blur,
     zodat het veld vanaf de bovenrand doorloopt.
   Desktop: gui r14 en r26 (--bg #cfe1d8). Telefoon: wild r6 en r20 (--bg #dfe9e4).
   ======================================================================== */
html:not([data-skin="new"]):not([data-theme="dark"]) body[data-role="employee"] {
  background-color: #cfe1d8;
  background-image: linear-gradient(176deg, #a9cbbb 0%, #bfd8cc 22%, #d5e7df 52%, #e8f2ed 78%, #f7fbf9 100%);
  background-attachment: fixed;
  background-size: cover;
}
html:not([data-skin="new"]):not([data-theme="dark"]) body[data-role="employee"] .topbar {
  border-bottom-color: #bfcec8;
  background: transparent;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Desktopnavigatie uit medewerker-gui.html r83-113. Op de lichte Klassieke
   medewerkerskant is dit een horizontale, doorschijnende menubalk boven het
   veld; de oude donkerblauwe zijbalk hoort bij de vorige vorm. Geldt in licht
   én donker (verzoek Gio 14 sep: in donker viel het menu terug op de zijbalk).
   Beheer, Modern en de onderste navigatie tot 820px blijven ongemoeid.

   De bestaande sidebar-markup blijft bewust staan: dezelfde vier knoppen en
   telbolletjes houden daardoor hun gedrag, focusvolgorde en toegankelijke naam.
   Alleen hun plaats en vorm veranderen. */
@media (min-width: 821px) {
  html:not([data-skin="new"]) body[data-role="employee"] .sidebar {
    position: sticky;
    inset: 0 auto auto;
    z-index: 20;
    display: flex;
    width: 100%;
    height: 64px;
    flex-direction: row;
    align-items: flex-end;
    gap: 24px;
    border-bottom: 1px solid var(--nav-rand, #bfcec8);
    background: transparent;
    color: var(--ink);
    padding: 6px max(14px, calc((100vw - var(--pagina)) / 2)) 0;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  html:not([data-skin="new"]) body[data-role="employee"] .brand {
    flex: 0 0 auto;
    align-self: stretch;
    color: var(--ink);
    padding-bottom: 11px;
  }

  html:not([data-skin="new"]) body[data-role="employee"] .brand img {
    width: 68px;
  }

  html:not([data-skin="new"]) body[data-role="employee"] .brand span {
    display: none;
  }

  html:not([data-skin="new"]) body[data-role="employee"] .nav-list,
  html:not([data-skin="new"]) body[data-role="employee"] .nav-group:not([hidden]) {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
    margin: 0;
  }

  html:not([data-skin="new"]) body[data-role="employee"] .nav-item {
    min-height: 42px;
    flex: 0 0 auto;
    gap: 7px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    padding: 0 4px;
    margin-right: 12px;
    white-space: nowrap;
  }

  html:not([data-skin="new"]) body[data-role="employee"] .nav-item:hover {
    background: transparent;
    color: var(--ink);
  }

  /* Alleen de lichte modus. Gemeten op 1 okt: var(--muted) (#65717f) op de bleekgroene
     kopbalk rgb(207,225,216) geeft 3.65:1, terwijl WCAG 2.2 AA (1.4.3 Contrast, minimum)
     4.5:1 eist voor gewone tekst. "Mijn uren", "Maanden" en "Berichten" waren daardoor
     nauwelijks te lezen (Remy-LeBeau, 1 okt: "bij light moeilijk leesbaar"). #4d5866 op
     diezelfde achtergrond geeft 5.31:1; dezelfde koele grijstint, alleen donkerder, dus
     de actieve tab blijft het accent.

     Met :not([data-theme="dark"]) ervoor, en niet door de kleur hierboven te vervangen.
     Die eerste poging was fout: var(--muted) is per thema anders (in donker
     rgb(177,191,203)), en een vaste waarde maakte van 9.95:1 in donker ineens 2.58:1.
     Dat is dezelfde fout als de crème weekpanelen van 30 september, maar omgekeerd.
     DASH-N-045 meet daarom beide thema's. */
  html:not([data-skin="new"]):not([data-theme="dark"]) body[data-role="employee"] .nav-item {
    color: #4d5866;
  }

  html:not([data-skin="new"]) body[data-role="employee"] .nav-item.is-active {
    border-bottom-color: var(--mint);
    background: transparent;
    color: var(--ink);
    font-weight: 700;
  }

  html:not([data-skin="new"]) body[data-role="employee"] .nav-item.is-active::before,
  html:not([data-skin="new"]) body[data-role="employee"] .nav-marker {
    display: none;
  }

  html:not([data-skin="new"]) body[data-role="employee"] .nav-count {
    margin-left: 0;
    font-size: 9.5px;
    padding: 1px 6px;
  }

  html:not([data-skin="new"]) body[data-role="employee"] .sidebar-footer {
    position: relative;
    display: block;
    width: 32px;
    height: 42px;
    flex: 0 0 32px;
    border: 0;
    padding: 5px 0;
  }

  html:not([data-skin="new"]) body[data-role="employee"] .sidebar-footer .workspace-user {
    display: block;
  }

  html:not([data-skin="new"]) body[data-role="employee"] .workspace-user .avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background-color: rgba(58,189,157,.16);
    color: var(--mint-tekst);
    font-size: 11px;
  }

  html:not([data-skin="new"]) body[data-role="employee"] .workspace-user > span:last-child,
  html:not([data-skin="new"]) body[data-role="employee"] .sidebar-footer .demo-badge {
    display: none;
  }

  /* De avatar is tegelijk de bestaande, toegankelijke rolwisselactie. */
  html:not([data-skin="new"]) body[data-role="employee"] #switch-role {
    position: absolute;
    inset: 5px 0;
    z-index: 1;
    display: block;
    width: 32px;
    min-height: 32px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: transparent;
    font-size: 0;
    padding: 0;
  }

  html:not([data-skin="new"]) body[data-role="employee"] #switch-role:hover {
    background: rgba(58,189,157,.1);
  }

  html:not([data-skin="new"]) body[data-role="employee"] .main-content {
    margin-left: 0;
    padding-inline: clamp(18px, 3vw, 36px);
  }

  html:not([data-skin="new"]) body[data-role="employee"] .topbar {
    /* Alleen de menubalk loopt mee (Gio 14 sep: de doorzichtige topbalk plakte
       als tweede wazige band onder de menubalk). */
    position: static;
    max-width: var(--pagina);
    margin-inline: auto;
  }

  /* Geen topbalk bij de medewerker op desktop: bel en profielmenu staan in de
     menubalk, de maandkiezer als pil in de kopkaart (Vandaag) of naast de
     schermtitel (plaatsKopBediening in app.js). Zo blijft
     alles bereikbaar zonder dubbel te staan. De safe-area-regel blijft de laatste
     .topbar-regel (smoke-contract). */
  html:not([data-skin="new"]) body[data-role="employee"] .topbar {
    display: none;
    padding-top: env(safe-area-inset-top, 0px);
  }
}
html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] { --nav-rand: var(--line); }

@media (max-width: 720px) {
  html:not([data-skin="new"]):not([data-theme="dark"]) body[data-role="employee"] {
    background-color: #dfe9e4;
    background-image: linear-gradient(176deg, #c4dbd1 0%, #d6e8e0 26%, #e9f3ef 58%, #f8fcfa 82%, #ffffff 100%);
  }
}

/* Eén avatar (Gio 14 sep: "MR" stond twee keer). De avatar met het profielmenu
   staat in de topbalk; in de menubalk blijft alleen de rolwissel over, als
   rustige tekstknop (in productie heet hij "Uitloggen"). */
@media (min-width: 821px) {
  html:not([data-skin="new"]) body[data-role="employee"] .sidebar-footer {
    width: auto;
    flex: 0 0 auto;
    padding: 0 0 5px;
    align-self: flex-end;
  }
  html:not([data-skin="new"]) body[data-role="employee"] .sidebar-footer .workspace-user { display: none; }
  html:not([data-skin="new"]) body[data-role="employee"] #switch-role {
    position: static;
    display: inline-flex;
    width: auto;
    min-height: 32px;
    align-items: center;
    border: 1px solid var(--nav-rand, #bfcec8);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    padding: 0 12px;
    white-space: nowrap;
  }
  html:not([data-skin="new"]) body[data-role="employee"] #switch-role:hover { border-color: var(--mint); color: var(--ink); background: transparent; }
}

/* Smalle desktop (821-1079px; de gewone balk past vanaf ~1000px, maar met maar 21px speling,
   en Linux-lettertypes zijn breder: in CI lag het label al over Maanden), bewust NA de menubalkregels hierboven (gelijke
   specificiteit, dus de latere regel wint): de menubalk had 955px nodig (tabs 360 + logo,
   testbalk, rolknop, bel en profiel 595) en kreeg er bij 821px 793. Het label
   "LOKAAL · VERSIE x" liep daardoor dwars over Maanden en Berichten
   (monkey-vondst, KLV-N-003). Kleinere tussenruimtes, en het label toont hier
   alleen de omgeving; het versienummer staat ook onderaan elke pagina. Staat er
   geen omgeving (productie), dan blijft de versie gewoon zichtbaar. */
@media (min-width: 821px) and (max-width: 1079px) {
  html:not([data-skin="new"]) body[data-role="employee"] .sidebar { gap: 10px; padding-inline: 10px; }
  html:not([data-skin="new"]) body[data-role="employee"] .nav-group:not([hidden]) { gap: 2px; }
  html:not([data-skin="new"]) body[data-role="employee"] .nav-item { margin-right: 2px; padding-inline: 2px; font-size: 12.5px; }
  html:not([data-skin="new"]) body[data-role="employee"] #switch-role { padding: 0 8px; }
  html:not([data-skin="new"]) body[data-role="employee"] .sidebar > .testbalk:not([hidden]) { margin-right: 0; }
  html:not([data-skin="new"]) body[data-role="employee"] .sidebar > .testbalk .testbalk-omgeving + .testbalk-versie { display: none; }
}

/* Klanturenstaatpaneel: dezelfde binnenmarge als de koppen (Gio 14 sep: tekst en
   velden plakten tegen de linkerrand). */
html:not([data-skin="new"]) body[data-role="employee"] #customer-timesheet-upload-panel { padding-bottom: 22px; }
html:not([data-skin="new"]) body[data-role="employee"] #customer-timesheet-upload-panel > :not(.panel-heading) { margin-inline: 24px; }

/* Bel en profielmenu in de menubalk, gui r109-112: 32px, radius 9. */
@media (min-width: 821px) {
  html:not([data-skin="new"]) body[data-role="employee"] .sidebar > .topbar-popover {
    flex: 0 0 auto;
    align-self: flex-end;
    padding-bottom: 5px;
  }
  html:not([data-skin="new"]) body[data-role="employee"] .sidebar > .topbar-popover .notification-button,
  html:not([data-skin="new"]) body[data-role="employee"] .sidebar > .topbar-popover .profile-menu-button {
    width: 32px;
    height: 32px;
    min-height: 32px;
    border: 1px solid var(--nav-rand, #bfcec8);
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  html:not([data-skin="new"]) body[data-role="employee"] .sidebar > .topbar-popover .topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    /* background-color, niet de background-shorthand: die zet ook
       background-image/-size/-position terug naar hun beginwaarde, en dan
       toont een gekozen avatarfoto alleen nog de linkerbovenhoek van de
       afbeelding op ware grootte in plaats van het hele plaatje passend
       gecentreerd -- bij Stasjo's avatar toevallig een effen lichte hoek,
       dus leek de knop leeg. Gevonden op een echte schermafbeelding, 950px
       breed (821-1079px, precies dit blok). */
    background-color: rgba(58,189,157,.16);
    color: var(--mint-tekst);
  }
  html:not([data-skin="new"]) body[data-role="employee"] .sidebar > .topbar-popover .popover-panel { top: calc(100% + 4px); right: 0; left: auto; }

  /* De echte maandkiezer als pil in de kopkaart, gui r198-202. */
  #vandaag .vd-kop-rechts:has(> #global-period-control) > .vd-maandpil { display: none; }
  html:not([data-skin="new"]) body[data-role="employee"] .view-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 18px; margin: clamp(18px, 3vw, 30px) 0 clamp(18px, 2.4vw, 26px); }
  html:not([data-skin="new"]) body[data-role="employee"] .view-heading > div:first-child { flex: 0 1 auto; }
  html:not([data-skin="new"]) body[data-role="employee"] .view-heading > .text-button { margin-left: auto; }
  html:not([data-skin="new"]) body[data-role="employee"] .view-heading .section-label { font-size: 10px; letter-spacing: .13em; }
  html:not([data-skin="new"]) body[data-role="employee"] .view-heading h2 { margin: 5px 0 0; font-size: clamp(25px, 2.7vw, 33px); letter-spacing: -.022em; line-height: 1.12; }
  html:not([data-skin="new"]) body[data-role="employee"] .view-heading > #global-period-control,
  #vandaag .vd-kop-rechts > #global-period-control {
    min-height: 42px;
    margin: 0;
    gap: 2px;
    border: 0;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 1px 0 var(--kaart-glans), 0 1px 2px rgba(16,34,53,.05);
    padding: 3px;
  }
  html:not([data-skin="new"]) body[data-role="employee"] #global-period-control .period-picker-caption { display: none; }
  html:not([data-skin="new"]) body[data-role="employee"] #global-period-control #period-prev,
  html:not([data-skin="new"]) body[data-role="employee"] #global-period-control #period-next {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 17px;
  }
  html:not([data-skin="new"]) body[data-role="employee"] #global-period-control #period-prev:hover,
  html:not([data-skin="new"]) body[data-role="employee"] #global-period-control #period-next:hover { background: var(--surface-muted); color: var(--ink); }
  html:not([data-skin="new"]) body[data-role="employee"] #global-period-control .month-picker-trigger,
  html:not([data-skin="new"]) body[data-role="employee"] #global-period-control #period-year-picker {
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 800;
  }
  html:not([data-skin="new"]) body[data-role="employee"] #global-period-control #period-year-picker { width: 48px; padding: 0; }
}

/* Hulpmenu's uit beeld (Gio 14 sep: "zet die hulpmenu's op een plek waardoor de
   ware GUI gezien kan worden"). In de testbalk bij de medewerker in Klassiek
   zijn Herstel demo, Licht en Klassiek kleine pictogrammen; de naam staat in de
   title en blijft voor schermlezers en tests in de knop. Omgeving en versie
   blijven klein leesbaar, zodat je ziet welke versie je test. */
html:not([data-skin="new"]) body[data-role="employee"] .testbalk .testknop-tekst,
html:not([data-skin="new"]) body[data-role="employee"] .testbalk .appearance-switch strong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
html:not([data-skin="new"]) body[data-role="employee"] .testbalk .topbar-quick-reset,
html:not([data-skin="new"]) body[data-role="employee"] .testbalk .appearance-switch {
  display: inline-grid;
  width: 30px;
  min-height: 30px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0;
  opacity: .7;
}
html:not([data-skin="new"]) body[data-role="employee"] .testbalk .topbar-quick-reset:hover,
html:not([data-skin="new"]) body[data-role="employee"] .testbalk .appearance-switch:hover {
  border-color: currentColor;
  background: transparent;
  opacity: 1;
}
html:not([data-skin="new"]) body[data-role="employee"] .testbalk-label { font-size: 8.5px; opacity: .65; }
@media (max-width: 820px) {
  html:not([data-skin="new"]) body[data-role="employee"] .testbalk .topbar-quick-reset,
  html:not([data-skin="new"]) body[data-role="employee"] .testbalk .appearance-switch { width: 44px; min-height: 44px; }
}

/* ===========================================================================
   Mijn uren in Klassiek, 1-op-1 naar medewerker-gui.bron.txt r319-371 met het
   doorschijnende kaarten (Gio 14 sep: "op zet anders bij design"). Eén kaart: weekkeuze
   met totaal, de tabel en een voetbalk met één uitlegregel en de knoppen. Geen
   opdrachtbalk, geen oranje blok met dagchips, geen maandtotaalregel, alles één
   kolom. De samenvatting alleen als verlof en ziekte hier ingevuld kunnen worden.
   ======================================================================== */
html:not([data-skin="new"]) body[data-role="employee"] #hours-missing-days { display: none !important; }
html:not([data-skin="new"]) body[data-role="employee"] .hours-table tfoot { display: none; }
@media (min-width: 821px) {
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet {
    --surface: rgba(255,255,255,.78); --surface-muted: rgba(255,255,255,.46); --line: #bfcec8; --line-zacht: #d0dcd6; --muted: #485651; --ink: #172332;
    --veld-vlak: #fff; --veld-rand: rgba(22,52,42,.22); --kaart-glans: rgba(255,255,255,.9);
  }
  html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] #view-timesheet {
    --surface: rgba(17,29,43,.88); --surface-muted: rgba(30,45,61,.82); --line: #3b5064; --line-zacht: #2f4356; --muted: #b6c6d0; --ink: #f2f7f6;
    /* Donker vak met lichte cijfers. Was #f7fbfa (bijna wit) terwijl --ink hier bijna wit
       is: ingevulde uren waren onzichtbaar (Gio 15 sep, KLV-H-019). */
    --veld-vlak: #0d1a26; --veld-rand: #5a7288; --kaart-glans: rgba(255,255,255,.08);
  }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .view-heading p,
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .assignment-bar,
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-view-toolbar > div:first-child,
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-week-scroll-hint { display: none; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .timesheet-layout { grid-template-columns: minmax(0, 1fr); }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .summary-card:has(#summary-leave:disabled) { display: none; }

  /* De kaart, r324 */
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .timesheet-panel { border: 1px solid var(--line-zacht); border-radius: 16px; background: var(--surface); overflow: hidden; box-shadow: none; }
  /* Weekkeuze en totaal, r325-335 */
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-view-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-zacht); background: transparent; padding: 12px 15px; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-week-filter-wrap { min-width: 0; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-week-filter { display: flex; flex-wrap: wrap; gap: 3px; border: 1px solid var(--line-zacht); border-radius: 11px; background: var(--surface-muted); padding: 3px; overflow: visible; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-week-filter button { min-height: 34px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; padding: 0 12px; white-space: nowrap; box-shadow: none; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-week-filter button.is-active { border-color: var(--line); background: var(--surface); color: var(--ink); font-weight: 800; box-shadow: inset 0 1px 0 var(--kaart-glans); }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-visible-total { margin-left: auto; flex: 0 0 auto; text-align: right; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-visible-total span { display: block; color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-visible-total strong { display: block; color: var(--ink); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }

  /* Tabel, r336-364 */
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .table-wrap { border: 0; border-radius: 0; background: transparent; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: transparent; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-table thead th { background: var(--surface-muted); border-bottom: 1px solid var(--line-zacht); color: var(--ink); font-size: 10.5px; font-weight: 800; padding: 8px 4px; text-align: center; text-transform: none; letter-spacing: 0; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-table thead th:first-child { width: 88px; padding-inline: 11px; text-align: left; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-table thead th:first-child,
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-table thead th:last-child { color: var(--muted); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-table thead th:last-child { width: 66px; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-table tbody tr { border-bottom: 1px solid var(--line-zacht); background: transparent; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-table tbody td { border: 0; background: transparent; padding: 8px 5px; vertical-align: middle; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-table td.hours-weekcel { padding-inline: 11px; text-align: left; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-weekcel strong { display: block; color: var(--mint-tekst); font-size: 12px; font-weight: 700; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-weekcel small { display: block; color: #8a5c1c; font-size: 9px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-weekcel small:not(.is-open) { color: var(--mint-tekst); }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-table td.outside-month { background: transparent; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-day-entry { display: grid; justify-items: center; gap: 4px; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-day-entry .date-number { color: var(--muted); font-size: 9.5px; font-weight: 700; white-space: nowrap; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-input { width: 100%; max-width: 84px; min-height: 38px; border: 1px solid var(--veld-rand); border-radius: 9px; background: var(--veld-vlak); color: var(--ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; padding: 0 2px; box-shadow: none; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-input:focus { border-color: var(--mint); outline: none; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-day-presets { display: flex; gap: 3px; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-day-presets button { min-width: 26px; min-height: 24px; border: 1px solid var(--line-zacht); border-radius: 6px; background: transparent; color: var(--muted); font-size: 10.5px; font-weight: 800; padding: 0 4px; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .week-total { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }

  /* Voetbalk, r365-370 */
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .timesheet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; border-top: 0; background: var(--surface-muted); padding: 12px 14px; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .timesheet-actions > p:first-child { flex: 1; min-width: 150px; margin: 0; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet #hours-target-help { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .timesheet-action-buttons { display: flex; flex-wrap: wrap; gap: 9px; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .timesheet-action-buttons .button { min-height: 42px; border-radius: 10px; font-size: 12.5px; font-weight: 700; padding: 0 15px; white-space: nowrap; box-shadow: none; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet #fill-standard-hours { border: 1px solid var(--mint); background: rgba(58,189,157,.12); color: var(--mint-tekst); }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet #reset-standard-hours,
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet #save-timesheet { border: 1px solid var(--line); background: transparent; color: var(--muted); }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet #submit-timesheet { border: 0; background: var(--mint); color: var(--navy); padding-inline: 17px; box-shadow: 0 6px 16px rgba(58,189,157,.26); }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet #submit-timesheet.is-gedempt { background: var(--surface-muted); color: var(--muted); }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet #submit-timesheet:active { transform: scale(.97); }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .timesheet-submit-note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 11.5px; }
  html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .timesheet-panel { box-shadow: 0 18px 42px rgba(0,0,0,.22); }
  html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-table tbody tr { background: rgba(255,255,255,.035); }
  html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-table tbody tr:hover { background: rgba(58,189,157,.08); }
  html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-day-presets button { border-color: #4a6175; background: rgba(255,255,255,.04); color: #d8e4e2; }
  html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-day-presets button:hover { border-color: var(--mint); background: rgba(58,189,157,.18); color: #ffffff; }
  html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] #view-timesheet #fill-standard-hours:not(:disabled) { border-color: var(--mint); background: var(--mint); color: #07111d; box-shadow: 0 8px 22px rgba(58,189,157,.28); }
  html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] #view-timesheet #fill-standard-hours:disabled { border-style: dashed; border-color: #5d746d; background: rgba(255,255,255,.05); color: #9fb0b8; opacity: 1; }
  html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] #view-timesheet #reset-standard-hours,
  html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] #view-timesheet #save-timesheet { border-color: #6b7f91; background: rgba(255,255,255,.06); color: #edf7f4; }
  html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] #view-timesheet #submit-timesheet.is-gedempt { border: 1px solid #547067; background: rgba(58,189,157,.12); color: #dcebe7; box-shadow: none; }
}

/* Dagen buiten de maand (gui r350): alleen het grijze vlak, geen wit blokje. */
@media (min-width: 821px) {
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .outside-month-mark { width: auto; height: auto; margin: 0; background: transparent; color: var(--muted); }
}

/* ===========================================================================
   Kop variant 5c (DESIGN-BESLUITEN "Kop van het dashboard: weekblokjes", 14 sep).
   Vervangt het maandspoor. Per week een vlak (--weekvlak, radius 18px) met
   weeknummer en stand, daaronder één vakje per dag: mint als gevuld, amber
   (--dag-leeg) als leeg en zacht ademend, laag en grijs voor weekend of vrij.
   ======================================================================== */
@keyframes vd-dag-adem { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
@keyframes vd-dag-rijzen { from { transform: scaleY(.06); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
#vandaag .vd-kopweken { position: relative; display: flex; flex-wrap: nowrap; gap: 9px; margin-top: 10px; }
#vandaag .vd-weekblok { display: flex; flex-direction: column; gap: 8px; min-width: 0; border-radius: 18px; background: var(--weekvlak); padding: 11px 11px 12px; box-shadow: inset 0 1px 0 var(--kaart-glans); cursor: pointer; }
#vandaag .vd-weekblok-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 7px; min-width: 0; }
#vandaag .vd-weekblok-kop strong { flex: 0 1 auto; min-width: 0; color: var(--ink); font-size: 10.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vandaag .vd-weekblok-kop small { flex: 0 0 auto; color: var(--warning-tekst); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
#vandaag .vd-weekblok.is-compleet .vd-weekblok-kop small { color: var(--mint-tekst); }
#vandaag .vd-weekblok.is-dicht .vd-weekblok-kop small { color: var(--muted); }
#vandaag .vd-weekblok-dagen { display: flex; align-items: flex-end; gap: 4px; margin-top: auto; }
.vd-dagvak { display: grid; flex: 1; height: 38px; place-items: center; min-width: 0; border: 0; border-radius: 9px; background: var(--dag-leeg); color: var(--dag-leeg-ink); cursor: pointer; font: inherit; font-size: 9.5px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 0; transform-origin: bottom; transition: background .4s ease, transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; }
.vd-dagvak.is-gevuld { background: var(--mint); color: var(--navy); }
.vd-dagvak.is-vrij { height: 26px; background: var(--surface-muted); color: var(--muted); }
#vandaag .vd-dagvak:hover { transform: translateY(-3px); box-shadow: 0 6px 14px -6px rgba(16,34,53,.5); }

/* Telefoon, wild r163-180: één regel per week, weeknummer en stand links (56px). */
#vd-tel .vd-tel-weken { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
#vd-tel .vd-tel-weekblok { display: flex; align-items: center; gap: 10px; border-radius: 14px; background: var(--weekvlak); padding: 8px 10px; cursor: pointer; }
#vd-tel .vd-tel-weekblok-kop { display: grid; flex: 0 0 auto; gap: 1px; width: 56px; }
#vd-tel .vd-tel-weekblok-kop strong { color: var(--ink); font-size: 10.5px; font-weight: 800; white-space: nowrap; }
#vd-tel .vd-tel-weekblok-kop small { color: var(--warning-tekst); font-size: 9px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
#vd-tel .vd-tel-weekblok.is-compleet .vd-tel-weekblok-kop small { color: var(--mint-tekst); }
#vd-tel .vd-tel-weekblok.is-dicht .vd-tel-weekblok-kop small { color: var(--muted); }
#vd-tel .vd-tel-weekblok-dagen { display: flex; flex: 1; align-items: flex-end; gap: 3px; min-width: 0; }
#vd-tel .vd-dagvak { border-radius: 8px; font-size: 9px; }
#vd-tel .vd-dagvak.is-vrij { height: 26px; }

/* Het maandspoor (10a) is vervallen. */
#vandaag .vd-spoorvak, #vd-tel .vd-tel-spoorvak { display: none; }

@media (max-width: 780px) {
  #vandaag .vd-kopweken { flex-wrap: wrap; }
  #vandaag .vd-weekblok { flex: 1 1 46% !important; }
}
/* Te klein voor de 44px-regel: op telefoon is het weekvlak de knop (5c). */
@media (max-width: 820px) {
  .vd-dagvak { pointer-events: none; cursor: default; }
}
@media (prefers-reduced-motion: reduce) {
  .vd-dagvak { animation: none !important; transition: none; }
}

/* Voettekst (Gio 14 sep: "links beneden en bij elkaar"): copyright, maker en
   versie samen links, binnen dezelfde paginabreedte als de inhoud. */
html:not([data-skin="new"]) body[data-role="employee"] .app-footer {
  max-width: var(--pagina);
  margin-inline: auto;
  justify-content: flex-start;
}
html:not([data-skin="new"]) body[data-role="employee"] .app-footer .app-footer-version { margin-left: 0; }

/* Link van de klanturenstaatkaart naar het eigen scherm. Rustig, onder de knoppen. */
.klantkaart-meer { display: none; }
html:not([data-skin="new"]) body[data-role="employee"] .klantkaart-meer { display: inline-flex; margin-top: 10px; border: 0; background: transparent; color: var(--mint-tekst); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 0; }

/* De statuspil op Mijn uren blijft zichtbaar (afwijking van gui r319-371): elf
   zakelijke E2E-cases van main gebruiken hem als teken dat de urenstaat geladen is.
   Klein, naast de maandkiezer. */
@media (min-width: 821px) {
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .view-heading > #timesheet-status { align-self: center; }
}

/* Dagen buiten de gekozen maand (gui r1045-1062, 14 sep): datum in --line, een
   even groot maar gedempt veld (--surface-muted, rand --line-zacht, tekst --line),
   geen 0/8/9. Op desktop; de kolom blijft staan zodat de weken uitlijnen. */
@media (min-width: 821px) {
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet td.is-buiten .date-number { color: var(--muted); }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-buiten-veld { width: 100%; max-width: 84px; min-height: 38px; border: 1px solid var(--line-zacht); border-radius: 9px; background: var(--surface-muted); color: var(--muted); font: inherit; font-size: 15px; font-weight: 700; text-align: center; padding: 0 2px; cursor: default; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet td.is-buiten .hours-day-entry::after { content: ""; display: block; height: 24px; }
}

/* Teambeheer (beheer, Klassiek) tussen 821 en 1023px: het overzicht vraagt twee
   kolommen van minstens 220 + 360px plus tussenruimte en binnenmarge (652px),
   maar naast de zijbalk bleef er zo'n 500px over. De accountgroepen stonden daardoor
   92px buiten beeld (monkey-vondst beheerkant, KLV-N-006). Hier dus één kolom; op
   brede schermen blijft de verhouding uit het ontwerp staan. */
@media (min-width: 821px) and (max-width: 1023px) {
  .team-account-overview,
  .team-account-groups { grid-template-columns: minmax(0, 1fr); }
}

/* Filters van de mailgeschiedenis (Instellingen, beheer): het grid vroeg minstens
   240 + 150 + 120px en ging pas onder 760px naar één kolom. In de smallere
   instellingenkaart stond "Status" en "Per pagina" daardoor tot 148px buiten beeld,
   ook op 1024 en 1280px (monkey-vondst beheerkant, KLV-N-006). Als flex met wrap
   passen ze op elke kaartbreedte: wat niet past, schuift naar de volgende regel. */
.mail-delivery-history-controls { display: flex; flex-wrap: wrap; }
.mail-delivery-history-controls > label { flex: 1 1 120px; min-width: 0; }
.mail-delivery-history-controls > .mail-delivery-search { flex: 3 1 240px; }
/* "Per pagina" (10/25/50) groeit niet mee: op een eigen regel werd het anders een
   veld over de hele breedte voor een getal van twee cijfers. */
.mail-delivery-history-controls > label:has(#mail-delivery-page-size) { flex: 0 1 140px; }


/* Beheer tussen 821 en 1023px. Vanaf 821px staat de zijbalk van 250px, dus de
   inhoud is hier even smal als op een tablet onder 820px. De inhoudsindelingen uit
   het 820px-blok golden daar niet: in Instellingen staken sjablonen, herinnerings-
   regels en keuzevelden tot 150px buiten beeld (monkey-vondst beheerkant,
   KLV-N-006). Hier gelden dezelfde indelingen, zonder de navigatieregels (de
   zijbalk blijft), en niet voor de medewerker: die heeft op deze breedte geen
   zijbalk maar de menubalk bovenaan, en dus de volle breedte. */
@media (min-width: 821px) and (max-width: 1023px) {
  body:not([data-role="employee"]) .hero-card { margin-top: 20px; padding: 28px; }
  body:not([data-role="employee"]) .workflow-track { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  body:not([data-role="employee"]) .workflow-heading-meta { justify-items: start; text-align: left; }
  body:not([data-role="employee"]) .dashboard-next-action-card { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body:not([data-role="employee"]) .dashboard-next-action-side { justify-items: start; text-align: left; }
  body:not([data-role="employee"]) .dashboard-next-action-side .button, body:not([data-role="employee"]) .dashboard-next-action-side .small-button { width: 100%; }
  body:not([data-role="employee"]) .dashboard-next-action-side > div { width: 100%; }
  body:not([data-role="employee"]) .workflow-line { display: none; }
  body:not([data-role="employee"]) .workflow-step { min-width: 0; }
  body:not([data-role="employee"]) .assignment-bar { grid-template-columns: 1fr 1fr; }
  body:not([data-role="employee"]) .assignment-bar > div:first-child { grid-column: 1/-1; }
  body:not([data-role="employee"]) .reminder-rule { grid-template-columns: 1fr 1fr; }
  body:not([data-role="employee"]) .reminder-rule .check-row { grid-column: 1/-1; }
  body:not([data-role="employee"]) .invoice-month-overview-head { grid-template-columns: minmax(0, 1fr); }
  body:not([data-role="employee"]) .invoice-month-overview-action { justify-items: start; }
  body:not([data-role="employee"]) .month-batch-card { grid-template-columns: minmax(0, 1fr); }
  body:not([data-role="employee"]) .month-batch-blockers { grid-column: auto; }
  body:not([data-role="employee"]) .invoice-status-guide { grid-template-columns: minmax(0, 1fr); }
  body:not([data-role="employee"]) .employee-grid, body:not([data-role="employee"]) .settings-grid { grid-template-columns: minmax(0, 1fr); }
  body:not([data-role="employee"]) .settings-rule-list { grid-template-columns: minmax(0, 1fr); }
  body:not([data-role="employee"]) .settings-card.full-width { grid-column: auto; }
  body:not([data-role="employee"]) .template-item { grid-template-columns: minmax(0, 1fr) auto; }
  body:not([data-role="employee"]) .template-subject { grid-column: 1/-1; grid-row: 2; }
}

/* Meer dan 24 uur op een dag (KLV-N-008): het vak rood omlijnd, zodat de regel
   onderin ("Pas het rood omlijnde vak aan") naar iets zichtbaars wijst. */
#hours-grid .hours-input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 35%, transparent);
}

/* En de reden direct bij dat vak, niet alleen in de regel onderin (nice-to-have
   uit GIO-WENSEN.md, 18 sep). Op een telefoon staat die regel vaak buiten beeld
   terwijl je nog in het vak typt, en dan zie je alleen een rode rand zonder uitleg.
   Puur CSS op het aria-invalid dat de validatie al zet: de melding kan daardoor
   nooit iets anders zeggen dan wat de validatie besliste, en voor een
   schermlezer blijft de bestaande statusregel de aankondiging. */
#hours-grid .hours-day-entry:has(> .hours-input[aria-invalid="true"])::after,
dd:has(> .summary-hours-input[aria-invalid="true"])::after {
  display: block;
  margin-top: 3px;
  /* Niet kaal var(--danger): die haalt als tekst op donker maar 3,0:1. Het
     teksttoken heeft een eigen waarde per thema (5,7:1 licht, 6,9:1 donker). */
  color: var(--danger-tekst);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}
#hours-grid .hours-day-entry:has(> .hours-input[aria-invalid="true"])::after { content: "Max. 24 uur"; }
/* Op een telefoon is de cel een rij (dag, snelkeuze, vak). Daar zou de melding
   als vierde element achteraan in die rij belanden en het vak opzij duwen. Bij
   een fout mag de rij daarom afbreken, zodat de melding over de volle breedte
   onder het vak staat; order houdt hem achteraan, ook na de herschikking van de
   rij met order op kleine schermen. Op het bureaublad is de cel een grid en staat
   de melding vanzelf onder het vak. */
#hours-grid .hours-day-entry:has(> .hours-input[aria-invalid="true"]) { flex-wrap: wrap; }
/* width 0 + min-width 100%: de melding telt niet mee voor de breedte van de cel
   (die neemt de breedte van zijn inhoud aan), maar vult bij het tekenen wel de
   hele tweede regel. Met alleen flex-basis 100% werd de cel met de fout 295px
   breed tegen 220px bij de andere dagen, en verschoof die ene rij zichtbaar
   (gemeten 18 sep op 390px). */
#hours-grid .hours-day-entry:has(> .hours-input[aria-invalid="true"])::after { flex: 0 0 auto; width: 0; min-width: 100%; order: 99; text-align: right; }
dd:has(> .summary-hours-input[aria-invalid="true"])::after { content: "Meer dan deze maand telt"; }

/* ===========================================================================
   Testfuncties (Gio 15 sep): op TEST zoveel mogelijk PROD. In de balk alleen
   Herstel, goed leesbaar (was een donker pictogram); thema, vormgeving, omgeving en
   versie in het profielmenu. Sectie en knop bestaan alleen op LOKAAL/TEST.
   ======================================================================== */
.profile-menu-testfuncties { margin: 6px 0 0; border-top: 1px solid var(--line); padding: 8px 4px 2px; }
.profile-menu-testfuncties[hidden] { display: none; }
.profile-menu-kop { margin: 0 8px 6px; color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.profile-menu-testknoppen .appearance-switches { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border: 0; background: transparent; padding: 0; }
.profile-menu-testknoppen .appearance-switch { display: inline-flex; width: 100%; min-height: 40px; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; opacity: 1; padding: 0 10px; }
.profile-menu-testknoppen .appearance-switch strong { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.profile-menu-testknoppen .appearance-switch:hover { border-color: var(--mint); }
.profile-menu-versie { margin: 6px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; padding: 8px 12px 2px; }
.profile-menu-versie:empty { display: none; }
@media (max-width: 820px) {
  .profile-menu-testknoppen .appearance-switch { min-height: 44px; }
}

/* Herstel in de balk van de medewerker (Klassiek): voluit en leesbaar in licht en
   donker, in plaats van een half doorzichtig pictogram van 30px. */
html:not([data-skin="new"]) body[data-role="employee"] .testbalk .topbar-quick-reset {
  display: inline-flex;
  width: auto;
  min-height: 32px;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: #7a4a09;
  font-size: 11px;
  font-weight: 700;
  opacity: 1;
  padding: 0 11px;
  white-space: nowrap;
}
html:not([data-skin="new"]) body[data-role="employee"] .testbalk .topbar-quick-reset .testknop-tekst { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] .testbalk .topbar-quick-reset { border-color: #8a6433; background: rgba(239,183,111,.12); color: #ffd59b; }
html:not([data-skin="new"]) body[data-role="employee"] .testbalk .topbar-quick-reset:hover { border-color: var(--warning); opacity: 1; }
@media (max-width: 820px) {
  html:not([data-skin="new"]) body[data-role="employee"] .testbalk:not([hidden]) { margin: 0; align-self: center; }
  html:not([data-skin="new"]) body[data-role="employee"] .testbalk .topbar-quick-reset { width: auto; min-height: 44px; }
}

/* "Hulp & contact" op telefoon (15 sep, besluit Gio): onder 821px geen zwevende
   hulpknop meer. Hij lag over de inhoud van Vandaag (weekblokken, verloopkaart)
   en tijdens het scrollen over elke kaart. Hulp blijft bereikbaar via het
   profielmenu (data-profile-action="help"), zie [HELP-H-005]. Bewust een los
   blok onderaan: de bottom-lift in het eerdere 820px-blok blijft staan, want
   [MOB-H] bewaakt die klasse in de bron, en een regel hier wint van die
   hogerop. Desktop (vanaf 821px) houdt de zwevende knop. */
@media (max-width: 820px) {
  .help-launcher { display: none !important; }
}

/* Mailgeschiedenis (Instellingen, beheer): met echte maildata stak een regel bij 1024px
   38 tot 63px buiten beeld. De middenkolom had minimaal 180px en een lang onderwerp of
   e-mailadres brak niet af (KLV-N-011, rood in release 34950426101). Beide tekstkolommen
   mogen krimpen en lange adressen breken af; de kolom met status en herstelknop houdt
   zijn eigen breedte. Alleen vanaf 761px: daaronder is de regel bewust één kolom
   (@media max-width 760px hogerop, [MOB-H-005]); zonder deze grens overschreef deze
   latere regel dat op de telefoon (CI 1002e11b). */
@media (min-width: 761px) {
  .mail-delivery-history-item { grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) auto; }
}
.mail-delivery-history-main,
.mail-delivery-history-meta { min-width: 0; overflow-wrap: anywhere; }

/* De gloed onder de teller op Vandaag (telefoon) staat op left: 50% en werd alleen via
   de ademanimatie met translateX(-50%) weer gecentreerd. Met "minder beweging" staat
   die animatie uit, en dan schoof de gloed 58px over de rechterrand ([MOB-H-031], 15 sep).
   De centrering hoort in de basisregel; de animatie bevat hem al, dus die verandert niet. */
#vd-tel .vd-tel-halo { transform: translateX(-50%); }

/* Herstel bij beheer op telefoon en tablet: 42px was net geen touchdoel ([KLV-H-010]).
   Nu Herstel de enige testknop in beeld is, hoort hij volwaardig te tikken. */
@media (max-width: 820px) {
  .topbar-actions > .topbar-quick-reset:not([hidden]) { min-height: 44px; }
}

/* Nieuw in de app (Berichten, alleen TEST en lokaal). Gio 15 sep: de lijst liep tegen de
   rand van het paneel. Nu binnen dezelfde marge als de kop (24px), per update een regel
   met versielabel, korte kop en één zin, de datum rechts, en een dunne lijn ertussen.
   De nieuwste krijgt het accent; de rest blijft rustig. Op de telefoon staan versie en
   datum boven de tekst. */
.nieuw-in-de-app { margin-top: 16px; }
.nieuw-in-de-app-lijst { margin: 0; padding: 0 24px 10px; list-style: none; }
.nieuw-in-de-app-lijst li { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; border-top: 1px solid var(--line-zacht); padding: 14px 0; }
.nieuw-versie { justify-self: start; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; padding: 5px 8px; }
.nieuw-in-de-app-lijst li:first-child .nieuw-versie { border-color: var(--mint-dark-tekst); color: var(--mint-dark-tekst); }
.nieuw-tekst { max-width: 68ch; }
.nieuw-tekst strong { display: block; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.35; }
.nieuw-tekst p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.nieuw-in-de-app-lijst time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 3px; }
@media (max-width: 720px) {
  .nieuw-in-de-app-lijst { padding-inline: 16px; }
  .nieuw-in-de-app-lijst li { grid-template-columns: auto 1fr; }
  .nieuw-in-de-app-lijst time { grid-column: 2; grid-row: 1; justify-self: end; padding-top: 4px; }
  .nieuw-tekst { grid-column: 1 / -1; }
}

/* Terug naar Vandaag op Mijn uren (Gio 15 sep): klein en rustig, als tekstlink boven de
   weekkeuze. Alleen voor de medewerker in Klassiek op telefoonbreedte; elders is de
   menubalk met Vandaag altijd in beeld. Het tikvlak blijft 44px hoog. */
.hours-terug-vandaag { display: none; }
@media (max-width: 820px) {
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-terug-vandaag {
    display: flex; width: fit-content; align-items: center; min-height: 44px; margin: -10px 0 0 -6px;
    border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; padding: 0 6px; box-shadow: none;
  }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-terug-vandaag:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 8px; }
  html:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-weekcel small { margin-inline-start: 4px; }
}

/* KLV-N-028 speling: de beheerdersbalk heeft zes tabs en "Facturen" blijft daar
   op verzoek voluit staan. Die naam past op het randje, en met de lettertypen van
   Linux in CI viel hij af ("Factu...").

   Tot 21 sep gold dit alleen tot 380px, en daar zat het gat: net boven die grens
   sprong de letter juist OMHOOG naar 11px terwijl de tab nauwelijks breder werd.
   Gemeten bij 381-420px was de speling precies nul, en dan kantelt elk lettertype
   dat iets breder tekent. Op 320px stak hij lokaal zelfs al een pixel uit.

   De letter schaalt nu mee met de ruimte die er is in plaats van te springen:
   nooit kleiner dan 9px, nooit groter dan de 11px van voorheen. De medewerkersbalk
   heeft vier tabs en dus ruimte zat; die blijft ongemoeid.

   Geldt sinds 21 sep ook voor Modern. Daar stonden tot dan de volledige namen in
   de tabbalk en werden er drie afgekapt; nu Modern dezelfde korte namen toont,
   zitten die in even krappe vakjes en hoort dezelfde speling erbij. */
@media (max-width: 820px) {
  body:not([data-role="employee"]) .nav-item { padding-inline: 1px; }
  body:not([data-role="employee"]) .nav-item span:nth-child(2),
  body:not([data-role="employee"]) .nav-item > .nav-label-kort { font-size: clamp(9px, 2.7vw, 11px); }
}

/* Contrast in de donkere stand (23 sep, wens Gio na de contrastverkenning).
   De lichte stand is gisteren al doorgerekend; in donker bleef de tekstkleur
   staan terwijl de ondergrond veranderde, en dan zakt dezelfde kleur onder de
   4,5:1 die WCAG 1.4.3 vraagt. Elke waarde hieronder is vooraf uitgerekend
   tegen zijn eigen gemeten ondergrond en ligt net boven de eis -- bewust niet
   verder, want een bijschrift dat even zwaar gaat wegen als de kop erboven is
   ook een vorm van kapot (punt van de herontwerp-lane, en terecht). */
html[data-theme="dark"] .topbar .demo-badge { color: #698096; }               /* 3,74 -> 4,56 op #09131f */
html[data-theme="dark"] .metric-card > strong small { color: #7c8692; }       /* 3,58 -> 4,59 op #111d2b */
html[data-theme="dark"] .summary-note p { color: #7a9ea5; }                   /* 2,52 -> 4,58 op #15352f */
/* Het oranje "N open" onder het weeknummer: in donker was dit 2,61 -- de
   kleur die juist moet opvallen was daar het slechtst leesbare element. */
html[data-theme="dark"]:not([data-skin="new"]) body[data-role="employee"] #view-timesheet .hours-weekcel small.is-open { color: #c18127; }

/* Succes en fout uit elkaar te houden zonder de tekst te lezen (23 sep, laatste
   open punt uit Gio's verbeterronde van 21 sep). Tot nu zag "Factuur verzonden"
   er precies zo uit als "Uploaden is mislukt": zelfde donkere balk, zelfde plek.
   Kleur alleen is niet genoeg -- dat zou WCAG 1.4.1 schenden voor wie kleuren
   niet onderscheidt -- dus er staat ook een duidelijk teken voor de tekst.
   Witte tekst haalt 9,70:1 op het rood en 9,35:1 op het groen. */
.toast.is-fout { background: #7a2733; }
.toast.is-gelukt { background: #12503f; }
.toast.is-fout::before,
.toast.is-gelukt::before { margin-right: 8px; font-weight: 900; }
.toast.is-fout::before { content: "!"; }
.toast.is-gelukt::before { content: "\2713"; }

/* Weekenduren (27 sep): de kolommen Za en Zo in het rooster en de controle iets
   gedempt, zodat ze als extra dagen lezen naast de werkweek. */
.workday-cell.is-weekend { background: color-mix(in srgb, var(--surface) 92%, var(--mint) 4%); }

/* Sluitknop in het profielmenu (Gio 30 sep: "je kan geen kruisje drukken").
   Buiten het menu tikken sloot het al, maar dat is niet te zien. De knop staat
   als eigen regel bovenin en niet over de profielrij heen: in Modern zit daar
   rechts al een ▾ voor de avatarkiezer. 44px, want op de telefoon is dit een
   touchdoel. De selector noemt .profile-menu mee, anders wint `.profile-menu >
   button` hierboven en wordt het een volle menuregel. */
/* Het kruisje kreeg eerst een eigen rij bovenin. Dat maakte het menu 44px hoger, en
   daardoor zakte de vormgevingsknop op een korte telefoonviewport onder de
   installatiebanner, die de klik afving (CI 30 sep, mobile-safari: "install-banner
   intercepts pointer events" op SKIN-H-005 en vijf andere cases). Nu zweeft hij in de
   rechterbovenhoek, zodat het menu even hoog blijft als voorheen. De profielrij krijgt
   rechts ruimte zodat naam en de ▾ van de avatarkiezer er niet onder verdwijnen.

   GEEN position:relative hier: #profile-menu draagt ook de klasse .popover-panel en die
   staat al op position:absolute. Een eigen position overschreef dat, waardoor het menu
   in de balk ging meelopen in plaats van eroverheen te zweven -- dat liet op 30 sep een
   reeks desktop-chromium-cases omvallen. Absolute is zelf al een containing block, dus
   het kruisje heeft er niets extras voor nodig. */
.profile-menu > .profile-menu-close { position: absolute; top: 6px; right: 6px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 0; text-align: center; }
.profile-menu > .profile-menu-person { padding-right: 52px; }
.profile-menu > .profile-menu-close:hover { background: var(--vlak-zacht); color: var(--ink); }

/* Zolang een topbalkmenu openstaat, blijft de installatiebanner weg. Zie de toelichting
   bij .install-banner hierboven: hij mag nooit boven iets liggen waar iemand mee bezig is. */
body[data-popover="open"] .install-banner { display: none; }

/* De vormgevings- en themaknop zijn een keuze die je met je duim maakt. */
#profile-menu-testknoppen .appearance-switch { min-height: 44px; }

/* De vormgevingskeuze als een geheel van twee (Gio 30 sep): links waar je nu staat,
   rechts de knop naar de andere. Een losse knop toonde alleen de bestemming, dus
   moest je de huidige stand raden. */
.skin-keuze { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.skin-keuze[hidden] { display: none; }
.skin-keuze-huidig { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; background: var(--green-light); color: var(--ink); font-size: 11px; font-weight: 800; white-space: nowrap; }
.skin-keuze > .appearance-switch { min-height: 44px; border-radius: 0; }

/* Vier knoppen, een blik (Remy-LeBeau 30 sep). Eerst moest je uit twee schakelaars
   afleiden welke versie je zag; nu staat het er en kies je rechtstreeks. */
.versiekeuze-nu { margin: 0 0 6px; padding: 0 2px; font-size: 11px; color: var(--muted); }
.versiekeuze-nu strong { color: var(--ink); }
.versiekeuze { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 8px; padding: 4px; border-radius: 12px; background: var(--vlak-zacht); }
.versiekeuze button { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-size: 11px; font-weight: 700; cursor: pointer; padding: 0 8px; }
.versiekeuze button:hover { background: var(--surface); }
.versiekeuze button.is-actief { background: var(--navy); color: #fff; }

/* De oude schakelaars blijven bestaan en blijven het werk doen: #quick-skin-toggle
   wordt op 128 plekken in negen testbestanden gebruikt om van vormgeving te wisselen.
   Ze zijn alleen niet meer te zien, want de vier knoppen hierboven zetten dezelfde
   standen. Weghalen zou die 128 aanroepen breken. Licht/Donker blijft wel zichtbaar:
   dat is een losse keuze naast de versie. */
#quick-skin-toggle, #quick-vandaag2-toggle { display: none; }

/* Uitlogscherm (referentie, paragraaf 12). Ligt over het inlogpaneel en verdwijnt
   zodra je op Opnieuw inloggen tikt. */
/* Path-look uit de referentie: kaartradius 24, een zachte mintgloed linksboven en het
   accent #3abd9d als dun streepje boven de titel. Alle kleuren via tokens, zodat licht en
   donker vanzelf meelopen; een vaste kleur hier sloeg op 30 september al eens door in de
   donkere modus. */
.uitgelogd-paneel {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 22px 18px 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(70% 60% at 0% 0%, rgba(58, 189, 157, .14), transparent 62%),
    var(--vlak-zacht);
  text-align: center;
}
/* Het streepje: een pil in het accent, zoals de referentie boven haar kaarten zet. */
.uitgelogd-paneel::before {
  content: "";
  width: 36px;
  height: 3px;
  border-radius: 999px;
  background: var(--mint);
}
.uitgelogd-paneel[hidden] { display: none; }
.uitgelogd-paneel strong { font-size: 21px; letter-spacing: -.01em; }
.uitgelogd-paneel p { margin: 0; color: var(--muted); }
/* 44px blijft de aanraakmaat (WCAG 2.2 AA, 2.5.8); de pilvorm komt uit de referentie. */
.uitgelogd-paneel button { min-height: 44px; margin-top: 4px; padding: 0 22px; border-radius: 999px; }

/* Minder beweging als eigen keuze (referentie, paragraaf 12). De stylesheets zwakken
   beweging al af voor wie prefers-reduced-motion in zijn systeem heeft staan; dit is
   dezelfde uitkomst, maar dan zelfgekozen. Een blok in plaats van die vijftien
   mediaqueries te verdubbelen: het doel is "er beweegt niets meer", niet vijftien
   afzonderlijke uitzonderingen. */
html[data-beweging-minder] *,
html[data-beweging-minder] *::before,
html[data-beweging-minder] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}