:root {
  --bg-main: #06101d;
  --bg-panel: rgba(13, 24, 43, 0.86);
  --bg-panel-2: rgba(17, 31, 56, 0.88);
  --border: rgba(96, 215, 255, 0.16);
  --text: #e9f3ff;
  --muted: #8ea5c7;
  --cyan: #35d8ff;
  --blue: #5f8cff;
  --violet: #8b5cf6;
  --green: #22c55e;
  --amber: #f59e0b;
  --danger: #ef4444;
  --panel-shadow: 0 0 0 1px rgba(95, 216, 255, 0.08), 0 18px 50px rgba(1, 8, 20, 0.48);
}

html, body {
  background: radial-gradient(circle at top right, rgba(95,140,255,.18), transparent 20%),
              radial-gradient(circle at top left, rgba(53,216,255,.12), transparent 18%),
              linear-gradient(180deg, #05101b 0%, #081321 100%);
  color: var(--text);
}

body.dark-mode .content-wrapper,
body.dark-mode,
.content-wrapper { background: transparent !important; }

.main-header.navbar {
  border-bottom: 1px solid var(--border);
  background: rgba(5, 13, 24, 0.9) !important;
  backdrop-filter: blur(14px);
}

.top-chip {
  display: inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius: 999px;
  background: rgba(79,209,255,.08); border:1px solid rgba(79,209,255,.12); color:#dff6ff;
}

.main-sidebar {
  background: linear-gradient(180deg, rgba(5,13,24,0.97), rgba(12,22,39,0.97)) !important;
  border-right: 1px solid var(--border); backdrop-filter: blur(14px);
}

.brand-link { border-bottom: 1px solid var(--border) !important; display:flex; align-items:center; gap:12px; }
.brand-mark { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:linear-gradient(135deg, rgba(53,216,255,.22), rgba(95,140,255,.18)); color:#fff; }
.brand-text { color: #fff !important; font-weight: 700 !important; letter-spacing:.03em; }
.fleet-panel { margin: 18px 12px 6px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(53,216,255,.1), rgba(95,140,255,.08)); border:1px solid rgba(95,216,255,.08); }
.fleet-label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .15em; }
.fleet-value { color:#fff; font-weight:700; margin-top:4px; }

.nav-sidebar .nav-link { border-radius: 14px; margin: 5px 10px; color: #d0ddf5 !important; }
.nav-sidebar .nav-link:hover, .nav-sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(53,216,255,.16), rgba(95,140,255,.12)) !important;
  color:#fff !important; box-shadow: inset 0 0 0 1px rgba(53,216,255,.14);
}

.eyebrow { color: var(--cyan); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; font-weight:700; }
.content-header h1 { color:#fff !important; font-size: 2rem; font-weight: 800; margin-bottom:0; }
.header-status { display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius: 999px; background: rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.14); color:#eafff2; }
.status-dot { width:10px; height:10px; border-radius:50%; background:#22c55e; box-shadow:0 0 12px #22c55e; }

.card, .small-box, .mini-stat {
  background: linear-gradient(180deg, rgba(13,24,43,.92), rgba(10,20,35,.96)) !important;
  border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--panel-shadow);
}
.card-header { background: transparent; border-bottom: 1px solid rgba(142,165,199,.12); }
.card-title, .card-body, .table, .table th, .table td, .small-box p, .small-box h3, .mini-stat { color: var(--text) !important; }
.text-muted { color: var(--muted) !important; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.panel-xl { min-height: 360px; }
.fleet-card { min-height: 100%; }
.mini-pill { padding: 7px 12px; border-radius:999px; background: rgba(95,140,255,.12); color:#dcebff; font-size: .78rem; border:1px solid rgba(95,140,255,.16); }

.ultra-box { overflow:hidden; min-height: 150px; }
.ultra-box .inner { position:relative; z-index:2; }
.ultra-box .icon { color: rgba(255,255,255,.11) !important; }
.kpi-label { color: rgba(255,255,255,.82); text-transform: uppercase; font-size: .74rem; letter-spacing: .12em; font-weight:700; margin-bottom:6px; }
.bg-info { background: linear-gradient(135deg, rgba(6,182,212,.88), rgba(59,130,246,.88)) !important; }
.bg-success { background: linear-gradient(135deg, rgba(34,197,94,.88), rgba(16,185,129,.88)) !important; }
.bg-warning { background: linear-gradient(135deg, rgba(245,158,11,.96), rgba(251,191,36,.96)) !important; color:#101828 !important; }
.bg-warning h3, .bg-warning p, .bg-warning .icon, .bg-warning .kpi-label { color:#101828 !important; }
.bg-violet { background: linear-gradient(135deg, rgba(139,92,246,.88), rgba(95,140,255,.88)) !important; }

.forecast-value { font-size: 2.4rem; font-weight: 800; color:#fff; line-height:1.1; margin-bottom:8px; }
.metric-line { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid rgba(142,165,199,.1); }
.metric-line:last-child { border-bottom:0; }
.metric-line strong { color:#fff; }
.ops-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ops-item { padding:16px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(95,216,255,.08); }
.ops-item span { display:block; color:var(--muted); font-size:.82rem; margin-bottom:6px; }
.ops-item strong { font-size:1.1rem; color:#fff; }

.table thead th { border-bottom:1px solid rgba(142,165,199,.18); text-transform: uppercase; letter-spacing: .06em; font-size:.74rem; color:#bcd1f2 !important; }
.table td, .table th { border-top:1px solid rgba(142,165,199,.09); vertical-align: middle; }
.ultra-table tbody tr:hover { background: rgba(79,209,255,.04); }
.badge-success { background: linear-gradient(135deg, #16a34a, #22c55e); }
.badge-danger { background: linear-gradient(135deg, #dc2626, #ef4444); }
.badge-warning { background: linear-gradient(135deg, #d97706, #f59e0b); color:#111827; }

.mini-stat { padding: 18px 20px; display:flex; justify-content:space-between; align-items:center; }
.mini-stat span { color: var(--muted); }
.mini-stat strong { font-size: 1.5rem; }

.login-page {
  background: radial-gradient(circle at top, rgba(95,140,255,.16), transparent 20%), radial-gradient(circle at bottom left, rgba(53,216,255,.12), transparent 24%), linear-gradient(135deg, #06101d, #0c1728 55%, #111827);
}
.ultra-login-box { width:440px; max-width:95vw; }
.login-box .card { background: rgba(11, 20, 36, 0.92) !important; border-radius: 28px; border:1px solid var(--border); box-shadow: 0 24px 70px rgba(0,0,0,.36); }
.login-brand { border-bottom:1px solid rgba(142,165,199,.12) !important; }
.login-orb { width:64px; height:64px; margin: 8px auto 14px; border-radius:22px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(53,216,255,.18), rgba(95,140,255,.2)); color:#fff; font-size:1.4rem; box-shadow: 0 0 30px rgba(53,216,255,.12); }
.form-control { background: rgba(9,16,29,.88); border:1px solid rgba(95,216,255,.14); color: var(--text); }
.form-control:focus { border-color: rgba(53,216,255,.55); box-shadow:0 0 0 .2rem rgba(53,216,255,.12); }
.btn-primary { background: linear-gradient(135deg, var(--cyan), var(--blue)); border:none; box-shadow: 0 10px 25px rgba(53,216,255,.18); }
.btn-primary:hover { filter: brightness(1.05); }

canvas { min-height: 300px !important; }

@media (max-width: 991.98px) {
  .ops-grid { grid-template-columns:1fr; }
  .forecast-value { font-size: 2rem; }
}