/* hosp. hub design system v2: same palette and typography as the component
   dashboards (ivoor, diepgroen, messing; Prata, Figtree, IBM Plex Mono) with a
   modern surface language: soft radii, layered shadows, custom scrollbars, a
   collapsible sidebar and full-bleed system views. Panels build from the
   utility classes below; no panel ships its own colors or fonts. */

:root{
  --ivoor:#F6F2EA; --ivoor-2:#EFE9DC;
  --diepgroen:#12241A; --flesgroen:#1B3325;
  --messing:#A8834A; --messing-zacht:#C4A165;
  --inkt:#1C1B16; --inkt-zacht:#55544A;
  --lijn:rgba(18,36,26,.12); --lijn-zwaar:rgba(18,36,26,.26);
  --lijn-donker:rgba(246,242,234,.12);
  --wit:#FFFFFF; --rood:#8A3B2E; --groen-ok:#3E6B52;
  --r-s:8px; --r-m:12px; --r-l:16px;
  --schaduw-1:0 1px 2px rgba(18,36,26,.04), 0 4px 16px -8px rgba(18,36,26,.08);
  --schaduw-2:0 2px 4px rgba(18,36,26,.05), 0 16px 32px -16px rgba(18,36,26,.18);
  --vlot:.18s cubic-bezier(.4,0,.2,1);
  --zijbreedte:276px; --railbreedte:62px;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  background:var(--ivoor); color:var(--inkt);
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
.serif{font-family:"Prata",Georgia,"Times New Roman",serif}
.mono{font-family:"IBM Plex Mono","Consolas",monospace}
a{color:inherit}
::selection{background:rgba(168,131,74,.25)}
:focus-visible{outline:2px solid var(--messing); outline-offset:2px; border-radius:var(--r-s)}

/* ---------- scrollbars: thin, rounded, quiet ---------- */
*{scrollbar-width:thin; scrollbar-color:rgba(18,36,26,.25) transparent}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(18,36,26,.20); border-radius:999px;
  border:3px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(18,36,26,.38); background-clip:padding-box;
  border:3px solid transparent}
.sidebar{scrollbar-color:rgba(246,242,234,.22) transparent}
.sidebar ::-webkit-scrollbar-thumb{background:rgba(246,242,234,.20); background-clip:padding-box;
  border:3px solid transparent}
.sidebar ::-webkit-scrollbar-thumb:hover{background:rgba(246,242,234,.36); background-clip:padding-box;
  border:3px solid transparent}

/* ---------- app shell ---------- */
#app{
  display:grid; grid-template-columns:var(--zijbreedte) 1fr;
  height:100dvh; overflow:hidden;
  transition:grid-template-columns .28s cubic-bezier(.4,0,.2,1);
}
#app.dicht{grid-template-columns:var(--railbreedte) 1fr}

/* ---------- sidebar ---------- */
.sidebar{
  background:var(--diepgroen); color:var(--ivoor);
  display:flex; flex-direction:column; min-height:0; min-width:0;
  overflow:hidden; position:relative;
}
.brand{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:20px 14px 16px 22px; border-bottom:1px solid var(--lijn-donker); flex:none;
}
.brand .merk{min-width:0}
.brand .wordmark{font-family:"Prata",Georgia,serif; font-size:26px; letter-spacing:.01em;
  white-space:nowrap}
.brand .wordmark .dot{color:var(--messing-zacht)}
.brand .sub{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--messing-zacht); margin-top:6px; opacity:.9;
  white-space:nowrap}
.zijknop{
  flex:none; width:34px; height:34px; border-radius:var(--r-s); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; color:rgba(246,242,234,.65);
  transition:background var(--vlot), color var(--vlot), border-color var(--vlot);
}
.zijknop:hover{background:rgba(246,242,234,.08); color:var(--ivoor)}
.zijknop svg{width:17px; height:17px; display:block}

nav{padding:12px 10px 16px; flex:1; overflow-y:auto; overflow-x:hidden; min-height:0}
.navgroep{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--messing-zacht); padding:18px 12px 7px; opacity:.85;
  white-space:nowrap}
.navitem{
  display:flex; align-items:center; gap:11px;
  padding:8px 12px; margin:1px 0; cursor:pointer; border-radius:var(--r-s);
  color:rgba(246,242,234,.74); font-size:13.5px; text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background var(--vlot), color var(--vlot);
}
.navitem:hover{background:rgba(246,242,234,.06); color:var(--ivoor)}
.navitem.actief{background:rgba(246,242,234,.10); color:var(--ivoor)}
.navitem .stip{width:6px; height:6px; border-radius:50%; background:var(--messing-zacht);
  flex:none; opacity:.45; transition:opacity var(--vlot), box-shadow var(--vlot)}
.navitem.actief .stip{opacity:1; box-shadow:0 0 0 3px rgba(196,161,101,.22)}

.sidefoot{padding:14px 16px 16px; border-top:1px solid var(--lijn-donker); flex:none;
  white-space:nowrap; overflow:hidden}
.modechip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.08em;
  border:1px solid var(--lijn-donker); border-radius:999px; padding:6px 12px;
  color:var(--ivoor);
}
.modechip .led{width:7px; height:7px; border-radius:50%; background:var(--messing-zacht);
  box-shadow:0 0 6px rgba(196,161,101,.6)}

/* collapsed rail: wordmark initial + expand button, nav labels fade away */
.sidebar .rail{
  display:none; flex-direction:column; align-items:center; gap:14px;
  padding:18px 0; flex:1;
}
.sidebar .rail .railmerk{font-family:"Prata",Georgia,serif; font-size:21px; color:var(--ivoor)}
.sidebar .rail .railmerk .dot{color:var(--messing-zacht)}
#app.dicht .sidebar .vol{display:none}
#app.dicht .sidebar .rail{display:flex}
#app.dicht .sidebar .brand,
#app.dicht .sidebar nav,
#app.dicht .sidebar .sidefoot{display:none}
.sidebar .vol{display:flex; flex-direction:column; min-height:0; flex:1}

/* ---------- main ---------- */
main{overflow-y:auto; min-height:0; min-width:0; scrollbar-gutter:stable;
  display:flex; flex-direction:column}
main.vol{overflow:hidden}
#inhoud{flex:1; min-height:0; display:flex; flex-direction:column}
#inhoud > *{flex:none}
main.vol #inhoud > .paneelvol{flex:1; min-height:0}

.pagina{width:100%; max-width:1560px; margin:0 auto;
  padding:clamp(26px,3.2vw,44px) clamp(22px,3.4vw,48px) 80px;
  animation:opkomst .32s ease both}
@keyframes opkomst{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.paginakop{margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--lijn)}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--messing); margin-bottom:10px}
h1.paginatitel{font-family:"Prata",Georgia,serif; font-weight:400; font-size:clamp(26px,2.6vw,34px);
  line-height:1.2; margin-bottom:8px}
.paginasub{color:var(--inkt-zacht); font-size:15px; max-width:74ch}

/* full-bleed system view: slim toolbar on top, the werkbank fills the rest */
.paneelvol{display:flex; flex-direction:column; min-height:0;
  animation:opkomst .32s ease both}
.werkbalk{
  flex:none; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px clamp(16px,2vw,26px); border-bottom:1px solid var(--lijn);
  background:color-mix(in srgb, var(--ivoor) 86%, white);
}
.werkbalk .paginatitel{font-family:"Prata",Georgia,serif; font-size:17px; margin:0}
.werkbalk .scheiding{flex:1}
.werkbalk .paginasub{font-size:12.5px; max-width:none}
.paneelvol .embedkader{flex:1; min-height:0; width:100%; height:auto; border:none;
  border-radius:0; background:var(--wit)}

/* ---------- cards, tables, chips ---------- */
.kaartrooster{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px}
.kaart{background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r-l);
  padding:22px 24px; box-shadow:var(--schaduw-1)}
.kaart.klikbaar{cursor:pointer;
  transition:border-color var(--vlot), box-shadow var(--vlot), transform var(--vlot)}
.kaart.klikbaar:hover{border-color:rgba(168,131,74,.55); box-shadow:var(--schaduw-2);
  transform:translateY(-2px)}
.kaarttitel{font-family:"Prata",Georgia,serif; font-size:17.5px; margin-bottom:6px}
.kaarttekst{color:var(--inkt-zacht); font-size:13.5px}

.chip{display:inline-flex; align-items:center; gap:7px;
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.09em;
  border:1px solid var(--lijn); border-radius:999px; padding:4px 11px;
  color:var(--inkt-zacht); text-transform:uppercase; background:var(--wit)}
.chip .led{width:6px; height:6px; border-radius:50%; background:var(--messing)}
.chip.ok .led{background:var(--groen-ok); box-shadow:0 0 5px rgba(62,107,82,.5)}
.chip.uit .led{background:var(--rood)}

.tabel{width:100%; border-collapse:separate; border-spacing:0; background:var(--wit);
  border:1px solid var(--lijn); border-radius:var(--r-m); overflow:hidden;
  box-shadow:var(--schaduw-1)}
.tabel th{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--inkt-zacht); text-align:left;
  padding:11px 15px; border-bottom:1px solid var(--lijn-zwaar); font-weight:500;
  background:color-mix(in srgb, var(--ivoor) 45%, white)}
.tabel td{padding:11px 15px; border-bottom:1px solid var(--lijn); font-size:13.5px;
  vertical-align:top}
.tabel tbody tr{transition:background var(--vlot)}
.tabel tbody tr:hover{background:rgba(168,131,74,.05)}
.tabel tr:last-child td{border-bottom:none}
.tabel td.mono{white-space:nowrap}

.knop{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  background:var(--diepgroen); color:var(--ivoor); border:1px solid var(--diepgroen);
  border-radius:10px; font-family:"Figtree",sans-serif; font-size:13.5px; font-weight:500;
  padding:10px 19px; box-shadow:var(--schaduw-1);
  transition:background var(--vlot), box-shadow var(--vlot), transform var(--vlot),
    border-color var(--vlot);
}
.knop:hover{background:var(--flesgroen); box-shadow:var(--schaduw-2); transform:translateY(-1px)}
.knop:active{transform:translateY(0); box-shadow:var(--schaduw-1)}
.knop[disabled]{opacity:.5; cursor:default; transform:none; box-shadow:none}
.knop.secundair{background:transparent; color:var(--inkt); border:1px solid var(--lijn-zwaar);
  box-shadow:none}
.knop.secundair:hover{border-color:var(--messing); background:rgba(168,131,74,.06);
  box-shadow:none; transform:translateY(-1px)}

.veld{width:100%; background:var(--wit); border:1px solid var(--lijn-zwaar);
  border-radius:10px; padding:10px 13px; font-family:"Figtree",sans-serif; font-size:14px;
  color:var(--inkt); transition:border-color var(--vlot), box-shadow var(--vlot)}
.veld:focus{outline:none; border-color:var(--messing);
  box-shadow:0 0 0 3px rgba(168,131,74,.16)}
select.veld{appearance:auto; cursor:pointer}

.monoblok{background:var(--diepgroen); color:var(--ivoor); border-radius:var(--r-m);
  font-family:"IBM Plex Mono",monospace; font-size:12px; line-height:1.7;
  padding:17px 19px; overflow-x:auto; white-space:pre-wrap; box-shadow:var(--schaduw-1)}
.notitie{border-left:3px solid var(--messing); background:var(--ivoor-2);
  border-radius:0 var(--r-s) var(--r-s) 0;
  padding:12px 16px; font-size:13.5px; color:var(--inkt-zacht)}
.foutmelding{border-left:3px solid var(--rood); background:#F3E5E1;
  border-radius:0 var(--r-s) var(--r-s) 0;
  padding:12px 16px; font-size:13.5px; color:var(--rood)}

.metriek{background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r-m);
  padding:17px 19px; box-shadow:var(--schaduw-1)}
/* Stat numerals in Figtree with tabular figures: Prata's "1" is a bare stroke
   and "14" reads as "l4" at tile size. Prata stays on headings (doc 11). */
.metriek .cijfer{font-family:"Figtree",sans-serif; font-weight:600; font-size:27px;
  line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:.01em;
  color:var(--diepgroen)}
.metriek .label{font-family:"IBM Plex Mono",monospace; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--inkt-zacht); margin-top:7px}

.laadindicator{color:var(--inkt-zacht); font-family:"IBM Plex Mono",monospace;
  font-size:12px; padding:24px 0}
.laadindicator::after{content:""; display:inline-block; width:5px; height:5px; margin-left:8px;
  border-radius:50%; background:var(--messing); vertical-align:2px;
  animation:pols 1s ease-in-out infinite}
@keyframes pols{0%,100%{opacity:.25; transform:scale(.8)} 50%{opacity:1; transform:scale(1.15)}}
.sectiekop{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--messing); margin:32px 0 13px}
hr.lijn{border:none; border-top:1px solid var(--lijn); margin:26px 0}

.embedkader{width:100%; height:calc(100dvh - 220px); min-height:560px;
  border:1px solid var(--lijn); border-radius:var(--r-m); background:var(--wit);
  box-shadow:var(--schaduw-1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}