/* support.css — Meldingen (bouwspec SUPPORT §2.1, fase S1).

   Kleurkeuze: rood (terra-d) is hier voorbehouden aan wat écht klem zit —
   geen woning gekoppeld, een klant die na het sluiten zegt dat het niet
   opgelost is, en een verlopen reactienorm. Alles wat alleen aandacht
   vraagt is amber. De WIP-limiet kleurt amber en niet rood: hij is een
   signaal, geen blokkade (§2.1).

   Dit scherm is breder dan de moduleregel van 1240px omdat het een bord
   met vijf kolommen én het dossier naast elkaar draagt — de vastgelegde
   uitzondering voor borden. Alleen tokens, geen losse hex of schaduw. */

.sup-wortel { max-width: 1360px; margin: 0 auto; width: 100%; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 14px; }

.sup-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sup-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.sup-kicker { font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--c-ink-3); margin: 0; }
.sup-lead { margin: 6px 0 0; max-width: 64ch; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); }
.sup-regelset { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3);
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px;
  padding: 5px 11px; white-space: nowrap; }

/* ---- signaalstrip: één regel per signaal ---- */
.sup-sig { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  background: var(--c-paneel); overflow: hidden; }
.sup-sig.is-goed { background: var(--c-groen-t); border-color: var(--c-groen);
  padding: 11px 14px; font-size: .78rem; color: var(--c-ink-2); }
.sup-sig.is-goed b { color: var(--c-ink); }
.sup-sigkop { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; background: none; border: 0; padding: 10px 14px; cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 700; color: var(--c-ink-2); text-align: left; }
.sup-caret { color: var(--c-ink-3); }
.sup-sigrijen { display: flex; flex-direction: column; border-top: var(--lijndikte) solid var(--c-lijn); }
.sup-sigrij { display: grid; grid-template-columns: 12px 26px minmax(0, 1fr) auto; align-items: center;
  gap: 10px; padding: 9px 14px; background: none; border: 0; border-top: var(--lijndikte) solid var(--c-lijn);
  cursor: pointer; font: inherit; font-size: .76rem; color: var(--c-ink-2); text-align: left;
  transition: background 160ms ease; }
.sup-sigrij:first-child { border-top: 0; }
.sup-sigrij:hover { background: var(--c-paneel-2); }
.sup-sigrij b { font-family: var(--font-mono); color: var(--c-ink); }
.sup-bol { width: 8px; height: 8px; border-radius: 99px; background: var(--c-lijn); }
.sup-sigrij.is-stop .sup-bol { background: var(--c-terra-d); }
.sup-sigrij.is-let .sup-bol { background: var(--c-amber); }
.sup-nrs { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3); white-space: nowrap; }

/* ---- filters + weergave-schakelaar ---- */
.sup-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.sup-schakel { display: inline-flex; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: 99px; overflow: hidden; background: var(--c-paneel); }
.sup-sch { border: 0; background: none; padding: 7px 16px; font: inherit; font-size: .74rem;
  font-weight: 700; color: var(--c-ink-3); cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.sup-sch.is-aan { background: var(--c-groen); color: #fff; }
.sup-vld { display: flex; flex-direction: column; gap: 4px; font-size: .64rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); font-weight: 700; }
.sup-vld input, .sup-vld select { font: inherit; font-size: .78rem; text-transform: none;
  letter-spacing: 0; font-weight: 500; color: var(--c-ink); padding: 7px 10px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff; min-width: 170px; }
.sup-vld input[type="search"] { min-width: 260px; }

/* ---- het vlak: links de lijst of het bord, rechts het dossier ---- */
.sup-vlak { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.sup-vlak.is-open { grid-template-columns: minmax(0, 1fr) 440px; }
@media (max-width: 1180px) { .sup-vlak.is-open { grid-template-columns: minmax(0, 1fr); } }
.sup-links { min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.sup-hoofd { margin: 6px 0 0; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); font-weight: 700; }
.sup-niets { font-size: .74rem; color: var(--c-ink-3); margin: 4px 0; }
.sup-lijst { display: flex; flex-direction: column; gap: 8px; }

/* één rij per melding — links de ernstkleur, rechts de klok */
.sup-rij { display: grid; align-items: center; gap: 12px; width: 100%; text-align: left;
  grid-template-columns: 22px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.3fr) 128px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 10px 14px; cursor: pointer; font: inherit;
  box-shadow: var(--schaduw-tegel); transition: border-color 160ms ease; }
.sup-rij:hover { border-color: var(--c-groen); }
.sup-rij.is-gekozen { border-color: var(--c-groen); background: var(--c-groen-t); }
.sup-rij.is-goed { border-left-color: var(--c-groen); }
.sup-rij.is-let  { border-left-color: var(--c-amber); }
.sup-rij.is-stop { border-left-color: var(--c-terra-d); }
.sup-rij.is-rust { border-left-color: var(--c-lijn); }
.sup-soortbol { font-size: .9rem; color: var(--c-ink-3); text-align: center; }
.sup-cel { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .8rem; color: var(--c-ink); }
.sup-cel b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-cel em { font-style: normal; font-size: .68rem; color: var(--c-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-leeg { font-style: normal; color: var(--c-amber); }
.sup-klok { display: flex; flex-direction: column; gap: 2px; text-align: right;
  font-family: var(--font-mono); font-size: .72rem; color: var(--c-ink); }
.sup-klok em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
@media (max-width: 1080px) {
  .sup-rij { grid-template-columns: 22px minmax(0, 1fr) 110px; }
  .sup-rij .sup-kanaal, .sup-rij .sup-eig { display: none; }
}

/* ---- het bord: vijf fasen, WIP als signaal ---- */
.sup-bord { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr);
  gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.sup-kolom { display: flex; flex-direction: column; gap: 8px; min-width: 0;
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 10px; }
.sup-kolom > header { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .74rem; }
.sup-wip { font-family: var(--font-mono); font-size: .64rem; color: var(--c-ink-3);
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 2px 8px; background: #fff; }
.sup-wip.is-over { color: var(--c-amber); border-color: var(--c-amber); background: var(--c-amber-t); }
.sup-kolom.is-vol { border-color: var(--c-amber); }
.sup-wipuitleg { margin: 0; font-size: .66rem; line-height: 1.5; color: var(--c-ink-3); }
.sup-kaart { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 9px 11px; cursor: pointer; font: inherit; box-shadow: var(--schaduw-tegel);
  transition: border-color 160ms ease; }
.sup-kaart:hover { border-color: var(--c-groen); }
.sup-kaart.is-gekozen { border-color: var(--c-groen); background: var(--c-groen-t); }
.sup-kaartkop { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: .62rem; color: var(--c-ink-3); }
.sup-kaart b { font-size: .76rem; line-height: 1.4; color: var(--c-ink); }
.sup-kaart em { font-style: normal; font-size: .68rem; color: var(--c-ink-2); }
.sup-kaartklok { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3); }
.sup-kaartklok.is-stop { color: var(--c-terra-d); }
.sup-kaartklok.is-let { color: var(--c-amber); }

/* ---- het dossier: de rechterhelft, geen tweede scherm ---- */
.sup-dossier { display: flex; flex-direction: column; gap: 12px; min-width: 0;
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 16px 18px; }
.sup-dossier.is-leeg { font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); }
.sup-uitleg { margin: 0; font-size: .7rem; line-height: 1.6; color: var(--c-ink-3); }
.sup-doskop h2 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin: 4px 0 0; line-height: 1.35; }
.sup-dossub { margin: 4px 0 0; font-size: .72rem; color: var(--c-ink-2); }
.sup-rood { color: var(--c-terra-d); font-weight: 700; }

.sup-watnu { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff; }
.sup-watnu.is-stop { background: var(--c-terra-t); border-color: var(--c-terra-d); }
.sup-watnu.is-let { background: var(--c-amber-t); border-color: var(--c-amber); }
.sup-watnu b { font-size: .82rem; }
.sup-watnu span { font-size: .72rem; line-height: 1.55; color: var(--c-ink-2); }

.sup-feiten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff; overflow: hidden; }
.sup-feit { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px;
  padding: 7px 12px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .74rem; }
.sup-feit:first-child { border-top: 0; }
.sup-feit span { color: var(--c-ink-3); }
.sup-feit b { font-weight: 600; color: var(--c-ink); word-break: break-word; }

.sup-blok { display: flex; flex-direction: column; gap: 8px; }
.sup-blok h3 { font-size: .78rem; font-weight: 800; margin: 0; }
.sup-blokkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.sup-wissel { display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff; }
.sup-wissel .sup-vld input, .sup-wissel .sup-vld select { min-width: 0; width: 100%; }

.sup-tijdlijn { list-style: none; margin: 0; padding: 0 0 0 14px; display: flex;
  flex-direction: column; gap: 10px; border-left: var(--lijndikte) solid var(--c-lijn); }
.sup-tijdlijn li { display: flex; flex-direction: column; gap: 2px; position: relative;
  font-size: .74rem; line-height: 1.55; color: var(--c-ink); }
.sup-tijdlijn li::before { content: ""; position: absolute; left: -18px; top: 6px;
  width: 7px; height: 7px; border-radius: 99px; background: var(--c-lijn); }
.sup-tijdlijn li.is-in::before { background: var(--c-groen); }
.sup-tijdlijn li.is-uit::before { background: var(--c-ink-3); }
.sup-tijdlijn li.is-escalatie::before { background: var(--c-terra-d); }
.sup-tlkop { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3); }

.sup-audit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sup-audit li { font-size: .72rem; line-height: 1.5; color: var(--c-ink-2); }
.sup-audit b { color: var(--c-ink); }
.sup-audit em { display: block; font-style: normal; font-family: var(--font-mono);
  font-size: .6rem; color: var(--c-ink-3); }

/* ═══ S2 · de handelingen op een melding ════════════════════════════

   Zeven knoppen op een rij, en één paneel tegelijk eronder. De knoppen
   zijn bewust klein en gelijk: alleen wat nú het meest voor de hand ligt
   (oppakken, of het eerste antwoord) krijgt de primaire vorm. */
.sup-acties { display: flex; flex-wrap: wrap; gap: 6px; }
.sup-acties .bs-knop.is-aan { border-color: var(--c-groen); }

.sup-paneel { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border: var(--lijndikte) solid var(--c-groen); border-radius: var(--radius);
  background: var(--c-paneel); }
.sup-paneelkop { margin: 0; font-size: .82rem; font-weight: 800; }
.sup-form { display: flex; flex-direction: column; gap: 10px; }
.sup-form .bs-knop { align-self: flex-start; }
.sup-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }

/* zoekresultaten bij «woning koppelen»: één regel per adres, klikbaar */
.sup-treffers { display: flex; flex-direction: column; gap: 4px; }
.sup-treffer { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: center; gap: 10px; text-align: left; font: inherit; font-size: .74rem;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 8px 12px; cursor: pointer; transition: border-color 160ms ease; }
.sup-treffer:hover { border-color: var(--c-groen); }
.sup-treffer em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }

@media (max-width: 1080px) {
  .sup-treffer { grid-template-columns: minmax(0, 1fr) auto; }
  .sup-treffer > span:nth-child(2) { display: none; }
}

/* ═══ S3 · de intake ════════════════════════════════════════════════

   Drie stappen in een overlay. Bewust een modaal en geen apart scherm:
   de intake gebeurt met een klant aan de lijn, en dan wil je de lijst
   erachter kunnen laten staan. */
.sup-kopacties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sup-overlay { position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: flex-start; justify-content: center; padding: 40px 20px;
  background: color-mix(in srgb, var(--c-ink) 42%, transparent); overflow-y: auto; }
.sup-modaal { width: min(940px, 100%); display: flex; flex-direction: column;
  background: var(--c-paneel-2, #fff); border-radius: var(--radius);
  border: var(--lijndikte) solid var(--c-lijn); box-shadow: var(--schaduw-tegel); }
.sup-modkop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.sup-modkop > b { font-size: .92rem; }
.sup-stappen { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0;
  font-size: .68rem; color: var(--c-ink-3); }
.sup-stappen li.is-nu { color: var(--c-ink); font-weight: 800; }
.sup-stappen li.is-klaar { color: var(--c-groen-d); }
.sup-modkop .bs-knop { margin-left: auto; }
.sup-modlijf { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.sup-modtitel { margin: 0; font-size: 1rem; font-weight: 800; }
.sup-modvoet { display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-top: var(--lijndikte) solid var(--c-lijn); }
.sup-vul { flex: 1; }

.sup-woningkaart { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border: var(--lijndikte) solid var(--c-groen); border-radius: var(--radius); background: var(--c-groen-t); }
.sup-woningkaart .sup-feiten { background: #fff; }
.sup-woningkaart .bs-knop { align-self: flex-start; }
.sup-feit b em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); font-weight: 500; }

.sup-normregel { font-size: .74rem; color: var(--c-ink-2); padding: 8px 12px;
  background: var(--c-paneel); border-radius: var(--radius); }
.sup-vink { display: flex; align-items: flex-start; gap: 8px; font-size: .78rem; line-height: 1.5; }
.sup-link { background: none; border: 0; padding: 0; font: inherit; color: var(--c-groen-d);
  text-decoration: underline; cursor: pointer; }
.sup-zacht { color: var(--c-ink-3); }

@media (max-width: 720px) {
  .sup-overlay { padding: 12px; }
  .sup-stappen { display: none; }
}

/* ═══ S4 · besluiten ════════════════════════════════════════════════ */
.sup-peillijst { display: flex; flex-direction: column; gap: 6px; }
.sup-besluitrij { display: grid; align-items: baseline; gap: 4px 12px;
  grid-template-columns: minmax(0, 160px) 90px minmax(0, 1fr);
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 8px 12px; font-size: .74rem; }
.sup-besluitrij em { grid-column: 1 / -1; font-style: normal; font-family: var(--font-mono);
  font-size: .6rem; color: var(--c-ink-3); }
@media (max-width: 900px) {
  .sup-besluitrij { grid-template-columns: minmax(0, 1fr) 80px; }
  .sup-besluitrij > span:last-of-type { grid-column: 1 / -1; }
}

/* ═══ S5 · de twee handtekeningen ═══════════════════════════════════

   Naast elkaar, want dat is de vraag: wie heeft getekend en wie nog
   niet. Een gezette handtekening krijgt de groene rand; een lege blijft
   neutraal — dit is geen blokkade maar een stap die nog moet. */
.sup-handtekeningen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.sup-handtekening { display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 12px; }
.sup-handtekening.is-gezet { border-color: var(--c-groen); background: var(--c-groen-t); }
.sup-hkop { font-size: .72rem; font-weight: 800; }
.sup-handtekening em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.sup-handtekening b { font-size: .76rem; color: var(--c-groen-d); }

.sup-chip { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3);
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.sup-chip.is-goed { color: var(--c-groen-d); border-color: var(--c-groen); background: var(--c-groen-t); }
.sup-chip.is-let { color: var(--c-amber); border-color: var(--c-amber); background: var(--c-amber-t); }

/* ═══ criterium 12 · de bevroren factuur ════════════════════════════
   Amber, niet rood: er is niets kapot, er staat iets stil. Rood blijft
   voor blokkades. */
.sup-geschil { padding: 12px; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); background: #fff; }
.sup-geschil.is-bevroren { border-color: var(--c-amber); background: var(--c-amber-t); }
.sup-geschil .sup-chip { border-color: var(--c-amber); color: var(--c-amber); background: #fff; }

/* ═══ de tabbenbalk van Support ═════════════════════════════════════ */
.sup-tabs { display: flex; gap: 6px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.sup-tab { padding: 8px 14px; font-size: .78rem; font-weight: 700; color: var(--c-ink-3);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 160ms ease, border-color 160ms ease; }
.sup-tab:hover { color: var(--c-ink); }
.sup-tab.is-aan { color: var(--c-ink); border-bottom-color: var(--c-groen); }

/* ═══ S6 · faalkosten en verhaal ════════════════════════════════════

   De balk toont de verhouding, niet het bedrag — dat staat ernaast in
   cijfers. Wie de verdeling ziet weet met wie hij het gesprek moet
   voeren; wie alleen het totaal ziet, weet dat niet. */
.sup-balken { display: flex; flex-direction: column; gap: 8px; }
.sup-balkrij { display: grid; align-items: center; gap: 4px 12px;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 90px 130px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 9px 12px; font-size: .76rem; }
.sup-balklabel { display: flex; flex-direction: column; }
.sup-balklabel em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.sup-balk { height: 8px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; }
.sup-balk i { display: block; height: 100%; border-radius: 99px; background: var(--c-terra); }
.sup-balksub { font-size: .68rem; color: var(--c-ink-3); }
.sup-subs { grid-column: 1 / -1; font-style: normal; font-size: .64rem; color: var(--c-ink-3); }

.sup-betalers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sup-betaler { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  background: var(--c-paneel); border-radius: var(--radius); font-size: .74rem; }
.sup-betaler b { font-size: .92rem; }
.sup-betaler em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }

.sup-verhaalrij { display: grid; align-items: center; gap: 6px 12px;
  grid-template-columns: minmax(0, 1.4fr) 90px 110px minmax(0, 1.6fr) 130px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 9px 12px; font-size: .76rem; }
.sup-verhaalrij.is-betwist { border-left-color: var(--c-amber); }
.sup-verhaalrij.is-verrekend { border-left-color: var(--c-groen); }
.sup-verhaalrij.is-afgeboekt { border-left-color: var(--c-terra-d); }
.sup-verhaalreden { font-size: .7rem; color: var(--c-ink-2); }
.sup-verhaalreden em { display: block; font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.sup-verhaalform { grid-column: 1 / -1; margin-top: 6px; }
.sup-rijknoppen { display: flex; justify-content: flex-end; }

@media (max-width: 1080px) {
  .sup-balkrij { grid-template-columns: minmax(0, 1fr) 90px; }
  .sup-balkrij > .sup-balk, .sup-balkrij > .sup-balksub { display: none; }
  .sup-verhaalrij { grid-template-columns: minmax(0, 1fr) 90px 110px; }
  .sup-verhaalrij > .sup-verhaalreden { grid-column: 1 / -1; }
}

/* ═══ S7 · contracten en planbaar werk ══════════════════════════════

   De planbare regel draagt de rand als kleurcode: neutraal is «komt
   eraan», amber «te laat maar het kan nog», terra «gemist». Die laatste
   verdwijnt niet uit beeld — de verplichting verdwijnt ook niet. */
.sup-planrij { display: grid; align-items: center; gap: 6px 12px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 70px 170px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 9px 12px; font-size: .76rem; }
.sup-planrij.is-telaat { border-left-color: var(--c-amber); }
.sup-planrij.is-gemist { border-left-color: var(--c-terra-d); background: var(--c-terra-t); }
.sup-planrij.is-uitgevoerd { border-left-color: var(--c-groen); }
.sup-planrij .sup-cel em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.sup-planform { grid-column: 1 / -1; margin-top: 6px; }

@media (max-width: 1080px) {
  .sup-planrij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px; }
  .sup-planrij > .mono, .sup-planrij > .sup-cel:nth-child(2) { display: none; }
}

/* open punten uit de bouwspec: geen signaalstrip maar een notitie —
   dit is werk voor Michiel, niet voor de supportmedewerker */
.sup-openpunten { display: flex; flex-direction: column; gap: 6px;
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-left: 3px solid var(--c-amber); border-radius: var(--radius); padding: 12px 14px; }
.sup-openpunten b { font-size: .76rem; }
.sup-openpunten p { margin: 0; font-size: .74rem; line-height: 1.6; color: var(--c-ink-2); max-width: 82ch; }

/* ═══ S8 · patronen en beheer ═══════════════════════════════════════

   Een patroon is uitklapbaar: de kop zegt hoeveel en waarheen, het lijf
   toont welke meldingen het zijn. Wie alleen de kop leest weet genoeg om
   te beslissen of hij verder kijkt. */
.sup-patroon { background: #fff; border: var(--lijndikte) solid var(--c-lijn);
  border-left: 3px solid var(--c-amber); border-radius: var(--radius); overflow: hidden; }
.sup-patroon.is-opgepakt { border-left-color: var(--c-groen); }
.sup-patroonkop { display: grid; align-items: center; gap: 12px; width: 100%;
  grid-template-columns: minmax(0, 1.6fr) 50px minmax(0, 1fr) 120px;
  text-align: left; font: inherit; font-size: .78rem; background: none; border: 0;
  padding: 10px 12px; cursor: pointer; }
.sup-patroonkop:hover { background: var(--c-paneel); }
.sup-patroonkop em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.sup-patroonlijf { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.sup-patroonrij { display: grid; align-items: baseline; gap: 12px;
  grid-template-columns: 118px minmax(0, 1.6fr) minmax(0, 1fr) 70px; font-size: .74rem;
  padding: 5px 0; border-top: var(--lijndikte) solid var(--c-lijn); }

.sup-recallrij { display: grid; align-items: center; gap: 6px 12px;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 100px 110px 110px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-terra-d);
  border-radius: var(--radius); padding: 10px 12px; font-size: .76rem; }
.sup-recallrij.is-afgerond { border-left-color: var(--c-groen); }
.sup-recalladressen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.sup-adres { font-size: .64rem; background: var(--c-paneel); border-radius: 99px; padding: 2px 8px; }
/* een adres zonder melding is juist het adres dat je moet bellen */
.sup-adres.is-stil { background: var(--c-terra-t); color: var(--c-terra-d); font-weight: 700; }

.sup-beheervelden { display: flex; flex-direction: column; gap: 4px; }
.sup-beheerveld { background: #fff; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 8px 12px; }
.sup-beheerveld.is-open { border-color: var(--c-groen); }
.sup-beheerrij { display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(0, 1.6fr) 190px minmax(0, 1fr) 96px; font-size: .76rem; }
.sup-beheerlabel { display: flex; flex-direction: column; gap: 1px; }
.sup-beheerlabel em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.sup-beheerrij .bs-knop { justify-self: end; }
.sup-beheerveld .sup-form { margin-top: 10px; }

.sup-versies { display: flex; flex-wrap: wrap; gap: 6px; }
.sup-versie { font-family: var(--font-mono); font-size: .64rem; color: var(--c-ink-3);
  background: var(--c-paneel); border-radius: var(--radius); padding: 4px 9px; }
.sup-versie.is-nu { color: var(--c-groen-d); background: var(--c-groen-t); }
.sup-versie em { font-style: normal; }

.sup-sjabloonrij { display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(0, 1fr) 110px 80px; font-size: .76rem;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px 12px; }
.sup-sjabloonrij em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); }

@media (max-width: 1080px) {
  .sup-patroonkop { grid-template-columns: minmax(0, 1fr) 50px 110px; }
  .sup-patroonkop > .sup-cel:nth-child(3) { display: none; }
  .sup-patroonrij { grid-template-columns: 110px minmax(0, 1fr); }
  .sup-patroonrij > span:nth-child(3), .sup-patroonrij > span:nth-child(4) { display: none; }
  .sup-recallrij { grid-template-columns: minmax(0, 1fr) 100px 110px; }
  .sup-recallrij > .sup-cel:nth-child(2), .sup-recallrij > .sup-zacht { display: none; }
  .sup-beheerrij { grid-template-columns: minmax(0, 1fr) 150px 90px; }
  .sup-beheerrij > span:nth-child(3) { display: none; }
}