:root {
  --paper: #F4F6F5;
  --surface: #FFFFFF;
  --surface-2: #EAEEEC;
  --ink: #182024;
  --ink-muted: #5A6A66;
  --line: #D7DEDB;
  --accent: #0F6B5C;
  --accent-ink: #FFFFFF;
  --accent-soft: #DCEEE9;
  --amber: #8A5A1E;
  --amber-soft: #F3E4CE;
  --danger: #8C2F2F;
  --danger-soft: #F3DCDC;
  --group-akte: #DCE7F5;
  --group-akte-strong: #C4D8ED;
  --group-verwaltung: #F1E4F4;
  --group-verwaltung-strong: #E4CDEB;
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  --radius: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12181A;
    --surface: #182022;
    --surface-2: #1E2729;
    --ink: #E8ECEA;
    --ink-muted: #9FB0AC;
    --line: #2A3436;
    --accent: #3FB39B;
    --accent-ink: #0B1413;
    --accent-soft: #16302B;
    --amber: #D99A4E;
    --amber-soft: #3A2E1C;
    --danger: #D97C7C;
    --danger-soft: #3A2222;
    --group-akte: #16212E;
    --group-akte-strong: #1D2C3D;
    --group-verwaltung: #251C2C;
    --group-verwaltung-strong: #33253C;
  }
}
:root[data-theme="dark"] {
  --paper: #12181A;
  --surface: #182022;
  --surface-2: #1E2729;
  --ink: #E8ECEA;
  --ink-muted: #9FB0AC;
  --line: #2A3436;
  --accent: #3FB39B;
  --accent-ink: #0B1413;
  --accent-soft: #16302B;
  --amber: #D99A4E;
  --amber-soft: #3A2E1C;
  --danger: #D97C7C;
  --danger-soft: #3A2222;
  --group-akte: #16212E;
  --group-akte-strong: #1D2C3D;
  --group-verwaltung: #251C2C;
  --group-verwaltung-strong: #33253C;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
}

.demo-banner {
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 12.5px;
  text-align: center;
  padding: 6px 12px;
  font-family: var(--font-mono);
  border-bottom: 1px solid var(--line);
}

#app { display: flex; min-height: calc(100vh - 30px); }

/* ---- Sidebar ---- */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 0 6px; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-display); font-size: 15px;
}
.brand-name { font-weight: 700; font-size: 14.5px; }
.tenant-name { font-size: 11px; color: var(--ink-muted); padding: 0 6px; }

nav.primary { display: flex; flex-direction: column; gap: 2px; }
nav.primary a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 7px;
  color: var(--ink-muted); text-decoration: none; font-size: 13.5px;
  cursor: pointer;
}
nav.primary a:hover { background: var(--surface-2); color: var(--ink); }
nav.primary a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
nav.primary a .ic { width: 16px; text-align: center; }

.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.user-switch { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--surface-2); }
.user-switch label { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 5px; }
.user-switch select { width: 100%; padding: 5px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; }
.theme-toggle {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted);
  border-radius: 7px; padding: 7px; font-size: 12px; cursor: pointer; text-align: center;
}

/* ---- Main ---- */
.main { flex: 1; min-width: 0; padding: 26px 32px 60px; overflow-x: hidden; }
.page-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.page-header h1 { font-family: var(--font-display); font-size: 24px; margin: 0; }
.page-sub { color: var(--ink-muted); font-size: 13px; margin-top: 4px; }

/* Werk je de checklist van één patiënt af, dan is de naam het onderwerp van de
   pagina. Groot genoeg om vanaf een armlengte te zien in wiens dossier je zit —
   in het verkeerde dossier werken is de vergissing die niemand mag maken. */
.patient-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-muted); margin-bottom: 2px;
}
.page-header h1.patient-title { font-size: 34px; line-height: 1.1; }
.page-header .sgbv-tags { margin-top: 8px; }
.page-header .sgbv-tag { font-size: 11px; padding: 2px 8px; }
.btn {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  border-radius: 7px; padding: 8px 14px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:hover { filter: brightness(0.97); }

/* ---- KPI cards ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 26px; }
/* Blokken zijn knoppen: ze openen de Checkliste met datzelfde filter. Het
   pijltje maakt dat zichtbaar zonder op hover te vertrouwen — op een tablet
   bestaat hover niet. */
.kpi-card {
  position: relative; display: block; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; font: inherit; color: inherit; cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.kpi-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.kpi-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpi-value { display: block; font-family: var(--font-display); font-size: 30px; font-variant-numeric: tabular-nums; }
.kpi-label { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 3px; }
.kpi-go { position: absolute; top: 12px; right: 14px; font-size: 16px; color: var(--ink-muted); }
.kpi-card.warn .kpi-value { color: var(--amber); }
.kpi-card.danger .kpi-value { color: var(--danger); }
.kpi-card.accent .kpi-value { color: var(--accent); }

/* ---- Progress ---- */
.progress-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.progress-row { display: grid; grid-template-columns: 160px 1fr 46px; align-items: center; gap: 12px; font-size: 13px; }
.progress-track { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 99px; }
.progress-pct { text-align: right; font-family: var(--font-mono); color: var(--ink-muted); font-size: 12px; }

/* ---- Filters ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
  font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
  padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-muted); cursor: pointer;
}
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.select-filter { padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 12.5px; }

/* ---- Table / list ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 13.5px; }
thead th {
  text-align: left; padding: 10px 14px; font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }

/* Hygienehandbuch: hoofdstukken en subpunten, zoals in het bronwerkboek.
   Inspringing alleen; het nummer in het label draagt de structuur ook zonder
   kleur of vet — voor afdrukken en voor een uitgebleekt scherm. */
.doc-lvl1 td:first-child { font-weight: 600; }
.doc-lvl2 td:first-child { padding-left: 28px; }
/* Derde niveau: de losse onderwerpen onder een genummerd punt, zoals de
   scholingsonderwerpen onder Fortbildungskonzept. */
.doc-lvl3 td:first-child { padding-left: 56px; color: var(--ink-muted); font-size: 13px; }

.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
.status-open { background: var(--surface-2); color: var(--ink-muted); }
.status-in_progress { background: var(--amber-soft); color: var(--amber); }
.status-done { background: var(--accent-soft); color: var(--accent); }

.deadline-badge { font-family: var(--font-mono); font-size: 12px; }
.deadline-badge.overdue { color: var(--danger); font-weight: 700; }
.deadline-badge.today { color: var(--amber); font-weight: 700; }

.avatar { width: 22px; height: 22px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-right: 3px; }

.akte-pill { padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; font-family: var(--font-mono); }
.akte-vollstaendig { background: var(--accent-soft); color: var(--accent); }
.akte-korrektur { background: var(--surface-2); color: var(--ink-muted); }
.akte-dringend { background: var(--danger-soft); color: var(--danger); }

/* ---- Detail panel ---- */
.overlay { position: fixed; inset: 0; background: rgba(10, 14, 15, 0.35); display: none; z-index: 20; }
.overlay.open { display: block; }
.panel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  background: var(--surface); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .18s ease; z-index: 21;
  display: flex; flex-direction: column;
}
.panel.open { transform: translateX(0); }
.panel-actions { display: flex; align-items: center; gap: 2px; }

/* Vanaf tabletbreedte staat het leespaneel vást naast de lijst in plaats van
   erover: de inhoud schuift mee en blijft leesbaar terwijl een punt openstaat.
   Op een smal scherm is daar geen ruimte voor en blijft het oude gedrag staan,
   waarbij het paneel over de lijst schuift met een grijze laag erachter. */
@media (min-width: 861px) {
  .panel {
    position: sticky; top: 0; align-self: flex-start;
    height: calc(100vh - 30px);
    width: 0; max-width: none; flex: 0 0 auto;
    transform: none; overflow: hidden;
    transition: width .18s ease;
    z-index: 5;
  }
  .panel.open { width: var(--panel-width, 420px); }
  .panel.open.collapsed { width: 40px; }
  .overlay { display: none !important; }

  .panel-resizer {
    position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    cursor: col-resize; z-index: 2;
  }
  .panel-resizer:hover { background: var(--accent); opacity: .5; }
  body.resizing-panel { cursor: col-resize; user-select: none; }
  /* Tijdens het slepen geen animatie: die loopt achter de muis aan. */
  body.resizing-panel .panel { transition: none; }

  /* Ingeschoven: een smalle rand met de titel op zijn kant, zodat zichtbaar
     blijft wat er openstaat. */
  .panel-rail {
    width: 100%; height: 100%; border: none; background: var(--surface-2);
    color: var(--ink-muted); cursor: pointer; font: inherit;
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0;
  }
  .panel-rail:hover { color: var(--accent); }
  .rail-chevron { font-size: 16px; }
  .rail-text {
    writing-mode: vertical-rl; font-size: 11.5px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-height: calc(100% - 40px);
  }
}
.panel-header { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.panel-header h2 { font-family: var(--font-display); font-size: 18px; margin: 0 0 4px; }
.panel-close { background: none; border: none; color: var(--ink-muted); font-size: 18px; cursor: pointer; }
.panel-body { padding: 18px 20px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.field-row { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; color: var(--ink-muted); }
.status-buttons { display: flex; gap: 6px; }
.status-buttons button {
  flex: 1; padding: 7px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 12px; cursor: pointer;
}
.status-buttons button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.comment-list { display: flex; flex-direction: column; gap: 10px; }
.comment { background: var(--surface-2); border-radius: 7px; padding: 9px 11px; font-size: 13px; }
.comment-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-muted); margin-bottom: 4px; }
.comment-form { display: flex; gap: 6px; margin-top: 4px; }
.comment-form input { flex: 1; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; }

/* ---- Matrix (Excel-achtig overzicht) ---- */
.matrix-scroll { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-height: 78vh; }
table.matrix { border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.matrix th, table.matrix td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0; }
table.matrix thead th {
  background: var(--surface-2); font-family: var(--font-mono); font-weight: 600; color: var(--ink-muted);
  position: sticky; top: 0; z-index: 2;
}
table.matrix thead tr.group-row th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding: 8px 6px; text-align: center;
  border-bottom: 1px solid var(--line);
}
table.matrix thead tr.label-row th {
  height: 168px; width: 138px; min-width: 138px; max-width: 138px; vertical-align: bottom; padding: 0 0 10px;
}
table.matrix thead tr.label-row th .rot {
  display: block; transform: rotate(-38deg); transform-origin: left bottom; white-space: nowrap;
  font-size: 14.5px; font-weight: 500; letter-spacing: 0; margin-left: 26px; color: var(--ink);
}
table.matrix th.corner { position: sticky; left: 0; top: 0; z-index: 3; background: var(--surface-2); }
table.matrix th.status-col, table.matrix td.status-col { width: 190px; min-width: 190px; max-width: 190px; text-align: left; padding: 8px 14px; }
table.matrix td.name-cell {
  position: sticky; left: 0; background: var(--surface); z-index: 1;
  padding: 10px 16px; text-align: left; white-space: nowrap; cursor: pointer; border-right: 1px solid var(--line);
  width: 190px; min-width: 190px; max-width: 190px;
}
table.matrix td.name-cell:hover { background: var(--surface-2); }
table.matrix td.name-cell .pname { font-weight: 600; font-size: 13.5px; }
table.matrix td.name-cell .psub { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
table.matrix td.name-cell .edit-btn {
  float: right; background: none; border: none; color: var(--ink-muted); cursor: pointer; font-size: 13px; padding: 2px 4px;
}
table.matrix td.name-cell .edit-btn:hover { color: var(--accent); }
table.matrix tbody tr:nth-child(even) td.name-cell { background: var(--surface-2); }
table.matrix tbody tr:nth-child(even) td.name-cell:hover { background: var(--surface); }

/* Kolomgroepen Patientenakte vs. Verwaltung/Abrechnung visueel onderscheiden */
table.matrix th.col-akte { background: var(--group-akte-strong); color: var(--ink); }
table.matrix td.col-akte { background: var(--group-akte); }
table.matrix th.col-verwaltung { background: var(--group-verwaltung-strong); color: var(--ink); }
table.matrix td.col-verwaltung { background: var(--group-verwaltung); }
table.matrix thead tr.group-row th.col-akte,
table.matrix thead tr.group-row th.col-verwaltung { color: var(--ink); }

td.cell { text-align: center; vertical-align: middle; }
.mx-btn {
  width: 100%; height: 40px; border: none; background: transparent; cursor: pointer;
  font-size: 17px; display: flex; align-items: center; justify-content: center;
}
.mx-done { color: var(--accent); font-weight: 700; }
.mx-pending { color: var(--amber); font-weight: 700; }
.mx-progress { color: var(--amber); }
.mx-overdue { color: var(--danger); font-weight: 700; }
.mx-open { color: var(--ink-muted); opacity: .45; }
.mx-btn:hover { background: var(--accent-soft); }

.matrix-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--ink-muted); }
.matrix-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* ---- Users table (admin) ---- */
.role-badge { font-family: var(--font-mono); font-size: 11px; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); color: var(--ink-muted); }
.role-badge.admin { background: var(--accent-soft); color: var(--accent); }

/* ---- Pflegedienste (dashboard) ---- */
.pd-list { display: flex; flex-direction: column; gap: 12px; }
.pd-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.pd-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.pd-name { font-weight: 600; font-size: 14px; }
.pd-days { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); font-weight: 700; }
.pd-days.overdue { color: var(--danger); }
.pd-meta { margin-top: 8px; font-size: 11.5px; color: var(--ink-muted); font-family: var(--font-mono); }
.progress-fill.danger { background: var(--danger); }

/* ---- PDF-voorbeeld ---- */
.pdf-preview { background: #fff; color: #111; padding: 14px 16px; border-radius: 7px; max-height: 300px; overflow: auto; font-size: 11px; }
.pdf-preview h1 { font-family: Georgia, serif; font-size: 16px; margin: 0 0 4px; }
.pdf-preview p { font-family: Arial, sans-serif; font-size: 11px; color: #555; margin: 0 0 10px; }
.pdf-preview table { width: 100%; border-collapse: collapse; }
.pdf-preview th, .pdf-preview td { border: 1px solid #ccc; padding: 4px 6px; font-size: 10.5px; text-align: left; font-family: Arial, sans-serif; }
.pdf-preview th { background: #eee; }

/* ---- Aanmeldscherm: wie werkt er? ---- */
.user-picker { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; }
.picker-card { width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.picker-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.picker-card h1 { font-family: var(--font-display); font-size: 24px; margin: 0 0 4px; }
.picker-sub { color: var(--ink-muted); font-size: 13px; margin: 0 0 24px; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.picker-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink); cursor: pointer; text-align: left;
  font: inherit; transition: border-color .12s, transform .12s;
}
.picker-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.picker-initials {
  width: 34px; height: 34px; border-radius: 99px; background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px;
}
.picker-initials.small { width: 26px; height: 26px; font-size: 11px; margin: 0; }
.picker-name { font-weight: 600; font-size: 14px; }
.picker-role { font-size: 11.5px; color: var(--ink-muted); }
.current-user { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cu-name { display: block; font-size: 13px; font-weight: 600; }
.cu-role { display: block; font-size: 11px; color: var(--ink-muted); }

/* ---- Organisatiebalk ----
   Grote naam plus een eigen kleur per organisatie. De kleur alleen zou niet
   genoeg zijn — vandaar de naam in groot — maar bij het snelle wisselen is de
   kleur wat je het eerst ziet. Witte tekst op alle acht achtergronden. */
.org-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px; border-radius: var(--radius); margin-bottom: 22px; color: #fff;
}
.org-bar-label {
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; opacity: .75;
}
.org-bar-name { font-family: var(--font-display); font-size: 30px; line-height: 1.1; margin: 2px 0 0; color: #fff; }
.org-bar-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.org-bar-audit {
  font-size: 12px; background: rgba(255, 255, 255, .16); padding: 5px 10px; border-radius: 99px; white-space: nowrap;
}
.org-bar-audit.late { background: #fff; color: var(--danger); font-weight: 700; }
.org-switch {
  padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px; font-family: inherit; cursor: pointer;
  max-width: 230px;
}
.org-switch option { color: var(--ink); background: var(--surface); }

.org-swatch {
  width: 34px; height: 34px; border-radius: 9px; color: #fff; font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px;
}
.org-swatch.small { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; margin: 0; vertical-align: middle; }
.org-btn .picker-name { margin-top: 2px; }
.org-current {
  font-size: 10.5px; font-family: var(--font-mono); text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent); padding: 1px 6px; border-radius: 99px; margin-left: 4px;
}
.org-color-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.org-color-option { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.org-color-option.taken { opacity: .55; }
.org-color-chip { width: 18px; height: 18px; border-radius: 5px; flex: 0 0 auto; }
.org-color-label { white-space: nowrap; }

/* ---- Opslag: keuzescherm, grendel, opslagstatus ---- */
.storage-choices { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 14px; }
.storage-choices .btn { width: 100%; padding: 12px; font-size: 14px; }
.picker-footnote { color: var(--ink-muted); font-size: 12px; margin: 0; line-height: 1.5; }
.storage-warning {
  background: var(--amber-soft); color: var(--amber); border-radius: var(--radius);
  padding: 10px 12px; font-size: 12.5px; line-height: 1.5; margin-bottom: 4px;
}
.storage-warning.inline { margin-bottom: 18px; }
.storage-warning.strong { background: var(--danger); color: #fff; font-weight: 600; }

.storage-badge {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-muted);
}
.sb-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Opslagstatus is nooit alleen kleur: er staat altijd een teken en een woord
   bij, voor een uitgebleekt scherm en voor wie kleuren niet onderscheidt. */
.save-indicator { font-family: var(--font-mono); font-size: 10.5px; }
.save-indicator.saved { color: var(--accent); }
.save-indicator.saving { color: var(--ink-muted); }
.save-indicator.error { color: var(--danger); font-weight: 700; }
.linklike {
  background: none; border: none; padding: 0; text-align: left;
  color: var(--ink-muted); font-size: 11px; text-decoration: underline; cursor: pointer; font-family: inherit;
}
.linklike:hover { color: var(--accent); }

/* ---- SGB V onder de naam in de patiëntenlijst ---- */
.sgbv-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.sgbv-tag {
  font-size: 10px; line-height: 1.5; padding: 1px 6px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; white-space: nowrap;
}
.sgbv-tag.none { background: var(--surface-2); color: var(--ink-muted); font-weight: 500; }
.sgbv-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.sgbv-option { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.sgbv-option input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.field-row.col { gap: 8px; }

/* Zoekveld op de QM-/Hygiene-pagina */
.doc-search { min-width: 260px; }

/* ---- Print (PDF export) ---- */
#print-area { display: none; }
@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; padding: 24px; font-family: Georgia, serif; color: #111; background: #fff; }
  #print-area h1 { font-size: 18px; margin: 0 0 4px; }
  #print-area p { font-family: Arial, sans-serif; font-size: 11px; color: #555; margin: 0 0 14px; }
  #print-area table { width: 100%; border-collapse: collapse; }
  #print-area th, #print-area td { border: 1px solid #999; padding: 6px 8px; font-size: 11px; text-align: left; font-family: Arial, sans-serif; }
  #print-area th { background: #eee; }
}

@media (max-width: 860px) {
  /* Geen inklapknop waar het paneel toch over de lijst schuift. */
  #panel-collapse { display: none; }
  #app { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; align-items: center; padding: 12px 14px; overflow-x: auto; }
  .sidebar-footer { margin-top: 0; flex-direction: row; }
  nav.primary { flex-direction: row; }
  .main { padding: 18px 16px 60px; }
}