/* ═══════════════════════════════════════════════════════════════════════════
   CENTER FFW/WMS Info CENTER — Eenduidig design-systeem (light ⟂ dark)
   VSH-Tech huisstijl · teal #008675 · near-black #1A1A1A · Barlow / JetBrains Mono.
   Eén bron van waarheid: alle componenten verwijzen NAAR TOKENS.
   data-theme="light" (default) → alles licht · data-theme="dark" → alles donker.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Barlow+Condensed:wght@600;700;800&family=JetBrains+Mono:wght@600;700&display=swap');

/* ── LIGHT (default) ── */
:root {
  --app-bg:#F4F4F4;
  /* Chrome = VSH-Tech near-black, VAST in beide thema's */
  --chrome-bg:#1A1A1A; --chrome-bg-2:#111111; --chrome-border:rgba(255,255,255,.10);
  --chrome-text:rgba(255,255,255,.82); --chrome-text-dim:rgba(255,255,255,.48);
  --chrome-hover-bg:rgba(255,255,255,.08); --chrome-active:rgba(255,255,255,.14);
  --nav-active:#5fd6c8; --nav-active-bar:#008675;

  --content-bg:#F4F4F4; --surface:#ffffff; --surface-2:#F9F9F9;
  --card-border:#E0E0E0; --divider:#ececec;

  --glass-bg:rgba(255,255,255,.62); --glass-border:rgba(255,255,255,.72); --glass-blur:18px;

  --text-1:#1A1A1A; --text-2:#4A4A4A; --text-3:#8A8A8A;
  --th-bg:#efefef; --th-text:#1A1A1A;

  --accent:#008675; --accent-strong:#006a5c; --accent-soft:#e6f4f1; --accent-contrast:#ffffff;

  --cyan:#008675; --lavender:#7e4fb8; --mint:#1f9d57; --peach:#E8A040; --yellow:#E8A040; --red:#C0392B;
  --cyan-soft:#e6f4f1; --lavender-soft:#efe7f7; --mint-soft:#e2f3ea; --peach-soft:#fbefdc; --yellow-soft:#fbefdc; --red-soft:#f8e3e0;

  --success:#1f9d57; --warning:#E8A040; --danger:#C0392B; --info:#4C8DF5;

  /* VSH-Tech brand-aliases (gebruikt door dashboards) */
  --teal:#008675; --teal-light:#006a5c; --warn:#E8A040; --purple:#7e4fb8; --ok:#1f9d57;

  --shadow-card:0 1px 6px rgba(0,0,0,.06);
  --shadow-pop:0 12px 32px rgba(0,0,0,.12);
  --shadow-glass:0 8px 32px rgba(0,0,0,.08);
  --glow-accent:none;

  --radius-card:14px; --radius-tile:12px; --radius-pill:999px; --radius-chip:10px;
  --font:'Barlow','Inter Tight',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-cond:'Barlow Condensed','Barlow',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Menlo,monospace;

  --hero-grad:linear-gradient(135deg,#1A1A1A 0%,#15302b 60%,#0e3a33 100%);
  --hero-text:#ffffff; --hero-text-soft:rgba(255,255,255,.72);

  /* aliases (oude tokennamen blijven werken) */
  --corporate-dark:var(--text-1); --light-bg:var(--content-bg);
  --neutral-dark:var(--text-2); --neutral:#c1c1ca;
  --border-light:var(--card-border); --border-table:var(--divider);
  --statusbar-bg:var(--chrome-bg-2);
  --accent-primary:var(--accent); --accent-secondary:var(--lavender);
  --accent-hover:var(--accent-strong); --accent-nav-text:var(--nav-active);
  --status-success:var(--success); --status-warning:var(--warning);
  --status-error:var(--danger); --status-info:var(--info);
  --yellow-hl:var(--yellow-soft); --yellow-border:var(--yellow);
  --c-bg:var(--content-bg); --c-surface:var(--surface); --c-surface-2:var(--surface-2);
  --c-text:var(--text-1); --c-text-soft:var(--text-2); --c-border:var(--card-border);
  --r-2:10px; --shadow-1:var(--shadow-card);
  --topbar-h:60px; --sidebar-w:248px; --statusbar-h:30px;
}

/* ── DARK ── (chrome blijft near-black uit :root; alleen content schakelt) ── */
:root[data-theme="dark"] {
  --app-bg:#121212;
  --content-bg:#121212; --surface:#1d1d1d; --surface-2:#262626;
  --card-border:#333333; --divider:#2b2b2b;

  --glass-bg:rgba(38,38,38,.62); --glass-border:rgba(255,255,255,.10); --glass-blur:20px;

  --text-1:#F4F4F4; --text-2:#c9c9c9; --text-3:#9A9A9A;

  --accent:#2bb3a0; --accent-strong:#5fd6c8; --accent-soft:#16302b; --accent-contrast:#06231f;

  --cyan:#2bb3a0; --lavender:#a98fd0; --mint:#46c97e; --peach:#eab565; --yellow:#eab565; --red:#e57368;
  --cyan-soft:rgba(43,179,160,.15); --lavender-soft:rgba(169,143,208,.16); --mint-soft:rgba(70,201,126,.15);
  --peach-soft:rgba(234,181,101,.15); --yellow-soft:rgba(234,181,101,.15); --red-soft:rgba(229,115,104,.16);

  --success:#46c97e; --warning:#eab565; --danger:#e57368; --info:#6aa3f7;

  --teal:#2bb3a0; --teal-light:#5fd6c8; --warn:#eab565; --purple:#a98fd0; --ok:#46c97e;

  --shadow-card:0 4px 18px rgba(0,0,0,.45);
  --shadow-pop:0 16px 40px rgba(0,0,0,.60);
  --shadow-glass:0 8px 32px rgba(0,0,0,.50);
  --glow-accent:0 0 24px rgba(0,134,117,.30);

  --hero-grad:radial-gradient(circle at 80% 15%,rgba(0,134,117,.28),transparent 60%),linear-gradient(135deg,#1A1A1A 0%,#15302b 55%,#0e3a33 100%);
  --hero-text:#ffffff; --hero-text-soft:rgba(255,255,255,.70);

  --neutral:#444444;
  --th-bg:#2a2a2a; --th-text:#d6d6d6;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; overflow:hidden;
  font-family:var(--font); font-size:13px; color:var(--text-1);
  background:var(--app-bg); letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; } a:hover { color:var(--accent-strong); }
button { font-family:var(--font); }
/* Consistente typografie: ook code/getallen in Inter Tight (geen afwijkende monospace) */
code { font-family:var(--font); font-weight:600; color:var(--text-2);
  background:var(--surface-2); padding:1px 6px; border-radius:6px; font-size:.92em; }

/* ─── App shell ─────────────────────────────────────────────────────────── */
.app-shell {
  display:grid; height:100vh; width:100vw; background:var(--app-bg);
  grid-template-rows:var(--topbar-h) 1fr var(--statusbar-h);
  grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-areas:"topbar topbar" "sidebar content" "statusbar statusbar";
}

/* ─── Topbar ────────────────────────────────────────────────────────────── */
.topbar { grid-area:topbar; background:var(--chrome-bg); border-bottom:1px solid var(--chrome-border);
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  display:flex; align-items:center; padding:0 18px; gap:14px; position:relative; z-index:50; }
.topbar-logo { display:flex; align-items:center; gap:10px; }
.topbar-logo svg { height:28px; width:auto; display:block; }
.topbar-spacer { flex:1; }
.topbar-icon-btn { background:transparent; border:1px solid transparent; border-radius:var(--radius-chip);
  color:var(--chrome-text); width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; transition:background .15s,color .15s; }
.topbar-icon-btn:hover { background:var(--chrome-hover-bg); color:var(--accent); }
.topbar-icon-btn svg { width:17px; height:17px; }
.topbar-badge { position:absolute; top:3px; right:3px; width:15px; height:15px; border-radius:50%;
  background:var(--danger); color:#fff; font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--chrome-bg); }
.topbar-user { display:flex; align-items:center; gap:10px; color:var(--chrome-text); padding-left:12px;
  border-left:1px solid var(--chrome-border); margin-left:4px; height:38px; }
.topbar-user-avatar { width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.topbar-user-name { font-size:12px; display:flex; flex-direction:column; line-height:1.2; color:var(--chrome-text); }
.topbar-user-name small { color:var(--chrome-text-dim); font-size:10px; }

/* Actieve-filter chip in de topbar: toont de persistente vestiging + periode */
.topbar-filter { display:flex; align-items:center; gap:7px; height:32px; padding:0 12px; margin-right:4px;
  background:var(--chrome-hover-bg); border:1px solid var(--chrome-border); border-radius:var(--radius-pill);
  color:var(--chrome-text); font-size:12px; white-space:nowrap; }
.topbar-filter svg { width:14px; height:14px; color:var(--nav-active); flex-shrink:0; }
.topbar-filter .tf-company { font-weight:700; color:#fff; }
.topbar-filter .tf-sep { color:var(--chrome-text-dim); }
.topbar-filter .tf-period { color:var(--chrome-text); }

/* ─── Environment switcher ─────────────────────────────────────────────────── */
.env-btn { gap:5px; font-size:11px; font-weight:700; letter-spacing:.05em; min-width:58px; padding:0 8px; }
.env-btn.env-btn-lab  { color:var(--warning); }
.env-btn.env-btn-prod { color:var(--danger); }
.env-btn.env-btn-lab_newmont { color:var(--purple); }
.env-btn.env-btn-prod_newmont { color:#c2255c; }
.env-label { font-size:11px; font-weight:700; letter-spacing:.06em; }
.env-menu {
    position:absolute; top:calc(100% + 6px); right:0; z-index:60;
    min-width:150px; background:var(--surface); border:1px solid var(--card-border);
    border-radius:var(--radius-chip); box-shadow:var(--shadow-pop);
    padding:6px; display:flex; flex-direction:column; gap:2px;
}
.env-menu-title { font-size:10px; font-weight:600; color:var(--muted); padding:2px 8px 6px; letter-spacing:.05em; text-transform:uppercase; }
.env-menu-item {
    display:flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:600; padding:6px 10px;
    border-radius:calc(var(--radius-chip) - 2px);
    background:transparent; border:none; cursor:pointer;
    color:var(--text); text-align:left; transition:background .12s;
}
.env-menu-item:hover { background:var(--hover-bg); }
.env-menu-item.active { background:var(--accent-soft); color:var(--accent-strong); }
.env-sub { font-weight:400; color:var(--muted); font-size:11px; margin-left:2px; }
.env-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.env-dot.env-dot-lab  { background:var(--warning); }
.env-dot.env-dot-prod { background:var(--danger); }
.env-dot.env-dot-lab_newmont { background:var(--purple); }
.env-dot.env-dot-prod_newmont { background:#c2255c; }

.search-drawer { position:absolute; top:var(--topbar-h); left:0; right:0; height:0; overflow:hidden;
  background:var(--chrome-bg-2); transition:height .15s ease; z-index:40; border-bottom:1px solid var(--chrome-border); }
.search-drawer.open { height:46px; }
.search-drawer-inner { display:flex; align-items:center; gap:12px; padding:0 20px; height:100%; }
.search-drawer input { background:transparent; border:none; color:var(--chrome-text); font-size:13px; flex:1; outline:none; font-family:var(--font); }
.search-drawer input::placeholder { color:var(--chrome-text-dim); }
.search-drawer-esc { font-size:10px; color:var(--chrome-text-dim); border:1px solid var(--chrome-border); padding:2px 6px; border-radius:6px; }
/* Thema-toggle: toon zon in dark, maan in light (pure-CSS, geen Blazor nodig) */
.theme-toggle .ic-sun { display:none; }
.theme-toggle .ic-moon { display:block; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display:block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display:none; }

/* ─── Taalswitcher (topbar-caption: alleen huidige vlag, klik = dropdown) ──── */
.lang-switch { position:relative; display:flex; align-items:center; }
.lang-current { font-size:17px; line-height:1; }
.lang-flag { font-size:16px; line-height:1; display:inline-block; }
.lang-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:60; min-width:168px;
  background:var(--surface); border:1px solid var(--card-border); border-radius:var(--radius-chip);
  box-shadow:var(--shadow-pop); padding:6px; display:flex; flex-direction:column; gap:2px; }
.lang-menu-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:none; color:var(--text-1); font-family:var(--font); font-size:13px;
  padding:8px 10px; border-radius:8px; cursor:pointer; transition:background .14s,color .14s; }
.lang-menu-item:hover { background:var(--surface-2); }
.lang-menu-item.active { background:var(--accent-soft); color:var(--accent-strong); font-weight:600; }
.lang-name { white-space:nowrap; }

/* FocusOnNavigate (Routes.razor) zet bij navigatie focus op de <h1> zodat
   screenreaders de nieuwe paginatitel aankondigen. De <h1> heeft tabindex=-1
   (niet in de tab-volgorde) → de zichtbare focus-outline is overbodig en oogt
   rommelig. A11y-functie blijft; alleen de outline weg. */
.page-title:focus, h1[tabindex="-1"]:focus { outline:none; }

/* ─── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar { grid-area:sidebar; background:var(--chrome-bg); border-right:1px solid var(--chrome-border);
  display:flex; flex-direction:column; gap:2px; padding:14px 12px; overflow-y:auto; overflow-x:hidden; }
.sidebar-section { color:var(--chrome-text-dim); font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.10em; padding:14px 12px 6px; }
.nav-item { display:flex; align-items:center; gap:11px; color:var(--chrome-text); padding:9px 13px; height:38px;
  font-size:13px; border-radius:var(--radius-chip); border-left:3px solid transparent;
  cursor:pointer; transition:background .14s,color .14s; text-decoration:none; position:relative; white-space:nowrap; }
.nav-item:hover { background:var(--chrome-hover-bg); color:#fff; }
.nav-item.active { background:var(--chrome-active); color:var(--nav-active); font-weight:600; border-left-color:var(--nav-active-bar); }
.nav-item svg { width:17px; height:17px; flex-shrink:0; }
.nav-item .badge-dot { position:absolute; right:12px; width:7px; height:7px; background:var(--danger); border-radius:50%; }
.sidebar-footer { margin-top:auto; border-top:1px solid var(--chrome-border); padding:14px 12px; display:flex; align-items:center; gap:10px; }
.sidebar-footer .avatar { width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; }
.sidebar-footer-meta { color:var(--chrome-text); font-size:11px; flex:1; line-height:1.3; }
.sidebar-footer-meta small { color:var(--chrome-text-dim); font-size:9.5px; display:block; }
.sidebar-footer .logout-btn { background:transparent; border:none; color:var(--chrome-text-dim); cursor:pointer; padding:4px; }
.sidebar-footer .logout-btn:hover { color:var(--accent); }

/* ─── Content + page header ─────────────────────────────────────────────── */
.content { grid-area:content; background:var(--content-bg); overflow-y:auto; display:flex; flex-direction:column; }
.page-header { background:var(--surface); border-bottom:1px solid var(--card-border); padding:12px 22px;
  display:flex; align-items:center; gap:14px; flex-shrink:0; }
.breadcrumb { color:var(--text-3); font-size:11.5px; display:flex; align-items:center; gap:7px; }
.breadcrumb a, .breadcrumb span { color:var(--text-3); }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb .sep { opacity:.5; }
.breadcrumb .current { color:var(--text-1); font-weight:600; }
.page-title { font-family:var(--font); font-size:15px; font-weight:700; color:var(--text-1); margin:0 0 0 6px; letter-spacing:-.01em; }
.live-pill { background:var(--surface-2); border:1px solid var(--card-border); border-radius:var(--radius-pill);
  font-size:10.5px; padding:4px 11px 4px 9px; display:inline-flex; align-items:center; gap:6px; color:var(--text-2); }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--success);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 55%,transparent); animation:pulse 1.6s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 55%,transparent);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
.page-header-spacer { flex:1; }
.content-body { padding:18px 22px; display:grid; gap:16px; grid-template-columns:1fr; }

/* ─── Statusbar ─────────────────────────────────────────────────────────── */
.statusbar { grid-area:statusbar; background:var(--chrome-bg-2); border-top:1px solid var(--chrome-border);
  font-size:10.5px; color:var(--chrome-text-dim); display:flex; align-items:center; padding:0 16px; gap:14px; }
.statusbar-kpi { display:inline-flex; align-items:center; gap:6px; }
.statusbar-kpi-label { color:var(--chrome-text-dim); }
.statusbar-kpi-value { font-weight:600; color:var(--chrome-text); }
.statusbar-spacer { flex:1; }
.statusbar-brand { color:var(--chrome-text-dim); font-size:10px; }
.statusbar-brand b { color:var(--chrome-text); font-weight:600; }

/* ─── Buttons / chips / selects ─────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 16px; border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:background .15s,border-color .15s,color .15s; }
.btn svg { width:14px; height:14px; }
.btn-primary { background:var(--accent); color:var(--accent-contrast); }
.btn-primary:hover { background:var(--accent-strong); }
.btn-secondary { background:var(--surface-2); border-color:var(--card-border); color:var(--accent-strong); font-weight:700; }
.btn-secondary:hover { background:var(--accent-soft); border-color:var(--accent); }
.btn-xs { height:28px; padding:0 12px; font-size:11.5px; }
.btn-danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover:not(:disabled) { background:color-mix(in srgb,var(--danger) 85%,#000); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
/* Testgereedschap: geüploade LAB-data verwijderen (destructief) */
.danger-zone { border:1px solid color-mix(in srgb,var(--danger) 35%,transparent); }
.danger-zone .panel-title { color:var(--danger); }
.cleanup-opt { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-2); cursor:pointer; }
.cleanup-opt input { accent-color:var(--danger); }
.filter-chips { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.chip { background:var(--surface-2); border:1px solid var(--card-border); border-radius:var(--radius-pill);
  color:var(--text-2); font-size:12px; padding:6px 13px; cursor:pointer; transition:all .14s; font-family:var(--font); }
.chip:hover { border-color:var(--accent); color:var(--text-1); }
.chip.active { background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); font-weight:600; }
.chip-grp { background:var(--surface-2); border:1px solid var(--card-border); border-radius:var(--radius-pill);
  color:var(--text-2); font-size:12px; padding:6px 13px; cursor:pointer; font-family:var(--font); }
.chip-grp.active { background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); font-weight:600; }
.chip-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle; }
.chip-sep { width:1px; height:22px; background:var(--card-border); margin:0 5px; }
.filter-select { height:30px; border:1px solid var(--card-border); border-radius:var(--radius-pill);
  background:var(--surface); color:var(--text-1); font-family:var(--font); font-size:12px; padding:0 12px; cursor:pointer; outline:none; }
.filter-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.custom-range { display:inline-flex; align-items:center; gap:6px; }
.custom-range .dash { color:var(--text-3); }

/* ─── KPI-kaarten (pastel-accenten) ─────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:14px; }
.kpi-grid-5 { grid-template-columns:repeat(5,1fr); }
.kpi-card { --pastel:var(--cyan); --pastel-soft:var(--cyan-soft);
  background:var(--surface); border:1px solid var(--card-border); border-radius:var(--radius-card);
  padding:16px 18px; display:flex; flex-direction:column; position:relative; min-height:112px;
  box-shadow:var(--shadow-card); transition:transform .15s,box-shadow .15s; }
.kpi-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-pop); }
.kpi-card.accent-secondary { --pastel:var(--lavender); --pastel-soft:var(--lavender-soft); }
.kpi-card.accent-warning   { --pastel:var(--peach);    --pastel-soft:var(--peach-soft); }
.kpi-card.accent-error     { --pastel:var(--red);      --pastel-soft:var(--red-soft); }
.kpi-card.accent-success   { --pastel:var(--mint);     --pastel-soft:var(--mint-soft); }
.kpi-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.kpi-icon { width:34px; height:34px; border-radius:11px; background:var(--pastel-soft); color:var(--pastel);
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.kpi-icon svg { width:17px; height:17px; }
.kpi-label { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); font-weight:700; padding-top:2px; }
.kpi-value { font-size:30px; font-weight:800; color:var(--text-1); line-height:1.05; margin-top:10px; letter-spacing:-.02em; }
.kpi-value small { font-size:13px; font-weight:500; color:var(--text-3); margin-left:4px; }
.kpi-hint { font-size:10.5px; color:var(--text-3); margin-top:5px; }
.kpi-delta { font-size:11px; margin-top:6px; display:inline-flex; align-items:center; gap:4px; font-weight:600; width:fit-content;
  padding:2px 8px; border-radius:var(--radius-pill); }
.kpi-delta.up { color:var(--success); background:var(--mint-soft); }
.kpi-delta.down { color:var(--danger); background:var(--red-soft); }
.kpi-delta.flat { color:var(--text-3); background:var(--surface-2); }
.kpi-sparkline { position:absolute; bottom:14px; right:16px; }

/* ─── Panels ────────────────────────────────────────────────────────────── */
.panel { background:var(--surface); border:1px solid var(--card-border); border-radius:var(--radius-card);
  padding:18px 20px; display:flex; flex-direction:column; box-shadow:var(--shadow-card); }
.panel-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.panel-title { font-size:13px; font-weight:700; color:var(--text-1); letter-spacing:-.01em; }
.panel-subtitle { font-size:11px; color:var(--text-3); margin-top:2px; }
.panel-spacer { flex:1; }
.panel-body { flex:1; overflow:hidden; }
.panel-body > svg { max-height:260px; }
.panel-tools { display:flex; gap:6px; }
.panel-tools button { background:var(--surface-2); border:1px solid var(--card-border); border-radius:var(--radius-pill);
  padding:4px 11px; font-size:11px; color:var(--text-2); cursor:pointer; }
.panel-tools button.active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong); font-weight:600; }
.grid-2   { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:980px){ .grid-2 { grid-template-columns:1fr; } }
.grid-2-3 { display:grid; grid-template-columns:1.6fr 1fr; gap:16px; }
@media (max-width:1100px){ .grid-2-3 { grid-template-columns:1fr; } }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:1100px){ .grid-3 { grid-template-columns:1fr; } }
.page-subtitle { color:var(--muted); font-size:13px; margin:0 0 14px; }

/* ─── Goederen-samenvatting (goods-stats) ───────────────────────────────── */
.goods-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:4px 0;
}
@media (max-width:700px){ .goods-stats { grid-template-columns:repeat(2,1fr); } }
.goods-stat-n {
  display:block; font-family:var(--font-cond); font-size:1.55rem; font-weight:800;
  color:var(--text); line-height:1.1; letter-spacing:-.02em;
}
.goods-stat-l {
  display:block; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); margin-top:3px;
}
.goods-stat-sub {
  display:block; font-size:10px; color:var(--muted); opacity:.7; margin-top:2px;
}

/* ─── Panel-badge (kleur-pill in panel-header) ──────────────────────────── */
.panel-badge {
  align-self:center; padding:2px 10px; border-radius:var(--radius-pill);
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  flex-shrink:0;
}
.panel-badge-info { background:var(--info-soft,color-mix(in srgb,var(--info) 15%,transparent)); color:var(--info); }
.panel-badge-warn { background:var(--warn-soft,color-mix(in srgb,var(--warning) 15%,transparent)); color:var(--warning); }

/* ─── Datatabel ─────────────────────────────────────────────────────────── */
.dgrid { width:100%; border-collapse:collapse; font-size:12.5px; }
.dgrid thead th { background:var(--th-bg); color:var(--th-text); font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; font-weight:800; text-align:left; padding:11px 14px; border-bottom:2px solid var(--accent); position:sticky; top:0; }
.dgrid th.num, .dgrid td.num { text-align:right; }
.dgrid td { padding:11px 14px; border-bottom:1px solid var(--divider); color:var(--text-2); vertical-align:middle; }
.dgrid tbody tr:nth-child(even) td { background:var(--surface-2); }
.dgrid tbody tr:hover td { background:var(--accent-soft); }
.dgrid td .muted, .dgrid .muted { color:var(--text-3); }
.dgrid .empty-state { text-align:center; color:var(--text-3); padding:22px; }
.dgrid .group-header td { background:var(--surface-2); color:var(--text-1); }
.dgrid .grand-total td { background:var(--surface-2); color:var(--text-1); border-top:2px solid var(--card-border); }
.pill { display:inline-block; font-size:10.5px; font-weight:600; padding:2px 9px; border-radius:var(--radius-pill);
  background:var(--surface-2); color:var(--text-2); }
.pill.success { background:var(--mint-soft); color:var(--success); }
.pill.warn { background:var(--peach-soft); color:var(--warning); }

/* ─── Aandachtspunt + error ─────────────────────────────────────────────── */
.attention-box { background:var(--yellow-soft); border:1px solid color-mix(in srgb,var(--yellow) 40%,transparent);
  border-left:3px solid var(--yellow); border-radius:var(--radius-chip); padding:12px 16px; display:flex; align-items:center; gap:12px; }
.attention-box .label { font-size:10px; font-weight:800; color:var(--text-1); text-transform:uppercase; letter-spacing:.05em; }
.attention-box .body { flex:1; font-size:12.5px; color:var(--text-1); }
.attention-box .action { background:transparent; border:1px solid var(--card-border); color:var(--text-1);
  border-radius:var(--radius-pill); padding:5px 13px; font-size:11px; cursor:pointer; }
.attention-box .action:hover { background:var(--surface); }
.error-banner { background:var(--red-soft); border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);
  border-left:3px solid var(--danger); padding:11px 15px; border-radius:var(--radius-chip); color:var(--danger); font-size:12.5px; }
.ok-banner { background:var(--mint-soft); border:1px solid color-mix(in srgb,var(--success) 40%,transparent);
  border-left:3px solid var(--success); padding:11px 15px; border-radius:var(--radius-chip); color:var(--success); font-size:12.5px; font-weight:600; }

/* ─── Purchase Orders (import + overzicht) ──────────────────────────────── */
.empty-state { text-align:center; color:var(--text-3); padding:26px; font-size:12.5px; }
.po-upload { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; }
.po-file-btn { display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 18px; cursor:pointer;
  background:var(--surface-2); border:1px dashed var(--card-border); border-radius:var(--radius-pill);
  color:var(--text-1); font-size:13px; font-weight:600; transition:background .14s,border-color .14s; }
.po-file-btn:hover { background:var(--accent-soft); border-color:var(--accent); }
.po-file-btn svg { width:16px; height:16px; }
.po-file-btn input[type=file] { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.po-reading { color:var(--text-3); font-size:12.5px; }

/* Drag & drop-zone voor het SAP PO-bestand: het <InputFile> dekt de hele zone af
   (opacity 0) zodat een browser-drop er native op landt — geen JS-interop nodig. */
.po-dropzone { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; min-height:110px; padding:20px; text-align:center; cursor:pointer;
  background:var(--surface-2); border:2px dashed var(--card-border); border-radius:var(--radius-card);
  color:var(--text-2); transition:background .14s,border-color .14s; }
.po-dropzone:hover { border-color:var(--accent); background:var(--accent-soft); }
.po-dropzone-active { border-color:var(--accent); background:var(--accent-soft); }
.po-dropzone svg { width:26px; height:26px; color:var(--accent-strong); }
.po-dropzone-text { display:flex; flex-direction:column; gap:2px; }
.po-dropzone-text strong { color:var(--text-1); font-size:13.5px; }
.po-dropzone-text span { font-size:12px; color:var(--text-3); }
.po-dropzone input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.po-search { height:32px; padding:0 12px; border:1px solid var(--card-border); border-radius:var(--radius-pill);
  background:var(--surface); color:var(--text-1); font-size:12.5px; min-width:260px; }
.po-search:focus { outline:none; border-color:var(--accent); }
.po-truncate { text-align:center; color:var(--text-3); font-size:11.5px; padding:12px; }

/* ─── PO verwerking (CFF_LAB_MZ_AUTH) — kleurgecodeerde blokkades ────────── */
.pill.danger { background:var(--red-soft); color:var(--danger); }
/* Celkleuring wint van de zebra/hover-achtergronden van .dgrid */
.dgrid td.cell-block, .dgrid tbody tr:nth-child(even) td.cell-block, .dgrid tbody tr:hover td.cell-block {
  background:var(--red-soft); box-shadow:inset 3px 0 0 var(--danger); color:var(--danger); font-weight:600; }
.dgrid td.cell-warn, .dgrid tbody tr:nth-child(even) td.cell-warn, .dgrid tbody tr:hover td.cell-warn {
  background:var(--peach-soft); box-shadow:inset 3px 0 0 var(--warning); color:var(--warning); font-weight:600; }
.verw-row { cursor:pointer; }
/* Uitgesloten regel (uitgesloten van de upload naar LAB) */
.row-excluded > td { opacity:.55; }
.row-excluded > td:first-child { opacity:1; box-shadow:inset 3px 0 0 var(--warning); }
.excluded-note { font-size:12px; color:var(--text-2); background:var(--peach-soft);
  border-radius:var(--radius-chip); padding:6px 10px; margin-bottom:8px; }
.verw-legend { display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--text-2); }
.verw-legend > span { display:inline-flex; align-items:center; gap:7px; }
.legend-swatch { width:13px; height:13px; border-radius:4px; display:inline-block; flex-shrink:0; }
.legend-swatch.swatch-block { background:var(--red-soft); box-shadow:inset 2px 0 0 var(--danger); }
.legend-swatch.swatch-warn { background:var(--peach-soft); box-shadow:inset 2px 0 0 var(--warning); }
.legend-swatch.swatch-info { background:var(--surface-2); border:1px solid var(--card-border); }
.row-expand td { background:var(--surface-2) !important; padding:10px 14px; }
.issue-list { display:flex; flex-direction:column; gap:6px; }
.issue-line { display:flex; align-items:baseline; gap:10px; font-size:12px; }
.issue-line .pill { flex-shrink:0; min-width:76px; text-align:center; }
.issue-target { font-family:var(--mono,monospace); font-size:11px; color:var(--text-1); font-weight:600; flex-shrink:0; }
.issue-reason { color:var(--text-2); }
.wo-summary-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:13px; }
.wo-summary-head strong { margin-right:2px; }
.wo-ref { font-family:var(--mono,monospace); font-size:11.5px; font-weight:600; color:var(--accent-strong,var(--accent));
  background:var(--accent-soft); border-radius:var(--radius-chip); padding:2px 7px; white-space:nowrap; }

/* Upload-voortgang (live tijdens PO-upload naar LAB) */
.upload-progress { border-color:var(--accent); }
.upload-progress-head { display:flex; align-items:center; gap:10px; font-size:13px; }
.upload-progress-head .muted { font-size:12px; }
.spinner { width:16px; height:16px; border:2px solid var(--card-border); border-top-color:var(--accent); border-radius:50%; display:inline-block; animation:spin .7s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }
.upload-bar { margin-top:10px; height:8px; background:var(--surface-2); border-radius:var(--radius-pill); overflow:hidden; }
.upload-bar-fill { height:100%; background:var(--accent); border-radius:var(--radius-pill); transition:width .3s ease; }

/* Geminimaliseerd upload-widget (blijft in de hoek staan bij navigatie tijdens een upload) */
.upload-mini { position:fixed; right:18px; bottom:46px; z-index:900; display:flex; align-items:stretch; gap:8px;
  min-width:230px; padding:10px 12px 10px 14px; background:var(--surface); border:1px solid var(--accent);
  border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.18); color:var(--text-1); animation:upmini-in .25s ease; }
.upload-mini-link { display:flex; align-items:center; gap:10px; flex:1; min-width:0; text-decoration:none; color:inherit; }
.upload-mini-cancel { flex-shrink:0; width:24px; align-self:center; border:1px solid var(--card-border); background:var(--surface-2);
  color:var(--text-2); border-radius:6px; cursor:pointer; font-size:12px; line-height:1; padding:4px 0; }
.upload-mini-cancel:hover:not(:disabled) { border-color:var(--danger,#d33); color:var(--danger,#d33); }
.upload-mini-cancel:disabled { opacity:.4; cursor:default; }
.upload-mini-spin { width:16px; height:16px; border:2px solid var(--card-border); border-top-color:var(--accent); border-radius:50%; flex-shrink:0; animation:spin .7s linear infinite; }
.upload-mini-body { flex:1; min-width:0; }
.upload-mini-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.upload-mini-label { font-size:12.5px; font-weight:600; }
.upload-mini-count { font-size:11.5px; color:var(--text-2); font-variant-numeric:tabular-nums; }
.upload-mini-bar { margin-top:6px; height:5px; background:var(--surface-2); border-radius:var(--radius-pill); overflow:hidden; }
.upload-mini-fill { height:100%; background:var(--accent); border-radius:var(--radius-pill); transition:width .3s ease; }
@keyframes upmini-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Workorder-diagnostiek (kopieerbaar logblok bij WO-aanmaakfouten) */
.wo-diag { margin-top:14px; border:1px solid var(--card-border); border-radius:8px; overflow:hidden; }
.wo-diag-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; background:var(--surface-2,var(--surface)); border-bottom:1px solid var(--card-border); font-weight:600; font-size:12px; }
.wo-diag-hint { padding:8px 12px 0; color:var(--text-2); font-size:11px; }
.wo-diag-body { margin:8px 12px 12px; padding:10px; max-height:340px; overflow:auto; background:var(--surface-2); color:var(--text-1); border-radius:6px; font-family:var(--mono,monospace); font-size:11px; line-height:1.45; white-space:pre-wrap; word-break:break-word; }

/* Account-picker (leverancier-koppeling) */
.po-account-search { width:100%; max-width:480px; padding:8px 12px; border:1px solid var(--card-border);
  border-radius:var(--radius-chip); background:var(--surface); color:var(--text-1); font-family:var(--font); font-size:12.5px; }
.po-account-search:focus { outline:none; border-color:var(--accent); }
.po-account-results { display:flex; flex-direction:column; gap:4px; margin-top:8px; max-height:260px; overflow-y:auto; }
.po-account-opt { display:block; width:100%; text-align:left; background:var(--surface); border:1px solid var(--card-border);
  border-radius:var(--radius-chip); padding:7px 11px; font-size:12.5px; color:var(--text-1); cursor:pointer; transition:background .12s,border-color .12s; }
.po-account-opt:hover { background:var(--accent-soft); border-color:var(--accent); }
.po-account-opt b { color:var(--accent-strong); margin-right:6px; }

/* ─── Horizontale bar chart ─────────────────────────────────────────────── */
.hbar-chart { display:flex; flex-direction:column; gap:8px; padding:4px 2px; }
.hbar-row { display:grid; grid-template-columns:150px 1fr 64px; align-items:center; gap:10px; }
.hbar-label { font-size:11.5px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; }
.hbar-track { height:16px; background:var(--surface-2); border-radius:var(--radius-pill); overflow:hidden; }
.hbar-fill { height:100%; border-radius:var(--radius-pill); transition:width .4s ease; min-width:3px; }
.hbar-value { font-size:11px; color:var(--text-2); font-weight:600; }
@media (max-width:720px){ .hbar-row { grid-template-columns:110px 1fr 52px; } }

/* ─── Metrics-grid + subtabs + pre-calc ─────────────────────────────────── */
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:14px 0; }
.metric { background:var(--surface); border:1px solid var(--card-border); border-radius:var(--radius-card); padding:14px 16px; }
.metric.accent { border-color:color-mix(in srgb,var(--accent) 35%,transparent); }
.metric-label { font-size:10px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }
.metric-value { font-size:24px; font-weight:800; color:var(--text-1); margin-top:6px; letter-spacing:-.02em; }
.metric.accent .metric-value { color:var(--accent-strong); }
.metric-unit { font-size:12px; font-weight:500; color:var(--text-3); margin-left:3px; }

.subtabs { display:flex; align-items:center; gap:2px; background:var(--surface); padding:8px 18px 0; border-bottom:1px solid var(--card-border); }
.subtabs .tab { appearance:none; background:transparent; border:0; outline:0; font-family:var(--font); cursor:pointer;
  padding:9px 16px 11px; font-size:12.5px; font-weight:600; color:var(--text-3); border-bottom:2.5px solid transparent;
  margin-bottom:-1px; border-radius:8px 8px 0 0; transition:color .14s,border-color .14s,background .14s; }
.subtabs .tab:hover { color:var(--text-1); background:var(--surface-2); }
.subtabs .tab.active { color:var(--accent-strong); border-bottom-color:var(--accent); background:var(--accent-soft); }
.subtabs .tab-spacer { flex:1; }
.subtabs .checkbox-toggle { font-size:11px; color:var(--text-2); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.subtabs .checkbox-toggle input { accent-color:var(--accent); }
.precalc-filterrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 18px; background:var(--surface); border-bottom:1px solid var(--card-border); }
.precalc-filterrow .filterlabel { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-right:4px; }
.filterrow-spacer { flex:1; }
.precalc-grid { padding:0; overflow-x:auto; }
.pcgrid { font-size:11.5px; }
.pcgrid td, .pcgrid th { white-space:nowrap; }

/* ─── Brand spinner + loading + boot ────────────────────────────────────── */
.brand-loader { display:flex; flex-direction:column; align-items:center; gap:12px; }
.brand-loader-label { font-size:12px; font-weight:600; color:var(--text-3); animation:bs-fade 1.4s ease-in-out infinite; }
.brand-loader-overlay { position:absolute; inset:0; z-index:60; display:grid; place-items:center;
  background:color-mix(in srgb,var(--content-bg) 72%,transparent); backdrop-filter:blur(2px); }
.brand-spinner { position:relative; width:var(--bs-size,72px); height:var(--bs-size,72px); }
.brand-spinner .bs-ring { position:absolute; inset:0; border-radius:50%; border:3px solid color-mix(in srgb,var(--accent) 16%,transparent);
  border-top-color:var(--accent); border-right-color:var(--accent); animation:bs-spin .85s cubic-bezier(.5,.15,.5,.85) infinite; }
/* Centermerk staat STIL — alleen de ring draait (geen rondjes/pulse op het merk) */
.brand-spinner .bs-mark { position:absolute; inset:26%; }
.brand-spinner .bs-chev { fill:var(--text-1); }
.brand-spinner .bs-arrow { fill:#3db1c3; }
@keyframes bs-spin { to { transform:rotate(360deg); } }
@keyframes bs-fade { 0%,100%{opacity:.5;} 50%{opacity:1;} }
.loading-panel { min-height:260px; display:grid; place-items:center; }
.skeleton { background:var(--surface-2); border-radius:8px; animation:skeleton-pulse 1.4s ease-in-out infinite; }
@keyframes skeleton-pulse { 0%,100%{opacity:.6;} 50%{opacity:1;} }
#app-boot { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:var(--app-bg); transition:opacity .4s ease; }

/* ─── Hero-band (Overzicht) — glassy gradient ───────────────────────────── */
.hero-band { display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; padding:22px 28px;
  border-radius:var(--radius-card); position:relative; overflow:hidden; background:var(--hero-grad);
  box-shadow:var(--shadow-glass); color:var(--hero-text); }
.hero-gauges { display:flex; gap:18px; }
.hero-gauge { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 16px; border-radius:14px;
  background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:blur(var(--glass-blur)); }
.hero-gauge svg text { fill:var(--hero-text)!important; }
.hero-gauge svg text tspan { fill:var(--hero-text-soft)!important; }
.hero-gauge-cap { font-size:11px; font-weight:600; color:var(--hero-text); }
.hero-stats { color:var(--hero-text); min-width:0; }
.hero-title { font-size:18px; font-weight:700; }
.hero-sub { font-size:12px; color:var(--hero-text-soft); margin-top:2px; }
.hero-metrics { display:flex; flex-wrap:wrap; gap:26px; margin-top:16px; }
.hero-metric { display:flex; flex-direction:column; }
.hero-metric .hm-val { font-size:23px; font-weight:800; color:var(--hero-text); line-height:1.1; }
.hero-metric .hm-lbl { font-size:10.5px; color:var(--hero-text-soft); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.hm-amber { color:var(--warning)!important; } .hm-red { color:var(--danger)!important; } .hm-green { color:var(--success)!important; }
@media (max-width:860px){ .hero-band { grid-template-columns:1fr; gap:18px; } .hero-gauges { justify-content:center; } }

/* ═══ MANAGEMENT SCORE CARD ═══ */
.scorecard-body { gap:18px; }
.sc-hero { display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center; padding:26px 30px;
  border-radius:var(--radius-card); position:relative; overflow:hidden; color:var(--hero-text);
  background:var(--hero-grad); box-shadow:var(--shadow-glass),var(--glow-accent); }
.sc-hero-gauge { display:grid; place-items:center; }
.sc-ring { --p:0; width:150px; height:150px; border-radius:50%;
  background:conic-gradient(var(--band) calc(var(--p)*1%),color-mix(in srgb,var(--band) 14%,transparent) 0);
  display:grid; place-items:center; box-shadow:0 0 28px color-mix(in srgb,var(--band) 45%,transparent); }
.sc-ring-inner { width:116px; height:116px; border-radius:50%; background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sc-total { font-size:48px; font-weight:800; line-height:1; color:var(--hero-text); letter-spacing:-.02em; }
.sc-total-out { font-size:13px; color:var(--hero-text-soft); margin-top:2px; }
.sc-hero-label { display:inline-block; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; padding:4px 12px; border-radius:var(--radius-pill); background:color-mix(in srgb,var(--band) 75%,transparent); }
.sc-hero-title { font-size:22px; font-weight:700; margin-top:10px; color:var(--hero-text); }
.sc-hero-sub { font-size:12.5px; color:var(--hero-text-soft); margin-top:3px; }
.sc-legend { display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; }
.sc-legend .lg { font-size:10px; font-weight:700; padding:3px 9px; border-radius:var(--radius-pill); }
.sc-legend .purple { background:#7c4dff; color:#fff; } .sc-legend .red { background:#eb5d3e; color:#fff; }
.sc-legend .orange { background:#e8a020; color:#3a2a00; } .sc-legend .green { background:#69bd5a; color:#0f2e0a; }
.sc-legend .dgreen { background:#2f8f3e; color:#fff; }
.sc-legend .gold { background:linear-gradient(135deg,#f5d77a,#d4af37); color:#5a4500; }

.score-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:1280px){ .score-grid { grid-template-columns:repeat(3,1fr); } .kpi-grid-5 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .score-grid { grid-template-columns:repeat(2,1fr); } .kpi-grid-5 { grid-template-columns:repeat(2,1fr); } }
.score-tile { position:relative; overflow:hidden; cursor:pointer;
  background:linear-gradient(180deg,color-mix(in srgb,var(--band) 7%,var(--surface)),var(--surface));
  border:1px solid var(--card-border); border-top:4px solid var(--band); border-radius:var(--radius-card);
  padding:14px 16px 16px; box-shadow:var(--shadow-card); transition:transform .15s,box-shadow .15s; }
.score-tile:hover { transform:translateY(-3px); box-shadow:var(--shadow-pop); }
.score-tile.selected { box-shadow:0 0 0 2px var(--band),var(--shadow-pop); }
.score-tile .st-head { display:flex; align-items:center; gap:8px; }
.score-tile .st-icon { color:var(--band); display:inline-flex; }
.score-tile .st-title { font-size:11.5px; font-weight:700; color:var(--text-1); text-transform:uppercase; letter-spacing:.03em; }
.st-body { display:flex; align-items:center; gap:14px; margin:12px 0 10px; }
.st-badge { width:58px; height:58px; border-radius:var(--radius-tile); flex-shrink:0; display:flex; align-items:baseline; justify-content:center; gap:1px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--band) 88%,white),var(--band));
  box-shadow:0 6px 16px color-mix(in srgb,var(--band) 35%,transparent); }
.st-badge.sm { width:46px; height:46px; border-radius:12px; }
.st-badge .st-score { font-size:26px; font-weight:800; line-height:1; }
.st-badge .st-out { font-size:11px; opacity:.8; }
.st-meta .st-bandlabel { font-size:12px; font-weight:700; color:var(--band); }
.st-meta .st-value { font-size:18px; font-weight:700; color:var(--text-1); line-height:1.1; }
.st-meta .st-unit { font-size:10.5px; color:var(--text-3); }
.st-bar { height:6px; border-radius:var(--radius-pill); background:color-mix(in srgb,var(--band) 16%,var(--surface-2)); overflow:hidden; }
.st-bar-fill { height:100%; border-radius:var(--radius-pill); background:var(--band); transition:width .5s ease; }
/* Score-banden 0–10 (kleur-rand bovenaan de tegel) */
.score-tile.band-zero      { border-top-color:#9aa3b2; }
.score-tile.band-darkred   { border-top-color:#b91c1c; }
.score-tile.band-lightred  { border-top-color:#f6a3a3; }
.score-tile.band-orange    { border-top-color:#f59e0b; }
.score-tile.band-green     { border-top-color:#2eb872; }
.score-tile.band-darkgreen { border-top-color:#15803d; }
/* Goud (9 = medaille, 10 = trofee) — glans + warme tint */
.score-tile.band-gold9, .score-tile.band-gold10 {
  border-top-color:#d4af37;
  background:linear-gradient(135deg, color-mix(in srgb,#f7e08a 26%,var(--surface)), var(--surface) 62%); }
.score-tile.band-gold9 .st-bandlabel, .score-tile.band-gold10 .st-bandlabel { color:#b8901f; }
.band-gold .st-badge { background:linear-gradient(135deg,#f7e08a,#e9c659 45%,#d4af37); }
.shine { position:absolute; top:0; left:-60%; width:50%; height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg);
  animation:shine-sweep 3.6s ease-in-out infinite; pointer-events:none; }
.shine-lg { animation-duration:4.2s; }
@keyframes shine-sweep { 0%{left:-60%;} 55%{left:130%;} 100%{left:130%;} }
@media (prefers-reduced-motion:reduce){ .shine,.shine-lg{ animation:none; display:none; } }

.sc-detail { border-left:4px solid var(--band); }
.sc-detail-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.sc-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px){ .sc-detail-grid { grid-template-columns:1fr; } }
.sc-block-label { font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px; }
.sc-block p { margin:0; font-size:13px; line-height:1.55; color:var(--text-1); }
.sc-block.reco { background:color-mix(in srgb,var(--band) 10%,transparent); border-radius:10px; padding:12px 14px; }
.sc-hint { font-size:12px; color:var(--text-3); text-align:center; padding:6px; }

/* SVG-tekst (LineChart/BarChart) volgt thema binnen panelen */
.panel svg text { fill:var(--text-1)!important; }
.panel svg text tspan { fill:var(--text-3)!important; }

/* ── Score-tegel: moderne radial-gauge (vervangt vierkante badge) ── */
.st-gaugewrap { display:flex; align-items:center; gap:15px; margin:14px 0 2px; }
.st-gauge { width:76px; height:76px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--band) calc(var(--p,0)*1%), color-mix(in srgb,var(--band) 15%,var(--surface-2)) 0);
  display:grid; place-items:center; box-shadow:0 0 18px color-mix(in srgb,var(--band) 26%,transparent); }
.st-gauge-inner { width:60px; height:60px; border-radius:50%; background:var(--surface);
  display:flex; align-items:center; justify-content:center; gap:1px; box-shadow:inset 0 1px 3px rgba(0,0,0,.06); }
.st-gauge .st-score { font-size:24px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.st-gauge .st-out { font-size:10px; color:var(--text-3); }
.score-tile .st-meta { display:flex; flex-direction:column; gap:1px; }

/* ── Settings ── */
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 0; }
.settings-label { font-size:13px; font-weight:600; color:var(--text-1); }
.settings-hint { font-size:11.5px; color:var(--text-3); margin-top:8px; line-height:1.5; }
.theme-switch { display:flex; gap:8px; }
.theme-opt { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:var(--radius-pill);
  border:1px solid var(--card-border); background:var(--surface-2); color:var(--text-2); font-family:var(--font);
  font-size:12.5px; font-weight:600; cursor:pointer; transition:all .14s; }
.theme-opt:hover { border-color:var(--accent); color:var(--accent-strong); background:var(--accent-soft); }
/* Geselecteerde optie — duidelijk gevulde accent-stijl (was voorheen niet gestyled). */
.theme-opt.active { border-color:var(--accent); background:var(--accent); color:#fff; font-weight:700; }
.theme-opt.active:hover { background:var(--accent-strong,var(--accent)); color:#fff; }
.theme-opt svg { width:16px; height:16px; }

/* Shift-pill: neutrale achtergrond + gekleurde stip (altijd leesbaar) */
.shift-pill { background:var(--surface-2); color:var(--text-1); border:1px solid var(--card-border);
  display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.shift-pill .chip-dot { width:8px; height:8px; margin:0; }

/* Analyse-pagina's */
.analyse-bars { display:flex; flex-direction:column; gap:9px; }
.an-row { display:grid; grid-template-columns:180px 1fr 70px; align-items:center; gap:12px; }
.an-label { font-size:12.5px; color:var(--text-1); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an-track { height:18px; background:var(--surface-2); border-radius:var(--radius-pill); overflow:hidden; }
.an-fill { height:100%; border-radius:var(--radius-pill); background:var(--cyan); transition:width .4s ease; min-width:3px; }
.an-val { font-size:12px; font-weight:700; color:var(--text-2); text-align:right; }

/* ─── Prestatie-iconen: vaantje (8) / medaille (9) / trofee (10) ────────── */
.st-achieve { margin-left:auto; display:inline-flex; color:var(--band); }
.st-achieve svg { width:20px; height:20px; }
.st-achieve-pennant { color:#15803d; filter:drop-shadow(0 0 3px rgba(21,128,61,.45)); }
.st-achieve-medal, .st-achieve-trophy { color:#d4af37; filter:drop-shadow(0 0 5px rgba(212,175,55,.65)); }
.sc-hero-achieve { display:inline-flex; vertical-align:middle; margin-right:7px; }
.sc-hero-achieve svg { width:24px; height:24px; }
.sc-hero-achieve.st-achieve-pennant { color:#fff; filter:drop-shadow(0 0 4px rgba(255,255,255,.5)); }
.sc-hero-achieve.st-achieve-medal, .sc-hero-achieve.st-achieve-trophy { color:#ffe27a; filter:drop-shadow(0 0 7px rgba(255,215,0,.7)); }

/* ─── Totaalscore-onderbouwing ─────────────────────────────────────────── */
.sc-hero-gauge { cursor:pointer; }
.sc-calc-toggle { margin-top:12px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  color:var(--hero-text); font-family:var(--font); font-size:11.5px; font-weight:600; padding:6px 12px;
  border-radius:var(--radius-pill); cursor:pointer; }
.sc-calc-toggle:hover { background:rgba(255,255,255,.22); }
:root:not([data-theme="dark"]) .sc-calc-toggle { background:rgba(46,58,81,.08); border-color:rgba(46,58,81,.18); }
.sc-calc-note { font-size:11.5px; color:var(--text-3); margin-top:10px; }

/* ─── Help: (i)-knop + modal + zoek ────────────────────────────────────── */
.help-btn { background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent-strong);
  width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:background .14s; }
.help-btn:hover { background:var(--accent); color:#fff; }
.help-btn svg { width:15px; height:15px; }
.help-overlay { position:fixed; inset:0; z-index:1000; background:rgba(15,21,38,.45); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:24px; }
.help-modal { background:var(--surface); border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-pop); width:min(560px,100%); max-height:84vh; display:flex; flex-direction:column; overflow:hidden; }
.help-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:18px 20px; border-bottom:1px solid var(--card-border); background:var(--surface-2); }
.help-modal-eyebrow { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-strong); }
.help-modal-title { font-size:17px; font-weight:700; color:var(--text-1); margin-top:2px; }
.help-close { background:transparent; border:none; color:var(--text-3); font-size:16px; cursor:pointer; line-height:1; }
.help-close:hover { color:var(--text-1); }
.help-modal-body { padding:18px 20px; overflow-y:auto; }
.help-intro { font-size:13px; color:var(--text-2); line-height:1.55; margin:0 0 14px; }
.help-sec { margin-bottom:14px; }
.help-sec-h { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-strong); margin-bottom:6px; }
.help-sec ul { margin:0; padding-left:18px; }
.help-sec li { font-size:12.5px; color:var(--text-2); line-height:1.6; }
.help-modal-foot { padding:14px 20px; border-top:1px solid var(--card-border); display:flex; justify-content:flex-end; }
.help-topic { }
.help-search { display:flex; align-items:center; gap:10px; }
.help-search svg { width:18px; height:18px; color:var(--text-3); flex-shrink:0; }
.help-search input { flex:1; border:none; outline:none; background:transparent; font-family:var(--font);
  font-size:14px; color:var(--text-1); padding:4px 0; }
.help-clear { background:transparent; border:none; color:var(--text-3); cursor:pointer; font-size:13px; }

/* ─── Pre-calculation: totalen-strook bovenaan ─────────────────────────── */
.totbar { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:14px; }
.totbar-tile { background:var(--surface); border:1px solid var(--card-border); border-radius:var(--radius-card);
  border-left:4px solid var(--neutral); padding:12px 16px; display:flex; flex-direction:column; gap:4px; box-shadow:var(--shadow-card); }
.totbar-tile.accent { border-left-color:var(--accent); }
.totbar-tile.ok { border-left-color:var(--success); }
.totbar-tile.warn { border-left-color:var(--warning); }
.totbar-tile .tb-l { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); }
.totbar-tile .tb-v { font-size:22px; font-weight:800; color:var(--text-1); letter-spacing:-.02em; }
.totbar-tile .tb-v small { font-size:12px; font-weight:500; color:var(--text-3); }

/* ─── Versie & release (Instellingen) ──────────────────────────────────── */
.release-hero { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.release-pill { background:var(--accent); color:var(--accent-contrast); font-weight:800; font-size:15px;
  padding:6px 14px; border-radius:var(--radius-pill); }
.release-date-big { font-size:16px; font-weight:700; color:var(--text-1); }
.release-block { border-left:3px solid var(--accent); padding:4px 0 4px 12px; margin-top:10px; }
.release-block-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.version-tag { background:var(--surface-2); border:1px solid var(--card-border); color:var(--text-1);
  font-weight:700; font-size:11px; padding:2px 9px; border-radius:var(--radius-pill); }
.release-date { font-size:12px; color:var(--text-3); font-weight:600; }
.release-block ul { margin:8px 0 0; padding-left:18px; }
.release-block li { font-size:12.5px; color:var(--text-2); line-height:1.55; }
.release-hero .settings-hint { margin-top:0; }

/* ─── Bezetting: 6-koloms KPI + intern/extern split-bar ────────────────── */
.kpi-grid-6 { grid-template-columns:repeat(6,1fr); }
@media (max-width:1400px){ .kpi-grid-6 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .kpi-grid-6 { grid-template-columns:repeat(2,1fr); } }
.split-bar { display:flex; height:22px; border-radius:var(--radius-pill); overflow:hidden; background:var(--surface-2); margin-bottom:10px; }
.split-seg { height:100%; transition:width .4s ease; }
.split-legend { display:flex; gap:18px; font-size:12px; color:var(--text-2); margin-bottom:14px; }
.split-legend .chip-dot { width:9px; height:9px; margin-right:6px; }

/* Inklapbare project-groepen in pre-calculation */
.dgrid .group-header { cursor:pointer; user-select:none; }
.dgrid .group-header:hover td { background:var(--accent-soft); }
.grp-caret { display:inline-block; width:14px; color:var(--accent-strong); font-size:11px; }

/* ─── Work Force Agent Amy — briefing popup ────────────────────────────── */
.wfa-popup { position:fixed; right:22px; bottom:42px; z-index:200; width:384px; max-width:calc(100vw - 32px);
  max-height:72vh; display:flex; flex-direction:column; background:var(--surface); color:var(--text-1);
  border:1px solid var(--card-border); border-radius:16px; box-shadow:var(--shadow-pop); overflow:hidden;
  animation:wfa-in .35s ease; }
@keyframes wfa-in { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ .wfa-popup{ animation:none; } }
.wfa-header { display:flex; align-items:center; gap:10px; padding:11px 13px; background:var(--chrome-bg); }
.wfa-avatar svg { width:44px; height:44px; display:block; }
.wfa-title { display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0; }
.wfa-title strong { font-size:14px; color:#fff; }
.wfa-time { font-size:10.5px; color:var(--chrome-text-dim); }
.wfa-wx { font-size:11px; color:var(--nav-active); white-space:nowrap; }
.wfa-speak, .wfa-close { background:rgba(255,255,255,.12); border:none; color:#fff; width:30px; height:30px;
  border-radius:8px; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wfa-speak:hover, .wfa-close:hover { background:rgba(255,255,255,.26); }
/* Actief voorlezen: knop licht op + zachte puls als "stop"-indicatie. */
.wfa-speak.speaking { background:rgba(255,255,255,.34); box-shadow:0 0 0 2px rgba(255,255,255,.45); animation:wfa-speak-pulse 1.1s ease-in-out infinite; }
@keyframes wfa-speak-pulse { 0%,100%{ box-shadow:0 0 0 2px rgba(255,255,255,.45); } 50%{ box-shadow:0 0 0 4px rgba(255,255,255,.18); } }
.wfa-body { padding:11px 13px; overflow-y:auto; display:flex; flex-direction:column; gap:7px; }
.wfa-msg { display:flex; gap:8px; font-size:12.5px; line-height:1.5; color:var(--text-1); }
.wfa-dot { width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.wfa-msg.wfa-intro .wfa-text { color:var(--text-2); font-style:italic; }
.wfa-msg.wfa-head .wfa-text { font-weight:800; }
.wfa-msg.wfa-red .wfa-text { color:var(--danger); }
.wfa-msg.wfa-orange .wfa-text { color:var(--warning); }
.wfa-msg.wfa-blue .wfa-text { color:var(--info); }

/* ─── Weer-widget (grafisch) ───────────────────────────────────────────── */
.wx-widget { display:flex; align-items:stretch; gap:18px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--card-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:14px 18px; margin-bottom:14px; }
.wx-main { display:flex; align-items:center; gap:16px; flex:1; min-width:280px; }
.wx-svg { width:100%; height:100%; display:block; }
.wx-icon-lg { width:64px; height:64px; flex-shrink:0; }
.wx-now { display:flex; flex-direction:column; gap:1px; }
.wx-loc { font-size:12px; font-weight:700; color:var(--accent-strong); }
.wx-temp { font-size:30px; font-weight:800; color:var(--text-1); line-height:1.05; letter-spacing:-.02em; }
.wx-temp-min { font-size:15px; font-weight:600; color:var(--text-3); }
.wx-desc { font-size:12.5px; color:var(--text-2); }
.wx-metrics { display:flex; flex-direction:column; gap:5px; justify-content:center; margin-left:6px; padding-left:18px; border-left:1px solid var(--divider); }
.wx-metric { display:flex; gap:8px; align-items:baseline; }
.wx-m-label { font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); min-width:62px; }
.wx-m-val { font-size:13px; font-weight:700; color:var(--text-1); }
.wx-impact { align-self:flex-start; margin-top:3px; font-size:11px; font-weight:800; padding:3px 10px; border-radius:var(--radius-pill); }
.wx-impact-normal   { background:var(--mint-soft);   color:var(--success); }
.wx-impact-alert    { background:var(--yellow-soft); color:var(--warning); }
.wx-impact-critical,
.wx-impact-stop     { background:var(--red-soft);    color:var(--danger); }
.wx-forecast { display:flex; gap:6px; align-items:center; }
.wx-day { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:62px;
  padding:8px 6px; border-radius:12px; background:var(--surface-2); }
.wx-day-name { font-size:11px; font-weight:700; color:var(--text-2); }
.wx-day-icon { width:34px; height:34px; }
.wx-day-temp { font-size:13px; font-weight:800; color:var(--text-1); }
.wx-day-temp small { font-size:10.5px; font-weight:600; color:var(--text-3); margin-left:2px; }
.wx-day-wind { font-size:10px; color:var(--text-3); }
@media (max-width:760px){ .wx-metrics { border-left:none; padding-left:0; } }

/* Hero + weer naast elkaar (weer vult de ruimte rechts van de totaalscore) */
.sc-top-row { display:flex; gap:14px; align-items:stretch; }
.sc-top-row .sc-hero { flex:1; margin-bottom:0; }
.sc-top-row .wx-widget { width:440px; flex-shrink:0; margin-bottom:0;
  flex-direction:column; align-items:stretch; gap:12px; justify-content:space-between; }
.sc-top-row .wx-widget .wx-main { min-width:0; }
.sc-top-row .wx-widget .wx-forecast { justify-content:space-between; }
.sc-top-row .wx-widget .wx-day { flex:1; }
@media (max-width:1100px){ .sc-top-row { flex-direction:column; } .sc-top-row .wx-widget { width:auto; } }

/* ─── Allocatie-toolbar: tabs + zoek + per-rij print ───────────────────── */
.al-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.al-toolbar .filter-chips { flex:1; }
.al-search { display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--card-border);
  border-radius:var(--radius-pill); padding:6px 12px; min-width:230px; }
.al-search svg { width:14px; height:14px; flex-shrink:0; }
.al-search input { border:none; background:transparent; outline:none; color:var(--text-1); font-family:var(--font);
  font-size:13px; width:100%; }
.al-search-clear { cursor:pointer; color:var(--text-3); font-size:12px; }
.al-search-clear:hover { color:var(--danger); }
.al-rowact { text-align:right; width:34px; }
.al-print { text-decoration:none; font-size:14px; opacity:.55; transition:opacity .14s; }
.al-print:hover { opacity:1; }

/* Vestiging-chips met pasteltint per locatie (Vlissingen = lichtpaars) */
.company-chip { display:inline-flex; align-items:center; gap:7px; }
.company-chip .cc-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 2px color-mix(in srgb,var(--cc) 30%,transparent); }
.company-chip.active { background:color-mix(in srgb,var(--cc) 26%,var(--surface)); border-color:var(--cc);
  color:var(--text-1); font-weight:700; }
:root[data-theme="dark"] .company-chip.active { background:color-mix(in srgb,var(--cc) 26%,var(--surface)); color:var(--text-1); }

/* ─── Amy floating knop (grafisch, overal) ─────────────────────────────── */
.amy-fab { position:fixed; right:22px; bottom:42px; z-index:190; width:58px; height:58px; padding:5px;
  border-radius:50%; border:2px solid #fff; background:var(--chrome-bg); cursor:pointer;
  box-shadow:var(--shadow-pop); transition:transform .15s, box-shadow .15s; }
.amy-fab:hover { transform:translateY(-2px) scale(1.04); box-shadow:0 14px 34px rgba(0,0,0,.4); }
.amy-fab svg { width:100%; height:100%; display:block; }
.amy-fab.open { opacity:0; pointer-events:none; }
:root[data-theme="dark"] .amy-fab { border-color:var(--card-border); }
/* Panel verschijnt boven de knop */
.wfa-popup.amy-anchored { bottom:42px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CENTER FFW/WMS — nieuwe pagina-componenten (Score Card + 3 dashboards)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Generieke lege-staat (buiten dgrid) */
.empty-state { text-align:center; color:var(--text-3); padding:26px 12px; font-size:12.5px; }

/* KPI-grid met exact 3 kolommen */
.kpi-grid-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .kpi-grid-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .kpi-grid-3 { grid-template-columns:1fr; } }

/* KPI-grid met max 4 kolommen (flow-cards) */
.kpi-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1100px){ .kpi-grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .kpi-grid-4 { grid-template-columns:1fr; } }

/* Ghost-knop in page-header (secundaire actie) */
.btn-ghost {
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:600;
    color:var(--teal); background:transparent; border:1px solid var(--teal);
    text-decoration:none; cursor:pointer; transition:background .15s,color .15s;
}
.btn-ghost:hover { background:var(--teal); color:#fff; }

/* Klikbare tabel-cel (drill-down) */
.row-link { color:var(--teal); font-weight:600; text-decoration:none; }
.row-link:hover { text-decoration:underline; }

/* Tabelvoet (matrix-totalen) */
.dgrid tfoot td { border-top:2px solid var(--border-2,rgba(0,0,0,.12)); background:rgba(0,134,117,.05); }

/* ─── Analyse-pagina: filter-formulier ─────────────────────────────────── */
.selform { display:grid; grid-template-columns:repeat(4,1fr); gap:14px 16px; }
@media (max-width:1100px){ .selform { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .selform { grid-template-columns:1fr; } }
.selform-field { display:flex; flex-direction:column; gap:5px; }
.selform-field label { font-size:11px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.02em; }
.selform-field select, .selform-field input {
    height:32px; border:1px solid var(--card-border); border-radius:8px;
    background:var(--surface); color:var(--text-1); font-family:var(--font);
    font-size:12.5px; padding:0 10px; outline:none; width:100%;
}
.selform-field select:focus, .selform-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.selform-actions { display:flex; gap:10px; align-items:flex-end; margin-top:6px; }
.selform-actions .btn-ghost { height:32px; }
.btn-primary {
    display:inline-flex; align-items:center; gap:6px; height:32px;
    padding:0 16px; border-radius:8px; font-size:12.5px; font-weight:600;
    color:#fff; background:var(--teal); border:1px solid var(--teal);
    text-decoration:none; cursor:pointer; transition:filter .15s;
}
.btn-primary:hover { filter:brightness(1.08); }
.warn-note { color:var(--warn); font-size:12px; font-weight:600; margin:8px 0 0; }

/* Tabel: positief/negatief resultaat */
.dgrid td.num.pos { color:var(--ok); font-weight:700; }
.dgrid td.num.neg { color:var(--danger); font-weight:700; }
.dgrid td.num { font-family:var(--font-mono); font-weight:600; }

/* ─── Score Card: ring-detail in hero + tegels ─────────────────────────── */
.sc-ring-score { font-family:var(--font-cond); font-size:46px; font-weight:800; line-height:1;
  color:var(--hero-text); letter-spacing:-.01em; }
.sc-ring-out { font-size:12px; color:var(--hero-text-soft); margin-top:2px; }
.sc-hero-meta { min-width:0; }
.sc-band { display:inline-block; font-family:var(--font-cond); font-size:12px; font-weight:800; letter-spacing:.10em;
  text-transform:uppercase; color:#fff; padding:4px 12px; border-radius:var(--radius-pill); }

.sc-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:1280px){ .sc-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .sc-grid { grid-template-columns:repeat(2,1fr); } }
.sc-tile { --band:var(--teal); --p:0; position:relative; cursor:pointer;
  background:linear-gradient(180deg,color-mix(in srgb,var(--band) 7%,var(--surface)),var(--surface));
  border:1px solid var(--card-border); border-top:4px solid var(--band); border-radius:var(--radius-card);
  padding:14px 16px 16px; box-shadow:var(--shadow-card); transition:transform .15s,box-shadow .15s; }
.sc-tile:hover { transform:translateY(-3px); box-shadow:var(--shadow-pop); }
.sc-tile.selected { box-shadow:0 0 0 2px var(--band),var(--shadow-pop); }
.sc-tile-head { display:flex; align-items:center; gap:8px; }
.sc-tile-icon { color:var(--band); display:inline-flex; }
.sc-tile-icon svg { width:17px; height:17px; }
.sc-tile-title { font-family:var(--font-cond); font-size:12.5px; font-weight:800; color:var(--text-1);
  text-transform:uppercase; letter-spacing:.03em; }
.sc-tile-body { display:flex; align-items:center; gap:14px; margin-top:13px; }
.sc-tile-gauge { --band:var(--teal); --p:0; width:74px; height:74px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--band) calc(var(--p)*1%),color-mix(in srgb,var(--band) 15%,var(--surface-2)) 0);
  display:grid; place-items:center; box-shadow:0 0 16px color-mix(in srgb,var(--band) 24%,transparent); }
.sc-tile-score { width:58px; height:58px; border-radius:50%; background:var(--surface);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-cond); font-size:23px;
  font-weight:800; line-height:1; box-shadow:inset 0 1px 3px rgba(0,0,0,.08); }
.sc-tile-meta { display:flex; flex-direction:column; gap:1px; min-width:0; }
.sc-tile-band { font-size:12px; font-weight:700; color:var(--band); }
.sc-tile-value { font-family:var(--font-cond); font-size:18px; font-weight:800; color:var(--text-1); line-height:1.1; }
.sc-tile-unit { font-size:10.5px; color:var(--text-3); }
.sc-tile-detail { margin-top:13px; padding-top:12px; border-top:1px solid var(--divider); }
.sc-tile-detail p { margin:0; font-size:12.5px; line-height:1.5; color:var(--text-2); }
.sc-reco { margin-top:8px!important; color:var(--text-1)!important;
  background:color-mix(in srgb,var(--band) 10%,transparent); border-radius:10px; padding:9px 11px; }

/* ─── Operations Kantoor: pipeline ─────────────────────────────────────── */
.ok-pipeline { display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; }
.ok-stage { --st:var(--teal); flex:1; min-width:120px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; padding:18px 12px; border-radius:var(--radius-card);
  background:var(--surface); border:1px solid var(--card-border); border-top:4px solid var(--st);
  box-shadow:var(--shadow-card); }
.ok-stage-n { font-family:var(--font-cond); font-size:30px; font-weight:800; color:var(--st); line-height:1; }
.ok-stage-l { font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.ok-arrow { display:flex; align-items:center; color:var(--text-3); font-size:20px; font-weight:700; }
@media (max-width:900px){ .ok-arrow { display:none; } }

/* ─── Operations Warehouse: voortgang-hero ─────────────────────────────── */
.ow-hero { display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center; padding:26px 30px;
  border-radius:var(--radius-card); position:relative; overflow:hidden; color:var(--hero-text);
  background:var(--hero-grad); box-shadow:var(--shadow-glass),var(--glow-accent); }
.ow-progress { --p:0; width:140px; height:140px; border-radius:50%;
  background:conic-gradient(var(--teal) calc(var(--p)*1%),rgba(255,255,255,.14) 0);
  display:grid; place-items:center; box-shadow:0 0 26px rgba(0,134,117,.45); }
.ow-progress-inner { width:108px; height:108px; border-radius:50%; background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)); border:1px solid var(--glass-border);
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ow-progress-n { font-family:var(--font-cond); font-size:34px; font-weight:800; line-height:1; color:var(--hero-text); }
.ow-progress-l { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--hero-text-soft); margin-top:3px; }
.ow-hero-meta { min-width:0; }
.ow-hero-title { font-family:var(--font-cond); font-size:22px; font-weight:800; color:var(--hero-text); }
.ow-hero-sub { font-size:13px; color:var(--hero-text-soft); margin-top:3px; }
.ow-hero-stats { display:flex; gap:30px; margin-top:16px; }
.ow-hero-stats > div { display:flex; flex-direction:column; }
.ow-stat-n { font-family:var(--font-cond); font-size:24px; font-weight:800; color:var(--hero-text); line-height:1.1; }
.ow-stat-l { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--hero-text-soft); margin-top:2px; }
@media (max-width:860px){ .ow-hero { grid-template-columns:1fr; gap:18px; justify-items:center; text-align:center; } }

/* ─── Cargo-rijen (cr-*) — VSH-Tech rij-component ──────────────────────── */
.cr-list { display:flex; flex-direction:column; gap:8px; }
.cr-row { background:var(--surface); border-radius:var(--radius-tile); border:1px solid var(--card-border);
  box-shadow:var(--shadow-card); display:grid; grid-template-columns:5px 1fr auto; overflow:hidden;
  transition:transform .12s,box-shadow .12s; }
.cr-row:hover { box-shadow:var(--shadow-pop); transform:translateY(-1px); }
.cr-rail { width:5px; }
.cr-rail.in { background:var(--teal); }
.cr-rail.warn { background:var(--warn); }
.cr-rail.out { background:var(--danger); }
.cr-main { padding:10px 13px; min-width:0; }
.cr-unit { font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--text-1); letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cr-meta { font-size:10.5px; color:var(--text-3); margin-top:2px; }
.cr-aside { padding:10px 12px 10px 0; display:flex; flex-direction:column; align-items:flex-end; gap:4px; justify-content:center; }
.cr-time { font-size:10px; color:var(--text-3); font-weight:600; }
.cr-pill { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:2px 8px;
  border-radius:var(--radius-pill); white-space:nowrap; }
.cr-pill.ok { background:color-mix(in srgb,var(--teal) 14%,transparent); color:var(--accent-strong); }
.cr-pill.warn { background:color-mix(in srgb,var(--warn) 18%,transparent); color:#9a6200; }
:root[data-theme="dark"] .cr-pill.warn { color:var(--warn); }

/* ─── Performance monitor ───────────────────────────────────────────────── */
/* Badge in statusbar (donkere chrome-achtergrond) */
.perf-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:0 8px; height:20px; border-radius:var(--radius-pill);
  font-size:11px; font-weight:700; letter-spacing:.04em;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.55);
  border:none; cursor:pointer; transition:background .15s; white-space:nowrap;
}
.perf-badge:hover { background:rgba(255,255,255,.15); }
.perf-badge.perf-flash { color:#4ade80; background:rgba(74,222,128,.16); }
.perf-badge.perf-fast  { color:#60a5fa; background:rgba(96,165,250,.16); }
.perf-badge.perf-meh   { color:var(--warn); background:rgba(232,160,64,.18); }
.perf-badge.perf-slow  { color:#f87171; background:rgba(248,113,113,.18); }
.pb-grade { font-family:var(--font-cond); font-size:14px; font-weight:800; line-height:1; }

/* Slide-up panel */
.perf-panel {
  position:fixed; bottom:var(--statusbar-h); right:0;
  width:430px; max-width:100vw; max-height:76vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--card-border);
  border-top-left-radius:var(--radius-card); border-top-right-radius:var(--radius-card);
  box-shadow:var(--shadow-pop);
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform .22s cubic-bezier(.4,0,.2,1), opacity .18s;
  z-index:200;
}
.perf-panel.open { transform:translateY(0); opacity:1; pointer-events:auto; }

.perf-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px 8px; border-bottom:1px solid var(--divider);
  position:sticky; top:0; background:var(--surface); z-index:1;
}
.perf-panel-title-area { display:flex; align-items:baseline; gap:8px; min-width:0; }
.perf-screen-name { font-weight:700; font-size:13px; color:var(--text-1); }
.perf-screen-time { font-size:11px; color:var(--text-3); }
.perf-close-btn {
  background:none; border:none; cursor:pointer; padding:4px;
  color:var(--text-3); border-radius:6px; flex-shrink:0;
}
.perf-close-btn:hover { background:var(--surface-2); color:var(--text-1); }

/* Metrics grid */
.perf-metrics-row {
  display:flex; padding:12px 16px 6px;
  border-bottom:1px solid var(--divider);
}
.perf-metrics-row2 {
  display:flex; padding:4px 16px 10px;
  border-bottom:1px solid var(--divider);
}
.perf-metric {
  flex:1; display:flex; flex-direction:column; align-items:center; padding:0 3px;
}
.perf-metric + .perf-metric { border-left:1px solid var(--divider); }
.perf-metric-n { font-family:var(--font-cond); font-size:21px; font-weight:800; color:var(--text-1); line-height:1.1; }
.perf-metric-l { font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin-top:2px; text-align:center; }

/* API vs render bar */
.perf-bar-wrap { padding:8px 16px; border-bottom:1px solid var(--divider); }
.perf-bar-track { height:5px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.perf-bar-fill  { height:100%; background:var(--teal); border-radius:99px; }
.perf-bar-labels { display:flex; justify-content:space-between; margin-top:4px; font-size:10px; color:var(--text-3); }

/* Section titles */
.perf-section-title {
  padding:8px 16px 4px; font-size:9.5px; font-weight:700;
  letter-spacing:.08em; color:var(--text-3); text-transform:uppercase;
}

/* API calls list */
.perf-calls { padding:0 16px 8px; display:flex; flex-direction:column; gap:5px; }
.perf-call-row { display:grid; grid-template-columns:140px 1fr 52px; align-items:center; gap:8px; }
.perf-call-entity { font-size:11.5px; font-weight:600; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.perf-call-bar-wrap { background:var(--surface-2); border-radius:99px; height:4px; overflow:hidden; }
.perf-call-bar { height:100%; background:var(--teal); border-radius:99px; min-width:4px; }
.perf-call-bar.slow { background:var(--danger); }
.perf-call-ms { font-size:11px; font-weight:700; color:var(--text-2); text-align:right; }

/* Recommendations */
.perf-recs { padding:0 16px 10px; display:flex; flex-direction:column; gap:5px; }
.perf-rec { display:flex; align-items:flex-start; gap:7px; font-size:11.5px; color:var(--text-2); line-height:1.45; }
.perf-rec-dot { flex-shrink:0; width:7px; height:7px; border-radius:50%; margin-top:4px; }
.perf-rec-ok-icon { flex-shrink:0; font-size:11px; color:var(--ok); line-height:1.6; }
.perf-rec.perf-rec-high .perf-rec-dot { background:var(--danger); }
.perf-rec.perf-rec-med  .perf-rec-dot { background:var(--warn); }
.perf-rec.perf-rec-ok   { color:var(--text-3); }

/* Footer */
.perf-panel-footer {
  padding:10px 16px 14px; display:flex; align-items:center;
  justify-content:space-between; border-top:1px solid var(--divider);
  position:sticky; bottom:0; background:var(--surface);
}
.perf-copy-btn {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; padding:5px 12px;
  border-radius:var(--radius-pill); background:var(--surface-2);
  border:1px solid var(--card-border); cursor:pointer; color:var(--text-1);
  transition:background .12s;
}
.perf-copy-btn:hover:not(:disabled) { background:var(--accent-soft); color:var(--accent-strong); }
.perf-copy-btn.copied { background:color-mix(in srgb,var(--ok) 14%,transparent); color:var(--ok); border-color:transparent; }
.perf-history-link { font-size:11.5px; color:var(--teal); font-weight:600; }
.perf-panel-empty { padding:24px 16px; text-align:center; color:var(--text-3); font-size:13px; }

/* ── Query-URL uitklap (PerfPanel + PerformancePage) ─────────────────────── */
.perf-section-hint { font-size:9px; font-weight:400; color:var(--text-3); letter-spacing:0; text-transform:none; margin-left:6px; }
.perf-call-group   { display:flex; flex-direction:column; }
.perf-call-clickable { cursor:pointer; }
.perf-call-clickable:hover { background:var(--hover-bg); border-radius:4px; }
.perf-call-expand-icon { font-size:10px; color:var(--text-3); width:12px; flex-shrink:0; margin-right:2px; }
.perf-call-url {
    font-family:var(--font-mono); font-size:10.5px; color:var(--text-2);
    background:var(--hover-bg); border-left:2px solid var(--teal);
    padding:5px 10px 5px 28px; word-break:break-all; line-height:1.5;
    margin-bottom:2px; border-radius:0 4px 4px 0;
    user-select:all;
}
.perf-queries-toggle {
    font-size:11.5px; font-weight:600; color:var(--teal);
    background:none; border:none; cursor:pointer; padding:0;
}
.perf-queries-toggle:hover { text-decoration:underline; }
.perf-query-table-wrap { margin-top:8px; overflow-x:auto; }
.perf-query-table { width:100%; font-size:11.5px; }
.perf-query-url-cell {
    font-family:var(--font-mono); font-size:10.5px; word-break:break-all;
    color:var(--text-2); user-select:all;
}