/* =============================================
   V4 — BOLD GLASS
   Vibrant gradient canvas, frosted glass panels
   ============================================= */

:root {
  --ink:   #ffffff;
  --ink-2: rgba(255,255,255,0.78);
  --ink-3: rgba(255,255,255,0.55);
  --line:   rgba(255,255,255,0.12);
  --line-2: rgba(255,255,255,0.06);
  --bg:     #0a0820;
  --bg-card: rgba(255,255,255,0.06);

  --navy-900: #0a0820;
  --navy-800: rgba(255,255,255,0.08);
  --navy-700: rgba(255,255,255,0.10);
  --navy-600: rgba(255,255,255,0.18);
  --navy-500: rgba(255,255,255,0.35);
  --navy-400: rgba(255,255,255,0.55);
  --navy-300: rgba(255,255,255,0.70);
  --navy-200: rgba(255,255,255,0.12);
  --navy-100: rgba(255,255,255,0.08);
  --navy-50:  rgba(255,255,255,0.05);

  --red-500: #ff4d6d;
  --red-600: #e63351;
  --red-400: #ff6b85;
  --red-50:  rgba(255,77,109,0.15);
  --red-100: rgba(255,77,109,0.25);

  --green-500: #4ade80;
  --green-50:  rgba(74,222,128,0.15);
  --amber-500: #fbbf24;
  --amber-50:  rgba(251,191,36,0.15);
  --blue-500:  #60a5fa;
  --blue-50:   rgba(96,165,250,0.15);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.15);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.25);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.35);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

body {
  background:
    radial-gradient(circle at 15% 10%, rgba(255,77,109,0.30), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(96,165,250,0.30), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(168,85,247,0.20), transparent 55%),
    linear-gradient(135deg, #0a0820 0%, #1a0d40 50%, #200830 100%);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
}

/* Topbar */
.topbar {
  background: rgba(10,8,32,0.50);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-bottom: 1px solid var(--line);
}
.tb-brand { border-left: 1px solid var(--line); }
.tb-brand .logo-mark {
  background: linear-gradient(135deg, #ff4d6d 0%, #c026d3 100%);
  box-shadow: 0 8px 20px rgba(255,77,109,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  border-radius: 12px;
}
.tb-brand .logo-mark::after { background: rgba(255,255,255,0.6); }
.tb-brand .brand-name {
  background: linear-gradient(135deg, #fff, #ffc3cf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.tb-brand .brand-sub { color: var(--ink-3); }

.tb-search input {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 14px;
}
.tb-search input::placeholder { color: var(--ink-3); }
.tb-search input:focus {
  background: rgba(255,255,255,0.12);
  border-color: var(--red-400);
  box-shadow: 0 0 0 4px rgba(255,77,109,0.15);
}
.tb-search .icon, .tb-search .kbd { color: var(--ink-3); }
.tb-search .kbd { background: rgba(255,255,255,0.10); border-color: var(--line); }

.tb-btn { color: var(--ink-2); border-radius: 12px; }
.tb-btn:hover { background: rgba(255,255,255,0.10); color: #fff; }
.tb-btn .dot { border-color: transparent; box-shadow: 0 0 8px var(--red-500); }

.tb-new {
  background: linear-gradient(135deg, #ff4d6d 0%, #c026d3 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(255,77,109,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  border-radius: 14px;
  font-weight: 700;
}
.tb-new:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(255,77,109,0.5), inset 0 1px 0 rgba(255,255,255,0.3); }

.tb-divider { background: var(--line); }
.tb-user:hover { background: rgba(255,255,255,0.08); }
.tb-user .avatar {
  background: linear-gradient(135deg, #60a5fa, #c026d3);
  box-shadow: 0 4px 12px rgba(192,38,211,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  border-radius: 10px;
}
.tb-user .u-name { color: #fff; }
.tb-user .u-role { color: var(--ink-3); }

/* Domain bar */
.domainbar {
  background: rgba(10,8,32,0.40);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.domain-tab { color: rgba(255,255,255,0.60); font-weight: 600; border-radius: 12px; }
.domain-tab:hover { color: #fff; background: rgba(255,255,255,0.08); }
.domain-tab.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(255,77,109,0.25), rgba(192,38,211,0.25));
  border: 1px solid rgba(255,77,109,0.30);
}
.domain-tab.active::after { display: none; }

/* Sidebar */
.sidebar {
  background: rgba(10,8,32,0.35);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-left: 1px solid var(--line);
}
.sb-workspace {
  background: linear-gradient(135deg, rgba(255,77,109,0.2), rgba(192,38,211,0.2));
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}
.sb-workspace::before { background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%); }
.sb-workspace .ws-icon {
  background: linear-gradient(135deg, #ff4d6d, #fff);
  color: #c026d3;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.sb-workspace .ws-name { color: #fff; }
.sb-workspace .ws-sub { color: rgba(255,255,255,0.75); }

.sb-section-title { color: var(--ink-3); }
.sb-section-title::after { background: var(--line); }

.sb-item { color: var(--ink-2); border-radius: 12px; }
.sb-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sb-item.active {
  background: linear-gradient(135deg, rgba(255,77,109,0.25), rgba(192,38,211,0.15));
  border: 1px solid rgba(255,77,109,0.25);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255,77,109,0.15);
}
.sb-item.active::before { display: none; }
.sb-item .ico { color: var(--ink-3); }
.sb-item.active .ico { color: var(--red-400); }
.sb-item .badge { background: rgba(255,255,255,0.12); color: #fff; backdrop-filter: blur(6px); }
.sb-item .badge.red { background: var(--red-500); color: #fff; box-shadow: 0 2px 8px rgba(255,77,109,0.4); }

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

/* Cards */
.card {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
.card-head { border-bottom-color: var(--line); }
.card-title { color: #fff; font-weight: 700; }
.card-sub { color: var(--ink-3); }

.kpi {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.kpi::after {
  content: "";
  position: absolute;
  top: -50%; right: -20%;
  width: 150px; height: 150px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.4;
  pointer-events: none;
}
.kpi.blue::after   { background: #60a5fa; }
.kpi.green::after  { background: #4ade80; }
.kpi.amber::after  { background: #fbbf24; }
.kpi.red::after    { background: #ff4d6d; }
.kpi.violet::after { background: #a78bfa; }
.kpi .kpi-icon { border-radius: 14px; backdrop-filter: blur(10px); }
.kpi.blue   .kpi-icon { background: var(--blue-50);  color: var(--blue-500);  border: 1px solid rgba(96,165,250,0.3); }
.kpi.green  .kpi-icon { background: var(--green-50); color: var(--green-500); border: 1px solid rgba(74,222,128,0.3); }
.kpi.amber  .kpi-icon { background: var(--amber-50); color: var(--amber-500); border: 1px solid rgba(251,191,36,0.3); }
.kpi.red    .kpi-icon { background: var(--red-50);   color: var(--red-500);   border: 1px solid rgba(255,77,109,0.3); }
.kpi.violet .kpi-icon { background: #f5f3ff;         color: #7c3aed;          border: 1px solid rgba(139,92,246,0.3); }
.kpi .value { color: #fff; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,0.3); position: relative; z-index: 1; }
.kpi .label { color: var(--ink-3); position: relative; z-index: 1; }
.kpi .sub { color: var(--ink-3); position: relative; z-index: 1; }
.kpi .trend { border-radius: 20px; backdrop-filter: blur(8px); }
.kpi .trend.up { background: var(--green-50); color: var(--green-500); border: 1px solid rgba(74,222,128,0.3); }
.kpi .trend.down { background: var(--red-50); color: var(--red-500); border: 1px solid rgba(255,77,109,0.3); }

.page-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.breadcrumb { color: var(--ink-3); }
.breadcrumb .cur { color: #fff; }

.btn { border-radius: 14px; }
.btn-primary {
  background: linear-gradient(135deg, #ff4d6d, #c026d3);
  color: #fff;
  box-shadow: 0 8px 20px rgba(255,77,109,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(255,77,109,0.5); }
.btn-danger { background: var(--red-500); }
.btn-ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.15); }

.tabs { background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); border-radius: 12px; }
.tabs button { color: var(--ink-2); border-radius: 10px; }
.tabs button.on {
  background: linear-gradient(135deg, #ff4d6d, #c026d3);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255,77,109,0.3);
}

/* Table */
.tbl th {
  background: rgba(255,255,255,0.04);
  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.06); }
.tbl .track-id { color: #fff; }

.status { backdrop-filter: blur(8px); border: 1px solid transparent; }
.status.delivered { background: var(--green-50); color: var(--green-500); border-color: rgba(74,222,128,0.3); }
.status.in-transit { background: var(--blue-50); color: var(--blue-500); border-color: rgba(96,165,250,0.3); }
.status.pending { background: var(--amber-50); color: var(--amber-500); border-color: rgba(251,191,36,0.3); }
.status.cancelled { background: var(--red-50); color: var(--red-500); border-color: rgba(255,77,109,0.3); }

.timeline-item .tl-dot {
  background: rgba(255,255,255,0.10);
  color: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  backdrop-filter: blur(10px);
}
.timeline-item.done .tl-dot { background: linear-gradient(135deg, #4ade80, #22c55e); color: #000; box-shadow: 0 0 14px rgba(74,222,128,0.5); }
.timeline-item.active .tl-dot { background: linear-gradient(135deg, #ff4d6d, #c026d3); color: #fff; box-shadow: 0 0 18px rgba(255,77,109,0.6); }
.timeline-item:not(:last-child)::before { background: var(--line); }
.timeline-item .tl-title { color: #fff; }
.timeline-item .tl-meta, .timeline-item .tl-desc { color: var(--ink-2); }

.mini-map {
  background:
    radial-gradient(circle at 30% 40%, rgba(96,165,250,0.35), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(255,77,109,0.35), transparent 45%),
    rgba(10,8,32,0.40);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  border-radius: 16px;
}
.mini-map .grid-lines {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
}
.map-pin { background: linear-gradient(135deg, #ff4d6d, #c026d3); box-shadow: 0 6px 14px rgba(255,77,109,0.5); }
.map-pin.navy { background: linear-gradient(135deg, #60a5fa, #3b82f6); box-shadow: 0 6px 14px rgba(96,165,250,0.5); }
.route-line { stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(255,255,255,0.6)); }

.fleet-card {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  border-radius: 14px;
}
.fleet-card:hover {
  border-color: rgba(255,77,109,0.4);
  background: rgba(255,77,109,0.05);
  transform: translateY(-2px);
}
.fleet-card .truck-icon {
  background: linear-gradient(135deg, rgba(255,77,109,0.2), rgba(192,38,211,0.2));
  color: var(--red-400);
  border: 1px solid rgba(255,77,109,0.25);
  border-radius: 12px;
}