/* ── Chakar color system ─────────────────────────────────────── */
:root {
  --navy:    #06091a;
  --indigo:  #0f0f3d;
  --violet:  #1a0a3d;
  --gold:    #c9a84c;
  --gold-lt: #f0d080;
  --muted:   #8888bb;
  --white:   #eeeeff;
  --border:  rgba(100,80,220,.2);
  --surface: rgba(255,255,255,.04);
}

/* ── Base ────────────────────────────────────────────────────── */
html, body {
  background-color: #06091a !important;
  color: #eeeeff !important;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.container, .container-fluid {
  background-color: transparent !important;
  color: #eeeeff !important;
}

/* ── Links ───────────────────────────────────────────────────── */
a { color: #8888bb !important; text-decoration: none; }
a:hover { color: #eeeeff !important; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn, .btn-primary, .btn-secondary, .btn-sm {
  background: rgba(255,255,255,.04) !important;
  color: #eeeeff !important;
  border: 1px solid rgba(100,80,220,.25) !important;
  border-radius: 18px;
}
.btn:hover, .btn:focus {
  background: rgba(100,80,220,.22) !important;
  color: #eeeeff !important;
  border-color: rgba(100,80,220,.5) !important;
}
.btn-outline-secondary {
  background: transparent !important;
  color: #8888bb !important;
  border: 1px solid rgba(100,80,220,.3) !important;
}
.btn-outline-secondary:hover {
  background: rgba(100,80,220,.2) !important;
  color: #eeeeff !important;
}

/* ── Tables ──────────────────────────────────────────────────── */
.table, th, td {
  background-color: transparent !important;
  color: #eeeeff !important;
  border-color: rgba(100,80,220,.2) !important;
}
thead th {
  background: rgba(100,80,220,.12) !important;
  color: #c9a84c !important;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
tbody tr:hover td {
  background: rgba(100,80,220,.08) !important;
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(100,80,220,.2) !important;
  border-radius: 14px;
  color: #eeeeff !important;
}
.card-header {
  background: rgba(100,80,220,.12) !important;
  border-bottom: 1px solid rgba(100,80,220,.2) !important;
  color: #c9a84c !important;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Form inputs ─────────────────────────────────────────────── */
input, textarea, select {
  background-color: rgba(255,255,255,.06) !important;
  color: #eeeeff !important;
  border: 1px solid rgba(100,80,220,.25) !important;
  border-radius: 8px;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(100,80,220,.6) !important;
  box-shadow: 0 0 0 3px rgba(100,80,220,.15) !important;
  outline: none;
}
input::placeholder { color: #8888bb !important; }
label { color: #8888bb !important; }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert {
  background: rgba(100,80,220,.12) !important;
  border: 1px solid rgba(100,80,220,.25) !important;
  color: #eeeeff !important;
  border-radius: 10px;
}

/* ── List groups ─────────────────────────────────────────────── */
.list-group-item {
  background-color: rgba(255,255,255,.04) !important;
  color: #eeeeff !important;
  border-color: rgba(100,80,220,.2) !important;
}
.list-group-item:hover {
  background: rgba(100,80,220,.12) !important;
}

/* ── Nav pills ───────────────────────────────────────────────── */
.nav-pills .nav-link { color: #8888bb !important; border-radius: 18px; }
.nav-pills .nav-link.active {
  background: linear-gradient(135deg, #7b5af0, #4a90d9) !important;
  color: #fff !important;
}
.nav-pills .nav-link:hover {
  background: rgba(100,80,220,.15) !important;
  color: #eeeeff !important;
}

/* ── Grid.js ─────────────────────────────────────────────────── */
.gridjs-container { background: transparent !important; color: #eeeeff !important; }
.gridjs-th {
  background: rgba(100,80,220,.12) !important;
  color: #c9a84c !important;
  border-color: rgba(100,80,220,.2) !important;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
}
.gridjs-td {
  background: transparent !important;
  color: #eeeeff !important;
  border-color: rgba(100,80,220,.2) !important;
}
.gridjs-tr:hover .gridjs-td { background: rgba(100,80,220,.08) !important; }
.gridjs-search-input {
  background: rgba(255,255,255,.06) !important;
  color: #eeeeff !important;
  border: 1px solid rgba(100,80,220,.25) !important;
  border-radius: 8px;
}
.gridjs-wrapper { border: 1px solid rgba(100,80,220,.2) !important; border-radius: 10px; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge.bg-secondary {
  background: rgba(100,80,220,.3) !important;
  color: #eeeeff !important;
}

/* ── Typography ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: #eeeeff; }
.text-muted { color: #8888bb !important; }
.text-secondary { color: #8888bb !important; }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #06091a; }
::-webkit-scrollbar-thumb { background: rgba(100,80,220,.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,80,220,.7); }

/* ── Mini orbit widget ───────────────────────────────────────── */
.mini-orbit {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  width: 52px;
  height: 52px;
  z-index: 999;
  opacity: .65;
  transition: opacity .2s;
  pointer-events: none;
}
.mini-orbit:hover { opacity: 1; }