/* Horecast beheer, stijl "Nachtdienst" (Arthur 29/10/2026): de keuken na sluitingstijd. Grafiet en staal in weinig
   licht, met één kleur: het blauw van de waakvlam (= het draait, live). Glas met een haarfijne rand, cijfers in mono
   zoals een keukenscherm (KDS). Kenmerken: tickets als KDS-bonnen, de modulekaart als led-matrix, een statuseiland.
   Mobiel eerst (tabbalk); vanaf 900px een zijbalk. Geen inline stijl (strikte CSP). Lettertypes: fonts/LEESMIJ.txt.
   Diepte: één strategie, gelaagd glas (inset-lichtrand + 1px ring), geen harde schaduwen. Ruimte: basis 4px. */

@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* vlakken: de vloer, en daarop planken glas die per niveau een tikje lichter worden */
  --vloer: #08090b; --vloer-2: #0b0c0f;
  --plank: rgba(255, 255, 255, .035); --plank-2: rgba(255, 255, 255, .06); --plank-3: rgba(255, 255, 255, .1);
  --naad: rgba(255, 255, 255, .07); --naad-sterk: rgba(255, 255, 255, .14);
  /* inkt in vier niveaus */
  --inkt: #eef0f4; --inkt-2: #b9bdc8; --inkt-3: #878d9a; --inkt-4: #5a606c;
  /* de waakvlam: het enige accent */
  --vlam: #7b96ff; --vlam-2: #8fe3ff; --op-vlam: #060812;
  --vlam-zacht: rgba(123, 150, 255, .14);
  /* status (lichtjes ontzadigd voor donker) */
  --goed: #45d494; --let: #f0b257; --mis: #ff7070; --wacht: #ab97ff; --stil: #3a3e47;
  --focus: #8fe3ff;
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-s: 10px; --r: 16px; --r-l: 20px;
  --glas: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .065);
  --glas-hoog: inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 0 1px rgba(143, 227, 255, .22), 0 16px 40px -24px rgba(123, 150, 255, .5);
  --eas: cubic-bezier(.23, 1, .32, 1);
  --eas-io: cubic-bezier(.77, 0, .175, 1);
  --tab-h: 68px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; background: var(--vloer); }
body { margin: 0; min-height: 100dvh; color: var(--inkt); font-family: var(--font); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(1100px 520px at 72% -12%, rgba(123, 150, 255, .15), transparent 62%),
    radial-gradient(700px 420px at -10% 4%, rgba(143, 227, 255, .06), transparent 60%),
    var(--vloer);
  background-attachment: fixed; }
/* korrel: een vaste laag ruis zodat het donker niet plastiek oogt */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#app { position: relative; z-index: 1; }
a { color: inherit; }
a, button, label, summary, select, input { touch-action: manipulation; }
code, kbd { font-family: var(--mono); font-size: .84em; }
code { color: var(--inkt-2); background: var(--plank-2); padding: 1px 6px; border-radius: 6px; }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--naad-sterk), inset 0 -1px 0 var(--naad-sterk);
  color: var(--inkt-3); font-size: 11px; line-height: 1; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-size: clamp(30px, 8.4vw, 46px); line-height: 1.04; letter-spacing: -.045em; font-weight: 600; }
h2 { font-size: 18px; line-height: 1.25; letter-spacing: -.02em; font-weight: 600; }
h3 { font-size: 16px; line-height: 1.3; letter-spacing: -.01em; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
.meta { color: var(--inkt-3); font-size: 14px; }
.tab { font-variant-numeric: tabular-nums; }
.icoon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--inkt); color: var(--vloer); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
::selection { background: var(--vlam); color: var(--op-vlam); }

/* ------------------------------------------------------------ logo */
.logo { width: 32px; height: 32px; flex: none; display: block; }
.logo-vlak { fill: #11131a; stroke: rgba(143, 227, 255, .35); stroke-width: 1; }
.logo-lijn, .logo-golf { fill: none; stroke: var(--inkt); stroke-width: 2.2; stroke-linecap: round; }
.logo-golf { stroke: var(--vlam-2); stroke-width: 1.8; }
.logo-punt { fill: var(--vlam-2); }
.merk { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.merknaam { font-weight: 600; letter-spacing: -.02em; line-height: 1.05; font-size: 16px; }
.merknaam small { display: block; font-family: var(--mono); font-weight: 500; font-size: 10px; color: var(--inkt-3); letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }

/* ------------------------------------------------------------ de schil */
.bh { min-height: 100dvh; padding-bottom: calc(var(--tab-h) + 28px + env(safe-area-inset-bottom)); }
.bh-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  background: rgba(8, 9, 11, .62); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border-bottom: 1px solid var(--naad); }
.bh-ik { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.avatar { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 14px;
  background: linear-gradient(140deg, #2a3150, #161a26); box-shadow: var(--glas); color: var(--vlam-2); flex: none; }
.avatar.klein { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.zoekknop { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 10px;
  border: 0; border-radius: 12px; background: rgba(255, 255, 255, .03); box-shadow: var(--glas); color: var(--inkt-2); font: inherit; font-size: 14px; cursor: pointer;
  transition: background-color 160ms var(--eas), color 160ms var(--eas), transform 120ms var(--eas); }
.zoekknop:hover { color: var(--inkt); background: var(--plank-2); }
.zoekknop:active { transform: scale(.97); }
.zoekknop .zk-tekst, .zoekknop kbd { display: none; }
.ikoonknop { min-width: 44px; padding: 0 !important; }
.bh-nav { display: none; }
.bh-main { padding: 12px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); display: grid; gap: 32px; align-content: start;
  width: 100%; max-width: 1240px; margin: 0 auto; min-width: 0; outline: none; }
.bh-main > * { min-width: 0; }

/* tabbalk op de gsm: zwevend glas; de actieve tab licht op in het blauw van de vlam */
.tabbalk { position: fixed; z-index: 21; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); height: var(--tab-h);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 6px; border-radius: 24px;
  background: rgba(18, 20, 26, .74); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .07), 0 20px 50px -20px rgba(0, 0, 0, .9); }
.tabbalk a { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; border-radius: 18px; color: var(--inkt-3);
  font-size: 11px; font-weight: 500; text-decoration: none; letter-spacing: .01em; transition: color 160ms var(--eas), background-color 200ms var(--eas), transform 120ms var(--eas); }
.tabbalk a:active { transform: scale(.94); }
.tabbalk a .icoon { width: 22px; height: 22px; }
.tabbalk a.on { color: #fff; background: var(--vlam-zacht); }
.tabbalk a.on .icoon { color: var(--vlam-2); }

@media (min-width: 900px) {
  .bh { display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto 1fr; padding-bottom: 0; }
  .bh-top { grid-column: 1 / -1; padding: 12px 24px; }
  .tabbalk { display: none; }
  .zoekknop { padding: 0 8px 0 12px; min-width: 280px; justify-content: flex-start; color: var(--inkt-3); }
  .zoekknop .zk-tekst { display: inline; }
  .zoekknop kbd { display: inline-grid; margin-left: auto; }
  .bh-main { padding: 32px 40px 80px; gap: 44px; }
  .bh-nav { display: flex; flex-direction: column; position: sticky; top: 69px; align-self: start; height: calc(100dvh - 69px); overflow-y: auto; padding: 12px 12px 16px;
    border-right: 1px solid var(--naad); }
  .bh-nav .kop { padding: 18px 12px 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt-4); }
  .bh-nav a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border-radius: 10px; color: var(--inkt-2);
    font-weight: 500; font-size: 14px; text-decoration: none; transition: background-color 140ms var(--eas), color 140ms var(--eas); }
  .bh-nav a .icoon { width: 18px; height: 18px; color: var(--inkt-3); transition: color 140ms var(--eas); }
  .bh-nav a:hover { background: var(--plank-2); color: var(--inkt); }
  .bh-nav a.on { background: var(--plank-2); color: #fff; box-shadow: var(--glas); }
  .bh-nav a.on .icoon { color: var(--vlam-2); }
  .bh-nav a.on::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--vlam-2);
    box-shadow: 0 0 12px var(--vlam-2); }
  .bh-nav a.later { color: var(--inkt-3); }
  .bh-nav .tag { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-4);
    box-shadow: inset 0 0 0 1px var(--naad-sterk); padding: 2px 6px; border-radius: 5px; }
  .nav-voet { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 500; }
  .nav-voet small { display: block; font-size: 12px; color: var(--inkt-3); font-weight: 400; }
  .bh-top .avatar { display: none; }
}
.nav-voet { display: none; }
@media (min-width: 900px) { .nav-voet { display: flex; } }

/* binnenkomen bij een nieuwe route: blokken schuiven zacht omhoog, na elkaar (alleen opacity + transform) */
@keyframes bh-in { from { opacity: 0; transform: translateY(8px); } }
.bh-main.in > * { animation: bh-in 380ms var(--eas) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.bh-main.in .lijst-bonnen > *, .bh-main.in .tijdlijn > li { animation: bh-in 380ms var(--eas) backwards; animation-delay: calc(var(--j, 0) * 30ms + 120ms); }

/* ------------------------------------------------------------ koppen */
.kop-blok { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.kop-blok > div { display: grid; gap: 8px; }
.kop-blok .meta { font-size: 15px; max-width: 60ch; }
.oog { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-3); }
.oog .icoon { width: 14px; height: 14px; }
.oog code { text-transform: none; letter-spacing: 0; background: none; padding: 0; color: var(--inkt-2); font-size: 12px; }
.kop-stand { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 99px; box-shadow: var(--glas); font-size: 14px; color: var(--inkt-2); }
.kop-stand b { font-family: var(--mono); font-weight: 500; color: var(--goed); }
.kop-stand.let_op b { color: var(--let); }
.blok { display: grid; gap: 14px; align-content: start; }
.blok-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 44px; }
.blok-kop h2 { margin-right: auto; }
.blok-link { display: inline-flex; align-items: center; gap: 4px; color: var(--inkt-3); font-size: 14px; font-weight: 500; text-decoration: none; min-height: 44px; transition: color 140ms var(--eas); }
.blok-link:hover { color: var(--vlam-2); }
.blok-link .icoon { width: 16px; height: 16px; transition: transform 200ms var(--eas); }
.blok-link:hover .icoon { transform: translateX(2px); }
.teller { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--plank-2);
  color: var(--inkt-3); font-size: 12px; font-weight: 500; font-family: var(--mono); }
.terug { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; margin: -8px 0 -20px; color: var(--inkt-3); text-decoration: none; font-weight: 500; font-size: 14px; }
.terug:hover { color: var(--inkt); }
.terug .icoon { width: 18px; height: 18px; transition: transform 200ms var(--eas); }
.terug:hover .icoon { transform: translateX(-2px); }

/* ------------------------------------------------------------ held (begroeting + ring) */
.held { display: grid; gap: 24px; align-items: center; }
.held-tekst { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.held h1 em { font-style: normal; background: linear-gradient(100deg, #fff 10%, var(--vlam-2) 60%, var(--vlam) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.samenvatting { font-size: 18px; line-height: 1.45; color: var(--inkt-2); max-width: 44ch; }
.samenvatting b { color: var(--inkt); font-weight: 600; }
.samenvatting a { text-decoration: underline; text-decoration-color: rgba(143, 227, 255, .45); text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: text-decoration-color 160ms var(--eas); }
.samenvatting a:hover { text-decoration-color: var(--vlam-2); }
.held-ring { position: relative; justify-self: stretch; display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; border-radius: var(--r-l);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); box-shadow: var(--glas); }
.held-ring .ring { width: 76px; height: 76px; flex: none; }
.ring-tekst { display: grid; gap: 2px; }
.ring-tekst b { font-size: 34px; line-height: 1; font-weight: 500; letter-spacing: -.04em; }
.ring-tekst b small { font-size: .45em; letter-spacing: 0; color: var(--inkt-3); margin-left: 2px; }
.ring-tekst > span { font-size: 13px; color: var(--inkt-3); }
.ring { display: block; }
.ring-spoor { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 9; }
.ring-vol { fill: none; stroke: var(--vlam-2); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(143, 227, 255, .45)); }
@keyframes ring-in { from { stroke-dasharray: 0 100; } }
.ring-vol { animation: ring-in 1100ms var(--eas) 120ms backwards; }
@media (min-width: 900px) {
  .held { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
  .held-ring { width: 200px; height: 200px; padding: 0; justify-self: end; display: block; background: none; box-shadow: none; }
  .held-ring::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(123, 150, 255, .3), transparent); }
  .held-ring .ring { width: 100%; height: 100%; }
  .ring-tekst { position: absolute; inset: 0; place-content: center; text-align: center; }
  .ring-tekst b { font-size: 54px; }
  .ring-tekst > span { font-size: 12px; max-width: 110px; line-height: 1.3; justify-self: center; }
  .samenvatting { font-size: 20px; }
}

/* het statuseiland */
.eiland { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 14px 0 12px; border-radius: 99px; text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); box-shadow: var(--glas);
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .02em; transition: box-shadow 200ms var(--eas), transform 120ms var(--eas); }
a.eiland:hover { box-shadow: var(--glas-hoog); }
a.eiland:active { transform: scale(.98); }
.ei-sep { width: 1px; height: 14px; background: var(--naad-sterk); }
.ei-meta { color: var(--inkt-3); }
.puls { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--goed); color: var(--goed); flex: none; box-shadow: 0 0 10px currentColor; }
.puls::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: puls 2.6s var(--eas) infinite; }
@keyframes puls { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3); opacity: 0; } }
.let_op .puls { background: var(--let); color: var(--let); }
.probleem .puls { background: var(--mis); color: var(--mis); }
.onbekend .puls { background: var(--stil); color: transparent; }
.onbekend .puls::after { animation: none; }

/* ------------------------------------------------------------ tegels: elk nodigt uit om door te klikken */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tegel { position: relative; display: grid; align-content: start; gap: 6px; min-width: 0; padding: 16px; border-radius: var(--r); text-decoration: none; color: var(--inkt);
  overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); box-shadow: var(--glas);
  transition: transform 160ms var(--eas), box-shadow 220ms var(--eas); }
a.tegel:hover { box-shadow: var(--glas-hoog); }
a.tegel:active { transform: scale(.98); }
.tegel::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 240ms var(--eas);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(123, 150, 255, .14), transparent 60%); }
.tegel:hover::before { opacity: 1; }
.tg-label { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-3); }
.tg-label .icoon { width: 15px; height: 15px; }
.tg-pijl { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--inkt-3);
  background: var(--plank-2); transition: transform 220ms var(--eas), color 160ms var(--eas), background-color 160ms var(--eas); }
.tg-pijl .icoon { width: 15px; height: 15px; }
a.tegel:hover .tg-pijl { color: var(--op-vlam); background: var(--vlam-2); transform: translate(1px, -1px); }
.tg-getal { font-size: 40px; line-height: 1; font-weight: 500; letter-spacing: -.045em; margin-top: 8px; }
.tg-getal small { font-size: .5em; color: var(--inkt-3); letter-spacing: -.01em; }
.tg-sub { font-size: 13px; color: var(--inkt-3); }
.tegel .segmenten, .tegel .staafjes { margin-top: 10px; }
.bento .tg-tickets, .bento .tg-servers { grid-column: span 2; }
.bento-2 .tegel { grid-column: auto !important; }
@media (min-width: 900px) {
  .bento { grid-template-columns: 1fr 1.25fr 1.5fr 1fr; gap: 16px; }
  .bento .tg-tickets, .bento .tg-servers { grid-column: auto; }
  .bento-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
  .tegel { padding: 20px; }
  .tg-getal { font-size: 48px; }
}
.segmenten { display: block; width: 100%; height: 6px; }
.seg-compleet { fill: var(--goed); } .seg-ontbreekt { fill: var(--let); } .seg-wacht { fill: var(--wacht); } .seg-fout { fill: var(--mis); } .seg-uit { fill: var(--naad-sterk); }
.staafjes { display: block; width: 100%; height: 36px; }
.staafjes .st { fill: var(--vlam); opacity: .55; }
.staafjes .st.nul { fill: var(--naad-sterk); opacity: 1; }
.staafjes .st.nu { fill: var(--vlam-2); opacity: 1; }
.stippen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.stip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--inkt-2); }
.stip i { width: 8px; height: 8px; border-radius: 50%; background: var(--stil); }
.stip.ok i { background: var(--goed); box-shadow: 0 0 8px var(--goed); } .stip.let_op i { background: var(--let); } .stip.probleem i { background: var(--mis); }

/* ------------------------------------------------------------ twee kolommen op de computer */
.duo { display: grid; gap: 32px; min-width: 0; }
.duo > * { min-width: 0; }
@media (min-width: 1200px) {
  .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; }
  .duo-klant { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .duo-ruimte { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}

/* ------------------------------------------------------------ klantkaart */
.klanten-lijst { display: grid; gap: 14px; }
.klantkaart { position: relative; display: grid; gap: 16px; padding: 18px; border-radius: var(--r-l); min-width: 0; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); box-shadow: var(--glas); transition: box-shadow 220ms var(--eas); }
.klantkaart:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .1); }
.klantkaart::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 240ms var(--eas);
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(123, 150, 255, .1), transparent 60%); }
.klantkaart:hover::before { opacity: 1; }
.kk-kop { display: flex; align-items: center; gap: 12px; }
.kk-logo { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-weight: 600; font-size: 19px; flex: none;
  background: linear-gradient(140deg, #2a3150, #12151f); box-shadow: var(--glas); color: var(--vlam-2); }
.kk-logo.groot { width: 56px; height: 56px; border-radius: 16px; font-size: 24px; }
.kk-naam { min-width: 0; flex: 1; }
.kk-naam h3 { font-size: 19px; letter-spacing: -.02em; }
.kk-link { text-decoration: none; }
.kk-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }   /* de hele kaart is aanklikbaar, knoppen liggen erboven */
.kk-naam small { display: block; }
.kk-naam code { background: none; padding: 0; color: var(--inkt-3); }
.status-stip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--inkt-2); flex: none; }
.kk-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-radius: 12px; overflow: hidden; background: var(--naad); }
.kk-cijfers > div { display: grid; gap: 2px; padding: 10px 12px; background: var(--vloer-2); }
.kk-cijfers b { font-size: 20px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-cijfers b small { font-size: .65em; color: var(--inkt-3); }
.kk-cijfers span { font-size: 12px; color: var(--inkt-3); }
.kk-acties { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------ KDS-bonnen (tickets): een gekleurde kop per soort, klappen open */
.rail { display: grid; gap: 10px; }
.bonnen { display: grid; gap: 10px; }
@media (min-width: 760px) { .bonnen { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; } }
@media (min-width: 1200px) { .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.bon { border-radius: var(--r); overflow: hidden; min-width: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); box-shadow: var(--glas);
  transition: box-shadow 220ms var(--eas); }
.bon:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .12); }
.bon > summary { display: grid; gap: 0; cursor: pointer; list-style: none; }
.bon > summary::-webkit-details-marker { display: none; }
.bon-kop { display: flex; justify-content: space-between; gap: 8px; padding: 9px 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--vlam-zacht); color: #cfd8ff; border-bottom: 1px dashed rgba(255, 255, 255, .14); }
.bon-kop time { text-transform: none; letter-spacing: 0; }
.type-fout .bon-kop { background: rgba(255, 112, 112, .15); color: #ffcaca; }
.type-vraag .bon-kop { background: rgba(240, 178, 87, .15); color: #ffdca8; }
.type-wens .bon-kop { background: rgba(171, 151, 255, .15); color: #ddd4ff; }
.bon-titel { padding: 12px 14px 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.bon-voet { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 14px 14px; font-family: var(--mono); font-size: 11.5px; color: var(--inkt-3); }
.bon-pijl { width: 16px; height: 16px; margin-left: auto; color: var(--inkt-4); transition: transform 220ms var(--eas), color 160ms var(--eas); }
.bon[open] .bon-pijl { transform: rotate(90deg); color: var(--vlam-2); }
.bon-detail { display: grid; gap: 10px; padding: 0 14px 16px; font-size: 14px; color: var(--inkt-2); }
.bon[open] .bon-detail { animation: bon-open 260ms var(--eas); }
@keyframes bon-open { from { opacity: 0; transform: translateY(-4px); } }
.bon-wacht { display: flex; gap: 8px; align-items: center; color: var(--let); }
.bon-wacht .icoon { width: 16px; height: 16px; }
.bon-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 4px 0 0; padding-top: 12px; border-top: 1px dashed var(--naad-sterk); }
.bon-dl dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-4); }
.bon-dl dd { margin: 2px 0 0; font-size: 13px; color: var(--inkt-2); overflow-wrap: anywhere; }
.bon.dicht { opacity: .66; }
.bon.dicht .bon-kop { background: var(--plank-2); color: var(--inkt-3); }

/* filterbalk (tickets) */
.filterbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; position: sticky; top: calc(61px + env(safe-area-inset-top)); z-index: 5;
  margin: -12px -16px; padding: 12px 16px; background: rgba(8, 9, 11, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
@media (min-width: 900px) { .filterbalk { top: 69px; margin: -12px 0; padding: 12px 0; } }
.kl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kl-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 99px; background: transparent; box-shadow: inset 0 0 0 1px var(--naad-sterk);
  color: var(--inkt-2); font: inherit; font-size: 13.5px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 160ms var(--eas), color 160ms var(--eas), box-shadow 160ms var(--eas); }
.kl-chip:hover { color: var(--inkt); background: var(--plank-2); }
.kl-chip.on { background: var(--vlam-zacht); color: #fff; box-shadow: inset 0 0 0 1px rgba(143, 227, 255, .35); }
.kl-chip .tab { font-family: var(--mono); font-size: 11.5px; color: var(--inkt-3); }

/* ------------------------------------------------------------ binnenkort (overzicht) en teasers */
.later-lijst { display: grid; gap: 10px; }
@media (min-width: 700px) { .later-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .later-lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.later-item { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r); text-decoration: none; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015)); box-shadow: var(--glas); transition: box-shadow 220ms var(--eas), transform 120ms var(--eas); }
.later-item:hover { box-shadow: var(--glas-hoog); }
.later-item:active { transform: scale(.98); }
.li-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--plank-2); color: var(--vlam-2); flex: none; }
.li-ico .icoon { width: 18px; height: 18px; }
.later-item b { display: block; font-size: 15px; font-weight: 600; }
.later-item small { display: block; font-size: 13px; color: var(--inkt-3); line-height: 1.4; margin-top: 2px; }
.li-pijl { width: 16px; height: 16px; margin: 10px 0 0 auto; color: var(--inkt-4); transition: transform 200ms var(--eas), color 160ms var(--eas); }
.later-item:hover .li-pijl { transform: translateX(2px); color: var(--vlam-2); }

.teaser { display: grid; gap: 28px; align-items: center; }
.teaser-tekst { display: grid; gap: 14px; justify-items: start; }
.teaser-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: var(--vlam-2);
  background: linear-gradient(140deg, #2a3150, #12151f); box-shadow: var(--glas), 0 0 40px -6px rgba(123, 150, 255, .5); }
.teaser-ico .icoon { width: 26px; height: 26px; }
.voorproef { position: relative; padding: 44px 18px 18px; border-radius: var(--r-l); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)); box-shadow: var(--glas); }
.voorproef::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8, 9, 11, .85)); pointer-events: none; }
.vp-label { position: absolute; top: 14px; left: 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--inkt-3);
  padding: 3px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--naad-sterk); }
.vp-grafiek { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.vp-grafiek i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, rgba(123, 150, 255, .5), rgba(123, 150, 255, .12)); }
.vp-grafiek i.nu { background: linear-gradient(180deg, var(--vlam-2), rgba(143, 227, 255, .2)); }
.h3 { height: 30%; } .h4 { height: 40%; } .h5 { height: 50%; } .h6 { height: 60%; } .h7 { height: 70%; } .h8 { height: 80%; } .h9 { height: 90%; } .h10 { height: 100%; }
.vp-regels { display: grid; gap: 8px; margin-top: 16px; }
.vp-regels span, .vp-lijst span, .vp-kaarten span { display: block; height: 8px; border-radius: 4px; background: var(--plank-3); }
.vp-regels span:nth-child(2) { width: 70%; } .vp-regels span:nth-child(3) { width: 45%; }
.vp-lijst { display: grid; gap: 10px; }
.vp-lijst > div { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--plank); }
.vp-lijst i { width: 26px; height: 26px; border-radius: 7px; background: var(--plank-3); flex: none; }
.vp-lijst i.rond { border-radius: 50%; }
.vp-lijst span { flex: 1; } .vp-lijst span.w0 { max-width: 60%; } .vp-lijst span.w1 { max-width: 75%; } .vp-lijst span.w2 { max-width: 50%; }
.vp-lijst b { width: 44px; height: 8px; border-radius: 4px; background: var(--vlam-zacht); margin-left: auto; }
.vp-lijst .nieuw i { background: rgba(143, 227, 255, .35); } .vp-lijst .nieuw b { background: rgba(143, 227, 255, .45); }
.vp-kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vp-kaarten > div { display: grid; gap: 8px; padding: 14px 12px; border-radius: 12px; background: var(--plank); }
.vp-kaarten i { width: 28px; height: 34px; border-radius: 4px; background: var(--plank-3); }
.vp-kaarten span.kort { width: 60%; }
.vp-kaarten b { height: 18px; width: 64px; border-radius: 99px; background: rgba(69, 212, 148, .25); margin-top: 6px; }
.vp-kaarten b.wacht { background: rgba(240, 178, 87, .25); }
@media (min-width: 900px) { .teaser { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; } }
.roadmap { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; max-width: 760px; border-radius: var(--r); overflow: hidden; box-shadow: var(--glas); }
.roadmap li { display: flex; gap: 16px; align-items: baseline; padding: 16px 18px; background: rgba(255, 255, 255, .025); }
.rm-nr { font-family: var(--mono); font-size: 12px; color: var(--vlam-2); font-weight: 500; }

/* ------------------------------------------------------------ uitleg */
.kaart { position: relative; padding: 18px; border-radius: var(--r-l); min-width: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); box-shadow: var(--glas); }
.stapel { display: grid; gap: 14px; }
.uitleg > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 10px; min-height: 28px; }
.uitleg > summary::-webkit-details-marker { display: none; }
.uitleg > summary .icoon { color: var(--vlam-2); }
.uitleg > summary::after { content: "+"; margin-left: auto; font-size: 22px; line-height: 1; color: var(--inkt-3); transition: transform 200ms var(--eas); }
.uitleg[open] > summary::after { transform: rotate(45deg); }
.uitleg ol { margin: 14px 0 10px; padding-left: 1.3em; display: grid; gap: 8px; color: var(--inkt-2); font-size: 15px; }

/* ------------------------------------------------------------ klant: kop, strip, matrix, tijdlijn, intake */
.hk-merk { display: flex; align-items: center; gap: 14px; }
.hk-merk > div { display: grid; gap: 6px; }
.held-klant .kk-acties { margin-top: 4px; }
.strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--glas); background: var(--naad); }
.strip > div { display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--vloer-2); min-width: 0; }
.strip dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-3); }
.strip dd { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; overflow-wrap: anywhere; }
.strip dd small { font-size: .6em; color: var(--inkt-3); }
.strip dd a { text-decoration: none; color: var(--vlam-2); }
.strip dd code { background: none; padding: 0; font-size: 17px; color: var(--inkt); }
.strip small { font-size: 12px; color: var(--inkt-3); }
.strip .segmenten { margin-top: 4px; }
@media (min-width: 900px) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.matrix { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-l);
  background: radial-gradient(120% 140% at 0% 0%, rgba(123, 150, 255, .06), transparent 50%), rgba(255, 255, 255, .025); box-shadow: var(--glas); }
.matrix-rij { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; }
.mx-cat { font-size: 12px; color: var(--inkt-4); font-family: var(--mono); }
.mx-cellen { display: flex; flex-wrap: wrap; gap: 6px; }
.cel { width: 26px; height: 26px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: var(--stil); transition: transform 140ms var(--eas); }
.cel:hover { transform: scale(1.14); }
.cel:active { transform: scale(.92); }
.cel.st-compleet { background: var(--goed); box-shadow: 0 0 10px rgba(69, 212, 148, .45); }
.cel.st-ontbreekt { background: var(--let); box-shadow: 0 0 10px rgba(240, 178, 87, .5); }
.cel.st-wacht { background: var(--wacht); box-shadow: 0 0 10px rgba(171, 151, 255, .45); }
.cel.st-fout { background: var(--mis); box-shadow: 0 0 10px rgba(255, 112, 112, .55); }
.cel.st-uit { background: rgba(255, 255, 255, .08); }
@keyframes cel-in { from { opacity: 0; transform: scale(.4); } }
.bh-main.in .matrix-rij .cel { animation: cel-in 420ms var(--eas) backwards; animation-delay: calc(var(--j, 0) * 35ms + 160ms); }
.legende { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--inkt-3); align-items: center; }
.legende i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: -6px; background: var(--stil); }
.legende i.st-compleet { background: var(--goed); } .legende i.st-ontbreekt { background: var(--let); } .legende i.st-wacht { background: var(--wacht); }
.legende i.st-fout { background: var(--mis); } .legende i.st-uit { background: var(--naad-sterk); }
@media (min-width: 900px) { .matrix { padding: 20px 24px; } .matrix-rij { grid-template-columns: 110px 1fr; } .cel { width: 28px; height: 28px; } }

.tijdlijn { list-style: none; margin: 0; padding: 4px 0; display: grid; position: relative; }
.tijdlijn::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(180deg, var(--naad-sterk), transparent); }
.tijdlijn li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 8px 0; }
.tl-ico { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--vloer-2); box-shadow: var(--glas); color: var(--inkt-3); }
.tl-ico .icoon { width: 17px; height: 17px; }
.tl-ticket .tl-ico { color: var(--let); }
.tl-ticket-dicht .tl-ico { color: var(--goed); }
.tl-backup .tl-ico, .tl-meting .tl-ico { color: var(--vlam-2); }
.tl-tekst { display: grid; gap: 1px; padding-top: 2px; min-width: 0; }
.tl-tekst a, .tl-tekst b { font-weight: 500; font-size: 15px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-tekst a:hover { color: var(--vlam-2); }
.tl-tekst small { font-size: 12.5px; color: var(--inkt-3); }
.tijdlijn time { padding-top: 4px; font-family: var(--mono); font-size: 11.5px; color: var(--inkt-3); white-space: nowrap; }

.intake-kop { display: flex; gap: 14px; align-items: flex-start; }
.intake-kop > div { display: grid; gap: 4px; }
.intake-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(69, 212, 148, .12); color: var(--goed); flex: none; }
.intake .kk-acties .knop { flex: 1 1 auto; }

/* ------------------------------------------------------------ modules */
.mod-groep { display: grid; gap: 10px; }
.mod-groep h3 { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt-3); }
.modules { display: grid; gap: 10px; }
@media (min-width: 700px) { .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .modules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.module { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: var(--r); min-width: 0; outline: none; scroll-margin: 100px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .018)); box-shadow: var(--glas); }
.module.uit { opacity: .5; }
.module.st-ontbreekt, .module.st-fout { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(240, 178, 87, .22); }
.module .boven { display: flex; gap: 10px; align-items: flex-start; }
.module .boven b { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; }
.mod-stip { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--stil); }
.st-compleet .mod-stip { background: var(--goed); } .st-ontbreekt .mod-stip { background: var(--let); } .st-wacht .mod-stip { background: var(--wacht); } .st-fout .mod-stip { background: var(--mis); }
.module small { display: block; color: var(--inkt-3); font-size: 13px; overflow-wrap: anywhere; }
.module small code { background: none; padding: 0; }
.module .mod-meer { color: var(--inkt-2); }
.module .namen { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.mod-namen summary { cursor: pointer; font-size: 13px; color: var(--inkt-3); min-height: 32px; display: flex; align-items: center; }
.mod-namen summary:hover { color: var(--inkt); }
@keyframes gloei { 0% { box-shadow: 0 0 0 0 var(--vlam-2); } 100% { box-shadow: 0 0 0 14px transparent; } }
.module.gloei { animation: gloei 900ms var(--eas) 2; }
.segment { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); box-shadow: var(--glas); }
.segment button, .segment a { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--inkt-3); font: inherit; font-weight: 500; font-size: 14px; min-height: 38px;
  padding: 0 12px; border-radius: 9px; cursor: pointer; text-decoration: none; transition: background-color 160ms var(--eas), color 160ms var(--eas); }
.segment button:hover, .segment a:hover { color: var(--inkt); }
.segment .tab { font-family: var(--mono); font-size: 11.5px; opacity: .75; }
.segment button.on, .segment a.on { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }

/* ------------------------------------------------------------ servers: gezondheidsbeeld */
.server-lijst { display: grid; gap: 16px; }
.server { display: grid; gap: 18px; padding: 20px; border-radius: var(--r-l); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); box-shadow: var(--glas);
  position: relative; overflow: hidden; isolation: isolate; }
.server::before { content: ""; position: absolute; left: -80px; top: -80px; width: 260px; height: 260px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(69, 212, 148, .16), transparent); }
.server.let_op::before { background: radial-gradient(closest-side, rgba(240, 178, 87, .16), transparent); }
.server.probleem::before { background: radial-gradient(closest-side, rgba(255, 112, 112, .2), transparent); }
.server.onbekend::before { display: none; }
.sv-kop { display: grid; gap: 18px; }
.sv-status { display: flex; gap: 16px; align-items: center; }
.sv-status > div { display: grid; gap: 4px; min-width: 0; }
.sv-status h2 { font-size: 30px; letter-spacing: -.04em; font-weight: 600; }
.sv-licht { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; flex: none; background: rgba(69, 212, 148, .1); box-shadow: inset 0 0 0 1px rgba(69, 212, 148, .3); }
.sv-licht .puls { width: 14px; height: 14px; }
.let_op .sv-licht { background: rgba(240, 178, 87, .1); box-shadow: inset 0 0 0 1px rgba(240, 178, 87, .3); }
.probleem .sv-licht { background: rgba(255, 112, 112, .1); box-shadow: inset 0 0 0 1px rgba(255, 112, 112, .35); }
.onbekend .sv-licht { background: var(--plank-2); box-shadow: var(--glas); }
.sv-backup { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r); background: var(--vloer-2); box-shadow: var(--glas); }
.sv-backup b { font-size: 26px; font-weight: 500; letter-spacing: -.035em; line-height: 1.15; }
.sv-backup small { font-size: 12.5px; color: var(--inkt-3); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .025); }
.checks b { display: block; font-weight: 500; font-size: 14.5px; }
.checks small { display: block; font-size: 12.5px; color: var(--inkt-3); }
.ck-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none; }
.ck-ico .icoon { width: 16px; height: 16px; stroke-width: 2.2; }
.checks .ok .ck-ico { background: rgba(69, 212, 148, .14); color: var(--goed); }
.checks .let_op .ck-ico { background: rgba(240, 178, 87, .14); color: var(--let); }
.checks .probleem .ck-ico { background: rgba(255, 112, 112, .16); color: var(--mis); }
.checks .onbekend .ck-ico { background: var(--plank-2); color: var(--inkt-3); }
.meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; border-radius: 12px; overflow: hidden; background: var(--naad); }
.meters > div { display: grid; gap: 6px; align-content: start; padding: 12px 14px; background: var(--vloer-2); min-width: 0; }
.meters dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-3); }
.meters dd { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.03em; overflow-wrap: anywhere; }
.meters dd small { font-size: .6em; color: var(--inkt-3); }
.meters dd code { font-size: 15px; background: none; padding: 0; color: var(--inkt); }
.schijfbalk { display: block; width: 100%; height: 6px; }
.schijfbalk .spoor { fill: rgba(255, 255, 255, .08); } .schijfbalk .grens { fill: rgba(255, 255, 255, .3); }
.schijfbalk .vol.ok { fill: var(--goed); } .schijfbalk .vol.let_op { fill: var(--let); } .schijfbalk .vol.probleem { fill: var(--mis); }
@media (min-width: 900px) {
  .server { padding: 24px; gap: 22px; }
  .sv-kop { grid-template-columns: minmax(0, 1fr) 280px; align-items: center; }
  .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-status h2 { font-size: 36px; }
}

/* ------------------------------------------------------------ ruimtes */
.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; border-radius: var(--r); overflow: hidden; box-shadow: var(--glas); background: var(--naad); }
.doc { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 12px; background: var(--vloer-2); min-width: 0; transition: background-color 160ms var(--eas); }
.doc:hover { background: #101116; }
.doc.nieuw { animation: doc-nieuw 1600ms var(--eas); }
@keyframes doc-nieuw { 0% { background: rgba(123, 150, 255, .22); } 100% { background: var(--vloer-2); } }
.doc-ext { width: 38px; height: 44px; flex: none; display: grid; place-items: end center; padding-bottom: 7px; border-radius: 6px 12px 6px 6px; font-family: var(--mono);
  font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--inkt-2); background: var(--plank-3); }
.doc-ext.ext-pdf { background: rgba(255, 112, 112, .16); color: #ffb3b3; }
.doc-ext.ext-xlsx, .doc-ext.ext-csv { background: rgba(69, 212, 148, .14); color: #9fecc6; }
.doc-ext.ext-docx { background: rgba(123, 150, 255, .18); color: #c3d0ff; }
.doc-ext.ext-png, .doc-ext.ext-jpg, .doc-ext.ext-jpeg { background: rgba(171, 151, 255, .16); color: #d6ccff; }
.doc-tekst { min-width: 0; flex: 1; }
.doc-tekst b { display: block; font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-tekst small { display: flex; flex-wrap: wrap; gap: 0 4px; align-items: center; color: var(--inkt-3); font-size: 12.5px; }
.doc-soort { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--inkt-2); padding: 1px 6px; border-radius: 5px; background: var(--plank-2); margin-right: 4px; }
.soorten { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.soorten legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--inkt-2); }
.soort { position: relative; }
.soort input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.soort span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--naad-sterk); font-size: 13.5px; color: var(--inkt-2);
  transition: background-color 160ms var(--eas), color 160ms var(--eas), box-shadow 160ms var(--eas); }
.soort input:checked + span { background: var(--vlam-zacht); color: #fff; box-shadow: inset 0 0 0 1px rgba(143, 227, 255, .4); }
.soort input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.dropzone { position: relative; display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 16px; border-radius: var(--r); cursor: pointer;
  border: 1.5px dashed var(--naad-sterk); background: var(--vloer-2); transition: border-color 160ms var(--eas), background-color 160ms var(--eas); }
.dropzone:hover, .dropzone:focus-within, .dropzone.sleep { border-color: var(--vlam-2); background: rgba(123, 150, 255, .06); }
.dropzone.gekozen { border-style: solid; border-color: rgba(69, 212, 148, .45); }
.dz-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--vlam-zacht); color: var(--vlam-2); flex: none; transition: transform 220ms var(--eas); }
.dropzone.sleep .dz-ico { transform: translateY(-3px); }
.dropzone.gekozen .dz-ico { background: rgba(69, 212, 148, .14); color: var(--goed); }
.dropzone b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.dropzone small { display: block; font-size: 13px; color: var(--inkt-3); }

/* ------------------------------------------------------------ lege staat en laden */
.leeg-staat { display: flex; gap: 14px; align-items: center; padding: 20px; border-radius: var(--r); border: 1.5px dashed rgba(255, 255, 255, .1); color: var(--inkt-3); font-size: 15px; }
.leeg-staat .icoon { width: 26px; height: 26px; color: var(--vlam-2); }
.leeg-staat b { color: var(--inkt); font-weight: 600; }
.skelet-groep { display: grid; gap: 12px; }
.skelet-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skelet { height: 96px; border-radius: var(--r); background: linear-gradient(90deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, .03) 100%);
  background-size: 200% 100%; animation: skelet 1.4s linear infinite; }
.skelet.groot { height: 160px; }
@keyframes skelet { to { background-position: -200% 0; } }

/* ------------------------------------------------------------ knoppen, chips, meldingen, velden */
.knop { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0;
  border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: var(--glas); color: var(--inkt); font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: background-color 160ms var(--eas), transform 120ms var(--eas), box-shadow 160ms var(--eas), filter 160ms var(--eas); }
.knop:hover { background: rgba(255, 255, 255, .09); }
.knop:active { transform: scale(.97); }
.knop[disabled] { opacity: .5; cursor: not-allowed; }
.knop.bezig { cursor: progress; opacity: .85; }
.knop.bezig::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: draai 700ms linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
.knop .icoon { width: 18px; height: 18px; }
.knop.hoofd { background: linear-gradient(180deg, #8ea6ff, #6884f6); color: var(--op-vlam); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(123, 150, 255, .5), 0 8px 24px -10px rgba(123, 150, 255, .7); }
.knop.hoofd:hover { filter: brightness(1.07); }
.knop.stil { background: transparent; box-shadow: none; color: var(--inkt-2); }
.knop.stil:hover { background: var(--plank-2); color: var(--inkt); }
.knop.klein { min-height: 40px; padding: 0 12px; font-size: 14px; }
.knop.groot { min-height: 50px; padding: 0 20px; font-size: 16px; border-radius: 14px; }
.knop.breed { width: 100%; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 99px; font-family: var(--font); font-size: 12.5px; font-weight: 500;
  white-space: nowrap; background: var(--plank-2); color: var(--inkt-2); letter-spacing: 0; text-transform: none; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.compleet, .chip.aan, .chip.ok { color: var(--goed); background: rgba(69, 212, 148, .1); }
.chip.ontbreekt, .chip.let_op { color: var(--let); background: rgba(240, 178, 87, .1); }
.chip.wacht { color: var(--wacht); background: rgba(171, 151, 255, .1); }
.chip.fout, .chip.probleem { color: var(--mis); background: rgba(255, 112, 112, .1); }
.chip.uit, .chip.onbekend { color: var(--inkt-3); }
.melding { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-s); background: rgba(240, 178, 87, .08);
  box-shadow: inset 0 0 0 1px rgba(240, 178, 87, .25); color: var(--inkt); font-size: 14.5px; }
.melding .icoon { width: 18px; height: 18px; color: var(--let); margin-top: 1px; }
.melding.fout { background: rgba(255, 112, 112, .08); box-shadow: inset 0 0 0 1px rgba(255, 112, 112, .3); }
.melding.fout .icoon { color: var(--mis); }
.melding.ok { background: rgba(69, 212, 148, .08); box-shadow: inset 0 0 0 1px rgba(69, 212, 148, .28); }
.melding.ok .icoon { color: var(--goed); }
.vink { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--inkt-2); min-height: 44px; cursor: pointer; }
.vink input { accent-color: var(--vlam); width: 20px; height: 20px; }
.velden { display: grid; gap: 14px; }
.veld { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--inkt-2); }
.veld small { color: var(--inkt-3); font-weight: 400; }
.veld input { min-height: 50px; width: 100%; padding: 0 14px; border-radius: 12px; border: 0; box-shadow: inset 0 0 0 1px var(--naad-sterk);
  background: rgba(0, 0, 0, .35); color: var(--inkt); font: inherit; font-size: 16px; font-weight: 400;
  transition: box-shadow 160ms var(--eas), background-color 160ms var(--eas); }
.veld input:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.veld input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--vlam-2), 0 0 0 4px rgba(143, 227, 255, .14); background: rgba(0, 0, 0, .5); }
.veld.mis input { box-shadow: inset 0 0 0 1px var(--mis), 0 0 0 4px rgba(255, 112, 112, .12); }
.veld input.code { font-family: var(--mono); letter-spacing: .32em; font-size: 20px; }
.veld input::placeholder { color: var(--inkt-4); }

/* ------------------------------------------------------------ inloggen en welkom */
.login { min-height: 100dvh; display: grid; align-content: center; justify-items: center;
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); position: relative; }
.login::before { content: ""; position: fixed; left: 50%; top: 30%; width: 620px; height: 620px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(123, 150, 255, .2), transparent); }
.login-merk { display: none; }
.login-kant { position: relative; width: 100%; max-width: 420px; display: grid; gap: 16px; justify-items: center; }
.login-kaart { width: 100%; display: grid; gap: 22px; padding: 26px 22px; border-radius: 28px;
  background: rgba(18, 20, 28, .66); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 100px -40px rgba(123, 150, 255, .55);
  animation: bh-in 520ms var(--eas) backwards; }
.login-voet { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--inkt-4); }
.login-voet .icoon { width: 14px; height: 14px; }
.lk-merk { display: flex; align-items: center; gap: 10px; }
.lk-merk .logo { width: 40px; height: 40px; }
.lk-kop { display: grid; gap: 8px; }
.lk-kop h1 { font-size: 34px; }
.lk-kop h1 em { font-style: normal; color: var(--vlam-2); }
.stappen { list-style: none; margin: 0; padding: 0; }
.stap { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.stap-nr { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vlam-zacht); color: var(--vlam-2);
  box-shadow: inset 0 0 0 1px rgba(143, 227, 255, .35); font-family: var(--mono); font-weight: 600; font-size: 13px; }
.stap .vak { display: grid; gap: 10px; font-size: 15px; color: var(--inkt-2); justify-items: start; }
.stap .vak > b { color: var(--inkt); font-weight: 600; }
.qr-kaart { padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 18px 40px -20px rgba(123, 150, 255, .6); }
.bh-qr { display: block; width: 184px; height: 184px; image-rendering: pixelated; }
.sleutel summary { cursor: pointer; font-size: 13.5px; color: var(--inkt-3); min-height: 32px; display: flex; align-items: center; }
.sleutel code { display: block; margin-top: 6px; padding: 10px 12px; word-break: break-all; font-size: 13px; letter-spacing: .08em; }
@media (min-width: 900px) {
  .login { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-content: stretch; align-items: center; justify-items: stretch; padding: 32px; gap: 32px; }
  .login::before { left: 28%; top: 50%; }
  .login-merk { display: grid; grid-template-rows: auto 1fr auto; padding: 40px 44px; min-height: calc(100dvh - 64px); border-radius: 32px; position: relative; overflow: hidden;
    background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); box-shadow: var(--glas); }
  .login-kant { justify-self: center; }
  .login-kaart { padding: 36px; }
}
.lm-boven { display: flex; align-items: center; gap: 12px; }
.lm-boven .logo { width: 40px; height: 40px; }
.lm-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt-3); }
.lm-midden { display: grid; place-items: center; }
.lm-matrix { display: grid; grid-template-columns: repeat(8, 14px); gap: 14px; padding: 28px; border-radius: 24px; background: rgba(0, 0, 0, .25); box-shadow: var(--glas); }
.led { width: 14px; height: 14px; border-radius: 50%; background: var(--goed); box-shadow: 0 0 12px rgba(69, 212, 148, .7); animation: led 3.6s ease-in-out infinite; }
.led.l1 { background: var(--vlam-2); box-shadow: 0 0 12px rgba(143, 227, 255, .7); animation-delay: -.7s; }
.led.l2 { animation-delay: -1.4s; }
.led.l3 { background: rgba(255, 255, 255, .1); box-shadow: none; animation: none; }
.led.l4 { animation-delay: -2.1s; }
.lm-matrix .led:nth-child(19) { background: var(--let); box-shadow: 0 0 12px rgba(240, 178, 87, .7); }
@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.lm-onder { display: grid; gap: 10px; }
.lm-woord { font-size: 76px; line-height: .92; letter-spacing: -.06em; font-weight: 600; }
.lm-zin { font-size: 22px; color: var(--inkt-2); }
.lm-zin em { font-style: normal; color: var(--vlam-2); }
.lm-voet { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--inkt-3); }
.lm-voet .icoon { width: 15px; height: 15px; }

/* ------------------------------------------------------------ zoeken (palet) */
.palet { width: min(640px, calc(100vw - 24px)); max-height: min(70dvh, 560px); margin: 12dvh auto auto; padding: 0; border: 0; border-radius: 20px; color: var(--inkt); overflow: hidden; display: none;
  background: rgba(20, 22, 30, .86); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 100px -30px rgba(0, 0, 0, .9); }
.palet[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: palet-in 180ms var(--eas); }
.palet::backdrop { background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes palet-in { from { opacity: 0; transform: scale(.97) translateY(-6px); } }
.pl-zoek { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--naad); }
.pl-zoek .icoon { color: var(--inkt-3); }
.pl-zoek input { flex: 1; min-height: 58px; border: 0; background: transparent; color: var(--inkt); font: inherit; font-size: 17px; outline: none; }
.pl-lijst { list-style: none; margin: 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain; }
.pl-lijst li { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 12px; cursor: pointer; color: var(--inkt-2); }
.pl-lijst li small { margin-left: auto; color: var(--inkt-3); font-size: 12px; }
.pl-lijst li[aria-selected="true"] { background: var(--vlam-zacht); color: var(--inkt); }
.pl-lijst li[aria-selected="true"] .icoon { color: var(--vlam-2); }
.pl-lijst .pl-leeg { color: var(--inkt-3); cursor: default; }
.pl-voet { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--naad); font-size: 12px; color: var(--inkt-3); }
.pl-voet kbd { min-width: 20px; height: 20px; margin-right: 2px; }
@media (max-width: 899px) { .pl-voet { display: none; } .palet { margin-top: calc(10px + env(safe-area-inset-top)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
  .puls::after, .led { animation: none !important; }
}

/* ------------------------------------------------------------ gsm: wat dubbel is, laten we weg */
@media (max-width: 899px) {
  .held-klant .held-ring { display: none; }
  .held-klant .kk-acties .knop { flex: 1 1 auto; }
  .held-klant .kk-acties .knop.hoofd { flex-basis: 100%; }
  .bento-2 { display: none; }
}
@media (min-width: 900px) {
  .login-kaart .lk-merk { display: none; }
  .lm-matrix { grid-template-columns: repeat(8, 18px); gap: 20px; padding: 36px; }
  .led { width: 18px; height: 18px; }
}
.eiland { max-width: 100%; min-width: 0; }
.ei-tekst { white-space: nowrap; }
.ei-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.klantkaart .kk-acties .knop.hoofd { flex: 1 1 auto; }
@media (max-width: 420px) { .ei-tijd { display: none; } }