/* Inboxvana: Rapportage, Wachtende klanten en het bol-scorebord.
   Alleen kleuren, maten en lettertypen uit stijl.css (licht en donker); apart bestand, net als slim.css. */

/* ---------- Indeling: de zijbalk blijft staan, de pagina vult de rest ---------- */

.werkplek--desktop.werkplek--overzicht { grid-template-columns: 252px minmax(0, 1fr); }
.werkplek--tablet.werkplek--overzicht { grid-template-columns: minmax(0, 1fr); }

.overzicht { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.overzicht-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.werkplek--desktop .overzicht-scroll { margin: 10px 10px 10px 0; border-radius: 20px; background: var(--oppervlak-2); box-shadow: var(--schaduw-2); }
.werkplek--tablet .overzicht-scroll { margin: 10px; border-radius: 20px; background: var(--oppervlak-2); box-shadow: var(--schaduw-2); }
.overzicht-inhoud {
  container: overzicht / inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px;
  max-width: 1140px; margin: 0 auto; padding: 26px 28px 56px;
}
.overzicht-kop { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.overzicht-menu { margin: -2px 0 0 -8px; }
.overzicht-titels { flex: 1; min-width: 0; }
.overzicht-titel { margin: 0; font: 650 26px/1.2 var(--font-kop); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.overzicht-uitleg { margin: 6px 0 0; max-width: 66ch; color: var(--inkt-3); line-height: 1.5; }
.overzicht-actie { flex: none; display: flex; align-items: center; gap: 8px; }
.overzicht a.knop { text-decoration: none; }

/* ---------- Kaarten en kerncijfers ---------- */

.ov-kaart-kop { align-items: flex-start; }
.ov-kaart-titels { flex: 1; min-width: 0; }
.ov-kaart-actie { flex: none; margin: -2px -4px 0 auto; }

.rap-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rap-kpi { gap: 6px; }
/* Groot en rustig: het getal in de koplettering, de eenheid klein en gedempt. */
.rap-kpi-waarde {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; min-width: 0;
  font: 650 30px/1.1 var(--font-kop); letter-spacing: -0.03em; color: var(--inkt);
}
.rap-kpi-delen { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; }
.rap-kpi-deel small { margin-left: 3px; font: 600 14px/1 var(--font); letter-spacing: 0; color: var(--inkt-3); }

.rap-subkop { display: flex; align-items: center; gap: 8px; margin: 0; font: 650 14px/1.3 var(--font); color: var(--inkt-2); }
.rap-subkop-teller { padding: 1px 7px; border-radius: 999px; background: var(--oppervlak-3); color: var(--inkt-2); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rap-leeg { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--inkt-3); }
.rap-noot { margin: 0; font-size: 12px; color: var(--inkt-3); }
.rap-knop-link { text-decoration: none; }

/* ---------- Periode en export ---------- */

.rap-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-width: 0; }
.periode { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--tabs-vlak); box-shadow: inset 0 0 0 1px var(--lijn); }
.periode-optie { position: relative; display: block; cursor: pointer; }
.periode-optie input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.periode-optie span {
  display: flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 13px; border-radius: 9px;
  color: var(--inkt-3); font: 600 13px/1 var(--font); white-space: nowrap;
  transition: background-color var(--snel), color var(--snel), box-shadow var(--snel);
}
.periode-optie:hover span { color: var(--inkt); }
.periode-optie input:checked + span { background: var(--oppervlak); color: var(--inkt); box-shadow: 0 1px 2px rgba(22, 24, 29, 0.08), 0 0 0 1px var(--lijn); }
.periode-optie input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.rap-eigen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.rap-datum { display: grid; gap: 4px; }
.rap-datum .veld-label { font-size: 12px; color: var(--inkt-3); }
.rap-datum .invoer { width: auto; min-height: 38px; padding: 6px 10px; }
.rap-eigen-fout { flex-basis: 100%; }
.rap-filter-rij { flex: 1 1 260px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.rap-bereik { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--inkt-2); }
.rap-export { flex: none; margin-left: auto; }
.rap-export-item { text-decoration: none; }

.rap-inhoud { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; transition: opacity 160ms var(--zacht); }
/* Bij een andere periode blijft het vorige beeld staan, gedimd, tot de nieuwe cijfers er zijn. */
.rap-inhoud--laden { opacity: 0.55; }
.rap-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rap-skelet { display: grid; gap: 16px; }
.rap-skelet-filter .skelet { width: min(440px, 100%); height: 38px; border-radius: 12px; }
.rap-skelet-grafiek { height: 200px; margin-top: 8px; border-radius: 12px; }

/* ---------- Grafiek: kolommen met tooltip ---------- */

.kolommen { position: relative; min-width: 0; }
.kolommen-vlak { position: relative; border-radius: 12px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.kolommen-vlak:focus-visible { outline-offset: 4px; }
.kolommen-svg { display: block; max-width: 100%; overflow: visible; }
.as-lijn { stroke: var(--lijn); stroke-width: 1; shape-rendering: crispEdges; }
.as-basis { stroke: var(--lijn-hover); stroke-width: 1; shape-rendering: crispEdges; }
.as-tekst { fill: var(--inkt-3); font: 500 11.5px var(--font); font-variant-numeric: tabular-nums; }
.as-tekst--actief { fill: var(--inkt); font-weight: 650; }
.kolom { fill: var(--merk-tekst); transition: opacity var(--snel); }
.kolommen-vlak--actief .kolom { opacity: 0.38; }
.kolommen-vlak--actief .kolom--actief { opacity: 1; }
.kolom-band { fill: var(--hover); }
.kolom-waarde { fill: var(--inkt-2); font: 650 12px var(--font); font-variant-numeric: tabular-nums; }
.kolommen-leeg { position: absolute; inset: 0 0 28px 30px; display: grid; place-items: center; margin: 0; font-size: 13.5px; color: var(--inkt-3); pointer-events: none; }
.grafiek-tip {
  position: absolute; top: 0; z-index: 2;
  min-width: 170px; max-width: 240px; padding: 10px 12px;
  border-radius: 12px; background: var(--oppervlak); box-shadow: var(--schaduw-3);
  pointer-events: none; animation: opkomen 120ms var(--zacht);
}
.grafiek-tip--links { translate: -100% 0; }
.grafiek-tip--midden { translate: -50% 0; }
.grafiek-tip-titel { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--inkt-2); }
.grafiek-tip-rij { display: flex; align-items: center; gap: 6px; margin: 3px 0 0; font-size: 12.5px; color: var(--inkt-3); white-space: nowrap; }
.grafiek-tip-rij strong { font-size: 13.5px; font-weight: 700; color: var(--inkt); font-variant-numeric: tabular-nums; }
.grafiek-tip-rij--extra { padding-left: 18px; }
.grafiek-tip-rij--extra strong { font-size: 12.5px; font-weight: 650; color: var(--inkt-2); }
.grafiek-tip-sleutel { flex: none; width: 12px; height: 3px; border-radius: 2px; background: var(--merk-tekst); }

/* ---------- Tabellen en balkjes ---------- */

.ov-kaart .tabel-schuif { margin: -4px -20px -10px; }
.rap-tabel th:first-child, .rap-tabel td:first-child { padding-left: 20px; }
.rap-tabel th:last-child, .rap-tabel td:last-child { padding-right: 20px; }
.rap-tabel tbody th { min-width: 136px; padding: 10px; border-bottom: 1px solid var(--lijn); font-size: 13.5px; font-weight: 500; color: var(--inkt); text-align: left; vertical-align: middle; white-space: nowrap; }
.rap-tabel--tijd tbody th { min-width: 0; }
.rap-tabel tbody tr:last-child th { border-bottom: 0; }
.rap-tabel thead th { white-space: normal; vertical-align: bottom; }
.rap-tabel--tijd tbody th { font-weight: 500; }
.rap-kol-balk { width: 28%; min-width: 120px; }
.rap-naam { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rap-naam .nav-stip { margin: 0 3px; }
.rap-naam-tekst { display: grid; min-width: 0; }
.rap-naam-regel { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rap-naam .tabel-naam { max-width: 220px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rap-naam .beheer-jij { flex: none; margin-left: 0; }
.rap-geen { color: var(--inkt-4); }
.balkje-cel { display: flex; align-items: center; gap: 10px; min-width: 0; }
.balkje-getal { min-width: 2.6ch; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.balkje { flex: 1; min-width: 36px; max-width: 180px; height: 8px; }
.balkje span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--merk-tekst); }

/* Telefoon: per kanaal en per medewerker als rijen met cijfers in plaats van een tabel. */
.rap-rijen { list-style: none; display: grid; margin: 0; padding: 0; }
.rap-rij { display: grid; gap: 10px; padding: 12px 0; border-top: 1px solid var(--lijn); }
.rap-rij:first-child { padding-top: 2px; border-top: 0; }
.rap-rij:last-child { padding-bottom: 0; }
.rap-feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.rap-feiten--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rap-feit { display: grid; gap: 2px; min-width: 0; }
.rap-feit dt { font-size: 12px; color: var(--inkt-3); }
.rap-feit dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--inkt); font-variant-numeric: tabular-nums; }
.rap-feit .balkje-getal { min-width: 0; text-align: left; }

/* ---------- Tevredenheid ---------- */

.csat { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px 36px; align-items: start; }
.csat-score { display: grid; gap: 12px; align-content: start; min-width: 0; }
.csat-getal, .bol-getal { display: flex; align-items: baseline; gap: 3px; margin: 0; font: 650 40px/1 var(--font-kop); letter-spacing: -0.03em; color: var(--inkt); }
.csat-getal small, .bol-getal small { font: 600 18px/1 var(--font); letter-spacing: 0; color: var(--inkt-3); }
.csat-getal-tekst, .bol-getal-tekst { margin-left: 8px; font: 600 14px/1 var(--font); letter-spacing: 0; color: var(--inkt-3); }
.csat-sub { margin: -4px 0 0; font-size: 13px; color: var(--inkt-3); }
.verdeling { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; }
.verdeling-deel { flex: 1 1 0; min-width: 4px; }
.verdeling-deel--goed { background: var(--groen); }
.verdeling-deel--neutraal { background: var(--inkt-4); }
.verdeling-deel--slecht { background: var(--rood); }
.verdeling-leeg { flex: 1; background: var(--oppervlak-3); }
.verdeling-legenda { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.verdeling-legenda li { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 13.5px; color: var(--inkt-2); }
.legenda-stip { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.legenda-icoon { color: var(--inkt-3); }
.legenda-naam { flex: 1; min-width: 0; }
.legenda-getal { font-weight: 650; color: var(--inkt); font-variant-numeric: tabular-nums; }
.legenda-pct { min-width: 3.6em; text-align: right; color: var(--inkt-3); font-variant-numeric: tabular-nums; }

.csat-opmerkingen { display: grid; gap: 12px; align-content: start; min-width: 0; }
.opmerkingen { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
/* Eén kolom die nooit breder wordt dan de kaart. Zonder dit rekt de impliciete kolom op tot de breedte van de langste tekst die niet
   mocht afbreken (een onderwerp of naam met nowrap) en steekt de hele opmerking uit de kaart: op 320 px schuift de pagina dan
   zijwaarts. Wat te lang is breekt nu af (ook een URL of een lang woord), in plaats van met een beletselteken weg te vallen. */
.opmerking { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--oppervlak-2); box-shadow: inset 0 0 0 1px var(--lijn); }
.opmerking-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.opmerking-wie { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.opmerking-tijd { flex: none; font-size: 12px; color: var(--inkt-3); font-variant-numeric: tabular-nums; }
.opmerking-tekst { margin: 0; font-size: 14px; line-height: 1.55; color: var(--inkt); white-space: pre-wrap; overflow-wrap: anywhere; }
.opmerking-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 0; font-size: 12.5px; color: var(--inkt-3); overflow-wrap: anywhere; }
.opmerking-link { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; border-radius: 6px; color: var(--inkt-2); font-weight: 600; text-decoration: none; }
.opmerking-link:hover span { text-decoration: underline; text-underline-offset: 2px; }
.opmerking-link .icoon { color: var(--inkt-3); }
.oordeel { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 6px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.oordeel--goed { background: var(--groen-zacht); color: var(--groen-inkt); }
.oordeel--neutraal { background: var(--oppervlak-3); color: var(--inkt-2); }
.oordeel--slecht { background: var(--rood-zacht); color: var(--rood-inkt); }
.rap-meer { justify-self: start; }
.rap-melding-actie { margin-top: 10px; }

.rap-uitleg { background: var(--oppervlak); }
.rap-definities { margin: 0; }
.rap-definities div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 2px 16px; }
.rap-definities dt { font-size: 13.5px; font-weight: 650; }
.rap-definities dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--inkt-2); }

/* ---------- bol-scorebord ---------- */

.bol-raster { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 22px 36px; align-items: start; }
.bol-nu { display: grid; gap: 10px; align-content: start; min-width: 0; }
.bol-label { margin: 0; font: 600 12.5px/1.3 var(--font); color: var(--inkt-3); }
.meter { position: relative; height: 10px; border-radius: 999px; background: var(--oppervlak-3); }
.meter-vulling { display: block; height: 100%; border-radius: 999px; background: var(--groen); transition: width 400ms var(--zacht); }
.meter--goed { background: var(--groen-zacht); }
.meter--let-op { background: var(--amber-zacht); }
.meter--let-op .meter-vulling { background: var(--amber-stip); }
.meter--fout { background: var(--rood-zacht); }
.meter--fout .meter-vulling { background: var(--rood); }
.meter--leeg .meter-vulling { background: var(--inkt-4); }
/* De norm (90%) als streepje met een ring in de kleur van de kaart. */
.meter-norm { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--inkt-2); box-shadow: 0 0 0 2px var(--oppervlak); }
.meter--klein { height: 8px; }
.meter--klein .meter-norm { top: -3px; bottom: -3px; }
.bol-norm { position: relative; height: 14px; margin: -4px 0 0; font-size: 11.5px; color: var(--inkt-3); }
.bol-norm span { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; }
.bol-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.bol-stand-uitleg { font-size: 13px; line-height: 1.4; color: var(--inkt-2); }
.stand { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 7px; border-radius: 999px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.stand--goed { background: var(--groen-zacht); color: var(--groen-inkt); }
.stand--let-op { background: var(--amber-zacht); color: var(--amber-inkt); }
.stand--fout { background: var(--rood-zacht); color: var(--rood-inkt); }
.stand--leeg { background: var(--oppervlak-3); color: var(--inkt-2); }
.bol-feiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; }
.bol-feiten div { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--oppervlak-2); box-shadow: inset 0 0 0 1px var(--lijn); }
.bol-feiten dt { font-size: 11.5px; color: var(--inkt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bol-feiten dd { margin: 0; font-size: 16px; font-weight: 650; color: var(--inkt); font-variant-numeric: tabular-nums; }
.bol-feiten .bol-feit--laat { color: var(--rood); }

.bol-weken { display: grid; gap: 8px; align-content: start; min-width: 0; }
.bol-weeklijst { list-style: none; display: grid; margin: 0; padding: 0; }
.bol-week {
  display: grid; grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(0, 1.5fr);
  align-items: center; gap: 6px 20px; padding: 11px 0; border-top: 1px solid var(--lijn);
}
.bol-week:first-child { padding-top: 4px; border-top: 0; }
.bol-week-kop { display: grid; gap: 1px; min-width: 0; }
.bol-week-naam { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; font-weight: 650; }
.bol-week-nu { padding: 1px 7px; border-radius: 999px; background: var(--merk-zacht); color: var(--merk-tekst); font-size: 11px; font-weight: 650; }
.bol-week-data { font-size: 12.5px; color: var(--inkt-3); }
.bol-week-meter { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bol-week-meter .meter { flex: 1; }
.bol-week-pct { min-width: 3.6em; text-align: right; font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.bol-week-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-width: 0; }
.bol-week-sub { font-size: 12.5px; color: var(--inkt-3); }

/* ---------- Wachtende klanten ---------- */

.wacht-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* Even hoge tegels: het getal onderaan, ook als een label over twee regels loopt. */
.wacht-cijfer { align-content: space-between; }
.wacht-cijfer--laat .rap-kpi-waarde { color: var(--rood); }
.wacht-groep { display: grid; gap: 10px; min-width: 0; }
.wacht-groep-titel { display: flex; align-items: center; gap: 8px; margin: 6px 2px 0; font: 650 16px/1.3 var(--font-kop); letter-spacing: -0.01em; }
.wacht-groep-teller { padding: 2px 8px; border-radius: 999px; background: var(--oppervlak-3); color: var(--inkt-2); font: 600 12px/1.2 var(--font); font-variant-numeric: tabular-nums; }
.wacht-lijst { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.wacht-rij {
  display: grid;
  grid-template-columns: 172px 30px minmax(0, 1fr) minmax(100px, 140px) minmax(120px, 170px);
  grid-template-areas:
    "status avatar klant     eigenaar sinds"
    "status avatar onderwerp eigenaar sinds"
    "status avatar meta      eigenaar sinds";
  align-items: center; column-gap: 16px; row-gap: 2px;
  padding: 12px 16px; border-radius: 14px;
  background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn), var(--schaduw-1);
  color: inherit; text-decoration: none;
  transition: box-shadow var(--snel), background-color var(--snel);
}
.wacht-rij:hover { box-shadow: inset 0 0 0 1px var(--lijn-hover), var(--schaduw-1); }
.wacht-rij:focus-visible { outline-offset: 2px; }
.wacht-status {
  grid-area: status; justify-self: start;
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  height: 28px; padding: 0 10px 0 8px; border-radius: 9px;
  font-size: 12.5px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.wacht-status--laat { background: var(--rood-zacht); color: var(--rood-inkt); }
.wacht-status--bijna { background: var(--amber-zacht); color: var(--amber-inkt); }
.wacht-status--op-tijd { background: var(--oppervlak-3); color: var(--inkt-2); }
.wacht-avatar { grid-area: avatar; }
.wacht-klant { grid-area: klant; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
/* De naam gaat voor: eerst wordt het e-mailadres ingekort. */
.wacht-naam { flex: none; max-width: 100%; font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wacht-email { flex: 1 1 0; min-width: 0; font-size: 12.5px; color: var(--inkt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wacht-onderwerp { grid-area: onderwerp; min-width: 0; font-size: 13.5px; color: var(--inkt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wacht-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; margin-top: 3px; font-size: 12px; color: var(--inkt-3); }
.wacht-kanaal { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.wacht-chip { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--oppervlak-3); color: var(--inkt-2); font-size: 11.5px; font-weight: 600; }
.wacht-chip--hoog { padding-left: 4px; background: var(--amber-zacht); color: var(--amber-inkt); }
.wacht-eigenaar { grid-area: eigenaar; display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--inkt-2); }
.wacht-eigenaar > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wacht-niemand { color: var(--inkt-3); }
.wacht-sinds { grid-area: sinds; justify-self: end; font-size: 12.5px; color: var(--inkt-3); text-align: right; font-variant-numeric: tabular-nums; }
.wacht-vernieuw.is-bezig .icoon { animation: draai 900ms linear infinite; }
.wacht-meer { margin-top: 2px; }
.wacht-rij--skelet { display: flex; align-items: center; gap: 18px; }
.wacht-skelet-tekst { flex: 1; display: grid; gap: 9px; }

/* ---------- Zijbalk: teller van te late klanten ---------- */

.nav-teller--laat { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--rood-zacht); text-align: center; }
.nav-teller.nav-teller--laat, .nav-item--actief .nav-teller.nav-teller--laat { color: var(--rood-inkt); }

/* ---------- Smallere pagina (tablet, kleine laptop) ---------- */

@container overzicht (max-width: 980px) {
  .rap-raster { grid-template-columns: minmax(0, 1fr); }
}
@container overzicht (max-width: 860px) {
  .bol-raster, .csat { grid-template-columns: minmax(0, 1fr); }
  .wacht-rij {
    grid-template-columns: 164px 30px minmax(0, 1fr) auto;
    grid-template-areas:
      "status avatar klant     sinds"
      "status avatar onderwerp sinds"
      "status avatar meta      eigenaar";
  }
  .wacht-eigenaar { justify-self: end; }
}
@container overzicht (max-width: 640px) {
  .rap-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bol-week { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bol-week-voet { grid-column: 1 / -1; }
  .rap-definities div { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Telefoon ---------- */

@media (max-width: 760px) {
  .overzicht-inhoud { gap: 14px; padding: 0 12px calc(28px + env(safe-area-inset-bottom)); }
  .overzicht-kop {
    position: sticky; top: 0; z-index: 3; align-items: center;
    margin: 0 -12px; padding: calc(6px + env(safe-area-inset-top)) 8px 6px 6px; background: var(--canvas);
  }
  .overzicht-menu { margin: 0; }
  .overzicht-titel { font-size: 22px; line-height: 44px; }
  .overzicht-uitleg--los { margin: -10px 0 0; font-size: 14px; }

  .rap-kpis, .wacht-cijfers { gap: 8px; }
  .rap-kpi, .wacht-cijfer { padding: 14px; }
  .wacht-cijfer { padding: 12px; }
  .wacht-cijfer .kpi-label { font-size: 12px; line-height: 1.3; }
  .rap-kpi-waarde { font-size: 25px; }
  .rap-kpi-deel small { font-size: 13px; }

  .periode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .periode-optie span { height: 44px; font-size: 14.5px; }
  .rap-eigen { width: 100%; }
  .rap-datum { flex: 1 1 130px; }
  .rap-datum .invoer { width: 100%; min-height: 44px; }
  .rap-filter-rij { flex-basis: 100%; }

  .ov-kaart .tabel-schuif { margin: -4px -16px -10px; }
  .rap-tabel th:first-child, .rap-tabel td:first-child { padding-left: 16px; }
  .rap-tabel th:last-child, .rap-tabel td:last-child { padding-right: 16px; }
  .ov-kaart-actie { margin: -8px -8px 0 auto; }

  .csat-getal, .bol-getal { font-size: 36px; }
  .verdeling-legenda li { min-height: 34px; font-size: 14.5px; }
  .opmerking-link { min-height: 44px; }
  .bol-feiten div { padding: 8px; }
  .bol-week { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .wacht-rij {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "status    sinds"
      "klant     klant"
      "onderwerp onderwerp"
      "meta      eigenaar";
    row-gap: 4px; padding: 12px;
  }
  .wacht-avatar { display: none; }
  .wacht-status { margin-bottom: 4px; }
  .wacht-sinds-wacht { display: none; }
  .wacht-email { display: none; }
  .wacht-onderwerp { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .wacht-eigenaar { justify-self: end; align-self: end; }
  .wacht-groep-titel { margin-top: 4px; }
}

@media (max-width: 359px) {
  .bol-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}