/* ===================== TOKENS ===================== */
:root {
  /* Tells the browser exactly which color scheme this page is using right
     now — WITHOUT this, a browser/OS set to prefer dark mode can render
     native elements (inputs, selects, scrollbars, and in some browsers even
     broader text) using ITS OWN dark styling, ignoring our own CSS colors
     entirely. That mismatch is exactly what produces white-on-white text:
     our background says "light" but the browser's own native rendering
     still assumes "dark" was intended. This is updated dynamically by the
     theme toggle (see the [data-theme="light"] block below and app.js).
  */
  color-scheme: dark;

  /* Deep space-navy base — cool, blue-tinted black instead of a purple
     undertone. A more distinctly "electric tech" feel per Nawab's own
     choice, not another generic dark-slate dashboard. */
  --ink-950: #05070d;
  --ink-900: #070a14;
  --ink-850: #0a0e1c;
  --ink-800: #0e1526;
  --ink-750: #121a30;
  --ink-700: #17213e;
  --ink-600: #1c2a4e;
  --ink-500: #2e4270;
  --fog-400: #6f84ad;
  --fog-300: #8fa2c4;
  --fog-200: #b6c4dd;
  --fog-100: #dae3f2;
  --white: #f2f6fd;

  /* Every accent maps to a real state a parcel can be in — nothing here is
     decorative. Electric blue/cyan = confirmed/delivered (money earned),
     amber = needs a human, red/rose = returned (money lost), indigo = in
     motion with the courier. Signature gradient: electric cyan -> blue ->
     indigo — a genuinely "tech/futuristic" feel, per Nawab's own pick. */
  --teal: #22d3ee;
  --teal-dim: #0891b2;
  --teal-glow: rgba(34, 211, 238, 0.4);
  --amber: #ffc857;
  --red: #ff4d6d;
  --violet: #6366f1;
  --grad-primary: linear-gradient(135deg, #22d3ee 0%, #3b82f6 50%, #6366f1 100%);
  --grad-primary-hover: linear-gradient(135deg, #4de2f5 0%, #5f97f8 50%, #7d80f5 100%);

  /* Google Fonts are the preferred look, but the fallbacks below keep the
     dashboard looking right even offline or if fonts.googleapis.com is blocked. */
  --font-display: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  background: var(--ink-950);
  color: var(--white);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button { font-family: inherit; }
input, select { font-family: inherit; }

::selection { background: var(--teal-glow); color: var(--white); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ===================== LOGIN ===================== */
.login-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1400px 700px at 15% -15%, rgba(34,211,238,0.16), transparent 55%),
    radial-gradient(1100px 650px at 92% 115%, rgba(99,102,241,0.14), transparent 55%),
    radial-gradient(800px 500px at 50% 50%, rgba(34,211,238,0.03), transparent 70%),
    var(--ink-950);
}
.login-screen::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(700px 500px at 50% 40%, black, transparent 80%);
  pointer-events: none;
}
.login-card {
  width: 380px;
  position: relative;
  background: linear-gradient(180deg, var(--ink-850), var(--ink-900));
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-lg);
  padding: 36px 34px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.55), 0 0 0 1px rgba(34,211,238,0.06), 0 0 60px rgba(34,211,238,0.08);
}
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.logo-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--grad-primary);
  color: var(--ink-950);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  box-shadow: 0 0 28px var(--teal-glow);
  flex-shrink: 0;
}
.logo-mark.small { width: 32px; height: 32px; font-size: 10px; border-radius: 9px; }
.logo-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.logo-title.small { font-size: 13px; }
.logo-sub { font-size: 12px; color: var(--fog-300); }
.logo-sub.small { font-size: 10.5px; }

#loginForm label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--fog-300); margin: 16px 0 7px; }
#loginForm input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--ink-600); background: var(--ink-800); color: var(--white);
  font-size: 14px; outline: none; transition: border-color .18s, box-shadow .18s, background .18s;
}
#loginForm input:focus { border-color: var(--teal); background: var(--ink-750); box-shadow: 0 0 0 4px var(--teal-glow); }
.btn-block { width: 100%; margin-top: 22px; font-size: 14.5px; padding: 13px 18px; }
.login-error { color: var(--red); font-size: 12.5px; margin-top: 10px; min-height: 16px; }
.login-hint { margin-top: 18px; font-size: 11px; color: var(--fog-400); text-align: center; line-height: 1.6; }

.btn-primary {
  /* Explicit background-COLOR (not just an image) so nothing can silently
     reset it to transparent — that reset, combined with white text in light
     mode, is exactly what made this button invisible before. */
  background-color: var(--teal-dim);
  background-image: var(--grad-primary), linear-gradient(180deg, rgba(255,255,255,.18), transparent 60%);
  color: #04231f;
  border: none; border-radius: var(--radius-sm); font-weight: 700; font-size: 13.5px;
  padding: 11px 18px; cursor: pointer;
  box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .15s, box-shadow .2s, background-image .2s;
}
.btn-primary:hover { background-image: var(--grad-primary-hover), linear-gradient(180deg, rgba(255,255,255,.22), transparent 60%); box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,255,255,.28), 0 0 28px var(--teal-glow); transform: translateY(-1.5px); }
.btn-secondary { box-shadow: var(--elev-1), var(--rim-top); }
.btn-secondary {
  background: var(--ink-750); color: var(--fog-100); border: 1px solid var(--ink-600);
  border-radius: var(--radius-sm); padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-secondary:hover { border-color: var(--ink-500); }

/* ===================== APP SHELL ===================== */
.app-shell { height: 100vh; display: flex; flex-direction: column; }

.app-body { flex: 1; display: flex; min-height: 0; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: pulse 1.6s infinite; display:inline-block; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Sidebar */
.sidebar {
  width: 232px; flex-shrink: 0; background: var(--ink-900); border-right: 1px solid var(--ink-750);
  display: flex; flex-direction: column; padding: 18px 14px;
  overflow-y: auto;
}
.sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0 6px 20px; border-bottom: 1px solid var(--ink-750); margin-bottom: 14px; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-section-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--fog-400);
  padding: 14px 12px 6px; font-weight: 700;
}
.nav-section-label:first-child { padding-top: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: none; color: var(--fog-300); padding: 10px 12px;
  border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--ink-800); color: var(--white); }
.nav-item.active { background: var(--ink-800); color: var(--teal); }
.nav-item.active .nav-ico { color: var(--teal); }
.nav-ico { width: 16px; text-align: center; color: var(--fog-400); font-size: 13px; }
.count-badge {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  background: var(--ink-700); color: var(--fog-200); padding: 1px 6px; border-radius: 20px; min-width: 18px; text-align: center;
}
.count-badge:empty { display: none; }
.count-badge.alert { background: rgba(255,77,109,0.15); color: var(--red); }

.sidebar-footer { border-top: 1px solid var(--ink-750); padding-top: 14px; margin-top: 10px; }
.store-select-wrap label { display: block; font-size: 10.5px; color: var(--fog-400); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .06em; }
#storeSelect {
  width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--ink-800);
  border: 1px solid var(--ink-600); color: var(--white); font-size: 12.5px; margin-bottom: 14px;
}
.user-chip { display: flex; align-items: center; gap: 8px; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--ink-700); color: var(--teal);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.user-name { font-size: 12.5px; font-weight: 600; }
.user-role { font-size: 10.5px; color: var(--fog-400); text-transform: capitalize; }
.logout-btn { margin-left: auto; background: none; border: none; color: var(--fog-400); cursor: pointer; font-size: 15px; padding: 4px; }
.logout-btn:hover { color: var(--red); }
.my-account-btn {
  width: 100%; margin-top: 8px; background: none; border: 1px solid var(--ink-700); color: var(--fog-300);
  padding: 7px 10px; border-radius: var(--radius-sm); font-size: 11.5px; cursor: pointer;
}
.my-account-btn:hover { border-color: var(--ink-500); color: var(--white); }

/* Main */
.main { flex: 1; min-width: 0; overflow-y: auto; padding: 24px 28px 60px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.topbar h1 {
  font-size: 26px; font-weight: 800; letter-spacing: -0.015em; margin: 0;
  background: linear-gradient(90deg, var(--teal) 0%, var(--white) 35%, var(--white) 65%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topbar-sub { font-size: 12.5px; color: var(--fog-400); margin-top: 4px; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }

/* Global search */
.global-search-wrap { position: relative; }
#globalSearch {
  width: 240px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--ink-800);
  border: 1px solid var(--ink-600); color: var(--white); font-size: 12.5px; outline: none;
}
#globalSearch:focus { border-color: var(--teal); width: 300px; transition: width .15s; }
.global-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45); max-height: 320px; overflow-y: auto;
}
.gsr-item { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--ink-750); font-size: 12px; }
.gsr-item:last-child { border-bottom: none; }
.gsr-item:hover { background: var(--ink-750); }
.gsr-item .gsr-name { color: var(--fog-100); font-weight: 600; }
.gsr-item .gsr-meta { color: var(--fog-400); font-size: 10.5px; margin-top: 2px; }

/* Notification bell */
.notif-wrap { position: relative; }
.notif-bell { background: none; border: none; font-size: 16px; cursor: pointer; position: relative; padding: 4px; }
.notif-dot { position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 1.5px solid var(--ink-900); }
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 320px; max-height: 380px; overflow-y: auto;
  background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.notif-item { padding: 10px 14px; border-bottom: 1px solid var(--ink-750); font-size: 11.5px; }
.notif-item:last-child { border-bottom: none; }
.notif-item .n-time { color: var(--fog-400); font-family: var(--font-mono); font-size: 10px; }
.notif-item .n-text { color: var(--fog-100); margin-top: 2px; }

/* Export dropdown */
.export-wrap { position: relative; display: inline-block; }
.export-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45); min-width: 168px; overflow: hidden;
}
.export-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; color: var(--fog-100); padding: 10px 14px; font-size: 12.5px;
  cursor: pointer;
}
.export-menu button:hover { background: var(--ink-750); color: var(--teal); }
.export-menu .divider { height: 1px; background: var(--ink-700); margin: 2px 0; }

/* ===================== CARDS / GRID ===================== */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card {
  background: linear-gradient(180deg, var(--ink-850), var(--ink-900));
  border: 1px solid var(--ink-750); border-radius: var(--radius-md); padding: 16px 18px; position: relative; overflow: hidden;
}
.stat-card .label { font-size: 11.5px; color: var(--fog-300); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.stat-card .value { font-family: var(--font-mono); font-size: 28px; font-weight: 800; color: var(--white); letter-spacing: -.02em; }
.stat-card .value.teal { color: var(--teal); }
.stat-card .value.red { color: var(--red); }
.stat-card .value.amber { color: var(--amber); }
.stat-card .sub { font-size: 11px; color: var(--fog-400); margin-top: 4px; }
.stat-card svg.spark { position: absolute; bottom: 0; right: 0; opacity: .5; }

.panel {
  background: var(--ink-850);
  background-image: var(--panel-tint-1), var(--panel-tint-2);
  border: 1px solid var(--ink-750); border-radius: var(--radius-md);
  padding: 18px 20px; margin-bottom: 20px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-head h2 { font-size: 14.5px; font-weight: 700; margin: 0; }
.panel-head .hint { font-size: 11.5px; color: var(--fog-400); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 980px) { .two-col { grid-template-columns: 1fr; } }

/* ===================== TABLE ===================== */
table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.data .inline-order-action { white-space: nowrap; }
table.data .inline-order-action button { white-space: nowrap; }
table.data th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fog-400); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--ink-700);
}
table.data td { padding: 11px 10px; border-bottom: 1px solid var(--ink-800); color: var(--fog-100); vertical-align: middle; transition: background .12s; }
table.data tr:hover td { background: rgba(34,211,238,0.035); }
table.data td.mono, table.data th.mono { font-family: var(--font-mono); }
table.data .muted { color: var(--fog-400); }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em; font-family: var(--font-mono);
}
.badge.Confirmed { background: rgba(34,211,238,.14); color: var(--teal); }
.badge.Rejected { background: rgba(255,77,109,.14); color: var(--red); }
.badge.Pending, .badge.Sent, .badge.NoReply, .badge.NotBooked, .badge.NA { background: var(--ink-700); color: var(--fog-200); }
.badge.Booked, .badge.Delivered { background: rgba(34,211,238,.14); color: var(--teal); }
.badge.OutforDelivery { background: rgba(99,102,241,.16); color: var(--violet); }
.badge.Attempted { background: rgba(255,200,87,.16); color: var(--amber); }
.badge.Returned { background: rgba(255,77,109,.14); color: var(--red); }
.badge.Resolved { background: rgba(34,211,238,.14); color: var(--teal); }
.badge.Open { background: rgba(255,200,87,.16); color: var(--amber); }

.dup-flag { color: var(--amber); font-weight: 700; font-size: 10.5px; }

/* ===================== FILTER BAR ===================== */
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filter-bar input, .filter-bar select {
  padding: 9px 11px; border-radius: var(--radius-sm); background: var(--ink-800);
  border: 1px solid var(--ink-600); color: var(--white); font-size: 12.5px;
  transition: border-color .15s, box-shadow .15s;
}
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-glow); }
.filter-bar input[type="text"] { min-width: 180px; }

/* ===================== FORM ELEMENTS (finance editing) ===================== */
.inline-input {
  width: 76px; padding: 5px 7px; border-radius: 5px; background: var(--ink-800);
  border: 1px solid var(--ink-600); color: var(--white); font-family: var(--font-mono); font-size: 12px;
}

/* ===================== EMPTY STATE ===================== */
.empty-state { padding: 40px 0; text-align: center; color: var(--fog-400); font-size: 13px; }

/* ===================== BARS (return reason breakdown) ===================== */
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; }
.bar-row .bar-label { width: 150px; flex-shrink: 0; color: var(--fog-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .bar-track { flex: 1; height: 8px; background: var(--ink-750); border-radius: 8px; overflow: hidden; }
.bar-row .bar-fill { height: 100%; background: linear-gradient(90deg, var(--teal-dim), var(--teal)); }
.bar-row .bar-count { font-family: var(--font-mono); color: var(--fog-300); width: 30px; text-align: right; flex-shrink: 0; }

/* ===================== MODAL ===================== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(5,7,9,0.7); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal {
  width: 560px; max-width: 100%; max-height: 88vh; overflow-y: auto;
  position: relative;
  background: var(--ink-850);
  background-image: linear-gradient(165deg, var(--glass) 0%, transparent 40%), var(--panel-tint-1), var(--panel-tint-2);
  border: 1px solid var(--ink-700); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.modal::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-primary); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head h2 { font-size: 16px; margin: 0; }
.modal-close { background: none; border: none; color: var(--fog-400); font-size: 18px; cursor: pointer; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11px; color: var(--fog-400); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.field select, .field input, .field textarea {
  padding: 9px 10px; border-radius: var(--radius-sm); background: var(--ink-800);
  border: 1px solid var(--ink-600); color: var(--white); font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
.field select:focus, .field input:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-glow);
}
.field textarea { resize: vertical; min-height: 60px; font-family: inherit; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.msg-log { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; max-height: 160px; overflow-y: auto; }
.modal-section-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--ink-600), transparent); margin: 18px 0; }
.msg-bubble { padding: 8px 11px; border-radius: 10px; font-size: 12px; max-width: 85%; }
.msg-bubble.sent { background: var(--ink-750); align-self: flex-start; }
.msg-bubble.received { background: rgba(34,211,238,.12); color: var(--teal); align-self: flex-end; text-align: right; }

/* ===================== CONTROL CENTER ===================== */
.cc-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--ink-750); flex-wrap: wrap; }
.cc-tab {
  background: none; border: none; color: var(--fog-300); padding: 10px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cc-tab:hover { color: var(--white); }
.cc-tab.active { color: var(--teal); border-bottom-color: var(--teal); }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.setting-item { background: var(--ink-800); border: 1px solid var(--ink-700); border-radius: var(--radius-sm); padding: 14px; }
.setting-item label { display: block; font-size: 11px; color: var(--fog-400); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.setting-item input { width: 100%; padding: 8px 10px; border-radius: 6px; background: var(--ink-750); border: 1px solid var(--ink-600); color: var(--white); font-family: var(--font-mono); font-size: 13px; }
.setting-item textarea {
  width: 100%; padding: 9px 11px; border-radius: 6px; background: var(--ink-750);
  border: 1px solid var(--ink-600); color: var(--white); font-family: var(--font-display);
  font-size: 12.5px; line-height: 1.6; resize: vertical; box-sizing: border-box;
}
.setting-item textarea:focus, .setting-item input:focus { border-color: var(--teal); outline: none; }
.setting-item .setting-hint { font-size: 10.5px; color: var(--fog-400); margin-top: 6px; }

.role-pill { padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 700; text-transform: capitalize; }
.role-pill.admin { background: rgba(99,102,241,.16); color: var(--violet); }
.role-pill.staff { background: var(--ink-700); color: var(--fog-200); }

.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--ink-700); }
.inline-form .field { min-width: 130px; }
.inline-form .field input, .inline-form .field select { width: 100%; padding: 8px 10px; border-radius: 6px; background: var(--ink-800); border: 1px solid var(--ink-600); color: var(--white); font-size: 12.5px; }
.inline-form .field label { display:block; font-size: 10.5px; color: var(--fog-400); margin-bottom: 5px; }

.activity-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ink-800); font-size: 12px; align-items: baseline; }
.activity-row .a-time { font-family: var(--font-mono); color: var(--fog-400); width: 130px; flex-shrink: 0; }
.activity-row .a-actor { color: var(--teal); font-weight: 600; width: 80px; flex-shrink: 0; }
.activity-row .a-action { color: var(--fog-100); }

.danger-btn { background: rgba(255,77,109,.12); color: var(--red); border: 1px solid rgba(255,77,109,.3); border-radius: 6px; padding: 5px 10px; font-size: 11px; cursor: pointer; }
.danger-btn:hover { background: rgba(255,77,109,.2); }

/* ===================== NAWAB AI — FLOATING ASSISTANT ===================== */
.nawab-ai-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 100; }
.nawab-ai-fab {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(145deg, var(--teal), var(--teal-dim));
  box-shadow: 0 8px 28px rgba(34,211,238,0.4), 0 0 0 1px rgba(255,255,255,0.06) inset;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.nawab-ai-fab:hover { transform: scale(1.08); }
.nawab-ai-fab-icon { font-size: 24px; color: var(--ink-950); }
.nawab-ai-panel {
  position: absolute; bottom: 68px; right: 0; width: 360px; height: 520px;
  background: var(--ink-850); border: 1px solid var(--ink-700); border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55); display: flex; flex-direction: column; overflow: hidden;
}
.nawab-ai-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--ink-750); background: var(--ink-900);
}
.nawab-ai-title { display: flex; align-items: center; gap: 10px; }
.nawab-ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); flex-shrink: 0; animation: pulse 1.6s infinite; }
.nawab-ai-name { font-weight: 700; font-size: 13.5px; color: var(--white); }
.nawab-ai-sub { font-size: 10.5px; color: var(--fog-400); }
.nawab-ai-close { background: none; border: none; color: var(--fog-400); cursor: pointer; font-size: 15px; }
.nawab-ai-close:hover { color: var(--white); }
.nawab-ai-messages { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.nawab-ai-msg {
  max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
  white-space: pre-wrap;
}
.nawab-ai-msg.bot { background: var(--ink-750); color: var(--fog-100); align-self: flex-start; border-bottom-left-radius: 3px; }
.nawab-ai-msg.user { background: linear-gradient(145deg, var(--teal-dim), var(--teal)); color: var(--ink-950); align-self: flex-end; border-bottom-right-radius: 3px; font-weight: 500; }
.nawab-ai-msg.error { background: rgba(255,77,109,.12); color: var(--red); align-self: flex-start; border-bottom-left-radius: 3px; }
.nawab-ai-msg.thinking { background: var(--ink-750); color: var(--fog-400); align-self: flex-start; font-style: italic; }
.nawab-ai-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--ink-750); }
.nawab-ai-input-row input {
  flex: 1; padding: 9px 12px; border-radius: 10px; background: var(--ink-800);
  border: 1px solid var(--ink-600); color: var(--white); font-size: 12.5px; outline: none;
}
.nawab-ai-input-row input:focus { border-color: var(--teal); }
.nawab-ai-send {
  width: 36px; height: 36px; border-radius: 10px; border: none; background: var(--teal); color: var(--ink-950);
  cursor: pointer; font-size: 14px; flex-shrink: 0;
}
.nawab-ai-upgrade-btn {
  margin: 0 12px 12px; padding: 8px 10px; border-radius: 8px; background: var(--ink-800);
  border: 1px solid var(--ink-600); color: var(--fog-300); font-size: 11px; cursor: pointer; flex-shrink: 0;
}
.nawab-ai-upgrade-btn:hover { border-color: var(--violet); color: var(--violet); }
@media (max-width: 480px) {
  .nawab-ai-panel { width: calc(100vw - 32px); right: -8px; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 860px) {
  .sidebar { position: fixed; z-index: 40; height: 100vh; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: translateX(0); }
  .main { padding: 16px; }
}

/* ============================================================
   DESIGN QA PASS  (Spec Sections 10 & 13)
   Motion, depth, chart polish, and a proper mobile pass.
   Purely additive — every rule below either adds a new class or
   enhances an existing one, so nothing that worked before changes.
   ============================================================ */

/* ---------- Motion tokens ---------- */
:root {
  --ease-out: cubic-bezier(.16, .84, .44, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: .14s;
  --dur-med: .24s;
  --dur-slow: .42s;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28);
  --shadow-md: 0 6px 20px -6px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 46px -14px rgba(0,0,0,.62);
}

/* Respect users who ask for less motion — accessibility, and it also stops
   animations being distracting on a long ops shift. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Keyframes ---------- */
@keyframes c4uFadeUp   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes c4uFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes c4uShimmer  { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@keyframes c4uSpin     { to { transform: rotate(360deg); } }
@keyframes c4uPulse    { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes c4uDrawLine { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
@keyframes c4uPop      { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Panels & cards: entrance + hover depth ---------- */
.panel {
  animation: c4uFadeUp var(--dur-slow) var(--ease-out) both;
  transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.panel:hover { box-shadow: var(--shadow-md); }

/* Stagger the cards in a grid so the page assembles instead of snapping. */
.stat-grid > *:nth-child(1) { animation: c4uFadeUp var(--dur-slow) var(--ease-out) both; animation-delay: .02s; }
.stat-grid > *:nth-child(2) { animation: c4uFadeUp var(--dur-slow) var(--ease-out) both; animation-delay: .06s; }
.stat-grid > *:nth-child(3) { animation: c4uFadeUp var(--dur-slow) var(--ease-out) both; animation-delay: .10s; }
.stat-grid > *:nth-child(4) { animation: c4uFadeUp var(--dur-slow) var(--ease-out) both; animation-delay: .14s; }
.stat-grid > *:nth-child(5) { animation: c4uFadeUp var(--dur-slow) var(--ease-out) both; animation-delay: .18s; }
.stat-grid > *:nth-child(6) { animation: c4uFadeUp var(--dur-slow) var(--ease-out) both; animation-delay: .22s; }

.stat-card {
  transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--ink-600); }

/* ---------- Buttons: press feedback + focus ring ---------- */
.btn-primary, .btn-secondary, .danger-btn, .cc-tab, .nav-item {
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-primary:active, .btn-secondary:active, .danger-btn:active { transform: translateY(1px) scale(.985); }
.btn-primary:disabled, .btn-secondary:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Visible keyboard focus everywhere — needed for real accessibility. */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .nav-item:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Inputs ---------- */
input, select, textarea {
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--teal-dim);
  box-shadow: 0 0 0 3px var(--teal-glow);
}

/* ---------- Nav ---------- */
.nav-item { position: relative; }
.nav-item::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  background: var(--grad-primary); border-radius: 3px;
  transform: scaleY(0); transform-origin: center;
  transition: transform var(--dur-med) var(--ease-spring);
}
.nav-item.active::before { transform: scaleY(1); }
.nav-item:hover { transform: translateX(2px); }

/* ---------- Control Center tabs ---------- */
.cc-tab:hover { transform: translateY(-1px); }
.cc-tab.active { box-shadow: inset 0 -2px 0 var(--teal); }

/* ---------- Tables: gentler row hover + sticky header ---------- */
table.data thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--ink-850);
  backdrop-filter: blur(6px);
}
table.data tbody tr { transition: background var(--dur-fast) var(--ease-out); }
table.data tbody tr:hover td { background: rgba(45, 212, 191, 0.055); }
table.data tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--teal-dim); }

/* ---------- Loading states ---------- */
.empty-state { animation: c4uFadeIn var(--dur-med) var(--ease-out) both; }

/* Skeleton shimmer for anything still loading. */
.skeleton {
  background: linear-gradient(90deg, var(--ink-800) 25%, var(--ink-700) 50%, var(--ink-800) 75%);
  background-size: 840px 100%;
  animation: c4uShimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
  min-height: 14px;
}

/* Inline spinner — add class="spinner" to any element. */
.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--ink-600); border-top-color: var(--teal);
  border-radius: 50%; animation: c4uSpin .7s linear infinite;
  vertical-align: -2px;
}
.is-loading { position: relative; pointer-events: none; opacity: .7; }

/* ---------- Charts (Section 9 combined Business Health) ---------- */
.health-head {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.health-signal {
  font-weight: 700; font-size: 12.5px;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid currentColor;
  background: rgba(255,255,255,.03);
  animation: c4uPop var(--dur-slow) var(--ease-spring) both;
}
.health-chart { overflow: visible; display: block; }
.health-chart .chart-hit rect { cursor: crosshair; }
.health-chart .chart-hit:hover rect { fill: rgba(255,255,255,0.035); }
.health-chart .chart-hit circle { transition: r var(--dur-fast) var(--ease-out); }
.health-chart .chart-hit:hover circle { r: 4.2; }

/* Lines draw themselves in on first paint. */
.chart-line {
  stroke-dasharray: 1200;
  animation: c4uDrawLine 1.05s var(--ease-out) forwards;
}
.chart-line-dashed { animation: none; }   /* dashed styling must be preserved */
.chart-area { animation: c4uFadeIn .9s var(--ease-out) .2s both; }

.chart-legend {
  display: flex; gap: 18px; margin-top: 10px;
  font-size: 11px; flex-wrap: wrap; align-items: center;
}

/* ---------- Permission grid (Bug D) ---------- */
.perm-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.perm-bulk { display: flex; gap: 8px; }
.perm-bulk button {
  background: var(--ink-800); border: 1px solid var(--ink-600);
  color: var(--fog-300); border-radius: var(--radius-sm);
  padding: 4px 10px; font-size: 11px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.perm-bulk button:hover { color: var(--teal); border-color: var(--teal-dim); }

.perm-group { margin-bottom: 12px; }
.perm-group-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fog-400); font-weight: 700; margin-bottom: 7px;
}
.perm-group-items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px 14px;
}
.perm-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fog-200); cursor: pointer;
  padding: 5px 8px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.perm-label:hover { background: var(--ink-800); border-color: var(--ink-700); }
.perm-label input { accent-color: var(--teal); cursor: pointer; }

/* ---------- Badges & message bubbles ---------- */
.badge { transition: transform var(--dur-fast) var(--ease-out); }
.badge:hover { transform: scale(1.04); }
.msg-bubble { animation: c4uFadeUp var(--dur-med) var(--ease-out) both; }

/* ---------- Floating AI widget ---------- */
.nawab-ai-fab { transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out); }
.nawab-ai-fab:hover { transform: scale(1.08) rotate(6deg); box-shadow: var(--shadow-lg); }
.nawab-ai-fab:active { transform: scale(.95); }
.nawab-ai-panel:not(.hidden) { animation: c4uPop var(--dur-med) var(--ease-spring) both; }
.nawab-ai-dot { animation: c4uPulse 2.4s var(--ease-out) infinite; }
.nawab-ai-msg { animation: c4uFadeUp var(--dur-med) var(--ease-out) both; }

/* ---------- Notification bell ---------- */
.notif-dot:not(.hidden) { animation: c4uPulse 1.8s ease-in-out infinite; }
.notif-bell { transition: transform var(--dur-fast) var(--ease-out); }
.notif-bell:hover { transform: scale(1.12); }

/* ============================================================
   RESPONSIVE — full mobile pass
   ============================================================ */

/* Large tablets / small laptops */
@media (max-width: 1200px) {
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .cc-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .cc-tabs::-webkit-scrollbar { height: 4px; }
  .cc-tabs::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 4px; }
  .cc-tab { white-space: nowrap; }
}

/* Tablets */
@media (max-width: 1024px) {
  .two-col { grid-template-columns: 1fr; }
  .perm-group-items { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .inline-form { flex-wrap: wrap; }
  .inline-form .field { min-width: 180px; }
}

/* Phones — landscape and large phones */
@media (max-width: 860px) {
  .main { padding: 14px; }
  .topbar { flex-wrap: wrap; gap: 8px; row-gap: 10px; }
  .global-search-wrap { order: 3; width: 100%; }
  .global-search-wrap input { width: 100%; }
  .panel { padding: 14px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .health-chart { min-height: 210px; }
  /* Wide tables scroll horizontally instead of squashing unreadably. */
  .panel table.data { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .nawab-ai-fab { bottom: 16px; right: 16px; }
}

/* Phones — portrait */
@media (max-width: 620px) {
  .main { padding: 11px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 12px; }
  #viewTitle { font-size: 17px; }
  #viewSubtitle { font-size: 11px; }
  .panel-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .perm-group-items { grid-template-columns: 1fr; }
  .inline-form .field { min-width: 100%; }
  .chart-legend { gap: 10px; font-size: 10px; }
  .health-head { gap: 8px; }
  table.data { font-size: 11.5px; }
  table.data td, table.data th { padding: 8px 8px; }
  /* Comfortable tap targets — 40px+ per platform guidelines. */
  .btn-primary, .btn-secondary, .danger-btn { min-height: 40px; }
  .nav-item { min-height: 42px; }

  /* Personal WhatsApp queue — the screen staff use most on their phones.
     Actions (Send / Yes / No) stack full-width instead of squeezing onto
     one line, and each button gets a comfortable tap target. */
  .pwa-actions { flex-wrap: wrap; }
  .pwa-actions button { flex: 1 1 auto; min-width: 90px; }
  .pwa-queue-item { padding: 12px; }
}

/* Slightly wider phones — Personal WhatsApp overview cards go 2-up instead
   of squeezing into a single scrolling row. */
@media (max-width: 860px) {
  #viewRoot .panel > div[style*="display:flex"][style*="flex-wrap:wrap"] > .setting-item {
    min-width: calc(50% - 8px);
  }
}

/* Small phones */
@media (max-width: 400px) {
  .stat-grid { grid-template-columns: 1fr; }
  .cc-tab { font-size: 11px; padding: 6px 9px; }
  .nawab-ai-fab { bottom: 12px; right: 12px; }
}

/* Print — reports/tables should print cleanly on white paper */
@media print {
  .sidebar, .topbar, .nawab-ai-wrap, .btn-primary, .btn-secondary, .danger-btn { display: none !important; }
  body, .main, .panel { background: #fff !important; color: #000 !important; }
  .panel { border: 1px solid #ccc !important; box-shadow: none !important; page-break-inside: avoid; animation: none !important; }
  table.data td, table.data th { color: #000 !important; border-color: #ddd !important; }
}

/* ---------- Mobile navigation (menu toggle + scrim) ---------- */
.topbar-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.menu-toggle {
  display: none;
  background: var(--ink-800); border: 1px solid var(--ink-600);
  color: var(--fog-100); font-size: 17px; line-height: 1;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  cursor: pointer; flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease-out);
}
.menu-toggle:hover { color: var(--teal); border-color: var(--teal-dim); }
.menu-toggle:active { transform: scale(.94); }

.sidebar-scrim {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  animation: c4uFadeIn var(--dur-fast) var(--ease-out) both;
}
.sidebar-scrim.hidden { display: none; }

@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .sidebar { box-shadow: var(--shadow-lg); }
}
@media (min-width: 861px) {
  /* Never let a stale "open" state leak onto desktop after a resize. */
  .sidebar-scrim { display: none; }
}

/* ============================================================
   VISUAL OVERHAUL — depth, glass, glow, and a real light mode
   ============================================================
   Everything here is layered ON TOP of the existing rules. The
   original dark palette is still the default; light mode simply
   re-points the same variables, so no component needed rewriting.
   ============================================================ */

/* ---------- Extra tokens (dark = default) ---------- */
:root {
  --grad-teal:   linear-gradient(135deg, #22d3ee 0%, #3b82f6 55%, #0891b2 100%);
  --grad-violet: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
  --grad-amber:  linear-gradient(135deg, #ffd166 0%, #c2760a 100%);
  --grad-red:    linear-gradient(135deg, #ff4d6d 0%, #e11d48 100%);

  /* Aurora wash behind the whole app — subtle, not a light show. */
  --aurora-1: radial-gradient(70rem 40rem at 12% -8%, rgba(34,211,238,.10), transparent 60%);
  --aurora-2: radial-gradient(60rem 36rem at 92% 4%, rgba(99,102,241,.09), transparent 62%);
  --aurora-3: radial-gradient(50rem 32rem at 50% 108%, rgba(255,200,87,.05), transparent 60%);
  /* Same idea, scaled down for individual panels/cards rather than the whole
     viewport — the aurora variables above are far too large to show up as
     anything but flat white/dark on a normal-sized panel. */
  --panel-tint-1: radial-gradient(30rem 20rem at 0% 0%, rgba(34,211,238,.16), transparent 75%);
  --panel-tint-2: radial-gradient(26rem 20rem at 100% 100%, rgba(99,102,241,.14), transparent 75%);

  --glass-bg: rgba(23, 29, 35, 0.62);
  --glass-brd: rgba(255, 255, 255, 0.07);
  --glass-hi: rgba(255, 255, 255, 0.05);

  --elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 1px rgba(0,0,0,.20);
  --elev-2: 0 4px 12px -2px rgba(0,0,0,.42), 0 2px 4px rgba(0,0,0,.28);
  --elev-3: 0 16px 40px -12px rgba(0,0,0,.58), 0 4px 10px rgba(0,0,0,.32);
  --elev-glow: 0 0 0 1px rgba(34,211,238,.20), 0 12px 34px -12px rgba(34,211,238,.32);
}

/* ---------- LIGHT MODE ---------- */
[data-theme="light"] {
  /* Tells the browser this page is now light-themed — without this, a
     browser/OS set to prefer dark mode can keep rendering native elements
     with dark-mode assumptions (white text) even on our light background. */
  color-scheme: light;

  /* Light mode is a cool paper, faintly blue rather than pure white, so it sits
     in the same family as the dark theme instead of feeling like a different app. */
  --ink-950: #eef2f7;
  --ink-900: #ffffff;
  --ink-850: #ffffff;
  --ink-800: #f2f5f7;
  --ink-750: #eaeff3;
  --ink-700: #dfe5ea;
  --ink-600: #cbd4dc;
  --ink-500: #9aa7b2;
  --fog-400: #7b8792;
  --fog-300: #5d6a75;
  --fog-200: #3d4852;
  --fog-100: #1e262e;
  --white: #0d1319;

  --teal: #0891b2;
  --teal-dim: #0e7490;
  --teal-glow: rgba(8, 145, 178, 0.22);
  --amber: #c2760a;
  --red: #e11d48;
  --violet: #4f46e5;
  --grad-primary: linear-gradient(135deg, #0891b2 0%, #2563eb 50%, #4f46e5 100%);
  --grad-primary-hover: linear-gradient(135deg, #0e7490 0%, #1d4ed8 50%, #4338ca 100%);

  --aurora-1: radial-gradient(70rem 40rem at 12% -8%, rgba(8,145,178,.10), transparent 60%);
  --aurora-2: radial-gradient(60rem 36rem at 92% 4%, rgba(79,70,229,.08), transparent 62%);
  --aurora-3: radial-gradient(50rem 32rem at 50% 108%, rgba(194,118,10,.05), transparent 60%);
  --panel-tint-1: radial-gradient(30rem 20rem at 0% 0%, rgba(8,145,178,.16), transparent 75%);
  --panel-tint-2: radial-gradient(26rem 20rem at 100% 100%, rgba(79,70,229,.13), transparent 75%);

  --glass-bg: rgba(255, 255, 255, 0.76);
  --glass-brd: rgba(15, 30, 45, 0.09);
  --glass-hi: rgba(255, 255, 255, 0.85);

  --elev-1: 0 1px 2px rgba(16,32,48,.07);
  --elev-2: 0 4px 14px -3px rgba(16,32,48,.11), 0 2px 4px rgba(16,32,48,.05);
  --elev-3: 0 18px 44px -14px rgba(16,32,48,.20), 0 4px 10px rgba(16,32,48,.07);
  --elev-glow: 0 0 0 1px rgba(13,148,136,.22), 0 12px 34px -14px rgba(13,148,136,.26);

  --shadow-sm: var(--elev-1);
  --shadow-md: var(--elev-2);
  --shadow-lg: var(--elev-3);
}

/* ---------- Ambient background ---------- */
body {
  background-color: var(--ink-950);
  background-image: var(--aurora-1), var(--aurora-2), var(--aurora-3);
  background-attachment: fixed;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out);
}

/* ---------- Glass panels with a lit top edge ---------- */
.panel {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: var(--elev-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Thin highlight along the top edge — reads as a light source above. */
.panel::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-hi) 18%, var(--glass-hi) 82%, transparent);
  pointer-events: none;
}
.panel:hover { box-shadow: var(--elev-3); border-color: color-mix(in srgb, var(--teal) 22%, var(--glass-brd)); }

/* ---------- Stat cards: real depth + accent bar ---------- */
.stat-card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad-teal); opacity: .85;
}
.stat-card.amber::after { background: var(--grad-amber); }
.stat-card.red::after { background: var(--grad-red); }
.stat-card.violet::after { background: var(--grad-violet); }
.stat-card.white::after { background: linear-gradient(135deg, var(--fog-300), var(--fog-400)); }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--elev-3); }

/* Button styling consolidated below into one rule (search "THE Sign In /
   action button rule" further down) — this used to be three separate,
   conflicting declarations from different passes. */

.btn-secondary {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(8px);
}
.btn-secondary:hover { border-color: var(--teal-dim); color: var(--teal); }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--glass-bg);
  border-right: 1px solid var(--glass-brd);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.nav-item.active {
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--teal);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 20%, transparent);
}
.logo-mark {
  background: var(--grad-teal);
  color: #04231f;
  box-shadow: 0 6px 18px -6px var(--teal-glow);
}
[data-theme="light"] .logo-mark { color: #ffffff; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--ink-950) 72%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--glass-brd);
  margin: -16px -16px 18px;
  padding: 14px 16px;
}
#viewTitle {
  background: linear-gradient(120deg, var(--white), var(--fog-200));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.02em;
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  position: relative;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  cursor: pointer; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { transform: rotate(-18deg) scale(1.09); box-shadow: var(--elev-glow); border-color: var(--teal-dim); }
.theme-toggle:active { transform: scale(.92); }
.theme-ico { position: absolute; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-spring); }
.theme-ico-sun  { opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme-ico-moon { opacity: 1; transform: none; }
[data-theme="light"] .theme-ico-sun  { opacity: 1; transform: none; }
[data-theme="light"] .theme-ico-moon { opacity: 0; transform: rotate(90deg) scale(.4); }

/* ---------- Tables ---------- */
table.data thead th { background: color-mix(in srgb, var(--ink-900) 88%, transparent); }
table.data tbody tr:hover td { background: color-mix(in srgb, var(--teal) 7%, transparent); }

/* ---------- Badges ---------- */
.badge {
  border-radius: 999px; font-weight: 650;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
}

/* ---------- Floating AI button ---------- */
.nawab-ai-fab {
  background: var(--grad-teal);
  box-shadow: 0 10px 30px -8px var(--teal-glow), var(--elev-2);
}
.nawab-ai-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--elev-3);
}

/* ---------- Charts ---------- */
.health-chart .chart-line { filter: drop-shadow(0 3px 8px rgba(0,0,0,.28)); }
[data-theme="light"] .health-chart .chart-line { filter: drop-shadow(0 2px 5px rgba(16,32,48,.16)); }

/* ---------- Inputs ---------- */
input, select, textarea {
  background: color-mix(in srgb, var(--ink-800) 78%, transparent);
  border: 1px solid var(--glass-brd);
  color: var(--fog-100);
  border-radius: var(--radius-sm);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-600); border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--teal-dim); background-clip: content-box; }

/* Backdrop-filter is expensive on low-end phones — drop to flat fills there. */
@media (max-width: 620px) {
  .panel, .stat-card, .sidebar, .topbar, .nawab-ai-panel {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--ink-900);
  }
}
@media print { body { background-image: none !important; } }

/* ---------- Quick-reply buttons inside the chat thread ---------- */
/* Mirrors how WhatsApp draws template quick replies, so staff reviewing an
   order see exactly what the customer was shown and could tap. */
.msg-buttons {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--ink-700);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.msg-btn {
  display: block;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--teal);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: rgba(45, 212, 191, 0.07);
  transition: background var(--dur-fast) var(--ease-out);
}
.msg-btn:hover { background: rgba(45, 212, 191, 0.14); }
.msg-bubble b { color: var(--white); font-weight: 700; }

/* ============================================================
   PREMIUM PASS — depth, dimension and life
   "Professional ne banaya hai" — that should be the first
   impression, in either theme. Everything below is additive.
   ============================================================ */

:root {
  --elev-1: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px -2px rgba(0,0,0,.28);
  --elev-2: 0 2px 4px rgba(0,0,0,.28), 0 10px 26px -8px rgba(0,0,0,.48);
  --elev-3: 0 4px 8px rgba(0,0,0,.30), 0 24px 56px -16px rgba(0,0,0,.62);
  --rim-top: inset 0 1px 0 rgba(255,255,255,.055);
  --rim-all: inset 0 0 0 1px rgba(255,255,255,.035);
  --glass: rgba(255,255,255,.026);
}
[data-theme="light"] {
  --elev-1: 0 1px 2px rgba(16,32,48,.07), 0 2px 6px -2px rgba(16,32,48,.09);
  --elev-2: 0 2px 4px rgba(16,32,48,.07), 0 12px 28px -10px rgba(16,32,48,.16);
  --elev-3: 0 6px 12px rgba(16,32,48,.09), 0 28px 60px -18px rgba(16,32,48,.24);
  --rim-top: inset 0 1px 0 rgba(255,255,255,.9);
  --rim-all: inset 0 0 0 1px rgba(16,32,48,.045);
  --glass: rgba(255,255,255,.6);
}

/* ---------- Ambient backdrop ---------- */
/* Two very soft colour pools behind everything. Fixed, non-interactive, and
   almost subliminal — it stops the page reading as a flat grey slab. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(820px 560px at 10% -10%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(720px 520px at 92% 2%, rgba(99,102,241,.14), transparent 58%),
    radial-gradient(600px 460px at 40% 105%, rgba(59,130,246,.08), transparent 60%);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(820px 560px at 10% -10%, rgba(34,211,238,.20), transparent 60%),
    radial-gradient(720px 520px at 92% 2%, rgba(99,102,241,.16), transparent 58%),
    radial-gradient(600px 460px at 40% 105%, rgba(59,130,246,.10), transparent 60%);
}
.sidebar, .main { position: relative; z-index: 1; }

/* ---------- Panels: real surfaces, not outlines ---------- */
.panel {
  background-image: var(--panel-tint-1), var(--panel-tint-2), linear-gradient(180deg, var(--glass), transparent 42%);
  box-shadow: var(--elev-1), var(--rim-top);
  border-radius: var(--radius-lg);
}
.panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2), var(--rim-top);
}

/* ---------- Stat cards: the hero elements ---------- */
.stat-card {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(158deg, var(--glass), transparent 55%);
  box-shadow: var(--elev-1), var(--rim-all);
  border-radius: var(--radius-md);
}
/* A soft sheen that sweeps across on hover — the "expensive" cue. */
.stat-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .62s var(--ease-out);
  pointer-events: none;
}
.stat-card:hover::after { transform: translateX(120%); }
.stat-card:hover { transform: translateY(-4px) scale(1.012); box-shadow: var(--elev-3), var(--rim-all); }
/* Colour-coded left edge, lit from the accent already on the card. */
.stat-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--teal), transparent);
  opacity: .8;
}
.stat-card.amber::before { background: linear-gradient(180deg, var(--amber), transparent); }
.stat-card.red::before   { background: linear-gradient(180deg, var(--red), transparent); }
.stat-card.violet::before{ background: linear-gradient(180deg, var(--violet), transparent); }

/* Big numbers deserve to look engineered. */
.stat-value, .stat-card .value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background-image: linear-gradient(180deg, var(--glass), transparent 30%), radial-gradient(40rem 30rem at 0% 100%, rgba(99,102,241,.05), transparent 70%);
  box-shadow: 1px 0 0 var(--ink-800), var(--elev-1);
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(34,211,238,.13), transparent 78%);
  box-shadow: var(--rim-top);
}

/* (background/text handled by the single consolidated .btn-primary rule) */

/* ---------- Topbar: frosted, floats over content ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px) saturate(1.5);
  background: color-mix(in srgb, var(--ink-950) 76%, transparent);
  box-shadow: 0 1px 0 var(--ink-800);
  margin: -16px -16px 16px;
  padding: 14px 16px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
[data-theme="light"] .topbar { background: color-mix(in srgb, #ffffff 80%, transparent); }

/* ---------- Modals ---------- */
.modal { box-shadow: var(--elev-3), var(--rim-top); border-radius: var(--radius-lg); }
.modal-backdrop { backdrop-filter: blur(4px); }

/* ---------- Tables ---------- */
table.data tbody tr:hover td { box-shadow: inset 0 0 0 100vw rgba(34,211,238,.045); }

/* ---------- Badges ---------- */
.badge { box-shadow: var(--rim-all); }

/* ---------- Floating AI button: the one thing that should feel alive ---------- */
.nawab-ai-fab {
  box-shadow: var(--elev-2), 0 0 0 0 var(--teal-glow);
  animation: c4uHalo 3.6s var(--ease-out) infinite;
}
@keyframes c4uHalo {
  0%, 100% { box-shadow: var(--elev-2), 0 0 0 0 var(--teal-glow); }
  50%      { box-shadow: var(--elev-2), 0 0 0 9px rgba(34,211,238,0); }
}
.nawab-ai-fab:hover { animation: none; }

/* ---------- Empty states shouldn't feel like errors ---------- */
.empty-state {
  border: 1px dashed var(--ink-700);
  border-radius: var(--radius-md);
  background: var(--glass);
}

/* Motion-sensitive users opt out of all of the above movement. */
@media (prefers-reduced-motion: reduce) {
  .stat-card::after, .nawab-ai-fab { animation: none !important; transition: none !important; }
  .panel:hover, .stat-card:hover { transform: none !important; }
}

/* ============================================================
   THE PIPELINE RAIL — Overview hero (signature element)
   Six stages in the real order a parcel travels. Each stage is
   filled by how much is sitting in it, so a bottleneck reads as
   a tall column rather than a number you have to interpret.
   ============================================================ */

.rail-wrap { padding: 20px 22px 18px; margin-bottom: 18px; }

.rail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}
.rail-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fog-400); margin-bottom: 5px;
}
.rail-title {
  margin: 0; font-family: var(--font-display);
  font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  color: var(--white);
}

/* Delivered-vs-returned split. 38% return is the number that decides whether
   this business makes money, so it sits in the header, not three pages deep. */
.rail-split { min-width: 190px; }
.rail-split-bar {
  height: 7px; border-radius: 99px; overflow: hidden;
  background: var(--red); box-shadow: var(--rim-all);
}
.rail-split-good {
  display: block; height: 100%;
  background: var(--grad-primary);
  border-radius: 99px 0 0 99px;
  transition: width .9s var(--ease-out);
}
.rail-split-legend {
  margin-top: 7px; font-size: 11.5px; color: var(--fog-300);
  font-family: var(--font-mono);
}
.rail-split-legend b { color: var(--teal); }
.rail-split-legend b.bad { color: var(--red); }

/* ---------- The rail itself ---------- */
.rail-wrap { position: relative; }
.rail-wrap::after {
  content: '';
  position: absolute; top: 60px; bottom: 20px; right: 20px; width: 32px;
  background: linear-gradient(90deg, transparent, var(--ink-850) 85%);
  pointer-events: none; border-radius: 0 var(--radius-md) var(--radius-md) 0;
  opacity: 0; transition: opacity .2s;
}
.rail-wrap.has-overflow::after { opacity: 1; }
.rail {
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin;
}
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 4px; }

.rail-stage {
  position: relative;
  flex: 1 1 0; min-width: 108px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 13px 13px 15px;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-md);
  background: var(--glass);
  color: inherit; text-align: left; cursor: pointer;
  overflow: hidden;
  box-shadow: var(--rim-top);
  /* Stages arrive left-to-right, tracing the path a parcel takes. */
  animation: c4uFadeUp .5s var(--ease-out) both;
  animation-delay: calc(var(--i) * 70ms);
  transition: transform var(--dur-med) var(--ease-spring),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.rail-stage:hover { transform: translateY(-4px); box-shadow: var(--elev-2), var(--rim-top); }
.rail-stage:active { transform: translateY(-1px); }

/* Height-proportional fill = where the parcels are piling up. */
.rail-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--h, 0%);
  background: linear-gradient(180deg, transparent, var(--stage-c, var(--teal)));
  opacity: .17; pointer-events: none;
  transition: height 1s var(--ease-out);
}
.rail-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--stage-c, var(--teal));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-c, var(--teal)) 22%, transparent);
  margin-bottom: 8px;
}
.rail-num {
  font-family: var(--font-mono);
  font-size: 26px; font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.rail-label {
  font-size: 11.5px; font-weight: 600; color: var(--fog-200);
  line-height: 1.3;
}

/* Stage tones map to what the stage MEANS, not to decoration. */
.rail-stage.tone-good { --stage-c: var(--teal); }
.rail-stage.tone-wait { --stage-c: var(--fog-400); }
.rail-stage.tone-move { --stage-c: var(--violet); }
.rail-stage.tone-bad  { --stage-c: var(--red); }
/* "act" = confirmed but not booked. This is money sitting still, so it's the
   one stage allowed to draw attention to itself. */
.rail-stage.tone-act  { --stage-c: var(--amber); }
.rail-stage.tone-act:not(.is-empty) {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--ink-700));
}
.rail-stage.tone-act:not(.is-empty) .rail-num { color: var(--amber); }

.rail-stage.is-empty { opacity: .5; }
.rail-stage.is-empty .rail-num { color: var(--fog-400); }

/* The connector between stages — a real track, not a chevron. */
.rail-link {
  align-self: center; flex: 0 0 18px; height: 2px;
  background: linear-gradient(90deg, var(--ink-700), var(--ink-600), var(--ink-700));
  border-radius: 2px; position: relative;
}
.rail-link::after {
  content: ''; position: absolute; top: -2px; left: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); opacity: .85;
  animation: c4uTravel 3.2s var(--ease-out) infinite;
}
/* A parcel moving down the track. One shared animation, staggered by position,
   so the rail reads as flowing rather than blinking. */
@keyframes c4uTravel {
  0%   { transform: translateX(-2px); opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: translateX(16px); opacity: 0; }
}
.rail-link:nth-of-type(2)::after { animation-delay: .4s; }
.rail-link:nth-of-type(3)::after { animation-delay: .8s; }
.rail-link:nth-of-type(4)::after { animation-delay: 1.2s; }
.rail-link:nth-of-type(5)::after { animation-delay: 1.6s; }

/* ---------- Blockers ---------- */
.rail-blockers {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-top: 18px;
  padding-top: 15px; border-top: 1px solid var(--ink-800);
}
.rail-blockers-title {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); margin-right: 3px;
}
.rail-chip {
  font-size: 11.5px; color: var(--fog-200);
  background: var(--ink-800); border: 1px solid var(--ink-700);
  border-radius: 99px; padding: 5px 12px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.rail-chip b { color: var(--amber); font-family: var(--font-mono); margin-right: 3px; }
.rail-chip:hover {
  border-color: color-mix(in srgb, var(--amber) 50%, var(--ink-700));
  transform: translateY(-1px);
  box-shadow: var(--elev-1);
}
.rail-clear {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--ink-800);
  font-size: 12px; color: var(--teal);
}

@media (max-width: 620px) {
  .rail-wrap { padding: 16px 14px 14px; }
  .rail-title { font-size: 17px; }
  .rail-stage { min-width: 96px; padding: 11px 11px 13px; }
  .rail-num { font-size: 21px; }
  .rail-link { flex-basis: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-link::after { animation: none; opacity: .5; }
  .rail-stage { animation: none; }
}

/* ---------- Type roles ---------- */
/* Body copy is Inter; only headings and data take the display/mono faces.
   Set after the base rules so these win without needing !important. */
body, input, select, textarea, button { font-family: var(--font-body); }
h1, h2, h3, .rail-title, .logo-title, .stat-value {
  font-family: var(--font-display);
  letter-spacing: -.02em;
}
h1 { font-weight: 700; }
h2 { font-weight: 650; }
.stat-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.mono, table.data td.mono, table.data th.mono { font-variant-numeric: tabular-nums; }

/* ---------- Failed-send indicator in the chat thread ---------- */
/* A message that Meta rejected must never look identical to one that actually
   reached the customer — this is exactly the gap that made the dashboard look
   healthy while nothing was being delivered. */
.msg-bubble.msg-failed {
  border: 1.5px solid var(--red) !important;
  background: color-mix(in srgb, var(--red) 8%, var(--ink-800));
}
.msg-failed-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--red); margin-bottom: 4px;
}

/* ---------- WhatsApp-style delivery ticks (sent/delivered/read) ---------- */
/* The exact gap this closes: a message Meta merely ACCEPTED (single tick)
   used to look identical to one that actually reached the phone — the whole
   point of tracking this was to make that visible. */
.msg-tick-row { text-align: right; margin-top: 3px; }
.msg-tick { font-size: 11px; color: var(--fog-400); letter-spacing: -1px; }
.msg-tick-double { color: var(--fog-300); }
.msg-tick-read { color: #53bdeb; } /* WhatsApp's own read-tick blue */
.msg-tick-failed { color: var(--red); font-weight: 700; }

/* ---------- Orders page: date-grouped list ---------- */
/* The gap this closes: 70-100 orders on a busy day used to just be one long,
   unbroken scroll. Grouping by date with a collapsible header per day, per
   Nawab's request, means only the days you actually want to look at stay open. */
.order-day-group { margin-bottom: 10px; border: 1px solid var(--ink-700); border-radius: var(--radius-sm); overflow: hidden; }
.order-day-header {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--ink-800); border: none; cursor: pointer; text-align: left;
  font-size: 13px; font-weight: 700; color: var(--fog-100);
}
.order-day-header:hover { background: var(--ink-750); }
.order-day-chevron { color: var(--teal); font-size: 12px; width: 12px; flex-shrink: 0; }
.order-day-label { flex: 1; }
.order-day-count { font-size: 11.5px; color: var(--fog-400); font-weight: 500; }
.order-day-body { padding: 0; }
.order-day-body table.data { border-radius: 0; border-top: 1px solid var(--ink-700); }

/* ========================================================================
   FONT-COLOR SAFETY NET — guaranteed correct text color per theme.
   Placed last (wins any same-specificity tie by source order) and marked
   !important (wins regardless of specificity) so text color is ALWAYS
   correct for the active theme, even if something upstream — a caching
   quirk, a browser/OS forced-dark-mode filter, or any other edge case —
   would otherwise leave text using the wrong theme's color. This does not
   replace the CSS-variable theme system above; it backs it up.
   ======================================================================== */
[data-theme="dark"],
[data-theme="dark"] body {
  color: #eef2f7 !important;
}
[data-theme="light"],
[data-theme="light"] body {
  color: #0d1319 !important;
}
[data-theme="light"] .setting-item,
[data-theme="light"] .panel,
[data-theme="light"] .modal,
[data-theme="light"] table.data td,
[data-theme="light"] table.data th,
[data-theme="light"] .field,
[data-theme="light"] .msg-log,
[data-theme="light"] .empty-state,
[data-theme="light"] .order-row td,
[data-theme="light"] .pwa-queue-item {
  color: #0d1319 !important;
}
[data-theme="dark"] .setting-item,
[data-theme="dark"] .panel,
[data-theme="dark"] .modal,
[data-theme="dark"] table.data td,
[data-theme="dark"] table.data th,
[data-theme="dark"] .field,
[data-theme="dark"] .msg-log,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .order-row td,
[data-theme="dark"] .pwa-queue-item {
  color: #eef2f7 !important;
}
/* Muted/secondary text stays muted in both themes — a lighter touch than
   the full-strength override above, so labels and hints don't look as
   loud as headings and values, but are still always clearly readable. */
[data-theme="light"] .sub,
[data-theme="light"] .muted,
[data-theme="light"] .hint {
  color: #5d6a75 !important;
}
[data-theme="dark"] .sub,
[data-theme="dark"] .muted,
[data-theme="dark"] .hint {
  color: #9aa7b2 !important;
}
/* Inputs and selects — native form elements are exactly where a browser's
   own forced-dark-mode handling most commonly overrides page CSS. */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  color: #0d1319 !important;
  background: #ffffff !important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  color: #eef2f7 !important;
}

.mu-tab.is-active {
  background-image: var(--grad-primary);
  background-color: var(--teal-dim);
  color: #04231f;
  border-color: transparent;
}