/* Spoedbord: vult altijd het scherm (geen scroll op het bord zelf).
   Gebieden links (1/5), configureerbare boxen-grid rechts (4/5), HiX-stijl. */

html, body { height: 100%; overflow: hidden; }

.spoed-wrap {
  height: calc(100vh - 44px);
  display: flex; flex-direction: column;
  padding: var(--sp-3); gap: var(--sp-3); overflow: hidden;
}

.spoed-balk { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-3); }
.zkh-kies { display: flex; align-items: center; gap: 8px; }
.zkh-kies select { min-width: 200px; font-weight: 600; }
.spoed-balk .zoek { width: 280px; position: relative; }
.spoed-balk .zoek input { padding-left: 28px; }
.spoed-balk .zoek::before { content: '🔍'; position: absolute; left: 7px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .5; }
.spoed-balk .spacer { flex: 1; }

/* Layout 1/5 + 4/5, vult de resterende hoogte */
.spoed-layout {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 1fr 4fr; gap: var(--sp-3); align-items: stretch;
}

/* ---------- Paneel (HiX-blok met blauwe titelbalk) ---------- */
.paneel-blok { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.paneel-balk {
  display: flex; align-items: center; gap: 6px; padding: 4px 9px;
  background: linear-gradient(180deg, var(--c-paneelkop-2), var(--c-paneelkop));
  color: var(--c-paneelkop-ink); font-weight: 600; font-size: 12px; flex: 0 0 auto;
}
.paneel-balk .chevron { font-size: 10px; opacity: .85; }
.paneel-balk .telling {
  margin-left: auto; background: rgba(255,255,255,.22); color: #fff;
  border-radius: 9px; padding: 0 7px; font-size: 11px; font-family: var(--font-data); min-width: 18px; text-align: center;
}

/* ---------- Gebieden-kolom (links) — verdeelt de hoogte over de gebieden ---------- */
.gebieden-kolom { min-height: 0; display: flex; flex-direction: column; gap: var(--sp-2); overflow: hidden; }
.gebieden-kolom .gebied { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.gebied .gebied-lijst { flex: 1 1 auto; min-height: 0; overflow: auto; }
.gebied-rij {
  display: grid; grid-template-columns: 5px 1.4fr 1.4fr auto auto auto; align-items: center;
  gap: 7px; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--c-line-2);
  cursor: pointer; font-size: 11.5px;
}
.gebied-rij:hover { background: var(--c-selectie); }
.gebied-rij .balk { width: 5px; align-self: stretch; background: var(--c-ink-3); }
.gebied-rij.a-rood .balk { background: var(--t-rood); }
.gebied-rij.a-oranje .balk { background: var(--t-oranje); }
.gebied-rij.a-geel .balk { background: var(--t-geel); }
.gebied-rij.a-groen .balk { background: var(--t-groen); }
.gebied-rij.a-blauw .balk { background: var(--t-blauw); }
.gebied-rij .g-naam { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gebied-rij .g-klacht { color: var(--c-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gebied-rij .g-meta { font-family: var(--font-data); color: var(--c-ink-3); white-space: nowrap; }
.gebied-rij .g-tijd { font-family: var(--font-data); white-space: nowrap; }
.gebied-rij .g-tijd.over { color: var(--c-alert); font-weight: 700; }
.gebied-leeg { padding: 8px; color: var(--c-ink-3); font-size: 11.5px; }

/* ---------- Boxen-grid (rechts) — vult de hoogte, kolommen instelbaar ---------- */
.boxen-zone { min-height: 0; display: flex; }
.boxen-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--kolommen, 4), minmax(0, 1fr));
  grid-auto-rows: 1fr; gap: var(--sp-2);
}
/* Vrije indeling: een zandbak met vaste verhouding, gecentreerd in de zone.
   De zandbak wordt door JS op px gezet (letterbox-passend). Boxen en de
   druktebarometer staan absoluut op hun fractie-positie (links/top/breedte/hoogte). */
.boxen-grid.vrij-modus { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.boxen-vrij { position: relative; }
.boxen-vrij .box-tegel, .boxen-vrij .baro-tegel { position: absolute; }

/* KWS-stijl tegel: compacte kaart met accentrand links per triagekleur.
   Wit boven (kop) en onder (voet), met een iets grijzere middenband. */
.box-tegel {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-sm);
  border-left: 4px solid var(--c-line-2);
  min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
.box-tegel .bt-kop { padding: 4px 7px 3px; }
.box-tegel.bezet { cursor: pointer; }
.box-tegel.bezet:hover { box-shadow: inset 0 0 0 1px var(--c-accent); }
.box-tegel.a-rood { border-left-color: var(--t-rood); }
.box-tegel.a-oranje { border-left-color: var(--t-oranje); }
.box-tegel.a-geel { border-left-color: var(--t-geel); }
.box-tegel.a-groen { border-left-color: var(--t-groen); }
.box-tegel.a-blauw { border-left-color: var(--t-blauw); }
.box-tegel .bt-top { display: flex; align-items: baseline; gap: 6px; }
.box-tegel .bt-naam { font-weight: 700; font-size: 12.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.box-tegel .bt-dem { font-family: var(--font-data); font-size: 11px; color: var(--c-ink-3); white-space: nowrap; flex: 0 0 auto; }
.box-tegel .bt-klacht-rij { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.box-tegel .bt-klacht { flex: 1; font-size: 11px; color: var(--c-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box-tegel .bt-icn-rij { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.box-tegel .bt-icn { display: inline-flex; line-height: 0; }
/* Middenband: iets grijzer, inhoud bovenaan uitgelijnd. */
.box-tegel .bt-midden { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
  background: var(--c-surface-2); border-top: 1px solid var(--c-line-2); border-bottom: 1px solid var(--c-line-2);
  padding: 4px 7px; overflow: hidden; }
.box-tegel .bt-status-nu { font-size: 11px; font-weight: 600; color: var(--c-ink-2); flex: 0 0 auto; white-space: nowrap; }
.box-tegel .bt-behandelaars { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.box-tegel .bt-beh { font-size: 10.5px; color: var(--c-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.box-tegel .bt-vink { color: var(--ews-laag, #2e9e5b); margin-left: 4px; font-weight: 700; }
.box-tegel .bt-voet { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 7px; }
.box-tegel .bt-box { font-size: 10.5px; font-weight: 700; color: var(--c-ink-2); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box-tegel .bt-voet-r { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.box-tegel .bt-tijd { font-family: var(--font-data); font-size: 10.5px; white-space: nowrap; }
.box-tegel .bt-tijd.over { color: var(--c-alert); font-weight: 700; }
.box-tegel .bt-waarschuw { color: var(--c-alert); font-size: 12px; }

/* Lege box: effen lichtgrijze tegel met de boxnaam linksonder (zoals KWS). */
.box-tegel.vrij { background: var(--c-surface-2); border-color: var(--c-line); border-left-color: var(--c-line);
  cursor: default; display: flex; flex-direction: column; justify-content: flex-end; padding: 4px 7px; }
.box-tegel.vrij .bt-leeg-naam { font-size: 10.5px; color: var(--c-ink-3); font-weight: 600; }
/* Cel zonder box: gewoon leeg (geen rand). */
.box-tegel.cel-leeg { background: transparent; border: none; }

/* Druktebarometer als grid-cel */
.baro-tegel { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.baro-tegel .box-kop { display: flex; align-items: center; padding: 3px 8px; background: var(--c-chrome); color: var(--c-chrome-ink); font-size: 11px; font-weight: 600; flex: 0 0 auto; }
.baro-tegel .baro-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 6px; text-align: center; }
.baro-tegel svg { width: 100%; height: 100%; flex: 1 1 auto; min-height: 0; }
.baro-tegel .baro-label { font-weight: 700; font-size: 12.5px; }
.baro-tegel .baro-sub { font-size: 10px; color: var(--c-ink-3); font-family: var(--font-data); }

/* Slepen */
.gebied-rij[draggable="true"], .box-tegel.bezet[draggable="true"] { cursor: grab; }
.gebied-rij.sleept, .box-tegel.sleept { opacity: .45; }
.box-tegel.sleep-ok, .paneel-blok.sleep-ok { box-shadow: inset 0 0 0 2px var(--ews-laag); background: var(--t-groen-zacht); }
.box-tegel.sleep-nee { box-shadow: inset 0 0 0 2px var(--t-rood); }

.puls { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--t-rood); margin-right: 4px; flex: 0 0 auto; }

/* (Triage-cascadestijlen staan nu in base.css zodat ze ook in het EPD werken.) */