/* ══════════════════════════════════════════════════════════════
   OBSIDIAN BLACK MIRROR — Premium Design System v2
   True black. Glass depth. Teal accents. Zero blue.
   ══════════════════════════════════════════════════════════════ */

/* ── Foundation: True Black Palette ── */
:root {
  --obsidian: #050508;
  --obsidian-raised: #0A0B10;
  --obsidian-elevated: #0E1016;
  --obsidian-surface: #12141A;
  --glass: rgba(14, 16, 22, 0.75);
  --glass-hover: rgba(18, 20, 28, 0.82);
  --glass-border: rgba(180, 195, 210, 0.07);
  --glass-border-hover: rgba(5, 198, 144, 0.12);
  --glow-teal: rgba(5, 198, 144, 0.06);
  --glow-teal-strong: rgba(5, 198, 144, 0.12);
  
  --accent-blue: #05C690 !important;
  --accent-blue-hover: #00A87A !important;
  --accent-purple: #005971 !important;
  --accent-purple-hover: #00495E !important;
  --gradient-accent: linear-gradient(135deg, #00634F, #005971) !important;
  
  --text-primary: #F0F4F8 !important;
  --text-secondary: #B0BEC5 !important;
  --text-muted: #6B7785 !important;
  --border-color: rgba(180, 195, 210, 0.07) !important;
}

/* ── App Shell ── */
html, body, #root, .app-layout {
  background: var(--obsidian) !important;
  color: var(--text-primary) !important;
}

.app-content {
  background:
    radial-gradient(ellipse 800px 500px at 15% -8%, rgba(0, 99, 79, 0.04), transparent 55%),
    radial-gradient(ellipse 600px 350px at 88% 108%, rgba(0, 89, 113, 0.03), transparent 50%),
    var(--obsidian) !important;
}

/* ── Sidebar: Obsidian Glass ── */
.sidebar {
  background: linear-gradient(180deg, var(--obsidian-raised), var(--obsidian)) !important;
  border-right: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(20px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
}

.sidebar-logo {
  background: linear-gradient(180deg, rgba(0, 99, 79, 0.08), transparent) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

.sidebar-logo h1 {
  background: linear-gradient(135deg, #F0F4F8 0%, #05C690 60%, #B0BEC5 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.sidebar-section-label {
  color: rgba(5, 198, 144, 0.30) !important;
  font-family: monospace !important;
  letter-spacing: 0.12em !important;
  font-size: 9px !important;
}

.sidebar-link {
  color: #8A95A5 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-left: 2px solid transparent !important;
}

.sidebar-link:hover {
  color: #F0F4F8 !important;
  background: rgba(5, 198, 144, 0.04) !important;
  border-left-color: rgba(5, 198, 144, 0.2) !important;
}

.sidebar-link.active {
  color: #05C690 !important;
  background: linear-gradient(90deg, rgba(5, 198, 144, 0.08), transparent) !important;
  border-left-color: #05C690 !important;
  box-shadow: inset 2px 0 0 #05C690 !important;
}

/* ── Topbar: Glass Bar ── */
.topbar {
  background: linear-gradient(180deg, var(--obsidian-raised), rgba(8, 9, 14, 0.95)) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  box-shadow: 0 1px 0 rgba(5, 198, 144, 0.03) !important;
}

.topbar-title {
  background: linear-gradient(135deg, #F0F4F8, #B0BEC5) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
}

/* ── Cards: Glass Panels ── */
.card, .stat-card {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 4px 16px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card:hover, .stat-card:hover {
  background: var(--glass-hover) !important;
  border-color: var(--glass-border-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 0 1px rgba(5, 198, 144, 0.1) !important;
  transform: translateY(-1px) !important;
}

.kpi-card {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(5, 198, 144, 0.06) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

/* ── Tables: Premium Data ── */
.data-table {
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.data-table th {
  background: linear-gradient(180deg, var(--obsidian-elevated), var(--obsidian-raised)) !important;
  color: #8A95A5 !important;
  font-family: monospace !important;
  letter-spacing: 0.06em !important;
  font-size: 11px !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

.data-table td {
  color: #F0F4F8 !important;
  border-bottom: 1px solid rgba(180, 195, 210, 0.04) !important;
}

.data-table tr:hover td {
  background: rgba(5, 198, 144, 0.03) !important;
}

/* ── Buttons: Sharp Actions ── */
.btn-primary {
  background: linear-gradient(135deg, #00634F, #005971) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(5, 198, 144, 0.2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #007A63, #006B85) !important;
  box-shadow: 0 4px 16px rgba(5, 198, 144, 0.3) !important;
  transform: translateY(-1px) !important;
}

.btn-secondary {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  color: #B0BEC5 !important;
  backdrop-filter: blur(4px) !important;
  transition: all 0.2s ease !important;
}

.btn-secondary:hover {
  border-color: #05C690 !important;
  color: #F0F4F8 !important;
  background: rgba(5, 198, 144, 0.06) !important;
}

/* ── Section Headers ── */
.section-header {
  background: linear-gradient(180deg, var(--obsidian-elevated), var(--obsidian-raised)) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(8px) !important;
}

/* ── Inputs ── */
.input, .select {
  background: var(--obsidian-raised) !important;
  border: 1px solid var(--glass-border) !important;
  color: #F0F4F8 !important;
}

.input:focus, .select:focus {
  border-color: #05C690 !important;
  box-shadow: 0 0 0 2px rgba(5, 198, 144, 0.1) !important;
  outline: none !important;
}

:focus-visible {
  outline: 2px solid #05C690 !important;
  outline-offset: 2px !important;
}

/* ── Health Badges ── */
.health-badge {
  backdrop-filter: blur(4px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px !important; height: 5px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: rgba(180, 195, 210, 0.10) !important; border-radius: 3px !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(5, 198, 144, 0.18) !important; }

/* ── Smooth Transitions ── */
.sidebar-link, .btn, .card, .stat-card, .kpi-card, .badge, .health-badge {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar { transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.app-main { transition: margin-left 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; }

/* ── Logo Hover ── */
.sidebar-logo:hover img {
  transform: scale(1.05);
  transition: transform 0.3s ease !important;
}

/* ── Tab Bars: Glass Pills ── */
div[style*="linear-gradient(180deg, rgba(14, 16, 22"] {
  background: rgba(10, 11, 16, 0.5) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(8px) !important;
}

/* ── Command Palette ── */
.command-palette {
  background: rgba(8, 9, 14, 0.98) !important;
  border: 1px solid rgba(5, 198, 144, 0.08) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 1px rgba(5, 198, 144, 0.1) !important;
  backdrop-filter: blur(20px) !important;
}

/* ── Progress Bars ── */
.progress-bar { background: rgba(180, 195, 210, 0.06) !important; }
.progress-bar-fill { box-shadow: 0 0 6px currentColor !important; }

/* ── Override any remaining inline blue backgrounds ── */
.app-content [style*="background: #3B82F6"],
.app-content [style*="background:#3B82F6"] { background: #05C690 !important; }
.app-content [style*="color: #3B82F6"],
.app-content [style*="color:#3B82F6"] { color: #05C690 !important; }
.app-content [style*="linear-gradient(135deg, #3B82F6"] {
  background: linear-gradient(135deg, #00634F, #005971) !important;
}