/* ═══════════════════════════════════════════════════════════════════
   UMG DASHBOARD — Alisha Refresh v2 (Apr 27 2026)
   Addresses Apr 27 feedback round 2:
     1. Inter typography (replaces DM Sans for cleaner modern feel)
     2. White sidebar text (was muted-green, hard to read)
     3. Section headers larger + bolder than nav items
     4. White main-content background (was warm-charcoal)
     5. Emerald + white primary; gold accents removed; no italics on numbers
     6. Simpler data cards — no colored highlight strips
   Loaded LAST — overrides alisha-refresh.css, polish.css, dashboard.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Typography: Inter (Roboto fallback) ──────────────────────────── */
@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700,800&display=swap');

html, body,
.sidebar, .sidebar a, .sidebar-section-label,
.card, .card-label, .card-value, .card-sub,
.gauge-value, .goal-metric, .csc-metric-value,
.attention-counter-num, .brief-metric-value,
h1, h2, h3, h4, h5, h6,
.page-header h1, .section-header h2,
table, td, th, button, .btn, input, select, textarea {
  font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}
.card-value, .gauge-value, .goal-metric,
.csc-metric-value, .attention-counter-num, .brief-metric-value,
.ramadan-days {
  font-style: normal !important;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.02em;
}

/* ── Sidebar: white text on dark emerald, brighter hover/active ──── */
.sidebar a {
  color: #f3fdf7 !important;
  font-weight: 500 !important;
}
.sidebar a:hover {
  color: #ffffff !important;
  background: rgba(16,185,129,0.18) !important;
}
.sidebar a.active {
  color: #ffffff !important;
  background: linear-gradient(90deg, rgba(16,185,129,0.28) 0%, transparent 100%) !important;
  border-left: 3px solid #34d399 !important;
}
.sidebar-action-pill,
.sidebar-action-pill.theme-toggle,
.user-menu-item,
.sidebar-footer small,
.sidebar-footer a {
  color: rgba(243,253,247,0.85) !important;
}
.user-badge-name { color: #ffffff !important; }
.user-badge-role { color: #6ee7b7 !important; font-weight: 500 !important; }

/* ── Section labels: larger + bolder than nav items ──────────────── */
.sidebar-section-label {
  color: #6ee7b7 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin-top: 18px !important;
  margin-bottom: 6px !important;
  padding-left: 14px !important;
  opacity: 1 !important;
}
.sidebar-section-label:first-of-type { margin-top: 8px !important; }

/* Properties group toggle — bolder + emerald accent */
.sidebar-group-toggle {
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
}
.sidebar-group-toggle:hover {
  color: #a7f3d0 !important;
}

/* ── Main content area: white surface ─────────────────────────────── */
body.light-theme .main-content,
body.light-theme,
.main-content {
  background: #ffffff !important;
}
body:not(.light-theme) .main-content {
  background: #fafbfc !important;
}

/* Top bar — soften */
.top-bar {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02) !important;
}

/* ── Cards: clean white, no colored top strip ─────────────────────── */
.card,
.cards .card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-left: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
}
.card::before,
.card::after {
  display: none !important;
}
.card:hover {
  border-color: #10b981 !important;
  box-shadow: 0 4px 12px rgba(16,185,129,0.08), 0 1px 2px rgba(15,23,42,0.04) !important;
  transform: translateY(-1px) !important;
}
.card-label {
  color: #6b7280 !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 0.68rem !important;
}
.card-value {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
.card-sub {
  color: #6b7280 !important;
  font-size: 0.78rem !important;
}

/* ── Color tokens: emerald primary, no gold ───────────────────────── */
:root {
  --green: #10b981;
  --green-soft: #d1fae5;
  --green-deep: #059669;
  --red: #ef4444;
  --red-soft: #fee2e2;
  --orange: #f59e0b;
  --accent: #10b981;       /* override gold accent */
  --cyan: #10b981;
}
body, body.light-theme {
  --green: #10b981;
  --green-soft: #d1fae5;
  --red: #ef4444;
  --accent: #10b981;
}

/* Positive deltas use light-green chip; warnings red */
.delta-up, .trend-up, .positive { color: #059669 !important; }
.delta-down, .trend-down, .negative, .warning { color: #ef4444 !important; }

/* ── Page + section headers ───────────────────────────────────────── */
.page-header h1 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  background: none !important;
}
.section-header h2 {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
}
.section-header h2::before {
  background: #10b981 !important;
  width: 3px !important;
  height: 16px !important;
}

/* ── Tables ────────────────────────────────────────────────────────── */
table {
  background: #ffffff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
thead th {
  background: #f9fafb !important;
  color: #374151 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid #e5e7eb !important;
}
tbody td {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-bottom: 1px solid #f3f4f6 !important;
}
tbody tr:hover td {
  background: #f9fbfa !important;
}
tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 #10b981 !important;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn,
button.btn,
.btn-primary {
  background: #10b981 !important;
  color: #ffffff !important;
  border: 1px solid #10b981 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-style: normal !important;
}
.btn:hover,
button.btn:hover {
  background: #059669 !important;
  border-color: #059669 !important;
}
.btn-sm { padding: 4px 10px !important; font-size: 0.78rem !important; }

/* Secondary button */
.btn.btn-secondary,
.btn-outline {
  background: #ffffff !important;
  color: #10b981 !important;
  border: 1px solid #10b981 !important;
}
.btn.btn-secondary:hover,
.btn-outline:hover {
  background: #d1fae5 !important;
}

/* ── Form fields ──────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="number"],
input[type="search"], input[type="url"], textarea, select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15) !important;
}

/* ── Live dot ─────────────────────────────────────────────────────── */
.live-dot { background: #10b981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,0.18) !important; }

/* ── Badges ───────────────────────────────────────────────────────── */
.badge,
.section-tag,
.tag-live {
  background: #10b981 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
}

/* ── Alpha pulse / KPI strips ─────────────────────────────────────── */
.alerts-banner { background: #fef3c7 !important; color: #92400e !important; border-radius: 8px !important; }

/* ── Remove gold gradient on logo / brand ─────────────────────────── */
.sidebar-brand h2 {
  background: linear-gradient(135deg, #6ee7b7, #34d399) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── Modals ───────────────────────────────────────────────────────── */
.modal, .modal-content {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
}
.modal-header {
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* ── Tooltip data-source dotted underline → emerald ───────────────── */
[data-source] { border-bottom-color: rgba(16,185,129,0.25) !important; }

/* ── Brief sections (Overview accordions) ─────────────────────────── */
.brief-accordion { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; }
.brief-accordion-trigger { color: #0f172a !important; font-weight: 600 !important; }
.brief-accordion-trigger:hover { background: #f9fbfa !important; }
.accordion-tag { background: #10b981 !important; color: #fff !important; }

/* ── Light theme refinements ──────────────────────────────────────── */
body.light-theme {
  --bg: #ffffff;
  --bg-elev-1: #ffffff;
  --bg-elev-2: #f9fafb;
  --text: #0f172a;
  --text-muted: #6b7280;
  --border: #e5e7eb;
}