/* ─────────────────────────────────────────────────────────────────────────
   tdpro-theme.css — Re-maps the operator cockpit to the TD Pro design system.

   HOW IT WORKS
   ────────────
   The cockpit already drives every surface through CSS custom properties
   defined in tokens.css, styles.css, and polish-2026.css.  This file
   re-points those variables to the TD Pro palette extracted from
   frontend/agents/agents-base.css.  No class names, IDs, or page logic
   are touched — purely a token remap layered on top of the existing stack.

   LOAD ORDER (from _base.html):
     1. tokens.css          ← base token definitions
     2. components.css      ← a11y, animations, modal patterns
     3. styles.css          ← legacy cockpit rules (reads the tokens)
     4. tdp-polish.css      ← TD Pro utilities (.tdp-card, badges, etc.)
     5. polish-2026.css     ← Linear-style visual refresh
     6. tdpro-theme.css     ← THIS FILE — final override, highest specificity

   TOKEN MAPPING  (old cockpit → TD Pro agents-base.css)
   ──────────────────────────────────────────────────────
   --bg-primary (#0a1430)               → --bg-base:  #0a1430  (≈ same depth, slight blue tint)
   --bg-secondary (#101d3d)             → --bg-card:  #101d3d
   --bg-tertiary (rgba(30,41,59,0.6))   → --bg-card-2: #14244a  (opaque equivalent)
   --card-bg (glass gradient)           → linear-gradient(180deg, rgba(15,22,51,0.7), rgba(13,18,48,0.6))
   --card-bg-elevated                   → linear-gradient(180deg, rgba(15,22,51,0.9), rgba(13,18,48,0.8))
   --border-color (slate 0.14)          → --border: rgba(63,123,255,0.18)   ← indigo tinted
   --border-color-strong (slate 0.25)   → --border-strong: rgba(63,123,255,0.32)
   --border-color-soft (slate 0.08)     → --border-faint: rgba(148,163,184,0.10)
   --text-primary (#f2f6ff)             → --text: #e9f0fb
   --text-secondary (#c3d0e8)           → #c3d0e8  (same)
   --text-muted (#9fb0cf)               → --text-muted: #9fb0cf  (same)
   --text-faint (#6b7a99)               → --text-dim: #6b7a99   (same)
   --primary-color (#3f7bff)            → --blue-2: #3f7bff  (same)
   --accent-color (#e8b54d)             → --amber-2: #e8b54d  (same)
   --accent-hot (#f0c674)               → --amber: #f0c674   (same)
   --success-color (#10b981)            → --green: #10b981   (same)
   --success-bright (#34d399)           → --green-bright: #34d399
   --danger-color (#ef5d60)             → --red: #ef5d60     (same)
   --danger-bright (#f47174)            → --red-bright: #f47174
   --purple-color (#5b8def)             → --purple: #6f9bff  (TD Pro slightly lighter)
   --font-display / --font-body         → "Space Grotesk"
   --font-mono                          → "JetBrains Mono"

   p2026 overlay tokens:
   --p2026-bg (#0a1430)                 → #070e20  (TD Pro --bg-page)
   --p2026-card (rgba white 0.025)      → rgba(15,22,51,0.55)  (TD Pro card tint)
   --p2026-card-border (rgba white 0.08)→ rgba(63,123,255,0.18) (indigo border)
   --p2026-card-strong (rgba white 0.16)→ rgba(63,123,255,0.32)
   --p2026-primary (#5e6ad2)            → #3f7bff  (TD Pro indigo-2, close to agents accent)
   --p2026-text (#e9f0fb)               → #e9f0fb  (TD Pro --text)
   --p2026-text-muted (#8a8f98)         → #9fb0cf
   --p2026-text-faint (#62666d)         → #6b7a99
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 1. FONT IMPORT (Space Grotesk + JetBrains Mono) ─────────────────── */
/* Loaded via <link> in _base.html; kept here as fallback comment reference. */
/* @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); */


/* ── 2. GLOBAL PAGE BACKGROUND ───────────────────────────────────────── */
/*  Replace the styles.css / polish-2026.css html background with the
    TD Pro deep-navy dot grid + indigo top glow. */
html {
    background:
        radial-gradient(circle, rgba(63, 123, 255, 0.07) 1px, transparent 1px),
        radial-gradient(ellipse 110% 45% at 50% 0%, rgba(63, 123, 255, 0.10) 0%, transparent 65%),
        linear-gradient(160deg, #070e20 0%, #0a1430 40%, #070e20 100%);
    background-size: 28px 28px, 100% 100%, 100% 100%;
    background-attachment: fixed;
    background-color: #070e20;
}

body {
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: #e9f0fb;
    background: transparent;
    -webkit-font-smoothing: antialiased;
}


/* ── 3. CORE TOKEN RE-MAP ─────────────────────────────────────────────── */
/*  Override every variable that existing rules consume.  Variables that
    have the same value in both systems are listed but their redeclaration
    is still useful as it ensures future edits to tokens.css don't silently
    diverge from the TD Pro palette. */
:root {

    /* ── Fonts ──────────────────────────────────────────────────── */
    --font-display:    var(--mg-font-display);
    --font-body:       var(--mg-font-display);
    --font-mono:       var(--mg-font-mono);

    /* Legacy aliases consumed by tdp-polish.css */
    --tdp-font-display: var(--font-display);
    --tdp-font-mono:    var(--font-mono);

    /* ── Backgrounds / surfaces ─────────────────────────────────── */
    --bg-primary:       var(--mg-bg);               /* was #0a1430  → TD Pro --bg-base */
    --bg-secondary:     var(--mg-surface);               /* was #101d3d  → TD Pro --bg-card */
    --bg-tertiary:      rgba(19, 26, 61, 0.7); /* was rgba(30,41,59,0.6) → TD Pro --bg-card-2 tinted */
    --bg-overlay:       rgba(4, 6, 16, 0.78);  /* slightly deeper to match TD Pro modal dims */

    /* Card surfaces — match the TD Pro .card gradient from agents-base.css */
    --card-bg:         linear-gradient(180deg, rgba(15,22,51,0.70), rgba(13,18,48,0.60));
    --card-bg-elevated: linear-gradient(180deg, rgba(15,22,51,0.92), rgba(13,18,48,0.82));

    /* ── Borders ─────────────────────────────────────────────────── */
    --border-color:        rgba(63, 123, 255, 0.18);   /* was slate 0.14 → TD Pro indigo tint */
    --border-color-strong: rgba(63, 123, 255, 0.32);   /* was slate 0.25 → TD Pro --border-strong */
    --border-color-soft:   rgba(148, 163, 184, 0.10);  /* was slate 0.08 → TD Pro --border-faint */

    /* ── Text ────────────────────────────────────────────────────── */
    --text-primary:    var(--mg-text);   /* was #f2f6ff → TD Pro --text (slightly warmer) */
    --text-secondary:  #c3d0e8;   /* unchanged */
    --text-muted:      var(--mg-text-muted);   /* unchanged */
    --text-faint:      var(--mg-text-dim);   /* unchanged */
    --text-disabled:   var(--mg-text-faint);   /* unchanged */

    /* ── Brand / accent ─────────────────────────────────────────── */
    --primary-color:   var(--mg-blue);   /* unchanged (TD Pro --blue-2) */
    --primary-dark:    var(--mg-blue-dim);   /* unchanged */
    --primary-soft:    rgba(63, 123, 255, 0.14);  /* up from 0.12 — matches TD Pro --blue-soft */
    --primary-glow:    rgba(63, 123, 255, 0.25);  /* unchanged */

    --accent-color:    var(--mg-gold);   /* unchanged (TD Pro --amber-2) */
    --accent-hot:      #f0c674;   /* unchanged (TD Pro --amber) */
    --accent-soft:     rgba(232, 181, 77, 0.14);  /* up from 0.12 */
    --accent-glow:     rgba(232, 181, 77, 0.25);  /* unchanged */

    /* ── Semantic status ─────────────────────────────────────────── */
    --success-color:   var(--mg-green-base);   /* TD Pro --green — unchanged */
    --success-soft:    rgba(16, 185, 129, 0.14);
    --success-bright:  var(--mg-green);   /* TD Pro --green-bright — unchanged */

    --danger-color:    var(--mg-red-base);   /* TD Pro --red — unchanged */
    --danger-soft:     rgba(239, 68, 68, 0.14);
    --danger-bright:   var(--mg-red);   /* TD Pro --red-bright — unchanged */

    --warning-color:   var(--mg-gold);
    --warning-soft:    rgba(232, 181, 77, 0.14);
    --warning-bright:  #f0c674;

    --info-color:      var(--mg-blue-hi);   /* TD Pro --blue */
    --info-soft:       rgba(111, 155, 255, 0.14);

    --purple-color:    var(--mg-blue-hi);   /* was #5b8def → TD Pro --purple (slightly lighter/violet) */
    --purple-soft:     rgba(167, 139, 250, 0.14);

    /* ── TD Pro aliases kept consistent ─────────────────────────── */
    --tdp-accent:        var(--accent-color);
    --tdp-accent-hot:    var(--accent-hot);
    --tdp-accent-glow:   var(--accent-glow);
    --tdp-accent-soft:   rgba(232, 181, 77, 0.06);

    --tdp-card-bg:       rgba(15, 22, 51, 0.60);    /* was rgba(17,22,51,0.6) */
    --tdp-card-border:   var(--mg-border);  /* was rgba(63,123,255,0.15) → indigo */
    --tdp-card-divider:  rgba(63, 123, 255, 0.10);  /* was rgba(63,123,255,0.10) → indigo */
    --tdp-card-elevate:  rgba(15, 22, 51, 0.80);

    --tdp-bull:          var(--success-color);
    --tdp-bear:          var(--danger-color);
    --tdp-info:          var(--info-color);
    --tdp-purple:        var(--purple-color);

    --tdp-text-strong:   var(--mg-text);     /* was #f1f5f9 → TD Pro --text */
    --tdp-text:          var(--text-secondary);
    --tdp-text-mute:     var(--text-muted);
    --tdp-text-faint:    var(--text-disabled);

    /* ── Radii (keep existing; TD Pro uses same 10/14px pattern) ── */
    --radius-sm:   6px;
    --radius-md:   10px;   /* matches TD Pro --radius */
    --radius-lg:   14px;   /* matches TD Pro --radius-lg */

    /* ── Focus ring — amber matches TD Pro accent ─────────────────── */
    --ring-color:  var(--accent-color);
    --ring-soft:   rgba(232, 181, 77, 0.28);
}


/* ── 4. POLISH-2026 OVERLAY VARIABLE RE-MAP ──────────────────────────── */
/*  polish-2026.css declares its own --p2026-* variables and several
    component rules that refer to them.  Override here so every
    .section-nav, .metric-card, .filter-btn etc. picks up TD Pro values. */
:root {
    --p2026-primary:        var(--mg-blue);                      /* TD Pro --indigo-2 */
    --p2026-primary-hover:  var(--mg-blue-hi);                      /* TD Pro --indigo */
    --p2026-primary-soft:   rgba(63, 123, 255, 0.14);
    --p2026-primary-glow:   rgba(63, 123, 255, 0.22);

    --p2026-bg:             var(--mg-bg);                      /* TD Pro --bg-page */
    --p2026-card:           rgba(15, 22, 51, 0.55);       /* was rgba(255,255,255,0.025) */
    --p2026-card-border:    var(--mg-border);     /* indigo instead of white */
    --p2026-card-strong:    var(--mg-border-strong);
    --p2026-input:          rgba(8, 12, 33, 0.60);        /* TD Pro --bg-input approx */
    --p2026-input-hover:    rgba(8, 12, 33, 0.80);

    --p2026-text:           var(--mg-text);   /* TD Pro --text */
    --p2026-text-muted:     var(--mg-text-muted);   /* TD Pro --text-muted */
    --p2026-text-faint:     var(--mg-text-dim);   /* TD Pro --text-dim */
}


/* ── 5. SCROLLBAR (TD Pro indigo tint) ──────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(63, 123, 255, 0.18);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(63, 123, 255, 0.32); }


/* ── 6. HEADER — match TD Pro app-header style ───────────────────────── */
.dashboard-header {
    background: linear-gradient(180deg, rgba(6, 8, 24, 0.96) 0%, rgba(10, 14, 31, 0.94) 100%);
    border: 1px solid rgba(63, 123, 255, 0.18);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Remove the white glow inset from polish-2026 */
    box-shadow: none;
}

.dashboard-header h1 {
    color: #e9f0fb;
    -webkit-text-fill-color: #e9f0fb;
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
}

.header-subtitle {
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    color: #9fb0cf;
    font-size: 11px;
    letter-spacing: 0.08em;
    font-weight: 600;
}


/* ── 7. SECTION NAV — TD Pro tab-nav style ───────────────────────────── */
/*  Swap the Linear pill look for a subtle dark-glass nav bar with
    an indigo underline on the active item. */
.section-nav {
    background: linear-gradient(180deg, rgba(6, 8, 24, 0.96), rgba(10, 14, 31, 0.94));
    border: 1px solid rgba(63, 123, 255, 0.14);
    border-radius: 10px;
    /* No backdrop-filter on the bar itself: it creates a stacking/compositing
       context that can clip the absolutely-positioned dropdown panels. The bar
       background is near-opaque so blur added nothing visible anyway. */
    padding: 2px 8px;
    gap: 4px;
    /* overflow-x: auto in styles.css would clip absolutely-positioned dropdown
       panels.  Override to visible so the panels can escape the nav bounds. */
    overflow: visible;
    /* Wrap to a second row instead of spilling past the rounded bar (or
       clipping) when the admin nav carries many groups on narrower screens. */
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
    /* Lift the nav stacking context so dropdown panels float above page content.
       Must stay below .dashboard-header (z-index: 100). */
    position: sticky;
    z-index: 50;
}

/* Marketplace-style underline tabs: transparent, dim text, blue underline when
   active — mirrors .nav-tab in agents/agents-base.css. */
.section-nav-link {
    color: #9fb0cf;
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    letter-spacing: 0;
    transition: color 0.15s, border-color 0.15s;
}

/* Remove per-group color tints — handled uniformly below */
.section-nav-link.nav-group-analyst,
.section-nav-link.nav-group-core,
.section-nav-link.nav-group-bots,
.section-nav-link.nav-group-tools {
    color: #6b7a99;
}

.section-nav-link:hover {
    color: #e9f0fb;
}

/* Active: blue underline + blue text, no pill fill — mirrors .nav-tab.active */
.section-nav-link.is-active,
.section-nav-link.active {
    background: transparent;
    border-bottom-color: #6f9bff;
    color: #c7d2fe !important;   /* indigo — readable on dark */
}

.section-nav-link.is-active:hover,
.section-nav-link.active:hover {
    color: #e0e7ff !important;
}

/* Divider between nav groups */
.section-nav-divider {
    background: rgba(63, 123, 255, 0.18);
}


/* ── 7b. GROUPED DROPDOWN NAV ────────────────────────────────────────── */
/*  Replaces the old flat link list with per-group dropdown menus.
    The .section-nav container stays the same; each group becomes a
    .nav-dropdown wrapper containing a trigger <button> and a panel <div>.  */

/* Wrapper — establishes the positioning context for the panel */
.nav-dropdown {
    position: relative;
    display: inline-flex;
}

/* Invisible hover bridge spanning the gap between the trigger and the panel.
   Without it, the cursor crossing the gap loses :hover and the menu flickers
   shut — the "nav getting cut up on hover" bug. Rendered only while the menu is
   open so it never intercepts clicks elsewhere. Overhangs ±24px to also catch
   diagonal cursor paths toward the wider panel. */
.nav-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -24px;
    right: -24px;
    height: 12px;
    display: none;
}
.nav-dropdown:hover::after,
.nav-dropdown[data-open]::after,
.nav-dropdown:focus-within::after {
    display: block;
}

/* Trigger button inherits .section-nav-link so it already has the right
   font, size, padding, hover, and is-active styles from above. */
.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    /* Inherit the section-nav-link font stack */
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 0;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    color: #9fb0cf;
}

.nav-dropdown-trigger:hover {
    color: #e9f0fb;
}

.nav-dropdown-trigger.is-active {
    background: transparent;
    border-bottom-color: #6f9bff;
    color: #c7d2fe;
}

.nav-dropdown-trigger.is-active:hover {
    color: #e0e7ff;
}

/* Open/hovered group reads as selected via a soft underline. */
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown[data-open] .nav-dropdown-trigger {
    color: #e9f0fb;
    border-bottom-color: rgba(129, 140, 248, 0.55);
}

/* Small caret — rotates when open */
.nav-dropdown-arrow {
    font-size: 9px;
    line-height: 1;
    opacity: 0.6;
    transition: transform 0.15s;
    display: inline-block;
    /* Slight optical alignment nudge */
    margin-top: 1px;
}

.nav-dropdown[data-open] .nav-dropdown-arrow,
.nav-dropdown:focus-within .nav-dropdown-arrow {
    transform: rotate(180deg);
}

/* Panel — hidden by default, shown when data-open is set or on hover */
.nav-dropdown-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    /* Left-aligned under the trigger (not centered): centered panels overhang
       neighbouring triggers and visually collide when two are open. */
    left: 0;
    min-width: 180px;
    background: linear-gradient(180deg, rgba(10, 14, 40, 0.98), rgba(8, 11, 30, 0.98));
    border: 1px solid rgba(63, 123, 255, 0.28);
    border-radius: 10px;
    padding: 4px;
    z-index: 300;
    box-shadow:
        0 8px 32px rgba(2, 6, 23, 0.60),
        0 2px 8px rgba(2, 6, 23, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    /* Subtle fade-in */
    animation: navPanelIn 0.12s ease-out both;
}

@keyframes navPanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Show on hover (desktop) OR when data-open attribute is present (JS toggle) */
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown[data-open] .nav-dropdown-panel {
    display: block;
}

/* Items inside the panel */
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 7px;
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: #9fb0cf;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.nav-dropdown-item:hover {
    background: rgba(63, 123, 255, 0.10);
    color: #e9f0fb;
    border-color: transparent;
}

.nav-dropdown-item.is-active {
    background: rgba(63, 123, 255, 0.16);
    border-color: rgba(63, 123, 255, 0.30);
    color: #a5b4fc;
}

.nav-dropdown-item.is-active:hover {
    background: rgba(63, 123, 255, 0.22);
    color: #c7d2fe;
}

.nav-dropdown-item .nav-icon {
    font-size: 14px;
    opacity: 0.85;
    flex-shrink: 0;
}

/* Keep panel edge away from viewport edges on narrow screens */
@media (max-width: 600px) {
    .nav-dropdown-panel {
        left: 0;
        right: auto;
        transform: none;
    }
    @keyframes navPanelIn {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* Keyboard-open state: aria-expanded="true" on the trigger means
   the JS has toggled data-open on the wrapper, which already shows
   the panel via .nav-dropdown[data-open] above. This rule is a
   belt-and-suspenders fallback for any AT that relies on aria-expanded
   without the data attribute. The :has() approach handles it cleanly
   in modern browsers; the data-open mechanism is the primary path. */
.nav-dropdown:has(.nav-dropdown-trigger[aria-expanded="true"]) .nav-dropdown-panel {
    display: block;
}


/* ── 8. METRIC / STAT CARDS ──────────────────────────────────────────── */
.metric-card {
    background: linear-gradient(180deg, rgba(15,22,51,0.70), rgba(13,18,48,0.60));
    border: 1px solid rgba(63, 123, 255, 0.18);
    border-radius: 12px;
    /* Remove the white inset glow */
    box-shadow: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.metric-card:hover {
    background: rgba(15, 22, 51, 0.80) !important;
    border-color: rgba(63, 123, 255, 0.35) !important;
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.40) !important;
    transform: none;
}

.metric-card.primary {
    background: linear-gradient(135deg, rgba(63, 123, 255, 0.18), rgba(63, 123, 255, 0.06));
    border-color: rgba(63, 123, 255, 0.40);
}


/* ── 9. PANELS / SECTION PANELS ──────────────────────────────────────── */
.panel,
.section-panel {
    background: linear-gradient(180deg, rgba(15,22,51,0.70), rgba(13,18,48,0.60));
    border: 1px solid rgba(63, 123, 255, 0.18);
    border-radius: 12px;
    box-shadow: none;
}

/* Wheel-page section wrappers (#section-pnl etc.) */
#section-pnl,
#section-active,
#section-stocks,
#section-expiration,
#section-intel {
    background: linear-gradient(180deg, rgba(15,22,51,0.70), rgba(13,18,48,0.60));
    border: 1px solid rgba(63, 123, 255, 0.18);
    border-radius: 12px;
    box-shadow: none;
}


/* ── 10. TDP CARD ────────────────────────────────────────────────────── */
.tdp-card {
    background: linear-gradient(180deg, rgba(15,22,51,0.70), rgba(13,18,48,0.60));
    border-color: rgba(63, 123, 255, 0.18);
    border-radius: 14px;
}
.tdp-card:hover {
    border-color: rgba(63, 123, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(63,123,255,0.08), 0 12px 32px rgba(2,6,23,0.55);
}


/* ── 11. BUTTONS ─────────────────────────────────────────────────────── */
/*  Primary button: switch from Linear indigo to TD Pro blue-2 fill. */
.btn-primary {
    background: #3f7bff;
    border-color: #3f7bff;
    color: #ffffff;
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-weight: 700;
}
.btn-primary:hover:not(:disabled) {
    background: #2f63e0;
    border-color: #2f63e0;
    box-shadow: 0 4px 14px -4px rgba(63,123,255,0.45);
    transform: none;
}

.btn-secondary {
    background: rgba(8, 12, 33, 0.60);
    border-color: rgba(63, 123, 255, 0.18);
    color: #9fb0cf;
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-weight: 600;
}
.btn-secondary:hover:not(:disabled) {
    background: rgba(63, 123, 255, 0.10);
    border-color: rgba(63, 123, 255, 0.35);
    color: #e9f0fb;
}

.btn-icon {
    background: rgba(8, 12, 33, 0.60);
    border-color: rgba(63, 123, 255, 0.18);
    color: #9fb0cf;
}
.btn-icon:hover {
    background: rgba(63, 123, 255, 0.10);
    border-color: rgba(63, 123, 255, 0.32);
    color: #e9f0fb;
}

/* Badge inside secondary button */
.btn-secondary .badge,
#connCount {
    background: rgba(63, 123, 255, 0.18);
    color: #a5b4fc;
    border: 1px solid rgba(63, 123, 255, 0.28);
}

/* Filter pill buttons */
.filter-btn {
    color: #6b7a99;
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-weight: 600;
}
.filter-btn:hover {
    background: rgba(63, 123, 255, 0.10);
    color: #e9f0fb;
}
.filter-btn.active {
    background: #3f7bff;
    border-color: #3f7bff;
    color: #ffffff;
}


/* ── 12. USER MENU ───────────────────────────────────────────────────── */
.user-menu {
    background: rgba(8, 12, 33, 0.60);
    border-color: rgba(63, 123, 255, 0.18);
}
.user-menu:hover,
.user-menu:focus-visible {
    background: rgba(63, 123, 255, 0.10);
    border-color: rgba(63, 123, 255, 0.35);
}
.user-menu:focus-visible {
    box-shadow: 0 0 0 3px rgba(63, 123, 255, 0.22);
}

.user-avatar {
    background: linear-gradient(135deg, #3f7bff 0%, #6f9bff 100%);
    color: #ffffff;
}

.user-menu-dropdown {
    background: #0d1230;
    border-color: rgba(63, 123, 255, 0.32);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
}
.user-menu-id {
    border-bottom-color: rgba(63, 123, 255, 0.14);
    color: #6b7a99;
}
.user-menu-dropdown a { color: #e9f0fb; }
.user-menu-dropdown a:hover {
    background: rgba(63, 123, 255, 0.12);
    color: #ffffff;
}
#logoutLink { color: #f47174; }
#logoutLink:hover { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }


/* ── 13. SYNC / STATUS ───────────────────────────────────────────────── */
.sync-info {
    background: rgba(8, 12, 33, 0.60);
    border-color: rgba(63, 123, 255, 0.18);
    color: #9fb0cf;
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
}
.sync-info .data-source-label { color: #e9f0fb; }
.sync-info .last-sync-label   { font-family: "JetBrains Mono", ui-monospace, monospace; }

.status-indicator {
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}
.status-indicator.disconnected {
    box-shadow: 0 0 0 3px rgba(240, 198, 116, 0.18);
}


/* ── 14. TABLES ──────────────────────────────────────────────────────── */
.positions-table th,
.table-container table th {
    color: #6b7a99;
    border-bottom-color: rgba(63, 123, 255, 0.14);
    background: rgba(8, 12, 33, 0.40);
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.positions-table td,
.table-container table td {
    color: #e9f0fb;
    border-bottom-color: rgba(63, 123, 255, 0.10);
}

.positions-table tbody tr:hover td,
.table-container table tbody tr:hover td {
    background: rgba(63, 123, 255, 0.04);
}


/* ── 15. INPUTS (global overrides) ──────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    background: rgba(8, 12, 33, 0.60);
    border-color: rgba(63, 123, 255, 0.18);
    color: #e9f0fb;
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
}
input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
    background: rgba(8, 12, 33, 0.80);
    border-color: rgba(63, 123, 255, 0.28);
}
input:focus,
select:focus,
textarea:focus {
    border-color: rgba(63, 123, 255, 0.55);
    background: rgba(8, 12, 33, 0.85);
    box-shadow: 0 0 0 3px rgba(63, 123, 255, 0.12);
}

/* Autofill dark-mode fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #e9f0fb;
    -webkit-box-shadow: 0 0 0 1000px #0d1230 inset;
    box-shadow: 0 0 0 1000px #0d1230 inset;
    caret-color: #e9f0fb;
    transition: background-color 9999s ease-in-out 0s;
}


/* ── 16. MARKET BANNER (amber tint — same as before but on TD Pro palette) */
.market-banner {
    background: rgba(240, 198, 116, 0.06);
    border: 1px solid rgba(240, 198, 116, 0.25);
    border-left: 3px solid #f0c674;
    color: #fde68a;
}
.market-banner-dot {
    background: #f0c674;
    box-shadow: 0 0 0 3px rgba(240, 198, 116, 0.18);
}
.market-banner-text  { color: #fde68a; }
.market-banner-meta  { color: rgba(253, 230, 138, 0.60); }


/* ── 17. MODAL / DIALOG ──────────────────────────────────────────────── */
.csp-modal {
    background: linear-gradient(180deg, #0d1230, #0a0e22);
    border-color: rgba(63, 123, 255, 0.32);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.80);
}

dialog[open] {
    background: #0d1230;
    border: 1px solid rgba(63, 123, 255, 0.32);
    border-radius: 14px;
    color: #e9f0fb;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.80);
}

/* Dialog headers and form elements inside dialogs */
.dialog-header h2 {
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    color: #e9f0fb;
    font-weight: 700;
}

.adapter-card {
    background: rgba(8, 12, 33, 0.60);
    border: 1px solid rgba(63, 123, 255, 0.18);
    border-radius: 10px;
    color: #e9f0fb;
    transition: border-color 0.15s, background 0.15s;
}
.adapter-card:hover {
    border-color: rgba(63, 123, 255, 0.45);
    background: rgba(63, 123, 255, 0.08);
}
.adapter-card h3 { color: #e9f0fb; font-family: "Space Grotesk", system-ui, -apple-system, sans-serif; }
.adapter-card p  { color: #9fb0cf; font-size: 12px; }


/* ── 18. SECTION HEAD / PANEL TITLE ─────────────────────────────────── */
.section-head,
.panel-title {
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-weight: 700;
    color: #e9f0fb;
    letter-spacing: 0;
}


/* ── 19. SUB-NAV ─────────────────────────────────────────────────────── */
.section-subnav {
    background: rgba(15, 22, 51, 0.55);
    border-color: rgba(63, 123, 255, 0.18);
}
.section-subnav a,
.section-subnav .subnav-link {
    color: #6b7a99;
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-weight: 600;
}
.section-subnav a:hover,
.section-subnav .subnav-link:hover {
    background: rgba(63, 123, 255, 0.08);
    color: #e9f0fb;
}
.section-subnav a.active,
.section-subnav .subnav-link.active {
    background: rgba(63, 123, 255, 0.14);
    color: #a5b4fc;
}


/* ── 20. FOCUS RING — amber/TD Pro accent ───────────────────────────── */
*:focus-visible {
    outline: 2px solid #e8b54d;
    outline-offset: 2px;
    border-radius: 4px;
}
*:focus:not(:focus-visible) { outline: none; }


/* ── 21. ERROR MESSAGES ──────────────────────────────────────────────── */
.error-message:not(.alert):not(.tradier-form-result) {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
    color: #f47174;
}


/* ── 22. TYPOGRAPHY — global body / element reset ───────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    color: #e9f0fb;
}

code, pre, .mono, kbd {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Prose (AI advisor markdown) — mono already set above; bump link color */
.csp-prose a      { color: #f0c674; }
.csp-prose a:hover { color: #e8b54d; }
.csp-prose code    { color: #f0c674; background: rgba(8,12,33,0.60); }
.csp-prose pre     { background: #0d1230; border-color: rgba(63,123,255,0.18); }


/* ── 23. STYLES.CSS HARD-CODED FONT OVERRIDES ───────────────────────── */
/*  Three elements in styles.css explicitly name 'Outfit'; two name
    'Courier New'.  Override them here so the full cockpit uses only
    Space Grotesk and JetBrains Mono.  Class names are preserved intact. */

/* Strategy ladder step dots + final-state pills (styles.css:3333, 3370) */
.sl-dot   { font-family: "Space Grotesk", system-ui, -apple-system, sans-serif; }
.sl-final { font-family: "Space Grotesk", system-ui, -apple-system, sans-serif; }

/* Intel and unusual-activity strike-price readouts (styles.css:2002, 2028) */
.intel-val  { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; }
.ua-strike  { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; }


/* ── 24. REDUCED MOTION ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}