/** SMM Desk design system — built from assets/css/src */

/* >>> 00-base.css */
/** Base layout remnants — prefer tokens in 10-shell */
/**
 * SMM Desk — design system
 * tokens → shell → components → views → mobile
 * Do not inline large CSS back into index.html.
 */
/* ── RESET & TOKENS ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Font faces (Plex Sans/Mono) are declared once, in 00-tokens.css, which is
   also the canonical source for --font-ui/--font-mono below. This file used
   to declare its own competing @font-face for 'Inter'/'JetBrains Mono' —
   fonts that were never actually uploaded to the server (both 404'd) and
   were only ever "winning" the --font-ui cascade on paper, since
   00-tokens.css's later, correct declaration always overrode them at
   runtime. Removed 2026-09-10 along with the dead font-face rules. */

/**
 * Single source of truth for the whole dash.
 * Previously three complete palettes (Admina indigo, Bento cream/lime and this
 * one) were stacked and fought via ~343 !important rules; the values below are
 * the ones that actually won at render time, so this block is what you already
 * see on screen — now stated once.
 */
:root {
  --font-ui: 'Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg: #ffffff;
  --surface: #ffffff;
  --surface-subtle: #f8fafd;
  --surface-2: #f1f3f4;
  --border: #dadce0;
  --border-strong: #bdc1c6;
  --border-faint: #f1f3f4;
  --border-glow: rgba(26, 115, 232, 0.35);

  --text: #202124;
  --text-secondary: #3c4043;
  --muted: #5f6368;
  --muted-light: #80868b;

  --primary: #1a73e8;
  --primary-light: #4285f4;
  --primary-dark: #174ea6;
  --primary-bg: #e8f0fe;
  --primary-glow: rgba(26, 115, 232, 0.12);
  --secondary: #174ea6;

  /* Highlight chips (was Bento "acid"); kept at its rendered value. */
  --accent: #e8f0fe;
  --accent-ink: #174ea6;

  --green: #188038;
  --green-bg: #e6f4ea;
  --green-border: #ceead6;

  --amber: #b06000;
  --amber-bg: #fef7e0;
  --amber-border: #f9e4a6;

  --red: #d93025;
  --red-bg: #fce8e6;
  --red-border: #f6aea8;

  --cyan: #4285f4;
  --focus-ring: rgba(26, 115, 232, 0.25);

  /* KPI card top-accent bars */
  --kpi-green: #34a853;
  --kpi-indigo: #7e57c2;
  --kpi-cyan: #4285f4;

  /* Shop Accents — per-store chip colours, deliberately off-palette */
  --c-orange: #FF9F29;
  --c-blue: #144BD6;
  --c-berry: #D53128;
  --c-purple: #4536B6;
  --c-violet: #4F46E5;
  --c-teal: #45B369;
  --c-amber: #D69705;
  --c-cobalt: #4759D6;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 9px;
  --radius-xl: 12px;
  --radius-xxl: 16px;
  --radius-pill: 50rem;

  --shadow-sm: 0 1px 2px rgba(60,64,67,.12);
  --shadow-md: 0 1px 3px rgba(60,64,67,.14), 0 4px 12px rgba(60,64,67,.08);
  --shadow-lg: 0 8px 30px rgba(60,64,67,.12);

  --sidebar-w: 244px;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── HUD BACKGROUND CANVAS ── */
#hud-canvas {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ── APP SHELL ── */
.app-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 32px 54px 1fr;
  height: 100vh;
  overflow: hidden;
}
@media (min-width: 920px) {
  /* .topbar-left and .nav-tabs (children of .topbar-main) are pulled into the
     fixed sidebar below — .topbar-main itself must stay display:flex (never
     display:none) or it would hide those fixed children too. Collapsing the
     grid row it sits in is what actually removes the empty bar. */
  .app-shell { padding-left: var(--sidebar-w, 264px); grid-template-rows: 32px 0 1fr; }
  .topbar-main { padding: 0; border-bottom: none; box-shadow: none; }
  /* .topbar-right (the "Sync Now" button + mobile hamburger) has no fixed
     positioning of its own, so once .topbar-main collapses it's left
     rendering in the dead space above the sidebar. Desktop already has an
     identical sync action in .topbar-thin ("Sync Fleet"), so just hide the
     duplicate here instead of repositioning it. */
  .topbar-right { display: none; }
}

/* ── TOPBAR THIN ── */
.topbar-thin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: #12131c;
  color: var(--muted-light);
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 21;
}
.topbar-thin-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar-thin-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── TOPBAR MAIN ── */
.topbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  z-index: 20;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 920px) {
  .topbar-main { justify-content: flex-end; }
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: white;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.brand-icon:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.brand-icon svg { width: 21px; height: 21px; fill: none; stroke: white; }

.brand-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}
.brand-sub {
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Navigation — collapses into a left sidebar at desktop widths */
.nav-tabs {
  display: flex;
  gap: 6px;
  background: #f1f5f9;
  padding: 5px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.nav-btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--muted);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.8);
}
.nav-btn.active {
  background: #ffffff;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.nav-btn .pill-count {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--primary-glow);
  color: var(--primary);
  font-weight: 700;
}
.nav-btn .nav-ico { display: flex; align-items: center; flex-shrink: 0; }
.nav-btn .nav-ico svg { width: 17px; height: 17px; }

/* A full second sidebar implementation (86px topbar, different padding,
   different active-state treatment) used to live here. It never rendered —
   10-shell.css's `!important` desktop-sidebar rules always won — so it was
   4,000+ characters of pure dead weight. Removed 2026-09-10; the live
   geometry is owned by 10-shell.css (position/size) with the two hairline
   borders on .topbar-left kept in 20-shell.css. */

.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.live-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.5px;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(43, 193, 85, 0.8);
  animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.4; transform:scale(0.85);} }

/* The thin top bar used to be near-black; these controls were coloured for it and
   became unreadable when it turned light. They follow the token palette now. */
.btn-sync-action-thin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--primary-bg);
  color: var(--primary-dark);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.topbar-install-text {
  background: none;
  border: 0;
  padding: 3px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.topbar-install-text:hover { text-decoration: underline; }
.btn-sync-action-thin:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}
.btn-sync-action-thin:active {
  transform: scale(0.96);
}
.btn-sync-action-thin.syncing .sync-icon,
.btn-sync-action-main.syncing .sync-icon {
  animation: spin-sync 0.65s linear infinite;
}

.btn-sync-action-main {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(1, 163, 255, 0.3);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-sync-action-main:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(1, 163, 255, 0.45);
}
.btn-sync-action-main:active {
  transform: scale(0.97);
}

@keyframes spin-sync {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.sync-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.clock-text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  background: #f1f5f9;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s;
}
.icon-btn:hover {
  color: var(--primary);
  border-color: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.icon-btn.active {
  color: var(--primary);
  background: var(--primary-glow);
  border-color: var(--primary-light);
}
.icon-btn svg { width: 17px; height: 17px; }

.mobile-header-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s;
}
.mobile-header-menu-btn:hover {
  color: var(--primary);
  border-color: var(--primary-light);
}

/* ── MAIN WORKSPACE CONTAINER ── */
.workspace-container {
  overflow-y: auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 2560px;
  margin: 0 auto;
  width: 100%;
}

/* ── VIEW SWITCHING ── */
.view-panel { display: none; }
.view-panel.active {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── HERO KPI ROW (4 BOLD EXECUTIVE TILES) ──
   Only used on #view-overview, which now owns the full box styling (bento
   gradient fills) in 20-views.css — an ID selector always beats a plain
   class one, so re-declaring background/border/radius/value colour/etc.
   here was 100% dead weight. What's left is layout-only: properties the
   ID-scoped rule does NOT set (flex/gap/alignment) and that would silently
   break — no gradient, no coloured pill, but a genuinely different bug —
   if removed along with the rest. */
.kpi-row-executive {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.kpi-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.kpi-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-icon-badge svg { width: 20px; height: 20px; }
.kpi-subtext {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-badge-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}

/* ── EXECUTIVE MAIN SPLIT (KD DESK + FLEET MATRIX) ── */
.executive-split-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 22px;
  align-items: start;
}
.executive-split-grid .kd-desk-section,
.executive-split-grid .fleet-panel-card {
  display: flex;
  flex-direction: column;
  height: 560px;
}
.kd-orders-list {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── ELEVATED COCKPIT CARDS ── */
.cockpit-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}
.cockpit-card:hover {
  box-shadow: var(--shadow-md);
}

.card-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
}
.card-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-header-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.card-header-icon.amber { background: var(--amber-bg); color: var(--amber); }
.card-header-icon.indigo { background: var(--primary-glow); color: var(--primary); }
.card-header-icon.green { background: var(--green-bg); color: var(--green); }

.card-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
}
.card-header-sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
}


/* ── PRO-GRADE KD ACTION CARDS ── */
.kd-order-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}
.kd-order-card:hover {
  border-color: rgba(198, 130, 10, 0.5);
  box-shadow: 0 4px 14px rgba(255, 188, 17, 0.14);
}
.kd-order-card.actioned {
  opacity: 0.35;
  pointer-events: none;
}

.kd-card-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.store-badge-large {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  text-transform: lowercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.order-ref-large {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.kd-card-amount {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--amber);
  white-space: nowrap;
  flex-shrink: 0;
}

.kd-card-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.order-service-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  flex-shrink: 0;
}
.order-service-meta {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.kd-card-footer {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.btn-approve-paid {
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--green), var(--green));
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(43, 193, 85, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: transform 0.12s;
}
.btn-approve-paid:active { transform: scale(0.95); }

.btn-reject-unpaid {
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  background: #ffffff;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: transform 0.12s, border-color 0.12s, color 0.12s;
}
.btn-reject-unpaid:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-bg);
}
.btn-reject-unpaid:active { transform: scale(0.95); }

/* ── ORDERS MOBILE STREAM CARDS ── */
.orders-mobile-stream {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
}
/* bento mobile order card */
.order-mobile-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-sm) !important;

  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order-mobile-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.order-mobile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}


/* ── 8-SHOP FLEET MATRIX (RIGHT SIDE) ── */
.fleet-matrix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 12px;
  padding: 16px 20px;
  flex: 1;
  overflow-y: auto;
}

.fleet-store-tile {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
}
.fleet-store-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-glow);
}
.fleet-store-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3.5px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.fleet-store-tile.orange::before { background: var(--c-orange); }
.fleet-store-tile.blue::before { background: var(--c-blue); }
.fleet-store-tile.berry::before { background: var(--c-berry); }
.fleet-store-tile.purple::before { background: var(--c-purple); }
.fleet-store-tile.violet::before { background: var(--c-violet); }
.fleet-store-tile.teal::before { background: var(--c-teal); }
.fleet-store-tile.amber::before { background: var(--c-amber); }
.fleet-store-tile.cobalt::before { background: var(--c-cobalt); }

.store-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.store-tile-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.store-ping-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
}
.ping-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.ping-dot.up { background: var(--green); box-shadow: 0 0 6px var(--green); }
.ping-dot.down { background: var(--red); box-shadow: 0 0 6px var(--red); }

.store-tile-domain {
  font-size: 10.5px;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-bottom: 10px;
}

.store-tile-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.stm-val {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
}
.stm-lbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ── NETWORK VITALITY STRIP (ROW 3) ── */
.network-vitality-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.vitality-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.vitality-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.vitality-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}
.vitality-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}

/* ── FULL DATA TABLES (FOR DEDICATED TABS) ── */
.table-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table-wrap {
  overflow-x: auto;
  max-height: calc(100vh - 240px);
}
.cockpit-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.cockpit-table th {
  padding: 12px 18px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}
.cockpit-table td {
  padding: 14px 18px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.cockpit-table tr:hover td {
  background: rgba(1, 163, 255, 0.03);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.status-badge.pending { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.status-badge.paid { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.status-badge.unpaid { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.status-badge.free_queued { background: var(--primary-glow); color: var(--primary); border: 1px solid rgba(1, 163, 255, 0.25); }
.status-badge.payment_confirmed, .status-badge.processing, .status-badge.pushed, .status-badge.in_progress, .status-badge.completed { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.status-badge.provider_failed { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.status-badge.cancelled { background: var(--surface-subtle); color: var(--muted); border: 1px solid var(--border-strong); }

.btn-order-action {
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform 0.12s, opacity 0.12s;
}
.btn-order-action:active { transform: scale(0.96); }
.btn-order-action.push { background: var(--primary-glow); color: var(--primary); border-color: rgba(1, 163, 255, 0.25); }
.btn-order-action.push:hover { background: var(--primary); color: #fff; }
.btn-order-action.cancel { background: #ffffff; color: var(--red); border-color: var(--red-border); }
.btn-order-action.cancel:hover { background: var(--red-bg); }

/* ── SEARCH & FILTER CONTROLS ── */
.table-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
  gap: 16px;
}
.search-box-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 14px;
  width: 320px;
}
.search-box-wrap input {
  border: none;
  outline: none;
  font-size: 13px;
  width: 100%;
  font-family: inherit;
  color: var(--text);
}
.filter-tags-group {
  display: flex;
  gap: 6px;
}
.filter-tag-btn {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #ffffff;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.15s;
}
.filter-tag-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.filter-tag-btn.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.timeframe-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.timeframe-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.timeframe-label svg { color: var(--primary); flex-shrink: 0; }
.timeframe-buttons {
  display: flex;
  gap: 6px;
}
.timeframe-btn {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.timeframe-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.timeframe-btn.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 2px 8px var(--primary-glow);
}

/* ── SESSION INSPECTOR MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.modal-overlay.active { display: flex; }
.modal-window {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xxl);
  width: 1000px;
  max-width: 95vw;
  max-height: 88vh;
  display: grid;
  grid-template-rows: 72px 1fr 60px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  overflow: hidden;
}
.modal-head {
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}
.modal-body {
  overflow-y: auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #f8fafc;
}
.modal-foot {
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  background: #ffffff;
  font-size: 12px;
  color: var(--muted);
}

/* ── DEAD-SERVICE REPLACEMENT ALERT (2026-09-07) ──
   Built dynamically by 40-orders.js#showServiceReplacementAlert(); reuses
   the .modal-overlay backdrop above but with its own, narrower window. */
.svc-replace-window {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xxl);
  width: 480px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
}
.svc-replace-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.svc-replace-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.svc-replace-sub {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.svc-replace-body {
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.svc-replace-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.svc-replace-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  background: var(--primary-glow);
}
.svc-replace-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.svc-replace-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  color: var(--muted);
}
.svc-replace-meta span { white-space: nowrap; }
.svc-delta-good { color: var(--green); font-weight: 600; }
.svc-delta-up { color: var(--red); font-weight: 600; }
.svc-delta-down { color: var(--green); font-weight: 600; }
.svc-replace-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.svc-replace-foot {
  padding: 16px 24px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--border);
}
.svc-replace-cancel,
.svc-replace-confirm {
  border-radius: var(--radius-lg);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
}
.svc-replace-confirm {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}
.svc-replace-cancel:hover { background: var(--primary-glow); }
.svc-replace-confirm:hover { filter: brightness(1.06); }

/* Chat bubble styling inside modal */
.chat-bubble {
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid var(--border);
  position: relative;
}
.chat-bubble.user {
  background: var(--primary-glow);
  border-color: rgba(1, 163, 255, 0.25);
  align-self: flex-start;
  max-width: 85%;
}
.chat-bubble.assistant {
  background: #ffffff;
  align-self: flex-start;
  max-width: 92%;
  box-shadow: var(--shadow-sm);
}
.chat-bubble.tool {
  background: #14151f;
  color: #e2e8f0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  max-width: 96%;
  border-left: 4px solid var(--cyan);
}
.bubble-role-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

/* ── PRIYA HERMES AI STUDIO ── */
.priya-studio-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 1200px) {
  .priya-studio-grid { grid-template-columns: 1fr; }
}
.priya-chat-box {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 720px;
}
.priya-chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #f8fafc;
}
.priya-msg-row {
  display: flex;
  gap: 12px;
  max-width: 85%;
  animation: fadeIn 0.15s ease-out;
}
.priya-msg-row.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.priya-msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(1, 163, 255, 0.25);
}
.priya-msg-bubble {
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  font-size: 13.5px;
  line-height: 1.55;
  box-shadow: var(--shadow-sm);
}
.priya-msg-row.priya .priya-msg-bubble {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  border-top-left-radius: 4px;
}
.priya-msg-row.user .priya-msg-bubble {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #ffffff;
  border-top-right-radius: 4px;
}
.priya-img-thumb {
  max-width: 260px;
  max-height: 180px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  margin-bottom: 8px;
  display: block;
  cursor: pointer;
}
.priya-chips-bar {
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  background: #ffffff;
  border-top: 1px solid var(--border);
  overflow-x: auto;
  white-space: nowrap;
}
.priya-chip {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: #f1f5f9;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.priya-chip:hover {
  background: var(--primary-glow);
  color: var(--primary);
  border-color: var(--primary-light);
}
.priya-input-bar {
  padding: 14px 20px;
  background: #ffffff;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.priya-preview-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: #f1f5f9;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.priya-input-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.priya-textarea {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: inherit;
  resize: none;
  height: 44px;
  max-height: 140px;
  outline: none;
  transition: border-color 0.15s;
}
.priya-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.btn-send-priya {
  padding: 10px 20px;
  height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border: none;
  color: white;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(1, 163, 255, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-send-priya:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(1, 163, 255, 0.4);
}

/* ── PRIYA FLOATING CHATBOT WIDGET (bottom-right) ── */
.priya-widget-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  transition: transform 0.15s;
}
.priya-widget-launcher:hover { transform: scale(1.06); }
.priya-widget-launcher .priya-widget-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid #fff;
}
.priya-widget-panel {
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 140px);
  background: #ffffff;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg), 0 20px 50px rgba(17,24,39,0.25);
  z-index: 91;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.priya-widget-panel.open { display: flex; }
.priya-widget-panel .priya-chat-thread { padding: 16px; }
.priya-widget-panel .priya-chips-bar { padding: 8px 14px; }
.priya-widget-panel .priya-input-bar { padding: 10px 14px; }
@media (max-width: 520px) {
  .priya-widget-panel {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 88px;
  }
  .priya-widget-launcher { right: 16px; bottom: 16px; }
}

/* ── LIVE TERMINAL STRIP ── */
.terminal-card {
  background: #14151f;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #e2e8f0;
  max-height: 480px;
  overflow-y: auto;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
}
.terminal-row {
  padding: 3px 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.terminal-row.info { color: #93c5fd; }
.terminal-row.warn { color: #fde047; }
.terminal-row.err { color: #f87171; }
.terminal-row.cron { color: #86efac; }

/* ── TOAST NOTIFICATIONS ── */
.toast-stack {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast-msg {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  box-shadow: 0 14px 36px rgba(0,0,0,0.14);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideToast 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 280px;
}
@keyframes slideToast { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast-msg.success { border-left: 4px solid var(--green); }
.toast-msg.error { border-left: 4px solid var(--red); }
.toast-msg.info { border-left: 4px solid var(--primary); }

/* ── SCROLLBARS ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(1, 163, 255, 0.5); }


/* ── PRO-GRADE MOBILE BOTTOM NAVIGATION BAR ── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(58px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 99999;
  align-items: center;
  justify-content: space-around;
  touch-action: manipulation;
  pointer-events: auto;
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  padding: 6px 12px;
  min-width: 54px;
  min-height: 48px;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.bottom-nav-item svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
}
.bottom-nav-item.active {
  color: var(--primary);
}
.bottom-nav-item.active svg {
  stroke: var(--primary);
  transform: translateY(-2px);
}
.bottom-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: calc(4px + env(safe-area-inset-bottom));
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--primary);
  box-shadow: 0 0 8px rgba(123, 154, 255, 0.8);
}
.bottom-nav-badge {
  position: absolute;
  top: 2px;
  right: 6px;
  background: var(--primary);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.bottom-nav-badge.amber {
  background: var(--amber);
}

.mobile-more-overlay {
  display: none !important;
  pointer-events: none !important;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000;
  align-items: flex-end;
  touch-action: manipulation;
}
.mobile-more-overlay.active {
  display: flex !important;
  pointer-events: auto !important;
}
.mobile-more-sheet {
  width: 100%;
  background: #ffffff;
  border-radius: var(--radius-xxl) var(--radius-xxl) 0 0;
  padding: 16px 20px calc(76px + env(safe-area-inset-bottom)) 20px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
  animation: slideUpSheet 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.more-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
  margin: 0 auto 14px auto;
}
.more-sheet-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  text-align: center;
}
.more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.more-item:hover, .more-item:active {
  background: #f1f5f9;
  border-color: var(--primary);
}
.more-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.more-icon svg { width: 20px; height: 20px; }
.more-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}


/* ── RESPONSIVE MEDIA QUERIES (MOBILE, IPAD MINI 2, TABLETS) ── */
@media (max-width: 919px) {
  .topbar-thin { display: none !important; }
  .nav-tabs { display: none !important; }
  .mobile-header-menu-btn { display: flex !important; }
  
  .topbar-main {
    padding: 0 16px;
    height: 54px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  
  .app-shell {
    grid-template-rows: 54px 1fr !important;
    height: 100dvh;
  }
  
  .workspace-container {
    padding: 16px 14px calc(80px + env(safe-area-inset-bottom)) 14px !important;
    gap: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .executive-split-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .kpi-row-executive {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  .bottom-nav {
    display: flex !important;
  }
  
  .orders-mobile-stream {
    display: flex !important;
  }
  .orders-desktop-table-wrap {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .brand-sub { display: none; }
  
  .kpi-row-executive {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .kpi-card { padding: 14px 16px !important; border-radius: 14px !important; }
  .kpi-value { font-size: 22px !important; }
  .kpi-label { font-size: 11px !important; }
  .kpi-subtext { font-size: 11px !important; }
  
  .timeframe-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
  }
  .timeframe-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
  
  .table-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .search-box-wrap {
    width: 100%;
  }
  .filter-tags-group {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  
  .more-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
}

/* iPad Mini 2 & Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 919px) {
  .kpi-row-executive {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .kpi-value { font-size: 26px !important; }
  .orders-mobile-stream { display: none !important; }
  .orders-desktop-table-wrap { display: block !important; }
  .table-wrap { overflow-x: auto; }
  .cockpit-table { min-width: 680px; }
  .more-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* >>> 00-tokens.css */
/**
 * THE DESK — design tokens.
 *
 * One rule governs this whole system: the interface is achromatic, the data is
 * chromatic. Chrome (nav, cards, borders, buttons) is paper, ink and hairlines.
 * Saturated colour is reserved for money and state, so the numbers are always
 * the loudest thing on screen. If you are reaching for a colour on a button or
 * a panel, the answer is ink.
 *
 * Type: IBM Plex Sans + IBM Plex Mono, a designed superfamily — consistency is
 * structural rather than a rule anyone has to remember. Mono is for numerals,
 * identifiers and timestamps ONLY, never for words.
 */

@font-face {
  font-family: 'Plex Sans';
  src: url('../fonts/plex-sans.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plex-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-ui: 'Inter', 'Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Surfaces. Paper is faintly cool, never pure white — pure white on white
        is what makes a dashboard read flat and cheap. ── */
  --paper: #FBFBFD;
  --card: #FFFFFF;
  --sunken: #F5F6F9;
  --hover: #F2F4F8;

  /* ── Ink ── */
  --ink: #0E1420;
  --ink-2: #55607A;
  --ink-3: #8B94A7;
  --ink-inv: #FFFFFF;

  /* ── Hairlines ── */
  --line: #E7EAF0;
  --line-2: #D5DAE4;

  /* ── Data colour. The ONLY saturated colour in the product. ── */
  --gain: #0B7A5C;
  --gain-bg: #E7F4EF;
  --loss: #B03A26;
  --loss-bg: #FBECE8;
  --warn: #8A6410;
  --warn-bg: #FBF2E0;
  --info: #2E5AAC;
  --info-bg: #EAF0FB;
  --idle-bg: #F0F2F6;

  /* ── Type scale. Six sizes. Do not add a seventh. ── */
  --t-micro: 11px;
  --t-meta: 12px;
  --t-body: 13px;
  --t-title: 15px;
  --t-head: 20px;
  --t-kpi: 32px;

  /* ── Spacing, 4px grid ── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s14: 56px;

  /* ── Radius. Three values. ── */
  --r-ctl: 6px;
  --r-card: 10px;
  --r-pill: 999px;

  --shadow-pop: 0 12px 32px rgba(14, 20, 32, 0.14), 0 2px 6px rgba(14, 20, 32, 0.06);
  --focus: 0 0 0 3px rgba(14, 20, 32, 0.14);

  --sidebar-w: 236px;
  --topbar-h: 44px;

  /* Per-store accents. Kept low-chroma so eight of them can sit together
     without the row of tiles turning into confetti. */
  --c-1: #3F5B8B;
  --c-2: #6B5B8E;
  --c-3: #2F6E63;
  --c-4: #8A5B3E;
  --c-5: #4A6A44;
  --c-6: #8A4F63;
  --c-7: #52627E;
  --c-8: #7A6438;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv05' 1;
  -webkit-tap-highlight-color: transparent;
}

body { overflow: hidden; }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.011em; line-height: 1.25; }
h1 { font-size: var(--t-head); }
h2 { font-size: var(--t-title); }
h3, h4 { font-size: var(--t-body); }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }

/* Every numeral in the product is tabular and monospaced, so columns of money
   line up on the decimal without any per-table fiddling. */
.num, .money, .kpi-value, .vitality-value, .stm-val, .live-count,
.kd-card-amount, .order-ref-large, .pill-count, .bottom-nav-badge {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* Units set lighter than values — the detail that separates credible financial
   UI from amateur. The integer carries the weight; symbol and paise recede.
   The paise are also set smaller: at a monospace period's full advance width a
   same-size decimal reads as a gap ("599 . 66") rather than a decimal point. */
.money .cur, .money .dec { color: var(--ink-3); font-weight: 400; }
/* Proportional, so the decimal point sits tight against the rupees instead of
   floating in the middle of a monospace cell. Every amount carries exactly two
   paise digits, so columns still line up. */
.money .cur, .money .dec { font-family: var(--font-ui); }
.money .cur { font-size: 0.86em; margin-right: 0.02em; }
.money .dec { font-size: 0.92em; }
/* Paise shrink only where the figure is large enough to carry it; at 12px they
   would just be hard to read. */
.kpi-value .dec, .kd-card-amount .dec { font-size: 0.68em; }
.kpi-value .cur, .kd-card-amount .cur { font-size: 0.62em; }
.kpi-value .of {
  margin-left: 0.28em;
  font-size: 0.44em;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
}
.money.gain { color: var(--gain); }
.money.loss { color: var(--loss); }
.money.gain .cur, .money.gain .dec { color: color-mix(in srgb, var(--gain) 55%, var(--ink-3)); }
.money.loss .cur, .money.loss .dec { color: color-mix(in srgb, var(--loss) 55%, var(--ink-3)); }

/* An author `display` beats the UA rule for [hidden], so any component that
   sets its own display would ignore the attribute and show anyway. Several
   panels and the revenue backlog line are toggled with `hidden`. */
[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-ctl); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

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

/* >>> 10-primitives.css */
/**
 * Primitives — buttons, chips, inputs, tables, cards.
 * Everything here is achromatic. If a component needs colour it is because it
 * is showing money or state, and it takes it from the data tokens.
 */

/* ══ CARDS ═════════════════════════════════════════════════════════════════
   No shadows. Cards are separated from the paper by a hairline and by space.
   A shadow under every card is the SaaS-kit look and flattens hierarchy. */
.cockpit-card, .table-card, .kpi-card, .traffic-pulse-card,
.vitality-card, .terminal-card, .fleet-panel-card, .kd-desk-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.card-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.card-header-left { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.card-header-right { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.card-header-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-ctl);
  background: var(--sunken);
  color: var(--ink-2);
}
.card-header-icon svg { width: 15px; height: 15px; }
.card-header-title {
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -0.011em;
  color: var(--ink);
}
.card-header-sub {
  font-size: var(--t-meta);
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 1px;
}

/* ══ BUTTONS ═══════════════════════════════════════════════════════════════
   One system, four variants. Primary is ink — colour belongs to data. */
.btn, .filter-tag-btn, .icon-btn, .pwa-install-btn, .timeframe-btn,
.btn-order-action, .btn-approve-paid, .btn-reject-unpaid, .vitality-sync-btn,
.btn-sync-action-thin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 30px;
  padding: 0 var(--s3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  background: var(--card);
  color: var(--ink-2);
  font-size: var(--t-meta);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn:hover, .filter-tag-btn:hover, .icon-btn:hover, .pwa-install-btn:hover,
.timeframe-btn:hover, .btn-order-action:hover, .vitality-sync-btn:hover,
.btn-sync-action-thin:hover {
  background: var(--hover);
  border-color: var(--line-2);
  color: var(--ink);
}
.btn:active, .filter-tag-btn:active, .icon-btn:active, .btn-order-action:active { background: var(--sunken); }
.btn svg, .btn-order-action svg, .btn-sync-action-thin svg { width: 14px; height: 14px; }

/* Primary — ink */
.btn.primary, .pwa-install-btn.secondary, .pwa-featured, .btn-approve-paid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-inv);
  font-weight: 500;
}
.btn.primary:hover, .pwa-install-btn.secondary:hover, .pwa-featured:hover, .btn-approve-paid:hover {
  background: #232B3C;
  border-color: #232B3C;
  color: var(--ink-inv);
}

/* Quiet — the default for row-level actions so a table of 50 rows does not
   turn into 100 competing buttons. */
.btn.quiet, .btn-order-action.cancel, .btn-reject-unpaid {
  background: transparent;
  border-color: transparent;
  color: var(--ink-3);
}
.btn.quiet:hover, .btn-order-action.cancel:hover, .btn-reject-unpaid:hover {
  background: var(--loss-bg);
  border-color: transparent;
  color: var(--loss);
}

/* Selected state in a segmented control */
.filter-tag-btn.active, .timeframe-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-inv);
}

.btn.sm, .btn-order-action, .btn-approve-paid, .btn-reject-unpaid {
  height: 26px;
  padding: 0 var(--s2);
  font-size: var(--t-micro);
}
.icon-btn { width: 30px; padding: 0; }
.icon-btn svg { width: 15px; height: 15px; }

/* Segmented controls sit in a sunken track rather than each button owning a
   border, so the group reads as one object. */
.filter-tags-group, .timeframe-buttons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
}
.filter-tags-group .filter-tag-btn,
.timeframe-buttons .timeframe-btn {
  height: 26px;
  border-color: transparent;
  background: transparent;
}
.filter-tags-group .filter-tag-btn:hover,
.timeframe-buttons .timeframe-btn:hover { background: var(--card); color: var(--ink); }
.filter-tags-group .filter-tag-btn.active,
.timeframe-buttons .timeframe-btn.active {
  background: var(--card);
  border-color: var(--line-2);
  color: var(--ink);
  font-weight: 600;
}

/* ══ CHIPS & BADGES ════════════════════════════════════════════════════════
   Sentence case, not tracked-out caps. Colour carries the state. */
.status-badge, .pwa-chip, .bubble-role-tag, .store-ping-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  height: 20px;
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  background: var(--idle-bg);
  color: var(--ink-2);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
/* Money has landed. */
.status-badge.paid, .status-badge.on, .status-badge.push,
.status-badge.completed, .status-badge.pushed, .status-badge.payment_confirmed {
  background: var(--gain-bg); color: var(--gain);
}
/* Something went wrong or was withdrawn. */
.status-badge.unpaid, .status-badge.cancel, .status-badge.off,
.status-badge.cancelled, .status-badge.failed, .status-badge.refunded {
  background: var(--loss-bg); color: var(--loss);
}
/* Waiting on a human — the only state that should ever pull the eye. */
.status-badge.pending, .status-badge.awaiting_payment,
.status-badge.payment_in_progress, .status-badge.free_queued {
  background: var(--warn-bg); color: var(--warn);
}
/* In flight, nothing to do. */
.status-badge.confirmed, .status-badge.processing,
.status-badge.in_progress, .status-badge.priya {
  background: var(--info-bg); color: var(--info);
}

/* Store identity chip — a coloured dot, not a coloured block. Eight filled
   chips in a column shout; eight dots read as a legend. */
.store-badge-large, .store-tile-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.store-badge-large::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Counts in the nav. Deliberately quiet — a queue length is context, not an
   alarm, and it must never outweigh the revenue figures. */
.pill-count, .bottom-nav-badge {
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--idle-bg);
  color: var(--ink-3);
  font-size: var(--t-micro);
  font-weight: 500;
}
/* Only a queue that needs a human gets any colour at all. */
.pill-count.needs-action { background: var(--warn-bg); color: var(--warn); }

.live-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-meta); color: var(--ink-2); }
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gain);
  flex-shrink: 0;
}

/* ══ FORMS ═════════════════════════════════════════════════════════════════ */
input, select, textarea {
  width: 100%;
  padding: 7px var(--s3);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  color: var(--ink);
  font-size: var(--t-body);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink-3);
  box-shadow: var(--focus);
}
textarea { resize: vertical; min-height: 64px; line-height: 1.55; }

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink-2);
}
.field-row { display: grid; gap: var(--s3); margin-bottom: var(--s4); }

.search-box-wrap {
  display: flex;
  align-items: center;
  gap: var(--s2);
  height: 32px;
  padding: 0 var(--s3);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  min-width: 280px;
}
.search-box-wrap:focus-within { border-color: var(--ink-3); box-shadow: var(--focus); }
.search-box-wrap svg { width: 15px; height: 15px; color: var(--ink-3); flex-shrink: 0; }
.search-box-wrap input {
  border: 0; background: transparent; padding: 0; height: 100%;
}
.search-box-wrap input:focus { box-shadow: none; }

/* ══ TABLES ════════════════════════════════════════════════════════════════
   Stripe's model: muted gridlines, right-aligned tabular numerals, state as a
   chip. Horizontal rules only — vertical rules add noise without adding
   information when the columns are already aligned. */
.table-wrap { overflow: auto; }
.cockpit-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.cockpit-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--s3) var(--s4);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: nowrap;
}
.cockpit-table tbody td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-body);
  color: var(--ink-2);
  vertical-align: middle;
}
.cockpit-table tbody tr:last-child td { border-bottom: 0; }
.cockpit-table tbody tr:hover td { background: var(--hover); }
.cockpit-table td.num, .cockpit-table th.num { text-align: right; }
.cockpit-table .primary-cell { color: var(--ink); font-weight: 500; }

.table-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.orders-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-meta);
  color: var(--ink-3);
}

/* ══ MISC ══════════════════════════════════════════════════════════════════ */
.toast-stack {
  position: fixed;
  bottom: var(--s5);
  right: var(--s5);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.toast-msg {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-ctl);
  background: var(--ink);
  color: var(--ink-inv);
  font-size: var(--t-meta);
  box-shadow: var(--shadow-pop);
  max-width: 340px;
}
.toast-msg.success { border-left: 2px solid var(--gain); }
.toast-msg.error { border-left: 2px solid var(--loss); }

#hud-canvas { display: none; }

.scope-note { color: var(--ink-3); }
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--ink); }

/* >>> 10-shell.css */
/* ── GLOBAL LEDGER BENTO SHELL ── */


html, body {
  font-family: var(--font-ui) !important;
  background: var(--bg) !important;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body.sheet-open { overflow: hidden !important; }

.topbar-thin {
  background: var(--text) !important;
  color: var(--muted-light) !important;
  font-family: var(--font-ui);
}
.topbar-main {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.brand-icon {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}
.brand-icon svg { stroke: var(--accent-ink) !important; }
.brand-title { font-family: var(--font-ui); letter-spacing: -0.03em; }
.brand-sub { letter-spacing: 0.12em; }

.nav-tabs {
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
}
.nav-btn {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  border-radius: 12px !important;
}
.nav-btn.active {
  background: var(--text) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.nav-btn .pill-count {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
}

.workspace-container {
  background: var(--bg) !important;
}

/* .kpi-card excluded here too: #view-overview .kpi-card in 20-views.css fully owns its background (bento gradients), border and radius now. */
.cockpit-card, .table-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

.card-header-bar {
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
}
.card-header-title { font-family: var(--font-ui); letter-spacing: -0.02em; }
.card-header-sub { color: var(--muted) !important; }

.filter-tag-btn, .timeframe-btn {
  font-family: var(--font-ui) !important;
  border-radius: 999px !important;
}

/* PWA install controls */
.pwa-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--text);
  background: var(--text);
  color: #ffffff;
  border-radius: 999px;
  padding: 9px 14px;
  font: 800 12px/1 var(--font-ui);
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
}
.pwa-install-btn.secondary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.pwa-install-btn[hidden] { display: none !important; }
.pwa-install-btn:active { transform: scale(0.98); }
.pwa-hint {
  display: none;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font: 600 12px/1.45 var(--font-ui);
}
.pwa-hint.show { display: block; }
.pwa-featured {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--text);
  color: #ffffff;
  border: 0;
  text-align: left;
  cursor: pointer;
  min-height: 64px;
  box-sizing: border-box;
}
.pwa-hint { margin-bottom: 12px; }
.more-item svg { stroke: currentColor; fill: none; }
.more-icon { width: 28px; height: 28px; }
.pwa-featured strong { display:block; font:800 14px/1.2 var(--font-ui); letter-spacing:-0.02em; }
.pwa-featured span { display:block; margin-top:4px; font:600 11px/1.3 var(--font-ui); color:var(--muted-light); }
.pwa-featured .pwa-chip {
  flex-shrink: 0;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 8px 12px;
  font: 800 11px/1 var(--font-ui);
}

/* Bottom nav — ledger */
.bottom-nav {
  background: rgba(255, 254, 250, 0.96) !important;
  border-top: 1px solid var(--border) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.bottom-nav-item {
  color: var(--muted) !important;
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  min-width: 56px;
  min-height: 52px;
  padding: 6px 8px !important;
}
.bottom-nav-item svg { stroke: currentColor !important; width: 22px !important; height: 22px !important; }
.bottom-nav-item.active { color: var(--text) !important; }
.bottom-nav-item.active::after {
  background: var(--accent) !important;
  box-shadow: none !important;
  bottom: calc(6px + env(safe-area-inset-bottom)) !important;
}
.bottom-nav-badge {
  background: var(--text) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}
.bottom-nav-badge.amber { background: var(--amber) !important; }

.mobile-more-overlay { z-index: 100000; }
.mobile-more-sheet {
  background: var(--surface) !important;
  border-radius: 28px 28px 0 0 !important;
  padding: 12px 16px calc(88px + env(safe-area-inset-bottom)) 16px !important;
  max-height: min(88vh, 720px);
}
.more-sheet-handle { background: var(--border-strong) !important; width: 44px !important; height: 5px !important; }
.more-sheet-title {
  font: 800 13px/1 var(--font-ui) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin-bottom: 12px !important;
}
.more-grid { gap: 10px !important; }
.more-item {
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  min-height: 84px;
  padding: 14px 8px !important;
}
.more-item:active { background: var(--surface-subtle) !important; border-color: var(--border-strong) !important; }
.more-icon { color: var(--text) !important; }
.more-label { font: 800 11px/1.2 var(--font-ui) !important; color: var(--text) !important; }

.mobile-header-menu-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-subtle) !important;
  color: var(--text) !important;
  display: none;
  align-items: center;
  justify-content: center;
}

@media (min-width: 920px) {
  /* sidebar polish */
  .nav-tabs {
    position: fixed !important;
    left: 0; top: var(--topbar-h); bottom: 0;
    width: var(--sidebar-w);
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 18px 12px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--border) !important;
    background: var(--surface) !important;
    overflow-y: auto;
    z-index: 30;
  }
  .topbar-left {
    position: fixed;
    left: 0; top: 0;
    width: var(--sidebar-w);
    height: var(--topbar-h);
    padding: 0 18px;
    z-index: 31;
    background: var(--surface);
  }
  /* NOTE: a stale `.nav-tabs { padding-top: 78px !important; }` used to live
     here — leftover compensation from an earlier revision where topbar-left
     overlapped the sidebar and needed clearing. It no longer does (nav-tabs
     already starts below topbar-left via `top`), so the 78px was pure dead
     space pushing every nav item down for no reason. Removed 2026-09-10.
     `top: 32px` on both rules above was ALSO stale in the same way — it only
     ever rendered correctly because 20-shell.css's now-deleted duplicate
     (`top: 0` / `top: var(--topbar-h)`) happened to win the cascade for
     exactly this property. Fixed at the source instead of re-duplicating. */
  .nav-btn {
    justify-content: flex-start !important;
    width: 100%;
    padding: 11px 12px !important;
  }
  .nav-btn.active { background: var(--surface-subtle) !important; color: var(--text) !important; }
  .pwa-install-desktop { margin: 12px; width: calc(100% - 24px); justify-content: center; }
}

@media (max-width: 919px) {
  .mobile-header-menu-btn { display: inline-flex !important; }
  .topbar-right { display: flex !important; align-items: center; gap: 8px; }
  .pwa-install-header { display: inline-flex !important; padding: 0 12px; min-width: 44px; justify-content: center; }
  .pwa-install-header .pwa-label { display: none; }
  .kpi-row-executive { grid-template-columns: 1fr 1fr !important; }
  .executive-split-grid { grid-template-columns: 1fr !important; }
  .executive-split-grid .kd-desk-section,
  .executive-split-grid .fleet-panel-card { height: auto !important; max-height: 70vh; }
  .network-vitality-bar { grid-template-columns: 1fr 1fr !important; }
  .traffic-sites-grid { grid-template-columns: 1fr 1fr !important; }
  .timeframe-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    border-radius: 18px !important;
    gap: 10px !important;
  }
  .timeframe-buttons { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; width: 100%; }
  .timeframe-btn { width: 100%; text-align: center; padding: 10px 6px !important; }
  .table-filter-bar { flex-direction: column !important; align-items: stretch !important; }
  .search-box-wrap { min-width: 0 !important; width: 100% !important; }
  .filter-tags-group { display: flex; flex-wrap: wrap; gap: 8px; }
  .orders-mobile-stream { display: flex !important; flex-direction: column; gap: 10px; padding: 12px; }
  .orders-desktop-table-wrap { display: none !important; }
}

@media (max-width: 560px) {
  .kpi-row-executive,
  .traffic-sites-grid,
  .network-vitality-bar,
  .network-brief-grid { grid-template-columns: 1fr !important; }
  .more-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .kpi-value { font-size: 28px !important; }
}

/* >>> 20-shell.css */
/**
 * Shell — sidebar, top bar, workspace, mobile nav.
 * The chrome's job is to disappear. It is paper and hairlines so that the
 * numbers in the workspace are the only thing with visual weight.
 */

.app-shell {
  display: grid;
  grid-template-rows: var(--topbar-h) 0 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--paper);
}

/* ══ STATUS BAR ════════════════════════════════════════════════════════════ */
.topbar-thin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 0 var(--s5);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-meta);
  color: var(--ink-3);
  z-index: 21;
}
.topbar-thin-left, .topbar-thin-right {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-width: 0;
}
/* The template separators between every status item are noise; space does the
   same job. Kept in the markup, hidden here. */
.topbar-thin-left > span:not([id]):not([class]),
.topbar-thin-right > span:not([id]):not([class]) { display: none; }

#hudClock { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-micro); }

.btn-sync-action-thin { height: 26px; font-size: var(--t-micro); }
.topbar-install-text {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}
.topbar-install-text:hover { color: var(--ink); text-decoration: underline; }
#logoutBtn { color: var(--ink-3); font-size: var(--t-meta); }
#logoutBtn:hover { color: var(--loss); }

.topbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
}

/* ══ SIDEBAR ═══════════════════════════════════════════════════════════════
   The real geometry (position/top/width/padding/background) for
   .topbar-left and .nav-tabs at desktop widths is owned by 10-shell.css's
   `!important` rules, which win the cascade — this block used to redeclare
   all of that a second time with different, losing numbers (dead weight
   that made the actual winning values harder to find). Only the two
   properties 10-shell.css doesn't set are kept here. */
@media (min-width: 920px) {
  .app-shell {
    padding-left: var(--sidebar-w);
    grid-template-rows: var(--topbar-h) 0 1fr;
  }
  .topbar-main { padding: 0; border: 0; }
  .topbar-right { display: none; }

  .topbar-left {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
}

.brand-icon {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-ctl);
  background: var(--ink);
  color: var(--ink-inv);
  cursor: pointer;
}
.brand-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
.brand-title {
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: -0.011em;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.2;
}
/* "EXECUTIVE COCKPIT" as a tracked-out caps eyebrow is the single most
   template-looking element in the product. */
.brand-sub { display: none; }

.nav-btn {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  height: 32px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--r-ctl);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--t-body);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-btn:hover { background: var(--hover); color: var(--ink); }
.nav-btn.active { background: var(--sunken); color: var(--ink); font-weight: 500; }
.nav-btn .nav-ico { display: flex; flex-shrink: 0; color: var(--ink-3); }
.nav-btn .nav-ico svg { width: 16px; height: 16px; stroke-width: 1.6; }
.nav-btn.active .nav-ico { color: var(--ink); }
.nav-btn > span:not(.nav-ico):not(.pill-count) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Groups the flat 12-item list into scannable clusters: overview / catalog &
   fulfillment / ops monitoring / comms. A hairline, not a label — the icons
   already carry meaning. */
.nav-divider {
  height: 1px;
  margin: var(--s2) var(--s2);
  background: var(--line);
  flex-shrink: 0;
}

/* The install prompt was a full-width saturated block anchored to the bottom of
   the nav — the loudest object on the page, for a once-per-device action. It
   still needs real button padding, not a 4px sliver, or the label reads as
   cramped against the pill's own rounded corners. */
.pwa-install-desktop { margin-top: auto; padding: var(--s3); }
.pwa-install-btn.pwa-install-desktop { height: 38px; padding: 0 var(--s3); font-size: var(--t-body); font-weight: 600; gap: var(--s2); }
.pwa-install-btn.secondary { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.pwa-install-btn.secondary:hover { background: var(--hover); color: var(--ink); }

/* ══ WORKSPACE ═════════════════════════════════════════════════════════════ */
.workspace-container {
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--paper);
  padding: var(--s5) var(--s6) var(--s10);
}
.view-panel { display: none; }
.view-panel.active {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  /* On a 2560px display an uncapped grid stretches every card until the content
     inside it is stranded in whitespace. Capping the measure is what makes the
     remaining space read as margin rather than as a gap. */
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
}

.mobile-header-menu-btn { display: none; }

/* ══ NARROW / PWA WINDOW ═══════════════════════════════════════════════════ */
@media (max-width: 919px) {
  .app-shell { grid-template-rows: var(--topbar-h) 48px 1fr; padding-left: 0; }
  .topbar-main {
    padding: 0 var(--s4);
    background: var(--card);
    border-bottom: 1px solid var(--line);
  }
  .topbar-left { display: flex; align-items: center; gap: var(--s3); }
  .nav-tabs { display: none; }
  .mobile-header-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-ctl);
    background: var(--card);
    cursor: pointer;
  }
  .workspace-container { padding: var(--s4) var(--s4) 88px; }
  .pwa-install-desktop { display: none; }
}

@media (max-width: 560px) {
  .topbar-thin { display: none; }
  .app-shell { grid-template-rows: 0 48px 1fr; }
  .workspace-container { padding: var(--s3) var(--s3) 88px; }
}

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--card);
  border-top: 1px solid var(--line);
}
@media (max-width: 919px) { .bottom-nav { display: flex; align-items: stretch; } }

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}
.bottom-nav-item svg { width: 19px; height: 19px; stroke-width: 1.7; }
.bottom-nav-item.active { color: var(--ink); }
.bottom-nav-badge {
  position: absolute;
  top: 4px;
  left: 50%;
  margin-left: 4px;
  height: 15px;
  min-width: 15px;
  font-size: 9px;
}

.mobile-more-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(14, 20, 32, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}
.mobile-more-overlay.active { opacity: 1; pointer-events: auto; }
.mobile-more-sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  max-height: 82vh;
  overflow-y: auto;
  padding: var(--s3) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom));
  background: var(--card);
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.mobile-more-overlay.active .mobile-more-sheet { transform: translateY(0); }
.more-sheet-handle {
  width: 34px; height: 4px;
  margin: var(--s1) auto var(--s4);
  border-radius: var(--r-pill);
  background: var(--line-2);
}
.more-sheet-title { font-size: var(--t-title); font-weight: 600; margin-bottom: var(--s3); }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
}
.more-item:active { background: var(--hover); }
.more-icon { display: flex; color: var(--ink-3); }
.more-icon svg { width: 19px; height: 19px; }
.more-label { font-size: var(--t-micro); font-weight: 500; text-align: center; color: var(--ink); }
body.sheet-open { overflow: hidden; }

.pwa-hint {
  display: none;
  margin-top: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-ctl);
  background: var(--sunken);
  font-size: var(--t-meta);
  color: var(--ink-2);
}
.pwa-hint.show { display: block; }

/* >>> 20-views.css */
/* ── LEDGER BENTO · Overview + Orders only ── */


#view-overview,
#view-orders {
  font-family: var(--font-ui);
  color: var(--text);
  gap: 14px !important;
}
#view-overview .kpi-value,
#view-overview .traffic-metric strong,
#view-overview .kd-card-amount,
#view-orders .cockpit-table,
#view-orders .money {
  font-variant-numeric: tabular-nums;
}

/* Timeframe — segmented control */
#view-overview .timeframe-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 10px 8px 18px;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#view-overview .timeframe-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  gap: 8px;
}
#view-overview .timeframe-label strong {
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.02em;
}
#view-overview .timeframe-buttons { gap: 4px; }
#view-overview .timeframe-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 14px;
  font: 700 12px/1 var(--font-ui);
  letter-spacing: 0.01em;
  box-shadow: none;
}
#view-overview .timeframe-btn:hover { background: var(--surface-subtle); color: var(--text); }
#view-overview .timeframe-btn.active {
  background: var(--text);
  color: #ffffff;
}

/* KPI bento row */
/* ══ BENTO KPI ROW ═══════════════════════════════════════════════════════
   Soft pastel gradient fills + a white circular icon badge, replacing the
   old white-card-plus-coloured-edge treatment. This is the ONLY place these
   four cards are styled now — the competing full re-declarations that used
   to live in 00-base.css, 30-views.css and 30-google.css (a left bar, THEN
   a top border, both fighting for the same "which edge shows the colour"
   job) are gone. 2026-09-10. */
#view-overview .kpi-row-executive {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 0.95fr;
  gap: 14px;
}
#view-overview .kpi-card {
  border: none;
  border-radius: 22px;
  padding: 20px 20px 18px;
  box-shadow: 0 1px 2px rgba(32,33,36,.05);
  overflow: hidden;
  position: relative;
  min-height: 168px;
  transform: none !important;
  transition: box-shadow .18s ease, transform .18s ease;
}
#view-overview .kpi-card:hover {
  box-shadow: 0 14px 32px rgba(32,33,36,.10);
  transform: translateY(-2px) !important;
}
#view-overview .kpi-card.green  { background: linear-gradient(150deg, #EAF8EF 0%, #D3F0DE 100%); }
#view-overview .kpi-card.amber  { background: linear-gradient(150deg, #FFF8E6 0%, #FCEAC0 100%); }
#view-overview .kpi-card.indigo { background: linear-gradient(150deg, #F1ECFC 0%, #E1D5F9 100%); }
#view-overview .kpi-card.cyan   { background: linear-gradient(150deg, #EAF3FF 0%, #D6E7FE 100%); }
#view-overview .kpi-header-row { margin-bottom: 14px; }
#view-overview .kpi-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(32,33,36,.6);
}
#view-overview .kpi-icon-badge {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.82) !important;
  color: var(--text) !important;
  border: none;
  box-shadow: 0 1px 3px rgba(32,33,36,.1);
}
#view-overview .kpi-value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  font-family: var(--font-mono);
  line-height: 1;
}
#view-overview .kpi-subtext {
  margin-top: 10px;
  gap: 8px;
  flex-wrap: wrap;
  color: rgba(32,33,36,.62);
  font-size: 12px;
  font-weight: 600;
}
#view-overview .kpi-badge-pill {
  background: rgba(255,255,255,.75) !important;
  color: var(--text) !important;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
#view-overview .kpi-cost-line {
  margin-top: 14px;
  color: var(--red) !important;
  font: 700 12px/1.2 var(--font-mono);
}
#view-overview .kpi-profit-line {
  margin-top: 5px;
  color: var(--green) !important;
  font: 800 13px/1.2 var(--font-mono);
}
#view-overview .kpi-leaderboard {
  max-height: 112px;
  margin-top: 4px;
  gap: 4px;
}
#view-overview .kpi-leader-row {
  background: rgba(255,255,255,.75);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
  /* Same fix as .traffic-metric: was block, so the shop name and the amount
     ran together as adjacent inline boxes ("SocialBar₹599.66 · 7"). */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
#view-overview .kpi-leader-row:hover { background: rgba(255,255,255,.95); }
#view-overview .kpi-leader-row strong {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}

/* Traffic analytics — light ledger tiles */
#view-overview .traffic-pulse-card {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 18px 18px 16px !important;
  box-shadow: var(--shadow-sm);
}
#view-overview .traffic-pulse-head {
  margin-bottom: 14px;
  align-items: end;
}
#view-overview .traffic-pulse-card h2 {
  color: var(--text) !important;
  font: 800 18px/1.1 var(--font-ui);
  letter-spacing: -0.03em;
}
/* The head is a block box, so this caption sits inline immediately after the
   live-count text and ran into it ("last 3mLive first-party"). */
#view-overview .traffic-pulse-head::after {
  content: "· Live first-party · 8 shops";
  margin-left: 8px;
  font: 700 11px/1 var(--font-ui);
  color: var(--muted);
  letter-spacing: 0.04em;
}
#view-overview .traffic-sites-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
#view-overview .traffic-site-row {
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 12px !important;
  min-height: 0 !important;
  gap: 12px !important;
  color: var(--text) !important;
  transition: border-color .15s ease, transform .15s ease;
}
#view-overview .traffic-site-row:hover {
  border-color: var(--border-strong) !important;
  transform: translateY(-1px);
}
#view-overview .traffic-site-name {
  color: var(--text) !important;
  font: 800 14px/1.15 var(--font-ui) !important;
  letter-spacing: -0.02em;
}
#view-overview .traffic-site-domain {
  color: var(--muted) !important;
  font: 600 10px/1.3 var(--font-mono) !important;
  margin-top: 3px;
}
#view-overview .traffic-site-metrics { gap: 6px; }
#view-overview .traffic-metric {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 12px !important;
  /* Was display:block, so the label and value rendered as adjacent inline
     boxes with no separation ("Traffic142"). */
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
#view-overview .traffic-metric span {
  color: var(--muted) !important;
  font: 800 9px/1.2 var(--font-ui) !important;
  letter-spacing: 0.1em !important;
}
#view-overview .traffic-metric strong {
  color: var(--text) !important;
  font: 800 16px/1.1 var(--font-mono) !important;
  letter-spacing: -0.03em;
}
#view-overview .traffic-metric em {
  color: var(--green) !important;
  font: 700 10px/1.2 var(--font-mono) !important;
}

/* Split panels */
#view-overview .executive-split-grid {
  gap: 12px;
  grid-template-columns: 1.15fr 1fr;
}
#view-overview .executive-split-grid .kd-desk-section,
#view-overview .executive-split-grid .fleet-panel-card {
  height: 540px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
#view-overview .card-header-bar {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 16px 18px;
}
#view-overview .card-header-icon {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--surface-subtle) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}
#view-overview .card-header-title {
  font: 800 15px/1.15 var(--font-ui);
  letter-spacing: -0.02em;
  color: var(--text);
}
#view-overview .card-header-sub {
  font: 600 11px/1.3 var(--font-ui);
  color: var(--muted);
}
#view-overview .kd-orders-list {
  padding: 12px;
  gap: 8px;
  background: linear-gradient(180deg, transparent, rgba(18,17,14,.015));
}
#view-overview .kd-order-card {
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 12px;
  gap: 12px;
  box-shadow: none;
  align-items: flex-start;
  flex-wrap: wrap;
}
#view-overview .kd-order-card:hover {
  border-color: var(--border-strong);
  box-shadow: none;
}
#view-overview .order-ref-large {
  color: var(--text);
  font-size: 12px;
}
#view-overview .kd-card-amount {
  color: var(--text);
  font-size: 15px;
  margin-left: auto;
}
#view-overview .btn-approve-paid,
#view-overview .btn-reject-unpaid {
  border-radius: 999px !important;
  font: 800 11px/1 var(--font-ui) !important;
  padding: 8px 12px !important;
  letter-spacing: 0.02em;
}
#view-overview .btn-approve-paid {
  background: var(--text) !important;
  color: #ffffff !important;
  border: 0 !important;
}
#view-overview .btn-reject-unpaid {
  background: transparent !important;
  color: var(--red) !important;
  border: 1px solid rgba(194,59,34,.35) !important;
}

/* Priya cron list */
#view-overview .priya-cron-list {
  padding: 12px;
  gap: 8px;
  background: linear-gradient(180deg, transparent, rgba(18,17,14,.015));
}
#view-overview .priya-cron-item {
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}
#view-overview .priya-cron-actions button {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font: 700 11px var(--font-ui);
  padding: 6px 10px;
}
#view-overview .priya-cron-actions button.on {
  background: rgba(31,122,76,.1);
  color: var(--green);
  border-color: rgba(31,122,76,.25);
}
#view-overview .priya-cron-actions button.off {
  background: rgba(194,59,34,.08);
  color: var(--red);
  border-color: rgba(194,59,34,.2);
}
#view-overview .priya-cron-remark {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  font: 500 12px/1.4 var(--font-ui);
}

/* Network brief */
#view-overview #networkBrief {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--radius-lg) !important;
  padding: 18px !important;
  margin: 0 !important;
  box-shadow: var(--shadow-sm);
}
#view-overview #networkBrief .card-header-title {
  font: 800 14px/1 var(--font-ui);
  letter-spacing: -0.02em;
}
#view-overview .brief-list {
  color: var(--text);
  font: 600 13px/1.55 var(--font-ui);
}
#view-overview .brief-list li::marker { color: var(--muted); }

/* Vitality strip */
#view-overview .network-vitality-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
#view-overview .vitality-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: var(--shadow-sm);
  gap: 12px;
}
#view-overview .vitality-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--surface-subtle) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}
#view-overview .vitality-label {
  font: 800 9px/1 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
#view-overview .vitality-value {
  font: 700 13px/1.25 var(--font-mono);
  color: var(--text);
  margin-top: 4px;
}
#view-overview .vitality-sync-btn {
  border-radius: 999px;
  border: 1px solid var(--text);
  background: var(--text);
  color: #ffffff;
  font: 800 10px var(--font-ui);
  padding: 7px 10px;
}

/* ── ORDERS VIEW BENTO ── */
#view-orders .table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
#view-orders .table-filter-bar {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  gap: 10px;
  flex-wrap: wrap;
}
#view-orders .search-box-wrap {
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 14px;
  min-width: 280px;
}
#view-orders .search-box-wrap input {
  background: transparent;
  border: 0;
  font: 600 13px var(--font-ui);
  color: var(--text);
  padding: 10px 8px;
}
#view-orders .filter-tag-btn {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--muted);
  font: 700 11px/1 var(--font-ui);
  padding: 8px 12px;
  letter-spacing: 0.02em;
}
#view-orders .filter-tag-btn.active {
  background: var(--text);
  color: #ffffff;
  border-color: var(--text);
}
#view-orders .cockpit-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
#view-orders .cockpit-table thead th {
  background: var(--surface-subtle);
  color: var(--muted);
  font: 800 10px/1 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}
#view-orders .cockpit-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font: 600 12.5px/1.35 var(--font-ui);
  color: var(--text);
  vertical-align: middle;
}
#view-orders .cockpit-table tbody tr:hover td {
  background: var(--surface-subtle);
}

/**
 * Column sizing. Twelve columns in a fixed-width shell meant the order ref wrapped
 * onto three lines, rows had ragged heights, and the Actions column was pushed off
 * the right edge behind the horizontal scrollbar. Widths are assigned by priority:
 * identity and actions get what they need, Service absorbs the slack.
 */
#view-orders .table-wrap { overflow-x: auto; }
/* Fixed layout so the widths below are authoritative — under auto layout the
   content stretched the table ~190px past its container. */
#view-orders .cockpit-table {
  table-layout: fixed;
  width: 100%;
  min-width: 1410px;
}
#view-orders .cockpit-table th,
#view-orders .cockpit-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-orders .cockpit-table th:nth-child(1),
#view-orders .cockpit-table td:nth-child(1) { width: 92px; }
#view-orders .cockpit-table th:nth-child(2),
#view-orders .cockpit-table td:nth-child(2) { width: 168px; font-family: var(--font-mono); font-size: 11.5px; }
#view-orders .cockpit-table th:nth-child(3),
#view-orders .cockpit-table td:nth-child(3) { width: 108px; }
/* Service is the only elastic column — it absorbs whatever is left over. */
#view-orders .cockpit-table th:nth-child(4),
#view-orders .cockpit-table td:nth-child(4) { width: auto; }
/* Target (link/handle + Copy). */
#view-orders .cockpit-table th:nth-child(5),
#view-orders .cockpit-table td:nth-child(5) { width: 140px; }
/* Qty · Sale · Cost · Profit */
#view-orders .cockpit-table th:nth-child(n+6):nth-child(-n+9),
#view-orders .cockpit-table td:nth-child(n+6):nth-child(-n+9) {
  width: 92px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#view-orders .cockpit-table th:nth-child(10),
#view-orders .cockpit-table td:nth-child(10) { width: 104px; }
#view-orders .cockpit-table th:nth-child(11),
#view-orders .cockpit-table td:nth-child(11) { width: 112px; }
#view-orders .cockpit-table th:nth-child(12),
#view-orders .cockpit-table td:nth-child(12) { width: 118px; white-space: normal; }

/* Actions pinned to the right edge so Push/Cancel stay reachable while scrolling. */
#view-orders .cockpit-table th:last-child,
#view-orders .cockpit-table td:last-child {
  /* Holds the push receipt and the Push/Cancel buttons, so it needs real room
     and must be allowed to wrap rather than spill past the table edge. */
  width: 196px;
  white-space: normal;
  position: sticky;
  right: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
}
#view-orders .cockpit-table thead th:last-child { background: var(--surface-subtle); z-index: 3; }
#view-orders .cockpit-table tbody tr:hover td:last-child { background: var(--surface-subtle); }
#view-orders .orders-pagination {
  border-top: 1px solid var(--border);
  background: var(--surface);
}
#view-orders .orders-mobile-stream {
  display: none;
  padding: 12px;
  gap: 8px;
}

@media (max-width: 1200px) {
  #view-overview .kpi-row-executive { grid-template-columns: 1fr 1fr; }
  #view-overview .traffic-sites-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #view-overview .network-vitality-bar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  #view-overview .executive-split-grid { grid-template-columns: 1fr; }
  #view-overview .executive-split-grid .kd-desk-section,
  #view-overview .executive-split-grid .fleet-panel-card { height: 420px; }
}
@media (max-width: 560px) {
  #view-overview .kpi-row-executive,
  #view-overview .traffic-sites-grid,
  #view-overview .network-vitality-bar { grid-template-columns: 1fr; }
  #view-overview .timeframe-bar { flex-direction: column; border-radius: 18px; align-items: stretch; padding: 12px; }
}


/* Live traffic — updating */
#view-overview .traffic-site-metrics-4 { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }
#view-overview .traffic-metric.live strong.live-count,
#view-overview .traffic-metric.live strong {
  color: var(--green) !important;
  font-weight: 800 !important;
}
/* Visitors on site is a positive signal — it reads as green, not as an alarm. */
#view-overview .traffic-metric.live span {
  color: var(--green) !important;
  opacity: 0.85;
}
#view-overview .traffic-metric.live.is-hot {
  border-color: var(--green-border) !important;
  background: var(--green-bg) !important;
}
.traffic-live-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 12px/1 var(--font-ui);
  color: var(--green);
  letter-spacing: 0.02em;
}
.traffic-live-meta .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-bg);
  animation: liveDot 1.2s ease-in-out infinite;
}
@keyframes liveDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}
@media (max-width: 900px) {
  #view-overview .traffic-site-metrics-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* >>> 25-controls.css */
/**
 * Date range control and charts.
 * Charts obey the same rule as everything else: the frame is ink and hairlines,
 * the data is the only thing allowed to carry colour.
 */

/* ══ RANGE CONTROL ═════════════════════════════════════════════════════════ */
.range-control { position: relative; }
.range-button {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 38px;
  padding: 0 var(--s3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  background: var(--card);
  cursor: pointer;
  text-align: left;
}
.range-button:hover { background: var(--hover); }
.range-button svg { width: 15px; height: 15px; color: var(--ink-3); flex-shrink: 0; }
.range-button-text { display: flex; flex-direction: column; line-height: 1.2; }
.range-button-label { font-size: var(--t-body); font-weight: 500; color: var(--ink); }
.range-button-sub { font-size: var(--t-micro); color: var(--ink-3); }
.range-caret { margin-left: var(--s1); color: var(--ink-3); }

.range-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  width: 460px;
  padding: var(--s4);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
}
.range-menu.open { display: block; }
.range-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.range-presets { display: flex; flex-direction: column; gap: 2px; }
.range-preset {
  display: block;
  width: 100%;
  padding: 7px var(--s3);
  border: 0;
  border-radius: var(--r-ctl);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--t-body);
  text-align: left;
  cursor: pointer;
}
.range-preset:hover { background: var(--hover); color: var(--ink); }
.range-preset.active { background: var(--sunken); color: var(--ink); font-weight: 500; }

.range-custom { display: flex; flex-direction: column; gap: var(--s2); }
.range-custom .field-label { margin-bottom: 2px; }
.range-custom input { height: 32px; font-size: var(--t-meta); }
.range-menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

/* Compare toggle — a real switch, because it changes what every number means. */
.compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: var(--t-meta);
  cursor: pointer;
}
.compare-switch {
  width: 30px; height: 18px;
  border-radius: var(--r-pill);
  background: var(--line-2);
  position: relative;
  transition: background 0.14s ease;
  flex-shrink: 0;
}
.compare-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--card);
  transition: transform 0.14s ease;
}
.compare-toggle.on .compare-switch { background: var(--ink); }
.compare-toggle.on .compare-switch::after { transform: translateX(12px); }

/* ══ DELTA CHIPS ═══════════════════════════════════════════════════════════ */
.delta-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  background: var(--idle-bg);
  color: var(--ink-3);
}
.delta-chip.up { background: var(--gain-bg); color: var(--gain); }
.delta-chip.down { background: var(--loss-bg); color: var(--loss); }
.delta-chip.is-new { background: var(--info-bg); color: var(--info); }

/* ══ CHARTS ════════════════════════════════════════════════════════════════ */
.chart-wrap { position: relative; }
.chart { display: block; width: 100%; height: var(--chart-h, 180px); overflow: visible; }
/* Labels live outside the SVG: the plot is stretched to the card width, which
   would scale any text inside it to an arbitrary size. */
.chart-axis-row {
  position: relative;
  height: 18px;
  margin-top: var(--s2);
  font-size: var(--t-micro);
  color: var(--ink-3);
}
.chart-axis-row span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.chart-axis-row span:first-child { transform: none; }
.chart-axis-row span:last-child { transform: translateX(-100%); }
.chart-point { fill: var(--ink); }
.chart-line { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart-line-compare {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.25;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.chart-fill-top { stop-color: var(--ink); stop-opacity: 0.10; }
.chart-fill-bottom { stop-color: var(--ink); stop-opacity: 0; }
.chart-guide { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-hit { fill: transparent; cursor: crosshair; }
.chart-hit:hover { fill: var(--ink); fill-opacity: 0.05; }
.chart-empty {
  padding: var(--s8) var(--s4);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-meta);
}
.chart-frame { padding: var(--s5); }
.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
}
.chart-figure { display: flex; align-items: baseline; gap: var(--s2); }
.chart-figure .kpi-value { font-size: 26px; }
.chart-legend { display: flex; align-items: center; gap: var(--s4); font-size: var(--t-micro); color: var(--ink-3); }
.chart-legend i { display: inline-block; width: 14px; height: 0; border-top: 1.5px solid var(--ink); margin-right: 5px; vertical-align: middle; }
.chart-legend .prev i { border-top-style: dashed; border-color: var(--ink-3); }

.spark { display: block; overflow: visible; }
.spark path { stroke: var(--ink-3); stroke-width: 1.5; }
.spark.gain path { stroke: var(--gain); }
.spark.loss path { stroke: var(--loss); }
.spark-empty { display: block; height: 28px; }

/* ══ BAR LIST ══════════════════════════════════════════════════════════════ */
.bar-list { display: flex; flex-direction: column; gap: var(--s2); }
.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px auto;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-meta);
}
.bar-label { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 6px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--ink); opacity: 0.72; }
.bar-value { font-family: var(--font-mono); color: var(--ink-2); text-align: right; min-width: 56px; }

/* ══ FUNNEL ════════════════════════════════════════════════════════════════ */
.funnel { display: flex; flex-direction: column; gap: var(--s4); }
.funnel-step { display: flex; flex-direction: column; gap: 6px; }
.funnel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.funnel-label { font-size: var(--t-body); color: var(--ink); }
.funnel-value { font-family: var(--font-mono); font-size: var(--t-body); font-weight: 500; color: var(--ink); }
.funnel-pct { margin-left: var(--s2); font-size: var(--t-micro); color: var(--ink-3); }
.funnel-track { height: 8px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.funnel-fill { height: 100%; border-radius: var(--r-pill); background: var(--ink); opacity: 0.8; }
.funnel-drop { font-size: var(--t-micro); color: var(--loss); }

/* ══ RING ══════════════════════════════════════════════════════════════════ */
.ring { display: block; flex-shrink: 0; }
.ring circle { fill: none; stroke-width: 4; }
.ring-track { stroke: var(--sunken); }
.ring-fill { stroke: var(--ink); stroke-linecap: round; }
.ring.gain .ring-fill { stroke: var(--gain); }
.ring.warn .ring-fill { stroke: var(--warn); }
.ring.loss .ring-fill { stroke: var(--loss); }

@media (max-width: 700px) {
  .range-menu { width: min(92vw, 460px); }
  .range-menu-grid { grid-template-columns: 1fr; }
}

/* ══ FORMS IN CONFIG PANELS ═══════════════════════════════════════════════
   Config sits above the table it configures and is collapsed by default, so
   the list — the thing you actually came to read — is the page. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s4);
}
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.form-note { font-size: var(--t-meta); color: var(--ink-3); }
.form-note.gain { color: var(--gain); }
.form-note.loss { color: var(--loss); }
.field-hint { font-weight: 400; color: var(--ink-3); }

/* ══ CALENDAR PICKER ═══════════════════════════════════════════════════════
   Each day carries how much it booked, so picking a period is informed rather
   than a guess. Weight, not colour — colour stays reserved for money and state
   in the data itself. */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s2);
}
.cal-head strong { font-size: var(--t-body); font-weight: 600; }
.cal-dow, .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-dow span {
  text-align: center;
  font-size: var(--t-micro);
  color: var(--ink-3);
  padding-bottom: 4px;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  background: var(--sunken);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  cursor: pointer;
}
.cal-day.is-empty { background: none; cursor: default; }
.cal-day:disabled { opacity: 0.35; cursor: default; }
.cal-day:hover:not(:disabled):not(.is-empty) { border-color: var(--ink-3); }
/* Days that booked money read heavier. */
.cal-day.heat-1 { background: color-mix(in srgb, var(--ink) 8%, var(--sunken)); color: var(--ink); }
.cal-day.heat-2 { background: color-mix(in srgb, var(--ink) 18%, var(--sunken)); color: var(--ink); font-weight: 500; }
.cal-day.heat-3 { background: color-mix(in srgb, var(--ink) 30%, var(--sunken)); color: var(--ink); font-weight: 600; }
.cal-day.is-today { border-color: var(--ink-3); }
.cal-day.in-range { background: var(--info-bg); color: var(--info); }
.cal-day.is-edge { background: var(--ink); color: var(--ink-inv); border-color: var(--ink); }
.cal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s3);
}

/* Orders has its own archive scope, separate from the Overview range. */
.orders-date-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 2px;
}
.orders-date-label {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  margin-right: 2px;
}
.orders-date-input {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
}
.orders-date-input input {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 4px 7px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
}
@media (max-width: 760px) {
  .orders-date-filter { align-items: stretch; }
  .orders-date-input { flex: 1 1 145px; justify-content: space-between; }
  .orders-date-input input { flex: 1; min-width: 0; }
}

/* >>> 30-google.css */
/**
 * Component layer.
 * Loads last and is the final authority on component appearance. Every value
 * here references a token from 00-base.css — do not reintroduce raw hex, and
 * do not add a second :root block. Changing a colour is a one-line edit there.
 */
html, body {
  overflow: auto;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-ui) !important;
}
body { -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font-family: var(--font-ui) !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px;
}
#hud-canvas { display: none !important; }

/* Chrome */
.topbar-thin { background: var(--surface-subtle) !important; color: var(--muted) !important; border-bottom: 1px solid var(--border) !important; }
.topbar-main { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important; }
.brand-icon { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: var(--primary-light) !important; color: #fff !important; box-shadow: none !important; }
.brand-icon svg { stroke: #fff !important; }
.brand-title { color: var(--text) !important; font-weight: 600 !important; letter-spacing: -.02em !important; }
.brand-sub { color: var(--muted) !important; letter-spacing: 0 !important; }

/* Navigation */
.nav-tabs { background: var(--surface) !important; border-color: var(--border) !important; border-radius: var(--radius-md) !important; }
.nav-btn { color: var(--muted) !important; border-radius: var(--radius-md) !important; font-weight: 600 !important; }
.nav-btn:hover { background: var(--surface-2) !important; color: var(--text) !important; }
.nav-btn.active { background: var(--primary-bg) !important; color: var(--primary-dark) !important; box-shadow: none !important; }
.nav-btn .pill-count { background: var(--red-bg) !important; color: var(--red) !important; }
.workspace-container { background: var(--bg) !important; }

/* Surfaces */
.cockpit-card, .table-card, .traffic-pulse-card, .vitality-card, .terminal-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: none !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
/* A flat card reads as inert. Lifting it a hair on hover, the way every
   premium SaaS dashboard does, is what makes the surface feel alive without
   adding any color or noise. */
/* .kpi-card excluded: #view-overview .kpi-card:hover in 20-views.css owns its hover state (its gradient backgrounds need their own shadow tuning, not this shared one). */
.traffic-pulse-card:hover, .vitality-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border-strong) !important;
  transform: translateY(-1px);
}
.card-header-bar { border-bottom: 1px solid var(--border-faint) !important; background: transparent !important; }
.card-header-title { color: var(--text) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.card-header-sub, .vitality-label { color: var(--muted) !important; }

/* Buttons */
.pwa-install-btn, .filter-tag-btn, .icon-btn {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}
.pwa-install-btn:hover, .filter-tag-btn:hover, .icon-btn:hover { border-color: var(--primary) !important; background: var(--primary-bg) !important; color: var(--primary-dark) !important; }
.pwa-install-btn.secondary, .pwa-featured { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }

/* KPI cards — full styling (bento gradient fills) now lives in one place:
   #view-overview .kpi-card in 20-views.css. This used to also draw a 3px
   coloured top border here — on top of a left-edge coloured bar drawn by
   the SAME class in 20-views.css, two different accent mechanisms for the
   same four cards. Removed 2026-09-10. */
.kpi-label, .kpi-sub, .traffic-metric label, .traffic-site-label { color: var(--muted) !important; }
.traffic-pulse-card { border-top: 3px solid var(--kpi-cyan) !important; }

/* Tiles */
.traffic-site-card, .network-brief, .kd-order-card, .priya-cron-item {
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}
.network-vitality-bar { gap: 10px !important; }

/* Controls */
.timeframe-bar, .table-filter-bar { background: var(--surface) !important; border-color: var(--border) !important; border-radius: var(--radius-md) !important; box-shadow: none !important; }
.timeframe-btn, .filter-tag-btn { border-radius: var(--radius-sm) !important; color: var(--muted) !important; }
.timeframe-btn.active, .filter-tag-btn.active { background: var(--primary-bg) !important; color: var(--primary-dark) !important; }

/* Tables */
.cockpit-table, table { color: var(--text-secondary) !important; }
th { background: var(--surface-subtle) !important; color: var(--muted) !important; border-bottom: 1px solid var(--border) !important; font-family: var(--font-ui) !important; letter-spacing: .02em !important; }
td { border-bottom-color: var(--border-faint) !important; }
tbody tr:hover td { background: var(--surface-subtle) !important; }

/* Forms */
input, select, textarea { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; border-radius: var(--radius-sm) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; }

/* Overlays */
.modal-overlay { background: rgba(32,33,36,.32) !important; }
.modal-card, .mobile-more-sheet { border: 1px solid var(--border) !important; border-radius: var(--radius-xl) !important; background: var(--surface) !important; box-shadow: var(--shadow-md) !important; }
.bottom-nav { background: var(--surface) !important; border-top-color: var(--border) !important; }
.bottom-nav-item { color: var(--muted) !important; font-family: var(--font-ui) !important; }
.bottom-nav-item.active { color: var(--primary-dark) !important; }
.bottom-nav-item.active::after { background: var(--primary) !important; box-shadow: none !important; }
.bottom-nav-badge { background: var(--red) !important; color: #fff !important; }
.toast { background: var(--text) !important; color: #fff !important; border-left-color: var(--primary) !important; }

@media (min-width: 920px) {
  .nav-tabs { background: var(--surface) !important; border-right: 1px solid var(--border) !important; }
  .topbar-left { background: var(--surface) !important; }
}
@media (max-width: 919px) {
  .kpi-row-executive, .executive-split-grid, .network-vitality-bar, .traffic-sites-grid { gap: 10px !important; }
}
@media (max-width: 560px) {
  .topbar-thin { display: none !important; }
  .main { padding-bottom: 84px !important; }
  .kpi-value { font-size: 28px !important; }
  .panel, .cockpit-card, .table-card { border-radius: var(--radius-md) !important; }
  .orders-mobile-stream { padding: 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* >>> 30-views.css */
/**
 * Views.
 *
 * Hierarchy rule for this layer: money is the largest thing on any screen it
 * appears on. Labels shrink and recede, values grow. Sections are separated by
 * space that means something — a gap between groups is wider than a gap within
 * one, so the eye gets the grouping for free.
 */

/* ══ TIMEFRAME ═════════════════════════════════════════════════════════════ */
.timeframe-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.timeframe-label {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-body);
  color: var(--ink-3);
}
.timeframe-label svg { width: 15px; height: 15px; }
.timeframe-label strong { color: var(--ink); font-weight: 500; }

/* ══ KPI ROW ═══════════════════════════════════════════════════════════════
   The first card is the headline for the whole product — today's money — so it
   is given more width and a larger figure than its neighbours. */
.kpi-row-executive {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s3);
}
.kpi-card {
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  min-height: 152px;
}
.kpi-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.kpi-label {
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.kpi-icon-badge {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-ctl);
  background: var(--sunken);
  color: var(--ink-3);
  border: 0;
}
.kpi-icon-badge svg { width: 14px; height: 14px; }
/* .kpi-value's own font-size/weight/colour is now set with higher specificity
   by #view-overview .kpi-value in 20-views.css (the only place this class is
   used) — removed the fully-redundant copy that used to be here. The layout
   rules on .kpi-card / .kpi-header-row / .kpi-icon-badge / .kpi-badge-pill
   below are NOT redundant, even though colour keeps getting decided
   elsewhere: they're the only place display:flex, flex-direction, and the
   header row's align-items are set, and #view-overview's rules never
   redeclare those. Left as-is deliberately. */
/* Supporting stats hang off the bottom of every card, so the four cards share a
   baseline and the space above it reads as deliberate rather than left over. */
.kpi-subtext {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--s4);
  font-size: var(--t-meta);
  color: var(--ink-3);
}
.kpi-badge-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  background: var(--gain-bg);
  color: var(--gain);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0;
}
.kpi-cost-line, .kpi-profit-line {
  margin-top: var(--s2);
  font-size: var(--t-meta);
  color: var(--ink-3);
}

.kpi-leaderboard {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-top: var(--s1);
  overflow-y: auto;
}
.kpi-leader-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-meta);
  color: var(--ink-2);
}
.kpi-leader-row:last-child { border-bottom: 0; }
.kpi-leader-row strong { font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500; color: var(--ink); }

/* ══ TRAFFIC ═══════════════════════════════════════════════════════════════ */
.traffic-pulse-card { padding: var(--s5); }
.traffic-pulse-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
}
.traffic-pulse-card h2 { font-size: var(--t-head); font-weight: 600; }
.traffic-live-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-meta);
  color: var(--ink-3);
}
.traffic-live-meta strong { font-family: var(--font-mono); color: var(--gain); font-weight: 500; }

.traffic-sites-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
}
.traffic-site-row {
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}
.traffic-site-name { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.traffic-site-domain {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.traffic-site-metrics, .traffic-site-metrics-4 {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--s3);
}
.traffic-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  border-radius: 0;
}
.traffic-metric:last-child { border-bottom: 0; }
.traffic-metric span {
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.traffic-metric strong {
  font-family: var(--font-mono);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
}
.traffic-metric em { font-family: var(--font-mono); font-style: normal; font-size: var(--t-micro); color: var(--ink-3); }
.traffic-metric.live strong { color: var(--gain); }

/* ══ SPLIT PANELS ══════════════════════════════════════════════════════════ */
.executive-split-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s3);
}
.executive-split-grid .kd-desk-section,
.executive-split-grid .fleet-panel-card {
  display: flex;
  flex-direction: column;
  height: 520px;
  overflow: hidden;
}
.kd-orders-list, .priya-cron-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--s3) var(--s5) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/* Action queue rows. These are the busiest objects in the product, so they get
   the strictest alignment: identity left, money right, actions last. */
.kd-order-card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--card);
}
.kd-order-card:hover { background: var(--hover); }
.kd-card-header-left { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex-shrink: 0; }
.kd-card-body { flex: 1; min-width: 0; overflow: hidden; }
.order-service-title {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-service-meta {
  font-size: var(--t-micro);
  color: var(--ink-3);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kd-card-amount {
  font-size: var(--t-title);
  font-weight: 600;
  color: var(--ink);
  flex-shrink: 0;
  text-align: right;
}
.kd-card-footer { display: flex; align-items: center; gap: var(--s1); flex-shrink: 0; }
.order-ref-large { font-size: var(--t-micro); color: var(--ink-3); }

/* ══ PRIYA CRONS ═══════════════════════════════════════════════════════════ */
.priya-cron-item {
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--card);
}
.priya-cron-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.priya-cron-top strong, .priya-cron-item h4 { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.priya-cron-schedule {
  font-size: var(--t-meta);
  color: var(--ink-3);
  margin-top: 2px;
}
.priya-cron-actions { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.priya-cron-remark textarea { min-height: 52px; font-size: var(--t-meta); }

/* ══ VITALITY BAR ══════════════════════════════════════════════════════════ */
.network-vitality-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
}
.vitality-card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
}
.vitality-icon {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-ctl);
  background: var(--sunken);
  color: var(--ink-3);
}
.vitality-icon svg { width: 15px; height: 15px; }
.vitality-label { font-size: var(--t-meta); color: var(--ink-3); }
.vitality-value { font-size: var(--t-title); font-weight: 600; color: var(--ink); line-height: 1.2; }

/* ══ FLEET TILES ═══════════════════════════════════════════════════════════ */
.store-tile-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.store-tile-name { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.store-tile-domain { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-3); }
.store-tile-metrics { display: flex; gap: var(--s5); margin-top: var(--s3); }
.stm-lbl { display: block; font-size: var(--t-micro); color: var(--ink-3); }
.stm-val { display: block; font-size: var(--t-title); font-weight: 600; color: var(--ink); }
.store-ping-badge { background: var(--gain-bg); color: var(--gain); }

/* ══ NETWORK BRIEF ═════════════════════════════════════════════════════════ */
.network-brief-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5); }
.network-brief { padding: var(--s5); }
.network-brief h4 {
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: var(--s3);
}
.brief-list { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.brief-list li {
  position: relative;
  padding-left: var(--s4);
  font-size: var(--t-body);
  color: var(--ink-2);
}
.brief-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line-2);
}

/* ══ TERMINAL / LIVE LOG ═══════════════════════════════════════════════════
   The one deliberately dark surface: a log is a different kind of object from
   a report, and the shift in ground says so without a label. */
.terminal-card {
  background: #0E1420;
  border-color: #1E2635;
  color: #C7CEDB;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  padding: var(--s4);
  overflow: auto;
}
.terminal-row { padding: 2px 0; white-space: pre-wrap; word-break: break-word; }
.terminal-row.info { color: #7FA7E8; }
.terminal-row.cron { color: #6FC49B; }
.terminal-row.warn { color: #D9B168; }
.terminal-row.error { color: #E38A7A; }

/* ══ CHAT ══════════════════════════════════════════════════════════════════ */
.priya-msg-row { display: flex; gap: var(--s3); margin-bottom: var(--s4); }
.priya-msg-row.user { flex-direction: row-reverse; }
.priya-msg-avatar {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sunken);
}
.priya-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.priya-msg-bubble, .chat-bubble {
  max-width: 68ch;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--line);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
}
.priya-msg-row.user .priya-msg-bubble, .chat-bubble.user {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-inv);
}
.bubble-role-tag { margin-bottom: var(--s2); }
.priya-img-thumb { max-width: 220px; border-radius: var(--r-ctl); margin-top: var(--s2); }

/* ══ ORDERS TABLE ══════════════════════════════════════════════════════════ */
.orders-desktop-table-wrap { overflow-x: auto; }
#view-orders .cockpit-table { table-layout: fixed; width: 100%; min-width: 1240px; }
#view-orders .cockpit-table th,
#view-orders .cockpit-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-orders th:nth-child(1),  #view-orders td:nth-child(1)  { width: 104px; }
#view-orders th:nth-child(2),  #view-orders td:nth-child(2)  { width: 152px; font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-2); }
#view-orders th:nth-child(3),  #view-orders td:nth-child(3)  { width: 104px; }
#view-orders th:nth-child(4),  #view-orders td:nth-child(4)  { width: auto; }
#view-orders th:nth-child(5),  #view-orders td:nth-child(5)  { width: 132px; }
#view-orders th:nth-child(n+6):nth-child(-n+9),
#view-orders td:nth-child(n+6):nth-child(-n+9) { width: 88px; text-align: right; }
#view-orders th:nth-child(10), #view-orders td:nth-child(10) { width: 96px; }
#view-orders th:nth-child(11), #view-orders td:nth-child(11) { width: 104px; }
#view-orders th:nth-child(12), #view-orders td:nth-child(12) { width: 108px; }
#view-orders th:last-child, #view-orders td:last-child {
  width: 136px;
  position: sticky;
  right: 0;
  background: var(--card);
  border-left: 1px solid var(--line);
  overflow: visible;
}
#view-orders thead th:last-child { z-index: 3; }
#view-orders tbody tr:hover td:last-child { background: var(--hover); }
#view-orders td:nth-child(4) { color: var(--ink); font-weight: 500; }
/* The target is its own copy affordance — a separate Copy button in every row
   cost 48px of a column that had none to spare. */
.order-target {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
button.order-target:hover { color: var(--ink); text-decoration: underline; }
.order-target.is-empty { cursor: default; }
.order-actions { display: flex; align-items: center; gap: var(--s1); flex-wrap: nowrap; }
.push-receipt { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-3); }

/* A ledger is scanned, not read. Rows are tighter than the default table
   padding so more of the day fits on one screen. */
#view-orders .cockpit-table tbody td { padding: var(--s2) var(--s3); }
#view-orders .cockpit-table thead th { padding: var(--s2) var(--s3); }
/* Row actions recede until you point at the row, so 50 rows do not read as 100
   competing buttons — but they stay visible, because hiding a money action
   entirely would make the column look broken. */
#view-orders .order-actions .btn { opacity: 0.5; transition: opacity 0.1s ease; }
#view-orders tbody tr:hover .order-actions .btn,
#view-orders .order-actions .btn:focus-visible { opacity: 1; }
@media (hover: none) { #view-orders .order-actions .btn { opacity: 1; } }

/* ══ ORDERS, NARROW ════════════════════════════════════════════════════════ */
.orders-mobile-stream { display: none; flex-direction: column; gap: var(--s2); padding: var(--s3); }
@media (max-width: 919px) {
  .orders-desktop-table-wrap { display: none; }
  .orders-mobile-stream { display: flex; }
  .kpi-row-executive { grid-template-columns: 1fr 1fr; }
  .traffic-sites-grid { grid-template-columns: 1fr 1fr; }
  .executive-split-grid { grid-template-columns: 1fr; }
  .executive-split-grid .kd-desk-section,
  .executive-split-grid .fleet-panel-card { height: 420px; }
}
@media (max-width: 560px) {
  .kpi-row-executive, .traffic-sites-grid { grid-template-columns: 1fr; }
  .kpi-row-executive .kpi-card:first-child .kpi-value { font-size: var(--t-kpi); }
}
.order-mobile-card {
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}
.order-mobile-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.order-mobile-title { font-size: var(--t-body); font-weight: 500; color: var(--ink); }
.order-mobile-meta { font-size: var(--t-micro); color: var(--ink-3); margin-top: 2px; }

/* ══ SITES ═════════════════════════════════════════════════════════════════
   Four short columns stretched across 1300px left the numbers stranded in the
   middle of empty cells. Fixed widths pull each figure back under its own
   heading and give the leftover width to the one column that can use it. */
#view-sites .cockpit-table { table-layout: fixed; width: 100%; }
#view-sites .table-card:first-of-type th:not(:first-child),
#view-sites .table-card:first-of-type td:not(:first-child) { width: 168px; }

#view-sites .table-card:last-of-type th:nth-child(1),
#view-sites .table-card:last-of-type td:nth-child(1) { width: 132px; text-align: left; color: var(--ink-3); }
#view-sites .table-card:last-of-type th:nth-child(2),
#view-sites .table-card:last-of-type td:nth-child(2) { width: 180px; }
#view-sites .table-card:last-of-type th:nth-child(3),
#view-sites .table-card:last-of-type td:nth-child(3) { width: 180px; }
#view-sites .table-card:last-of-type td:nth-child(4) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══ EMPTY STATES ══════════════════════════════════════════════════════════ */
.empty-state {
  padding: var(--s10) var(--s5);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-body);
}

/* ══ VIEW TOOLBAR ══════════════════════════════════════════════════════════
   Every section gets the same head: what you are looking at on the left, the
   controls that change it on the right. */
.view-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.view-toolbar h1 { font-size: var(--t-head); font-weight: 600; }
.view-toolbar-right { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* ══ STORE GRID ════════════════════════════════════════════════════════════
   Three per row: eight storefronts read as a set at three columns, where at two
   they read as a list and at four they get too narrow for a figure. */
.store-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}
@media (max-width: 1180px) { .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .store-grid { grid-template-columns: 1fr; } }

.store-card {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.store-card.is-down { border-color: var(--loss-bg); background: linear-gradient(var(--loss-bg), var(--loss-bg)) no-repeat top / 100% 3px, var(--card); }

.store-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.store-card-id { display: flex; align-items: flex-start; gap: var(--s2); min-width: 0; }
.store-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.store-card-id h3 { font-size: var(--t-title); font-weight: 600; color: var(--ink); }
.store-card-domain {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-card-domain:hover { color: var(--ink); text-decoration: underline; }

.store-card-figure { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.store-card-figure .kpi-value { font-size: 26px; }
.store-card-spark { flex-shrink: 0; opacity: 0.9; }

.store-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.store-card-stats > div { display: flex; flex-direction: column; gap: 2px; }
.store-card-stats .stm-val { font-size: var(--t-title); }

.store-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.store-conv { display: flex; align-items: center; gap: var(--s3); }
.store-conv > div { display: flex; flex-direction: column; gap: 1px; }
.store-conv .stm-val { font-size: var(--t-title); }
.store-meta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
.store-latency { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-3); }
.store-latency.gain { color: var(--gain); }
.store-latency.warn { color: var(--warn); }
.store-latency.loss { color: var(--loss); }

/* Two panels that must stay equal width and collapse together. */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 1000px) { .split-2 { grid-template-columns: 1fr; } }

/* ══ CRONS ═════════════════════════════════════════════════════════════════
   63 jobs in a flat list hid the only two facts that matter — what is broken
   and what has started failing — so those become counters you can click. */
.cron-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
@media (max-width: 720px) { .cron-stat-row { grid-template-columns: repeat(2, 1fr); } }
.cron-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  text-align: left;
  cursor: pointer;
}
.cron-stat:hover { background: var(--hover); }
.cron-stat-value { font-family: var(--font-mono); font-size: var(--t-head); font-weight: 600; color: var(--ink); }
.cron-stat-label { font-size: var(--t-meta); color: var(--ink-3); }
.cron-stat.loss .cron-stat-value { color: var(--loss); }
.cron-stat.warn .cron-stat-value { color: var(--warn); }

.cron-list { display: flex; flex-direction: column; gap: var(--s2); }
.cron-row {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.cron-row.loss { border-left: 2px solid var(--loss); }
.cron-row.warn { border-left: 2px solid var(--warn); }
.cron-row-main { flex: 1; min-width: 0; }
.cron-row-head { display: flex; align-items: center; gap: var(--s3); }
.cron-row-head h3 { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.cron-row-meta {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: var(--t-meta);
  color: var(--ink-3);
}
.cron-error {
  margin-top: var(--s2);
  padding: 6px var(--s2);
  border-radius: var(--r-ctl);
  background: var(--loss-bg);
  color: var(--loss);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cron-row-actions { flex-shrink: 0; }

/* Money the customer has paid that was never dispatched to the provider. It is
   not revenue, but it is the most actionable number on the page, so it sits
   under the revenue figure rather than being dropped silently. */
.kpi-backlog {
  display: block;
  width: 100%;
  margin-top: var(--s2);
  padding: 6px var(--s2);
  border: 0;
  border-radius: var(--r-ctl);
  background: var(--warn-bg);
  color: var(--warn);
  font-size: var(--t-meta);
  text-align: left;
  cursor: pointer;
}
.kpi-backlog:hover { filter: brightness(0.97); }
.stm-note { font-size: var(--t-micro); color: var(--ink-3); margin-left: 6px; }

/* ══ PAYMENTS ══════════════════════════════════════════════════════════════
   The UPI card used to be a dark gradient panel — the only one in the product,
   and it read as a different application. It is a card like any other now; the
   address itself is the thing that deserves the weight. */
.upi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  padding: var(--s5);
}
@media (max-width: 900px) { .upi-grid { grid-template-columns: 1fr; } }
.upi-current { display: flex; flex-direction: column; gap: var(--s2); }
.upi-vpa {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.upi-stores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.upi-store {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  background: var(--gain-bg);
  color: var(--gain);
  font-size: var(--t-micro);
}
.upi-form { display: flex; flex-direction: column; gap: var(--s3); }
.upi-form .btn { justify-content: center; height: 36px; }

/* A labelled rule between sections of one page. Stores now carries both the
   shops and the traffic that reaches them; the rule says where one ends. */
.section-rule {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s5) 0 var(--s1);
  color: var(--ink-3);
  font-size: var(--t-meta);
}
.section-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}