/* Finishing-assistent — muurscherm (breed) + mobiel (gestapeld onder 900px).
   Zelfde tokens als de rep-cockpit (public/styles/rep-home.css): licht + donker via
   prefers-color-scheme, met :root[data-theme] als override (?thema=donker|licht). */
:root {
  --ground: #FAF9F6; --surface: #FFFFFF; --surface-2: #F4F2EC;
  --ink: #23211B; --ink-2: #6C675C; --ink-3: #98927F; --line: #E7E3DA;
  --accent: #2F5D50; --accent-soft: #E3EDE9;
  --crit: #B3261E; --crit-bg: #F9ECEB; --warn: #8A5A00; --warn-bg: #F7EEDC;
  --good: #2E6B3E; --good-bg: #E9F1EA; --chip-bg: #F1EFE9; --spark: #A9C6BC;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #16150F; --surface: #201E19; --surface-2: #26241E;
    --ink: #ECE9E2; --ink-2: #A8A294; --ink-3: #7D786B; --line: #37342E;
    --accent: #7FB8A4; --accent-soft: #26332E;
    --crit: #E58279; --crit-bg: #382220; --warn: #D9A94E; --warn-bg: #362D1B;
    --good: #86BE92; --good-bg: #22301F; --chip-bg: #2B2925; --spark: #40584F;
  }
}
:root[data-theme="dark"] {
  --ground: #16150F; --surface: #201E19; --surface-2: #26241E;
  --ink: #ECE9E2; --ink-2: #A8A294; --ink-3: #7D786B; --line: #37342E;
  --accent: #7FB8A4; --accent-soft: #26332E;
  --crit: #E58279; --crit-bg: #382220; --warn: #D9A94E; --warn-bg: #362D1B;
  --good: #86BE92; --good-bg: #22301F; --chip-bg: #2B2925; --spark: #40584F;
}
:root[data-theme="light"] {
  --ground: #FAF9F6; --surface: #FFFFFF; --surface-2: #F4F2EC;
  --ink: #23211B; --ink-2: #6C675C; --ink-3: #98927F; --line: #E7E3DA;
  --accent: #2F5D50; --accent-soft: #E3EDE9;
  --crit: #B3261E; --crit-bg: #F9ECEB; --warn: #8A5A00; --warn-bg: #F7EEDC;
  --good: #2E6B3E; --good-bg: #E9F1EA; --chip-bg: #F1EFE9; --spark: #A9C6BC;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.fa-page {
  background: var(--ground); color: var(--ink);
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  min-height: 100vh; overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
h1, h2, h3 { margin: 0; }

/* ── Kopbalk ─────────────────────────────────────────────────────────────── */
.fa-kop {
  display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  padding: 12px 20px; padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.fa-kop-titel { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; min-width: 0; }
.fa-terug {
  text-decoration: none; color: var(--ink-2); font-size: 18px; border: 1px solid var(--line);
  border-radius: 8px; width: 34px; height: 34px; display: grid; place-items: center; align-self: center;
}
.fa-titel { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.fa-datum { color: var(--ink-2); font-size: 14px; }
.fa-klok { color: var(--ink); font-size: 18px; font-weight: 600; }
.fa-kop > .fa-bijgewerkt { margin-left: auto; color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.fa-link {
  text-decoration: none; color: var(--accent); font-weight: 600; font-size: 13px;
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; white-space: nowrap;
}
.fa-link:hover, .fa-link:focus-visible { background: var(--accent-soft); }
.fa-terug:focus-visible, .fa-link:focus-visible, .fa-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fa-melding {
  margin: 12px 20px 0; padding: 10px 14px; border-radius: 10px;
  background: var(--crit-bg); color: var(--crit); border: 1px solid var(--line); font-size: 14px;
}
.fa-melding[hidden] { display: none; }

/* ── Indeling ────────────────────────────────────────────────────────────── */
.fa-grid {
  display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  gap: 18px; padding: 16px 20px 40px; align-items: start;
}
.fa-assistent, .fa-bord { min-width: 0; }
.fa-assistent { display: flex; flex-direction: column; gap: 14px; }

/* ── Te doen (actiepunten, geen tellingen) ───────────────────────────────── */
.fa-todo {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
}
.fa-todo-titel { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.fa-laden, .fa-leeg { color: var(--ink-3); padding: 8px 2px; }
.fa-acties { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fa-actie {
  border: 1px solid var(--line); border-left: 4px solid var(--ink-3); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere;
  background: var(--surface);
}
.fa-actie.is-vergeten_te_stoppen, .fa-actie.is-afwerking_loopt_gevaar { border-left-color: var(--crit); }
.fa-actie.is-productie_klopt_niet { border-left-color: var(--warn); }
.fa-actie.is-afwijkende_instructie { border-left-color: var(--accent); }
.fa-actie-kop { display: flex; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; align-items: baseline; }
.fa-actie-soort { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.fa-actie-titel { font-weight: 700; font-size: 16px; }
.fa-actie-reden { color: var(--ink-2); font-size: 14px; }
.fa-actie-citaat {
  margin: 2px 0; padding: 6px 10px; border-left: 3px solid var(--line); background: var(--surface-2);
  border-radius: 0 8px 8px 0; font-style: italic; color: var(--ink); font-size: 14px;
}
.fa-actie-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.fa-knop {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 12px; white-space: nowrap;
  background: var(--surface-2); color: var(--accent);
}
.fa-knop:hover, .fa-knop:focus-visible { background: var(--accent-soft); }
.fa-knop-afvink { color: var(--ink); }
.fa-knop-goedkeur { background: var(--accent); color: #fff; border-color: transparent; }
.fa-knop-goedkeur:hover, .fa-knop-goedkeur:focus-visible { background: var(--accent); filter: brightness(1.08); }
.fa-knop:disabled { opacity: .6; cursor: default; }
.fa-bevestig {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 10px; border-radius: 9px; background: var(--accent-soft);
}
.fa-bevestig-tekst { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--ink); }
.fa-knop:focus-visible, .fa-toast-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fa-toast {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px;
  background: var(--ink); color: var(--ground); font-size: 14px;
}
.fa-toast[hidden] { display: none; }
.fa-toast-knop {
  font: inherit; font-weight: 700; cursor: pointer; background: none; border: 0; padding: 0;
  color: var(--ground); text-decoration: underline;
}
.fa-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fa-lijst li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.fa-lijst .fa-sub { flex-basis: 100%; color: var(--ink-2); font-size: 13.5px; }
.fa-lijst-kort li .fa-sub { flex-basis: auto; }
.fa-av { color: var(--ink-2); font-size: .92em; }
.fa-klant { font-weight: 600; }
.fa-dag { font-weight: 600; min-width: 5.5em; }
.fa-meer { color: var(--ink-3); font-style: italic; }
.fa-uitleg { margin: 6px 0; color: var(--ink-3); font-size: 13px; }

/* ── Chat ────────────────────────────────────────────────────────────────── */
.fa-chat-host {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px 10px;
}
.fa-chat-host .fl-chat {
  --fl-agent-bg: var(--surface-2);
  --fl-agent-border: var(--line);
  --fl-text: var(--ink);
  --fl-muted: var(--ink-2);
  --fl-muted-2: var(--ink-3);
  min-height: 280px;
  max-height: 60vh;
}
.fa-chat-host .fl-chip,
.fa-chat-host .fl-reset,
.fa-chat-host .fl-compose { background: var(--surface); border-color: var(--line); color: var(--ink); }
.fa-chat-host .fl-chip:hover { background: var(--surface-2); border-color: var(--accent-soft); box-shadow: none; }
.fa-chat-host .fl-reset:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.fa-chat-host .fl-input { color: var(--ink); }

/* ── Bord ────────────────────────────────────────────────────────────────── */
.fa-bord { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 14px; }
.fa-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fa-tab {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  border-radius: 999px; padding: 6px 14px;
}
.fa-tab[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: transparent; }
:root[data-theme="dark"] .fa-tab[aria-pressed="true"] { color: #16150F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fa-tab[aria-pressed="true"] { color: #16150F; } }

.fa-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.fa-lane { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-width: 0; }
.fa-lane-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fa-lane-kop h3 { font-size: 16px; }
.fa-lane-meta { color: var(--ink-2); font-size: 13px; }
.fa-kaarten { display: flex; flex-direction: column; gap: 8px; }
.fa-kaart {
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere;
}
.fa-kaart.is-klaar { opacity: .62; }
.fa-kaart.is-loopt { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.fa-kaart.is-niet-in-wis { border-style: dashed; border-color: var(--ink-3); }
.fa-kaart.is-niet-in-wis.is-loopt { border-color: var(--accent); }
.fa-kaart-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fa-status { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.fa-status.is-loopt { background: var(--accent-soft); color: var(--accent); font-family: var(--mono); }
.fa-status.is-klaar { background: var(--good-bg); color: var(--good); }
.fa-status.is-open { background: var(--chip-bg); color: var(--ink-2); }
.fa-tag { font-size: 11.5px; color: var(--ink-2); border: 1px dashed var(--ink-3); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.fa-kaart-klant { font-weight: 600; }
.fa-kaart-bewerking { color: var(--ink-2); font-size: 13.5px; }
.fa-kaart-meta { display: flex; gap: 4px 12px; flex-wrap: wrap; color: var(--ink-2); font-size: 13px; }

.fa-niet-in-wis, .fa-uit-voorraad, .fa-gereed-notitie { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.fa-niet-in-wis h3, .fa-uit-voorraad h3, .fa-gereed-notitie h3 { font-size: 15px; margin-bottom: 2px; }
.fa-niet-in-wis li.is-niet-in-wis { border: 1px dashed var(--ink-3); border-radius: 8px; padding: 6px 9px; }
/* Productie buiten WIS (Q2 smal / tapis) en «gereed volgens de notitie» (01-10-2026). */
.fa-buiten-wis { margin-top: 12px; }
.fa-tag.is-lang { white-space: normal; }

.fa-voet { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; margin-top: 12px; color: var(--ink-3); font-size: 12px; }

/* ── Mobiel: alles gestapeld (kop, Te doen, chat, bord) ─────────────────── */
@media (max-width: 899px) {
  .fa-kop { padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); position: static; }
  .fa-kop > .fa-bijgewerkt { margin-left: 0; }
  .fa-grid { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 32px; gap: 14px; }
  .fa-melding { margin: 10px 16px 0; }
  .fa-lanes { grid-template-columns: minmax(0, 1fr); }
  .fa-titel { font-size: 21px; }
}

/* ── Muurscherm: groot, leesbaar op afstand ──────────────────────────────── */
@media (min-width: 1600px) {
  body.fa-page { font-size: 18px; }
  .fa-titel { font-size: 32px; }
  .fa-datum { font-size: 18px; }
  .fa-klok { font-size: 26px; }
  .fa-kop > .fa-bijgewerkt { font-size: 16px; }
  .fa-link { font-size: 16px; }
  .fa-grid { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 24px; padding: 20px 28px 40px; }
  .fa-todo-titel { font-size: 28px; }
  .fa-actie-soort { font-size: 14px; }
  .fa-actie-titel { font-size: 21px; }
  .fa-actie-reden, .fa-actie-citaat { font-size: 17px; }
  .fa-knop { font-size: 16px; padding: 8px 14px; }
  .fa-toast { font-size: 17px; }
  .fa-lijst .fa-sub, .fa-uitleg { font-size: 16px; }
  .fa-tab { font-size: 18px; padding: 8px 18px; }
  .fa-lanes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
  .fa-lane-kop h3 { font-size: 22px; }
  .fa-lane-meta { font-size: 18px; }
  .fa-kaart { padding: 12px 14px; font-size: 18px; }
  .fa-kaart-bewerking, .fa-kaart-meta { font-size: 18px; }
  .fa-status { font-size: 18px; padding: 3px 10px; }
  .fa-tag { font-size: 16px; }
  .fa-niet-in-wis h3, .fa-uit-voorraad h3, .fa-gereed-notitie h3 { font-size: 20px; }
  .fa-voet { font-size: 15px; }
}