/* ─────────────────────────────────────────────────────────────────────────────
   Wendy klantportaal — huisstijl 1:1 uit de app (ios/Wendy/Sources/DesignSystem/Theme.swift).
   Elke waarde hieronder is letterlijk overgenomen uit Brand/Space/Radius, zodat het portaal
   en de app niet uit elkaar lopen. Clean, wit en vlak — geen zwevende diepte.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Canvas & oppervlak */
  --cream: #F4F7FB;      /* rustig dashboard-canvas */
  --surface: #FFFFFF;    /* kaarten / paper */
  --mist: #F7F9FC;       /* subtiel vlak (ink-100) */

  /* Tekst (slate ink) */
  --ink: #0F172A;
  --ink-soft: #475569;
  --ink-faint: #94A3B8;

  /* Primair: Wendy Blue */
  --coral: #2F6BFF;
  --coral-deep: #1F57E8;
  --coral-soft: #DAE4FF;
  --peach: #EEF3FF;

  /* Accenten */
  --success: #14B981;
  --orange: #FF6A2C;
  --amber: #FFB020;
  --berry: #F0413E;
  --sky: #0EA5E9;
  --violet: #8B5CF6;
  --hairline: #E2E8F0;

  /* Space (Space.swift) */
  --s-xs: 6px;
  --s-sm: 10px;
  --s-md: 16px;
  --s-lg: 22px;
  --s-xl: 28px;
  --s-screen: 22px;

  /* Radius — bewust krap/crisp, niet bollig */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 6px;
  --r-xl: 8px;
  --r-card: 12px;
  --pill: 999px;

  /* Schaduwen zijn flinterdun en vlak (huisstijl: crisp, niet zwevend). */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-blue: 0 4px 12px rgba(47, 107, 255, .18);

  /* Desktop-kolom in lijn met het admin-dashboard (max-width 1040px). Breed genoeg
     voor een echte desktop-indeling, smal genoeg om leesbaar te blijven. */
  --content: 1200px;
  --sidebar: 248px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: "Sora", system-ui, sans-serif;
  margin: 0;
  letter-spacing: -.01em;
}

button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--coral-deep); }

/* De inline-iconen zijn SVG's met alleen een viewBox, dus zónder eigen afmeting. Zonder
   deze basisregel rekt zo'n icoon op tot de volle breedte van z'n container — dat gaf een
   plusje van 400 pixels. Specifiekere regels (.tab svg, .icon-btn svg, …) winnen gewoon. */
svg { width: 1em; height: 1em; flex: none; }

/* Safari maakt van een telefoonnummer eigenhandig een link — ook mét
   <meta name="format-detection" content="telephone=no">, want dat werkt alleen op iOS.
   Op de gesprekkenlijst leverde dat onderstreepte namen op die eruitzien als een defect. */
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* Icoonhouder met een vaste maat: het icoon vult 'm precies op. */
.ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ico > svg { width: 100%; height: 100%; }

/* Een muisklik mag geen focusring achterlaten (dat gaf een blauw kader om tegels en rijen);
   toetsenbordnavigatie moet er juist wél een houden. */
button:focus, a:focus, [tabindex]:focus, label:focus { outline: none; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

.hide { display: none !important; }
.spacer { flex: 1; }

/* ── Typografie-helpers (spiegelen Font.wendy* uit Theme.swift) ─────────────── */

.display   { font-family: "Sora", sans-serif; font-weight: 700; font-size: 30px; letter-spacing: -.5px; }
.title     { font-family: "Sora", sans-serif; font-weight: 700; font-size: 20px; }
.headline  { font-family: "Sora", sans-serif; font-weight: 600; font-size: 17px; }
.body-text { font-size: 15px; }
.meta      { font-size: 12px; font-weight: 500; }

/* Kicker: JetBrains Mono, uppercase + tracking — de sectiekop van de app. */
.kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--ink-faint);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-md);
}

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.num { font-variant-numeric: tabular-nums; }

/* ── Oppervlakken ──────────────────────────────────────────────────────────── */

/* wendyCard(): haarlijn-rand + krappe afronding + flinterdunne schaduw. */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: var(--s-lg);
}

/* Kaartkop: titel + omschrijving links, actie (link/knop) rechts — shadcn CardHeader. */
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-md);
  margin-bottom: var(--s-md);
}
.card-title { font-family: "Sora", sans-serif; font-size: 15px; font-weight: 600; color: var(--ink); }
.card-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.card-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600;
  color: var(--coral); text-decoration: none;
  white-space: nowrap; margin-top: 1px;
}
.card-link:hover { color: var(--coral-deep); }
.card-link svg { width: 12px; height: 12px; }

.hairline { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* hairlineBand(): editoriale band met haarlijn boven/onder en ruime lucht. */
.band {
  padding: var(--s-lg) 0;
  border-bottom: 1px solid var(--hairline);
}
.band.band-top { border-top: 1px solid var(--hairline); }

/* ── Knoppen ───────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  cursor: pointer;
  font-weight: 600;
  transition: background-color .15s ease, transform .15s ease, opacity .15s ease, border-color .15s ease;
  text-decoration: none;
}
.btn:active { transform: scale(.98); }
.btn:disabled { cursor: not-allowed; opacity: .4; }
.btn:disabled:active { transform: none; }

/* WendyPrimaryButtonStyle */
.btn-primary {
  width: 100%;
  font-size: 14px;
  padding: 11px 18px;
  color: #fff;
  background: var(--coral);
  box-shadow: var(--shadow-blue);
}
.btn-primary:hover:not(:disabled) { background: var(--coral-deep); }

.btn-secondary {
  font-size: 14px;
  padding: 10px 18px;
  color: var(--ink);
  background: var(--surface);
  border-color: var(--hairline);
}
.btn-secondary:hover:not(:disabled) { border-color: #cdd6e4; background: var(--mist); }

.btn-danger {
  font-size: 14px;
  padding: 10px 18px;
  color: var(--berry);
  background: var(--surface);
  border-color: #f3c1c0;
}
.btn-danger:hover:not(:disabled) { background: #FDECEA; }

.btn-link {
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--coral);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }

.btn-sm { font-size: 13px; padding: 7px 14px; }

/* Spinner in knoppen en laadschermen */
.spinner {
  width: 17px; height: 17px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* ── Pills & badges ────────────────────────────────────────────────────────── */

.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--pill);
  white-space: nowrap;
  color: var(--coral);
  background: rgba(47, 107, 255, .13);
}
.pill-success { color: var(--success); background: rgba(20, 185, 129, .13); }
.pill-faint   { color: var(--ink-faint); background: rgba(148, 163, 184, .13); }
.pill-amber   { color: #b97e00; background: rgba(255, 176, 32, .16); }
.pill-berry   { color: var(--berry); background: rgba(240, 65, 62, .13); }

/* ── Avatars ───────────────────────────────────────────────────────────────── */

.avatar-wendy {
  border-radius: 50%;
  border: 1px solid var(--hairline);
  object-fit: cover;
  object-position: 46% 50%;   /* gezicht naar het midden, zoals WendyAvatar */
  flex: none;
  background: var(--peach);
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex: none;
  background: var(--peach);
  color: var(--coral);
  font-weight: 700;
}
.avatar.is-missed { background: var(--mist); color: var(--ink-soft); }
.avatar svg { width: 44%; height: 44%; }

/* ── Formulieren ───────────────────────────────────────────────────────────── */

/* Sectie-editor: alleen lucht tússen de blokken (velden / fout / opslaan), niet ín het
   formulier. Daar scheiden de haarlijnen de velden, precies zoals in de app — een gap op
   élk kind gaf 45px tussen twee velden en maakte het formulier eindeloos lang. */
/* Formulier in web-vormtaal: een invoerveld ziet eruit als een invoerveld (rand + vlak),
   en witruimte scheidt de velden. De app gebruikt randloze regels met haarlijnen — dat
   leest op een telefoon prima, maar op een breed scherm ziet het eruit als platte tekst
   waarvan je niet ziet dat je erin kunt typen. */
.editor { display: flex; flex-direction: column; gap: var(--s-lg); }
.editor-body { display: flex; flex-direction: column; gap: var(--s-md); }
.editor-body > hr { display: none; }
.editor-body .field { padding: 0; max-width: 640px; }
.editor-body > p:first-child { margin: 0; }

/* Actiebalk onderaan een formulier: knop op natuurlijke breedte, links uitgelijnd. */
.editor-actions {
  display: flex; align-items: center; gap: var(--s-md);
  padding-top: var(--s-xs);
}
.editor-actions .btn-primary { width: auto; min-width: 150px; }
.editor-actions .hint { font-size: 13px; color: var(--ink-faint); }

/* FieldBlock: kop → besturing → uitleg. */
.field { padding: 11px 0; }
.field > label,
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.field-hint {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 6px;
}

.input, .textarea, .select {
  width: 100%;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus, .select:focus {
  outline: 0;
  border-color: var(--coral);
  box-shadow: 0 0 0 1px var(--coral);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
/* Groeit mee met de inhoud (zie autoGrow), dus geen vast hoog vak en geen sleepgreep. */
.textarea { resize: none; min-height: 44px; line-height: 1.5; overflow: hidden; }
.select { appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394A3B8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px;
}

/* CleanField: borderloos, groot, met onderlijn die blauw kleurt bij focus. */
.clean-field {
  width: 100%;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 6px 0 10px;
  transition: border-color .15s ease, border-width .15s ease;
}
.clean-field:focus { outline: 0; border-bottom: 2px solid var(--coral); padding-bottom: 9px; }
.clean-field::placeholder { color: var(--ink-faint); font-weight: 400; }

/* Toggle — de iOS-switch, maar op web-maat (shadcn-switch is 44×24). */
.toggle { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .track {
  position: absolute; inset: 0;
  background: #E5E7EB;
  border-radius: var(--pill);
  cursor: pointer;
  transition: background-color .2s ease;
}
.toggle .track::before {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  left: 2px; top: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
  transition: transform .2s ease;
}
.toggle input:checked + .track { background: var(--coral); }
.toggle input:checked + .track::before { transform: translateX(18px); }
.toggle input:disabled + .track { opacity: .5; cursor: not-allowed; }

/* Segmented control (toon-kiezer) */
.segmented {
  display: inline-flex;
  background: var(--mist);
  border-radius: var(--r-xl);
  padding: 3px;
  gap: 3px;
}
.segmented button {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 7px 16px;
  border-radius: var(--r-lg);
  transition: background-color .15s ease, color .15s ease;
}
.segmented button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* Filterchips (Alle / Afgehandeld / Gemist) */
.chips { display: flex; gap: var(--s-xs); flex-wrap: wrap; }
.chip {
  border: 1px solid var(--hairline);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--ink-soft);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { background: var(--mist); color: var(--ink); }
.chip.active { background: var(--coral); border-color: var(--coral); color: #fff; }
.chip.active:hover { background: var(--coral-deep); color: #fff; }

/* Toolbar boven een lijst: zoekveld links, filterchips rechts — één strakke rij. */
.search { flex: 1; min-width: 220px; }

/* Zoekveld — wit met haarlijn (shadcn-input), niet als grijs vlak. */
.search {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 9px 13px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
  max-width: 380px;
}
.search:focus-within { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.search input { flex: 1; border: 0; background: none; font-size: 14px; }
.search input:focus { outline: 0; }
.search svg { width: 16px; height: 16px; color: var(--ink-faint); flex: none; }
.search .clear { border: 0; background: none; cursor: pointer; color: var(--ink-faint); padding: 0; display: flex; }

/* ── Rijen ─────────────────────────────────────────────────────────────────── */

/* InfoRow: label links, waarde rechts. */
.info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-md);
  padding: 13px 0;
}
.info-row .val { color: var(--ink-soft); text-align: right; }

/* NavRow: titel + chevron. */
.nav-row {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  padding: 13px 0;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  color: var(--ink);
}
.nav-row:hover { color: var(--coral-deep); }
.nav-row .chev { margin-left: auto; color: var(--ink-faint); flex: none; display: flex; }
.nav-row .chev svg { width: 13px; height: 13px; }

/* Toggle-rij: tekst + uitleg links, switch rechts. */
.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  padding: 13px 0;
}
.toggle-row .txt { flex: 1; min-width: 0; }
.toggle-row .txt .t { display: block; font-size: 15px; }
.toggle-row .txt .h { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* ── Transcript ────────────────────────────────────────────────────────────── */

.bubble-wrap { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--s-sm); }
.bubble-wrap.ai { align-items: flex-start; }
.bubble-wrap.caller { align-items: flex-end; }
.bubble-wrap .who { font-size: 10px; font-weight: 600; color: var(--ink-faint); }
.bubble {
  font-size: 15px;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 16px;
  max-width: 84%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bubble-wrap.ai .bubble { background: var(--peach); }
.bubble-wrap.caller .bubble { background: var(--mist); }

/* ── Async-states (laden / fout / leeg) ────────────────────────────────────── */

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-md);
  text-align: center;
  padding: var(--s-xl);
  min-height: 320px;
}
.state .icon-circle {
  width: 76px; height: 76px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mist);
  color: var(--ink-faint);
}
.state .icon-circle.brand { background: var(--peach); color: var(--coral); }
.state .icon-circle svg { width: 28px; height: 28px; }
.state h3 { font-family: "Sora", sans-serif; font-size: 20px; font-weight: 700; }
.state p { margin: 0; color: var(--ink-soft); max-width: 42ch; }
.state .btn-primary { max-width: 240px; }

/* Laadscherm: Wendy's avatar met zachte pulse. */
.state .pulse { animation: pulse .95s ease-in-out infinite alternate; }
@keyframes pulse {
  from { transform: scale(.96); opacity: .72; }
  to   { transform: scale(1.04); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .state .pulse { animation: none; } }

/* Offline-balk: rustig slate, over elk scherm. */
.offline-banner {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 7px 12px;
}
.offline-banner svg { width: 13px; height: 13px; }

/* ── App-shell ─────────────────────────────────────────────────────────────── */

/* Het venster is de app: de shell scrollt niet, elk scherm regelt z'n eigen scrollen.
   Dat is de voorwaarde voor het bento-raster (past exact) en de inbox (twee kolommen
   die los van elkaar scrollen). */
.app { display: flex; height: 100vh; overflow: hidden; }

/* Icoon-rail op desktop = de tabbalk van de app, verticaal. 84px is de kleinste maat
   waarop "Gesprekken" en "Instellingen" voluit onder het icoon passen; een afgekapt
   "Instelling" leest als een fout in plaats van als een keuze. */
.rail {
  width: 84px;
  flex: none;
  border-right: 1px solid var(--hairline);
  background: var(--surface);
  padding: 14px 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rail-mark { width: 34px; height: 34px; border-radius: var(--r-lg); overflow: hidden; display: block; flex: none; }
.rail-mark img { width: 100%; height: 100%; display: block; }

/* Korte haarlijn over de rail-breedte: scheiding onder het merk en boven het account. */
.rail-lijn { width: 24px; height: 1px; flex: none; background: var(--hairline); margin-top: 12px; }

/* De navigatie staat bovenaan, niet verticaal gecentreerd — dat centreren is precies
   wat een smalle rail leeg laat ogen. */
.rail nav {
  margin-top: 18px;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.tab {
  width: 72px;
  padding: 6px 0 5px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; background: none; cursor: pointer;
  border-radius: var(--r-xl);
  color: var(--ink-faint);
  transition: background-color .12s ease, color .12s ease;
}
.tab .vak {
  width: 44px; height: 44px;
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .12s ease;
}
.tab svg { width: 21px; height: 21px; flex: none; }
.tab span { font-size: 10px; font-weight: 600; letter-spacing: .1px; line-height: 1; }
.tab:hover { color: var(--ink-soft); }
.tab:hover .vak { background: var(--mist); }
.tab.active { color: var(--coral-deep); }
.tab.active .vak { background: var(--peach); color: var(--coral); }

/* Alleen het accountblok wordt naar beneden geduwd; daarboven blijft de rail rustig.
   Onderaan is ruimte gelaten voor de omgevingsbadge, die daar overheen zweeft. */
.rail-foot {
  margin-top: auto;
  margin-bottom: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.rail-foot .who {
  width: 32px; height: 32px; border-radius: var(--pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--peach); color: var(--coral-deep);
  border: 1px solid var(--coral-soft);
  font-family: "Sora", sans-serif; font-size: 12px; font-weight: 700;
}
.rail-foot .uit {
  width: 28px; height: 28px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; color: var(--ink-faint);
  transition: background-color .12s ease, color .12s ease;
}
.rail-foot .uit svg { width: 16px; height: 16px; }
.rail-foot .uit:hover { background: var(--mist); color: var(--ink-soft); }

.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--cream); }

/* Merk-header boven elke tab (WendyHeaderBar) — alleen op mobiel, want op desktop
   staat de wordmark al in de zijbalk. */
.header-bar {
  display: none;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-xs) var(--s-screen) var(--s-sm);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  position: sticky; top: 0; z-index: 40;
}
.header-bar .wordmark { height: 54px; width: auto; margin-left: -10px; }
.header-bar .trailing { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--ink-soft); }

.screen {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: calc(var(--content) + 80px);
  margin: 0 auto;
  padding: 0 40px 48px;
  display: flex;
  flex-direction: column;
  /* De shell scrollt niet meer, dus een gewone pagina scrollt in zichzelf. */
  overflow-y: auto;
}

/* Home en Gesprekken vullen het venster zelf en scrollen niet als geheel: het
   bento-raster past exact, de inbox laat z'n twee kolommen los scrollen. */
.screen-fill {
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.screen-head { padding-top: 30px; }
.screen-head .display { font-size: 24px; letter-spacing: -.4px; }

/* Paginakop als rij: kicker/titel/omschrijving links, actie (status/knop) rechts. */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-md);
  flex-wrap: wrap;
}
.page-sub { font-size: 13.5px; color: var(--ink-soft); margin: 5px 0 0; }

/* ── Desktop-indelingen ────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — bento-raster dat het venster precies vult
   ═══════════════════════════════════════════════════════════════════════════
   Het uitgangspunt: inloggen, drie seconden kijken, alles weten. Dus geen scroll.
   Alle tegels delen de resterende hoogte (`grid-auto-rows: 1fr`); tegelinhoud die
   te lang is wordt afgekapt of scrollt binnen z'n eigen tegel. */

.bento-wrap {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 15px 18px 16px;
  overflow: hidden;
}

/* Kop op één regel: begroeting links, datum rechts. */
.bento-kop {
  height: 46px; flex: none;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.bento-kop h1 { font-size: 23px; font-weight: 600; letter-spacing: -.02em; }
.bento-kop .bedrijf {
  font-size: 13px; color: var(--ink-faint);
  padding-left: 14px; margin-left: 2px;
  border-left: 1px solid var(--hairline);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bento-kop .datum {
  margin-left: auto; flex: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--pill); padding: 6px 13px;
}

.bento {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
}

.tegel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color .14s ease;
}
a.tegel, button.tegel { text-align: left; color: inherit; text-decoration: none; cursor: pointer; font: inherit; }
.tegel:hover { border-color: var(--coral); }

.tegel-kop {
  display: flex; align-items: center; gap: 8px;
  flex: none; margin-bottom: 10px;
}
.tegel-kop .kicker { line-height: 1; }
.tegel-kop .link {
  white-space: nowrap;
  margin-left: auto; font-size: 12px; font-weight: 600;
  color: var(--coral); text-decoration: none; border: 0; background: none;
  cursor: pointer; padding: 0;
}
.tegel-kop .link:hover { text-decoration: underline; }

/* Gekleurd icoonvierkantje in de tegelkop — het enige kleuraccent per tegel. */
.tegel-chip {
  width: 22px; height: 22px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.tegel-chip svg { width: 13px; height: 13px; }
.tegel-chip.sky     { background: rgba(14, 165, 233, .12); color: var(--sky); }
.tegel-chip.violet  { background: rgba(139, 92, 246, .12); color: var(--violet); }
.tegel-chip.success { background: rgba(20, 185, 129, .12); color: var(--success); }
.tegel-chip.amber   { background: rgba(255, 176, 32, .14); color: #B47A05; }
.tegel-chip.coral   { background: var(--peach);            color: var(--coral); }

/* Plaatsing in het raster. */
.t-wendy   { grid-column: 1 / span 2; grid-row: 1; }
.t-vandaag { grid-column: 3;          grid-row: 1; }
.t-log     { grid-column: 4 / span 2; grid-row: 1 / span 2; }
.t-afh     { grid-column: 1;          grid-row: 2; }
.t-min     { grid-column: 2;          grid-row: 2; }
.t-pakket  { grid-column: 3;          grid-row: 2; }
.t-week    { grid-column: 1 / span 2; grid-row: 3; }
.t-instr   { grid-column: 3 / span 3; grid-row: 3; }

/* ── Tegel: Wendy-status (het gekleurde anker van het scherm) ──────────────── */
.t-wendy {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  box-shadow: var(--shadow-blue);
  justify-content: center;
  padding: 18px 22px;
}
.t-wendy:hover { border-color: var(--coral-deep); }
.t-wendy.uit { background: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-card); }
.t-wendy.uit:hover { border-color: var(--ink); }
.wendy-rij { display: flex; align-items: center; gap: 18px; min-width: 0; }
.wendy-foto {
  width: 84px; height: 84px; flex: none;
  border-radius: var(--pill); overflow: hidden;
  background: rgba(255, 255, 255, .18);
  border: 2px solid rgba(255, 255, 255, .55);
}
.wendy-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wendy-tekst { min-width: 0; flex: 1; }
.wendy-tekst .live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.wendy-tekst .live .stip {
  width: 7px; height: 7px; border-radius: var(--pill);
  background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}
.wendy-tekst h2 { font-size: 26px; font-weight: 700; color: #fff; margin: 5px 0 6px; }
.wendy-nr {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px; color: #fff; opacity: .8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Schakelaar op gekleurde ondergrond: wit spoor, gekleurde knop. */
.wendy-schakel { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; }
.wendy-schakel small {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.wendy-schakel .toggle { width: 54px; height: 30px; }
.wendy-schakel .toggle .track { background: rgba(255, 255, 255, .32); }
.wendy-schakel .toggle .track::before { width: 24px; height: 24px; top: 3px; left: 3px; }
.wendy-schakel .toggle input:checked + .track { background: #fff; }
.wendy-schakel .toggle input:checked + .track::before { transform: translateX(24px); background: var(--coral); }

/* ── Tegels met één groot cijfer ───────────────────────────────────────────── */
.cijfer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.groot-getal {
  font-family: "Sora", sans-serif;
  font-size: 52px; font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.getal-label { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.getal-fijn { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.spark { display: block; width: 100%; height: 42px; margin-top: auto; flex: none; }

/* ── Tegel: afhandelingsgraad als ring ─────────────────────────────────────── */
.donut-body { flex: 1; min-height: 0; display: flex; align-items: center; gap: 14px; }
.donut { width: 104px; height: 104px; flex: none; position: relative; }
.donut svg { width: 104px; height: 104px; display: block; transform: rotate(-90deg); }
.donut-mid {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-mid strong {
  font-family: "Sora", sans-serif;
  font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1;
}
.donut-mid small { font-size: 10px; color: var(--ink-faint); margin-top: 2px; }
.donut-uitleg { min-width: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; }
.donut-uitleg b { color: var(--ink); font-weight: 600; }

/* ── Tegel: weekgrafiek ────────────────────────────────────────────────────── */
/* De staafhoogte staat in % van een 1fr-rij, zodat een drukke dag de tegel nooit
   kan oprekken — dat zou de belofte "past altijd" breken. */
.grafiek {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 14px; align-items: end;
}
.staaf-kolom {
  height: 100%;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px; justify-items: center;
}
.staaf-vak {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px;
}
.staaf-getal { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-faint); }
.staaf {
  width: 100%; flex: none;
  border-radius: var(--r-md) var(--r-md) 2px 2px;
  background: var(--coral-soft);
  transition: background-color .14s ease;
}
.staaf-kolom:hover .staaf { background: var(--coral); }
.staaf-kolom.nu .staaf { background: var(--coral); }
.staaf-kolom.nu .staaf-getal { color: var(--coral); font-weight: 500; }
.staaf-dag {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-faint);
}
.staaf-kolom.nu .staaf-dag { color: var(--ink-soft); }

/* ── Tegel: recente gesprekken ─────────────────────────────────────────────── */
.log-lijst {
  flex: 1; min-height: 0; overflow: auto;
  margin: 0 -6px; padding: 0 6px;
  display: flex; flex-direction: column;
}
.log-rij {
  /* Niet meerekken: bij drie gesprekken in een hoge tegel gaven uitgerekte rijen
     gaten van een halve centimeter tussen de regels. Boven uitlijnen, rest scrollt. */
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 8px; margin: 0 -8px;
  border: 0; border-bottom: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  background: none; cursor: pointer; text-align: left; color: inherit;
  min-width: 0; width: calc(100% + 16px);
}
.log-rij:last-child { border-bottom: none; }
.log-rij:hover { background: var(--mist); }
.log-mid { min-width: 0; flex: 1; }
.log-naam { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-sub {
  font-size: 12px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.log-rechts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.log-tijd { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--ink-soft); }

/* ── Tegel: pakket ─────────────────────────────────────────────────────────── */
.pakket-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.pakket-naam { font-family: "Sora", sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.pakket-prijs { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.pakket-verbruik { font-size: 12px; color: var(--ink-faint); margin-top: 14px; }
.balk { height: 5px; border-radius: var(--pill); background: var(--mist); margin-top: 7px; overflow: hidden; }
.balk i { display: block; height: 100%; border-radius: var(--pill); background: var(--amber); }

/* ── Tegel: instructies ────────────────────────────────────────────────────── */
.instr-raster {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}
.instr-knop {
  border: 1px solid var(--hairline); background: var(--surface);
  border-radius: var(--r-xl);
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px; min-width: 0; text-align: left;
  cursor: pointer; color: inherit; font: inherit;
  transition: border-color .12s ease, background-color .12s ease;
}
.instr-knop:hover { border-color: var(--coral-soft); background: var(--mist); }
.instr-knop .tekst { min-width: 0; }
.instr-knop .t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.instr-knop .h {
  font-size: 11.5px; color: var(--ink-faint); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GESPREKKEN — inbox met twee panelen
   ═══════════════════════════════════════════════════════════════════════════
   Het gesprekslog is geen tabel maar een werkomgeving: lijst links, het gekozen
   gesprek rechts. Beide kolommen scrollen apart, de shell scrollt niet. */

.inbox { flex: 1; min-height: 0; display: flex; }

.inbox-lijst {
  width: 380px; flex: none; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
}
.inbox-kop { padding: 16px 16px 12px; border-bottom: 1px solid var(--hairline); flex: none; }
.inbox-kop .titel { display: flex; align-items: baseline; gap: 8px; }
.inbox-kop h1 { font-size: 19px; font-weight: 700; }
.inbox-kop .aantal {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px;
  color: var(--ink-faint); padding: 2px 7px; border-radius: var(--pill);
  background: var(--mist); border: 1px solid var(--hairline);
}
.inbox-kop .search { margin-top: 12px; max-width: none; }
.inbox-kop .chips { margin-top: 10px; }
.inbox-scroll { flex: 1; min-height: 0; overflow-y: auto; }

/* Sticky datumkop, zodat je bij het scrollen ziet welke dag je leest. */
.inbox-dag {
  position: sticky; top: 0; z-index: 3;
  padding: 7px 16px 6px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
}
.inbox-dag .n { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--ink-faint); }

.inbox-rij {
  position: relative; width: 100%; text-align: left;
  display: flex; gap: 11px; padding: 11px 16px 12px 15px;
  border: 0; border-bottom: 1px solid var(--hairline);
  background: var(--surface); color: inherit; cursor: pointer;
}
.inbox-rij::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: -1px; width: 3px; background: transparent;
}
.inbox-rij:hover { background: var(--mist); }
.inbox-rij.actief, .inbox-rij.actief:hover { background: var(--peach); }
.inbox-rij.actief::before { background: var(--coral); }
.inbox-rij .body { flex: 1; min-width: 0; }
.inbox-rij .top { display: flex; align-items: center; gap: 6px; }
.inbox-rij .naam {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inbox-rij .tijd { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-faint); flex: none; }
.inbox-rij .meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--ink-faint); margin-top: 2px;
}
.inbox-rij .sum {
  font-size: 12.5px; color: var(--ink-soft); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.inbox-rij .pill { margin-top: 6px; }

/* Detailkolom: één witte kaart op het rustige canvas. */
.inbox-detail { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; background: var(--surface); }
.inbox-kaart { max-width: 820px; }
.inbox-kaart .sectie { padding: 22px 30px; border-top: 1px solid var(--hairline); }
.inbox-kaart .sectie:first-child { border-top: 0; }
.detail-kop { display: flex; align-items: flex-start; gap: 14px; }
.detail-kop .wie { flex: 1; min-width: 0; }
.detail-kop h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.detail-kop .nr {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px; color: var(--ink-soft); margin-top: 4px;
}
.detail-acties { display: flex; gap: var(--s-xs); flex-wrap: wrap; margin-top: var(--s-md); }
.detail-feiten { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 0; }
.detail-feiten dt { font-size: 13px; color: var(--ink-soft); padding: 9px 0; border-top: 1px solid var(--hairline); }
.detail-feiten dd { font-size: 13.5px; margin: 0; padding: 9px 0; border-top: 1px solid var(--hairline); }
.detail-feiten dt:first-of-type, .detail-feiten dd:first-of-type { border-top: 0; }

/* Leegstaande detailkolom: geen grijze doos maar een rustige uitnodiging. */
.inbox-leeg {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-sm); text-align: center; color: var(--ink-faint);
}
.inbox-leeg .icon-circle {
  width: 54px; height: 54px; border-radius: var(--pill);
  background: var(--peach); color: var(--coral);
  display: flex; align-items: center; justify-content: center;
}
.inbox-leeg .icon-circle svg { width: 24px; height: 24px; }

/* Instellingen: secties in twee kolommen; groepen breken nooit doormidden. */
.settings-cols { display: flex; flex-direction: column; gap: var(--s-lg); }

@media (min-width: 900px) {
  .settings-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-md);
    align-items: start;
  }
  .settings-cols > .set-group {
    margin: 0;
    display: flex;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
  }
  /* In een meerkoloms-context werkt flex-gap niet meer; herstel de kop-marge. */
  .settings-cols > .set-group > .head { margin-bottom: var(--s-xs); }
}

/* Bredere schermen: de tegels en de gesprekkenlijst mogen meeschalen. */
@media (min-width: 1180px) {
  .screen { padding-left: 40px; padding-right: 40px; }
}

/* ── Instructies: rustige navigatie en een leesbaar werkblad ─────────────── */
#page-instructies.screen-fill { padding: 0; }
.workbench { flex: 1; min-height: 0; display: flex; }
.wb-nav {
  width: 260px; flex: none; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--hairline); overflow-y: auto;
}
.wb-kop { padding: 30px 24px 22px; flex: none; }
.wb-kop .kicker { color: var(--coral); font-size: 10px; letter-spacing: 1.6px; }
.wb-kop h1 { font-size: 22px; font-weight: 700; margin-top: 8px; letter-spacing: -.7px; }
.wb-kop p { margin: 9px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); max-width: 23ch; }
.wb-items { padding: 0 12px 24px; display: flex; flex-direction: column; gap: 4px; }
.wb-group-label { padding: 16px 12px 7px; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #78869b; }
.wb-item {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 43px; padding: 10px 12px;
  background: none; border: 1px solid transparent; border-radius: 9px;
  cursor: pointer; text-align: left; color: var(--ink-soft); transition: background-color .12s ease;
}
.wb-item:hover { background: var(--mist); }
.wb-item.active { background: var(--peach); border-color: #e1e9ff; color: var(--coral-deep); }
.wb-item:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.wb-item .wb-section-icon { width: 18px; height: 18px; color: #8290a6; }
.wb-item.active .wb-section-icon { color: var(--coral); }
.wb-item .t { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
.wb-item.active .t { font-weight: 600; }
.wb-item .n { min-width: 22px; padding: 2px 6px; border-radius: 5px; text-align: center; background: var(--mist); font-size: 11px; font-weight: 500; color: #77859a; font-variant-numeric: tabular-nums; }
.wb-item.active .n { background: white; color: var(--coral); }
.wb-item .lock-chip { width: 20px; height: 20px; background: none; }
.wb-item .lock-chip svg { width: 12px; height: 12px; }
.wb-item.locked .t { color: #8591a4; }
.wb-tools { margin: auto 12px 20px; padding-top: 6px; border-top: 1px solid var(--hairline); }
.wb-tools .wb-item { padding-top: 12px; padding-bottom: 12px; }
.wb-item small { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: #78869b; }
.wb-arrow { color: var(--ink-faint); font-size: 10px; }
.wb-main { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 30px clamp(24px, 3.2vw, 54px) 48px; background: #f7f9fc; }
.wb-breadcrumb { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; font-size: 12px; color: #78869b; }
.wb-breadcrumb span { color: #b8c1cf; }
.wb-breadcrumb strong { color: var(--ink-soft); font-weight: 500; }
.wb-head { margin-bottom: 28px; max-width: 1060px; }
.wb-head-editor { display: flex; align-items: center; gap: 15px; }
.wb-heading-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: white; border: 1px solid var(--hairline); color: var(--section-tint, var(--coral)); box-shadow: var(--shadow-sm); }
.wb-heading-icon svg { width: 23px; height: 23px; }
.wb-head h2 { font-size: 26px; font-weight: 600; letter-spacing: -.8px; }
.wb-head p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.wb-content { max-width: 760px; }
.wb-content-company { display: grid; grid-template-columns: minmax(0, 1fr) 248px; align-items: start; gap: 24px; max-width: 1100px; }
.wb-editor { min-width: 0; gap: 0; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); box-shadow: 0 2px 5px #0f172a03; overflow: hidden; }
.wb-editor-title { padding: 25px 28px 21px; border-bottom: 1px solid #edf0f5; }
.wb-editor-title h3 { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.wb-editor-title p { font-size: 12px; color: #78869b; margin: 5px 0 0; }
.wb-editor .editor-body { padding: 26px 28px 30px; gap: 24px; }
.wb-editor .field { max-width: none; }
.wb-editor .field-label { font-size: 13px; margin-bottom: 9px; }
.wb-editor .input, .wb-editor .textarea { border-color: #dfe5ee; border-radius: 8px; font-size: 14px; padding: 12px 14px; box-shadow: 0 1px 2px #0f172a03; }
.wb-editor .input:hover, .wb-editor .textarea:hover { border-color: #becbde; }
.wb-editor .input:focus, .wb-editor .textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px #2f6bff14; }
.wb-content-company .textarea { min-height: 154px; line-height: 1.75; overflow-y: auto; }
.wb-editor .field-hint { font-size: 11.5px; line-height: 1.6; color: #78869b; margin-top: 8px; }
.wb-editor .editor-actions { justify-content: space-between; flex-wrap: wrap; padding: 18px 28px; border-top: 1px solid #edf0f5; background: #fcfdff; gap: 14px; }
.wb-editor .editor-actions .hint { font-size: 11px; color: #78869b; flex: 1; min-width: 135px; }
.wb-editor .btn-primary { min-width: 0; padding: 11px 16px; border-radius: 8px; font-size: 12px; white-space: nowrap; box-shadow: 0 2px 4px #2f6bff15; }
.wb-error { padding: 0 28px 20px; color: var(--berry); font-size: 13px; }
.wb-guide { padding: 25px 23px; border: 1px solid #e2e9f7; border-radius: 14px; background: linear-gradient(145deg, #edf3ff, #f4f7ff); }
.wb-guide-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #dfe8fc; border-radius: 11px; color: var(--coral); background: #ffffffb3; margin-bottom: 19px; }
.wb-guide-icon svg { width: 19px; height: 19px; }
.wb-guide h3 { font-size: 15px; font-weight: 600; line-height: 1.6; letter-spacing: -.3px; }
.wb-guide p { font-size: 12px; color: #64748b; line-height: 1.8; margin: 12px 0 0; }
.wb-guide-divider { border-top: 1px solid #dfe7f5; margin: 23px 0 20px; }
.wb-guide h4 { font-family: inherit; font-size: 12px; font-weight: 600; }
.wb-guide ul { list-style: none; padding: 0; margin: 13px 0 0; display: grid; gap: 12px; }
.wb-guide li { display: flex; gap: 9px; align-items: start; font-size: 12px; color: var(--ink-soft); }
.wb-guide li svg { color: var(--coral); width: 13px; height: 13px; margin-top: 3px; }
.wb-guide .wb-guide-note { margin-top: 22px; font-size: 11px; }
@media (min-width: 821px) and (max-width: 1190px) {
  .wb-nav { width: 230px; }
  .wb-content-company { grid-template-columns: minmax(0, 1fr); }
  .wb-guide { max-width: none; }
}

/* Onderste tabbalk (mobiel) — exact de vier tabs uit RootView. */
.tabbar {
  display: none;
  position: sticky; bottom: 0; z-index: 50;
  border-top: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
}
.tabbar button {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 0; background: none; cursor: pointer;
  padding: 4px 2px;
  font-size: 10px; font-weight: 600;
  color: var(--ink-faint);
}
.tabbar button.active { color: var(--coral); }
.tabbar button svg { width: 22px; height: 22px; }

/* ── Detail-overlay (gesprek, subschermen) ─────────────────────────────────── */

.sheet-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(15, 23, 42, .4);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.sheet-scrim.show { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; z-index: 90;
  top: 0; right: 0; bottom: 0;
  width: min(620px, 100%);
  background: var(--surface);
  border-left: 1px solid var(--hairline);
  box-shadow: -8px 0 30px rgba(15, 23, 42, .12);
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.32, .72, 0, 1);
  display: flex; flex-direction: column;
}
.sheet.show { transform: none; }
@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } }

.sheet-head {
  display: flex; align-items: center; gap: var(--s-sm);
  padding: var(--s-sm) var(--s-md);
  border-bottom: 1px solid var(--hairline);
  flex: none;
}
.sheet-head .t { font-family: "Sora", sans-serif; font-weight: 600; font-size: 16px; }
.sheet-head .actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.icon-btn {
  border: 0; background: none; cursor: pointer;
  color: var(--coral);
  padding: 7px;
  border-radius: var(--r-lg);
  display: flex;
  transition: background-color .15s ease;
}
.icon-btn:hover { background: var(--mist); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn.plain { color: var(--ink-soft); }

.sheet-body { flex: 1; overflow-y: auto; padding: 0 var(--s-screen) var(--s-xl); }

/* ── Bevestigingsdialoog ───────────────────────────────────────────────────── */

.modal-scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(15, 23, 42, .4);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-lg);
  opacity: 0; transition: opacity .15s ease;
}
.modal-scrim.show { opacity: 1; }
.modal {
  background: var(--surface);
  border-radius: 14px;
  padding: var(--s-lg);
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: var(--s-sm);
  box-shadow: 0 16px 48px rgba(15, 23, 42, .22);
}
.modal-actions { display: flex; gap: var(--s-sm); justify-content: flex-end; margin-top: var(--s-xs); }
.modal-actions .btn { flex: 1; }

/* ── Omgevingsbadge (alleen lokaal, wanneer je aan productie hangt) ────────── */

.env-badge {
  position: fixed;
  left: 12px; bottom: 12px;
  z-index: 130;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink-soft);
  background: var(--mist);
  border: 1px solid var(--hairline);
  padding: 5px 9px;
  border-radius: var(--r-md);
  pointer-events: none;
}
/* Productie schreeuwt, dev fluistert. */
.env-badge.is-prod {
  color: #fff;
  background: var(--berry);
  border-color: var(--berry);
  box-shadow: 0 2px 8px rgba(240, 65, 62, .35);
}

/* ── Toast ("opgeslagen") ──────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translate(-50%, 12px);
  z-index: 120;
  display: flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 11px 18px;
  border-radius: var(--pill);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 15px; height: 15px; }
.toast.err { background: var(--berry); }

/* ── Inloggen ──────────────────────────────────────────────────────────────── */

/* Gecentreerde kaart — een inlogscherm hoort op desktop in het midden van het
   beeld te staan, niet als uitgerekte telefoonkolom met de knop onderaan de
   viewport geplakt. Op mobiel valt de kaartrand weg en leest het weer als de app. */
.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-lg);
  background: var(--cream);
}
.login .inner { width: 100%; max-width: 430px; }
.login .brand { display: flex; justify-content: center; margin-bottom: var(--s-lg); }
.login .brand img { height: 54px; width: auto; }
.login .panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px rgba(15, 23, 42, .06);
  padding: var(--s-xl);
}
.login h1 { font-size: 23px; font-weight: 700; }
.login .sub { color: var(--ink-soft); margin: 6px 0 var(--s-xl); }
.login .foot { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: var(--s-xl); }
.login .foot .btn-primary { margin-top: 0; }
.login .err { font-size: 13px; color: var(--berry); text-align: center; }
.login .info { font-size: 12px; color: var(--ink-faint); text-align: center; }

@media (max-width: 560px) {
  .login { align-items: stretch; padding: 0; background: var(--surface); }
  .login .inner { max-width: none; display: flex; flex-direction: column; min-height: 100vh; padding: var(--s-lg) var(--s-screen); }
  .login .brand { justify-content: flex-start; }
  .login .brand img { margin-left: -10px; }
  .login .panel { border: 0; box-shadow: none; padding: 24px 0 0; flex: 1; display: flex; flex-direction: column; }
  .login .foot { margin-top: auto; }
}

/* ── Chat (Wendy bijschaven) ───────────────────────────────────────────────── */

.chat-log { display: flex; flex-direction: column; gap: var(--s-sm); padding: var(--s-md) 0; }
.chat-msg { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 15px; white-space: pre-wrap; }
.chat-msg.assistant { background: var(--peach); align-self: flex-start; }
.chat-msg.user { background: var(--mist); align-self: flex-end; }
.chat-input { display: flex; gap: var(--s-sm); align-items: flex-end; }
.chat-input .textarea { min-height: 44px; }

.patch-card {
  background: var(--mist);
  border-radius: var(--r-card);
  padding: var(--s-md);
  display: flex; flex-direction: column; gap: var(--s-sm);
}

/* ── Lijst-editors (FAQ, doorverbinden) ────────────────────────────────────── */

.editor-item {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-md);
  display: flex; flex-direction: column; gap: var(--s-sm);
  background: var(--surface);
}
.editor-item + .editor-item { margin-top: var(--s-sm); }
.editor-item .row { display: flex; align-items: center; gap: var(--s-sm); }

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .rail { display: none; }
  .header-bar { display: flex; }
  .tabbar { display: flex; }
  /* Kolom over de volle hoogte, zodat de tabbalk onderaan blijft plakken ook
     als het scherm korter is dan de viewport (net als de native tabbar). */
  .app { display: block; height: auto; overflow: visible; }
  .main { min-height: 100vh; background: var(--surface); }
  .screen { padding: 0 var(--s-screen) var(--s-xl); overflow: visible; }

  /* Op mobiel is er geen venster om te vullen: het bento-raster wordt één kolom
     die gewoon meescrollt, en de inbox valt terug op alleen de lijst (het detail
     opent als bottom sheet, precies zoals in de app). */
  /* Padding expliciet op 0: de mobiele .screen-regel hierboven heeft dezelfde
     specificiteit en zou anders óók gelden, bovenop de eigen marge van tegels en lijst. */
  .screen-fill { overflow: visible; padding: 0; }
  .bento-wrap { padding: 0; overflow: visible; }
  /* De merk-header groet je al; de kop van het dashboard eronder is dan dubbelop. */
  .bento-kop { display: none; }
  .bento {
    display: flex; flex-direction: column;
    gap: var(--s-md);
    padding: var(--s-md) var(--s-screen) var(--s-xl);
  }
  /* Foto + tekst + schakelaar passen niet op 84px foto en 26px kop; alles een maat kleiner. */
  .t-wendy { padding: 16px; }
  .wendy-rij { gap: 14px; }
  .wendy-foto { width: 60px; height: 60px; }
  .wendy-tekst h2 { font-size: 20px; margin: 4px 0 5px; }
  .wendy-tekst .live { font-size: 9.5px; letter-spacing: .6px; }
  /* Liever twee regels dan "085 208 20 49 · door…" — afkappen leest als een defect. */
  .wendy-nr { white-space: normal; }
  .wendy-schakel .toggle { width: 46px; height: 26px; }
  .wendy-schakel .toggle .track::before { width: 20px; height: 20px; }
  .wendy-schakel .toggle input:checked + .track::before { transform: translateX(20px); }
  .tegel { min-height: 132px; }
  .t-log { min-height: 320px; }
  .t-week { min-height: 220px; }
  .t-instr { min-height: 260px; }
  .instr-knop { padding: 12px; }

  .inbox { display: block; }
  .inbox-lijst { width: auto; border-right: 0; }
  .inbox-kop { padding: var(--s-md) var(--s-screen) 12px; }
  .inbox-rij { padding-left: var(--s-screen); padding-right: var(--s-screen); }
  .inbox-dag { padding-left: var(--s-screen); padding-right: var(--s-screen); }
  .inbox-detail { display: none; }
  .screen-head { padding-top: var(--s-md); }
  .btn-primary { font-size: 16px; padding: 15px 20px; border-radius: var(--pill); }
  /* Mobiel: geen twee panelen naast elkaar — de sectielijst boven, het formulier eronder. */
  .workbench { display: block; }
  .wb-nav { width: auto; border-right: 0; border-bottom: 1px solid var(--hairline); overflow: visible; }
  .wb-kop { padding: var(--s-md) var(--s-screen) 12px; }
  .wb-kop p { max-width: none; }
  .wb-items { padding: 4px var(--s-screen) 14px; flex-direction: row; overflow-x: auto; gap: 6px; }
  .wb-items .wb-group-label { display: none; }
  .wb-items .wb-item { width: auto; flex: none; min-height: 40px; }
  .wb-tools { margin: 0 var(--s-screen) 12px; padding-top: 8px; display: flex; gap: 8px; }
  .wb-tools .wb-group-label, .wb-tools small, .wb-tools .wb-arrow { display: none; }
  .wb-tools .wb-item { width: auto; padding: 8px; }
  .wb-breadcrumb { display: none; }
  .wb-head { gap: 12px; margin-bottom: 22px; }
  .wb-head h2 { font-size: 22px; }
  .wb-heading-icon { width: 42px; height: 42px; border-radius: 12px; }
  .wb-content-company { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wb-editor-title { padding: 20px; }
  .wb-editor .editor-body { padding: 22px 20px; }
  .wb-editor .editor-actions { padding: 16px 20px; }
  .wb-editor .editor-actions .hint { flex-basis: 100%; }
  .wb-editor .btn-primary { width: 100%; }
  .wb-guide { padding: 22px; }
  .wb-main { padding: var(--s-lg) var(--s-screen) var(--s-xl); overflow: visible; }
  .sheet {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; height: 92vh;
    border-left: 0;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    transform: translateY(100%);
  }
  .sheet.show { transform: none; }
  .display { font-size: 26px; }
}