/* =============================================
   V2 — DARK EXECUTIVE
   Deep navy canvas, crimson accent, jewel tones
   ============================================= */

:root {
  --ink:   #e7ecf5;
  --ink-2: #a9b4c9;
  --ink-3: #6a7793;
  --line:   #222b43;
  --line-2: #1a2238;
  --bg:     #0b1020;
  --bg-card: #121a30;

  --navy-900: #070b18;
  --navy-800: #0e1426;
  --navy-700: #141c36;
  --navy-600: #1e2744;
  --navy-500: #2b3659;
  --navy-400: #45527a;
  --navy-300: #6a7793;
  --navy-200: #222b43;
  --navy-100: #1a2238;
  --navy-50:  #141c36;

  --red-500: #ff3b55;
  --red-600: #d81e3a;
  --red-400: #ff6478;
  --red-50:   rgba(255,59,85,0.10);
  --red-100:  rgba(255,59,85,0.16);

  --green-500: #2bd498;
  --green-50:  rgba(43,212,152,0.12);
  --amber-500: #ffb547;
  --amber-50:  rgba(255,181,71,0.12);
  --blue-500:  #5d8cff;
  --blue-50:   rgba(93,140,255,0.12);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.5);
}

body { background: radial-gradient(ellipse at top right, #141c36 0%, #0b1020 60%); color: var(--ink); }

/* Topbar */
.topbar {
  background: rgba(14,20,38,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.tb-brand { border-left-color: var(--line); }
.tb-brand .logo-mark {
  background: linear-gradient(135deg, #ff3b55, #d81e3a);
  box-shadow: 0 4px 14px rgba(255,59,85,0.4);
}
.tb-brand .logo-mark::after { background: #fff; opacity: 0.9; }
.tb-brand .brand-name { color: #fff; }
.tb-brand .brand-sub { color: var(--ink-3); }

.tb-search input {
  background: rgba(255,255,255,0.04);
  border-color: var(--line);
  color: var(--ink);
}
.tb-search input::placeholder { color: var(--ink-3); }
.tb-search input:focus {
  background: rgba(255,255,255,0.07);
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px rgba(255,59,85,0.15);
}
.tb-search .icon { color: var(--ink-3); }
.tb-search .kbd { background: rgba(255,255,255,0.06); border-color: var(--line); color: var(--ink-2); }

.tb-btn { color: var(--ink-2); }
.tb-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
.tb-btn .dot { border-color: #0e1426; }
.tb-new {
  background: linear-gradient(135deg, #ff3b55, #d81e3a);
  box-shadow: 0 6px 16px rgba(255,59,85,0.35);
}
.tb-new:hover { background: linear-gradient(135deg, #ff4d66, #e62442); }
.tb-divider { background: var(--line); }
.tb-user:hover { background: rgba(255,255,255,0.04); }
.tb-user .avatar { background: linear-gradient(135deg, #ff3b55, #8b1b30); }
.tb-user .u-name { color: #fff; }

/* Domain bar */
.domainbar {
  background: #070b18;
  border-bottom: 1px solid var(--line);
}
.domain-tab { color: rgba(255,255,255,0.55); }
.domain-tab:hover { color: #fff; background: rgba(255,255,255,0.05); }
.domain-tab.active { color: #fff; background: rgba(255,59,85,0.12); }
.domain-tab.active::after { background: var(--red-500); box-shadow: 0 0 10px var(--red-500); }

/* Sidebar */
.sidebar {
  background: #0e1426;
  border-left: 1px solid var(--line);
}
.sb-workspace {
  background: linear-gradient(135deg, #1a2340 0%, #0e1426 100%);
  border: 1px solid var(--line);
}
.sb-workspace::before { background: radial-gradient(circle, rgba(255,59,85,0.35), transparent 70%); }
.sb-workspace .ws-icon { background: linear-gradient(135deg, #ff3b55, #d81e3a); }
.sb-workspace .ws-name { color: #fff; }
.sb-workspace .ws-sub { color: var(--ink-2); }

.sb-scroll::-webkit-scrollbar-thumb { background: var(--navy-500); }
.sb-section-title { color: var(--ink-3); }
.sb-section-title::after { background: var(--line); }

.sb-item { color: var(--ink-2); }
.sb-item:hover { background: rgba(255,255,255,0.04); color: #fff; }
.sb-item.active {
  background: linear-gradient(90deg, rgba(255,59,85,0.15), rgba(255,59,85,0.04));
  color: #fff;
}
.sb-item.active::before { background: var(--red-500); box-shadow: 0 0 12px var(--red-500); }
.sb-item .ico { color: var(--ink-3); }
.sb-item.active .ico { color: var(--red-500); }
.sb-item .badge { background: rgba(255,255,255,0.08); color: var(--ink); }
.sb-item .badge.red { background: var(--red-500); color: #fff; }

.sb-footer { border-top-color: var(--line); }
.sb-mini-btn { background: rgba(255,255,255,0.04); color: var(--ink-2); }
.sb-mini-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Cards & content */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}
.card-head { border-bottom-color: var(--line); }
.card-title { color: #fff; }
.card-sub { color: var(--ink-3); }

.kpi {
  background: var(--bg-card);
  border: 1px solid var(--line);
  position: relative;
}
.kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 50%);
  pointer-events: none;
}
.kpi .value { color: #fff; }
.kpi .label { color: var(--ink-3); }
.kpi .sub { color: var(--ink-3); }
.kpi.blue .kpi-icon { background: var(--blue-50); color: var(--blue-500); }
.kpi.green .kpi-icon { background: var(--green-50); color: var(--green-500); }
.kpi.amber .kpi-icon { background: var(--amber-50); color: var(--amber-500); }
.kpi.red .kpi-icon { background: var(--red-50); color: var(--red-500); }
.kpi .trend.up { background: var(--green-50); color: var(--green-500); }
.kpi .trend.down { background: var(--red-50); color: var(--red-500); }

.page-title { color: #fff; }
.breadcrumb { color: var(--ink-3); }
.breadcrumb .cur { color: #fff; }

.btn-primary {
  background: linear-gradient(135deg, #ff3b55, #d81e3a);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255,59,85,0.25);
}
.btn-primary:hover { box-shadow: 0 6px 18px rgba(255,59,85,0.4); }
.btn-danger { background: var(--red-500); }
.btn-ghost { background: rgba(255,255,255,0.04); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--navy-400); }

.tabs { background: rgba(255,255,255,0.04); }
.tabs button { color: var(--ink-2); }
.tabs button.on { background: rgba(255,59,85,0.15); color: #fff; box-shadow: none; }

.tbl th {
  background: rgba(255,255,255,0.03);
  color: var(--ink-3);
  border-bottom-color: var(--line);
}
.tbl td { color: var(--ink); border-bottom-color: var(--line); }
.tbl tr.clickable:hover { background: rgba(255,255,255,0.03); }
.tbl .track-id { color: #fff; }

.status.delivered { background: var(--green-50); color: var(--green-500); }
.status.in-transit { background: var(--blue-50); color: var(--blue-500); }
.status.pending { background: var(--amber-50); color: var(--amber-500); }
.status.cancelled { background: var(--red-50); color: var(--red-500); }

.timeline-item .tl-dot { background: var(--navy-700); color: var(--ink-2); border-color: var(--bg-card); box-shadow: 0 0 0 1px var(--line); }
.timeline-item.done .tl-dot { background: var(--green-500); color: #001a10; box-shadow: 0 0 0 1px var(--green-500), 0 0 14px rgba(43,212,152,0.4); }
.timeline-item.active .tl-dot { background: var(--red-500); color: #fff; box-shadow: 0 0 0 1px var(--red-500), 0 0 14px rgba(255,59,85,0.5); }
.timeline-item:not(:last-child)::before { background: var(--line); }
.timeline-item .tl-title { color: #fff; }
.timeline-item .tl-meta { color: var(--ink-3); }
.timeline-item .tl-desc { color: var(--ink-2); }

.mini-map {
  background:
    radial-gradient(circle at 30% 40%, rgba(93,140,255,0.12), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255,59,85,0.15), transparent 40%),
    linear-gradient(180deg, #141c36, #0b1020);
  border-color: var(--line);
}
.mini-map .grid-lines {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
}
.route-line { stroke: var(--red-500); filter: drop-shadow(0 0 6px var(--red-500)); }

.fleet-card { border-color: var(--line); background: rgba(255,255,255,0.02); }
.fleet-card:hover { border-color: var(--red-500); background: rgba(255,59,85,0.05); }
.fleet-card .truck-icon { background: var(--navy-700); color: var(--red-500); }