/* ── CONTENT AREA LIGHTENING PATCH v2 ───────────────
   Sidebar stays dark. Content area is lighter.
   Fixes readability issues in charts, tables, modals.
──────────────────────────────────────────────────── */

:root {
  --bg:    #161b27;
  --bg2:   #1c2438;
  --bg3:   #243048;
  --text:  #edf1f8;
  --text2: #9baac4;
  --text3: #6b7a96;
  --border: #2d3a54;
  --border2: #3a4a68;
}

/* ── MAIN CONTENT ────────────────────────────────── */
.main        { background: #161b27 !important; }
.content     { background: #161b27; }
.topbar      { background: #161b27 !important; border-bottom: 1px solid #2d3a54 !important; }

/* ── CARDS — clear lift off background ───────────── */
.card {
  background: #1c2438 !important;
  border: 0.5px solid #2d3a54 !important;
}
.stat-card {
  background: #1f2a40 !important;
  border: 0.5px solid #2d3a54 !important;
}

/* ── STAT CARD TEXT — fix contrast ───────────────── */
.stat-label {
  color: #8a9ab8 !important;
  font-weight: 600 !important;
}
.stat-value {
  color: #edf1f8 !important;
}
.stat-sub {
  color: #7a8aaa !important;
}

/* ── CHART CARDS — slightly lighter so bars pop ─── */
.card .card-body canvas,
.card canvas {
  filter: brightness(1.08);
}

/* Chart card background needs to be lighter than content bg */
.card-header { background: transparent !important; }
.card-body   { background: transparent !important; }

/* ── TABLE — fix readability ─────────────────────── */
.data-table {
  color: #edf1f8 !important;
}
.data-table th {
  background: #243048 !important;
  color: #8a9ab8 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  border-bottom: 1px solid #2d3a54 !important;
}
.data-table td {
  color: #edf1f8 !important;
  border-bottom: 1px solid #232e48 !important;
}
.data-table tr:hover td {
  background: #1f2a40 !important;
}

/* ── FORM ELEMENTS ───────────────────────────────── */
.form-input, .form-select, textarea.form-input {
  background: #1f2a40 !important;
  border: 1px solid #2d3a54 !important;
  color: #edf1f8 !important;
}
.form-input::placeholder, textarea.form-input::placeholder {
  color: #5a6a86 !important;
}
.form-label {
  color: #9baac4 !important;
  font-weight: 600 !important;
}

/* ── MODAL — center on desktop, good width ────────── */
.modal-overlay {
  background: rgba(0,0,0,0.7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.modal {
  background: #1c2438 !important;
  border: 1px solid #2d3a54 !important;
  max-width: 560px !important;
  width: 90vw !important;
  margin: auto !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.4) !important;
}
.modal.wide {
  max-width: 700px !important;
}
.modal-header {
  background: transparent !important;
  border-bottom: 1px solid #2d3a54 !important;
  color: #edf1f8 !important;
}
.modal-footer {
  background: transparent !important;
  border-top: 1px solid #2d3a54 !important;
}

/* ── TABS ────────────────────────────────────────── */
.tabs {
  border-bottom: 1px solid #2d3a54 !important;
}
.tab {
  color: #7a8aaa !important;
}
.tab.active {
  color: #6366f1 !important;
  border-bottom-color: #6366f1 !important;
}

/* ── PROGRESS BARS ───────────────────────────────── */
.progress {
  background: #243048 !important;
}

/* ── SECTION HEADER & TITLES ─────────────────────── */
.section-title {
  color: #edf1f8 !important;
}
.section-header {
  border-bottom: 1px solid #2d3a54 !important;
}
.card-title {
  color: #edf1f8 !important;
}
.card-header {
  border-bottom: 1px solid #2d3a54 !important;
}

/* ── BADGES ──────────────────────────────────────── */
.badge {
  font-weight: 600 !important;
}
.badge-gray {
  background: #2d3a54 !important;
  color: #9baac4 !important;
}
.badge-green {
  background: rgba(16,185,129,0.15) !important;
  color: #34d399 !important;
}
.badge-red {
  background: rgba(239,68,68,0.15) !important;
  color: #f87171 !important;
}
.badge-amber {
  background: rgba(245,158,11,0.15) !important;
  color: #fbbf24 !important;
}

/* ── EMPTY STATES ────────────────────────────────── */
.empty-icon { opacity: 0.9; }
.empty-title { color: #edf1f8 !important; }
.empty-sub   { color: #7a8aaa !important; }

/* ── BOTTOM NAV ──────────────────────────────────── */
#bottom-nav-bar {
  background: #1c2438 !important;
  border-top: 1px solid #2d3a54 !important;
}

/* ── TOPBAR TITLE & HAMBURGER ────────────────────── */
.topbar-title { color: #edf1f8 !important; }
.hamburger span { background: #edf1f8 !important; }

/* ── TOAST NOTIFICATIONS ─────────────────────────── */
.toast {
  background: #1f2a40 !important;
  border: 1px solid #2d3a54 !important;
  color: #edf1f8 !important;
}