/* ==========================================================================
   EGXHUB - "ONYX" identity
   --------------------------------------------------------------------------
   One identity, two modes:
     data-theme="onyx" + data-theme-mode="dark"   obsidian + champagne gold
     data-theme="onyx" + data-theme-mode="light"  pearl + deep bronze

   Design intent: the trading terminal's information density, but on an
   obsidian surface with warm metallic accents instead of neon cyan. Reading
   long analyses or scrolling a full price table stays comfortable in both
   modes because the accent is reserved for structure, never for body text.

   Loaded last so it can override the three base sheets.
   ========================================================================== */

/* ==========================================================================
   1. DARK - obsidian & champagne
   ========================================================================== */
[data-theme="onyx"][data-theme-mode="dark"] {
    /* Sharp, near-square corners: the onyx identity reads utilitarian.
       The responsive layer reads this instead of clamping the radius itself. */
    --card-radius: 10px;
    /* Surfaces: near-black with a warm undertone so gold does not look green */
    --bg-base: #0c0b0a;
    --bg-surface: #151312;
    --bg-card: #1c1a17;
    --bg-card-hover: #25221e;
    --bg-input: #0a0908;
    --bg-glass: rgba(28, 26, 23, 0.86);

    /* Hairlines: warm grey, never pure white */
    --border-color: #302b25;
    --border-highlight: #4a4239;
    --border-glow: rgba(212, 175, 55, 0.28);

    --text-primary: #ede8e0;
    --text-secondary: #a89f92;
    --text-muted: #7a7166;
    --text-highlight: #fffdf8;

    /* Market colours kept legible on black */
    --bullish-green: #3ddc97;
    --bullish-bg: rgba(61, 220, 151, 0.12);
    --bullish-border: rgba(61, 220, 151, 0.32);
    --bullish-glow: 0 0 14px rgba(61, 220, 151, 0.2);

    --bearish-red: #ff6b81;
    --bearish-bg: rgba(255, 107, 129, 0.12);
    --bearish-border: rgba(255, 107, 129, 0.32);
    --bearish-glow: 0 0 14px rgba(255, 107, 129, 0.2);

    /* Champagne identity */
    --gold-accent: #d4af37;
    --gold-bg: rgba(212, 175, 55, 0.12);
    --gold-border: rgba(212, 175, 55, 0.36);
    --gold-glow: 0 0 16px rgba(212, 175, 55, 0.24);

    /* The secondary accent stays cool so charts and links do not all go gold */
    --cyan-accent: #6fb3d2;
    --cyan-bg: rgba(111, 179, 210, 0.12);
    --cyan-border: rgba(111, 179, 210, 0.3);

    --purple-accent: #b39ddb;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.68);
    --shadow-glow: 0 0 26px rgba(212, 175, 55, 0.12);

    /* Softer radii: onyx reads sharper than the default terminal */
    --radius-sm: 5px;
    --radius-md: 9px;
    --radius-lg: 14px;
}

[data-theme="onyx"][data-theme-mode="dark"] body {
    background-color: var(--bg-base);
    background-image:
        radial-gradient(ellipse 70% 40% at 50% -6%, rgba(212, 175, 55, 0.07), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 220px);
    background-attachment: fixed;
}

/* ---------- Ticker ---------- */
[data-theme="onyx"][data-theme-mode="dark"] .ticker-bar-wrapper {
    background: linear-gradient(180deg, #1c1a17, #151312);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="onyx"][data-theme-mode="dark"] .ticker-pulse-label {
    background: transparent;
    color: var(--gold-accent);
    border-left: 1px solid var(--border-color);
}

[data-theme="onyx"][data-theme-mode="dark"] .ticker-item {
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.16);
    border-radius: var(--radius-sm);
}

/* ---------- Navbar ---------- */
[data-theme="onyx"][data-theme-mode="dark"] .main-navbar {
    background: rgba(21, 19, 18, 0.9);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

[data-theme="onyx"][data-theme-mode="dark"] .brand-logo-glow {
    background: linear-gradient(135deg, #6b5518, #d4af37);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.32);
}

[data-theme="onyx"][data-theme-mode="dark"] .brand-title {
    color: var(--text-highlight);
}

[data-theme="onyx"][data-theme-mode="dark"] .nav-item-link:hover,
[data-theme="onyx"][data-theme-mode="dark"] .nav-item-link.active {
    background: rgba(212, 175, 55, 0.09);
}

[data-theme="onyx"][data-theme-mode="dark"] .nav-item-link.active {
    color: var(--gold-accent);
    border-bottom: 2px solid var(--gold-accent);
}

[data-theme="onyx"][data-theme-mode="dark"] .nav-dropdown-menu,
[data-theme="onyx"][data-theme-mode="dark"] .notif-dropdown-menu,
[data-theme="onyx"][data-theme-mode="dark"] .user-menu-dropdown {
    background: rgba(21, 19, 18, 0.98);
    border-color: var(--border-color);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(212, 175, 55, 0.08);
}

[data-theme="onyx"][data-theme-mode="dark"] .user-nav-avatar {
    border-color: var(--gold-accent);
}

/* ---------- Cards ---------- */
[data-theme="onyx"][data-theme-mode="dark"] .terminal-card,
[data-theme="onyx"][data-theme-mode="dark"] .post-creation-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="onyx"][data-theme-mode="dark"] .terminal-card:hover,
[data-theme="onyx"][data-theme-mode="dark"] .post-creation-card:hover {
    border-color: var(--border-highlight);
    box-shadow: var(--shadow-md);
}

/* A champagne hairline along the top edge instead of the neon cyan rule */
[data-theme="onyx"][data-theme-mode="dark"] .terminal-card::before,
[data-theme="onyx"][data-theme-mode="dark"] .post-creation-card::before {
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
}

/* ---------- Buttons ---------- */
[data-theme="onyx"][data-theme-mode="dark"] .btn-primary-glow {
    background: linear-gradient(135deg, #6b5518, #d4af37);
    color: #14110a;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.24);
}

[data-theme="onyx"][data-theme-mode="dark"] .btn-primary-glow:hover {
    box-shadow: 0 6px 22px rgba(212, 175, 55, 0.34);
}

[data-theme="onyx"][data-theme-mode="dark"] .theme-toggle-btn:hover {
    color: var(--gold-accent);
    border-color: var(--gold-border);
}

[data-theme="onyx"][data-theme-mode="dark"] .mobile-bottom-dock {
    background: rgba(21, 19, 18, 0.96);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

/* ==========================================================================
   2. LIGHT - pearl & bronze
   ========================================================================== */
[data-theme="onyx"][data-theme-mode="light"] {
    --card-radius: 10px;
    /* Warm off-white, not grey: keeps the metallic accent from looking dirty */
    --bg-base: #f7f5f1;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #faf8f4;
    --bg-input: #efece6;
    --bg-glass: rgba(255, 255, 255, 0.94);

    --border-color: #e3ded4;
    --border-highlight: #cbc3b4;
    --border-glow: rgba(140, 106, 20, 0.24);

    --text-primary: #211e19;
    --text-secondary: #5f594f;
    --text-muted: #948c7e;
    --text-highlight: #0d0b08;

    --bullish-green: #04795b;
    --bullish-bg: rgba(4, 121, 91, 0.09);
    --bullish-border: rgba(4, 121, 91, 0.3);

    --bearish-red: #c0273b;
    --bearish-bg: rgba(192, 39, 59, 0.08);
    --bearish-border: rgba(192, 39, 59, 0.3);

    /* Deep bronze reads better than bright gold on white */
    --gold-accent: #8c6a14;
    --gold-bg: rgba(140, 106, 20, 0.09);
    --gold-border: rgba(140, 106, 20, 0.32);

    --cyan-accent: #1f6f96;
    --cyan-bg: rgba(31, 111, 150, 0.08);
    --cyan-border: rgba(31, 111, 150, 0.28);

    --purple-accent: #6d28d9;

    --shadow-sm: 0 1px 3px rgba(60, 48, 20, 0.07);
    --shadow-md: 0 5px 16px rgba(60, 48, 20, 0.09);
    --shadow-lg: 0 12px 32px rgba(60, 48, 20, 0.13);
    --shadow-glow: 0 0 22px rgba(140, 106, 20, 0.09);

    --radius-sm: 5px;
    --radius-md: 9px;
    --radius-lg: 14px;
}

[data-theme="onyx"][data-theme-mode="light"] body {
    background-color: var(--bg-base);
    background-image:
        radial-gradient(ellipse 75% 38% at 50% -6%, rgba(212, 175, 55, 0.09), transparent 66%);
    background-attachment: fixed;
}

/* ---------- Ticker ---------- */
[data-theme="onyx"][data-theme-mode="light"] .ticker-bar-wrapper {
    background: linear-gradient(180deg, #ffffff, #faf8f3);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="onyx"][data-theme-mode="light"] .ticker-pulse-label {
    background: transparent;
    color: var(--gold-accent);
    border-left: 1px solid var(--border-color);
}

[data-theme="onyx"][data-theme-mode="light"] .ticker-item {
    background: rgba(140, 106, 20, 0.05);
    border: 1px solid rgba(140, 106, 20, 0.15);
    border-radius: var(--radius-sm);
}

/* ---------- Navbar ---------- */
[data-theme="onyx"][data-theme-mode="light"] .main-navbar {
    background: rgba(255, 255, 255, 0.93);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 14px rgba(60, 48, 20, 0.06);
}

[data-theme="onyx"][data-theme-mode="light"] .brand-logo-glow {
    background: linear-gradient(135deg, #8c6a14, #d4af37);
    box-shadow: 0 0 14px rgba(140, 106, 20, 0.26);
}

[data-theme="onyx"][data-theme-mode="light"] .brand-title {
    color: var(--text-highlight);
}

[data-theme="onyx"][data-theme-mode="light"] .nav-item-link:hover,
[data-theme="onyx"][data-theme-mode="light"] .nav-item-link.active {
    background: var(--gold-bg);
}

[data-theme="onyx"][data-theme-mode="light"] .nav-item-link.active {
    color: var(--gold-accent);
    border-bottom: 2px solid var(--gold-accent);
}

[data-theme="onyx"][data-theme-mode="light"] .nav-dropdown-menu,
[data-theme="onyx"][data-theme-mode="light"] .notif-dropdown-menu,
[data-theme="onyx"][data-theme-mode="light"] .user-menu-dropdown {
    background: rgba(255, 255, 255, 0.99);
    border-color: var(--border-color);
    box-shadow: 0 16px 38px rgba(60, 48, 20, 0.14), 0 0 0 1px rgba(140, 106, 20, 0.08);
}

[data-theme="onyx"][data-theme-mode="light"] .user-nav-avatar {
    border-color: var(--gold-accent);
}

/* ---------- Cards ---------- */
[data-theme="onyx"][data-theme-mode="light"] .terminal-card,
[data-theme="onyx"][data-theme-mode="light"] .post-creation-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="onyx"][data-theme-mode="light"] .terminal-card:hover,
[data-theme="onyx"][data-theme-mode="light"] .post-creation-card:hover {
    border-color: var(--border-highlight);
    box-shadow: var(--shadow-md);
}

[data-theme="onyx"][data-theme-mode="light"] .terminal-card::before,
[data-theme="onyx"][data-theme-mode="light"] .post-creation-card::before {
    background: linear-gradient(90deg, transparent, rgba(140, 106, 20, 0.4), transparent);
}

/* ---------- Buttons ---------- */
[data-theme="onyx"][data-theme-mode="light"] .btn-primary-glow {
    background: linear-gradient(135deg, #8c6a14, #d4af37);
    color: #fffdf8;
    box-shadow: 0 4px 14px rgba(140, 106, 20, 0.22);
}

[data-theme="onyx"][data-theme-mode="light"] .btn-primary-glow:hover {
    box-shadow: 0 6px 20px rgba(140, 106, 20, 0.3);
}

[data-theme="onyx"][data-theme-mode="light"] .theme-toggle-btn:hover {
    color: var(--gold-accent);
    border-color: var(--gold-border);
}

[data-theme="onyx"][data-theme-mode="light"] .mobile-bottom-dock {
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(140, 106, 20, 0.18);
}

/* ==========================================================================
   3. MODE SWITCH TRANSITION
   Scoped to the class applyThemeMode adds, so first paint never animates.
   ========================================================================== */
.theme-switching,
.theme-switching * {
    transition: background-color 0.28s ease, color 0.28s ease,
                border-color 0.28s ease, box-shadow 0.28s ease !important;
}

.theme-switching {
    animation: onyxFade 0.3s ease;
}

@keyframes onyxFade {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-switching,
    .theme-switching * {
        transition: none !important;
    }

    .theme-switching {
        animation: none;
    }
}