/* ============================================================
   REAPER INC. — PURPLE COLOUR OVERRIDES
   Targets inline styles generated by JS template literals
   that still reference old red/bone colour values.
   Load AFTER main.css and layout.css.
   ============================================================ */

/* ── GLOBAL TEXT COLOUR OVERRIDES ──────────────────────────── */
[style*="color:#d4c9a8"],[style*="color: #d4c9a8"] { color: #ffffff !important; }
[style*="color:#8a7d5e"],[style*="color: #8a7d5e"] { color: #94a3b8 !important; }
[style*="color:#c4b898"],[style*="color: #c4b898"] { color: #c4c8d0 !important; }
[style*="color:#cc0000"],[style*="color: #cc0000"] { color: #a855f7 !important; }
[style*="color:#8b0000"],[style*="color: #8b0000"] { color: #6b21a8 !important; }
[style*="color:#8B0000"],[style*="color: #8B0000"] { color: #6b21a8 !important; }
[style*="color:#CC0000"],[style*="color: #CC0000"] { color: #a855f7 !important; }

/* ── BORDER COLOUR OVERRIDES ────────────────────────────────── */
[style*="border-bottom:2px solid #cc0000"] { border-bottom-color: #a855f7 !important; }
[style*="border-bottom-color:#cc0000"]     { border-bottom-color: #a855f7 !important; }
[style*="border-left:2px solid #cc0000"]   { border-left-color: #a855f7 !important; }
[style*="border-left-color:#cc0000"]       { border-left-color: #a855f7 !important; }
[style*="border-color:#cc0000"]            { border-color: #a855f7 !important; }
[style*="border-color:#8b0000"]            { border-color: #6b21a8 !important; }

/* ── BACKGROUND OVERRIDES ───────────────────────────────────── */
[style*="background:rgba(139,0,0"] { background: rgba(107,33,168,.15) !important; }
[style*="background:rgba(204,0,0"] { background: rgba(168,85,247,.15) !important; }
[style*="background:#8b0000"]      { background: #6b21a8 !important; }
[style*="background:#cc0000"]      { background: #a855f7 !important; }

/* ── BOX SHADOW GLOW OVERRIDES ──────────────────────────────── */
[style*="box-shadow:0 0 20px rgba(204,0,0"] { box-shadow: 0 0 20px rgba(168,85,247,.5) !important; }
[style*="box-shadow:0 0 30px rgba(204,0,0"] { box-shadow: 0 0 30px rgba(168,85,247,.5) !important; }
[style*="box-shadow:0 0 40px rgba(139,0,0"] { box-shadow: 0 0 40px rgba(107,33,168,.4) !important; }

/* ── COMPONENT SPECIFICS ────────────────────────────────────── */
#feed-compose-avatar  { border-color: rgba(107,33,168,.3) !important; color: #6b21a8 !important; }
#feed-compose-text    { color: #ffffff !important; }
#user-bar-avatar      { border-color: rgba(107,33,168,.3) !important; }
.logo-sub             { color: #a855f7 !important; }
.notif-badge          { background: #6b21a8 !important; }
.rp-stat-val          { color: #a855f7 !important; }
.nav-item.active      { border-left-color: #a855f7 !important; background: rgba(107,33,168,.08) !important; }
::-webkit-scrollbar-thumb { background: #6b21a8 !important; }

/* ── SECTION LABELS (secondary text) ───────────────────────── */
[style*="color:#8a7d5e"][style*="letter-spacing"] { color: #94a3b8 !important; }
[style*="color:#8a7d5e"][style*="font-family"]    { color: #94a3b8 !important; }

/* ── RANK COLOURS (Orbitron font labels) ────────────────────── */
[style*="color:#cc0000"][style*="Orbitron"]       { color: #a855f7 !important; }
[style*="color:#cc0000"][style*="letter-spacing"] { color: #a855f7 !important; }

/* ── NAV ITEMS — steel icons, white labels, better readability ── */
.nav-item {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  color: #9199a6 !important;
  font-weight: 500 !important;
  border-left: 2px solid transparent;
}
.nav-item:hover { color: #e2e6ea !important; background: rgba(196,200,208,.05) !important; }
.nav-item.active { color: #ffffff !important; border-left-color: #a855f7 !important; background: rgba(107,33,168,.08) !important; }
.nav-icon { color: #6b7280; font-size: 14px !important; transition: color .15s; }
.nav-item:hover .nav-icon { color: #e2e6ea !important; }
.nav-item.active .nav-icon { color: #a855f7 !important; }
.nav-label { color: inherit; }

/* ── NAV SECTION LABELS — slightly brighter ── */
.nav-section-label { color: #555e6b !important; letter-spacing: 3px; font-size: 9px; }

/* ── SIDEBAR LOGO ── */
.logo-name { color: #ffffff !important; }
.logo-sub  { color: #a855f7 !important; }
#sidebar-logo { border-bottom-color: rgba(107,33,168,.15) !important; }
#sidebar-logo:hover { background: rgba(107,33,168,.06) !important; }
#sidebar-logo-img { border-color: rgba(107,33,168,.5) !important; }
#sidebar-collapse-btn { background: rgba(107,33,168,.15) !important; border-color: rgba(107,33,168,.2) !important; color: #6b21a8 !important; }
#sidebar-collapse-btn:hover { background: rgba(107,33,168,.3) !important; color: #a855f7 !important; }
#sidebar { border-right-color: rgba(168,85,247,.12) !important; }

/* ── TOPBAR ── */
#topbar { border-bottom-color: rgba(168,85,247,.15) !important; }
#topbar-title { color: #ffffff !important; }
#mobile-menu-btn { border-color: rgba(107,33,168,.3) !important; color: #94a3b8 !important; }
#mobile-menu-btn:hover { border-color: #a855f7 !important; color: #ffffff !important; }
#topbar-right-toggle:hover { border-color: rgba(107,33,168,.3) !important; color: #94a3b8 !important; }
#topbar-right-toggle.active { border-color: rgba(107,33,168,.4) !important; color: #a855f7 !important; }
#topbar-notif-btn:hover { border-color: rgba(107,33,168,.3) !important; color: #a855f7 !important; }
#topbar-notif-btn.active { border-color: rgba(107,33,168,.5) !important; color: #a855f7 !important; }
.notif-badge { background: #6b21a8 !important; }

/* ── MARQUEE ── */
#marquee-bar { border-bottom-color: rgba(107,33,168,.15) !important; }
.marquee-text { color: #94a3b8 !important; }
.marquee-sep  { color: rgba(107,33,168,.4) !important; }

/* ── ANTHEM PLAYER ── */
#anthem-player { border-left-color: rgba(107,33,168,.15) !important; }
#anthem-play-btn { background: rgba(107,33,168,.25) !important; border-color: rgba(107,33,168,.4) !important; color: #a855f7 !important; }
#anthem-play-btn:hover { background: rgba(107,33,168,.45) !important; color: #fff !important; }
#anthem-sub { color: #6b21a8 !important; }
#anthem-progress-bar { background: linear-gradient(90deg,#6b21a8,#a855f7) !important; }
#anthem-vol { accent-color: #6b21a8 !important; }
#anthem-close-btn:hover { color: #a855f7 !important; }
#anthem-title { color: #ffffff !important; }
#anthem-mute-btn:hover, #anthem-repeat-btn:hover { color: #ffffff !important; }

/* ── RIGHT PANEL ── */
#right-panel { border-left-color: rgba(168,85,247,.12) !important; }
#rp-morticia { border-top-color: rgba(168,85,247,.15) !important; }
#rp-morticia-name { color: #ffffff !important; }
.rp-divider { background: rgba(107,33,168,.12) !important; }
.rp-stat-val { color: #a855f7 !important; }

/* ── USER BAR ── */
#user-bar { border-top-color: rgba(168,85,247,.12) !important; }
#user-bar-name { color: #ffffff !important; }
#user-bar-rank { color: #6b21a8 !important; }
#user-bar-avatar { border-color: rgba(107,33,168,.3) !important; color: #6b21a8 !important; }
#user-bar-avatar:hover { border-color: #a855f7 !important; }
#user-bar-actions button:hover { border-color: rgba(107,33,168,.3) !important; color: #a855f7 !important; }

/* ── SCROLLBAR ── */
#main-content { scrollbar-color: #6b21a8 #000 !important; }
#main-content::-webkit-scrollbar-thumb { background: #6b21a8 !important; }


/* ── GOLD → WHITE/CHROME (remove yellow from UI text) ───────── */
[style*="color:#c9a84c"],[style*="color: #c9a84c"] { color: #c4c8d0 !important; }
[style*="color:#8b6914"],[style*="color: #8b6914"] { color: #94a3b8 !important; }
[style*="color:#f59e0b"],[style*="color: #f59e0b"] { color: #c4c8d0 !important; }
/* Keep gold on Founder badge specifically */
.badge-founder { color: #c9a84c !important; border-color: #c9a84c !important; }

/* ── FINAL SWEEP — catch-all for any remaining reds/bones/golds ── */

/* Any element with red rgba background */
[style*="rgba(139,0,0"] { 
  background-color: transparent !important; 
}
[style*="rgba(204,0,0"] { 
  background-color: transparent !important; 
}

/* Radial gradient backgrounds with red — replace with purple */
[style*="radial-gradient"][style*="rgba(139,0,0"] {
  background: radial-gradient(ellipse at 30% 50%, rgba(107,33,168,.12) 0%, transparent 70%) !important;
}
[style*="radial-gradient"][style*="rgba(201,168,76"] {
  background: radial-gradient(ellipse at 30% 50%, rgba(107,33,168,.08) 0%, transparent 70%) !important;
}

/* Grid line overlays with red */
[style*="linear-gradient(rgba(139,0,0"] {
  background-image: none !important;
}

/* Any border with red rgba */
[style*="border:1px solid rgba(139,0,0"],
[style*="border: 1px solid rgba(139,0,0"] {
  border-color: rgba(107,33,168,.3) !important;
}
[style*="border:2px solid rgba(139,0,0"],
[style*="border: 2px solid rgba(139,0,0"] {
  border-color: rgba(107,33,168,.5) !important;
}
[style*="border-color:rgba(204,0,0"] {
  border-color: rgba(168,85,247,.4) !important;
}

/* Gold accent borders */
[style*="border:1px solid rgba(201,168,76"] {
  border-color: rgba(107,33,168,.3) !important;
}

/* Ensure all input/select text is readable */
input, select, textarea { color: #ffffff !important; }
input::placeholder, textarea::placeholder { color: #4b5563 !important; }
select option { background: #0a0a0a; color: #ffffff; }

/* ── LOADING SPINNER — override any remaining red ── */
.loading-spinner-wrap div:first-child {
  border-top-color: #a855f7 !important;
  border-color: #1a1a1a #1a1a1a #1a1a1a #a855f7 !important;
}

/* ── COLLAPSIBLE NAV GROUPS ───────────────────────────────── */
.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 6px;
  cursor: pointer;
  transition: background .15s;
  border-left: 2px solid transparent;
  margin-top: 8px;
}
.nav-group-header:hover {
  background: rgba(196,200,208,.03);
}
.nav-group-header:hover .nav-section-label {
  color: #555 !important;
}
.nav-group-header.open {
  border-left-color: rgba(168,85,247,.3);
}
.nav-group-header.open .nav-section-label {
  color: #4a4d54 !important;
}

/* Arrow rotates when open */
.nav-group-arrow {
  font-size: 14px;
  color: #333;
  transition: transform .2s ease, color .15s;
  display: inline-block;
  flex-shrink: 0;
  font-family: sans-serif;
}
.nav-group-header.open .nav-group-arrow {
  transform: rotate(90deg);
  color: #6b21a8;
}

/* Group container — collapses smoothly */
.nav-group {
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease;
}
.nav-group.open {
  max-height: 300px;
}

/* Slightly indent group items */
.nav-group .nav-item {
  padding-left: 22px;
}

/* Collapsed sidebar — hide arrows, show groups open */
#sidebar.collapsed .nav-group-header { display: none; }
#sidebar.collapsed .nav-group {
  max-height: 300px !important;
  overflow: visible;
}
#sidebar.collapsed .nav-group .nav-item {
  padding-left: 10px;
}

/* ── FINAL GLOBAL CATCH-ALL ──────────────────────────────────
   Catches any remaining hardcoded reds/bones in pages we
   haven't manually fixed yet (koa, divisions, about, contact)
   ─────────────────────────────────────────────────────────── */

/* All remaining bone/ash text colours */
[style*="color:#d4c9a8"] { color: #ffffff !important; }
[style*="color:#8a7d5e"] { color: #94a3b8 !important; }
[style*="color:#c4b898"] { color: #c4c8d0 !important; }
[style*="color:#8b6914"] { color: #94a3b8 !important; }

/* All remaining red hex colours */
[style*="color:#cc0000"] { color: #a855f7 !important; }
[style*="color:#8b0000"] { color: #6b21a8 !important; }
[style*="color:#ff4500"] { color: #c084fc !important; }

/* Radial gradient backgrounds with red */
[style*="radial-gradient"][style*="rgba(139,0,0"] {
  background: radial-gradient(ellipse at 30% 50%, rgba(107,33,168,.1), transparent 70%) !important;
}

/* Red borders */
[style*="border-color:#8b0000"] { border-color: rgba(107,33,168,.3) !important; }
[style*="border-color:#cc0000"] { border-color: rgba(168,85,247,.4) !important; }
[style*="border:1px solid #1a0000"] { border-color: rgba(107,33,168,.15) !important; }

/* Hover states set via onmouseenter that we can't easily target —
   override the base colour so the default state is always purple */
.section-eyebrow { color: #6b21a8 !important; }