/* NOGO Dispatch × Rosnya — shared product tokens on top of nogo.css */

:root {
  --app-sidebar-w: 224px;
  --app-topbar-h: 56px;
  --app-bg: var(--gray-50);
  --hair: var(--gray-100);
  --row-compact-h: 32px;
  --row-default-h: 40px;
}

* { box-sizing: border-box; }

.app-shell {
  display: grid;
  grid-template-columns: var(--app-sidebar-w) 1fr;
  height: 100%;
  background: var(--app-bg);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  overflow: hidden;
}

/* ─── Sidebar ───────────────────────────────────────────── */
.sidebar { background: #fff; border-right: 1px solid var(--border-default); display: flex; flex-direction: column; min-width: 0; }
.sidebar .brand { height: var(--app-topbar-h); padding: 0 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--hair); }
.sidebar .brand img { height: 18px; display: block; }
.sidebar .brand .pill { font-size: 10px; font-weight: 500; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.sidebar .nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 1px; }
.sidebar .nav-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 6px; font-size: 13px; color: var(--fg-muted); cursor: pointer; background: transparent; border: 0; width: 100%; font-family: inherit; text-align: left; }
.sidebar .nav-item:hover { background: var(--gray-50); color: #000; }
.sidebar .nav-item.active { background: var(--gray-100); color: #000; font-weight: 500; }
.sidebar .nav-item .c { margin-left: auto; font-size: 11px; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.sidebar .nav-item.active .c { color: var(--fg-secondary); }
.sidebar .sect-label { font-size: 10px; font-weight: 500; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.08em; padding: 12px 14px 6px; }
.sidebar .user { margin-top: auto; padding: 12px; border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 10px; }
.sidebar .user .av { width: 30px; height: 30px; border-radius: 9999px; background: var(--gray-900); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.sidebar .user .nm { font-size: 13px; font-weight: 500; }
.sidebar .user .em { font-size: 11px; color: var(--fg-muted); }

/* ─── Main area ─────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.topbar { height: var(--app-topbar-h); background: #fff; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
.topbar .crumbs { font-size: 13px; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; }
.topbar .crumbs .sep { color: var(--fg-faint); }
.topbar .crumbs .cur { color: var(--fg-primary); font-weight: 500; }
.topbar .rt { display: flex; align-items: center; gap: 10px; }
.topbar .live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-secondary); padding: 4px 10px 4px 8px; border: 1px solid var(--border-default); border-radius: 9999px; background: #fff; }
.topbar .live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-live); animation: pulse 2.2s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.content { flex: 1; overflow: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }

/* Page header bar */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-head h1 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.page-head .eyebrow { font-size: 11px; font-weight: 500; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.page-head .lead { font-size: 13px; color: var(--fg-muted); margin-top: 4px; }

/* ─── Buttons ───────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; border: 1px solid var(--border-default); background: #fff; color: var(--fg-primary); transition: background .1s, border-color .1s; }
.btn:hover { background: var(--gray-50); border-color: var(--border-strong); }
.btn.primary { background: #000; color: #fff; border-color: #000; }
.btn.primary:hover { background: #1f2937; border-color: #1f2937; }
.btn.pill { border-radius: 9999px; padding: 8px 16px; }
.btn.sm { padding: 4px 10px; font-size: 11px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--gray-100); }

/* ─── Day switcher ──────────────────────────────────────── */
.daypicker { display: inline-flex; gap: 4px; padding: 3px; background: var(--gray-100); border-radius: 8px; }
.daypicker .day { padding: 6px 12px; border-radius: 5px; font-size: 12px; color: var(--fg-secondary); cursor: pointer; border: 0; background: transparent; font-family: inherit; display: flex; flex-direction: column; align-items: center; min-width: 64px; gap: 2px; }
.daypicker .day:hover { color: #000; }
.daypicker .day.active { background: #fff; color: #000; box-shadow: var(--shadow-xs); font-weight: 500; }
.daypicker .day .d { font-size: 11px; color: var(--fg-muted); }
.daypicker .day.active .d { color: var(--fg-secondary); }
.daypicker .day .s { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-subtle); margin-top: 1px; }

/* ─── KPI cards ─────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--border-default); border-radius: 12px; padding: 16px 18px; }
.kpi .row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kpi .ic { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi .ic.b { background: var(--kpi-blue-bg); color: var(--kpi-blue-fg); }
.kpi .ic.g { background: var(--kpi-green-bg); color: var(--kpi-green-fg); }
.kpi .ic.a { background: var(--kpi-amber-bg); color: var(--kpi-amber-fg); }
.kpi .ic.p { background: var(--kpi-purple-bg); color: var(--kpi-purple-fg); }
.kpi.mono .ic { background: var(--gray-100); color: var(--fg-secondary); }
.kpi .lbl { font-size: 11px; font-weight: 500; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.kpi .val { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 11px; color: var(--fg-muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.kpi .delta.up { color: #16a34a; }
.kpi .delta.down { color: #b91c1c; }
.kpi.mono .delta.up, .kpi.mono .delta.down { color: var(--fg-secondary); font-weight: 500; }

/* ─── Generic card ──────────────────────────────────────── */
.card { background: #fff; border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; }
.card > .hd { padding: 14px 18px; border-bottom: 1px solid var(--hair); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card > .hd h3 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; }
.card > .hd .sub { font-size: 11px; color: var(--fg-muted); margin-top: 2px; }

/* ─── Status dots & chips ───────────────────────────────── */
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.dot.live { background: var(--signal-live); }
.dot.info { background: var(--signal-info); }
.dot.warn { background: var(--signal-warn); }
.dot.done { background: var(--signal-done); }
.dot.drop { background: var(--signal-drop); }
.dot.fail { background: #ef4444; }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 9999px; font-size: 10px; font-weight: 500; background: var(--gray-100); color: var(--gray-700); white-space: nowrap; }
.chip.ok { background: #f0fdf4; color: #15803d; }
.chip.info { background: #eff6ff; color: #1d4ed8; }
.chip.warn { background: #fffbeb; color: #b45309; }
.chip.done { background: var(--gray-100); color: var(--gray-600); }
.chip.fail { background: #fee2e2; color: #b91c1c; }
.chip.outline { background: transparent; border: 1px solid var(--border-default); color: var(--fg-secondary); }

/* mono chip version (toppings off) */
.mono-mode .chip.ok, .mono-mode .chip.info, .mono-mode .chip.warn, .mono-mode .chip.fail, .mono-mode .chip.done { background: var(--gray-100); color: var(--fg-primary); }
.mono-mode .kpi .ic { background: var(--gray-100); color: var(--fg-secondary); }
.mono-mode .kpi .delta.up, .mono-mode .kpi .delta.down { color: var(--fg-secondary); }

/* ─── Table ─────────────────────────────────────────────── */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl thead th { text-align: left; font-size: 10px; font-weight: 500; color: var(--fg-muted); padding: 9px 14px; text-transform: uppercase; letter-spacing: 0.06em; background: var(--gray-50); border-bottom: 1px solid var(--hair); position: sticky; top: 0; }
table.tbl th.r, table.tbl td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tbody tr { border-bottom: 1px solid var(--hair); cursor: pointer; transition: background .1s; }
table.tbl tbody tr:hover { background: var(--gray-50); }
table.tbl td { padding: 9px 14px; font-size: 12px; color: var(--fg-secondary); }
table.tbl td.primary { color: var(--fg-primary); font-weight: 500; }
table.tbl td.mono { font-family: var(--font-mono); color: var(--gray-700); font-size: 11px; }
table.tbl td.muted { color: var(--fg-muted); }

.compact table.tbl tbody tr, .compact table.tbl thead tr { height: var(--row-compact-h); }
.compact table.tbl td, .compact table.tbl th { padding-top: 5px; padding-bottom: 5px; }

/* ─── Filter bar ────────────────────────────────────────── */
.filterbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--hair); background: #fff; flex-wrap: wrap; }
.filterbar .search { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border-default); border-radius: 6px; background: #fff; min-width: 220px; }
.filterbar .search input { border: 0; outline: 0; font-family: inherit; font-size: 12px; flex: 1; color: var(--fg-primary); background: transparent; }
.filterbar .search input::placeholder { color: var(--fg-subtle); }
.filterbar .fchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border-default); background: #fff; font-size: 11px; font-weight: 500; color: var(--fg-secondary); cursor: pointer; }
.filterbar .fchip:hover { background: var(--gray-50); }
.filterbar .fchip .k { color: var(--fg-muted); }
.filterbar .fchip .badge { background: var(--gray-900); color: #fff; border-radius: 9999px; padding: 0 6px; font-size: 10px; line-height: 16px; }
.filterbar .divider { width: 1px; height: 20px; background: var(--border-default); }
.filterbar .spacer { flex: 1; }

/* ─── Pass row (timeline) ───────────────────────────────── */
.passlist { display: flex; flex-direction: column; }
.pass { display: grid; grid-template-columns: 180px 1fr 140px; gap: 0; border-bottom: 1px solid var(--hair); min-height: 68px; transition: background .1s; }
.pass:hover { background: var(--gray-50); }
.pass:last-child { border-bottom: 0; }
.pass .meta { padding: 12px 16px; border-right: 1px solid var(--hair); display: flex; flex-direction: column; gap: 4px; }
.pass .meta .no { font-family: var(--font-mono); font-size: 12px; color: var(--fg-primary); font-weight: 500; }
.pass .meta .drv { font-size: 12px; color: var(--fg-secondary); }
.pass .meta .veh { font-size: 11px; color: var(--fg-muted); }
.pass .bars { position: relative; height: 68px; border-right: 1px solid var(--hair); }
.pass .bars .track { position: absolute; inset: 0; display: flex; }
.pass .bars .track > div { flex: 1; border-left: 1px solid var(--hair); }
.pass .bars .track > div:first-child { border-left: 0; }
.pass .bars .block { position: absolute; top: 14px; bottom: 14px; border-radius: 3px; display: flex; align-items: center; padding: 0 6px; font-size: 10px; font-weight: 500; color: #fff; overflow: hidden; }
.pass .bars .block.drive { background: var(--gray-700); }
.pass .bars .block.stop { background: var(--gray-900); }
.pass .bars .block.load { background: var(--gray-400); color: var(--gray-900); }
.pass .bars .block.brk { background: var(--gray-200); color: var(--gray-600); border: 1px dashed var(--gray-400); }
.pass .bars .now { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--signal-live); z-index: 5; }
.pass .bars .now::before { content: ''; position: absolute; top: -3px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--signal-live); }
.pass .stat { padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--fg-secondary); align-items: flex-end; font-variant-numeric: tabular-nums; }
.pass .stat .big { font-size: 14px; color: var(--fg-primary); font-weight: 500; }

/* Toppings on → add signal colors */
.topped .pass .bars .block.drive { background: #3b82f6; }
.topped .pass .bars .block.load { background: #fbbf24; color: #111; }
.topped .pass .bars .block.brk { background: var(--gray-100); border-color: var(--gray-300); color: var(--gray-500); }

/* Timeline header (hours) */
.tlhead { display: grid; grid-template-columns: 180px 1fr 140px; border-bottom: 1px solid var(--hair); background: var(--gray-50); }
.tlhead .meta { padding: 8px 16px; font-size: 10px; font-weight: 500; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; border-right: 1px solid var(--hair); }
.tlhead .hours { display: flex; border-right: 1px solid var(--hair); }
.tlhead .hours span { flex: 1; padding: 8px 0; text-align: left; padding-left: 4px; font-size: 10px; color: var(--fg-muted); font-variant-numeric: tabular-nums; border-left: 1px solid var(--hair); }
.tlhead .hours span:first-child { border-left: 0; }
.tlhead .stat { padding: 8px 16px; font-size: 10px; font-weight: 500; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; text-align: right; }

/* ─── Unassigned panel ──────────────────────────────────── */
.unassigned { background: #fff; border: 1px solid var(--border-default); border-radius: 12px; }
.unassigned .hd { padding: 12px 16px; border-bottom: 1px solid var(--hair); display: flex; align-items: center; justify-content: space-between; }
.unassigned .hd h3 { margin: 0; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.unassigned .hd .count { background: #fee2e2; color: #b91c1c; padding: 0 7px; font-size: 10px; border-radius: 9999px; font-weight: 600; line-height: 16px; }
.mono-mode .unassigned .hd .count { background: var(--gray-900); color: #fff; }
.unassigned ul { list-style: none; margin: 0; padding: 0; }
.unassigned li { padding: 10px 16px; border-bottom: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; }
.unassigned li:hover { background: var(--gray-50); }
.unassigned li:last-child { border-bottom: 0; }
.unassigned li .ordref { font-family: var(--font-mono); font-size: 11px; color: var(--fg-secondary); }
.unassigned li .reason { font-size: 10px; color: var(--fg-muted); text-align: right; }
.unassigned li .addr { font-size: 12px; color: var(--fg-primary); font-weight: 500; }

/* Tweaks panel */
.tweaks { position: fixed; bottom: 16px; right: 16px; z-index: 50; background: #fff; border: 1px solid var(--border-default); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-md); width: 260px; font-size: 12px; display: none; }
.tweaks.on { display: block; }
.tweaks .hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tweaks .hd h4 { margin: 0; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); }
.tweaks .row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--hair); }
.tweaks .row:first-of-type { border-top: 0; }
.tweaks .row label { font-size: 12px; color: var(--fg-primary); }
.tweaks .seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--gray-100); border-radius: 6px; }
.tweaks .seg button { border: 0; background: transparent; font-size: 11px; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-family: inherit; color: var(--fg-muted); }
.tweaks .seg button.on { background: #fff; color: #000; box-shadow: var(--shadow-xs); font-weight: 500; }
.tweaks .switch { width: 30px; height: 16px; border-radius: 9999px; background: var(--gray-300); position: relative; cursor: pointer; border: 0; }
.tweaks .switch.on { background: #000; }
.tweaks .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; }
.tweaks .switch.on::after { left: 16px; }

/* Variant selector inline on artboards */
.variant-tabs { display: inline-flex; padding: 2px; background: var(--gray-100); border-radius: 6px; gap: 2px; margin-left: auto; }
.variant-tabs button { border: 0; background: transparent; font-size: 10px; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-family: inherit; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.variant-tabs button.on { background: #fff; color: #000; box-shadow: var(--shadow-xs); }

/* Scrollbars */
.content::-webkit-scrollbar, .tblwrap::-webkit-scrollbar { width: 8px; height: 8px; }
.content::-webkit-scrollbar-thumb, .tblwrap::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 9999px; }
.content::-webkit-scrollbar-track { background: transparent; }

/* Truck/fleet-specific */
.fleetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.truck-card { background: #fff; border: 1px solid var(--border-default); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.truck-card .tt { display: flex; justify-content: space-between; align-items: flex-start; }
.truck-card .reg { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.truck-card .mod { font-size: 11px; color: var(--fg-muted); margin-top: 2px; }
.truck-card .bar { height: 4px; background: var(--gray-100); border-radius: 9999px; overflow: hidden; }
.truck-card .bar > i { display: block; height: 100%; background: var(--gray-900); }
.truck-card .stats { display: flex; gap: 16px; font-size: 11px; color: var(--fg-muted); }
.truck-card .stats b { color: var(--fg-primary); font-weight: 500; font-variant-numeric: tabular-nums; }

.topped .truck-card .bar > i.low { background: #ef4444; }
.topped .truck-card .bar > i.med { background: #f59e0b; }
.topped .truck-card .bar > i.high { background: #16a34a; }

/* Workflow status specifics */
.wf-node { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--hair); }
.wf-node:last-child { border-bottom: 0; }
.wf-node .ic { width: 28px; height: 28px; border-radius: 6px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--fg-secondary); }
.wf-node.ok .ic { background: #f0fdf4; color: #16a34a; }
.wf-node.run .ic { background: #eff6ff; color: #2563eb; }
.wf-node.fail .ic { background: #fee2e2; color: #b91c1c; }
.mono-mode .wf-node .ic { background: var(--gray-100); color: var(--fg-secondary); }
.wf-node .lbl { font-size: 13px; font-weight: 500; }
.wf-node .sub { font-size: 11px; color: var(--fg-muted); margin-top: 2px; }
.wf-node .t { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); }

/* Stat cards for Statistik page */
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-card { background: #fff; border: 1px solid var(--border-default); border-radius: 12px; padding: 16px 18px; }
.stat-card .lbl { font-size: 10px; font-weight: 500; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stat-card .val { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.stat-card .spark { height: 32px; margin-top: 10px; }

/* Small helpers */
.hsep { height: 1px; background: var(--hair); margin: 8px 0; }
.rowline { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; }
.muted { color: var(--fg-muted); }
.mono { font-family: var(--font-mono); }