/* Factory Explorer v2 (explorer2.js): een lichte, bijna isometrische diorama met zwevende witte glazen kaarten.
   Vormgeving en tokens volgens docs/explorer-v2 (DESIGN.md, design-tokens.css); kleuren alleen via de variabelen
   hieronder, met een donkere set voor apparaten in donkere modus. Sora staat zelf op deze site (vendor/sora). */
@font-face {
  font-family: "Sora";
  src: url("vendor/sora/sora-latin-wght-normal.woff2") format("woff2-variations"), url("vendor/sora/sora-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
.tabpaneel.v2 {
  --world-background: #EEECF7; --world-ground: #EBE8F5; --world-paving: #F6F4FB; --world-road: #DCD7EA;
  --world-crane: #2D4CD6; --world-crane-dark: #1C2C86; --world-accent: #FFC53D; --world-clay: #FBFBFF; --world-clay-2: #ECEAF4;
  --world-cabine: #FFFFFF; --world-wall: #F3F1F9;
  --status-ok: #20A67E; --status-warn: #E6951C; --status-bad: #E0524A; --status-neutraal: #8B90AD; --status-uit: #C9CCDA;
  --flow-import: #4F6DFF;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --font: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --glass: rgba(255, 255, 255, .80); --glass-solid: #FFFFFF; --glass-edge: rgba(255, 255, 255, .95);
  --ink: #1C2242; --ink-2: #555C80; --ink-3: #8B90AD; --line: rgba(46, 56, 120, .10); --chip: rgba(44, 75, 214, .06);
  --accent: #2C4BD6; --accent-ink: #FFFFFF;
  --shadow: 0 14px 34px rgba(48, 56, 128, .16), 0 2px 6px rgba(48, 56, 128, .08);
  --blur: 16px; --r-lg: 18px; --r-md: 13px; --r-sm: 9px;
  color-scheme: light;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .tabpaneel.v2 {
    --glass: rgba(28, 33, 66, .78); --glass-solid: #1D2246; --glass-edge: rgba(255, 255, 255, .08);
    --ink: #EEF0FF; --ink-2: #B6BBDC; --ink-3: #8A90B8; --line: rgba(255, 255, 255, .10); --chip: rgba(130, 150, 255, .10);
    --accent: #7A93FF; --accent-ink: #0F1430;
    --shadow: 0 14px 34px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .2);
    --world-background: #141834; --world-ground: #1A1F40; --world-paving: #232A52; --world-road: #2E3563;
    --world-clay: #D9DCF2; --world-clay-2: #A9AED0; --world-cabine: #E9EBFA; --world-wall: #2A3160; --status-uit: #4A5080;
    color-scheme: dark;
  }
}
.v2-glas {
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.4);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.v2-buhne {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  height: clamp(520px, calc(100vh - 150px), 980px);
  background: var(--world-background);
  touch-action: none; user-select: none;
}
.v2-canvas { position: absolute; inset: 0; outline: none; }
.v2-canvas canvas { display: block; width: 100%; height: 100%; }
.v2-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.v2-labels { position: absolute; inset: 0; pointer-events: none; }
.v2-kaart {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none;
  padding: 5px 9px 6px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--ink);
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
}
.v2-kaart small { display: block; font-size: 10.5px; font-weight: 500; color: var(--ink-2); }
.v2-kaart .v2-pil { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 10px; font-weight: 600; color: #fff; background: var(--status-neutraal); }
.v2-kaart.v2-k-robot { font-size: 12.5px; padding: 7px 11px 8px; border-radius: var(--r-md); }
.v2-kaart.v2-k-cabine { font-size: 10.5px; padding: 3px 7px 4px; }
.v2-kaart.v2-k-cabine small { font-size: 9.5px; }
.v2-kaart.v2-k-waarschuwing { border-left: 4px solid var(--status-warn); }
/* De naam van een station: een klein glazen label op de voorrand van de plaat. */
.v2-kaart.v2-k-naam { padding: 2px 7px 3px; border-radius: 7px; font-size: 9.5px; font-weight: 600; letter-spacing: .2px; color: var(--ink-2); box-shadow: 0 2px 8px rgba(48, 56, 128, .12); }
/* Het nummerplaatje van een cabine: laag aan de voorrand, ook in het beginbeeld; cijfers met gelijke breedte, zoals op de plattegrond. */
.v2-kaart.v2-k-nr { transform: translate(-50%, -50%); padding: 1px 5px 2px; border-radius: 6px; font: 600 9.5px/1.2 var(--mono); letter-spacing: .1px;
  font-variant-numeric: tabular-nums; color: var(--ink-2); box-shadow: 0 2px 8px rgba(48, 56, 128, .12); }
/* In bewerking (de cabine waar een robot nu aan werkt, en wat de value stream bij de klok als in bewerking telt): nadruk. */
.v2-kaart.v2-k-nr.nadruk { padding: 2px 6px 3px; font-size: 10.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: 0 3px 10px rgba(44, 75, 214, .28); }
/* Het nummer waar de robot nu aan werkt, groot onder naam en status. */
.v2-kaart .v2-bezig { display: block; margin: 3px 0 1px; font: 700 15px/1.15 var(--mono); letter-spacing: .3px; font-variant-numeric: tabular-nums; color: var(--ink); }
.v2-kaart.weg, .v2-kaart.verborgen, .v2-kaart [hidden] { display: none; }
/* Verdrongen door een belangrijkere kaart op dezelfde plek op het scherm (explorer2.js, plaatsKaarten): niet te zien, wel gemeten. */
.v2-kaart.verdrongen, .v2-vt.verdrongen { visibility: hidden; }
.v2-pil.ok, .v2-dot.ok { background: var(--status-ok); }
.v2-pil.warn, .v2-dot.warn { background: var(--status-warn); }
.v2-pil.bad, .v2-dot.bad { background: var(--status-bad); }
.v2-pil.neutraal, .v2-dot.neutraal { background: var(--status-neutraal); }
.v2-pil.uit, .v2-dot.uit { background: var(--status-uit); color: var(--ink); }
.v2-pil.geen, .v2-dot.geen { background: transparent; color: var(--ink-2); border: 1px dashed var(--ink-3); }
.v2-hover {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--glass-solid); box-shadow: var(--shadow); font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--ink);
  transform: translate(-50%, -130%); opacity: 0; transition: opacity .12s;
}
.v2-hover small { display: block; font-weight: 500; color: var(--ink-2); font-size: 11px; margin-top: 1px; }
.v2-hover.aan { opacity: 1; }
.v2-kop { position: absolute; top: 14px; left: 14px; z-index: 4; padding: 8px 12px; font-size: 11px; font-weight: 600; color: var(--ink-2); letter-spacing: .4px; }
.v2-bron::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--status-uit); vertical-align: 1px; }
.v2-bron.aan::before { background: var(--status-ok); box-shadow: 0 0 0 3px rgba(32, 166, 126, .18); }
.v2-bron.demo::before, .v2-bron.buiten::before { background: var(--status-warn); }
.v2-bron.weg::before { background: var(--status-bad); }
.v2-lijst {
  position: absolute; top: 58px; left: 14px; bottom: 14px; z-index: 4; width: 230px; overflow: auto; padding: 10px 8px;
  scrollbar-width: thin;
}
.v2-lijst h3 { margin: 8px 8px 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-3); }
.v2-lijst ul { list-style: none; margin: 0; padding: 0; }
.v2-lijst button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: 500 12px var(--font); color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 6px 8px; cursor: pointer;
}
.v2-lijst button:hover { background: var(--chip); border-color: transparent; }
.v2-lijst button[aria-pressed=true] { background: var(--chip); border-color: var(--accent); }
.v2-lijst button:focus-visible, .v2-sluit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.v2-lijst button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-dot { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--status-uit); }
.v2-dot.cabine { border-radius: 2px; background: var(--world-clay-2); }
.v2-paneel {
  position: absolute; z-index: 6; top: 14px; right: 14px; width: 320px; max-height: calc(100% - 28px); overflow: auto; padding: 16px 16px 14px;
  scrollbar-width: thin;
}
.v2-paneelkop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.v2-paneelkop h2 { margin: 3px 0 8px; font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.2px; }
.v2-soort { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-3); }
.v2-sluit { flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--glass-solid); color: var(--ink-2); font: 600 16px var(--font); cursor: pointer; }
.v2-sluit:hover { background: var(--chip); border-color: var(--accent); }
.v2-paneelinhoud { font-size: 12.5px; color: var(--ink-2); }
.v2-rij { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.v2-rij > span:first-child { color: var(--ink-3); }
.v2-rij > b { font-weight: 600; color: var(--ink); text-align: right; }
.v2-groot { font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1.1; margin: 2px 0 6px; }
.v2-melding { margin-top: 10px; padding: 9px 11px; border-radius: var(--r-md); background: rgba(230, 149, 28, .12); border-left: 4px solid var(--status-warn); color: var(--ink); font-weight: 600; }
.v2-melding small { display: block; font-weight: 500; color: var(--ink-2); margin-top: 3px; }
.v2-noot { margin-top: 10px; font-size: 11px; color: var(--ink-3); }
.v2-hulp { position: absolute; right: 14px; bottom: 14px; z-index: 3; margin: 0; padding: 8px 12px; font-size: 11px; color: var(--ink-2); max-width: 300px; }
.v2-geen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; margin: 0; padding: 14px 18px; font-size: 13px; color: var(--ink); max-width: 360px; text-align: center; }
.v2-legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 10px 4px 2px; font: 500 11px var(--font); color: var(--muted, #859ba9); }
.v2-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.v2-buhne.paneel-open .v2-hulp { display: none; }
/* Mobiel: het zijpaneel als onderblad, de lijst als rij bovenin, met de veilige zones van de telefoon. */
@media (max-width: 760px) {
  .v2-buhne { height: calc(100svh - 120px); min-height: 460px; border-radius: var(--r-md); }
  .v2-kop { top: 8px; left: 8px; right: 8px; padding: 6px 10px; }
  .v2-lijst { top: 46px; left: 8px; right: 8px; bottom: auto; width: auto; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 6px; border-radius: var(--r-md); }
  .v2-lijst h3 { display: none; }
  .v2-lijst ul { display: flex; gap: 4px; }
  .v2-lijst button { white-space: nowrap; width: auto; }
  .v2-paneel {
    top: auto; left: 8px; right: 8px; width: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); max-height: 52%;
    border-radius: 16px; padding: 14px;
  }
  .v2-hulp { left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .v2-hover { transition: none; } }
/* De value stream-laag (explorer2-vsm.js): de knop in de kop, de strook onderin, de kaartjes in 3D. Zoals de VSM-laag van de
   referentie (DESIGN.md, Value stream map-laag); "Constraint" heet hier Knelpunt. */
.v2-kop { display: flex; align-items: center; gap: 10px; }
.v2-laagknop {
  font: 600 11px var(--font); color: var(--ink); background: var(--glass-solid); border: 1px solid var(--line);
  border-radius: 99px; padding: 4px 11px; cursor: pointer; white-space: nowrap;
}
.v2-laagknop:hover { border-color: var(--accent); }
.v2-laagknop[aria-pressed=true] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.v2-laagknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.v2-vsm {
  position: absolute; z-index: 5; left: 14px; right: 14px; bottom: 14px; padding: 10px 14px 8px;
  display: flex; flex-direction: column; gap: 6px; max-height: 48%;
}
.v2-vsm[hidden] { display: none; }
.vs-kop { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--ink-2); overflow-x: auto; scrollbar-width: none; white-space: nowrap; flex: none; }
.vs-kop::-webkit-scrollbar { display: none; }
.vs-titel { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.vs-kop b { color: var(--ink); font-weight: 600; }
.vs-ruimte { flex: 1; }
.vs-knel { padding: 3px 9px; border-radius: 99px; background: rgba(224, 82, 74, .12); color: var(--status-bad); font-weight: 600; }
.vs-knel.geen { background: var(--chip); color: var(--ink-2); }
.vs-raster { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-template-rows: auto 26px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding-top: 9px; }
.vs-stapcel { display: flex; flex-direction: column; gap: 5px; margin: 0 5px; min-width: 0; }
.vs-stap {
  position: relative; text-align: left; font: 500 11px var(--font); color: var(--ink); cursor: pointer; min-width: 0;
  border: 1px solid var(--line); border-radius: 12px; padding: 7px 9px; background: var(--glass-solid);
}
.vs-stap:hover { border-color: var(--accent); }
.vs-stap[aria-pressed=true] { box-shadow: inset 0 0 0 2px var(--accent); }
.vs-stap:disabled { cursor: default; opacity: .85; }
.vs-stap:focus-visible, .vs-voorraad:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vs-stap.knel { box-shadow: inset 0 0 0 2px var(--status-bad); }
.vs-stap.knel::after { content: "Knelpunt"; position: absolute; top: -8px; right: 10px; background: var(--status-bad); color: #fff; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 99px; }
.vs-stap h5 { margin: 0; font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; gap: 6px; }
.vs-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-pct { flex: none; }
.vs-onder { display: block; font-size: 10px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-balk { height: 5px; border-radius: 3px; background: var(--line); margin: 5px 0; overflow: hidden; }
.vs-balk u { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--status-uit); }
.vs-stap dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; margin: 0; font-size: 10.8px; }
.vs-stap dt { color: var(--ink-2); }
.vs-stap dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }
.vs-stapcel.parallel .vs-stap { padding: 5px 8px; }
.vs-stapcel.parallel .vs-balk { margin: 3px 0; }
.vs-stapcel.parallel .vs-onder { display: none; }
.vs-voorraad {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 2px;
  font: 500 10.5px var(--font); color: var(--ink-2); text-align: center; background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.vs-voorraad::before { content: ""; position: absolute; left: 0; right: 0; top: 40%; border-top: 2px dashed var(--ink-3); opacity: .6; }
.vs-voorraad:hover { background: var(--chip); }
.vs-voorraad:disabled { cursor: default; }
.vs-voorraad svg { width: 38px; height: 32px; position: relative; }
.vs-voorraad svg path { fill: #FFD166; stroke: #D99A12; stroke-width: 1.5; stroke-linejoin: round; }
.vs-voorraad svg text { font: 700 10.5px var(--font); fill: #3A2A00; text-anchor: middle; }
.vs-voorraad.onbekend svg path { fill: var(--line); stroke: var(--ink-3); stroke-dasharray: 3 2; }
.vs-voorraad.onbekend svg text { fill: var(--ink-2); }
.vs-voorraad span { font-weight: 600; color: var(--ink); position: relative; line-height: 1.2; }
.vs-voorraad small { font-size: 10px; }
.vs-lad { display: flex; justify-content: center; font-size: 10.5px; font-weight: 600; position: relative; white-space: nowrap; }
.vs-lad.wacht { border-top: 2px solid var(--status-warn); color: #B86E00; align-items: flex-start; padding-top: 3px; }
.vs-lad.proces { border-bottom: 2px solid var(--status-ok); color: #137A5B; align-items: flex-end; padding-bottom: 3px; margin: 0 5px; }
.vs-lad.onbekend { border-style: dashed; border-color: var(--ink-3); color: var(--ink-3); font-weight: 500; }
.vs-noot { margin: 0; font-size: 10.5px; color: var(--ink-3); line-height: 1.35; flex: none; }
.v2-buhne.vsm-aan .v2-lijst { bottom: auto; max-height: calc(100% - 72px - var(--vsm-ruimte, 250px)); }
.v2-buhne.vsm-aan .v2-hulp { display: none; }
.v2-buhne.vsm-aan .v2-paneel { max-height: calc(100% - 42px - var(--vsm-ruimte, 250px)); }
/* De kaartjes van de laag in 3D (onder de resource) en de stroom op een pijl. */
.v2-vt {
  position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; min-width: 74px; padding: 4px 7px 5px; border-radius: 8px;
  font-size: 10.5px; line-height: 1.25; color: var(--ink); background: var(--glass-solid); box-shadow: 0 4px 12px rgba(40, 50, 120, .18);
}
.v2-vt b { font-weight: 600; }
.v2-vt span { float: right; margin-left: 8px; font-weight: 700; }
.v2-vt i { display: block; clear: both; height: 4px; border-radius: 2px; background: var(--line); margin: 3px 0 2px; overflow: hidden; }
.v2-vt u { display: block; height: 100%; width: 0; background: var(--status-uit); }
.v2-vt small { display: block; color: var(--ink-2); font-size: 9.5px; }
.v2-vt .v2-pil { display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 99px; font-size: 9px; font-weight: 600; font-style: normal; color: #fff; }
.v2-vt.knel { box-shadow: 0 0 0 2px var(--status-bad), 0 4px 12px rgba(40, 50, 120, .18); }
.v2-vt.knel::before { content: "Knelpunt"; display: block; font-size: 9px; font-weight: 700; color: var(--status-bad); text-transform: uppercase; letter-spacing: .6px; }
.v2-vt.stroom { min-width: 0; padding: 2px 6px; font-weight: 700; color: var(--flow-import); border-left: 3px solid var(--flow-import); }
.v2-vt.weg { display: none; }
.v2-laagkop { margin: 14px 0 2px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-3); }
@media (max-width: 760px) {
  .v2-vsm { left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); padding: 8px 10px; border-radius: 16px; max-height: 46%; }
  .vs-noot { display: none; }
  .v2-buhne.vsm-aan.paneel-open .v2-vsm { display: none; }
  .v2-buhne.vsm-aan .v2-paneel { max-height: 52%; }
  .v2-vt { font-size: 9.5px; min-width: 56px; padding: 3px 6px; }
  .v2-vt small { display: none; }
}