:root {
  --bg: #0b0e12;
  --surface: #10151b;
  --card: #121922;
  --muted: #a8b2c1;
  --text: #e6edf3;
  --brand: #7c5cff;    /* purple accent */
  --brand-2: #21d4fd;  /* cyan accent */
  --danger: #ff6b6b;
  --success: #16c79a;
  --border: #1b2430;
  --radius: 14px;
  --shadow: 0 20px 45px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f9fb;
    --surface: #ffffff;
    --card: #f2f6fb;
    --text: #0f141a;
    --muted: #445566;
    --border: #e6eef5;
    --shadow: 0 8px 22px rgba(0,0,0,.08);
  }
}

html, body {
  background: radial-gradient(1200px 800px at 10% -10%, rgba(124,92,255,.08), transparent),
              radial-gradient(1200px 800px at 90% 110%, rgba(33,212,253,.08), transparent),
              var(--bg);
  color: var(--text);
}

.navbar,
.card,
.modal-content,
.dropdown-menu {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) , var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.table { color: var(--text); }
.table thead th { color: var(--muted); border-color: var(--border); }
.table td, .table th { border-color: var(--border); }

a, .btn-link { color: var(--brand-2); }
a:hover, .btn-link:hover { color: var(--brand); }

.btn-primary {
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  border: 0;
}
.btn-outline-primary { color: var(--brand-2); border-color: var(--brand-2); }
.btn-outline-primary:hover { background: rgba(33,212,253,.1); }

.badge.text-bg-secondary {
  background: linear-gradient(90deg, rgba(124,92,255,.25), rgba(33,212,253,.25));
  color: var(--text);
  border: 1px solid var(--border);
}

.input-group .form-control,
.form-control,
.form-select {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}
.form-control::placeholder { color: #7f8a99; }

.shadow-soft { box-shadow: var(--shadow); }
.rounded-2xl { border-radius: var(--radius) !important; }

.fade-scale { animation: fadeScale .25s ease-out both; }
@keyframes fadeScale {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.table-hover tbody tr:hover {
  background: rgba(124,92,255,.08);
  cursor: pointer;
}

.small-muted { color: var(--muted); }

/* ---- Chart sizing ---- */
.chart-wrap {
  position: relative;
  height: 180px;
  width: 100%;
  overflow: hidden;
}

/* ---- Compact KPI tweaks ---- */
.kpi-compact .display-6 { line-height: 1.05; }
.kpi-compact .small-muted { font-size: .875rem; }

/* ===========================
   Dropdown overlay fixes
   =========================== */
/* Navbar creates a stacking context due to animation/transform — raise it */
.navbar {
  z-index: 1200;
  overflow: visible; /* prevent clipping */
}

/* Ensure dropdown menu stacks above everything in the page header area */
.dropdown-menu {
  z-index: 2000;
}

/* Optional: guard against any parent accidentally hiding overflow */
.navbar .container,
.navbar .container-fluid {
  overflow: visible;
}