:root {
  /* Palet B "warm linnen" (definitief, Ismet 31-10-2026). Bron: rapporten/mr01-eigen-server-2026-10-31/stijl-zorgplatforms.md.
     Wissel van palet = alleen dit blok. */
  --achtergrond: #FAF6EE;
  --kaart: #FFFFFF;
  --lijn: #E6DFD2;
  --zacht: #F1EBDF;
  --tekst: #2B3A3C;
  --gedempt: #5E6B6A;
  --tussentint: #4B5857;
  --accent: #37746F;
  --op-accent: #FFFFFF;
  --val-vlak: #B0453A; --val-tekst: #FFFFFF; --val-rand: #8F2F27; --val-kaart: #F9E7E4; --val-escalatie: #8F2F27;
  --uitbed-vlak: #F5D9A8; --uitbed-tekst: #5C3A00; --uitbed-rand: #C58A1B; --uitbed-kaart: #FBF1DF;
  --inbed-vlak: #E3E8EE; --inbed-tekst: #33414F; --inbed-rand: #B7C3D1;
  --stil-vlak: #DDEBE0; --stil-tekst: #274A35; --stil-rand: #C2D8C8;
  --offline-vlak: #EAE6DF; --offline-tekst: #55524C; --offline-rand: #D3CCC0;
  --stip-val: #B0453A; --stip-uitbed: #C58A1B; --stip-inbed: #6C8FAF; --stip-offline: #A8A39A;
  --stip-afgehandeld: #37746F; --stip-onderweg: #2B3A3C; --stip-info: #5E6B6A;
  --rond-kaart: 16px; --rond-knop: 999px;
  /* Oude namen, verwijzen naar het palet */
  --inkt: var(--tekst); --petrol: var(--accent); --salie: var(--zacht); --zand: var(--achtergrond);
  --koraal: var(--accent); --alarm: var(--val-vlak);
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--tekst);
  background: var(--achtergrond);
  line-height: 1.5;
  color-scheme: light;
}
body { background: var(--achtergrond); }
* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p { margin: 0 0 1rem; }
h1 { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; }
h2 { font-size: 1.25rem; line-height: 1.3; }
h3 { font-size: 1.1rem; }
a { color: var(--petrol); text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--koraal); outline-offset: 4px; }
[hidden], .verborgen { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.overslaan {
  position: absolute; left: 1rem; top: -10rem; z-index: 100;
  padding: .75rem 1rem; background: white; color: var(--inkt);
}
.overslaan:focus { top: 1rem; }
.pagina { width: 100%; max-width: 1200px; margin-inline: auto; padding: 1rem; }
.site-kop { background: white; border-bottom: 1px solid var(--lijn); }
.kop-inhoud { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.merk {
  display: inline-flex; gap: .65rem; align-items: center; min-height: 44px;
  color: var(--inkt); font-size: 1.25rem; font-weight: 700; text-decoration: none;
}
.merk img { flex: 0 0 36px; }
.klantnaam { display: block; font-size: .9rem; font-weight: 400; overflow-wrap: anywhere; }
.navigatie { display: flex; flex-wrap: wrap; gap: .25rem; }
.navigatie a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .5rem .9rem; border-radius: var(--rond-knop);
}
.navigatie a:hover { background: var(--salie); }
.account { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-left: auto; }
.account > span { overflow-wrap: anywhere; }
.account .gedempt { display: block; font-size: .85rem; }
.account form { margin: 0; }
.testbanner {
  padding: .6rem 1rem; background: var(--zacht); text-align: center;
  font-weight: 600; color: var(--tussentint); border-bottom: 1px solid var(--lijn);
}
.site-voet { color: var(--gedempt); font-size: .875rem; }
.kaart {
  padding: 1rem; margin-bottom: 1rem; background: white;
  border: 1px solid var(--lijn); border-radius: var(--rond-kaart); min-width: 0;
}
.kaart > :last-child { margin-bottom: 0; }
.kaart-kop { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.kaart-kop > h1, .kaart-kop > h2 { margin: 0; margin-right: auto; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.dashboard-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.tabel-scroll { overflow-x: auto; max-width: 100%; }
.tabel { width: 100%; border-collapse: collapse; text-align: left; }
.tabel th, .tabel td { padding: .75rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel th { background: var(--salie); font-weight: 600; }
.tabel caption { text-align: left; font-weight: 600; padding-bottom: .75rem; }
.formulier { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.formulier label, .formulier legend { font-weight: 600; }
.formulier input:not([type="hidden"]), .formulier select, .formulier textarea,
.url-vak input {
  width: 100%; min-width: 0; min-height: 44px; padding: .65rem .75rem;
  border: 1px solid var(--gedempt); border-radius: .4rem; background: white; color: var(--inkt);
}
.formulier textarea { resize: vertical; }
.formulier > label:not(:first-child) { margin-top: .5rem; }
.formulier-rij { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.formulier-rij > div, .formulier-rij > label { flex: 1 1 180px; min-width: 0; }
.formulier-rij label { display: block; }
fieldset { min-width: 0; margin: 0; padding: .75rem; border: 1px solid var(--lijn); border-radius: .4rem; }
.redenen { display: flex; flex-wrap: wrap; gap: 1rem; }
.redenen label, .formulier label:has(input[type="checkbox"]) {
  display: flex; align-items: center; gap: .5rem; min-height: 44px;
}
.formulier input[type="radio"], .formulier input[type="checkbox"] {
  width: 1.25rem; height: 1.25rem; min-height: 0; accent-color: var(--petrol); flex-shrink: 0;
}
.knop {
  display: inline-flex; justify-content: center; align-items: center; gap: .4rem;
  min-height: 44px; padding: .65rem 1rem; border: 1px solid var(--petrol);
  border-radius: var(--rond-knop); font-weight: 600; text-align: center; text-decoration: none;
  background: var(--kaart); color: var(--accent); cursor: pointer; padding-inline: 1.25rem;
}
.knop-primair { background: var(--accent); color: var(--op-accent); }
.knop-secundair { background: var(--zacht); color: var(--tekst); border-color: var(--lijn); }
.knop-gevaar { background: var(--alarm); border-color: var(--alarm); color: white; }
.knop:hover { filter: brightness(.94); }
button:disabled, input:disabled, select:disabled { opacity: .6; cursor: not-allowed; }
.acties { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.badge { display: inline-block; padding: .2rem .7rem; border-radius: var(--rond-knop); font-size: .85rem; font-weight: 700; }
.badge-val, .kamer-val { background: var(--val-vlak); color: var(--val-tekst); border: 2px solid var(--val-rand); }
.badge-uitbed, .kamer-uitbed { background: var(--uitbed-vlak); color: var(--uitbed-tekst); border: 2px solid var(--uitbed-rand); }
.badge-inbed, .kamer-inbed { background: var(--inbed-vlak); color: var(--inbed-tekst); border: 1px solid var(--inbed-rand); }
.badge-offline, .kamer-offline { background: var(--offline-vlak); color: var(--offline-tekst); border: 1px dashed var(--offline-rand); }
.badge-stil, .kamer-stil { background: var(--stil-vlak); color: var(--stil-tekst); border: 1px solid var(--stil-rand); }
.melding-ok, .melding-fout { padding: .9rem 1rem; margin-bottom: 1rem; border-radius: .4rem; overflow-wrap: anywhere; }
.melding-ok { background: var(--salie); border-left: 4px solid var(--petrol); }
.melding-fout { background: var(--val-kaart); color: var(--val-escalatie); border-left: 4px solid var(--alarm); }
.url-vak { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.url-vak input { font-family: ui-monospace, monospace; flex: 1 1 200px; }
.gedempt { color: var(--gedempt); }
.login-kaart { max-width: 460px; margin: 2rem auto; }
.naam-keuze { flex: 0 1 340px; font-size: .9rem; }
.legenda { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.afdeling + .afdeling { margin-top: 1.5rem; }
.rij { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }
.kamer {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; min-width: 88px; min-height: 88px; max-width: 100%;
  padding: .7rem; border: 1px solid transparent; border-radius: 14px;
  font: inherit; cursor: pointer; overflow-wrap: anywhere;
}
.kamernummer { font-size: 1.7rem; line-height: 1.1; font-weight: 700; }
.kamer-label { font-size: .8rem; font-weight: 700; }
.kamer-extra { font-size: .8rem; max-width: 14ch; }
.kamer-val { animation: alarmrand 2.4s ease-in-out infinite; }
.kamer-val:focus-visible { outline-color: var(--inkt); }
@keyframes alarmrand {
  0%, 100% { box-shadow: 0 0 0 1px rgb(176 69 58 / 15%); }
  50% { box-shadow: 0 0 0 5px rgb(176 69 58 / 22%); }
}
.open-lijst { display: flex; flex-wrap: wrap; gap: .75rem; }
.open-melding {
  flex: 1 1 260px; min-width: 0; padding: 1rem;
  border: 1px solid var(--lijn); border-left: 5px solid var(--accent); border-radius: 12px; background: var(--kaart);
}
.open-val { background: var(--val-kaart); border-color: var(--val-vlak); }
.open-uitbed { background: var(--uitbed-kaart); border-color: var(--uitbed-rand); }
.open-melding p { margin-bottom: .65rem; }
.tijdlijn { margin: 0; padding-left: 0; list-style: none; max-height: 70vh; overflow-y: auto; }
.tijdlijn li { position: relative; padding: .5rem 0 .5rem 1.4rem; border-bottom: 1px solid var(--lijn); overflow-wrap: anywhere; }
.tijdlijn li::before {
  content: ""; position: absolute; left: .2rem; top: 1.05rem; width: .6rem; height: .6rem;
  border-radius: 50%; background: var(--stip-info);
}
.tijdlijn li.gedempt::before { display: none; }
.tl-val::before { background: var(--stip-val) !important; }
.tl-uitbed::before { background: var(--stip-uitbed) !important; }
.tl-inbed::before { background: var(--stip-inbed) !important; }
.tl-offline::before { background: var(--stip-offline) !important; }
.tl-afgehandeld::before { background: var(--stip-afgehandeld) !important; }
.tl-onderweg::before { background: var(--stip-onderweg) !important; }
.tijdlijn time { display: block; color: var(--gedempt); font-size: .85rem; }
.verbindingsstatus { font-size: .9rem; }
.verbindingsstatus[data-live="nee"] { color: var(--alarm); font-weight: 600; }
dialog {
  width: min(640px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem);
  padding: 1.25rem; border: 1px solid var(--lijn); border-radius: var(--rond-kaart);
  background: white; color: var(--inkt); overflow-y: auto;
}
dialog::backdrop { background: rgb(43 58 60 / 45%); }
.kamer-melding { padding-block: 1rem; border-bottom: 1px solid var(--lijn); overflow-wrap: anywhere; }
.kamer-melding p { white-space: pre-wrap; }
[data-weergave="nachtpost"] { font-size: 1.15rem; }
[data-weergave="nachtpost"] .kamer { min-width: 120px; min-height: 120px; }
[data-weergave="nachtpost"] .kamernummer { font-size: 2.3rem; }
[data-weergave="nachtpost"] .kamer-label,
[data-weergave="nachtpost"] .kamer-extra { font-size: 1rem; }
[data-weergave="nachtpost"] .open-melding { font-size: 1.2rem; }
@media (min-width: 700px) {
  .pagina { padding: 1.5rem; }
  .kaart { padding: 1.5rem; }
}
@media (min-width: 1000px) {
  .dashboard-raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  [data-weergave="nachtpost"] .dashboard-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Meldingen: knop en meldingen in beeld (palet B) ---------- */
.knop-meldingen { gap: .5rem; border-color: var(--lijn); color: var(--tussentint); background: var(--kaart); }
.knop-meldingen .bel {
  width: .65rem; height: .65rem; border-radius: 50%; background: var(--offline-rand);
  box-shadow: 0 0 0 3px var(--zacht);
}
.knop-meldingen.aan { border-color: var(--accent); color: var(--accent); }
.knop-meldingen.aan .bel { background: var(--accent); box-shadow: 0 0 0 3px rgb(55 116 111 / 18%); }
.toasts {
  position: fixed; z-index: 50; right: 1rem; top: 1rem; display: flex; flex-direction: column; gap: .75rem;
  width: min(380px, calc(100% - 2rem)); pointer-events: none;
}
.toast {
  pointer-events: auto; padding: 1rem 1.1rem; border-radius: var(--rond-kaart);
  background: var(--kaart); border: 1px solid var(--lijn); border-left: 6px solid var(--accent);
  box-shadow: 0 10px 30px rgb(43 58 60 / 14%), 0 2px 6px rgb(43 58 60 / 8%);
  animation: toast-in .45s cubic-bezier(.2, .8, .2, 1);
}
.toast p { margin: .45rem 0 .8rem; color: var(--tussentint); }
.toast .acties .knop { min-height: 40px; padding: .45rem 1rem; }
.toast-kop { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: 1.05rem; }
.toast-stip { width: .7rem; height: .7rem; border-radius: 50%; background: var(--stip-info); flex: 0 0 auto; }
.toast-val { background: var(--val-kaart); border-color: var(--val-vlak); }
.toast-val .toast-stip { background: var(--stip-val); animation: stip-adem 2.4s ease-in-out infinite; }
.toast-uitbed { background: var(--uitbed-kaart); border-color: var(--uitbed-rand); }
.toast-uitbed .toast-stip { background: var(--stip-uitbed); }
.toast-offline { border-color: var(--offline-rand); }
.toast-offline .toast-stip { background: var(--stip-offline); }
.toast-weg { opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .35s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes stip-adem { 0%, 100% { box-shadow: 0 0 0 0 rgb(176 69 58 / 35%); } 50% { box-shadow: 0 0 0 7px rgb(176 69 58 / 0%); } }
@media (max-width: 600px) { .toasts { top: auto; bottom: 1rem; right: 1rem; left: 1rem; width: auto; } }