/* ============================================================
   AFROFUTURIST QUIET LUXURY — Command Center Theme Override
   ============================================================
   Load this file LAST on every CC page to override base styles.
   <link rel="stylesheet" href="afrofuturist-theme.css">

   Design System:
   - Adire Indigo:  #3d5a99 / var(--indigo)
   - Benin Copper:  #c4835a / var(--copper)
   - Bone:          #f5f0e8 / var(--bone)
   - Deep Earth:    #06060e / var(--bg)
   - Surface:       #0a0c18 / var(--surface)
   ============================================================ */

/* === CSS CUSTOM PROPERTIES === */
:root {
  --indigo: #3d5a99;
  --indigo-bright: #5b7ec2;
  --indigo-dim: #2a3f6b;
  --copper: #c4835a;
  --copper-bright: #d4a07a;
  --copper-dim: #8b5e3f;
  --bone: #f5f0e8;
  --bone-dim: rgba(245, 240, 232, 0.5);
  --bg: #06060e;
  --surface: #0a0c18;
  --surface-hover: #0e1020;
  --border: rgba(61, 90, 153, 0.15);
  --border-hover: rgba(196, 131, 90, 0.25);
  --glow-indigo: rgba(61, 90, 153, 0.15);
  --glow-copper: rgba(196, 131, 90, 0.12);
}


/* === 1. DEEP EARTH BACKGROUND === */
body {
  background-color: var(--bg) !important;
}


/* === 2. ADIRE CROSS-HATCH BACKGROUND PATTERN === */
.adire-grid {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.04 !important;
  background-image:
    repeating-linear-gradient(
      45deg, transparent, transparent 40px,
      rgba(61, 90, 153, 0.5) 40px,
      rgba(61, 90, 153, 0.5) 41px
    ),
    repeating-linear-gradient(
      -45deg, transparent, transparent 40px,
      rgba(61, 90, 153, 0.5) 40px,
      rgba(61, 90, 153, 0.5) 41px
    ) !important;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%) !important;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%) !important;
}


/* === 3. ULI CONCENTRIC CIRCLES === */
.uli-circles {
  position: fixed !important;
  top: 8% !important;
  right: -3% !important;
  width: 550px !important;
  height: 550px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.05 !important;
}
.uli-circles::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--indigo) !important;
}
.uli-circles::after {
  content: '' !important;
  position: absolute !important;
  inset: 60px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--copper) !important;
}
.uli-inner {
  position: absolute !important;
  inset: 120px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--indigo) !important;
}
.uli-core {
  position: absolute !important;
  inset: 180px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--copper) !important;
}


/* === 4. ADIRE TOP-EDGE BAND ===
   The signature repeating indigo/copper dash on featured cards.
   Overrides ALL old color-specific ::before gradients. */

.stat-card::before,
.stat-card.gold::before,
.stat-card.purple::before,
.stat-card.blue::before,
.stat-card.green::before,
.stat-card.red::before,
.stat-card.orange::before,
.stat-card.cyan::before,
.stat-card:first-child::before,
.stat-card:nth-child(2)::before,
.stat-card:nth-child(3)::before,
.stat-card:nth-child(4)::before,
.stat-card:nth-child(5)::before,
.stat-card:last-child::before,
.stat-card.adire-band::before,
.stat-card.adire-band.photo-bg::before,
.adire-band::before,
.stat-card[class]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: repeating-linear-gradient(
    90deg,
    #3d5a99 0px, #3d5a99 12px,
    transparent 12px, transparent 16px,
    #c4835a 16px, #c4835a 20px,
    transparent 20px, transparent 24px
  ) !important;
  opacity: 0.7 !important;
  z-index: 5 !important;
}


/* === 5. CARD SURFACES === */
.stat-card,
.card,
[class*="content-card"],
[class*="section-card"] {
  background: rgba(10, 12, 24, 0.8) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(8px) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.stat-card:hover,
.card:hover {
  border-color: var(--border-hover) !important;
  box-shadow: 0 4px 30px var(--glow-indigo), inset 0 1px 0 var(--glow-copper) !important;
  transform: translateY(-1px) !important;
}


/* === 6. STAT VALUES — Kill ALL old color classes === */
.stat-card .stat-value,
.stat-card.gold .stat-value,
.stat-card.purple .stat-value,
.stat-card.blue .stat-value,
.stat-card.green .stat-value,
.stat-card.red .stat-value,
.stat-card.orange .stat-value,
.stat-card.cyan .stat-value,
.stat-card[class] .stat-value {
  color: #f5f0e8 !important;
  text-shadow: none !important;
}

/* Revenue card — copper accent (first card only) */
.stat-card:first-child .stat-value {
  color: #c4835a !important;
  text-shadow: 0 0 25px rgba(196, 131, 90, 0.2) !important;
}

/* $50M Roadmap — indigo glow (last visible stat card) */
.stat-card.orange .stat-value,
.stat-card:nth-child(5) .stat-value {
  color: #5b7ec2 !important;
  text-shadow: 0 0 20px rgba(61, 90, 153, 0.2) !important;
}

/* Stat labels — bone dimmed, uppercase */
.stat-card .stat-label,
.stat-card label,
.stat-card small,
.stat-card .label {
  color: var(--bone-dim) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}


/* === 7. SIDEBAR === */
.sidebar,
nav,
[class*="sidebar"] {
  background: rgba(6, 6, 14, 0.95) !important;
  border-right: 1px solid var(--border) !important;
}

/* Group headers — copper */
.sidebar .group-header,
.sidebar [class*="group"],
.sidebar [class*="section"],
.sidebar [class*="label"],
nav .group-header,
nav [class*="group"],
nav [class*="section"],
.sidebar small,
nav small,
.sidebar h4,
nav h4,
.sidebar h5,
nav h5,
.sidebar .nav-section-title,
.nav-group-title {
  color: rgba(196, 131, 90, 0.5) !important;
  letter-spacing: 0.15em !important;
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
}

/* Active nav item — indigo→copper gradient bar */
.nav-item.active,
a.active,
.sidebar .active,
nav .active,
[class*="nav"][class*="active"] {
  background: rgba(61, 90, 153, 0.12) !important;
  position: relative !important;
}

.nav-item.active::after,
.sidebar .active::after,
nav .active::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(to bottom, var(--indigo), var(--copper)) !important;
  border-radius: 0 2px 2px 0 !important;
}

/* Nav hover */
.sidebar a:hover,
nav a:hover {
  background: rgba(61, 90, 153, 0.08) !important;
}


/* === 8. TOPBAR === */
.topbar,
header,
[class*="topbar"] {
  background: rgba(6, 6, 14, 0.9) !important;
  border-bottom: 1px solid rgba(61, 90, 153, 0.1) !important;
  backdrop-filter: blur(12px) !important;
}


/* === 9. LINK CARDS ($50M, Pipeline, Ghost) === */
.link-card,
[class*="link-card"] {
  border: 1px solid var(--border) !important;
  background: rgba(10, 12, 24, 0.75) !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
}

.link-card::before,
[class*="link-card"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: repeating-linear-gradient(
    90deg,
    var(--indigo) 0px, var(--indigo) 12px,
    transparent 12px, transparent 16px,
    var(--copper) 16px, var(--copper) 20px,
    transparent 20px, transparent 24px
  ) !important;
  opacity: 0.5 !important;
  z-index: 2 !important;
}

.link-card:hover,
[class*="link-card"]:hover {
  border-color: var(--border-hover) !important;
  box-shadow: 0 4px 20px var(--glow-copper) !important;
}

.link-card h3,
.link-card .card-title,
[class*="link-card"] h3 {
  color: var(--copper) !important;
}


/* === 10. NSIBIDI DIAMOND DIVIDERS === */
.nsibidi-divider {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 0 !important;
  margin: 8px 0 !important;
}
.nsibidi-line {
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(61, 90, 153, 0.25), transparent) !important;
}
.nsibidi-symbol {
  color: var(--copper) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.4em !important;
  opacity: 0.5 !important;
}


/* === 11. PHOTO BACKGROUNDS === */
.photo-bg {
  position: relative !important;
  overflow: hidden !important;
}
.photo-bg .bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.08 !important;
  filter: saturate(0.5) !important;
  z-index: 0 !important;
}
.photo-bg .content,
.photo-bg > *:not(.bg-img):not(.adire-band)::before {
  position: relative !important;
  z-index: 1 !important;
}


/* === 12. SECTION HEADERS === */
h2, h3, .section-title {
  color: var(--bone) !important;
  letter-spacing: 0.08em !important;
}


/* === 13. TAB BUTTONS (email filter) === */
.tab-btn.active,
[class*="tab"].active {
  background: rgba(61, 90, 153, 0.2) !important;
  border-color: var(--indigo) !important;
  color: var(--bone) !important;
}


/* === 14. AGENTS STATUS BAR === */
.agents-bar,
[class*="agents-bar"] {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: rgba(10, 12, 24, 0.6) !important;
}


/* === 15. CHAT FAB === */
.chat-fab,
[class*="chat-fab"] {
  background: linear-gradient(135deg, var(--indigo), var(--copper)) !important;
  border: none !important;
  box-shadow: 0 4px 15px var(--glow-copper) !important;
}


/* === 16. SCROLLBAR === */
::-webkit-scrollbar {
  width: 6px !important;
}
::-webkit-scrollbar-track {
  background: var(--bg) !important;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--indigo), var(--copper)) !important;
  border-radius: 3px !important;
}


/* === 17. BUTTON REFINEMENTS === */
.btn-primary,
[class*="btn-primary"] {
  background: linear-gradient(135deg, var(--indigo), var(--copper)) !important;
  border: none !important;
  color: var(--bone) !important;
}

.btn-primary:hover,
[class*="btn-primary"]:hover {
  box-shadow: 0 4px 15px var(--glow-copper) !important;
}


/* === 18. EMAIL LIST === */
.email-item:hover,
[class*="email-item"]:hover {
  background: rgba(61, 90, 153, 0.08) !important;
}


/* === 19. NOTIFICATION BELL === */
.notification-bell,
[class*="notification"] .badge {
  color: var(--copper) !important;
}


/* === 20. GLOBAL TRANSITIONS === */
.stat-card,
.link-card,
.card,
a,
button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}


/* === 21. PURGE OLD COLORS ===
   These overrides ensure no old purple/gold leaks through */

/* Old purple #8a5cf6 replacements */
[style*="8a5cf6"] { color: var(--indigo) !important; }
[style*="138, 92, 246"] { color: var(--indigo) !important; }

/* Old gold #f0c674 replacements */
[style*="f0c674"] { color: var(--copper) !important; }
[style*="240, 198, 116"] { color: var(--copper) !important; }


/* === 22. EXPENSE PAGE SPECIFICS === */
.expense-chart canvas,
.chart-container canvas {
  filter: hue-rotate(0deg) !important;
}

/* Invoice Selected button — hide when empty */
.invoice-btn-empty,
[class*="invoice-selected"]:empty {
  display: none !important;
}


/* === 23. PIPELINE STAT CARDS — show 0 not — === */
.stat-card .stat-value:empty::after {
  content: '0' !important;
}


/* === 24. GHOST PAGE — default values === */
.ghost-stat:empty::after,
[class*="ghost-stat"]:empty::after {
  content: '0' !important;
}