/* ============================================================================
   Urenportal — medewerkerclient (productie-CSS)
   Basis: docs/Nexus/flexportal/prototypes/urenportal-ui-prototype.css
   (door Tim goedgekeurde referentie, 14-08-2026) omgezet naar productie.

   Harde regels in dit bestand:
   - Alle kleuren zijn custom properties: licht op :root, volledig donker palet
     onder @media (prefers-color-scheme: dark) met :root:not([data-theme="light"])
     én onder :root[data-theme="dark"] (handmatige override in Profiel wint).
   - AA-correcties (review U-16/U-25): primaire actie #C74A15 (wit erop = AA),
     focusring 2px volle dekking + 2px offset, gedempte tekst >=4.5:1,
     chipteksten op zachte achtergronden via aparte *-ink-tokens.
   - Invoervelden altijd 1rem (16px) — voorkomt iOS-zoom; interactieve doelen
     minimaal 44px (--tap).
   - Reflow (VISUEEL §9.4): minmax(0,1fr), min-width:0, geen horizontale
     paginascroll; alleen de weekmatrix (.timesheet) en de bevindingenmatrix
     (.feedback-week) scrollen intern; dialogen width:min(...) + interne scroll.
   - Geen externe fonts of requests: system-ui.
   ========================================================================== */

/* ---------- 1. Tokens — licht (standaard) ---------- */

:root {
  color-scheme: light;

  /* merk */
  --ts-navy: #17365d;          /* koppen, merk-tekst */
  --ts-blue: #1b4f72;          /* links, tekstknoppen */
  --ts-blue-light: #2471a3;    /* secundair blauw (iconen, accenten) */
  --ts-blue-soft: #eaf2f8;     /* blauwe chip-/icoonachtergrond */
  --ts-orange: #c74a15;        /* primaire actie + interactief oranje (AA op wit) */
  --ts-orange-decor: #e85b24;  /* alléén niet-tekstuele accentstrepen (tab-underline, progressie) */
  --ts-orange-soft: #fdeee6;
  --ts-green: #14815b;         /* stippen/iconen; tekst op soft via --ok-ink */
  --ts-green-soft: #e8f6f0;
  --ts-amber: #8a5605;         /* AA op wit én op amber-soft (was #a66707) */
  --ts-amber-soft: #fff6dd;
  --ts-red: #ba2f36;
  --ts-red-soft: #fff0f0;
  --solid-ink: #ffffff;        /* tekst/iconen op volle merk- en statuskleuren */

  /* tekst */
  --ink: #182231;
  --muted: #58657b;            /* >=4.5:1 op canvas én surface (was #687386) */
  --faint: #64718a;            /* kleine hulpteksten, ook AA (was #919aaa) */

  /* vlakken en lijnen */
  --canvas: #f5f7fa;
  --surface: #ffffff;
  --surface-alt: #f8f9fb;      /* tabelkoppen, subtiele banden */
  --surface-inset: #edf0f4;    /* segmenttoggles, tabbalk-achtergrond */
  --active-tint: #fdf7f2;      /* warme tint achter actieve keuze */
  --plan-tint: #dbe7f6;        /* "geplande week"-waas (toekomstweken) */
  --line: #dfe4eb;
  --line-strong: #c6cedb;

  /* invoer */
  --input-bg: #ffffff;
  --input-border: #8793a5;     /* >=3:1 tegen wit (WCAG 1.4.11) */
  --input-filled-bg: #f4f9fc;
  --input-filled-border: #718aa0;
  --input-filled-ink: #17365d;

  /* semantische meldingsvlakken (tekst = *-ink, altijd AA op *-bg) */
  --info-bg: #f2f8fc;  --info-border: #c2d9e8;  --info-ink: #33506b;
  --ok-bg: #f1faf6;    --ok-border: #bfe0d2;    --ok-ink: #1d5b43;
  --warn-bg: #fff6dd;  --warn-border: #e3cf8e;  --warn-ink: #6b4b06;
  --err-bg: #fff5f5;   --err-border: #e4b6b9;   --err-ink: #8f252c;

  /* neutrale chip */
  --chip-bg: #e9edf2;  --chip-ink: #4c5871;

  /* knoppen */
  --btn-bg: #ffffff;
  --btn-border: #8793a5;
  --btn-primary-bg: #c74a15;   /* identiek in donker: wit erop blijft AA */
  --btn-primary-ink: #ffffff;
  --btn-disabled-bg: #edf0f3;
  --btn-disabled-ink: #6d7787;
  --btn-disabled-border: #dce1e8;

  /* focus, balken, schaduwen */
  --focus: #c74a15;
  --bar-bg: rgba(255, 255, 255, .97);
  --scrim: rgba(15, 25, 40, .5);
  --shadow: 0 16px 48px rgba(25, 41, 61, .12);
  --shadow-up: 0 -6px 22px rgba(31, 48, 71, .07);
  --shadow-card: 0 1px 3px rgba(25, 41, 61, .14);

  /* systeemstaten */
  --offline-bg: #f6c944;  --offline-ink: #241a04;
  --skelet-a: #e3e7ef;    --skelet-b: #f2f4f8;
  --auth-bg: #17365d;      /* donkerblauw loginvlak */

  /* maten */
  --radius: 9px;
  --tap: 44px;              /* minimaal interactief doel */
  --gap: 16px;
}

/* ---------- 2. Tokens — donker (systeemvolgend, tenzij handmatig licht) ---------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ts-navy: #c9daf0;
    --ts-blue: #82b8e2;
    --ts-blue-light: #64a6d8;
    --ts-blue-soft: #1d3349;
    --ts-orange: #f08a5c;
    --ts-orange-decor: #f07a44;
    --ts-orange-soft: #35211a;
    --ts-green: #57c99a;
    --ts-green-soft: #142e23;
    --ts-amber: #dcaf62;
    --ts-amber-soft: #322910;
    --ts-red: #ef9297;
    --ts-red-soft: #381e21;
    --solid-ink: #0f1521;

    --ink: #e7ecf3;
    --muted: #a6b1c2;
    --faint: #94a0b3;

    --canvas: #0f1521;
    --surface: #171f2b;
    --surface-alt: #1c2634;
    --surface-inset: #222d3d;
    --active-tint: #251d17;
    --plan-tint: #1c2b40;
    --line: #2a3547;
    --line-strong: #3a4860;

    --input-bg: #1c2634;
    --input-border: #63758d;
    --input-filled-bg: #203348;
    --input-filled-border: #6f89a3;
    --input-filled-ink: #cfe2f4;

    --info-bg: #16273a;  --info-border: #2b4864;  --info-ink: #accbe6;
    --ok-bg: #12271e;    --ok-border: #21503d;    --ok-ink: #86d2ae;
    --warn-bg: #2e2510;  --warn-border: #5a4a1e;  --warn-ink: #e3ba6d;
    --err-bg: #311b1e;   --err-border: #5f353a;   --err-ink: #efa0a4;

    --chip-bg: #263041;  --chip-ink: #b8c3d4;

    --btn-bg: #1d2735;
    --btn-border: #63758d;
    --btn-primary-bg: #c74a15;
    --btn-primary-ink: #ffffff;
    --btn-disabled-bg: #232d3c;
    --btn-disabled-ink: #77839a;
    --btn-disabled-border: #2e3a4c;

    --focus: #f5975f;
    --bar-bg: rgba(23, 31, 43, .97);
    --scrim: rgba(0, 0, 0, .6);
    --shadow: 0 16px 48px rgba(0, 0, 0, .5);
    --shadow-up: 0 -6px 22px rgba(0, 0, 0, .4);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .4);

    --offline-bg: #f6c944;  --offline-ink: #241a04;
    --skelet-a: #202a39;    --skelet-b: #283446;
    --auth-bg: #0c1320;
  }
}

/* ---------- 3. Tokens — donker via handmatige override (wint altijd) ---------- */

:root[data-theme="dark"] {
  color-scheme: dark;

  --ts-navy: #c9daf0;
  --ts-blue: #82b8e2;
  --ts-blue-light: #64a6d8;
  --ts-blue-soft: #1d3349;
  --ts-orange: #f08a5c;
  --ts-orange-decor: #f07a44;
  --ts-orange-soft: #35211a;
  --ts-green: #57c99a;
  --ts-green-soft: #142e23;
  --ts-amber: #dcaf62;
  --ts-amber-soft: #322910;
  --ts-red: #ef9297;
  --ts-red-soft: #381e21;
  --solid-ink: #0f1521;

  --ink: #e7ecf3;
  --muted: #a6b1c2;
  --faint: #94a0b3;

  --canvas: #0f1521;
  --surface: #171f2b;
  --surface-alt: #1c2634;
  --surface-inset: #222d3d;
  --active-tint: #251d17;
  --plan-tint: #1c2b40;
  --line: #2a3547;
  --line-strong: #3a4860;

  --input-bg: #1c2634;
  --input-border: #63758d;
  --input-filled-bg: #203348;
  --input-filled-border: #6f89a3;
  --input-filled-ink: #cfe2f4;

  --info-bg: #16273a;  --info-border: #2b4864;  --info-ink: #accbe6;
  --ok-bg: #12271e;    --ok-border: #21503d;    --ok-ink: #86d2ae;
  --warn-bg: #2e2510;  --warn-border: #5a4a1e;  --warn-ink: #e3ba6d;
  --err-bg: #311b1e;   --err-border: #5f353a;   --err-ink: #efa0a4;

  --chip-bg: #263041;  --chip-ink: #b8c3d4;

  --btn-bg: #1d2735;
  --btn-border: #63758d;
  --btn-primary-bg: #c74a15;
  --btn-primary-ink: #ffffff;
  --btn-disabled-bg: #232d3c;
  --btn-disabled-ink: #77839a;
  --btn-disabled-border: #2e3a4c;

  --focus: #f5975f;
  --bar-bg: rgba(23, 31, 43, .97);
  --scrim: rgba(0, 0, 0, .6);
  --shadow: 0 16px 48px rgba(0, 0, 0, .5);
  --shadow-up: 0 -6px 22px rgba(0, 0, 0, .4);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .4);

  --offline-bg: #f6c944;  --offline-ink: #241a04;
  --skelet-a: #202a39;    --skelet-b: #283446;
  --auth-bg: #0c1320;
}

/* ---------- 4. Basis ---------- */

* { box-sizing: border-box; }

html {
  font-size: 16px; /* mobiel nooit kleiner — iOS-zoomval */
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
  /* vangnet §9.4: de pagina zelf scrollt nooit horizontaal */
  overflow-x: clip;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

a { color: var(--ts-blue); }

/* focusring: 2px volle dekking + 2px offset (>=3:1 tegen aangrenzende vlakken) */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* alleen-screenreader tekst (o.a. daglabels in de matrix) */
.visueel-verborgen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 5. Woordmerk en micro-typografie ---------- */

.wordmark { display: inline-flex; align-items: flex-end; gap: 9px; color: var(--ts-navy); text-decoration: none; }
/* Transparant huisstijllogo (07-09, verzoek Tim): 'standaard' op licht, 'wit' op donker —
   zelfde thema-regels als de tokens (systeemvoorkeur, handmatige override in Profiel wint).
   Geen witte chip meer achter het logo. */
.wordmark__logo-vlak { display: inline-flex; flex: 0 0 auto; padding: 0; background: transparent; }
.wordmark__logo { display: block; width: 184px; height: auto; }
.wordmark__logo--donker { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark__logo--licht { display: none; }
  :root:not([data-theme="light"]) .wordmark__logo--donker { display: block; }
}
:root[data-theme="dark"] .wordmark__logo--licht { display: none; }
:root[data-theme="dark"] .wordmark__logo--donker { display: block; }
.wordmark__product { margin-bottom: 2px; color: var(--muted); font-size: .6rem; font-weight: 800; letter-spacing: .13em; line-height: 1; text-transform: uppercase; }
.wordmark--small { gap: 6px; }
.wordmark--small .wordmark__logo { width: 136px; }

.eyebrow { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- 6. Knoppen ---------- */

.button, .fp-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--btn-border);
  border-radius: 7px;
  background: var(--btn-bg);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.button--soft { background: var(--ts-orange-soft); border-color: var(--ts-orange-soft); color: var(--ts-orange); }
.button--primary, .fp-knop--primair {
  color: var(--btn-primary-ink);
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
}
.button--approve { color: var(--solid-ink); background: var(--ts-green); border-color: var(--ts-green); }
.button--reject { color: var(--err-ink); border-color: var(--err-border); background: var(--err-bg); }
.button:disabled, .fp-knop:disabled {
  color: var(--btn-disabled-ink);
  background: var(--btn-disabled-bg);
  border-color: var(--btn-disabled-border);
}
.button--blok, .fp-knop--blok { width: 100%; }
.sparkle { margin-right: 5px; }

.text-button, .icon-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--ts-blue);
  font-weight: 700;
  text-decoration: none;
}

.fp-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 7. Statuschips ---------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}
.status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--draft, .status--concept { background: var(--chip-bg); color: var(--chip-ink); }
.status--ingediend { background: var(--warn-bg); color: var(--warn-ink); }
.status--goedgekeurd { background: var(--ok-bg); color: var(--ok-ink); }
.status--afgekeurd { background: var(--err-bg); color: var(--err-ink); }

/* kleine pill-variant (lijsten, historie) */
.pill {
  display: inline-flex;
  width: max-content;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
}
.pill--amber { color: var(--warn-ink); background: var(--warn-bg); }
.pill--red { color: var(--err-ink); background: var(--err-bg); }
.pill--green { color: var(--ok-ink); background: var(--ok-bg); }
.pill--gray { color: var(--chip-ink); background: var(--chip-bg); }
.pill--blue { color: var(--ts-blue); background: var(--ts-blue-soft); }

/* ---------- 8. Schil medewerker-desktop: kop, navigatie, werkbladen ---------- */

.employee-shell { min-height: 100vh; min-height: 100dvh; background: var(--canvas); display: flex; flex-direction: column; }

.portal-header {
  min-height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 330px;
  align-items: center;
  padding: 0 28px;
}
.portal-header__nav { justify-self: center; height: 100%; min-width: 0; display: flex; }
.nav-link {
  height: 100%;
  min-height: var(--tap);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  padding: 0 19px;
  color: var(--muted);
}
.nav-link.is-active { color: var(--ts-navy); border-bottom-color: var(--ts-orange-decor); font-weight: 800; }
.portal-header__account { justify-self: end; display: flex; gap: 12px; align-items: center; }

.account-pill {
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: var(--tap);
  padding: 4px 12px 4px 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--ink);
}
.account-pill > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--solid-ink); background: var(--ts-blue); font-size: .68rem; font-weight: 800; }
.account-pill b { color: var(--muted); font-weight: 500; }

/* werkbladen (afsluitbare tabbladen boven de inhoud) */
.workspace-tabs {
  min-height: 48px;
  display: flex;
  align-items: end;
  background: var(--surface-inset);
  padding-left: 28px;
  border-bottom: 1px solid var(--line-strong);
}
.workspace-tab {
  min-height: var(--tap);
  padding: 0 15px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  color: var(--muted);
  font-size: .8rem;
}
.workspace-tab.is-active { background: var(--surface); border-color: var(--line-strong); color: var(--ink); font-weight: 700; }
.workspace-tab span { color: var(--faint); margin-left: 12px; }

.employee-content {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 19px 0 110px; /* ruimte voor de sticky totaalbalk */
}

/* ---------- 9. Weektoolbar, weekkiezer, plaatsingsregel ---------- */

.week-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.week-picker { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.week-picker button {
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 1.3rem;
  color: var(--ts-blue);
}
.week-picker div { display: grid; gap: 2px; min-width: 175px; }
.week-picker span { color: var(--ts-navy); font-weight: 800; }
.week-picker strong { color: var(--muted); font-size: .8rem; font-weight: 500; }

.assignment-line {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 18px;
}
.assignment-line > div { display: grid; gap: 3px; min-width: 0; }
.assignment-line > div strong { font-size: 1.05rem; color: var(--ts-navy); }
.assignment-line > div small { color: var(--muted); }
.assignment-line dl { margin: 0; display: flex; gap: 34px; }
.assignment-line dl div { display: grid; gap: 3px; }
.assignment-line dt { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.assignment-line dd { margin: 0; font-size: .8rem; }

.inline-message {
  display: flex;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--info-border);
  border-top: 0;
  background: var(--info-bg);
  padding: 9px 18px;
}
.inline-message > span, .privacy-note > span {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ts-blue-light);
  color: var(--solid-ink);
  font-size: .7rem;
  font-weight: 800;
  flex: 0 0 auto;
}
.inline-message p { margin: 0; font-size: .8rem; color: var(--info-ink); }

/* ---------- 10. Weekmatrix (desktop): rijen = uursoorten, kolommen = ma-zo ---------- */

.timesheet { background: var(--surface); border: 1px solid var(--line); border-top: 0; }
.timesheet__head, .time-row {
  display: grid;
  grid-template-columns: minmax(190px, 2fr) repeat(7, minmax(64px, .72fr)) 74px 44px;
  align-items: stretch;
}
.timesheet__head { min-height: 50px; color: var(--muted); background: var(--surface-alt); border-bottom: 1px solid var(--line); }
.timesheet__head > div { display: grid; place-items: center; border-left: 1px solid var(--line); font-size: .68rem; text-transform: uppercase; }
.timesheet__head > div:first-child { place-items: center start; padding-left: 18px; border-left: 0; }
.timesheet__head b { color: var(--ink); font-size: .8rem; margin-top: 2px; }
.timesheet__head > div.is-feestdag { background: var(--warn-bg); color: var(--warn-ink); }
.feestdaglabel { display: block; font-size: .62rem; font-weight: 600; color: var(--warn-ink); white-space: normal; line-height: 1.15; text-transform: none; }

.time-row { min-height: 65px; border-bottom: 1px solid var(--line); }
.time-row > div:first-child {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  column-gap: 9px;
  align-content: center;
  padding: 8px 18px;
  min-width: 0;
}
.time-row > div:first-child strong, .time-row > div:first-child small { grid-column: 2; overflow-wrap: anywhere; }
.time-row > div:first-child small { color: var(--muted); font-size: .7rem; margin-top: 2px; }

.row-dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.row-dot--work { background: var(--ts-blue-light); }
.row-dot--leave { background: #7d68ad; }
.row-dot--extra { background: var(--ts-orange-decor); }
.row-dot--expense { background: #9a7745; }

.time-row label { display: grid; place-items: center; border-left: 1px solid var(--line); }
/* daglabel blijft voor screenreaders beschikbaar (prototype verborg met display:none) */
.time-row label span {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.time-row input {
  width: 58px;
  min-height: var(--tap);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  background: var(--input-bg);
}
.time-row input:not([value=""]), .time-row input.heeft-waarde {
  border-color: var(--input-filled-border);
  background: var(--input-filled-bg);
  font-weight: 700;
  color: var(--input-filled-ink);
}
.time-row input.is-fout, .fp-ureninput.is-fout {
  border: 2px solid var(--ts-red);
  background: var(--err-bg);
  color: var(--err-ink);
}
.time-row input:disabled { background: var(--surface-inset); color: var(--muted); }

.row-total { display: grid; place-items: center; border-left: 1px solid var(--line); font-weight: 800; font-variant-numeric: tabular-nums; }
.row-menu { min-width: var(--tap); border: 0; background: transparent; color: var(--faint); }
.add-row { min-height: var(--tap); padding: 0 18px; border: 0; background: var(--surface); color: var(--ts-blue); font-size: .8rem; font-weight: 700; }

/* rij afkomstig uit een serversplitsing (meeruren) — zachtgroen gemarkeerd */
.time-row.is-split { background: var(--ok-bg); }
.time-row.is-split > div:first-child small { color: var(--ok-ink); }

/* ---------- 11. Onkosten en bonnen ---------- */

.expenses { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 14px; }
.expenses > header { min-height: 57px; padding: 10px 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.expenses h2 { font-size: 1rem; margin: 2px 0 0; }
.expense-row {
  min-height: 52px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 90px 110px;
  align-items: center;
  padding: 4px 17px;
  border-bottom: 1px solid var(--line);
  gap: 8px;
}
.expense-row:last-child { border-bottom: 0; }
.expense-row > div:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.expense-row small { color: var(--muted); }
.expense-row > span { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.expense-row > button { min-height: var(--tap); border: 0; background: transparent; color: var(--ts-blue); font-size: .78rem; font-weight: 700; }
.expense-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: var(--ts-blue-soft); color: var(--ts-blue); font-weight: 800; }
.bon-status { font-size: .75rem; color: var(--warn-ink); }

/* ---------- 12. Sticky totaalbalk (autosave, totalen, indienen) ---------- */

.submitbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  min-height: 68px;
  background: var(--bar-bg);
  border-top: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  padding: 9px max(28px, calc((100% - 1180px) / 2));
  padding-bottom: max(9px, env(safe-area-inset-bottom));
  gap: 24px;
  box-shadow: var(--shadow-up);
}
.save-state { display: flex; align-items: center; gap: 9px; margin-right: auto; min-width: 0; }
.save-state > span { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok-ink); font-weight: 900; }
.save-state div { display: grid; min-width: 0; }
.save-state small { color: var(--muted); font-size: .7rem; }
.save-state.is-bezig > span { background: var(--chip-bg); color: var(--chip-ink); }
.save-state.is-niet-opgeslagen > span { background: var(--warn-bg); color: var(--warn-ink); }
.save-state.is-fout > span { background: var(--err-bg); color: var(--err-ink); }

.totals { display: flex; gap: 15px; align-items: center; }
.totals > span:first-child { color: var(--muted); }
.totals b { color: var(--ink); margin-left: 5px; font-variant-numeric: tabular-nums; }
.difference { color: var(--warn-ink); background: var(--warn-bg); padding: 6px 10px; border-radius: 6px; font-weight: 700; font-size: .8rem; }
.difference.is-ok { color: var(--ok-ink); background: var(--ok-bg); }

/* ---------- 13. Bevindingen (blokkades en waarschuwingen) ---------- */

.feedback-summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--err-border);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--err-bg);
}
.feedback-summary > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ts-red); color: var(--solid-ink); font-weight: 900; }
.feedback-summary h1 { margin: 1px 0 2px; color: var(--err-ink); font-size: 1.15rem; }
.feedback-summary p { margin: 0; color: var(--err-ink); font-size: .8rem; }
.feedback-summary ol { margin: 10px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.feedback-summary li {
  min-width: 0;
  min-height: 67px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--err-border);
  border-radius: 7px;
  background: var(--surface);
}
.feedback-summary li > div { display: grid; gap: 3px; min-width: 0; }
.feedback-summary li small { color: var(--muted); font-size: .72rem; line-height: 1.35; }
.feedback-summary li button { min-height: var(--tap); padding: 0 12px; border: 1px solid var(--err-border); border-radius: 6px; background: var(--surface); color: var(--err-ink); font-size: .78rem; font-weight: 800; }
.feedback-summary li:only-child { grid-column: 1 / -1; }

/* waarschuwingsvariant: "Even controleren", bewust te bevestigen */
.feedback-summary--warning { border-color: var(--warn-border); background: var(--warn-bg); }
.feedback-summary--warning > span { background: var(--ts-amber); }
.feedback-summary--warning h1, .feedback-summary--warning p { color: var(--warn-ink); }
.feedback-summary--warning li { border-color: var(--warn-border); }
.feedback-summary--warning li button { border-color: var(--warn-border); color: var(--warn-ink); }

.feedback-card { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--surface); overflow: hidden; }
.feedback-card > header { min-height: 66px; padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }
.feedback-card h2 { margin: 2px 0; color: var(--ts-navy); font-size: 1.05rem; }
.feedback-card header p { margin: 0; color: var(--muted); font-size: .75rem; }
.feedback-card > header > span { color: var(--ok-ink); font-size: .75rem; }

/* melding: server heeft meeruren gesplitst */
.feedback-split { min-height: 50px; padding: 8px 15px; display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: center; gap: 9px; border-bottom: 1px solid var(--ok-border); background: var(--ok-bg); color: var(--ok-ink); }
.feedback-split > span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--ts-green); color: var(--solid-ink); font-size: .7rem; font-weight: 800; }
.feedback-split p { margin: 0; font-size: .78rem; line-height: 1.4; }

/* bevindingen-weekmatrix: mag als enige naast .timesheet intern scrollen */
.feedback-week { overflow-x: auto; overscroll-behavior-inline: contain; }
.feedback-week-head, .feedback-week-row { min-width: 830px; display: grid; grid-template-columns: minmax(180px, 2fr) repeat(7, minmax(65px, .7fr)) 75px; }
.feedback-week-head { min-height: 39px; background: var(--surface-alt); color: var(--muted); }
.feedback-week-head span, .feedback-week-row > span, .feedback-week-row > b, .feedback-week-row > label { display: grid; place-items: center; border-right: 1px solid var(--line); min-width: 0; }
.feedback-week-head span:first-child, .feedback-week-row > span:first-child { place-items: center start; padding-left: 15px; }
.feedback-week-head span { font-size: .68rem; text-transform: uppercase; }
.feedback-week-row { min-height: 74px; border-top: 1px solid var(--line); }
.feedback-week-row.is-extra { min-height: 55px; background: var(--info-bg); }
.feedback-week-row > span:first-child { grid-template-columns: 10px minmax(0, 1fr); gap: 7px; }
.feedback-week-row > span:first-child b { display: grid; gap: 2px; }
.feedback-week-row > span:first-child small { color: var(--muted); font-size: .68rem; font-weight: 400; }
.feedback-week-row .is-split { color: var(--ts-blue); background: var(--ts-blue-soft); font-weight: 800; }
.feedback-week-row label { padding: 6px; background: var(--err-bg); }
.feedback-week-row label input {
  width: 58px;
  min-height: var(--tap);
  border: 2px solid var(--ts-red);
  border-radius: 6px;
  background: var(--input-bg);
  text-align: center;
  color: var(--err-ink);
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.feedback-week-row label small { margin-top: 4px; color: var(--err-ink); font-size: .68rem; font-weight: 700; }

.feedback-expense { min-height: 61px; padding: 8px 15px; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.feedback-expense > div { display: grid; gap: 3px; min-width: 0; }
.feedback-expense small { color: var(--muted); font-size: .72rem; }
.feedback-expense > button { min-height: var(--tap); padding: 0 12px; border: 1px solid var(--err-border); border-radius: 6px; background: var(--surface); color: var(--err-ink); font-size: .78rem; font-weight: 800; }
.feedback-pill { padding: 4px 8px; border-radius: 999px; background: var(--err-bg); color: var(--err-ink); font-size: .72rem; font-weight: 800; }
.feedback-pill--split { background: var(--ok-bg); color: var(--ok-ink); }

/* "opvallende maar mogelijke waarde" — aanpassen of toelichten */
.feedback-check { min-height: 55px; padding: 8px 15px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-top: 1px solid var(--warn-border); background: var(--warn-bg); color: var(--warn-ink); }
.feedback-check > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--ts-amber); color: var(--solid-ink); font-size: .7rem; font-weight: 800; }
.feedback-check p { margin: 0; font-size: .78rem; }
.feedback-check > div { display: flex; gap: 7px; }
.feedback-check button { min-height: var(--tap); padding: 0 10px; border: 1px solid var(--warn-border); border-radius: 6px; background: var(--surface); color: var(--warn-ink); font-size: .75rem; font-weight: 800; white-space: nowrap; }

/* ---------- 14. Mobiel: kop, dagstrip, dagkaarten ---------- */

.mobile-header {
  min-height: 51px;
  min-width: 0;
  padding: 6px 15px 8px;
  padding-top: max(6px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.avatar { width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; background: var(--ts-blue); color: var(--solid-ink); font-size: .68rem; font-weight: 800; }

.mobile-content {
  min-width: 0;
  flex: 1;
  padding: 12px 13px;
  /* ruimte voor de sticky indienbalk + ondernavigatie */
  padding-bottom: calc(150px + env(safe-area-inset-bottom));
}

.mobile-week-head { min-width: 0; display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); align-items: center; text-align: center; }
.mobile-week-head button { width: var(--tap); height: var(--tap); border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ts-blue); font-size: 1.15rem; }
.mobile-week-head div { display: grid; gap: 1px; min-width: 0; }
.mobile-week-head span { color: var(--ts-navy); font-size: .75rem; font-weight: 800; }
.mobile-week-head strong { font-size: .95rem; }
.mobile-week-head small { color: var(--muted); font-size: .7rem; }

.mobile-progress { margin-top: 13px; display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; background: var(--surface); }
.mobile-progress > span {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: conic-gradient(var(--ts-orange-decor) var(--progress, 0%), var(--surface-inset) 0);
  position: relative;
}
.mobile-progress > span::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.mobile-progress b, .mobile-progress small { position: relative; z-index: 1; line-height: 1; }
.mobile-progress b { font-size: .95rem; }
.mobile-progress small { font-size: .62rem; color: var(--muted); }
.mobile-progress > div { display: grid; gap: 3px; min-width: 0; }
.mobile-progress > div small { color: var(--muted); font-size: .7rem; }

/* "Vul standaardweek" — secundair, deterministisch, nooit automatisch */
.mobile-standard {
  width: 100%;
  min-height: 55px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) 16px;
  align-items: center;
  text-align: left;
  border: 1px solid var(--ts-orange-soft);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--ts-orange-soft);
  padding: 8px 11px;
  color: var(--ts-orange);
}
.mobile-standard > span { font-size: 1.2rem; }
.mobile-standard > div { display: grid; gap: 2px; min-width: 0; }
.mobile-standard small { font-size: .72rem; color: var(--ts-orange); }
.mobile-standard i { font-style: normal; font-size: 1.15rem; }

/* dagstrip ma-zo */
.day-strip { min-width: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 14px -4px 0; gap: 3px; }
.day-strip button {
  min-width: 0;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 7px;
  display: grid;
  place-content: center;
  gap: 3px;
  color: var(--muted);
}
.day-strip b { font-size: .7rem; text-transform: uppercase; }
.day-strip span { font-size: .68rem; }
.day-strip button.is-done { color: var(--ok-ink); background: var(--ok-bg); }
.day-strip button.is-active { color: #fff; background: #17365d; } /* bewust vaste navy: wit erop blijft AA in beide thema's */
.day-strip button.is-error { box-shadow: 0 0 0 2px var(--ts-red); }

/* dagkaart met platte invoerregels */
.mobile-day, .mobile-expense { margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.mobile-day > header { min-height: 56px; padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.mobile-day h1, .mobile-day h2 { margin: 2px 0 0; font-size: 1rem; }
.mobile-entry { min-height: 64px; display: grid; grid-template-columns: 8px minmax(0, 1fr) 72px 22px; gap: 8px; align-items: center; padding: 8px 11px; }
.mobile-entry > div { display: grid; gap: 2px; min-width: 0; }
.mobile-entry small { color: var(--muted); font-size: .72rem; }
.mobile-entry input {
  width: 72px;
  min-height: 48px;
  border: 1px solid var(--input-filled-border);
  border-radius: 6px;
  text-align: center;
  background: var(--input-filled-bg);
  font-weight: 800;
  font-size: 1rem;
  color: var(--input-filled-ink);
  font-variant-numeric: tabular-nums;
}
.mobile-entry em { color: var(--muted); font-size: .72rem; font-style: normal; }
.mobile-add { min-height: var(--tap); width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ts-blue); font-size: .78rem; font-weight: 700; text-align: left; padding: 0 11px; }

.mobile-expense > header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border-bottom: 1px solid var(--line); }
.mobile-expense h2 { font-size: .9rem; }
.mobile-expense header button { width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: var(--ts-blue-soft); color: var(--ts-blue); }
.mobile-expense > button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) 14px;
  gap: 8px;
  align-items: center;
  text-align: left;
  padding: 6px 11px;
}
.mobile-expense > button:last-child { border-bottom: 0; }
.mobile-expense > button > div { display: grid; gap: 2px; min-width: 0; }
.mobile-expense small { color: var(--muted); font-size: .72rem; }
.mobile-expense i { color: var(--faint); font-style: normal; }

/* fout- en splitsingsvarianten op de dagkaart */
.mobile-day--error { border-color: var(--err-border); }
.mobile-day--error .mobile-entry input { border: 2px solid var(--ts-red); background: var(--err-bg); color: var(--err-ink); }
.mobile-field-error { margin: 0; padding: 8px 11px; border-top: 1px solid var(--err-border); background: var(--err-bg); color: var(--err-ink); font-size: .75rem; line-height: 1.4; }
.mobile-day--split { border-color: var(--ok-border); }
.mobile-day--split .mobile-entry input { border-color: var(--ok-border); background: var(--ok-bg); }
.mobile-field-split { margin: 0; padding: 8px 11px; border-top: 1px solid var(--ok-border); background: var(--ok-bg); color: var(--ok-ink); font-size: .75rem; line-height: 1.4; }

.mobile-split-note { margin-top: 12px; padding: 9px 10px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 8px; border: 1px solid var(--ok-border); border-radius: 8px; background: var(--ok-bg); color: var(--ok-ink); }
.mobile-split-note > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ts-green); color: var(--solid-ink); font-size: .7rem; font-weight: 800; }
.mobile-split-note p { margin: 0; font-size: .72rem; line-height: 1.4; }

.mobile-missing-receipt { min-height: 67px; margin-top: 10px; padding: 8px 10px; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid var(--err-border); border-radius: 8px; background: var(--surface); }
.mobile-missing-receipt > div { display: grid; gap: 3px; min-width: 0; }
.mobile-missing-receipt small { color: var(--muted); font-size: .7rem; line-height: 1.3; }
.mobile-missing-receipt button { min-height: var(--tap); padding: 0 10px; border: 1px solid var(--err-border); border-radius: 5px; background: var(--surface); color: var(--err-ink); font-size: .72rem; font-weight: 800; }

.mobile-feedback-summary { margin-top: 12px; overflow: hidden; border: 1px solid var(--err-border); border-radius: 8px; background: var(--err-bg); }
.mobile-feedback-summary > header { min-height: 53px; padding: 8px 10px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; border-bottom: 1px solid var(--err-border); }
.mobile-feedback-summary > header > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--ts-red); color: var(--solid-ink); font-weight: 900; }
.mobile-feedback-summary > header > div { display: grid; gap: 2px; color: var(--err-ink); }
.mobile-feedback-summary > header small { color: var(--err-ink); font-size: .7rem; }
.mobile-feedback-summary > button { width: 100%; min-height: 48px; padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; gap: 7px; border: 0; border-bottom: 1px solid var(--err-border); background: var(--surface); text-align: left; }
.mobile-feedback-summary > button:last-child { border-bottom: 0; }
.mobile-feedback-summary > button > span { display: grid; gap: 2px; min-width: 0; }
.mobile-feedback-summary > button small { color: var(--muted); font-size: .7rem; }
.mobile-feedback-summary > button i { color: var(--err-ink); font-style: normal; font-size: 1.05rem; }
.mobile-feedback-summary > button.is-warning { background: var(--warn-bg); }
.mobile-feedback-summary > button.is-warning i { color: var(--warn-ink); }
.mobile-feedback-summary--warning { border-color: var(--warn-border); background: var(--warn-bg); }
.mobile-feedback-summary--warning > header { border-color: var(--warn-border); }
.mobile-feedback-summary--warning > header > span { background: var(--ts-amber); }
.mobile-feedback-summary--warning > header > div, .mobile-feedback-summary--warning > header small { color: var(--warn-ink); }

.mobile-anomaly { margin-top: 10px; overflow: hidden; border: 1px solid var(--warn-border); border-radius: 8px; background: var(--warn-bg); color: var(--warn-ink); }
.mobile-anomaly > header { min-height: 45px; padding: 7px 9px; display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: center; gap: 7px; border-bottom: 1px solid var(--warn-border); }
.mobile-anomaly > header > span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--ts-amber); color: var(--solid-ink); font-size: .68rem; font-weight: 800; }
.mobile-anomaly > header > div { display: grid; gap: 2px; }
.mobile-anomaly > header small { color: var(--warn-ink); font-size: .7rem; }
.mobile-anomaly > p { margin: 0; padding: 8px 9px; font-size: .72rem; line-height: 1.4; }
.mobile-anomaly > div { padding: 0 9px 9px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mobile-anomaly button { min-height: var(--tap); padding: 4px 6px; border: 1px solid var(--warn-border); border-radius: 5px; background: var(--surface); color: var(--warn-ink); font-size: .72rem; font-weight: 800; line-height: 1.2; }

/* ---------- 15. Mobiele indienbalk + ondernavigatie ---------- */

.mobile-submit {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom));
  z-index: 25;
  min-height: 64px;
  padding: 8px 13px;
  background: var(--bar-bg);
  border-top: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: var(--shadow-up);
}
.mobile-submit > div { display: grid; min-width: 0; }
.mobile-submit small { color: var(--muted); font-size: .72rem; }
.mobile-submit strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.mobile-submit strong span { font-size: .7rem; color: var(--muted); font-weight: 500; }
.mobile-submit button { min-width: 116px; min-height: var(--tap); border: 0; border-radius: 7px; color: var(--btn-disabled-ink); background: var(--btn-disabled-bg); font-weight: 800; }
.mobile-submit button:not(:disabled) { color: var(--btn-primary-ink); background: var(--btn-primary-bg); }
.mobile-submit--feedback strong { color: var(--err-ink); font-size: .95rem; }

.mobile-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  height: calc(60px + env(safe-area-inset-bottom));
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav button { min-width: 0; min-height: var(--tap); padding: 0; border: 0; background: transparent; color: var(--muted); display: grid; place-content: center; gap: 2px; font-size: .72rem; }
.mobile-nav button > span { font-size: 1.1rem; }
.mobile-nav button.is-active { color: var(--ts-orange); font-weight: 800; }

/* ---------- 16. Mobiele historie (urenkaarten) ---------- */

.mobile-history-tabs { margin-top: 11px; padding: 3px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 7px; background: var(--surface-inset); }
.mobile-history-tabs button { min-height: var(--tap); border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: .78rem; }
.mobile-history-tabs button.is-active { background: var(--surface); color: var(--ts-navy); box-shadow: var(--shadow-card); font-weight: 800; }

.mobile-timecards { margin-top: 11px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.mobile-timecards > header { min-height: 38px; padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.mobile-timecards > header button { min-height: var(--tap); border: 0; background: transparent; color: var(--ts-blue); font-size: .72rem; font-weight: 800; }
.mobile-timecards article { min-height: 70px; padding: 8px 9px; display: grid; grid-template-columns: minmax(0, 1fr) auto var(--tap); align-items: center; gap: 7px; border-bottom: 1px solid var(--line); }
.mobile-timecards article:last-child { border-bottom: 0; }
.mobile-timecards article > div { min-width: 0; display: grid; gap: 2px; }
.mobile-timecards article > div span { color: var(--ts-blue); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.mobile-timecards article > div b { overflow: hidden; color: var(--ts-navy); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.mobile-timecards article > div small { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.mobile-timecards article em { padding: 4px 6px; border-radius: 10px; font-size: .62rem; font-style: normal; font-weight: 800; }
.mobile-timecards article em.is-concept { background: var(--chip-bg); color: var(--chip-ink); }
.mobile-timecards article em.is-submitted { background: var(--info-bg); color: var(--info-ink); }
.mobile-timecards article em.is-final { background: var(--ok-bg); color: var(--ok-ink); }
.mobile-timecards article em.is-rejected { background: var(--err-bg); color: var(--err-ink); }
.mobile-timecards article > button { width: var(--tap); min-height: var(--tap); padding: 0; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--surface); color: var(--ts-blue); font-size: .65rem; font-weight: 800; }

/* ---------- 17. Login / activatie / MFA / wachtwoord (klassen uit de huidige client) ---------- */

.fp-login-vlak {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
  background: var(--auth-bg);
}
.fp-login-kaart {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  width: min(400px, 100%);
  box-shadow: var(--shadow);
}
.fp-login-kaart h1 { margin: 0 0 4px; font-size: 1.25rem; color: var(--ts-navy); }
.fp-login-kaart .fp-sub { margin: 0 0 var(--gap); color: var(--muted); }
.fp-midden { text-align: center; margin: var(--gap) 0 0; }
.fp-midden a { color: var(--ts-blue); }

/* zes cijfers, groot en uit elkaar: wordt van een telefoon overgetypt */
.fp-code-invoer { font-size: 1.6rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }

.fp-veld { display: block; margin-bottom: var(--gap); min-width: 0; }
.fp-veld span { display: block; font-size: .85rem; margin-bottom: 4px; font-weight: 600; }
.fp-veld input, .fp-veld select {
  width: 100%;
  min-width: 0;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  font-size: 1rem;
}

.fp-fout { color: var(--err-ink); margin: 0 0 12px; }

.fp-sterkte { font-size: .85rem; margin: -8px 0 12px; }
.fp-sterkte.is-zwak { color: var(--err-ink); }
.fp-sterkte.is-matig { color: var(--warn-ink); }
.fp-sterkte.is-goed { color: var(--ok-ink); }

/* ---------- 18. Kaarten, banners, systeemstaten (huidige flows) ---------- */

.fp-kaart {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--gap);
  margin-bottom: var(--gap);
  box-shadow: var(--shadow-card);
  border-left: 5px solid transparent;
}
.fp-kaart h1, .fp-kaart h2 { margin: 0 0 8px; font-size: 1.1rem; color: var(--ts-navy); }
.fp-kaart-link { display: block; text-decoration: none; color: inherit; }

.is-concept { border-left-color: var(--faint); }
.is-ingediend { border-left-color: var(--ts-amber); }
.is-afgewezen { border-left-color: var(--ts-red); }
.is-goedgekeurd { border-left-color: var(--ts-green); }

.fp-banner {
  border-radius: var(--radius);
  padding: 12px var(--gap);
  margin-bottom: var(--gap);
  border: 1px solid var(--info-border);
  background: var(--info-bg);
  color: var(--info-ink);
}
.fp-banner.is-afgewezen { border-color: var(--err-border); background: var(--err-bg); color: var(--err-ink); }
.fp-banner.is-ingediend { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-ink); }
.fp-banner.is-goedgekeurd { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok-ink); }
.fp-banner.is-let-op { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-ink); }
.fp-banner.is-plan { border-color: var(--plan-tint); background: var(--plan-tint); color: var(--ink); }
.fp-banner ul { margin: 8px 0 0; padding-left: 20px; }
.fp-bevindingen ul { margin: 6px 0 0; padding-left: 18px; }
.fp-bevindingen li { margin-bottom: 4px; }
.fp-inlineknop {
  margin-left: 8px;
  min-height: var(--tap);
  padding: 2px 12px;
  font-size: .8rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
}

/* geplande week (toekomst) */
.fp-toekomst .fp-kaart, .fp-toekomst .mobile-day, .fp-toekomst .timesheet { background: var(--plan-tint); }

/* offline-balk: bovenaan, verdwijnt zodra er weer verbinding is */
.fp-offline {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: var(--offline-bg);
  color: var(--offline-ink);
  text-align: center;
  padding: 8px var(--gap);
  padding-top: max(8px, env(safe-area-inset-top));
  font-weight: 600;
}
.fp-offline[hidden] { display: none; }

/* skeleton-laadstaat: geen spinners op volle schermen */
.fp-skelet-blok {
  height: 88px;
  border-radius: var(--radius);
  margin-bottom: var(--gap);
  background: linear-gradient(90deg, var(--skelet-a) 25%, var(--skelet-b) 50%, var(--skelet-a) 75%);
  background-size: 200% 100%;
  animation: fp-glans 1.4s infinite;
}
@keyframes fp-glans { to { background-position: -200% 0; } }

/* lege toestand — ook voor 409 'geen_actieve_plaatsing': uitleg + vervolgstap, geen foutscherm */
.fp-leeg { text-align: center; padding: 32px var(--gap); color: var(--muted); }
.fp-leeg h2 { color: var(--ts-navy); margin: 0 0 6px; }

/* ---------- 19. Verlof en historie (huidige flows) ---------- */

.fp-saldolijst { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fp-saldokaart {
  display: block;
  min-height: var(--tap);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.fp-saldo-naam { display: block; font-weight: 600; }
.fp-saldo-getal { font-weight: 700; font-variant-numeric: tabular-nums; }
.fp-saldokaart .fp-saldo-getal { display: block; font-size: 1.5rem; }
.fp-saldo-gepland { color: var(--muted); font-size: .8rem; }
.fp-saldokaart .fp-saldo-gepland { display: block; }
.fp-saldo-meer { display: block; margin-top: 6px; font-size: .85rem; color: var(--ts-blue); }
.fp-saldo-groot { font-size: 1.6rem; font-weight: 700; margin: 4px 0 16px; font-variant-numeric: tabular-nums; }
.fp-saldo-regel { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.fp-saldo-regel:last-child { border-bottom: 0; }
.fp-terug { display: inline-flex; align-items: center; min-height: var(--tap); margin-bottom: 4px; color: var(--ts-blue); text-decoration: none; }

.fp-mutaties { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fp-mutaties th, .fp-mutaties td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.fp-mutaties th { font-size: .8rem; color: var(--muted); }
.fp-mutaties .fp-rechts { text-align: right; }
.fp-mut-reden { display: block; font-size: .8rem; color: var(--muted); }
.fp-mutaties .is-af { color: var(--err-ink); }
.fp-mutaties .is-bij { color: var(--ok-ink); }

.fp-historie { display: flex; flex-direction: column; gap: 8px; }
.fp-historieregel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
}
.fp-historieregel.is-ingediend { border-left-color: var(--ts-amber); }
.fp-historieregel.is-afgewezen { border-left-color: var(--ts-red); }
.fp-historieregel.is-goedgekeurd { border-left-color: var(--ts-green); }
.fp-hist-week span { display: block; font-size: .8rem; color: var(--muted); }
.fp-hist-uren { text-align: right; font-variant-numeric: tabular-nums; }
.fp-hist-uren span { display: block; font-size: .8rem; color: var(--muted); }
.fp-hist-status { text-align: right; }
.fp-hist-reden { display: block; font-size: .8rem; color: var(--err-ink); margin-top: 2px; }

/* ---------- 20. Dialogen (VISUEEL §9.4) ---------- */

.dialoog-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--scrim);
}
.dialoog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;         /* interne scroll, nooit de pagina */
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: var(--gap);
}
.dialoog h2 { margin: 0 0 8px; color: var(--ts-navy); font-size: 1.1rem; }
.dialoog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: var(--gap); flex-wrap: wrap; }

/* ---------- 21. Reflow (§9.4): 1100 / 800 / smal — geen horizontale paginascroll ---------- */

@media (max-width: 1100px) {
  .portal-header { grid-template-columns: 210px minmax(0, 1fr) 240px; padding: 0 18px; }
  .employee-content { width: calc(100% - 30px); }
}

@media (max-width: 1023px) {
  body { font-size: 1rem; }

  .mobile-nav { display: grid; }

  .portal-header { grid-template-columns: minmax(0, 1fr) auto; }
  .portal-header__nav, .portal-header__account > .icon-link { display: none; }
  .workspace-tabs { overflow-x: auto; padding-left: 15px; }
  .workspace-tab { flex: 0 0 auto; }
  .employee-content { width: calc(100% - 20px); padding-bottom: calc(160px + env(safe-area-inset-bottom)); }

  .week-toolbar, .assignment-line { flex-wrap: wrap; }
  .week-picker { width: 100%; margin-right: 0; }
  .week-picker div { min-width: 0; flex: 1; }
  .assignment-line { align-items: start; gap: 12px; }
  .assignment-line dl { width: 100%; gap: 18px; flex-wrap: wrap; }
  .assignment-line dl div { min-width: 0; flex: 1; }

  /* alléén de weekmatrix scrollt intern; de pagina zelf nooit */
  .timesheet { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
  .timesheet__head, .time-row { min-width: 820px; }

  .expense-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .expense-row > button { grid-column: 2 / -1; justify-self: start; padding: 0; }

  .submitbar {
    bottom: calc(60px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
    padding: 9px 10px;
    gap: 8px 14px;
  }
  .save-state { min-width: 0; }
  .totals { order: 3; width: 100%; justify-content: space-between; flex-wrap: wrap; }

  .feedback-summary ol { grid-template-columns: minmax(0, 1fr); }
  .feedback-card > header { align-items: flex-start; flex-wrap: wrap; }
  .feedback-expense { grid-template-columns: 31px minmax(0, 1fr) auto; }
  .feedback-expense > button { grid-column: 2 / -1; justify-self: start; }
  .feedback-check { grid-template-columns: 22px minmax(0, 1fr); }
  .feedback-check > div { grid-column: 2; justify-self: start; flex-wrap: wrap; }

  .fp-historieregel { grid-template-columns: minmax(0, 1fr) auto; }
  .fp-hist-status { grid-column: 1 / -1; text-align: left; }
}

/* kritieke flow blijft werken op 320 CSS-px: app.js toont dan de daggerichte
   mobiele invoer; deze regels houden alle vlakken binnen het viewport */
@media (max-width: 480px) {
  .employee-content { width: calc(100% - 16px); }
  .mobile-content { padding-left: 10px; padding-right: 10px; }
  .mobile-submit button { min-width: 104px; }
  .dialoog { width: min(560px, calc(100vw - 16px)); }
  .fp-login-kaart { padding: 18px; }
}

/* ---------- 22. Beweging ---------- */

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .fp-skelet-blok { animation: none; }
}

/* ---------- 12. Schermen buiten het prototype: auth, profiel, historie, verlof, bonnen, meldingen (supplement 14-08) ---------- */

/* --- generieke tekst-/tabelutilities --- */
.sub { margin: 0 0 var(--gap); color: var(--muted); }
.midden { text-align: center; }
.empty { color: var(--muted); font-size: .88rem; padding: 6px 0; }
.error-text { color: var(--err-ink); margin: 0 0 10px; font-size: .88rem; }
.ok-text { color: var(--ok-ink); margin: 0 0 10px; font-size: .88rem; }

/* --- generieke kaart (historie/verlof/profiel/rapportages/lege staten) --- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--gap); box-shadow: var(--shadow-card); }
.card h1 { margin: 0 0 4px; font-size: 1.2rem; color: var(--ts-navy); }
.card.empty-state { text-align: center; padding: 40px var(--gap); color: var(--muted); }
.card.empty-state h1, .card.empty-state h2 { margin: 0 0 8px; color: var(--ts-navy); }
.card.empty-state p { margin: 0 auto; max-width: 46ch; color: var(--muted); }

/* --- formuliervelden (login/activeren/herstellen/profiel) --- */
.field { display: block; margin-bottom: var(--gap); min-width: 0; }
.field > span { display: block; margin-bottom: 4px; font-size: .85rem; font-weight: 600; }
.field input, .field select {
  width: 100%;
  min-width: 0;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  font-size: 1rem;
}
.button--block { width: 100%; }

/* zes cijfers, groot en uit elkaar: wordt van een telefoon overgetypt */
.code-input { font-size: 1.6rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }

/* live wachtwoordsterkte-hint (wachtwoordVelden) */
.strength { min-height: 1.1em; margin: -8px 0 12px; font-size: .85rem; }
.strength.is-zwak { color: var(--err-ink); }
.strength.is-matig { color: var(--warn-ink); }
.strength.is-goed { color: var(--ok-ink); }

/* --- auth-schil: login/activeren/wachtwoord-vergeten/-herstellen --- */
.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
  background: var(--auth-bg);
}
.auth-card {
  width: min(400px, 100%);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
}
.auth-card__merk { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 22px; text-align: center; }
.auth-card h1 { margin: 0 0 4px; text-align: center; font-size: 1.25rem; color: var(--ts-navy); }

/* --- schil: accountmenu (kop) --- */
.account-wrap { position: relative; }
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 35;
  width: min(280px, 90vw);
  display: grid;
  gap: 4px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.account-menu__wie { display: grid; gap: 2px; padding: 8px 10px 12px; border-bottom: 1px solid var(--line); }
.account-menu__wie small { color: var(--muted); }
.account-menu__sectie { display: grid; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); }
.account-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: .88rem;
  text-align: left;
  text-decoration: none;
}
.account-menu__item:hover { background: var(--surface-alt); }
.account-menu__item--uitloggen { color: var(--err-ink); }

/* thema-schakelaar (accountmenu + profiel) */
.theme-switch { display: inline-flex; gap: 4px; padding: 3px; border-radius: 8px; background: var(--surface-inset); }
.theme-switch__optie { min-height: var(--tap); padding: 0 11px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: .78rem; font-weight: 600; }
.theme-switch__optie.is-active { background: var(--surface); color: var(--ts-navy); font-weight: 800; box-shadow: var(--shadow-card); }

/* --- skeleton + offline (laadstaat) --- */
.offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  padding: 8px var(--gap);
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--offline-bg);
  color: var(--offline-ink);
  text-align: center;
  font-weight: 600;
}
.skeleton { display: grid; gap: var(--gap); padding: 4px 0; }
.skeleton__blok {
  height: 88px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--skelet-a) 25%, var(--skelet-b) 50%, var(--skelet-a) 75%);
  background-size: 200% 100%;
  animation: fp-glans 1.4s infinite; /* hergebruikt de bestaande @keyframes fp-glans */
}
@media (prefers-reduced-motion: reduce) { .skeleton__blok { animation: none; } }

/* --- weekscherm: wrapper + restjes van de matrix/mobiele weergave --- */
.week { display: grid; gap: 12px; }
.week.is-toekomst .timesheet, .week.is-toekomst .mobile-day, .week.is-toekomst .card { background: var(--plan-tint); }
.bevindingen { display: grid; gap: 10px; margin-bottom: 4px; }

/* meldingsvariant naar ernst — de basisregel (§9) staat vast op info-kleuren;
   dit zijn de kleurmodifiers die de nieuwe medewerkerclient toepast op losstaande banners */
.inline-message--error, .inline-message--warning, .inline-message--success, .inline-message--info {
  border-radius: var(--radius); /* §9 laat border-top:0 staan voor de aangehechte variant; hier altijd losstaand */
}
.inline-message--error { border: 1px solid var(--err-border); background: var(--err-bg); }
.inline-message--error p { color: var(--err-ink); }
.inline-message--error > span { background: var(--ts-red); }
.inline-message--warning { border: 1px solid var(--warn-border); background: var(--warn-bg); }
.inline-message--warning p { color: var(--warn-ink); }
.inline-message--warning > span { background: var(--ts-amber); }
.inline-message--success { border: 1px solid var(--ok-border); background: var(--ok-bg); }
.inline-message--success p { color: var(--ok-ink); }
.inline-message--success > span { background: var(--ts-green); }
.inline-message--info { border: 1px solid var(--info-border); background: var(--info-bg); }
.inline-message--info p { color: var(--info-ink); }
.inline-message ul { margin: 6px 0 0; padding-left: 18px; }
.inline-message li { margin-bottom: 2px; }

.week-picker__knop {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ts-blue);
  font-size: 1.3rem;
  text-decoration: none;
}
.assignment-afkeur { display: block; margin-top: 3px; color: var(--err-ink); font-size: .78rem; }
.weekblok + .weekblok { margin-top: 20px; }
.timesheet__foot {
  display: grid;
  grid-template-columns: minmax(190px, 2fr) repeat(7, minmax(64px, .72fr)) 74px 44px;
  min-height: 46px;
  background: var(--surface-alt);
  border-top: 2px solid var(--line-strong);
  font-weight: 800;
}
.timesheet__foot > div { display: grid; place-items: center; border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.timesheet__foot > div:first-child { place-items: center start; padding-left: 18px; border-left: 0; font-weight: 700; }
.time-row--expense { background: var(--surface-alt); }
.row-total--kosten { color: var(--ts-blue); }
.row-slot { border-left: 1px solid var(--line); }
.cell-input {
  width: 58px;
  min-height: var(--tap);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  text-align: center;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.add-row-balk { border-top: 1px solid var(--line); }
.add-row-balk .add-row { width: 100%; text-align: left; }
.mobile-entry--expense { background: var(--surface-alt); border-radius: 8px; }
.submitbar__knoppen { display: flex; gap: 8px; margin-left: auto; }

/* --- bonnen (declaraties in de week) --- */
.expenses.receipts { margin-top: 20px; }
.receipt-lijst { display: grid; }
.receipt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 17px; border-bottom: 1px solid var(--line); }
.receipt-row:last-child { border-bottom: 0; }
.receipt-row > div { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.receipt-row a { color: var(--ts-blue); font-weight: 600; overflow-wrap: anywhere; }
.receipt-row small { color: var(--muted); font-size: .74rem; }
.receipt-los { padding: 2px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-ink); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.receipt-add { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 17px; border-top: 1px solid var(--line); }
.receipt-add select { flex: 1; min-width: 160px; min-height: var(--tap); padding: 0 10px; border: 1px solid var(--input-border); border-radius: 6px; background: var(--input-bg); font-size: .85rem; }

/* --- historie --- */
.hist-lijst { display: grid; gap: 8px; margin-top: 12px; }
.hist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: var(--tap);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.hist-row:hover { border-color: var(--line-strong); }
.hist-row__week { display: grid; gap: 2px; min-width: 0; }
.hist-row__week small { color: var(--muted); font-size: .78rem; }
.hist-row__plaatsing { color: var(--faint); }
.hist-row__uren { text-align: right; }
.hist-row__uren small { display: block; color: var(--muted); font-size: .78rem; }
.hist-row__status { display: grid; gap: 2px; justify-items: end; text-align: right; }
.hist-row__reden { color: var(--err-ink); font-size: .78rem; }

/* status--{submitted,rejected,approved,locked}: de klassen die STATUS_KLASSE in
   app.js daadwerkelijk zet (§7 dekt alleen de oude concept/ingediend/afgekeurd/
   goedgekeurd-namen) */
.status--submitted { background: var(--warn-bg); color: var(--warn-ink); }
.status--rejected { background: var(--err-bg); color: var(--err-ink); }
.status--approved { background: var(--ok-bg); color: var(--ok-ink); }
.status--locked { background: var(--ok-bg); color: var(--ok-ink); }

/* --- verlof --- */
.saldo-lijst { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 14px; }
.saldo-kaart { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none; }
.saldo-kaart:hover { border-color: var(--line-strong); }
.saldo-kaart__naam { display: block; font-weight: 700; color: var(--ts-navy); }
.saldo-kaart__getal { display: block; margin-top: 4px; font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.saldo-kaart__gepland { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; }
.saldo-kaart__meer { display: block; margin-top: 8px; color: var(--ts-blue); font-size: .82rem; }
.terug-link { display: inline-flex; align-items: center; min-height: var(--tap); margin-bottom: 4px; color: var(--ts-blue); font-weight: 600; text-decoration: none; }
.saldo-groot { margin: 6px 0 16px; color: var(--ts-navy); font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tabel-wikkel { overflow-x: auto; overscroll-behavior-inline: contain; }
.mutaties { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mutaties th, .mutaties td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.mutaties th { color: var(--muted); font-size: .8rem; font-weight: 700; }
.mutaties th.rechts, .mutaties td.rechts { text-align: right; }
.mutaties .is-af { color: var(--err-ink); font-weight: 700; }
.mutaties .is-bij { color: var(--ok-ink); font-weight: 700; }
.mut-reden { display: block; color: var(--muted); font-size: .8rem; }

/* --- profiel (thema/wachtwoord/apparaten) --- */
.profiel-sectie { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.profiel-sectie:first-of-type { margin-top: 14px; padding-top: 0; border-top: 0; }
.profiel-sectie h2 { margin: 0 0 4px; font-size: 1rem; color: var(--ts-navy); }
.sessie-lijst { display: grid; gap: 8px; margin: 10px 0; }
.sessie-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.sessie-row.is-huidig { border-color: var(--ok-border); background: var(--ok-bg); }
.sessie-row small { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; }
.sessie-badge { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); font-size: .68rem; font-weight: 800; text-transform: uppercase; }

/* --- mobiele ondernavigatie: <a>, niet <button> (§15 dekt alleen button) --- */
.mobile-nav a { display: grid; place-content: center; gap: 2px; min-width: 0; min-height: var(--tap); padding: 0; color: var(--muted); font-size: .72rem; text-decoration: none; }
.mobile-nav a > span { font-size: 1.1rem; }
.mobile-nav a.is-active { color: var(--ts-orange); font-weight: 800; }

/* ---------- reflow <640px voor deze schermen ---------- */
@media (max-width: 640px) {
  .auth-card { padding: 20px 18px; }
  .hist-row { grid-template-columns: minmax(0, 1fr) auto; }
  .hist-row__status { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .receipt-row { padding: 10px 13px; }
  .account-menu { right: -8px; width: min(260px, 84vw); }
}

/* Opslagstatus in offline-toestand: waarschuwingskleur (modifier op .save-state). */
.save-state.is-offline { color: var(--warn-ink); font-weight: 700; }

/* Het donkere woordmerk staat in beide thema's op exact hetzelfde witte vlak.
   Zo blijft het merkbeeld correct zonder dat dark-mode-padding het logo kleiner
   maakt of de kop bij een themawissel laat verspringen. */

/* ---------- 23. Bouwronde 05-09: toelichting, standaardweek, alleen-lezen, TOTP, PWA ---------- */

/* --- toelichting per regel (C-01): ✎-toggle in de laatste matrixkolom, paneel onder de rij --- */
.row-slot--note { display: grid; place-items: center; }
.note-toggle {
  position: relative;
  width: var(--tap);
  min-height: var(--tap);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ts-blue);
  font-size: 1.05rem;
}
.note-toggle:hover, .note-toggle.is-open { background: var(--ts-blue-soft); }
.note-badge {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ts-blue);
  color: var(--solid-ink);
  font-size: .62rem;
  font-style: normal;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}
.notes-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 12px;
  padding: 10px 18px 12px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}
.notes-panel__kop { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.notes-panel__kop small { color: var(--muted); font-size: .72rem; }
.notes-panel__regel { display: grid; gap: 3px; min-width: 0; }
.notes-panel__regel > span { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.notes-panel--dag { grid-template-columns: minmax(0, 1fr); padding: 0; background: transparent; border: 0; }
.note-input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  font-size: 1rem;
}
.note-input.is-zonder-uren { border-style: dashed; background: transparent; }
.note-input.is-verplicht { border: 2px solid var(--ts-red); background: var(--err-bg); }
.note-input:disabled { background: var(--surface-inset); color: var(--muted); border-style: solid; }
/* cel met toelichting: klein blauw stipje rechtsboven, ook in donker leesbaar */
.cell-input.heeft-toelichting {
  background-image: radial-gradient(circle, var(--ts-blue) 2.5px, transparent 3px);
  background-repeat: no-repeat;
  background-position: right 3px top 3px;
  background-size: 8px 8px;
}

/* mobiel: invoerregel + toggle naast elkaar, toelichtingsveld eronder */
.mobile-entry-wrap { border-bottom: 1px solid var(--line); }
.mobile-entry-wrap:last-of-type { border-bottom: 0; }
.mobile-entry-wrap__rij { display: grid; grid-template-columns: minmax(0, 1fr) var(--tap); align-items: center; }
.mobile-entry-wrap__rij .note-toggle { justify-self: center; margin-right: 4px; }
.mobile-entry-wrap--expense { background: var(--surface-alt); }
.mobile-note { padding: 0 11px 10px 27px; }
.mobile-note .note-input { min-height: var(--tap); }

/* --- afwijkingsreden (bestaande reden met Wijzigen) --- */
.reden-blok > div { display: grid; gap: 4px; justify-items: start; }

/* --- Vul standaardweek (U2-10): secundair, deterministisch, herstelbaar --- */
.standaardweek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.standaardweek__uitleg { flex-basis: 100%; color: var(--muted); font-size: .78rem; }
.standaardweek.is-ingevuld {
  min-height: var(--tap);
  padding: 4px 12px;
  border: 1px solid var(--ok-border);
  border-radius: 7px;
  background: var(--ok-bg);
  color: var(--ok-ink);
  font-size: .85rem;
  font-weight: 700;
}
.standaardweek.is-ingevuld .text-button { min-height: 36px; }
.button--soft:disabled { color: var(--btn-disabled-ink); background: var(--btn-disabled-bg); border-color: var(--btn-disabled-border); }
.standaardweek--mobiel { display: block; }
.mobile-standard--los { margin-top: 12px; border-top: 1px solid var(--ts-orange-soft); border-radius: var(--radius); }
.mobile-standard:disabled { color: var(--btn-disabled-ink); background: var(--btn-disabled-bg); border-color: var(--btn-disabled-border); }
.mobile-standard:disabled small { color: var(--btn-disabled-ink); }
.mobile-standard.is-ingevuld {
  grid-template-columns: 29px minmax(0, 1fr) auto;
  background: var(--ok-bg);
  border-color: var(--ok-border);
  color: var(--ok-ink);
}
.mobile-standard.is-ingevuld small { color: var(--ok-ink); }

/* --- bronbadge: e-UUR-historie of vergrendeld (alleen-lezen) --- */
.bron-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}
.bron-badge--euur { background: var(--ts-blue-soft); color: var(--ts-blue); }
.bron-badge--vergrendeld { background: var(--chip-bg); color: var(--chip-ink); }
.hist-row__pillen { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: end; }
.hist-row--lezen { background: var(--surface-alt); }
.hist-meer { display: flex; justify-content: center; margin-top: 12px; }

/* --- dialoog: tekstvak (afwijkingsreden) --- */
.dialoog textarea, .dialoog__textarea {
  width: 100%;
  min-width: 0;
  min-height: 110px;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  font-size: 1rem;
  resize: vertical;
}

/* --- TOTP: koppelen, back-upcodes, back-upcode invoer --- */
.totp-stappen { margin: 0 0 12px; padding-left: 20px; color: var(--muted); font-size: .88rem; }
.totp-stappen li { margin-bottom: 4px; }
.totp-qr {
  display: block;
  width: min(220px, 100%);
  height: auto;
  margin: 6px auto 12px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff; /* QR altijd donker-op-wit, ook in het donkere thema */
}
.totp-secret {
  display: block;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--surface-alt);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
  text-align: center;
  user-select: all;
}
.auth-card .fp-knoppen { justify-content: center; margin-bottom: var(--gap); }
.code-input--backup { font-size: 1.25rem; letter-spacing: .18em; text-transform: uppercase; }
.backupcodes {
  margin: 8px 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.backupcodes li {
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-alt);
  text-align: center;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
@media print {
  body, .auth { background: #ffffff; color: #000000; }
  .auth { min-height: 0; display: block; padding: 0; }
  .auth-card { width: 100%; box-shadow: none; padding: 0; }
  .backupcodes li { border-color: #000000; background: #ffffff; color: #000000; }
  .no-print, .offline-banner, .update-toast { display: none !important; }
}

/* --- PWA: melding nieuwe versie --- */
.update-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: min(440px, calc(100vw - 24px));
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.update-toast > span { flex: 1 1 200px; min-width: 0; font-weight: 600; }
@media (max-width: 1023px) { .update-toast { bottom: calc(148px + env(safe-area-inset-bottom)); } }

/* --- reflow smal (320px): nieuwe onderdelen stapelen, geen paginascroll --- */
@media (max-width: 480px) {
  .standaardweek { width: 100%; }
  .standaardweek .button { width: 100%; }
  .standaardweek.is-ingevuld { width: 100%; }
  .notes-panel { padding: 8px 10px 10px; }
  .mobile-note { padding-left: 11px; }
  .week-toolbar .bron-badge, .week-toolbar .status { flex: 0 1 auto; }
  .hist-row__pillen { justify-content: start; }
}
@media (max-width: 360px) {
  .backupcodes { grid-template-columns: minmax(0, 1fr); }
  .auth-card .fp-knoppen .button { width: 100%; }
  .update-toast .button { width: 100%; }
}