/* ============================================================
   KDMN — de schil (steen 4). Stijl overgenomen uit de goedgekeurde
   mockup c:\dev\kdmn-mockup-werkruimtes.html.

   Licht is de basis (eis van Kaan), donker komt er bovenop: één keer
   via prefers-color-scheme (alleen als er geen expliciete lichte keuze
   is) en één keer via [data-theme="dark"] (de keuze in het menu).
   Elke kleur staat in :root vóórdat een media- of [data-theme]-blok
   hem herdefinieert — ook de werkruimtekleuren.
   ============================================================ */
:root {
  color-scheme: light;

  /* Neutralen met een lichte teal-bias, afgeleid van de accent */
  --ground:      #f7f9fa;
  --surface:     #ffffff;
  --surface-2:   #eef2f4;
  --surface-3:   #e2e9ec;
  --ink:         #10222a;
  --ink-2:       #455d67;
  --ink-3:       #5c757f;
  --line:        #d5dfe4;
  --line-strong: #b3c3ca;

  /* Accent: diep teal. Uitsluitend merk + interactie, nooit een status. */
  --accent:      #00697a;
  --accent-ink:  #ffffff;
  --accent-soft: #dcedef;
  --accent-line: #8dc0c8;

  /* Semantisch: los van de accent. Dit zijn echte statuswaarden. */
  --ok:    #17643c;  --ok-bg:   #ddf0e6;  --ok-line:   #6bb894;
  --warn:  #8f4d0c;  --warn-bg: #f9e7d2;  --warn-line: #d3a468;
  --crit:  #9c2820;  --crit-bg: #f9e0de;  --crit-line: #db958e;
  --plan:  #33478f;  --plan-bg: #e2e6f5;  --plan-line: #97a5d4;
  --idle:  #4e646d;  --idle-bg: #e6ecee;  --idle-line: #b0c0c6;

  /* Werkruimtes — tokens, geen losse hex in de data */
  --wr-backoffice: #6a3fa3;
  --wr-planning:   #00697a;
  --wr-prestaties: #17643c;
  --wr-logboek:    #8f4d0c;
  --wr-beheer:     #4a626c;
  --wr-veld:       #9c2820;

  --rail:      #10222a;
  --rail-ink:  #cfe0e5;
  --rail-hi:   #1d3b45;
  --scrim:     rgba(16,34,42,.34);

  --r-sm: 4px; --r-md: 6px; --r-lg: 8px;
  --shadow-sheet: 0 8px 40px rgba(16,34,42,.18);
  --shadow-pop:   0 4px 18px rgba(16,34,42,.15);

  --t-xs: 11px; --t-sm: 12px; --t-md: 13px; --t-lg: 15px; --t-xl: 20px; --t-2xl: 28px;

  --h-top: 48px;

  --font-ui:   "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:#0c161b; --surface:#121f25; --surface-2:#1b2c33; --surface-3:#24393f;
    --ink:#e6eff2; --ink-2:#aec2c9; --ink-3:#8ba4ac;
    --line:#284049; --line-strong:#3d5c67;
    --accent:#5cc0d1; --accent-ink:#052026; --accent-soft:#14343c; --accent-line:#2f6874;
    --ok:#7ad6a4;  --ok-bg:#102e24;  --ok-line:#2f6b4e;
    --warn:#e8ae69; --warn-bg:#32240f; --warn-line:#75542a;
    --crit:#f2938b; --crit-bg:#361b19; --crit-line:#763b34;
    --plan:#9fb0ea; --plan-bg:#1b2340; --plan-line:#41508c;
    --idle:#9db2ba; --idle-bg:#1b2a30; --idle-line:#3a4f57;
    --wr-backoffice:#b492e0; --wr-planning:#5cc0d1; --wr-prestaties:#7ad6a4; --wr-logboek:#e8ae69; --wr-beheer:#aec2c9; --wr-veld:#f2938b;
    --rail:#081216; --rail-ink:#b6ccd3; --rail-hi:#16303a;
    --scrim: rgba(0,0,0,.58);
    --shadow-sheet:0 8px 40px rgba(0,0,0,.55);
    --shadow-pop:0 4px 18px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:#0c161b; --surface:#121f25; --surface-2:#1b2c33; --surface-3:#24393f;
  --ink:#e6eff2; --ink-2:#aec2c9; --ink-3:#8ba4ac;
  --line:#284049; --line-strong:#3d5c67;
  --accent:#5cc0d1; --accent-ink:#052026; --accent-soft:#14343c; --accent-line:#2f6874;
  --ok:#7ad6a4;  --ok-bg:#102e24;  --ok-line:#2f6b4e;
  --warn:#e8ae69; --warn-bg:#32240f; --warn-line:#75542a;
  --crit:#f2938b; --crit-bg:#361b19; --crit-line:#763b34;
  --plan:#9fb0ea; --plan-bg:#1b2340; --plan-line:#41508c;
  --idle:#9db2ba; --idle-bg:#1b2a30; --idle-line:#3a4f57;
  --wr-backoffice:#b492e0; --wr-planning:#5cc0d1; --wr-prestaties:#7ad6a4; --wr-logboek:#e8ae69; --wr-beheer:#aec2c9; --wr-veld:#f2938b;
  --rail:#081216; --rail-ink:#b6ccd3; --rail-hi:#16303a;
  --scrim: rgba(0,0,0,.58);
  --shadow-sheet:0 8px 40px rgba(0,0,0,.55);
  --shadow-pop:0 4px 18px rgba(0,0,0,.45);
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
html { scrollbar-color: var(--line-strong) var(--ground); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--t-md); line-height: 1.45;
  -webkit-font-smoothing: antialiased; caret-color: var(--accent);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
/* De rail is donker: daar is de accent te zwak als focusring. */
.rail :focus-visible { outline-color: var(--rail-ink); }
/* [hidden] moet winnen van display:flex/grid op dezelfde elementen. */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Loginscherm ----------
   Eén kaart op de --ground, dezelfde tokens en typografie als het frame. */
.login {
  min-height: 100dvh; display: grid; place-items: center;
  padding: 24px 16px; background: var(--ground);
}
@supports not (height: 100dvh) { .login { min-height: 100vh; } }
.login-kaart {
  width: 100%; max-width: 400px; margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-pop); padding: 30px 28px 26px;
}
.woordmerk { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.woordmerk-blok {
  width: 38px; height: 38px; border-radius: 8px; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-family: var(--font-data); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .02em;
}
.woordmerk-naam { font-weight: 600; font-size: var(--t-lg); letter-spacing: -.01em; line-height: 1.2; }
.woordmerk-naam small { display: block; font-weight: 400; font-size: var(--t-sm); color: var(--ink-2); letter-spacing: 0; }
.login-kaart h1 { margin: 0 0 4px; font-size: var(--t-xl); font-weight: 600; letter-spacing: -.01em; }
.login-uitleg { margin: 0 0 18px; color: var(--ink-2); font-size: var(--t-md); }

.veld { display: grid; gap: 6px; margin-top: 14px; }
.veld label { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.veld input, .veld select {
  width: 100%; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); padding: 0 11px; font-size: 14px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.veld input::placeholder { color: var(--ink-3); }
.veld input:focus, .veld select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.veld input:disabled, .veld select:disabled { background: var(--surface-2); color: var(--ink-3); }
.veld-uitleg { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }

.login-melding, .login-fout {
  margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r-md); font-size: var(--t-sm); line-height: 1.4;
}
.login-melding { background: var(--idle-bg); border: 1px solid var(--idle-line); color: var(--ink); }
.login-fout { background: var(--crit-bg); border: 1px solid var(--crit-line); color: var(--crit); font-weight: 500; }
.login-fout:empty { display: none; }

.login-knop { width: 100%; height: 42px; margin-top: 20px; justify-content: center; font-size: 14px; }
.login-voet { margin: 18px 0 0; font-size: var(--t-sm); color: var(--ink-3); text-align: center; }

/* Op een telefoon: 16px in invoervelden, anders zoomt iOS bij focus. */
@media (max-width: 820px) {
  .login { padding: max(24px, 8vh) 12px 16px; align-items: start; }
  .login-kaart { padding: 26px 20px 22px; }
  .veld input, .veld select { font-size: 16px; height: 44px; }
  .login-knop { height: 46px; }
}

/* ---------- App-frame ----------
   Eigen hoogte via dvh, niet via een flex-keten vanaf <body>. Zodra er
   een wrapper-div tussen body en .app zit, breekt zo'n keten en klapt
   alles naar hoogte 0 — een lege pagina die eruitziet als een crash. */
.app { height: 100dvh; display: flex; overflow: hidden; }
@supports not (height: 100dvh) { .app { height: 100vh; } }

.rail {
  width: 52px; flex: 0 0 52px; background: var(--rail); color: var(--rail-ink);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 0; z-index: 40;
}
.rail-logo {
  width: 32px; height: 32px; border-radius: 7px; background: var(--accent);
  color: var(--accent-ink); display: grid; place-items: center;
  font-weight: 700; font-size: var(--t-xs); margin-bottom: 8px; font-family: var(--font-data);
}
.rail-btn {
  width: 38px; height: 38px; border: 0; background: transparent; color: var(--rail-ink);
  border-radius: 7px; display: grid; place-items: center; cursor: pointer;
  transition: background .12s ease, color .12s ease; position: relative; text-decoration: none;
}
.rail-btn:hover { background: var(--rail-hi); color: #fff; }
.rail-btn[aria-current="page"] { background: var(--rail-hi); color: #fff; }
.rail-btn[aria-current="page"]::before {
  content: ""; position: absolute; left: -7px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--wr-kleur, var(--accent));
}
.rail-btn svg { width: 18px; height: 18px; }
.rail-spacer { flex: 1; }

/* Werkruimtepaneel. Geen width-transitie: dat is een layout-animatie
   en die schokt op een tabel van 1400px breed. */
.panel {
  width: 236px; flex: 0 0 236px; background: var(--surface);
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
.app.panel-dicht .panel { display: none; }
.panel-kop {
  height: var(--h-top); flex: 0 0 var(--h-top); display: flex; align-items: center;
  gap: 6px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line);
}
.panel-kop h2 {
  margin: 0; font-size: var(--t-xs); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-2); flex: 1; white-space: nowrap;
}
.ikoon-knop {
  width: 30px; height: 30px; border: 0; background: transparent; color: var(--ink-2);
  border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer; flex: 0 0 30px;
}
.ikoon-knop:hover { background: var(--surface-2); color: var(--ink); }
.ikoon-knop svg { width: 15px; height: 15px; }

.werkruimtes { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.wr {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: var(--r-md);
  border: 0; background: transparent; cursor: pointer; text-align: left; width: 100%;
  color: var(--ink-2); font-weight: 500; white-space: nowrap; text-decoration: none;
}
.wr:hover { background: var(--surface-2); color: var(--ink); }
.wr[aria-current="page"] { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.wr-punt { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; background: var(--wr-kleur, var(--accent)); }
.wr small { margin-left: auto; color: var(--ink-3); font-weight: 400; font-family: var(--font-data); font-size: var(--t-xs); }

.panel-sectie {
  padding: 14px 9px 5px; font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.borden { padding: 0 8px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; scrollbar-width: thin; }
.bord {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--r-md);
  border: 0; background: transparent; cursor: pointer; text-align: left; width: 100%;
  color: var(--ink-2); white-space: nowrap; font-size: var(--t-sm); text-decoration: none;
}
.bord:hover { background: var(--surface-2); color: var(--ink); }
.bord[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.bord svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--ink-3); }
.bord[aria-current="page"] svg { color: var(--ink-2); }

/* ---------- Hoofdgebied ---------- */
.hoofd { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--ground); position: relative; }

.topbar {
  height: var(--h-top); flex: 0 0 var(--h-top); background: var(--surface);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 0 14px;
}
.kruimels { display: flex; align-items: center; gap: 7px; min-width: 0; }
.kruimels h1 { margin: 0; font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.kruimels .scheid { color: var(--ink-3); }
.kruimels .bord-naam { color: var(--ink-2); font-size: var(--t-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent);
  color: var(--accent-ink); display: grid; place-items: center;
  font-size: var(--t-xs); font-weight: 600; font-family: var(--font-data); flex: 0 0 28px;
  border: 0; padding: 0;
}
button.avatar { cursor: pointer; }
button.avatar:hover { filter: brightness(1.1); }

/* Elk scherm is zelf een flex-kolom. Zonder dit krijgt een tabel-scroll
   nooit een begrensde hoogte en doet position:sticky niets. */
#scherm { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
  border: 1px solid transparent; background: transparent; color: var(--ink-2);
  border-radius: var(--r-md); cursor: pointer; white-space: nowrap; font-size: var(--t-sm);
  text-decoration: none;
}
.knop:hover { background: var(--surface-2); color: var(--ink); }
.knop svg { width: 14px; height: 14px; }
.knop-primair { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.knop-primair:hover { background: var(--accent); filter: brightness(1.08); color: var(--accent-ink); }
.knop-lijn { border-color: var(--line-strong); }
.knop:disabled, .knop[aria-disabled="true"] { opacity: .6; cursor: default; filter: none; }

/* ---------- Popup (menu bij een anker) ---------- */
.pop {
  position: fixed; z-index: 200; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 5px; min-width: 220px;
  max-width: min(320px, calc(100vw - 16px)); outline: none;
}
.pop-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px;
  border: 0; background: transparent; border-radius: var(--r-sm); cursor: pointer;
  text-align: left; color: var(--ink); font-size: var(--t-sm); font-weight: 400;
}
.pop-item:hover { background: var(--surface-2); }
.pop-item[disabled] { color: var(--ink-3); cursor: default; }
.pop-item[disabled]:hover { background: transparent; }
.pop-item svg { width: 14px; height: 14px; color: var(--ink-3); flex: 0 0 14px; }
.pop-item input[type="radio"] { margin: 0; width: 15px; height: 15px; accent-color: var(--accent); flex: 0 0 15px; }
.pop-item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.pop-item:has(input:checked) { font-weight: 600; }
.pop-item:has(input:checked) svg { color: var(--accent); }
.pop-scheid { height: 1px; background: var(--line); margin: 4px 2px; }
.pop-kop {
  padding: 7px 9px 5px; font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.pop-vast { padding: 7px 9px; color: var(--ink-2); font-size: var(--t-sm); }
.pop-wie { padding: 8px 9px 6px; }
.pop-wie b { display: block; font-weight: 600; font-size: var(--t-md); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-wie span { display: block; color: var(--ink-2); font-size: var(--t-sm); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 70px);
  background: var(--ink); color: var(--ground); padding: 11px 16px; border-radius: 7px;
  font-size: var(--t-sm); z-index: 300; box-shadow: var(--shadow-pop); opacity: 0;
  transition: transform .2s ease, opacity .2s ease; pointer-events: none; max-width: 90vw;
}
.toast.zichtbaar { transform: translate(-50%, 0); opacity: 1; }
.app.veld ~ .toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Schermen zonder tabel: de plek en de kaart ---------- */
.plek { padding: 20px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; }
.blok { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 16px; }
.blok-kop { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.blok-kop h3 { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.blok-kop p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }

/* In aanbouw: één kaart per bord, met het accent van de werkruimte. */
.bouw {
  max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 22px 18px;
}
.bouw-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bouw-kop h2 { margin: 0; font-size: var(--t-xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.bouw-wat { margin: 0; font-size: 14px; color: var(--ink); max-width: 60ch; }
.bouw-status {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: var(--t-sm);
}
.bouw-status svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--ink-3); margin-top: 1px; }
.bouw-status p { margin: 0; }
.bouw-status a { color: var(--accent); font-weight: 500; }
.pil {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 20px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em; margin-left: auto;
  background: var(--idle-bg); color: var(--idle); border: 1px solid var(--idle-line);
}

/* Geen werkruimte voor deze rol: dezelfde kaart, andere boodschap. */
.leeg { max-width: 480px; }
.leeg .knop { margin-top: 14px; }

/* ---------- Smal scherm ---------- */
@media (max-width: 820px) {
  .app { position: relative; }
  .panel { position: absolute; left: 52px; top: 0; bottom: 0; z-index: 45; box-shadow: var(--shadow-pop); }
  .plek { padding: 14px 12px; }
}

/* ---------- Veldmodus: één werkruimte op een telefoon ----------
   Monteurs dienen alleen op hun mobiel in — nooit op een laptop. Een
   52px-brede werkruimtebalk waar toch niets in staat is dan verspilde
   ruimte. In plaats daarvan een tabbalk onderaan, binnen duimbereik. */
.app.veld .rail, .app.veld .panel { display: none; }
.app.veld #paneel-open { display: none; }
.app.veld .topbar { padding: 0 12px; }
.app.veld .kruimels .bord-naam { font-size: 17px; font-weight: 600; color: var(--ink); }
.app.veld .plek { padding: 14px 12px calc(64px + env(safe-area-inset-bottom, 0px)); }

.tabbar {
  display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app.veld .tabbar { display: flex; }
.tab {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 10px; color: var(--ink-2); font-size: var(--t-xs); font-weight: 500;
  min-height: 56px; text-decoration: none;
}
.tab svg { width: 21px; height: 21px; }
.tab[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* ---------- Ingebedde platform-pagina's (werkruimtes/ingebed.js, steen 7) ---------- */
.plek-ingebed { padding: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.ingebed-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--surface); }
.ingebed-laad { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--ink-3); font-size: var(--t-md); background: var(--ground); pointer-events: none; }
.ingebed-laad button { pointer-events: auto; }
.app.veld .plek-ingebed { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }