/* CRM — applicatielaag op het design system van Stevens Media & Marketing.
 *
 * Regels die hier gelden (DESIGN_SYSTEM.md):
 *  - alleen tokens uit stevens.css, geen losse hex-waarden of pixels;
 *  - cyan (--accent) uitsluitend voor primaire acties;
 *  - koppen zijn medium (500), nooit bold;
 *  - geen gradients, geen emoji, geen harde schaduwen;
 *  - beweging is ingetogen: 150-300ms met --ease-out.
 *
 * Wat het design system niet heeft en een CRM wel nodig heeft, staat hieronder
 * als aanvulling: statuskleuren, dichte tabellen, formulieren op lichte vlakken
 * en de topbalk met de timer. Zie de toelichting bij --status-* .
 */

:root {
  /* ---- Aanvulling: statuskleuren ----
   * Het design system heeft geen semantisch palet voor goed/aandacht/fout,
   * terwijl het CRM dat nodig heeft: op doel of onder doel, budget bijna op of
   * overschreden, deadline gehaald of te laat (FO 4.5, 4.7).
   * Deze drie zijn gekozen om naast navy en cyan te kunnen staan en om op
   * --surface-page en --surface-card genoeg contrast te houden voor tekst.
   */
  --status-good: #0E7C63;
  --status-warn: #A2620A;
  --status-bad: #B93D36;
  --status-good-bg: color-mix(in srgb, var(--status-good) 10%, var(--surface-card));
  --status-warn-bg: color-mix(in srgb, var(--status-warn) 12%, var(--surface-card));
  --status-bad-bg: color-mix(in srgb, var(--status-bad) 10%, var(--surface-card));
  /* Aanvulling (5 oktober 2026): een vierde kleur voor de taakstatus
     "Veranderd" (FO 4.6). Goed, aandacht en fout zijn al bezet door Afgerond,
     Mee bezig en Prio, en cyan is alleen voor primaire acties. Een gedempt
     blauw dat naast navy staat zonder ermee te verwarren. Hoort terug in het
     design system. */
  --status-info: #3B5BA9;
  --status-info-bg: color-mix(in srgb, var(--status-info) 10%, var(--surface-card));

  /* Hairlines binnen tabellen zijn lichter dan een kaartrand, anders wordt een
     dichte tabel een raster. */
  --border-hairline: color-mix(in srgb, var(--border-light) 55%, var(--surface-card));

  /* Hoogte van de topbalk; de rest van de pagina rekent hiermee. */
  --topbar-height: 64px;

  /* Maat van de ronde knop van de assistent rechtsonder (FO 4.15). De
     meldingen rechtsonder schuiven er met deze maat boven, zodat ze de knop
     niet bedekken. */
  --assistant-launcher-size: 56px;
}

/* Een eigen display-waarde wint van de [hidden]-regel van de browser. Zonder
   dit blijft een verborgen veld toch staan. */
[hidden] { display: none !important; }

/* ================= Basis voor de applicatie ================= */
/* Het design system zet body op 17px voor lopende tekst. Een CRM is dichter
   bezet: overzichten en formulieren gebruiken --text-sm (15px). De regelhoogte
   blijft de token uit het systeem; de ruimte komt uit padding. */
.app {
  font-size: var(--text-sm);
  color: var(--text-body);
  min-height: 100vh;
}

.boot {
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--text-muted);
}

.page {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}

/* Brede overzichten zoals Mijn planning gebruiken de hele breedte, met een
   smalle marge links en rechts. */
.page--wide { max-width: none; padding-inline: var(--space-4); }

.page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.page__title {
  font-size: var(--text-h3);
  color: var(--text-heading);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
}

.page__subtitle {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

.page__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.row--tight { gap: var(--space-1); }
.row--spaced { margin-top: var(--space-2); }
.push { margin-left: auto; }
.muted { color: var(--text-muted); }
.numeric { font-variant-numeric: tabular-nums; }

/* ================= Topbalk ================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-hairline);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-5);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-heading);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.topbar__brand img { height: 28px; width: auto; }

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  /* Bewust geen overflow: dat zou een uitklapmenu in de balk afknippen.
     Past het niet, dan loopt het menu door op een tweede regel. */
  flex-wrap: wrap;
}

.navlink {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-body);
  cursor: pointer;
  font: inherit;
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.navlink:hover { color: var(--text-heading); background: var(--surface-paper); }

/* Het actieve onderdeel is navy, niet cyan: cyan is voor primaire acties. */
.navlink[aria-current="page"] {
  color: var(--text-heading);
  font-weight: var(--weight-medium);
  box-shadow: inset 0 -2px 0 var(--text-heading);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.navlink__count {
  display: inline-block;
  margin-left: var(--space-1);
  min-width: 20px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--surface-paper);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.topbar__right { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

.iconbtn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-body);
  cursor: pointer;
  font: inherit;
  padding: var(--space-2) var(--space-3);
  transition: background var(--duration-fast) var(--ease-out);
}
.iconbtn:hover { background: var(--surface-paper); color: var(--text-heading); }

/* ================= Mensen: foto of initialen ================= */
.avatar {
  border-radius: var(--radius-pill);
  background: var(--surface-dark);
  color: var(--text-on-dark);
  display: inline-grid;
  place-items: center;
  font-weight: var(--weight-medium);
  overflow: hidden;
  flex: 0 0 auto;
  user-select: none;
}
.avatar__image { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.avatar--md { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar--lg { width: 44px; height: 44px; font-size: var(--text-sm); }
.avatar--xl { width: 72px; height: 72px; font-size: var(--text-lg); }

.personchip { display: inline-flex; align-items: center; gap: var(--space-2); }
.personchip__text { display: grid; gap: 0; min-width: 0; }
.personchip__name { color: var(--text-heading); font-weight: var(--weight-medium); }
.personchip--boxed {
  background: var(--surface-paper);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
}

/* Alleen voor voorleessoftware. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Logo linksboven; zolang er geen logo is, staat de naam er. */
.topbar__logo { height: 30px; width: auto; max-width: 180px; object-fit: contain; }

/* ================= Zoeken, meldingen en profiel ================= */
.dropdown { position: relative; display: inline-flex; }

.dropdown__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 40;
  min-width: 260px;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-paper);
  padding: var(--space-2);
  max-height: min(70vh, 520px);
  overflow-y: auto;
}
.dropdown__panel--left { right: auto; left: 0; }
.dropdown__panel--menu { min-width: 240px; }
.dropdown__panel--search { min-width: min(420px, 90vw); }
.dropdown__panel--notifications { min-width: min(380px, 90vw); }

.menuitem {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-body);
  cursor: pointer;
  display: block;
  font: inherit;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  width: 100%;
  transition: background var(--duration-fast) var(--ease-out);
}
.menuitem:hover { background: var(--surface-paper); color: var(--text-heading); }
.menuitem--danger { color: var(--status-bad); }

.menuheading {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-3) var(--space-3) var(--space-1);
}
.menuseparator {
  height: 1px;
  background: var(--border-hairline);
  margin: var(--space-2) var(--space-1);
}
.menunotice {
  margin: var(--space-1) var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--status-warn-bg);
  color: var(--status-warn);
  font-size: var(--text-xs);
}

.profilecard {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
}
.profilecard__name { color: var(--text-heading); font-weight: var(--weight-medium); }

.profilebutton {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  padding: 0;
  position: relative;
  display: inline-flex;
}
.profilebutton:hover { opacity: .85; }
/* Klein bolletje als er nog iets te doen is, zoals 2FA aanzetten. */
.profilebutton__flag {
  position: absolute;
  top: -1px; right: -1px;
  width: 10px; height: 10px;
  border-radius: var(--radius-pill);
  background: var(--status-warn);
  border: 2px solid var(--surface-card);
}

.searchbox { display: flex; }
.searchbox__input {
  appearance: none;
  background: var(--surface-paper);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--text-heading);
  font: inherit;
  font-size: var(--text-sm);
  padding: 8px var(--space-4);
  width: 260px;
  transition: border-color var(--duration-fast) var(--ease-out),
              width var(--duration-med) var(--ease-out);
}
.searchbox__input::placeholder { color: var(--text-muted); }
.searchbox__input:focus { outline: none; border-color: var(--accent); background: var(--surface-card); }

.searchresults { display: grid; }
.searchresults__empty { padding: var(--space-4); color: var(--text-muted); }

.searchhit {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  width: 100%;
}
.searchhit:hover, .searchhit:focus-visible { background: var(--surface-paper); outline: none; }
.searchhit__title { color: var(--text-heading); }
.searchhit__title mark { background: transparent; color: var(--text-heading); font-weight: var(--weight-semibold); }
.searchhit__sub { font-size: var(--text-xs); color: var(--text-muted); }

.bell { position: relative; }
/* Een bel zonder bibliotheek: een kap met een klepel eronder. */
.bell__glyph {
  display: block;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  position: relative;
}
.bell__glyph::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px; bottom: -2px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.bell__count {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--status-bad);
  color: var(--white);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

/* Het paneel onder de bel: de laatste meldingen, onderaan twee knoppen
   (voorbeeld "Meldingen dropdown"). */
.dropdown__panel--notifications {
  padding: 0;
  overflow: hidden;
  max-height: none;
  width: min(420px, calc(100vw - var(--space-5)));
  display: flex;
  flex-direction: column;
}
/* De lijst scrolt; de twee knoppen onderaan blijven altijd in beeld. */
.nbell__list { max-height: min(520px, calc(80vh - 120px)); overflow-y: auto; }
.nbell__item {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
}
.nbell__item .ncard { border-bottom: 1px solid var(--border-hairline); }
.nbell__item:hover .ncard,
.nbell__item:focus-visible .ncard { background: var(--surface-paper); }
.nbell__item:focus-visible { outline: none; }
.nbell__empty { padding: var(--space-5) var(--space-4); color: var(--text-muted); display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.nbell__emptytitle { color: var(--text-heading); }
.nbell__foot {
  appearance: none;
  border: 0;
  border-top: 1px solid var(--border-hairline);
  background: var(--surface-card);
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--text-heading);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.nbell__foot:hover, .nbell__foot:focus-visible { background: var(--surface-paper); outline: none; }

/* Eén melding: wie, wanneer, wat, uittreksel, waar het over gaat.
   Ongelezen: wit met een stip; gelezen: grijs en gedempt. */
.ncard {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  transition: background var(--duration-fast) var(--ease-out);
}
.ncard.has-check { grid-template-columns: 18px minmax(0, 1fr); }
.ncard.is-read { background: var(--surface-page); }
.ncard.is-selected { background: var(--surface-paper); }
.ncard__dot {
  width: 8px; height: 8px; margin-top: 7px;
  border-radius: var(--radius-pill);
}
.ncard.is-unread .ncard__dot { background: var(--text-heading); }
.ncard__dot.is-pending { background: var(--border-light); }
.ncard__check { margin-top: 2px; }
.ncard__main { display: grid; gap: 2px; min-width: 0; }
.ncard__top { display: flex; align-items: baseline; gap: var(--space-3); }
.ncard__who {
  flex: 1;
  min-width: 0;
  color: var(--text-heading);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ncard__when { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.ncard__kind { color: var(--text-heading); font-size: var(--text-sm); }
.ncard__excerpt {
  color: var(--text-body);
  font-size: var(--text-sm);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  margin-bottom: var(--space-1);
}
.ncard__context { font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.ncard__label { color: var(--text-heading); }
.ncard.is-read .ncard__who,
.ncard.is-read .ncard__kind,
.ncard.is-read .ncard__label { color: var(--text-body); font-weight: var(--weight-regular); }

/* ================= Afbeelding kiezen ================= */
.imagefield { display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.imagefield__preview {
  width: 120px;
  min-height: 120px;
  display: grid;
  place-items: center;
  background: var(--surface-paper);
  border: 1px solid var(--border-hairline);
  padding: var(--space-3);
  overflow: hidden;
}
.imagefield__preview--square { border-radius: var(--radius-lg); }
.imagefield__preview--circle { border-radius: var(--radius-pill); height: 120px; padding: 0; }
.imagefield__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.imagefield__preview--circle img { width: 100%; height: 100%; object-fit: cover; }
.imagefield__empty { font-size: var(--text-xs); color: var(--text-muted); text-align: center; }

/* ================= Timer in de topbalk ================= */
/* Donkere pill, zoals de nav-pill in het design system: alleen een lampje
   (statuskleur "goed": er loopt iets), de klant en de minuten. De hele pill is
   een knop die het stopvenster opent. Loopt er niets, dan is hij verborgen. */
.timerbar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-dark-raised);
  color: var(--text-on-dark);
  border: 0;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  max-width: 260px;
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background 150ms var(--ease-out);
}
.timerbar:hover { background: var(--surface-dark); }

.timerbar__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--status-good);
  flex: 0 0 auto;
  animation: timer-pulse 2s var(--ease-out) infinite;
}

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .timerbar__dot { animation: none; }
}

.timerbar__what {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timerbar__time {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
}

/* ================= Kaarten en panelen ================= */
.card {
  /* .card komt uit het design system (radius-xl, zachte schaduw). */
  padding: 0;
}

.panel {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-hairline);
}

.panel__title {
  color: var(--text-heading);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
}

.panel__body { padding: var(--space-5); }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.tile {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.tile__label { font-size: var(--text-xs); color: var(--text-muted); text-transform: none; }
.tile__value {
  font-size: var(--text-h3);
  color: var(--text-heading);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
}
.tile__hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }
.tile__value--bad { color: var(--status-bad); }

/* ================= Financiën (FO 4.11) ================= */
.page__subtitle.is-bad { color: var(--status-bad); }
.panel__hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }
.notice__title { font-weight: var(--weight-medium); }
.notice p { margin: var(--space-1) 0 0; }
.notice__list { margin: var(--space-2) 0 0; padding-left: var(--space-5); }

/* Omzet per maand. Op een smal scherm schuift de grafiek opzij in plaats van
   onleesbaar klein te worden. */
.finchart__wrap { overflow-x: auto; }
.finchart { display: block; width: 100%; max-width: 920px; min-width: 560px; height: auto; }
.finchart__grid { stroke: var(--border-light); stroke-width: 1; opacity: .6; }
.finchart__axis { fill: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
/* Geen cyan: dat is voor primaire acties. Dit jaar donker, vorig jaar grijs. */
.finchart__bar--current { fill: var(--text-heading); }
.finchart__bar--previous { fill: var(--gray-300); }
.finchart__legend { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--text-muted); }
.finchart__key { display: inline-flex; align-items: center; gap: var(--space-2); }
.finchart__key::before { content: ''; width: 10px; height: 10px; border-radius: 2px; }
.finchart__key--current::before { background: var(--text-heading); }
.finchart__key--previous::before { background: var(--gray-300); }
/* De kleine grafiek op het dashboard: geen as, en hij past zich aan het blok aan. */
.finchart__wrap--compact { overflow: visible; }
.finchart--compact { min-width: 0; max-width: 520px; }

/* ================= Dashboard (FO 4.10) ================= */
/* Eén overzicht uit kleine blokken. Breed scherm: links het werk, rechts het
   geld. Smaller en op een telefoon: alles onder elkaar. */
.dashstats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dashstat { display: block; text-decoration: none; color: inherit; transition: box-shadow var(--duration-fast) var(--ease-out); }
a.dashstat:hover { box-shadow: var(--shadow-card), 0 0 0 1px var(--border-light); }
a.dashstat:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.dashstat__inner { display: block; }

/* Drie groepen onder elkaar: de week en de taken, de financiën, de rest. Binnen
   een groep staan de blokken dicht bij elkaar; tussen de groepen zit meer lucht. */
.dashpage { display: grid; gap: var(--space-7); }
.dashpage > .page__head { margin-bottom: calc(var(--space-4) * -1); }
.dashsection { display: grid; gap: var(--space-4); min-width: 0; }
.dashsection__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.dashsection__title { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-medium); color: var(--text-heading); }
.dashsection__summary { font-size: var(--text-sm); color: var(--text-muted); }
.dashsection__summary .is-bad { color: var(--status-bad); }
.dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.dash--single { grid-template-columns: minmax(0, 1fr); }
.dashcard { min-width: 0; }
.dashstat .tile__hint.is-bad { color: var(--status-bad); }
.dashcard .panel__head { align-items: baseline; }
.dashcard .panel__title { margin: 0; }
.dashcard__more { margin-left: auto; font-size: var(--text-xs); white-space: nowrap; }
.dashcard__body { padding: var(--space-4) var(--space-5) var(--space-5); display: grid; gap: var(--space-3); }
.dashcard__empty { margin: 0; padding: var(--space-4) var(--space-5); font-size: var(--text-sm); }

.dashfigure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.dashfigure__value { font-size: var(--text-h3); color: var(--text-heading); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.dashfigure__hint { font-size: var(--text-xs); color: var(--text-muted); }

.dashlist { list-style: none; margin: 0; padding: 0; }
.dashlist__row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-light);
}
.dashlist__row:last-child { border-bottom: 0; }
.dashlist__row--note { color: var(--text-muted); font-size: var(--text-xs); }
.dashlist__main { min-width: 0; flex: 1; }
.dashlist__title {
  display: block; color: var(--text-heading); font-weight: var(--weight-medium); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.dashlist__title:hover { text-decoration: underline; text-underline-offset: 2px; }
.dashlist__sub { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashlist__when, .dashlist__amount { flex: none; font-size: var(--text-sm); color: var(--text-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dashlist__when.is-late, .dashlist__amount.is-late { color: var(--status-bad); }
.dashlist .pill { flex: none; }

.dashbar { display: block; margin-top: var(--space-2); }
.dashbar__track { fill: var(--surface-paper); }
.dashbar__fill { fill: var(--text-heading); }
.dashbar__fill.is-over { fill: var(--status-bad); }

.dashweek { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dashweek__day { padding: var(--space-3); border-right: 1px solid var(--border-light); min-height: 120px; min-width: 0; }
.dashweek__day:last-child { border-right: 0; }
.dashweek__day.is-today { background: var(--surface-paper); }
.dashweek__head { display: flex; align-items: baseline; gap: var(--space-1); margin-bottom: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.dashweek__date { color: var(--text-heading); font-weight: var(--weight-medium); font-size: var(--text-sm); }
.dashweek__count { margin-left: auto; font-variant-numeric: tabular-nums; }
.dashweek__task {
  display: block; margin-bottom: var(--space-1); padding: 2px var(--space-2);
  border-radius: var(--radius-sm); background: var(--surface-page);
  font-size: var(--text-xs); color: var(--text-heading); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dashweek__day.is-today .dashweek__task { background: var(--surface-card); }
.dashweek__task:hover { text-decoration: underline; }
.dashweek__more { font-size: var(--text-xs); color: var(--text-muted); }

@media (max-width: 1000px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dashlist__row { padding-inline: var(--space-4); }
  /* De dagen onder elkaar; een dag zonder taken is dan één regel. */
  .dashweek { grid-template-columns: minmax(0, 1fr); }
  .dashweek__day { min-height: 0; border-right: 0; border-bottom: 1px solid var(--border-light); }
  .dashweek__day:last-child { border-bottom: 0; }
  .dashweek__head { margin-bottom: 0; }
  .dashweek__day:not(.is-empty) .dashweek__head { margin-bottom: var(--space-2); }
}

/* ================= Bedrijfsdossier ================= */
/* Bovenaan de bedrijfspagina: links wie de klant is, rechts wat er loopt. */
.profilegrid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/* Het logo van de klant naast zijn naam. */
.companyhead {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}
.companylogo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--radius-md);
  flex: 0 0 auto;
}

/* Een kopje binnen een paneel, zonder een nieuw paneel te beginnen. */
.subsection + .subsection { margin-top: var(--space-5); }
.subsection__title {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* Een kort lijstje met een waarde rechts: projecten, facturatieregels. */
.minilist { display: grid; gap: var(--space-2); }
.minilist__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.minilist__value { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.minilist__row--total {
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-2);
  color: var(--text-heading);
}
.minilist__row--total .minilist__value { color: var(--text-heading); }

/* Lopende tekst in een paneel: omschrijving en context. */
.prose { white-space: pre-wrap; line-height: var(--leading-relaxed, 1.6); margin: 0; }
.prose--quiet { color: var(--text-muted); }

/* Doelstellingen: intern en extern naast elkaar. */
.goalgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}
.goalcolumn__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.goallist { display: grid; gap: var(--space-3); }
.goal {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.goal--done { background: var(--surface-paper); }
.goal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.goal__title { color: var(--text-heading); }
.goal__target { font-size: var(--text-sm); margin-top: 2px; }
.goal__actions {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

/* Gekoppelde databronnen, als kaartjes naast elkaar. */
.sourcegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.source {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.source__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.source__name { color: var(--text-heading); font-size: var(--text-sm); }
.source__actions { display: flex; gap: var(--space-1); margin-top: var(--space-2); }

.mono { font-family: var(--font-mono, ui-monospace, monospace); }

/* ================= Tabbladen ================= */
.tabs { display: inline-flex; gap: var(--space-1); }
.tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.tab:hover { color: var(--text-heading); background: var(--surface-paper); }
.tab.is-active {
  background: var(--surface-paper);
  color: var(--text-heading);
  border-color: var(--border-hairline);
}

/* ================= Taken ================= */
/* Links de takenlijst, rechts de taak die je hebt aangeklikt (FO 4.6). */
.tasksplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.taskpane { border-right: 1px solid var(--border-hairline); min-width: 0; }

/* Werkbalk boven de lijst: statusfilter, sorteren, alles in- of uitklappen. */
.tasktools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
}
.tasktools__end { margin-left: auto; display: flex; gap: var(--space-1); }
.btn--icon { padding: var(--space-1) var(--space-2); line-height: 0; }


/* Een doel: grijze kop, inklapbaar, anders dan een taak. */
.taskgroup { border-bottom: 1px solid var(--border-hairline); }
.taskgroup.is-dropping { background: var(--surface-paper); }
.taskgroup__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-paper);
  border-bottom: 1px solid var(--border-hairline);
}
.taskgroup.is-collapsed .taskgroup__head { border-bottom: 0; }
.taskgroup__button {
  border: 0;
  background: none;
  padding: var(--space-1) 0;
  font: inherit;
  color: var(--text-heading);
  cursor: pointer;
  min-width: 0;
}
.taskgroup__toggle { display: inline-flex; align-items: center; gap: var(--space-2); }
.taskgroup__name {
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.taskgroup__head--loose .taskgroup__name { font-weight: var(--weight-regular); }
.taskgroup__meta { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.taskgroup__due {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.taskgroup__due.is-late { color: var(--status-bad); }
.taskgroup__more { margin-left: auto; color: var(--text-muted); }

/* Een taak: één compacte regel. */
.taskrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-1) var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 150ms var(--ease-out);
}
.taskrow:hover { background: var(--surface-page); }
.taskrow.is-selected { background: var(--surface-paper); border-left-color: var(--text-heading); }
.taskrow.is-dragging { opacity: 0.4; }
.taskrow.is-dropbefore { box-shadow: inset 0 2px 0 0 var(--text-heading); }
.taskrow__status {
  flex: none;
  border: 0;
  background: none;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
}
.taskrow__status:disabled { cursor: default; }
.taskrow__main { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1; }
.taskrow__title {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  color: var(--text-heading);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.taskrow.is-done .taskrow__title { color: var(--text-muted); text-decoration: line-through; }
.taskrow__hints { display: inline-flex; gap: var(--space-2); color: var(--text-muted); flex: none; }
.taskrow__hint { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-xs); }
.taskrow__due { flex: none; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.taskrow__due.is-late { color: var(--status-bad); }
.taskrow__people { display: inline-flex; flex: none; }
/* Overlappende gezichten krijgen een witte rand, zodat ze los van elkaar staan. */
.taskrow__people .avatar { outline: 2px solid var(--surface-card); }
.taskrow.is-selected .taskrow__people .avatar { outline-color: var(--surface-paper); }
.taskrow__people .avatar + .avatar { margin-left: calc(var(--space-1) * -1); }

/* De statuscirkel: kleur per status. */
.statusicon { color: var(--border-light); }
.statusicon--open { color: var(--text-muted); }
.statusicon--in_progress { color: var(--status-warn); }
.statusicon--done { color: var(--status-good); }
.statusicon--changed { color: var(--status-info); }
.statusicon--other { color: var(--text-muted); }

/* De status in woorden naast de titel, behalve bij Geopend (de norm). */
.statuslabel {
  flex: none;
  font-size: var(--text-xs);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  line-height: 1.6;
}
.statuslabel--in_progress { color: var(--status-warn); background: var(--status-warn-bg); }
.statuslabel--done { color: var(--status-good); background: var(--status-good-bg); }
.statuslabel--changed { color: var(--status-info); background: var(--status-info-bg); }
.statuslabel--other { color: var(--text-body); background: var(--surface-paper); }
.statusicon__check { stroke: var(--surface-card); }

/* Prioriteit: alleen als die niet standaard is. Prio valt op. */
.prioflag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-xs);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
}
.prioflag--high { color: var(--status-bad); background: var(--status-bad-bg); font-weight: var(--weight-medium); }
.prioflag--medium { color: var(--status-warn); background: var(--status-warn-bg); }

/* Snel toevoegen onderaan een doel of de lijst. */
.quickadd {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: 0 var(--space-4) 0 calc(var(--space-4) + 5px);
  color: var(--text-muted);
  cursor: text;
}
.quickadd--goal { border-top: 0; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.quickadd__input {
  flex: 1;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text-heading);
  padding: var(--space-2) 0;
  min-width: 0;
}
.quickadd__input::placeholder { color: var(--text-muted); }
.quickadd__input:focus { outline: none; }
.quickadd:focus-within { background: var(--surface-page); }

/* Rechts: de geopende taak. */
/* Rechts: de geopende taak (FO 4.6), in de rustige indeling van het voorbeeld:
   bovenin status, titel en één regel met prioriteit, medewerkers en datum; dan
   de omschrijving; daaronder lijsten met een haarlijn tussen de regels; en
   helemaal onderaan de opmerkingen op een licht vlak. */
.taskdetail { background: var(--surface-card); min-width: 0; display: flex; flex-direction: column; }
.taskdetail__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: 48px;
}
.taskdetail__crumbs { display: flex; align-items: center; gap: var(--space-1); min-width: 0; flex: 1; }
.taskdetail__back { padding-inline: var(--space-1); color: var(--text-muted); }
/* Zonder subtaak is de terugknop alleen op de telefoon nodig. */
.taskdetail__back:not(.is-crumb) { display: none; }
.taskdetail__crumbsep { color: var(--text-muted); }
.taskdetail__crumbhere { color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taskdetail__close { color: var(--text-muted); }

.taskdetail__head { display: grid; gap: var(--space-3); padding: 0 var(--space-5) var(--space-4); }

.savestatus { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2); }
.savestatus.is-failed { color: var(--status-bad); white-space: normal; }

/* 1. Status: vijf knoppen naast elkaar, de huidige in zijn eigen kleur. */
.statusbar { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.statusbar__item {
  border: 1px solid transparent;
  background: none;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.statusbar__inner { display: inline-flex; align-items: center; gap: var(--space-2); }
.statusbar__item .statusicon { width: 18px; height: 18px; }
.statusbar__item:hover:not(:disabled):not(.is-active) { background: var(--surface-page); color: var(--text-heading); }
.statusbar__item:disabled { cursor: default; }
.statusbar__item.is-active { color: var(--text-heading); font-weight: var(--weight-medium); border-color: var(--border-hairline); background: var(--surface-paper); }
.statusbar__item--in_progress.is-active { background: var(--status-warn-bg); color: var(--status-warn); border-color: transparent; }
.statusbar__item--done.is-active { background: var(--status-good-bg); color: var(--status-good); border-color: transparent; }
.statusbar__item--changed.is-active { background: var(--status-info-bg); color: var(--status-info); border-color: transparent; }

/* 2. De titel: een kop die je kunt bewerken. */
.taskdetail__title-input {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  font: inherit;
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: var(--text-heading);
  padding: var(--space-1) var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  resize: none;
  overflow: hidden;
  transition: border-color 150ms var(--ease-out);
}
.taskdetail__title-input:hover:not(:read-only) { border-color: var(--border-hairline); }
.taskdetail__title-input:focus { outline: none; border-color: var(--border-light); }

/* 3 en 4. Prioriteit, medewerkers en datum als knoppen zonder kader. */
.taskdetail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-left: calc(var(--space-2) * -1); }
.metabtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  background: none;
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  min-height: 32px;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-body);
  cursor: pointer;
  transition: background 150ms var(--ease-out);
}
.metabtn:hover:not(:disabled) { background: var(--surface-page); }
.metabtn:disabled { cursor: default; }
.metabtn.is-empty { color: var(--text-muted); }
.metabtn.is-running { color: var(--status-good); }
/* Een korte uitleg bovenin een menu, zoals "Op welke budgetregel?". */
.menu__note { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.metabtn--prio-standard { color: var(--text-muted); }
.metabtn--prio-medium { color: var(--status-warn); }
.metabtn--prio-high { color: var(--status-bad); font-weight: var(--weight-medium); }
.metabtn.is-late, .metabtn.is-late .metabtn__date { color: var(--status-bad); }
.metabtn__people { display: inline-flex; }
.metabtn__people .avatar { outline: 2px solid var(--surface-card); }
.metabtn__people .avatar + .avatar { margin-left: calc(var(--space-1) * -1); }
.metabtn__date { border: 0; background: none; font: inherit; color: inherit; padding: 0; cursor: pointer; }
.metabtn__date.is-empty { color: var(--text-muted); }
/* De tijd bij de deadline; zonder datum is er niets om een tijd bij te zetten. */
.metabtn__time { margin-left: var(--space-1); }
.metabtn__time:disabled.is-empty { display: none; }

/* 5. De omschrijving, zonder eigen kop. */
.taskdesc {
  overflow-wrap: anywhere;
  color: var(--text-heading);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  cursor: text;
  line-height: 1.6;
}
.taskdesc:hover { background: var(--surface-page); }
.taskdesc.is-empty { color: var(--text-muted); }
.taskdesc__editor { width: 100%; resize: vertical; }
.taskdetail__created { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }

/* 6 en 7. Subtaken en bijlagen: een kop, regels met een haarlijn ertussen,
   en onderaan een regel om iets toe te voegen. */
.tasklistblock { border-top: 1px solid var(--border-hairline); }
.tasklistblock.is-over { background: var(--surface-paper); }
.tasklistblock.is-busy { opacity: 0.6; pointer-events: none; }
.tasklistblock__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-5) var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
}
.tasklistblock__count { margin-left: auto; font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-regular); }
.blockrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  margin: 0;
  padding: 0 var(--space-5);
  border-top: 1px solid var(--border-hairline);
}
.blockrow--button {
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.blockrow--button:hover { background: var(--surface-page); }
/* Beheer › Modules: naam en uitleg onder elkaar, dus ruimte boven en onder. */
.modulerow { padding-block: var(--space-3); }
.blockrow--button .quickadd { padding: 0; min-height: 0; }
.quickadd--inset { padding: 0 var(--space-5); }

.subrow__title {
  flex: 1;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--text-heading);
  padding: 0;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subrow__title:hover { text-decoration: underline; }
.subrow.is-done .subrow__title { color: var(--text-muted); text-decoration: line-through; }

.filerow__open {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.filerow__main { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.filerow__name { color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filerow__open:hover .filerow__name { text-decoration: underline; }
.filerow__size { flex: none; }
.fileicon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--surface-paper);
  overflow: hidden;
}
.fileicon__img { width: 100%; height: 100%; object-fit: cover; }
.fileicon__type { font-size: 10px; font-weight: var(--weight-medium); color: var(--text-muted); letter-spacing: 0.04em; }

/* Een groter voorbeeld in een venster. */
.viewer {
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  width: min(1000px, calc(100vw - var(--space-6)));
  max-height: calc(100vh - var(--space-6));
  background: var(--surface-card);
}
.viewer::backdrop { background: color-mix(in srgb, var(--navy-900) 60%, transparent); }
.viewer__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
}
.viewer__name { flex: 1; color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer__body { display: grid; place-items: center; background: var(--surface-paper); }
.viewer__img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; }
.viewer__frame { width: 100%; height: calc(100vh - 140px); border: 0; background: var(--surface-card); }

/* 8. Opmerkingen onderaan, op een licht vlak, met het invoerveld als laatste. */
.taskcommentsblock {
  margin-top: auto;
  border-top: 1px solid var(--border-hairline);
  background: var(--surface-page);
  padding: var(--space-4) var(--space-5);
  display: grid;
  gap: var(--space-4);
}
.taskcomments { display: grid; gap: var(--space-4); }
.taskcomment { display: flex; gap: var(--space-3); align-items: flex-start; }
.taskcomment__main { min-width: 0; flex: 1; }
.taskcomment__head { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.taskcomment__author { color: var(--text-heading); font-weight: var(--weight-medium); }
.taskcomment__body { overflow-wrap: anywhere; color: var(--text-heading); }
.mention { color: var(--text-heading); font-weight: var(--weight-medium); }
.taskcomments__new { display: grid; gap: var(--space-2); }
.taskcomments__line { display: flex; gap: var(--space-3); align-items: center; }
.taskcomments__input {
  flex: 1;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font: inherit;
  color: var(--text-heading);
  padding: var(--space-2) var(--space-3);
  resize: none;
}
.taskcomments__input:focus { outline: none; border-color: var(--border-light); }
.taskcomments__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-left: calc(24px + var(--space-3)); }
.taskcomments__actions .btn { margin-left: auto; }

/* Het statusmenu in de takenlijst: één menu dat naar de aangeklikte rij verhuist. */
.taskrow { position: relative; }
.taskrow.has-menu { z-index: 2; }
.statusmenu {
  position: absolute;
  top: calc(100% - var(--space-1));
  left: var(--space-3);
  z-index: 20;
  min-width: 200px;
  padding: var(--space-1);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-chip);
}
.statusmenu .menuitem { width: 100%; }
.statusmenu .menuitem.is-current { background: var(--surface-paper); color: var(--text-heading); }
.statusmenu__item { display: inline-flex; align-items: center; gap: var(--space-2); }

.subtask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border-hairline);
}
.subtask.is-done span { color: var(--text-muted); text-decoration: line-through; }

.attachment {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}

/* ================= Tabellen ================= */
.tablewrap { overflow-x: auto; }

/* De laatste kolom met knoppen: rechts uitgelijnd en niet afbreken. */
.table td.is-actions, .table th.is-actions {
  text-align: right;
  white-space: nowrap;
}
.table td.is-actions .btn + .btn { margin-left: var(--space-1); }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
  white-space: nowrap;
  background: var(--surface-card);
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
  color: var(--text-body);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.is-clickable { cursor: pointer; }
/* Een regel die niet meer meetelt: verwijderde uren, een afgelopen contract. */
.table tbody tr.is-removed { opacity: .55; }
.table tbody tr.is-inactive { opacity: .6; }
.table tbody tr.is-clickable:hover { background: var(--surface-paper); }

.table td.is-numeric, .table th.is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.table .cell-strong { color: var(--text-heading); font-weight: var(--weight-medium); }

/* Groepskop binnen een tabel: klant en project in Mijn planning. */
.table tr.group-row td {
  background: var(--surface-paper);
  color: var(--text-heading);
  font-weight: var(--weight-medium);
  border-bottom: 1px solid var(--border-hairline);
}

/* Mijn planning (FO 4.7): de referentie klein achter de groepsnaam, en de
   timerknoppen altijd even breed zodat Start en Stop niet verspringen. */
/* Klant in donkerblauw, project gedempt erachter; geen linkkleur, want de
   hele kop is de link en cyan is voor primaire acties. */
.group-row__title { color: var(--text-heading); text-decoration: none; }
.group-row__title:hover .group-row__company { text-decoration: underline; }
.group-row__company { color: var(--text-heading); font-weight: var(--weight-medium); }
/* In Mijn planning is de klantbalk licht (11 oktober 2026). Eerst was hij
   donkerder dan een gewone groepskop; dat gaf te veel contrast. */
.table--planning tr.group-row td { background: var(--surface-page); }
/* Het ingeplande getal is een knop, maar moet op één lijn staan met de
   getallen eronder en erboven: geen eigen binnenruimte. */
.planned-btn { padding: 0; min-height: 0; font-size: inherit; font-variant-numeric: tabular-nums; }
.planned-btn:hover { background: none; text-decoration: underline dotted; }

/* Een project onder de klant, alleen als de klant er meer dan één heeft. */
.table tr.project-row td {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  font-size: var(--text-xs);
  background: var(--surface-page);
}
.project-row__name { color: var(--text-muted); text-decoration: none; }
.project-row__name:hover { color: var(--text-heading); text-decoration: underline; }
.table--stack tr.project-row td::before { content: none; }
.table--planning td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.timer-cell { justify-content: flex-end; flex-wrap: nowrap; }
.timer-cell__main { min-width: 4.5rem; justify-content: center; }

.table tr.total-row td {
  border-top: 1px solid var(--border-light);
  color: var(--text-heading);
  font-weight: var(--weight-medium);
}

/* Een toelichting onder een label of in een cel staat altijd op een eigen
   regel, ook buiten een tabel. */
.cell-sub { display: block; font-size: var(--text-xs); color: var(--text-muted); }

/* Omzet per jaar: een rijtje balkjes, zodat je in één oogopslag ziet of een
   klant groeit of terugloopt. */
.years { display: grid; gap: var(--space-2); }

/* Een kolomkop waarop je kunt klikken om te sorteren. Het pijltje verschijnt
   alleen bij de kolom die is aangeklikt. */
.sortheader {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  text-transform: inherit;
}
.sortheader__inner { display: inline-flex; align-items: center; gap: var(--space-1); }
.sortheader:hover { color: var(--text-heading); }
.sortheader.is-active { color: var(--text-heading); }
.is-numeric .sortheader { justify-content: flex-end; width: 100%; }

.sortarrow {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.sortarrow--asc { border-bottom: 5px solid currentColor; }
.sortarrow--desc { border-top: 5px solid currentColor; }

/* ================= Status ================= */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  background: var(--surface-paper);
  color: var(--text-body);
  white-space: nowrap;
}
.pill--good { background: var(--status-good-bg); color: var(--status-good); }
.pill--warn { background: var(--status-warn-bg); color: var(--status-warn); }
.pill--bad  { background: var(--status-bad-bg);  color: var(--status-bad); }

.value--good { color: var(--status-good); }
.value--warn { color: var(--status-warn); }
.value--bad  { color: var(--status-bad); font-weight: var(--weight-medium); }

.dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  display: inline-block; flex: 0 0 auto;
  /* Standaard een grijs bolletje: "niet", in plaats van onzichtbaar. */
  background: var(--border-light);
}
.dot--good { background: var(--status-good); }
.dot--warn { background: var(--status-warn); }
.dot--bad { background: var(--status-bad); }

/* ================= Knoppen, aanvullend ================= */
/* .btn, .btn--primary en .btn--secondary komen uit het design system. */
.btn--quiet {
  background: transparent;
  color: var(--text-body);
  border-color: transparent;
  border-radius: var(--radius-sm);
}
.btn--quiet:hover { background: var(--surface-paper); color: var(--text-heading); opacity: 1; }
.btn--destructive { color: var(--status-bad); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ================= Formulieren op lichte vlakken ================= */
/* Het design system heeft .input en .textarea voor donkere vlakken. In het CRM
   staan formulieren op wit; zelfde radius, randdikte en cyan focus. */
.form { display: grid; gap: var(--space-4); }
.form--two { grid-template-columns: 1fr 1fr; }
.form--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form__wide { grid-column: 1 / -1; }

.field { display: grid; gap: var(--space-1); }

.field__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
}

.field__hint { font-size: var(--text-xs); color: var(--text-muted); }
/* Een pill of knop in een veld houdt zijn eigen breedte; anders rekt hij op
   over de hele kolom omdat het veld een grid is. */
.field > .pill, .field > .btn { justify-self: start; }

.field__error { font-size: var(--text-xs); color: var(--status-bad); }

.control {
  appearance: none;
  width: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-heading);
  font: inherit;
  font-size: var(--text-sm);
  padding: 10px var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.control::placeholder { color: var(--text-muted); }
.control:focus { outline: none; border-color: var(--accent); }
.control[aria-invalid="true"] { border-color: var(--status-bad); }
textarea.control { min-height: 96px; resize: vertical; line-height: var(--leading-body); }
select.control {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-7);
}

.checkline { display: flex; align-items: center; gap: var(--space-2); }
.checkline input[type="checkbox"],
.ncard__check,
.recipients__item input[type="checkbox"] {
  appearance: none;
  width: 18px; height: 18px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  cursor: pointer;
  display: inline-grid; place-content: center;
}
.checkline input[type="checkbox"]:checked,
.ncard__check:checked,
.recipients__item input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.checkline input[type="checkbox"]:checked::after,
.ncard__check:checked::after,
.recipients__item input[type="checkbox"]:checked::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid var(--navy-900);
  border-bottom: 2px solid var(--navy-900);
  transform: rotate(-45deg) translate(1px, -1px);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-hairline);
}
/* De gekozen filters en de wisknop horen in dezelfde rij als de knoppen
   ernaast. Ze zitten in een eigen element zodat ze bijgewerkt kunnen worden
   zonder de rest van de balk opnieuw te tekenen; display: contents laat ze toch
   meedoen in de flexrij eromheen. */
.filters__chosen { display: contents; }

.filters .control { width: auto; min-width: 160px; }
.filters .control--search { min-width: 240px; }

/* ================= Filter met vinkjes ================= */
.filterbutton {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  color: var(--text-body);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  padding: 8px var(--space-4);
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.filterbutton:hover { border-color: var(--text-muted); color: var(--text-heading); }
.filterbutton.is-active { border-color: var(--text-heading); color: var(--text-heading); }
.filterbutton__count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-dark);
  color: var(--text-on-dark);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.filterbutton__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .6;
}

.dropdown__panel--filter { min-width: 260px; }

.checklist { display: grid; gap: 2px; }
.checklist__row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.checklist__row:hover { background: var(--surface-paper); }
.checklist__row.is-empty .checklist__label,
.checklist__row.is-empty .checklist__count { color: var(--text-muted); }
.checklist__row input[type="checkbox"] {
  appearance: none;
  width: 18px; height: 18px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  cursor: pointer;
  display: inline-grid; place-content: center;
}
.checklist__row input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.checklist__row input[type="checkbox"]:checked::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid var(--navy-900);
  border-bottom: 2px solid var(--navy-900);
  transform: rotate(-45deg) translate(1px, -1px);
}
.checklist__label { color: var(--text-heading); }
.checklist__count { color: var(--text-muted); font-size: var(--text-xs); }
.checklist__empty { padding: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }
.checklist__add {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-3);
  margin-top: var(--space-1);
  border-top: 1px solid var(--border-hairline);
}
.checklist__add .control { flex: 1 1 140px; }
.checklist__add .field__error { flex: 1 1 100%; }

.pill--removable { padding-right: 2px; }
.pill__remove {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 2px 6px;
  opacity: .6;
}
.pill__remove:hover { opacity: 1; background: var(--surface-card); }

/* ================= Opslagstatus ================= */
/* Het scherm meldt "Opgeslagen" pas als de server het bevestigt (FO 7.3.2). */
.savestate {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 20px;
}
.savestate--saved { color: var(--status-good); }
.savestate--error { color: var(--status-bad); }

/* ================= Meldingen ================= */
.notice {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  background: var(--surface-paper);
  color: var(--text-body);
}
.notice--bad { background: var(--status-bad-bg); color: var(--status-bad); }
.notice--warn { background: var(--status-warn-bg); color: var(--status-warn); }
.notice--good { background: var(--status-good-bg); color: var(--status-good); }

.toasts {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 60;
  display: grid;
  gap: var(--space-2);
  max-width: 380px;
}
.toast {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-chip);
  font-size: var(--text-sm);
  animation: toast-in var(--duration-med) var(--ease-out);
}
.toast--bad { background: var(--status-bad); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* ================= Lege overzichten ================= */
/* Een leeg overzicht legt uit wat er hoort te staan (FO 4.14). */
.empty {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-5);
  color: var(--text-body);
}
.empty__title { color: var(--text-heading); font-size: var(--text-lg); font-weight: var(--weight-medium); }
.empty__text { max-width: 44ch; color: var(--text-muted); }

/* ================= Venster (dialog) ================= */
.dialog {
  border: 0;
  padding: 0;
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-paper);
  width: min(560px, calc(100vw - var(--space-6)));
  /* Een lang venster mag nooit buiten beeld vallen: de kop en de knoppen
     blijven staan, de inhoud ertussen schuift. */
  max-height: calc(100vh - var(--space-7));
  color: var(--text-body);
  font-size: var(--text-sm);
}
.dialog[open] { display: flex; flex-direction: column; }
.dialog::backdrop { background: color-mix(in srgb, var(--navy-900) 45%, transparent); }
.dialog__head {
  flex: 0 0 auto;
  padding: var(--space-5) var(--space-5) 0;
  color: var(--text-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
}
.dialog__sub { padding: var(--space-1) var(--space-5) 0; color: var(--text-muted); font-size: var(--text-sm); }
.dialog__body {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
  overflow-y: auto;
  min-height: 0;
}
.dialog__foot {
  flex: 0 0 auto;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ================= Onderdelen binnen Beheer ================= */
.subnav {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.subnav__link {
  color: var(--text-body);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-out);
}
.subnav__link:hover { background: var(--surface-paper); color: var(--text-heading); opacity: 1; }
.subnav__link[aria-current="page"] {
  background: var(--surface-card);
  color: var(--text-heading);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-card);
}

/* Lijst links, inhoud rechts. Op een smal scherm onder elkaar. */
.split {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}

.rolelist { padding: var(--space-2); display: grid; gap: 2px; }
.rolelist__item {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  padding: var(--space-3);
  text-align: left;
  transition: background var(--duration-fast) var(--ease-out);
}
.rolelist__item:hover { background: var(--surface-paper); }
.rolelist__item[aria-current="true"] { background: var(--surface-paper); }
.rolelist__body { display: grid; gap: 2px; }
.rolelist__name { color: var(--text-heading); font-weight: var(--weight-medium); }
.rolelist__meta { font-size: var(--text-xs); color: var(--text-muted); }

/* Wat een rol mag, als leesbaar lijstje in een venster. */
.rolesummary {
  background: var(--surface-paper);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.rolesummary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.rolesummary__edit { font-size: var(--text-xs); }
.rolesummary__row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
}
.rolesummary__row.is-off { color: var(--text-muted); }
.rolesummary__row.is-off .dot { background: var(--border-light); }
.rolesummary__name { color: var(--text-heading); }
.rolesummary__row.is-off .rolesummary__name { color: var(--text-muted); }
.rolesummary__what { color: var(--text-muted); text-align: right; }

/* Vinkjes in een tabel staan gecentreerd onder hun kolomkop. */
.table th.is-center, .table td.is-center { text-align: center; }
.checkline--center { justify-content: center; }
.control--compact { width: auto; min-width: 130px; padding: 6px var(--space-3); }

@media (max-width: 640px) {
  .table--stack td.is-center { justify-content: space-between; }
  .checkline--center { justify-content: flex-end; }
}

/* ================= Tweestapsverificatie ================= */
.qrbox {
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.qrbox__code { width: 220px; height: 220px; }

.keybox {
  display: block;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-paper);
  border-radius: var(--radius-md);
  color: var(--text-heading);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  word-break: break-all;
  user-select: all;
}

/* ================= Inlogscherm ================= */
/* Het enige volvlakke donkere vlak in de applicatie, zoals de hero op de site. */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--surface-dark);
  padding: var(--space-5);
}
.login__card {
  width: min(420px, 100%);
  display: grid;
  gap: var(--space-5);
}
.login__brand {
  color: var(--text-on-dark);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
}
.login__logo { max-height: 56px; max-width: 240px; width: auto; object-fit: contain; }
.login__kicker {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--accent);
}
.login__form { display: grid; gap: var(--space-4); }
.login .field__label { color: var(--text-on-dark); }
/* Op donker de velden uit het design system: transparant met navy rand. */
.login .control {
  background: transparent;
  border-color: var(--border-input-dark);
  color: var(--text-on-dark);
}
.login .control::placeholder { color: var(--text-on-dark-muted); }
.login .control:focus { border-color: var(--accent); }
.login__error { color: var(--accent-hover); font-size: var(--text-sm); }
/* Chrome kleurt automatisch ingevulde velden lichtblauw. Op het donkere
   inlogscherm zou dat het veld onleesbaar maken. */
.login .control:-webkit-autofill,
.login .control:-webkit-autofill:hover,
.login .control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-on-dark);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-dark) inset;
  caret-color: var(--text-on-dark);
}
.login__foot { color: var(--text-on-dark-muted); font-size: var(--text-xs); }
/* "Wachtwoord vergeten?" en "Terug naar inloggen": een tekstlink, geen knop. */
.login__link {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text-on-dark-muted);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}
.login__link:hover, .login__link:focus-visible { color: var(--text-on-dark); }
.login__message { color: var(--text-on-dark); font-size: var(--text-sm); }
/* "Doorgaan met Google": een gewone tweede knop, geen merkkleuren. */
.login__google { justify-content: center; gap: var(--space-3); }
.googlelogo { flex: none; }
.login__or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-on-dark-muted);
  font-size: var(--text-xs);
}
.login__or::before, .login__or::after { content: ''; flex: 1; border-top: 1px solid var(--border-input-dark); }

/* ================= Telefoon ================= */
/* De timer en tijd toevoegen moeten op een telefoon goed werken (FO 4.14). */
@media (max-width: 1100px) {
  .searchbox__input { width: 180px; }
}

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; row-gap: var(--space-2); }
  .topbar__nav { order: 3; width: 100%; }
  .timerbar { order: 2; }
  .searchbox { order: 4; flex: 1 1 100%; }
  .searchbox__input { width: 100%; }
  .dropdown__panel--search { min-width: min(420px, calc(100vw - var(--space-6))); }
}

@media (max-width: 640px) {
  .page { padding: var(--space-4) var(--space-4) var(--space-8); }
  .form--two { grid-template-columns: 1fr; }
  .form--three { grid-template-columns: 1fr 1fr; }
  .page__head { align-items: flex-start; }
  .profilegrid { grid-template-columns: 1fr; }
  /* Op een telefoon onder elkaar: eerst de lijst, dan de geopende taak. */
  .tasksplit { grid-template-columns: 1fr; }
  .taskpane { border-right: 0; }
  .taskrow__hints { display: none; }
  /* Telefoon: de lijst, of de taak met een terugknop; nooit allebei. */
  .tasksplit.has-detail .taskpane,
  .tasksplit.has-detail .taskviewpane { display: none; }
  .tasksplit:not(.has-detail) .taskdetail { display: none; }
  .taskdetail__back:not(.is-crumb) { display: inline-flex; }
  .taskdetail__close { display: none; }
  .taskdetail__head { padding: 0 var(--space-4) var(--space-4); }
  .tasklistblock__head, .blockrow, .quickadd--inset { padding-inline: var(--space-4); }
  .taskcommentsblock { padding: var(--space-4); }
  .filters { padding: var(--space-3) var(--space-4); }
  .filters .control, .filters .control--search { min-width: 0; width: 100%; }

  /* Tabellen worden kaarten: elke cel met zijn eigen kop ervoor. */
  .table--stack thead { display: none; }
  .table--stack tbody tr {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
  }
  .table--stack tbody td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    border: 0;
    padding: 0;
    text-align: right;
  }
  .table--stack tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-align: left;
  }
  .table--stack tbody td.is-numeric { text-align: right; }
  .table--stack tr.group-row td { justify-content: flex-start; }
  .table--stack tr.group-row td::before { content: none; }
  /* Mijn planning op de telefoon: de groepskop houdt zijn subtotalen, met het
     label ervoor; lege cellen nemen geen ruimte in. */
  .table--stack tr.group-row td.is-numeric::before { content: attr(data-label); }
  .table--stack tr.group-row td.is-numeric { justify-content: space-between; }
  .table--stack tbody td:empty { display: none; }
  .table--stack td.is-actions .timer-cell { width: 100%; }
}

/* ================= Projectdetail (FO 4.5) ================= */

/* Een link in lopende tekst: donker en onderstreept. Cyan is voor knoppen. */
.textlink {
  color: var(--text-heading);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.textlink:hover { text-decoration-thickness: 2px; }

.projecthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.projecthead__title { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.projecthead__title .page__title { margin: 0; overflow-wrap: anywhere; }
.projecthead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Gezondheid als bolletje met een zachte ring in dezelfde kleur. */
.healthdot {
  flex: none;
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-pill);
  border: var(--space-1) solid var(--status-good-bg);
  background: var(--status-good);
  box-sizing: content-box;
}
.healthdot--warn { background: var(--status-warn); border-color: var(--status-warn-bg); }
.healthdot--bad  { background: var(--status-bad);  border-color: var(--status-bad-bg); }

/* Label links, waarde rechts; elke rij gescheiden door een haarlijn. */
.infolist { padding: 0; }
.infolist__row {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 3fr;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-hairline);
}
.infolist__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  color: var(--text-muted);
}
.infolist__action { padding-inline: 0; }
.infolist__value { color: var(--text-heading); min-width: 0; }
.infolist__value .prose { color: var(--text-body); }
.infolist__foot { padding: var(--space-2) var(--space-5); }
.infolist__toggle { padding-inline: 0; color: var(--text-muted); }

/* Teamleden en contactpersonen als raster: naam, rol en e-mail. */
.peoplegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-4) var(--space-5);
}
.peoplegrid__item { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.peoplegrid__text { display: grid; min-width: 0; }
.peoplegrid__name { color: var(--text-heading); font-weight: var(--weight-medium); }
/* Op een eigen regel: naast de naam brak "Thomas Teamlid" in een smalle kolom
   midden door. */
.peoplegrid__badge {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}
.peoplegrid__email { font-size: var(--text-xs); color: var(--text-body); overflow-wrap: anywhere; }
.peoplegrid__remove { margin-left: auto; padding: 0 var(--space-1); color: var(--text-muted); }

@media (max-width: 720px) {
  .infolist__row { grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-3) var(--space-4); }
  .infolist__label { flex-direction: row; justify-content: space-between; align-items: center; }
  .infolist__foot { padding: var(--space-2) var(--space-4); }
}

/* Uren: dag voor dag bladeren. */
.daynav { display: inline-flex; align-items: center; gap: var(--space-2); }
.daynav__label {
  min-width: 14rem;
  text-align: center;
  color: var(--text-heading);
  font-weight: var(--weight-medium);
}
@media (max-width: 720px) {
  .daynav { width: 100%; justify-content: space-between; }
  .daynav__label { min-width: 0; flex: 1; }
}

/* Projectenoverzicht (FO 4.5): de status als bolletje, met alleen een
   afwijkende status in woorden erbij. Bedrijf en project in donkere tekst; de
   linkkleur is voor primaire acties niet bedoeld. */
.healthdot--sm { width: 10px; height: 10px; border-width: 3px; }
.statuscell { display: inline-flex; align-items: center; gap: var(--space-2); }
.statuscell .cell-sub { display: inline; }
.table--projects .cell-company { color: var(--text-body); text-decoration: none; }
.table--projects .cell-link { color: var(--text-heading); text-decoration: none; }
.table--projects .cell-company:hover,
.table--projects .cell-link:hover { text-decoration: underline; }

/* ================= Secties op het projectdetail (FO 4.5, 4.8) ================= */

.psection { display: grid; gap: var(--space-3); }
.psection.is-over { outline: 2px dashed var(--border-light); outline-offset: 4px; border-radius: var(--radius-lg); }
.psection.is-busy { opacity: 0.6; pointer-events: none; }
.psection__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.psection__title { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-medium); color: var(--text-heading); }
.psection__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.psection__new { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.psection__check { font-size: var(--text-sm); }
.psection-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }

/* Opmerkingen: kaartjes onder elkaar, reacties ingesprongen met een lijn. */
.thread__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.thread__bar .control { width: auto; min-width: 12rem; }
.thread__panel { padding: 0; overflow: hidden; }
.thread__item { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-hairline); display: grid; gap: var(--space-2); }
.thread__item:last-child { border-bottom: 0; }
.thread__item--reply { padding: var(--space-3) 0 var(--space-3) var(--space-4); border-bottom: 0; border-left: 3px solid var(--border-hairline); }
.thread__replies { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.thread__head { display: flex; align-items: center; gap: var(--space-3); }
.thread__pinned { margin-left: auto; }
/* Een systeembericht: rustig, één regel, zonder knoppen (FO 4.8). */
.thread__item--system {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding-block: var(--space-3);
  background: var(--surface-page);
}
.thread__systemicon { color: var(--text-muted); padding-top: 2px; }
.thread__systemtitle { color: var(--text-body); font-size: var(--text-sm); overflow-wrap: anywhere; }
.thread__author { color: var(--text-heading); font-weight: var(--weight-medium); }
.thread__meta { font-size: var(--text-xs); color: var(--text-muted); }
.thread__title { color: var(--text-heading); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
/* Lange berichten ingeklapt tot zo'n zes regels; zonder verloop (geen gradients). */
.thread__clip { max-height: 10.5rem; overflow: hidden; }
.thread__clip.is-open, .thread__clip.is-short { max-height: none; }
.thread__toggle { justify-self: start; border: 0; background: none; padding: 0; font: inherit; font-size: var(--text-xs); color: var(--text-heading); text-decoration: underline; cursor: pointer; }
.thread__actions { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-left: calc(var(--space-2) * -1); }
.thread__more { width: 100%; text-align: left; border: 0; border-top: 1px solid var(--border-hairline); background: var(--surface-page); padding: var(--space-3) var(--space-5); font: inherit; font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; }
.thread__more:hover { color: var(--text-heading); }
.thread__composer { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); overflow: visible; }
.thread__composer-type { font-weight: var(--weight-medium); color: var(--text-heading); }
.thread__input { width: 100%; resize: vertical; }
.thread__composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.thread__composer-actions .filterbutton { margin-right: auto; }
.thread__replyform, .thread__editform { display: grid; gap: var(--space-2); }

.richtext { color: var(--text-body); line-height: 1.6; overflow-wrap: anywhere; }
.richtext p { margin: 0 0 var(--space-2); }
.richtext p:last-child { margin-bottom: 0; }
.richtext ul { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
.richtext li { margin: 2px 0; }
.richtext strong { color: var(--text-heading); font-weight: var(--weight-medium); }
/* Een kopje in een bericht: medium, nooit vet (design system). */
.richtext__heading {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
}
.richtext__heading:first-child { margin-top: 0; }

/* Bijlagen en informatieverzoeken: regels in een paneel. */
.filelist { padding: 0; overflow: hidden; }
.filelist .blockrow:first-child { border-top: 0; }
.requestrow { padding-block: var(--space-2); align-items: flex-start; }
.requestrow:first-child { border-top: 0; }
.requestrow__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.requestrow__answer { font-size: var(--text-xs); color: var(--text-body); }

/* Nurturing: vier kaarten met een stoplicht. */
.nurture { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.nurture__card { padding: var(--space-4); display: grid; gap: var(--space-3); align-content: start; }
.nurture__head { display: flex; align-items: center; gap: var(--space-3); }
.nurture__name { color: var(--text-heading); }
.light { width: 14px; height: 14px; border-radius: var(--radius-pill); border: 4px solid var(--surface-paper); background: var(--border-light); box-sizing: content-box; flex: none; }
.light--good { background: var(--status-good); border-color: var(--status-good-bg); }
.light--warn { background: var(--status-warn); border-color: var(--status-warn-bg); }
.light--bad { background: var(--status-bad); border-color: var(--status-bad-bg); }

/* Klantreis: See, Think, Do, Care, elk met een eigen statuskleur in de kop. */
.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.journey__card { padding: 0; overflow: hidden; display: grid; align-content: start; }
.journey__phase { margin: 0; padding: var(--space-4); text-align: center; font-size: var(--text-h3); font-weight: var(--weight-medium); }
.journey__card--see .journey__phase { background: var(--status-good-bg); color: var(--status-good); }
.journey__card--think .journey__phase { background: var(--status-info-bg); color: var(--status-info); }
.journey__card--do .journey__phase { background: var(--status-bad-bg); color: var(--status-bad); }
.journey__card--care .journey__phase { background: var(--status-warn-bg); color: var(--status-warn); }
.journey__body { padding: var(--space-4); display: grid; gap: var(--space-2); }
.journey__label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

@media (max-width: 900px) {
  .psection-pair { grid-template-columns: 1fr; }
  .nurture, .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .nurture, .journey { grid-template-columns: 1fr; }
  .thread__item { padding: var(--space-3) var(--space-4); }
}

/* @mentions: het lijstje met teamleden onder het tekstveld waarin je typt. */
.mentionwrap { position: relative; display: block; width: 100%; min-width: 0; flex: 1; }
.mentionwrap > textarea, .mentionwrap > input { width: 100%; }
.mentionmenu {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 30;
  min-width: 240px;
  margin-top: var(--space-1);
  padding: var(--space-1);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-chip);
}
.mentionmenu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-heading);
  cursor: pointer;
}
.mentionmenu__item.is-active, .mentionmenu__item:hover { background: var(--surface-paper); }
.mention { color: var(--text-heading); font-weight: var(--weight-medium); background: var(--surface-paper); border-radius: var(--radius-sm); padding: 0 2px; }

/* ================= Maandrapportage (FO 4.9) ================= */

.reporttitle { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.reporttitle__name { margin: 0; font-size: var(--text-h2); font-weight: var(--weight-medium); color: var(--text-heading); }
.reportgrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 1fr); gap: var(--space-5); align-items: start; }
.reportblock { display: grid; gap: var(--space-3); }

/* De brief: rustig, goed leesbaar, met de kopjes van de secties. */
.reportletter { padding: 0; }
.reportletter__body { padding: var(--space-5) var(--space-6); display: grid; gap: var(--space-3); }
.reportletter__body--edit { gap: var(--space-2); }
.reportletter__field { width: 100%; resize: vertical; background: var(--surface-page); }
.reportletter__foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--surface-page); border-top: 1px solid var(--border-hairline); }
.letter { display: grid; gap: var(--space-3); }
.letter__greeting { margin: 0; color: var(--text-heading); font-size: var(--text-lg); }
.letter__heading { margin: var(--space-3) 0 0; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--text-heading); }
.letter .richtext { color: var(--text-body); }
.letter__closing { margin-top: var(--space-3); }

/* Zijbalk: doelen op een grijs vlak, de stoplichten, wie en wanneer. */
.reportside { display: grid; gap: var(--space-4); align-content: start; }
.reportside__block { display: grid; gap: var(--space-2); }
.reportside__block--paper { background: var(--surface-paper); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.reportside__title { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-heading); }
.reportside__text { font-size: var(--text-sm); }
.reportside__lights { display: grid; background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.reportside__light { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-hairline); color: var(--text-heading); }
.reportside__light:last-child { border-bottom: 0; }
.reportside__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-body); }
.reportside__actions { margin-top: var(--space-2); }

/* Statistieken per kanaal: deze maand groot, vorige maand en het verschil klein. */
.stats { display: grid; gap: var(--space-3); }
.stats__channel { display: grid; grid-template-columns: minmax(10rem, 1fr) 4fr; gap: var(--space-4); align-items: center; background: var(--surface-paper); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.stats__name { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-regular); color: var(--text-heading); }
.stats__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); }
.stats__metric { text-align: right; border-left: 1px solid var(--border-light); padding-left: var(--space-3); }
.stats__label { font-size: var(--text-xs); color: var(--text-body); }
.stats__current { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--text-heading); font-variant-numeric: tabular-nums; }
.stats__previous { font-size: var(--text-xs); color: var(--text-body); font-variant-numeric: tabular-nums; }
.stats__change.is-good { color: var(--status-good); }
.stats__change.is-bad { color: var(--status-bad); }

/* Statistieken bewerken: een regel per kanaal en metric. */
.statsedit { display: grid; gap: var(--space-2); }
.statsedit__rows { display: grid; gap: var(--space-2); }
.statsedit__row { display: grid; grid-template-columns: 1.4fr 1.2fr 0.9fr 0.8fr 0.8fr auto; gap: var(--space-2); align-items: center; }
.statsedit__row--head { font-size: var(--text-xs); color: var(--text-muted); }
.dialog:has(.statsedit) { width: min(960px, calc(100vw - var(--space-6))); }

/* De link voor de klant: alleen de rapportage, zonder het CRM eromheen. */
.publicreport { max-width: 1200px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); display: grid; gap: var(--space-5); background: var(--surface-page); }
.publicreport__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.publicreport__logo { max-height: 40px; width: auto; }
.publicreport__org { font-weight: var(--weight-medium); color: var(--text-heading); }
.publicreport__foot { text-align: center; font-size: var(--text-xs); }

@media (max-width: 900px) {
  .reportgrid { grid-template-columns: 1fr; }
  .stats__channel { grid-template-columns: 1fr; }
  .reportletter__body { padding: var(--space-4); }
}
@media (max-width: 560px) {
  .statsedit__row { grid-template-columns: 1fr 1fr; }
  .statsedit__row--head { display: none; }
}

/* ================= Meldingen (FO 4.13) ================= */
/* Voorbeelden "Meldingen overview" en "Meldingen detail": links de lijst,
   rechts de geopende melding, over de volle hoogte van het scherm. */
.npage { padding-top: 0; padding-bottom: 0; }
.nhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-hairline);
}
.ntabs { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.ntabs__tab {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--text-lg);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}
.ntabs__tab:hover { color: var(--text-heading); }
.ntabs__tab.is-active { font-size: var(--text-h3); font-weight: var(--weight-medium); color: var(--text-heading); }
.nhead__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.nsplit {
  display: grid;
  grid-template-columns: minmax(300px, 2fr) minmax(0, 3fr);
  min-height: calc(100vh - 160px);
}
.nlist {
  border-right: 1px solid var(--border-hairline);
  min-width: 0;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.ntools {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-paper);
  border-bottom: 1px solid var(--border-hairline);
}
.ntools__bulk { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.nlist__item { cursor: pointer; border-bottom: 1px solid var(--border-hairline); }
.nlist__item:hover .ncard:not(.is-selected) { background: var(--surface-paper); }
.nlist__item:focus-visible { outline: 2px solid var(--text-heading); outline-offset: -2px; }
.nlist__more { margin: var(--space-3) auto; display: block; }

.ndetail {
  min-width: 0;
  background: var(--surface-page);
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.ndetail__actions {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-paper);
  border-bottom: 1px solid var(--border-hairline);
}
.ndetail__back { display: none; }
.ndetail__body { display: grid; }
.ndetail__body > .notice { margin: var(--space-4); }
/* De taak in het detail: zonder sluitknop en terugknop, die horen hier bij
   de melding. */
.ndetail .taskdetail__close,
.ndetail .taskdetail__back:not(.is-crumb) { display: none; }

.nmessage {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-hairline);
}
.nmessage--compact { padding: var(--space-4) var(--space-5); background: var(--surface-paper); }
.nmessage__head { display: flex; align-items: center; gap: var(--space-3); }
.nmessage__name { color: var(--text-heading); font-weight: var(--weight-medium); }
.nmessage__kind { font-size: var(--text-xs); color: var(--text-muted); }
.nmessage__text { color: var(--text-heading); overflow-wrap: anywhere; }
.nmessage__context { display: grid; gap: 2px; }
.nmessage__readers { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--text-xs); color: var(--text-muted); }
.nmessage__readers .is-read { color: var(--status-good); }

/* Bericht sturen: de collega's om aan te vinken. */
.recipients {
  display: grid;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-1);
}
.recipients__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.recipients__item:hover { background: var(--surface-paper); }

@media (max-width: 900px) {
  .nsplit { grid-template-columns: 1fr; min-height: 0; }
  .nlist, .ndetail { border-right: 0; max-height: none; }
  /* Telefoon: de lijst, of de melding met een terugknop; nooit allebei. */
  .nsplit.has-detail .nlist { display: none; }
  .nsplit:not(.has-detail) .ndetail { display: none; }
  .ndetail__back { display: inline-flex; }
  .nhead__actions { width: 100%; }
  .nhead__actions .btn { flex: 1 1 auto; }
  .npage { padding-inline: 0; }
  .nhead { padding-inline: var(--space-4); }
}

/* ================= Mijn taken (FO 4.6) ================= */
.mytasks__tools { justify-content: flex-start; gap: var(--space-4); }
.mytask { align-items: flex-start; }
.mytask__main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mytask__where {
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.taskrow__due.is-soon { color: var(--status-info); }
.taskgroup__name.is-late { color: var(--status-bad); }

/* ================= Taken en Agenda over alle projecten (FO 4.6) ================= */
/* Per project een kop met de klant en het project; de doelen eronder zijn
   dezelfde grijze koppen als op het tabblad Taken van het project. */
.overview__views { margin: 0; }
.overview__notice {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-hairline);
}
.overview__project { border-bottom: 1px solid var(--border-light); }
.overview__projecthead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-2);
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-hairline);
}
.overview__projectname {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  cursor: pointer;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overview__projectname:hover { text-decoration: underline; }
.overview__project .taskgroup__head { padding-left: var(--space-5); }
.overview__project .taskgroup:last-child { border-bottom: 0; }
.mytask--sub { padding-left: var(--space-6); }
.overview__close { display: none; }

/* Bord en agenda hebben de breedte nodig: zonder geopende taak de volle
   breedte, met een taak rechts een smaller paneel. */
.nsplit--wide { grid-template-columns: minmax(0, 1fr); }
.nsplit--wide:not(.has-detail) .ndetail { display: none; }
.nsplit--wide:not(.has-detail) .nlist { border-right: 0; }
.nsplit--wide.has-detail { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.nsplit--wide .overview__close { display: inline-flex; }

/* Op het bord en in de week: bij welke klant en welk project een kaart hoort. */
.taskcard__where {
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* De lijst van Taken (8 oktober 2026, naar het voorbeeld uit THINK). Zonder
   geopende taak de volle breedte, met elke taak op één regel: links de titel,
   rechts klant / project / doel, deadline en eigenaar. Met een taak open het
   gesplitste scherm zoals eerder: de lijst links met de plek onder de titel. */
.nsplit--list:not(.has-detail) { grid-template-columns: minmax(0, 1fr); }
.nsplit--list:not(.has-detail) .ndetail { display: none; }
.nsplit--list:not(.has-detail) .nlist { border-right: 0; }
.nsplit--list .overview__close { display: inline-flex; }
.taskrow__due--none { display: none; }
@media (min-width: 901px) {
  .nsplit--list:not(.has-detail) .mytask { align-items: center; }
  .nsplit--list:not(.has-detail) .mytask__main {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .nsplit--list:not(.has-detail) .mytask__where {
    margin-left: auto;
    flex: 0 1 auto;
    max-width: 50%;
    text-align: right;
  }
  .nsplit--list:not(.has-detail) .taskrow__due { min-width: 5ch; text-align: right; }
  .nsplit--list:not(.has-detail) .taskrow__due--none { display: inline; }
}

@media (max-width: 900px) {
  .nsplit--list .overview__close { display: none; }
  .nsplit--wide.has-detail { grid-template-columns: 1fr; }
  .nsplit--wide .overview__close { display: none; }
  .overview__views { width: 100%; }
}

/* De teller achter "Taken" in het menu. */
.navlink__count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-paper);
  color: var(--text-heading);
  font-size: var(--text-xs);
  line-height: 18px;
  text-align: center;
}
.navlink__count.is-late { background: var(--status-bad-bg); color: var(--status-bad); }

/* ================= Beheer: modules, audit log, prullenbak (FO 4.1) ================= */
.modulerow { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.modulerow__text { display: grid; gap: 2px; }
.modulerow__name { color: var(--text-heading); }
.auditchanges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  font-size: var(--text-xs);
  color: var(--text-body);
  overflow-wrap: anywhere;
}

/* ================= Labels (FO 4.14) ================= */
.labelpills { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); min-width: 0; }
.labelpill {
  background: var(--surface-paper);
  color: var(--text-body);
  font-size: var(--text-xs);
  padding: 0 var(--space-2);
  white-space: nowrap;
}
.metabtn__prefix { font-size: var(--text-xs); color: var(--text-muted); }

/* ================= Takenbord en -kalender (FO 4.6) ================= */
.taskviews { margin: var(--space-3) var(--space-4) var(--space-2); }
.taskviewpane { min-width: 0; border-right: 1px solid var(--border-hairline); }
.taskviewpane > .taskpane { border-right: 0; }
/* Bord en kalender hebben ruimte nodig: zonder geopende taak de volle breedte. */
.tasksplit--wide:not(.has-detail) { grid-template-columns: minmax(0, 1fr); }
.tasksplit--wide:not(.has-detail) .taskdetail { display: none; }
.tasksplit--wide.has-detail { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.tasksplit--wide:not(.has-detail) .taskviewpane { border-right: 0; }

.taskboard {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  overflow-x: auto;
  align-items: start;
}
.taskboard__column {
  background: var(--surface-paper);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  display: grid;
  gap: var(--space-2);
  min-height: 120px;
  align-content: start;
  transition: background var(--duration-fast) var(--ease-out);
}
.taskboard__column.is-over,
.taskcal__day.is-over { background: var(--surface-tint); }
.taskboard__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1); }
.taskboard__name { color: var(--text-heading); font-weight: var(--weight-medium); flex: 1; }
.taskboard__cards { display: grid; gap: var(--space-2); }

.taskcard {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  display: grid;
  gap: var(--space-1);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.taskcard:hover { border-color: var(--border-light); }
.taskcard.is-selected { border-color: var(--text-heading); }
.taskcard.is-dragging { opacity: 0.4; }
.taskcard.is-done .taskcard__title { color: var(--text-muted); text-decoration: line-through; }
/* Te laat: ook in de maandagenda, waar alleen de titel staat. */
.taskcard--compact.is-late .taskcard__title { color: var(--status-bad); }
/* Afbreken op lettergrepen (de pagina is lang="nl"): in een smalle weekkolom
   werd "Laadsnelheid" anders "Laadsnelhei-d". */
.taskcard__title { display: flex; align-items: center; gap: var(--space-1); color: var(--text-heading); overflow-wrap: break-word; hyphens: auto; }
.taskcard__title > span { min-width: 0; }
.taskcard__meta { display: flex; align-items: center; gap: var(--space-2); }
.taskcard--compact { padding: 2px var(--space-1); font-size: var(--text-xs); min-width: 0; }
.taskcard--compact .taskcard__title { min-width: 0; }
.taskcard--compact .statusicon { width: 12px; height: 12px; flex: none; }
.taskcard--compact .taskcard__title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.taskcal__title { color: var(--text-heading); font-weight: var(--weight-medium); text-transform: capitalize; }
.taskcal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.taskcal__dayname {
  padding: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  border-bottom: 1px solid var(--border-hairline);
}
.taskcal__day {
  min-height: 96px;
  padding: var(--space-1);
  border-right: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  transition: background var(--duration-fast) var(--ease-out);
}
.taskcal__grid--week .taskcal__day { min-height: 320px; }
.taskcal__day:nth-child(7n) { border-right: 0; }
.taskcal__day.is-outside { background: var(--surface-page); }
.taskcal__day.is-outside .taskcal__date { color: var(--text-muted); }
.taskcal__date { font-size: var(--text-xs); color: var(--text-body); padding: 2px var(--space-1); }
.taskcal__day.is-today .taskcal__date {
  background: var(--text-heading);
  color: var(--text-on-dark);
  border-radius: var(--radius-pill);
  justify-self: start;
}
.taskcal__undated { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }

/* Alleen in de weeklijst op een telefoon (hieronder) zichtbaar. */
.taskcal__weekday { display: none; }

@media (max-width: 640px) {
  /* Een week op de telefoon: de dagen onder elkaar, met hun taken als kaarten
     over de volle breedte. Zeven kolommen van 50 pixels braken elke titel. */
  .taskcal__grid--week { grid-template-columns: minmax(0, 1fr); }
  .taskcal__grid--week .taskcal__dayname { display: none; }
  .taskcal__grid--week .taskcal__day { min-height: 0; border-right: 0; padding: var(--space-2) var(--space-3); }
  .taskcal__grid--week .taskcal__weekday { display: inline; margin-right: var(--space-1); text-transform: capitalize; }
  .taskcal__grid--month .taskcal__day { min-height: 64px; }
  .taskcal__grid--month .taskcard--compact .taskcard__title > span { display: none; }
}

/* Een geplakte afbeelding in een bericht of omschrijving (FO 4.8). */
.richtext__image {
  display: block;
  padding: 0;
  margin: var(--space-2) 0;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  cursor: zoom-in;
  max-width: 100%;
}
.richtext__image img { display: block; max-width: 100%; max-height: 360px; border-radius: var(--radius-sm); }
textarea[aria-busy="true"] { opacity: 0.6; }

/* ================= Assistent: chatvenster rechtsonder (FO 4.15) ================= */
/* Een ronde knop zoals de supportchat op veel websites. Navy en niet cyan:
   openen is geen primaire actie; Versturen en Importeren in het venster wel. */
.assistant {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 55;
  display: grid;
  justify-items: end;
  gap: var(--space-3);
}
.has-assistant .toasts { bottom: calc(var(--space-5) + var(--assistant-launcher-size) + var(--space-3)); }

.assistant__launcher {
  position: relative;
  width: var(--assistant-launcher-size);
  height: var(--assistant-launcher-size);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-dark);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.assistant__launcher:hover { background: var(--surface-dark-raised); }
.assistant__launcher:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.assistant__launcher .icon { width: 22px; height: 22px; }
.assistant--open .assistant__launcher { transform: scale(0.92); }
.assistant__dot {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--status-bad);
  border: 2px solid var(--surface-dark);
}

.assistant__panel {
  width: min(400px, calc(100vw - 2 * var(--space-5)));
  height: min(600px, calc(100vh - var(--topbar-height) - var(--assistant-launcher-size) - 2 * var(--space-5)));
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: assistant-in var(--duration-med) var(--ease-out);
}
@keyframes assistant-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .assistant__panel { animation: none; }
  .assistant__launcher { transition: none; }
}

.assistant__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--surface-dark);
  color: var(--text-on-dark);
}
.assistant__heading { flex: 1; min-width: 0; }
.assistant__title { font-weight: var(--weight-medium); color: var(--text-on-dark); }
.assistant__subtitle { font-size: var(--text-xs); color: var(--text-on-dark-muted); }
.assistant__head .iconbtn { color: var(--text-on-dark); }
.assistant__head .iconbtn:hover { background: var(--surface-dark-raised); color: var(--text-on-dark); }
.assistant__new { font-size: var(--text-xs); white-space: nowrap; }

.assistant__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface-page);
}
.assistant__empty { color: var(--text-body); padding: var(--space-2); }
.assistant__empty-title { font-weight: var(--weight-medium); color: var(--text-heading); margin-bottom: var(--space-2); }
.assistant__empty p { margin: 0; line-height: var(--leading-body); }
.assistant__empty .assistant__examples { margin-top: var(--space-3); }

.assistant__msg { display: grid; gap: var(--space-1); max-width: 88%; }
.assistant__msg--user { align-self: flex-end; justify-items: end; }
.assistant__msg--assistant { align-self: flex-start; justify-items: start; }
.assistant__msg--pending { opacity: 0.6; }
.assistant__meta { font-size: var(--text-xs); color: var(--text-muted); }
.assistant__bubble {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: var(--leading-body);
}
.assistant__msg--user .assistant__bubble { background: var(--surface-tint); border-color: transparent; }
.assistant__file { display: inline-flex; align-items: center; gap: var(--space-2); white-space: normal; }

.assistant__card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  width: 100%;
}
.assistant__msg:has(.assistant__card) { max-width: 100%; width: 100%; }
.assistant__card-title { font-weight: var(--weight-medium); color: var(--text-heading); }
.assistant__text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--leading-body); }
.assistant__card p { margin: 0; }
.assistant__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.assistant__small { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.assistant__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow: auto;
  border-top: 1px solid var(--border-hairline);
}
.assistant__row { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-hairline); }
.assistant__row-head { display: flex; align-items: center; gap: var(--space-2); }
.assistant__row-line { flex: none; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.assistant__row-label { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text-heading); }
.assistant__row-reason { font-size: var(--text-xs); color: var(--text-body); margin-top: var(--space-1); }

.assistant__waiting {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-body);
  background: var(--surface-paper);
  border-top: 1px solid var(--border-hairline);
}
.assistant__waiting strong { font-weight: var(--weight-medium); color: var(--text-heading); }
.assistant__pulse {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: var(--radius-pill);
  background: var(--status-warn);
  animation: assistant-pulse 1.6s var(--ease-out) infinite;
}
@keyframes assistant-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .assistant__pulse { animation: none; }
}

.assistant__form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--border-light);
  background: var(--surface-card);
}
textarea.control.assistant__input {
  flex: 1;
  min-height: 0;
  max-height: 140px;
  resize: none;
  field-sizing: content;
}
.assistant__send { padding: var(--space-3) var(--space-4); }
.assistant__attach { align-self: center; color: var(--text-heading); padding: var(--space-2); }
.assistant__attach .icon { width: 20px; height: 20px; }

/* Op een telefoon vult het venster het scherm; de knop blijft eronder. */
@media (max-width: 640px) {
  .assistant { right: var(--space-4); bottom: var(--space-4); }
  .assistant--open { inset: 0; right: 0; bottom: 0; gap: 0; }
  .assistant--open .assistant__launcher { display: none; }
  .assistant__panel {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .assistant__msg { max-width: 92%; }
  .has-assistant .toasts { right: var(--space-4); bottom: calc(var(--space-4) + var(--assistant-launcher-size) + var(--space-3)); }
}

/* ================= New Business (FO 4.3) ================= */
/* Bord of lijst over de volle breedte; een kans opent in een venster. */
.nbmain { min-width: 0; }

/* Bord: dezelfde kolommen als het takenbord, met totalen in de kop. */
.nbboard { grid-auto-columns: minmax(200px, 1fr); gap: var(--space-2); }
.nbboard .taskboard__cards { gap: var(--space-1); }
.nbboard .taskboard__column { gap: var(--space-1); }
.nbcolumn__head { display: grid; gap: 2px; }
.nbcolumn__totals { padding: 0 var(--space-1); font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Diensten en waarde naast elkaar zolang dat past. Is de waarde lang, dan
   schuift hij naar een eigen regel in plaats van de diensten weg te drukken
   tot "S…". */
.nbcard__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); min-width: 0; }
.nbcard__services { flex: 1 1 3.5em; min-width: 0; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbcard__row .nbcard__value { margin-left: auto; flex: 0 1 auto; }
/* Het fasebolletje op de kaart; een klik opent de fases (FO 4.3). */
.nbcard__head { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.nbcard__head .nbcard__company { flex: 1; min-width: 0; }
.nbcard__stage {
  flex: none;
  display: inline-flex;
  padding: 2px;
  margin: -2px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.nbcard__stage:hover, .nbcard__stage:focus-visible { background: var(--surface-paper); }
.nbstagelist { display: grid; gap: 2px; }
.nbstagelist .menuitem { width: 100%; }
.nbstagelist .menuitem.is-current { background: var(--surface-paper); color: var(--text-heading); }
.nbcolumn__empty {
  padding: var(--space-4) var(--space-2);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: center;
}
.nbcolumn--lost .nbcard { opacity: .75; }
.nbcard { gap: 2px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); }
.nbcard .labelpills { gap: 2px; }
.nbcard .labelpill { font-size: var(--text-xs); padding: 0 var(--space-1); line-height: 1.6; }
.nbcard.is-selected { border-color: var(--text-heading); }
/* Geen volgende actie of een verlopen actie: de kaart valt op (FO 4.3). */
.nbcard.is-noaction { border-left: 3px solid var(--status-warn); }
.nbcard.is-late { border-left: 3px solid var(--status-bad); }
.nbcard__company { color: var(--text-heading); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbcard__title { color: var(--text-body); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbcard__value { color: var(--text-heading); font-variant-numeric: tabular-nums; font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Op de kaart past de actie op één regel; de hele tekst staat in het venster. */
.nbcard .nbaction { display: flex; min-width: 0; }
.nbcard .nbaction > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbcard__action { color: var(--text-muted); font-size: var(--text-xs); }

.nbaction { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-body); }
.nbaction svg { flex: none; }
.nbaction--none { color: var(--status-warn); }
.nbaction--late { color: var(--status-bad); }
.nbaction__button {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 2px var(--space-1);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.nbaction__button:hover:not(:disabled) { border-color: var(--border-light); }
.nbaction__button:disabled { cursor: default; }

/* Lijst: cellen die je direct wijzigt, zonder dat ze op formuliervelden lijken
   tot je ze aanraakt. */
.nbtable td { vertical-align: middle; }
.nbtable__needs { width: 40%; }
.nbtable__value { white-space: nowrap; color: var(--text-heading); }
.nbtable .control--celltext { width: 100%; }
.nbtable tr.is-selected td { background: var(--surface-paper); }
.nbtable__open {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; text-align: left; color: var(--text-heading);
}
.nbtable__open:hover { text-decoration: underline; }
.control--cell {
  padding: 4px var(--space-2);
  border-color: transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  min-width: 120px;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.control--cell:hover:not(:disabled) { border-color: var(--border-light); }
.control--cell:focus { border-color: var(--text-heading); background: var(--surface-card); }
.control--cell.is-saved { border-color: var(--status-good); }
select.control--cell { padding-right: var(--space-6); min-width: 160px; }
.control--celltext { min-width: 220px; }
.control--money { width: 100px; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.nbmoney { display: grid; gap: 2px; justify-items: end; }
.nbmoney__row { display: flex; align-items: center; gap: var(--space-2); }
.nbmoney__label { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.nbcontact { display: grid; gap: 2px; font-size: var(--text-sm); }
.nbcontact a { color: var(--text-heading); overflow-wrap: anywhere; }

/* Diensten aanvinken. */
.nbservices { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.nbservice { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--text-heading); cursor: pointer; }

/* De kans in een venster in het midden (aangepast 9 oktober 2026). */
.nbmodal { width: min(760px, calc(100vw - var(--space-6))); max-height: calc(100vh - var(--space-8)); }
.nbmodal__inner { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.nbmodal__body { display: grid; gap: var(--space-4); padding: 0 var(--space-5) var(--space-5); overflow-y: auto; min-height: 0; }
.nbmodal .nbdetail__head { padding: var(--space-5) var(--space-5) var(--space-3); }
.nbdetail__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.nbdetail__heading { flex: 1; min-width: 0; display: grid; gap: 2px; }
.nbdetail__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--text-heading); overflow-wrap: anywhere; }
.nbdetail__company { font-size: var(--text-sm); }
.nbdetail__section { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); }
.nbmodal__body > .nbdetail__section:first-child { border-top: 0; }
.nbdetail__sectionhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.nbdetail__sectionhead h3 { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-heading); }
.nbdetail__contact { align-self: end; padding-bottom: var(--space-2); }
.nbdetail__foot { display: flex; justify-content: flex-end; }

.nbactions { display: grid; gap: var(--space-1); }
.nbactionrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}
.nbactionrow:hover { background: var(--surface-paper); }
.nbactionrow input { margin-top: 3px; }
.nbactionrow__main { display: grid; gap: 2px; min-width: 0; }
.nbactionrow__title { color: var(--text-heading); font-size: var(--text-sm); overflow-wrap: anywhere; }
.nbactionrow.is-done .nbactionrow__title { color: var(--text-muted); text-decoration: line-through; }
.nbactionrow.is-late .cell-sub { color: var(--status-bad); }

.nbnote { display: grid; gap: var(--space-2); justify-items: end; }
.nbtimeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.nbtimeline__item { display: grid; gap: 2px; padding-left: var(--space-3); border-left: 2px solid var(--border-light); }
.nbtimeline__item.is-system { border-left-color: var(--border-hairline); }
.nbtimeline__item.is-system .nbtimeline__body { color: var(--text-muted); }
.nbtimeline__meta { font-size: var(--text-xs); color: var(--text-muted); }
.nbtimeline__body { font-size: var(--text-sm); color: var(--text-heading); white-space: pre-wrap; overflow-wrap: anywhere; }
.nbdialog__divider { padding-top: var(--space-2); border-top: 1px solid var(--border-hairline); }

@media (max-width: 640px) {
  /* Op een telefoon vult het venster het scherm. */
  .nbmodal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .nbmodal__body { padding: 0 var(--space-4) var(--space-4); }
  .nbmodal .nbdetail__head { padding: var(--space-4); }
  .nbtable__needs { width: auto; }
  .nbtable .control--cell { min-width: 0; width: 100%; text-align: right; }
  .nbtable select.control--cell { width: auto; }
  .nbmoney { justify-items: end; }
}
.nbdialog__hint { margin-top: calc(-1 * var(--space-2)); }

/* Het bolletje van een fase (FO 4.3), net als bij taken: het vult zich
   naarmate de kans verder is. Kleuren uit de statustokens. */
.stageicon { flex: none; color: var(--text-muted); }
.stageicon--start { color: var(--text-muted); }
.stageicon--info { color: var(--status-info); }
.stageicon--warn { color: var(--status-warn); }
.stageicon--good { color: var(--status-good); }
.stageicon--bad { color: var(--status-bad); }
.stageicon__mark { stroke: var(--surface-card); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nbstage { display: inline-flex; align-items: center; gap: var(--space-1); }
.nbstage .control--cell { min-width: 150px; }
.nbstage--field { display: flex; gap: var(--space-2); }
.nbstage--field .control { flex: 1; min-width: 0; }

/* De kleur van een fase op de plekken waar je de status leest (FO 4.3):
   dezelfde toon als het bolletje, als lijn boven een kolom van het bord en
   als gekleurd statusvak in de lijst en in het venster. */
.nbcolumn { border-top: 3px solid var(--border-light); }
.nbcolumn--info { border-top-color: var(--status-info); }
.nbcolumn--warn { border-top-color: var(--status-warn); }
.nbcolumn--good { border-top-color: var(--status-good); }
.nbcolumn--bad { border-top-color: var(--status-bad); }
.nbstage select.control { font-weight: var(--weight-medium); }
.nbstage--info select.control { background-color: var(--status-info-bg); color: var(--status-info); border-color: transparent; }
.nbstage--warn select.control { background-color: var(--status-warn-bg); color: var(--status-warn); border-color: transparent; }
.nbstage--good select.control { background-color: var(--status-good-bg); color: var(--status-good); border-color: transparent; }
.nbstage--bad select.control { background-color: var(--status-bad-bg); color: var(--status-bad); border-color: transparent; }
/* De keuzes in de lijst zelf blijven gewone tekst. */
.nbstage select.control option { color: var(--text-heading); background: var(--surface-card); }

/* Het verloop bovenaan het venster: alle fases op een rij (FO 4.3). */
.nbtrack {
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  position: relative;
  flex: none;
  border-bottom: 1px solid var(--border-hairline);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(84px, 1fr);
  overflow-x: auto;
}
.nbtrack__step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 0 var(--space-1);
  text-align: center;
  color: var(--text-muted);
}
/* De lijn naar de volgende fase, achter de bolletjes langs. */
.nbtrack__step::before {
  content: "";
  position: absolute;
  top: 8px;
  left: calc(-50% + 12px);
  right: calc(50% + 12px);
  height: 2px;
  background: var(--border-light);
}
.nbtrack__step:first-child::before { display: none; }
.nbtrack__step.is-visited::before { background: var(--text-muted); }
.nbtrack__step.is-todo .stageicon { color: var(--border-light); }
.nbtrack__name { font-size: var(--text-xs); line-height: 1.3; }
.nbtrack__date { font-size: var(--text-xs); min-height: 1.3em; font-variant-numeric: tabular-nums; }
.nbtrack__step.is-visited .nbtrack__name { color: var(--text-heading); }
.nbtrack__step.is-current .nbtrack__name { font-weight: var(--weight-medium); }
.nbtrack__step.is-current.nbtrack__step--info .nbtrack__name { color: var(--status-info); }
.nbtrack__step.is-current.nbtrack__step--warn .nbtrack__name { color: var(--status-warn); }
.nbtrack__step.is-current.nbtrack__step--good .nbtrack__name { color: var(--status-good); }
.nbtrack__step.is-current.nbtrack__step--bad .nbtrack__name { color: var(--status-bad); }

/* De tijdlijn: elk soort regel zijn eigen kleur aan de rand. */
.nbtimeline__item.is-note { border-left-color: var(--text-heading); }
.nbtimeline__item.is-stage { border-left-color: var(--status-info); }
.nbtimeline__item.is-done { border-left-color: var(--status-good); }
.nbtimeline__item.is-proposal { border-left-color: var(--status-warn); }
.nbtimeline__item.is-stage .nbtimeline__body,
.nbtimeline__item.is-done .nbtimeline__body,
.nbtimeline__item.is-proposal .nbtimeline__body { color: var(--text-body); }

/* Uitleg en voorstel in het venster (FO 4.3). */
.nbdetail__intro { margin: calc(-1 * var(--space-2)) 0 0; font-size: var(--text-sm); }
.nbproposal { display: grid; gap: var(--space-4); }
.nbpropose {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  background: var(--surface-card);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-heading);
  font: inherit;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.nbpropose:hover, .nbpropose:focus-visible { background: var(--surface-paper); border-color: var(--text-muted); }
.nbpropose__inner { display: flex; align-items: flex-start; gap: var(--space-3); }
.nbpropose__inner svg { flex: none; margin-top: 3px; }
.nbpropose__text { display: grid; gap: 2px; min-width: 0; }
.nbpropose__title { font-weight: var(--weight-medium); }
.nbpropose__sub { font-size: var(--text-xs); color: var(--text-muted); }
.nbproposal__waiting { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.nbproposal__waitingtitle { color: var(--text-heading); font-weight: var(--weight-medium); }
.nbproposal__block { display: grid; gap: var(--space-2); min-width: 0; }
.nbproposal__label { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); }
.nbproposal__advice { margin: 0; color: var(--text-heading); white-space: pre-wrap; overflow-wrap: anywhere; }
.nbproposal__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nbproposal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-xs); }
.nbquote td { vertical-align: top; }
.nbquote__note { display: block; white-space: normal; }
.nbquote__nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.nbquote__totals { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-2); border-top: 1px solid var(--border-hairline); }
.nbquote__sum { color: var(--text-heading); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  /* Op een telefoon smallere stappen; wat niet past, schuift opzij. */
  .nbtrack { grid-auto-columns: minmax(76px, 1fr); padding: var(--space-2) var(--space-3); position: relative; }
}

@media (max-width: 640px) {
  /* Offerteregels op een telefoon: de omschrijving en de onderbouwing over de
     volle breedte, links uitgelijnd; aantal, prijs en totaal eronder als
     regels met hun kop ervoor. */
  .nbquote.table--stack tbody tr { padding-inline: 0; }
  .nbquote.table--stack tbody td.nbquote__desc { display: block; text-align: left; }
  .nbquote.table--stack tbody td.nbquote__desc::before { content: none; }
  .nbquote__desc .cell-strong { display: block; }
  /* Een tikbaar bolletje heeft op een aanraakscherm meer ruimte nodig. */
  .nbcard__stage { padding: var(--space-2); margin: calc(-1 * var(--space-2)); }
}