/* ==========================================================================
   🌓 DYNAMIC DUAL LIGHT / DARK THEME ENGINE (INSTITUTIONAL SEMANTIC TOKENS)
   ========================================================================== */

/* 1. LIGHT THEME TOKENS (Institutional Soft Ice Slate Canvas + Elevated Crisp White Cards) */
:root,
:root[data-theme="light"] {
    --theme-mode: light;
    
    /* Surfaces */
    --bg-app: #eef2f6;               /* Soft Cool Ice/Slate Canvas (absorbs glare) */
    --bg-surface: #ffffff;           /* Crisp Pure White Elevated Cards */
    --bg-surface-elevated: #ffffff;  /* Elevated Card Deck */
    --bg-surface-subtle: #f8fafc;    /* Sub-headers & Filter Track */
    --bg-navbar: #ffffff;            /* Top Navbar */
    --bg-modal: #ffffff;
    --bg-deck: #ffffff;              /* Position Deck */
    --bg-box: #ffffff;
    --bg-hover: #f1f5f9;
    --hero-bg: #ffffff;              /* Crisp White Hero Strip */

    /* Borders */
    --border-subtle: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-strong: #94a3b8;

    /* Typography */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-faint: #94a3b8;
    --text-inverse: #ffffff;

    /* Accents & PnL */
    --color-accent: #0284c7;
    --pnl-positive: #059669;
    --pnl-negative: #dc2626;
    --color-success: #059669;
    --color-success-text: #047857;
    --color-danger: #dc2626;
    --color-danger-text: #b91c1c;
    --color-warning: #d97706;
    --color-warning-text: #92400e;
    --color-info: #0284c7;
    --color-info-text: #0369a1;
    --color-purple: #7c3aed;
    --color-purple-text: #6d28d9;
    --color-entry: #1d4ed8;

    /* Badges & Capsules (Soft High-Contrast Pastel Tints matching Matrix Dashboard) */
    --pill-long-bg: #f0fdf4;
    --pill-long-text: #15803d;
    --pill-long-border: #86efac;

    --pill-short-bg: #fef2f2;
    --pill-short-text: #b91c1c;
    --pill-short-border: #fca5a5;

    --pill-aster-bg: #f0fdfa;
    --pill-aster-text: #0f766e;
    --pill-aster-border: #99f6e4;

    --pill-hyper-bg: #eff6ff;
    --pill-hyper-text: #1d4ed8;
    --pill-hyper-border: #bfdbfe;

    --pill-bot-bg: #f0f9ff;
    --pill-bot-text: #0369a1;
    --pill-bot-border: #bae6fd;

    --pill-manual-bg: #faf5ff;
    --pill-manual-text: #7e22ce;
    --pill-manual-border: #e9d5ff;

    --pill-warn-bg: #fffbeb;
    --pill-warn-text: #92400e;
    --pill-warn-border: #fde68a;

    --pill-range-bg: #f0f9ff;
    --pill-range-text: #0369a1;
    --pill-range-border: #bae6fd;
    --color-range: #0284c7;

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
}

/* 2. DARK THEME TOKENS (Deep Sage Cypress & Midnight Titanium with #475c58) */
:root[data-theme="dark"] {
    --theme-mode: dark;
    color-scheme: dark;
    
    /* Calibrated Surfaces (Deep Cypress Slate & Sage Inset) */
    --bg-app: #0b1211;
    --bg-surface: #121c1a;
    --bg-surface-elevated: #192725;
    --bg-surface-subtle: #0e1715;
    --bg-navbar: #0f1816;
    --bg-modal: #121c1a;
    --bg-deck: #0f1816;
    --bg-box: #0e1614;
    --bg-hover: #1b2a27;
    --hero-bg: #121c1a;

    /* Sage Borders & Dividers based on #475c58 */
    --border-subtle: rgba(71, 92, 88, 0.40);
    --border-medium: #475c58;
    --border-strong: #5a7570;

    /* Typography (High-Contrast Platinum & Soft Sage Slate) */
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-muted: #9ab3ae;
    --text-faint: #6c8580;
    --text-inverse: #0b1211;

    /* Accents & PnL - Luminous Human Ergonomics */
    --color-accent: #38bdf8;
    --pnl-positive: #34d399;
    --pnl-negative: #f87171;
    --color-success: #34d399;
    --color-success-text: #34d399;
    --color-danger: #f87171;
    --color-danger-text: #f87171;
    --color-warning: #fbbf24;
    --color-warning-text: #fbbf24;
    --color-info: #38bdf8;
    --color-info-text: #38bdf8;
    --color-purple: #c084fc;
    --color-purple-text: #c084fc;
    --color-entry: #60a5fa;
    --color-sage: #475c58;

    /* Badges & Capsules (Dark: Glowing Translucent Glassmorphism) */
    --pill-long-bg: rgba(52, 211, 153, 0.16);
    --pill-long-text: #34d399;
    --pill-long-border: rgba(52, 211, 153, 0.35);

    --pill-short-bg: rgba(248, 113, 113, 0.16);
    --pill-short-text: #f87171;
    --pill-short-border: rgba(248, 113, 113, 0.35);

    --pill-aster-bg: rgba(20, 184, 166, 0.16);
    --pill-aster-text: #2dd4bf;
    --pill-aster-border: rgba(20, 184, 166, 0.35);

    --pill-hyper-bg: rgba(99, 102, 241, 0.16);
    --pill-hyper-text: #a5b4fc;
    --pill-hyper-border: rgba(99, 102, 241, 0.35);

    --pill-bot-bg: rgba(14, 165, 233, 0.16);
    --pill-bot-text: #38bdf8;
    --pill-bot-border: rgba(14, 165, 233, 0.35);

    --pill-manual-bg: rgba(168, 85, 247, 0.16);
    --pill-manual-text: #c084fc;
    --pill-manual-border: rgba(168, 85, 247, 0.35);

    --pill-warn-bg: rgba(251, 191, 36, 0.16);
    --pill-warn-text: #fbbf24;
    --pill-warn-border: rgba(251, 191, 36, 0.35);

    --pill-range-bg: rgba(14, 165, 233, 0.16);
    --pill-range-text: #38bdf8;
    --pill-range-border: rgba(14, 165, 233, 0.35);
    --color-range: #38bdf8;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4);
}

/* ==========================================================================
   3. GLOBAL ELEMENT STYLING BINDINGS & HIGH-CONTRAST SELECTION
   ========================================================================== */

/* Universal High-Contrast Selection (Dark & Light Mode / Mobile & Desktop) */
::selection,
*::selection {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

::-moz-selection,
*::-moz-selection {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

[data-theme="dark"] ::selection,
[data-theme="dark"] *::selection {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

[data-theme="dark"] ::-moz-selection,
[data-theme="dark"] *::-moz-selection {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body {
    background-color: var(--bg-app) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Top Navbar */
.navbar-apex {
    background: var(--bg-navbar) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm) !important;
}

.navbar-apex .brand-title {
    color: var(--text-primary) !important;
}

.nav-link-apex {
    color: var(--text-secondary) !important;
}

.nav-link-apex:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

.nav-link-apex.active,
.nav-link-apex.active *,
#mobileMenu .nav-link-apex.active,
#mobileMenu .nav-link-apex.active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.nav-link-apex.active i,
#mobileMenu .nav-link-apex.active i {
    color: #d4af37 !important;
    -webkit-text-fill-color: #d4af37 !important;
}

/* Mobile Dropdown Menu */
#mobileMenu {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

#mobileMenu .nav-link-apex {
    color: var(--text-secondary) !important;
}

#mobileMenu .nav-link-apex:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

/* Dropdowns */
.dropdown-menu {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-lg) !important;
}

.dropdown-item {
    color: var(--text-secondary) !important;
}

.dropdown-item:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* ==========================================================================
   4. GLOBAL KPI HEADER STRIP (apex-header.php)
   ========================================================================== */

.metrics-subheader {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm) !important;
}

.metric-mini-card {
    background: var(--bg-surface) !important;
    border: none !important;
    border-right: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.metric-mini-card:last-child {
    border-right: none !important;
}

.metric-mini-card:hover {
    background: var(--bg-hover) !important;
}

.metric-mini-label {
    color: var(--text-muted) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.metric-mini-value {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   5. COCKPIT CARDS, HERO & REGIME HUB
   ========================================================================== */

.cockpit-card,
.card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

.cockpit-header,
.card-header {
    background: var(--bg-surface-elevated) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

.cockpit-card h4, .cockpit-card h5, .cockpit-card h6,
.cockpit-header h4, .cockpit-header h5, .cockpit-header h6,
.card-title, .card-header {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
}

/* Global Unified Header & Label Typography (Pure White in Dark / Black in Light) */
.card-header, .card-title,
.cockpit-header, .section-title, .section-header,
.metric-card-header,
.metric-mini-label,
.hero-sublabel,
.filter-group-label,
.sortable-pos-column,
table th, thead th,
.table th, .table thead th,
.cockpit-table th, .heatmap-table th {
    color: var(--text-primary) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-primary);
}

table thead tr,
table thead th,
.table thead tr,
.table thead th,
thead tr, thead th {
    background-color: var(--bg-surface-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* Feed tabs navigation in Live Commentary */
.feed-tabs-nav {
    background: var(--bg-surface-subtle) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    padding: 3px !important;
    display: flex !important;
    gap: 4px !important;
}

.feed-tab-btn {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
    transition: all 0.15s ease !important;
}

.feed-tab-btn.active {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Hero Executive Strip */
.hero-executive-strip {
    background: var(--hero-bg) !important;
    border: 1.5px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

.hero-sublabel {
    color: var(--text-primary) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
}

.hero-primary-val {
    color: var(--text-primary);
    font-weight: 800;
}

.hero-faint-val {
    color: #475569 !important;
    font-weight: 700 !important;
}

[data-theme="dark"] .hero-faint-val {
    color: #cbd5e1 !important;
    font-weight: 700 !important;
}

/* Strategy Alpha Items */
.strategy-alpha-item {
    background: var(--bg-surface-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

.strategy-name {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
}

.strategy-stats {
    color: var(--text-muted) !important;
    font-weight: 700 !important;
}

/* Table styling & High Contrast Column Headers */
.table-responsive .table {
    color: var(--text-primary) !important;
}

.table thead th,
.table-responsive .table thead th,
#positionsTable thead th,
#recentMissionsTable thead th {
    background-color: var(--bg-surface-subtle) !important;
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    font-size: 0.68rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid var(--border-subtle) !important;
}

#recentMissionsTable thead tr,
#recentMissionsTable thead tr th {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
}

.table-responsive .table tbody tr {
    border-bottom: 1px solid var(--border-subtle) !important;
    background-color: var(--bg-surface) !important;
}

.table-responsive .table tbody tr:hover {
    background-color: var(--bg-hover) !important;
}

/* Neural Performance Ledger Row Styling */
#recentMissionsTable tbody tr:not(.detail-row) > td.d-md-table-cell {
    background-color: var(--bg-surface) !important;
    background: var(--bg-surface) !important;
}

@media (min-width: 769px) {
    #recentMissionsTable tbody tr:not(.detail-row)[data-pnl-status="profit"] > td.col-recent-first,
    #recentMissionsTable tbody tr:not(.detail-row)[data-pnl-status="profit"] > td:nth-child(2),
    #recentMissionsTable tbody tr.pnl-positive-row > td.col-recent-first,
    #recentMissionsTable tbody tr.pnl-positive-row > td:nth-child(2),
    #recentMissionsTable tbody tr.trade-profit > td.col-recent-first,
    #recentMissionsTable tbody tr.trade-profit > td:nth-child(2) {
        border-left: 4px solid var(--color-success, #10b981) !important;
    }

    #recentMissionsTable tbody tr:not(.detail-row)[data-pnl-status="loss"] > td.col-recent-first,
    #recentMissionsTable tbody tr:not(.detail-row)[data-pnl-status="loss"] > td:nth-child(2),
    #recentMissionsTable tbody tr.pnl-negative-row > td.col-recent-first,
    #recentMissionsTable tbody tr.pnl-negative-row > td:nth-child(2),
    #recentMissionsTable tbody tr.trade-loss > td.col-recent-first,
    #recentMissionsTable tbody tr.trade-loss > td:nth-child(2) {
        border-left: 4px solid var(--color-danger, #ef4444) !important;
    }
}

@media (max-width: 768.98px) {
    #recentMissionsTable tbody tr:not(.detail-row) > td,
    #recentMissionsTable tbody tr:not(.detail-row) > td:first-child,
    #recentMissionsTable tbody tr:not(.detail-row)[data-pnl-status="profit"] > td,
    #recentMissionsTable tbody tr:not(.detail-row)[data-pnl-status="loss"] > td {
        border-left: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
}

/* Lego Chips & Effects */
.lego-chip {
    border: 1px solid var(--border-subtle) !important;
}

/* Feather-Glow Interactive Action Badges */
.feather-tag {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none;
    line-height: 1.2;
}
.feather-tag:hover {
    transform: translateY(-1px);
    filter: brightness(1.25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.feather-tag:active {
    transform: translateY(0);
    filter: brightness(0.9);
}

/* ==========================================================================
   6. ACTIVE POSITIONS (Mobile Cards & Desktop Tables)
   ========================================================================== */

/* Active Position Rows: Clean White Backgrounds */
tr.active-position-row > td {
    background-color: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

tr.active-position-row:hover > td {
    background-color: var(--bg-hover) !important;
}

/* Mobile Position Cards: Clean White Cards with Left Accent Indicator */
.pos-mobile-card,
.mobile-position-card {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm) !important;
}

.mobile-card-header {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

.mobile-card-body {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

/* Dark Mode Preservation for Active Position Rows */
[data-theme="dark"] tr.active-position-row > td {
    background-color: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.pos-mobile-card {
    background: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: var(--shadow-sm) !important;
}

.mobile-card-header {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

.mobile-card-body {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

.pos-mobile-card .text-dark,
.pos-mobile-card .fw-bold.font-monospace {
    color: var(--text-primary) !important;
}

.expanded-light-deck {
    background: var(--bg-deck) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

/* Unified Mission Tag */
.unified-mission-tag {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 4px !important;
}

/* ==========================================================================
   6.1 UNIFIED EXPANDED BENTO DECKS (Eliminating Box Clutter)
   ========================================================================== */

/* 1. Mobile Financial Spec Deck (Unified 2x2 Metric Grid with Interior Cross-Dividers) */
.pos-financial-spec-deck {
    background: var(--bg-surface-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.pos-spec-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    font-family: 'JetBrains Mono', monospace !important;
}

.pos-spec-item {
    padding: 7px 10px !important;
}

.pos-spec-item.border-end-subtle {
    border-right: 1px solid var(--border-subtle) !important;
}

.pos-spec-item.border-bottom-subtle {
    border-bottom: 1px solid var(--border-subtle) !important;
}

.pos-spec-label {
    font-size: 0.58rem !important;
    color: var(--text-muted) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 2px !important;
}

.pos-spec-val {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
}

.pos-spec-footer {
    padding: 6px 10px !important;
    background: var(--bg-surface-subtle) !important;
    border-top: 1px solid var(--border-subtle) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
}

/* 2. Unified Tactical Deck (Mobile) */
.pos-tactical-deck {
    background: var(--bg-surface-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    padding: 9px 11px !important;
}

/* 3. Mission Intelligence Deck (Closed Trades Forensic Drawer) */
.mission-intel-deck {
    background: var(--bg-surface-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-family: 'JetBrains Mono', monospace !important;
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.mission-intel-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 0 !important;
    font-size: 0.72rem !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.mission-intel-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.mission-intel-row:first-child {
    padding-top: 0 !important;
}

.mission-intel-label {
    font-size: 0.60rem !important;
    font-weight: 800 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.mission-intel-val {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    max-width: 100% !important;
    word-break: break-word !important;
}

/* 4. Streamlined 27-State MTF Matrix Lifecycle */
.matrix-lifecycle-card {
    background: var(--bg-surface-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
}

.matrix-lifecycle-card .row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.mtf-tf-ribbon {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    background: var(--bg-surface-subtle) !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
    margin-top: 5px !important;
    border: 1px solid var(--border-subtle) !important;
}

.mtf-tf-pill {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    gap: 3px !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    font-family: 'JetBrains Mono', monospace !important;
}

/* 5. Scaling Part Cards (Clean Timeline List Items) */
.scaling-part-card {
    background: var(--bg-surface-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
}

/* ==========================================================================
   7. TELEMETRY MODAL & SCALING DRAWER & TACTICAL MODALS
   ========================================================================== */

#positionTelemetryDrawer,
#tacticalActionModal {
    color: var(--text-primary);
}

#positionTelemetryDrawer > div,
#tacticalActionModal > div {
    background: var(--bg-surface) !important;
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}

#telemetryDrawerTitle {
    color: var(--text-primary) !important;
}

#telemetryDrawerBody,
#tacticalModalBody {
    background: var(--bg-app) !important;
    color: var(--text-primary) !important;
}

#positionTelemetryDrawer h1,
#positionTelemetryDrawer h2,
#positionTelemetryDrawer h3,
#positionTelemetryDrawer h4,
#positionTelemetryDrawer h5,
#positionTelemetryDrawer h6 {
    color: var(--text-primary) !important;
}

#positionTelemetryDrawer span,
#positionTelemetryDrawer p,
#positionTelemetryDrawer div,
#tacticalActionModal span,
#tacticalActionModal p,
#tacticalActionModal div {
    color: inherit;
}

/* Universal Modal & Component Dynamic Color Normalizer */
[data-theme="dark"] [style*="color: #0f172a"],
[data-theme="dark"] [style*="color:#0f172a"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#1e293b"],
#positionTelemetryDrawer [style*="color: #0f172a"],
#positionTelemetryDrawer [style*="color:#0f172a"],
#tacticalActionModal [style*="color: #0f172a"],
#tacticalActionModal [style*="color:#0f172a"] {
    color: var(--text-primary) !important;
}

[data-theme="dark"] [style*="color: #475569"],
[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#64748b"],
#positionTelemetryDrawer [style*="color: #475569"],
#positionTelemetryDrawer [style*="color:#475569"],
#positionTelemetryDrawer [style*="color: #64748b"],
#positionTelemetryDrawer [style*="color:#64748b"],
#tacticalActionModal [style*="color: #475569"],
#tacticalActionModal [style*="color:#475569"],
#tacticalActionModal [style*="color: #64748b"],
#tacticalActionModal [style*="color:#64748b"] {
    color: var(--text-secondary) !important;
}

#positionTelemetryDrawer [style*="background: #ffffff"],
#positionTelemetryDrawer [style*="background:#ffffff"],
#tacticalActionModal [style*="background: #ffffff"],
#tacticalActionModal [style*="background:#ffffff"] {
    background: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
}

#positionTelemetryDrawer [style*="background: #f8fafc"],
#positionTelemetryDrawer [style*="background:#f8fafc"],
#tacticalActionModal [style*="background: #f8fafc"],
#tacticalActionModal [style*="background:#f8fafc"] {
    background: var(--bg-surface-elevated) !important;
    border-color: var(--border-subtle) !important;
}

/* Universal Background, Terminal, Forensics & Console Normalizers for Deep Sage Cypress */
[data-theme="dark"] [style*="background: #0f172a"],
[data-theme="dark"] [style*="background:#0f172a"],
[data-theme="dark"] [style*="background: #1e293b"],
[data-theme="dark"] [style*="background:#1e293b"],
[data-theme="dark"] [style*="background: #0b132b"],
[data-theme="dark"] [style*="background:#0b132b"],
[data-theme="dark"] [style*="background: #020b18"],
[data-theme="dark"] [style*="background:#020b18"],
[data-theme="dark"] [style*="background: linear-gradient(135deg, #0f172a"],
[data-theme="dark"] [style*="background:linear-gradient(135deg, #0f172a"],
[data-theme="dark"] [style*="background:linear-gradient(135deg,#0f172a"],
[data-theme="dark"] [style*="background: linear-gradient(135deg, #020617"],
[data-theme="dark"] [style*="background: #091b31"],
[data-theme="dark"] [style*="background:#091b31"],
[data-theme="dark"] [style*="background: #0c2340"],
[data-theme="dark"] [style*="background:#0c2340"] {
    background: #121c1a !important;
    border-color: var(--border-subtle) !important;
}

[data-theme="dark"] #logConsole,
[data-theme="dark"] #learningConsole,
[data-theme="dark"] .log-console,
[data-theme="dark"] .terminal-window,
[data-theme="dark"] .leai-console,
[data-theme="dark"] #detailConsole {
    background: #0b1211 !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .leai-card,
[data-theme="dark"] .matrix-item,
[data-theme="dark"] .forensic-banner,
[data-theme="dark"] .drawer-section-card,
[data-theme="dark"] .drawer-sub-box {
    background: #121c1a !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .log-line {
    border-bottom: 1px solid rgba(71, 92, 88, 0.25) !important;
}

/* Universal Dark Mode High-Luminance Overrides for Human Vision Ergonomics */
[data-theme="dark"] [style*="color: #10b981"],
[data-theme="dark"] [style*="color:#10b981"],
[data-theme="dark"] [style*="color: rgb(16, 185, 129)"],
[data-theme="dark"] .text-emerald,
[data-theme="dark"] .badge-green {
    color: #34d399 !important;
}

[data-theme="dark"] [style*="color: #ef4444"],
[data-theme="dark"] [style*="color:#ef4444"],
[data-theme="dark"] [style*="color: rgb(239, 68, 68)"],
[data-theme="dark"] .text-rose {
    color: #f87171 !important;
}

[data-theme="dark"] [style*="color: #f59e0b"],
[data-theme="dark"] [style*="color:#f59e0b"],
[data-theme="dark"] [style*="color: rgb(245, 158, 11)"],
[data-theme="dark"] .text-warning {
    color: #fbbf24 !important;
}

[data-theme="dark"] [style*="color: #06b6d4"],
[data-theme="dark"] [style*="color:#06b6d4"],
[data-theme="dark"] [style*="color: #0891b2"],
[data-theme="dark"] [style*="color:#0891b2"],
[data-theme="dark"] [style*="color: #0284c7"] {
    color: #38bdf8 !important;
}

/* Theme Toggle Button Styling */
.theme-toggle-btn {
    border-radius: 8px !important;
    padding: 0.25rem 0.55rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-surface-elevated) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-secondary) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.theme-toggle-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}

/* ==========================================================================
   8. UNIVERSAL MULTI-PAGE CONTRAST & HEADER ENGINE (ALL PHP VIEWS)
   ========================================================================== */

/* Universal Cards & Containers */
.panel,
.corporate-card,
.analytics-card,
.leai-card,
.audit-card,
.stat-card,
.metric-card,
.config-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Universal Card Headers & Section Titles */
.panel-header,
.corporate-card .card-header,
.analytics-card .card-header,
.audit-card-header,
.config-header,
.pos-master-header {
    background: var(--bg-surface-elevated) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

.panel-title,
.corporate-card .card-title,
.analytics-card .card-title,
.section-title,
.module-header-title {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
}

/* Universal Typography & Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-primary) !important;
}

/* Universal Tables & Header Strips across Analytics / Reports / Cockpit */
.table,
.table > :not(caption) > * > * {
    color: var(--text-primary);
    background-color: transparent !important;
}

.table thead th,
.table th {
    background-color: var(--bg-surface-subtle) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--border-subtle) !important;
    font-weight: 800 !important;
}

.table tbody tr {
    border-bottom: 1px solid var(--border-subtle) !important;
    background-color: var(--bg-surface) !important;
}

.table tbody tr:hover,
.table tbody tr:active,
.table tbody tr:focus {
    background-color: var(--bg-hover) !important;
}

.table-hover > tbody > tr:hover > *,
.table-hover > tbody > tr:active > *,
.table-hover > tbody > tr:focus > *,
.table-hover > tbody > tr.table-active > * {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table,
[data-theme="dark"] table {
    --bs-table-color: var(--text-primary) !important;
    --bs-table-hover-color: var(--text-primary) !important;
    --bs-table-active-color: var(--text-primary) !important;
    --bs-table-striped-color: var(--text-primary) !important;
    --bs-table-color-state: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > *,
[data-theme="dark"] .table-hover > tbody > tr:active > *,
[data-theme="dark"] .table-hover > tbody > tr:focus > *,
[data-theme="dark"] .table-hover > tbody > tr.table-active > *,
[data-theme="dark"] .table-hover tbody tr:hover td,
[data-theme="dark"] .table-hover tbody tr:active td,
[data-theme="dark"] .table-hover tbody tr:focus td,
[data-theme="dark"] .table tbody tr:hover td,
[data-theme="dark"] .table tbody tr:active td,
[data-theme="dark"] .table tbody tr:focus td {
    color: var(--text-primary) !important;
}

/* Universal Navigation Tabs (Corporate / Analytics / Cockpit) */
.nav-tabs-corporate,
.nav-tabs {
    border-bottom: 1px solid var(--border-subtle) !important;
    gap: 0.5rem !important;
}

.nav-tabs-corporate .nav-link,
.nav-tabs .nav-link {
    color: var(--text-muted) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    padding: 0.5rem 1rem !important;
    background: var(--bg-surface-subtle) !important;
    transition: all 0.2s ease !important;
}

.nav-tabs-corporate .nav-link:hover,
.nav-tabs .nav-link:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

.nav-tabs-corporate .nav-link.active,
.nav-tabs .nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #059669 !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25) !important;
    font-weight: 800 !important;
}

/* Analytics Loading Overlay Spinner */
.loading-spinner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999 !important;
}

.loading-spinner.show {
    display: flex !important;
}

/* Analytics Corporate Chart Containers (Fixes Chart.js infinite stretch bug) */
.chart-container-corporate {
    position: relative !important;
    width: 100% !important;
    height: 380px !important;
    max-height: 420px !important;
    background-color: var(--bg-surface) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    border: 1px solid var(--border-subtle) !important;
    overflow: hidden !important;
    display: block !important;
}

.chart-container-corporate canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    display: block !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
}

.trend-filters .btn-outline-light {
    border-color: var(--border-subtle) !important;
    color: var(--text-muted) !important;
    background: var(--bg-surface-subtle) !important;
}

.trend-filters .btn-outline-light:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

.trend-filters .btn-outline-light.active {
    background: var(--color-accent, #0284c7) !important;
    color: #ffffff !important;
    border-color: var(--color-accent, #0284c7) !important;
}

.card-header-pills .nav-link {
    color: var(--text-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}

.card-header-pills .nav-link:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

.card-header-pills .nav-link.active {
    color: var(--text-primary) !important;
    background: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Universal Form Controls & Inputs */
.form-control,
.form-select {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-surface-elevated) !important;
    border-color: var(--color-accent) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(56, 189, 248, 0.25) !important;
}

.form-control::placeholder {
    color: var(--text-faint) !important;
}

.form-label,
.form-text {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
}

/* Native Calendar & Date/Time Picker Indicators (Dark & Light) */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"] {
    position: relative;
    color-scheme: light dark;
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="month"] {
    color-scheme: dark !important;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.2) hue-rotate(140deg) !important;
    cursor: pointer !important;
    opacity: 0.85 !important;
    padding: 3px 4px !important;
    border-radius: 4px !important;
    background-color: rgba(71, 92, 88, 0.45) !important;
    transition: all 0.2s ease !important;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator:hover {
    filter: invert(1) brightness(1.5) !important;
    opacity: 1 !important;
    background-color: rgba(71, 92, 88, 0.85) !important;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.4) !important;
}

/* Universal Modals */
.modal-content {
    background-color: var(--bg-modal) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--border-subtle) !important;
    background-color: var(--bg-surface-elevated) !important;
}

.modal-title {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
}

/* Drawer & Modal Close Buttons (High Contrast & Visible in Light and Dark) */
.drawer-close-btn {
    border: 1px solid var(--border-subtle) !important;
    background: var(--bg-surface-subtle) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.90rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
}

.drawer-close-btn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-medium) !important;
    color: var(--color-danger, #ef4444) !important;
}

[data-theme="dark"] .drawer-close-btn {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .drawer-close-btn:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #f87171 !important;
}

.btn-close {
    filter: invert(var(--theme-mode, 0));
    opacity: 0.85 !important;
}

[data-theme="dark"] .btn-close,
[data-theme="dark"] .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.9 !important;
}

/* Universal Brand Logo Switching (Light Mode = Gold L + Black C / Dark Mode = Gold L + White C) */
.brand-logo-light {
    display: block !important;
}
.brand-logo-dark {
    display: none !important;
}

[data-theme="dark"] .brand-logo-light {
    display: none !important;
}
[data-theme="dark"] .brand-logo-dark {
    display: block !important;
}

/* Universal Badges & Pills in Dark Mode */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
    background-color: var(--bg-surface-elevated) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black,
[data-theme="dark"] .text-body {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-slate,
[data-theme="dark"] .text-secondary {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .small.text-muted,
[data-theme="dark"] span.text-muted,
[data-theme="dark"] div.text-muted,
[data-theme="dark"] p.text-muted,
[data-theme="dark"] label.text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .border-light,
[data-theme="dark"] .border {
    border-color: var(--border-subtle) !important;
}

/* ApexCharts Universal Dark Contrast Normalizer */
[data-theme="dark"] .apexcharts-canvas text,
[data-theme="dark"] .apexcharts-text,
[data-theme="dark"] .apexcharts-text tspan,
[data-theme="dark"] .apexcharts-datalabel,
[data-theme="dark"] .apexcharts-datalabels text,
[data-theme="dark"] .apexcharts-data-labels text,
[data-theme="dark"] .apexcharts-legend-text {
    fill: #f8fafc !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .apexcharts-track path,
[data-theme="dark"] .apexcharts-radialbar-track path {
    stroke: rgba(71, 92, 88, 0.35) !important;
}

[data-theme="dark"] .apexcharts-gridline,
[data-theme="dark"] .apexcharts-grid-lines line {
    stroke: rgba(71, 92, 88, 0.25) !important;
}

/* Hero Strip & Cockpit Card High-Contrast Column Dividers (Crisp White in Dark / Crisp Black in Light) */
#commandHubContainer .border-end,
.cockpit-card .border-end {
    border-color: rgba(15, 23, 42, 0.35) !important;
    border-right: 1.5px solid rgba(15, 23, 42, 0.35) !important;
}

[data-theme="dark"] #commandHubContainer .border-end,
[data-theme="dark"] .cockpit-card .border-end {
    border-color: rgba(255, 255, 255, 0.65) !important;
    border-right: 1.5px solid rgba(255, 255, 255, 0.65) !important;
}

@media (min-width: 992px) {
    .hero-executive-strip .border-end-lg,
    .hero-executive-strip .hero-module.border-end-lg {
        border-color: rgba(15, 23, 42, 0.35) !important;
        border-right: 1.5px solid rgba(15, 23, 42, 0.35) !important;
    }
    [data-theme="dark"] .hero-executive-strip .border-end-lg,
    [data-theme="dark"] .hero-executive-strip .hero-module.border-end-lg {
        border-color: rgba(255, 255, 255, 0.65) !important;
        border-right: 1.5px solid rgba(255, 255, 255, 0.65) !important;
    }
}

/* Expanded Deck & Position Drawer Crisp Dividers */
.zone-divider-right {
    border-right: 1.5px solid rgba(15, 23, 42, 0.25) !important;
}
[data-theme="dark"] .zone-divider-right {
    border-right: 1.5px solid rgba(255, 255, 255, 0.45) !important;
}

/* --------------------------------------------------------------------------
   🌓 DUAL-THEME EXPANDED TRADE DRAWER & CARDS (LIGHT & DARK DEDICATED RULES)
   -------------------------------------------------------------------------- */
.expanded-dark-deck,
.detail-card {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.drawer-sub-card,
.matrix-lifecycle-card,
.scaling-part-card,
.drawer-section-card,
.drawer-sub-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

.expanded-dark-deck .timeline-label {
    color: #0f172a !important;
}

/* DARK MODE OVERRIDES (DEEP SAGE CYPRESS ONLY) */
[data-theme="dark"] .expanded-dark-deck,
[data-theme="dark"] .detail-card {
    background: radial-gradient(circle at 15% 20%, #172421, #0e1715) !important;
    border-color: #475c58 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .drawer-sub-card,
[data-theme="dark"] .matrix-lifecycle-card,
[data-theme="dark"] .scaling-part-card,
[data-theme="dark"] .drawer-section-card,
[data-theme="dark"] .drawer-sub-box {
    background: rgba(18, 28, 26, 0.85) !important;
    border-color: rgba(71, 92, 88, 0.40) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .expanded-dark-deck .timeline-label {
    color: #f8fafc !important;
}

[data-theme="dark"] .expanded-dark-deck .border-end,
[data-theme="dark"] .expanded-dark-deck .border-top,
[data-theme="dark"] .expanded-dark-deck .border-bottom,
[data-theme="dark"] .expanded-dark-deck .border-lg-end {
    border-color: rgba(71, 92, 88, 0.40) !important;
}

[data-theme="dark"] .expanded-dark-deck .timeline-grid::before,
[data-theme="dark"] .timeline-grid::before {
    background: linear-gradient(90deg, #34d399 0%, #38bdf8 33%, #f87171 66%, #38bdf8 100%) !important;
    opacity: 0.95 !important;
}

/* ==========================================================================
   INDEX.PHP CLOSED TRADE DRAWER — Timeline & Section Card Layout
   Mirrors trade-report.php so both pages share identical visual fidelity.
   ========================================================================== */

/* Timeline grid: full-width, surfaced card with gradient connecting line */
.expanded-dark-deck .timeline-grid {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    position: relative !important;
    padding: 1.1rem 0.5rem 1.0rem 0.5rem !important;
    background: var(--bg-surface-elevated) !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.expanded-dark-deck .timeline-grid::before {
    content: '' !important;
    position: absolute !important;
    height: 2px !important;
    background: linear-gradient(90deg, #10b981 0%, #0284c7 50%, #ef4444 100%) !important;
    left: 12.5% !important;
    right: 12.5% !important;
    top: 25px !important;
    z-index: 1 !important;
    transform: none !important;
    opacity: 0.85 !important;
}

/* Timeline step: flex column centered */
.expanded-dark-deck .timeline-step {
    flex: 1 1 0% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
}

/* Timeline node dot */
.expanded-dark-deck .timeline-node {
    position: relative !important;
    z-index: 2 !important;
    background: var(--bg-surface) !important;
    border: 2px solid var(--border-strong) !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
}

.expanded-dark-deck .timeline-node.active {
    border-color: #10b981 !important;
    background: #10b981 !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.75) !important;
}

.expanded-dark-deck .timeline-node.trigger {
    border-color: #0ea5e9 !important;
    background: #0ea5e9 !important;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.75) !important;
}

.expanded-dark-deck .timeline-node.danger {
    border-color: #ef4444 !important;
    background: #ef4444 !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.75) !important;
}

/* Timeline labels */
.expanded-dark-deck .timeline-label {
    position: static !important;
    margin-top: 6px !important;
    white-space: nowrap !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    text-align: center !important;
    display: block !important;
}

.expanded-dark-deck .timeline-sublabel {
    display: block !important;
    font-size: 0.67rem !important;
    color: var(--text-secondary) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
}

/* Drawer section cards used in index.php closed-trade drawer */
.expanded-dark-deck .drawer-section-card {
    background: var(--bg-surface-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    padding: 0.8rem !important;
    margin-bottom: 0.5rem !important;
    color: var(--text-primary) !important;
}

.expanded-dark-deck .drawer-label {
    color: var(--text-secondary) !important;
    font-weight: 700 !important;
    font-size: 0.74rem !important;
}

.expanded-dark-deck .drawer-val {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

/* Dark mode overrides for the above */
[data-theme="dark"] .expanded-dark-deck .timeline-grid {
    background: rgba(18, 28, 26, 0.70) !important;
    border-color: rgba(71, 92, 88, 0.45) !important;
}

[data-theme="dark"] .expanded-dark-deck .timeline-grid::before {
    background: linear-gradient(90deg, #34d399 0%, #38bdf8 33%, #f87171 66%, #38bdf8 100%) !important;
    opacity: 0.95 !important;
}

[data-theme="dark"] .expanded-dark-deck .timeline-node {
    background: #1e2d2b !important;
}

[data-theme="dark"] .expanded-dark-deck .timeline-label {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .expanded-dark-deck .timeline-sublabel {
    color: #94a3b8 !important;
}

[data-theme="dark"] .expanded-dark-deck .drawer-section-card {
    background: rgba(18, 28, 26, 0.85) !important;
    border-color: rgba(71, 92, 88, 0.40) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .expanded-dark-deck .drawer-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .expanded-dark-deck .drawer-val {
    color: #f8fafc !important;
}

[data-theme="light"] .expanded-dark-deck .timeline-grid {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .expanded-dark-deck .drawer-section-card {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .expanded-dark-deck .drawer-label {
    color: #475569 !important;
}

[data-theme="light"] .expanded-dark-deck .drawer-val,
[data-theme="light"] .expanded-dark-deck .timeline-label {
    color: #0f172a !important;
}


/* ==========================================================================
   9. UNIVERSAL TYPOGRAPHY & DEEP CONTRAST HARMONY ENGINE
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-primary);
}

.card-title,
.panel-title,
.section-title,
.widget-title {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
}

/* Table Headings & Cell Contrast */
table thead th,
.table thead th,
.table th {
    background-color: var(--bg-surface-elevated) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-subtle) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

table tbody td,
.table tbody td {
    color: var(--text-primary);
    border-color: var(--border-subtle) !important;
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--bg-hover) !important;
}

/* Universal Dropdown Menus */
.dropdown-menu {
    background-color: var(--bg-surface-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text-primary) !important;
    border-radius: 12px;
}

.dropdown-item {
    color: var(--text-secondary) !important;
    font-weight: 600;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--text-primary) !important;
    background-color: var(--bg-hover) !important;
}

.dropdown-divider {
    border-top-color: var(--border-subtle) !important;
}

/* List Groups */
.list-group-item {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

.list-group-item:hover {
    background-color: var(--bg-hover) !important;
}

/* Badges and tags */
.badge.bg-secondary,
.badge.text-bg-secondary {
    background-color: var(--bg-surface-subtle) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
}

:root[data-theme="dark"] .badge[style*="background: #f0f9ff"],
:root[data-theme="dark"] .badge[style*="background:#f0f9ff"] {
    background: var(--pill-bot-bg) !important;
    color: var(--pill-bot-text) !important;
    border: 1px solid var(--pill-bot-border) !important;
}

:root[data-theme="dark"] .badge[style*="background: #faf5ff"],
:root[data-theme="dark"] .badge[style*="background:#faf5ff"] {
    background: var(--pill-manual-bg) !important;
    color: var(--pill-manual-text) !important;
    border: 1px solid var(--pill-manual-border) !important;
}

:root[data-theme="dark"] .badge[style*="background: #fef3c7"],
:root[data-theme="dark"] .badge[style*="background:#fef3c7"],
:root[data-theme="dark"] .badge[style*="background: #fffbeb"],
:root[data-theme="dark"] .badge[style*="background:#fffbeb"] {
    background: var(--pill-warn-bg) !important;
    color: var(--pill-warn-text) !important;
    border: 1px solid var(--pill-warn-border) !important;
}

:root[data-theme="dark"] .badge[style*="background: #fee2e2"],
:root[data-theme="dark"] .badge[style*="background:#fee2e2"],
:root[data-theme="dark"] .badge[style*="background: #fef2f2"],
:root[data-theme="dark"] .badge[style*="background:#fef2f2"] {
    background: var(--pill-short-bg) !important;
    color: var(--pill-short-text) !important;
    border: 1px solid var(--pill-short-border) !important;
}

:root[data-theme="dark"] .badge[style*="background: #dcfce7"],
:root[data-theme="dark"] .badge[style*="background:#dcfce7"],
:root[data-theme="dark"] .badge[style*="background: #f0fdf4"],
:root[data-theme="dark"] .badge[style*="background:#f0fdf4"] {
    background: var(--pill-long-bg) !important;
    color: var(--pill-long-text) !important;
    border: 1px solid var(--pill-long-border) !important;
}

:root[data-theme="dark"] .unified-mission-tag {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* High-Contrast PAUSED Position Pill Badge (Dual Theme) */
.pos-badge-paused,
.badge.pos-badge-paused {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
}

[data-theme="dark"] .pos-badge-paused,
[data-theme="dark"] .badge.pos-badge-paused {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.25) !important;
}

/* Position Table Filter Toolbar (Dual Theme High-Contrast) */
#posFilterGroup .btn,
#posFilterGroup .btn-filter-btn {
    background: var(--bg-surface-elevated) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 2px 8px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    box-shadow: none !important;
    transition: all 0.15s ease-in-out !important;
}

#posFilterGroup .btn:hover,
#posFilterGroup .btn-filter-btn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--color-accent) !important;
}

/* Inactive Filter Count Badge */
#posFilterGroup .pos-filter-count,
#posFilterGroup .btn .pos-filter-count,
#posFilterGroup .btn-filter-btn .pos-filter-count {
    background: var(--bg-surface-subtle) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 800 !important;
    font-size: 0.60rem !important;
    padding: 1px 5px !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    opacity: 1 !important;
}

/* Inactive Specific Badge Text Accents */
#posFilterGroup [data-pos-filter="PROFIT"] .pos-filter-count { color: var(--color-success-text) !important; }
#posFilterGroup [data-pos-filter="DRAWDOWN"] .pos-filter-count { color: var(--color-danger-text) !important; }
#posFilterGroup [data-pos-filter="TRAILING"] .pos-filter-count { color: var(--color-warning-text) !important; }
#posFilterGroup [data-pos-filter="LONG"] .pos-filter-count { color: var(--color-success-text) !important; }
#posFilterGroup [data-pos-filter="SHORT"] .pos-filter-count { color: var(--color-danger-text) !important; }
#posFilterGroup [data-pos-filter="PAUSED"] .pos-filter-count { color: var(--color-warning-text) !important; }

/* Active / Selected Filter Button in Light Mode */
#posFilterGroup .btn.active,
#posFilterGroup .btn-filter-btn.active {
    background: #eff6ff !important;
    border: 1.5px solid #2563eb !important;
    color: #1e3a8a !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

#posFilterGroup .btn.active .pos-filter-count,
#posFilterGroup .btn-filter-btn.active .pos-filter-count {
    background: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #1d4ed8 !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

/* Active / Selected Filter Button in Dark Mode */
[data-theme="dark"] #posFilterGroup .btn.active,
[data-theme="dark"] #posFilterGroup .btn-filter-btn.active {
    background: rgba(212, 175, 55, 0.14) !important;
    border: 1.5px solid #d4af37 !important;
    color: #f8fafc !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

[data-theme="dark"] #posFilterGroup .btn.active .pos-filter-count,
[data-theme="dark"] #posFilterGroup .btn-filter-btn.active .pos-filter-count {
    background: #d4af37 !important;
    color: #0f172a !important;
    border: 1px solid #b5903b !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

/* Special Attention Filter */
#posFilterGroup [data-pos-filter="ATTENTION"] {
    background: var(--pill-warn-bg) !important;
    border: 1px solid var(--pill-warn-border) !important;
    color: var(--pill-warn-text) !important;
}
#posFilterGroup [data-pos-filter="ATTENTION"] .pos-filter-count {
    background: var(--color-warning) !important;
    color: #ffffff !important;
}
#posFilterGroup [data-pos-filter="ATTENTION"].active {
    background: var(--color-warning) !important;
    border: 1.5px solid var(--color-warning) !important;
    color: #ffffff !important;
}
#posFilterGroup [data-pos-filter="ATTENTION"].active .pos-filter-count {
    background: #ffffff !important;
    color: #92400e !important;
}

/* Custom Tooltips and Popovers */
.popover,
.tooltip-inner {
    background-color: var(--bg-modal) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ==========================================================================
   UNIFIED PNL & DIRECTIONAL ACCENT STYLES (Light & Dark Aligned)
   ========================================================================== */

/* Universal Positive PnL */
.pnl-positive,
span.pnl-positive,
td.pnl-positive,
div.pnl-positive,
.text-success,
.text-profit,
.pnl-pos,
.pos,
.positive-pnl {
    color: var(--pnl-positive) !important;
    font-weight: 700 !important;
}

/* Universal Negative PnL */
.pnl-negative,
span.pnl-negative,
td.pnl-negative,
div.pnl-negative,
.text-danger,
.text-loss,
.pnl-neg,
.neg,
.negative-pnl {
    color: var(--pnl-negative) !important;
    font-weight: 700 !important;
}

/* PnL Background Tints & Highlights */
.pnl-positive-tint {
    background-color: var(--pill-long-bg) !important;
    color: var(--pnl-positive) !important;
    border-color: var(--pill-long-border) !important;
}

.pnl-negative-tint {
    background-color: var(--pill-short-bg) !important;
    color: var(--pnl-negative) !important;
    border-color: var(--pill-short-border) !important;
}

/* Table Row Styling - Clean Surface Background for Closed Trades */
#recentMissionsTable tbody tr,
#recentMissionsContainer tr.trade-profit,
#recentMissionsContainer tr.trade-loss,
tr.trade-profit,
tr.trade-loss {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.15s ease-in-out;
}

#recentMissionsTable tbody tr:hover,
#recentMissionsContainer tr.trade-profit:hover,
#recentMissionsContainer tr.trade-loss:hover,
tr.trade-profit:hover,
tr.trade-loss:hover {
    background-color: var(--bg-hover) !important;
}

tr.pnl-positive-row,
tr.pnl-negative-row {
    background-color: var(--bg-surface) !important;
}

.card.pnl-positive-card,
.mobile-position-card.pnl-positive-card {
    border-color: var(--pill-long-border) !important;
    background: var(--bg-surface) !important;
}

.card.pnl-negative-card,
.mobile-position-card.pnl-negative-card {
    border-color: var(--pill-short-border) !important;
    background: var(--bg-surface) !important;
}

/* ==========================================================================
   11. BODY & COCKPIT-CARD DUAL-THEME NORMALIZATION
   ========================================================================== */
body {
    background-color: var(--bg-app) !important;
    color: var(--text-primary) !important;
}

.cockpit-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

.cockpit-card:hover {
    box-shadow: var(--shadow-md) !important;
}

[data-theme="dark"] .cockpit-card {
    background: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
}

[data-theme="light"] .cockpit-card {
    background: #ffffff !important;
    border-color: var(--border-subtle) !important;
}

/* ==========================================================================
   12. UNIFIED MISSION INTEL MODAL (RUNWAY, STATE, SCALE)
   ========================================================================== */
.mission-intel-modal-shell {
    background: #080d19 !important;
    border-radius: clamp(14px, 3vw, 22px) !important;
    max-width: 520px !important;
    width: 100% !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 92vh !important;
}

[data-theme="light"] .mission-intel-modal-shell {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.15) !important;
}

.mission-intel-header {
    background: #080d19 !important;
    padding: 0.65rem 0.85rem 0.50rem 0.85rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    flex-shrink: 0 !important;
}

[data-theme="light"] .mission-intel-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.mission-tab-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    background: #080d19 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 0.35rem 0.5rem !important;
    flex-shrink: 0 !important;
}

[data-theme="light"] .mission-tab-nav {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

.mission-tab-btn {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.30rem 0.15rem !important;
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    font-size: 0.60rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-radius: 8px !important;
}

.mission-tab-btn i {
    font-size: 0.92rem !important;
    margin-bottom: 2px !important;
    color: #64748b !important;
    transition: color 0.2s ease !important;
}

.mission-tab-btn.active {
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mission-tab-btn.active i {
    color: #ffffff !important;
}

[data-theme="light"] .mission-tab-btn.active {
    color: #0f172a !important;
}

[data-theme="light"] .mission-tab-btn.active i {
    color: #0f172a !important;
}

/* Position Ladder */
.mission-ladder-card {
    background: #0b111e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 0.70rem 0.85rem !important;
    position: relative !important;
}

[data-theme="light"] .mission-ladder-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

.mission-ladder-track {
    position: relative !important;
    padding-left: 24px !important;
}

.mission-ladder-rail-line {
    position: absolute !important;
    left: 5px !important;
    top: 14px !important;
    bottom: 14px !important;
    width: 2px !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="light"] .mission-ladder-rail-line {
    background: rgba(0, 0, 0, 0.12) !important;
}

.mission-ladder-row {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 32px !important;
    margin-bottom: 6px !important;
}

.mission-ladder-row:last-child {
    margin-bottom: 0 !important;
}

.mission-ladder-node-dot {
    position: absolute !important;
    left: -24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #0b111e !important;
    z-index: 2 !important;
}

[data-theme="light"] .mission-ladder-node-dot {
    background: #ffffff !important;
}

.ladder-node-tp {
    border: 2px solid #22c55e !important;
}

.ladder-node-live {
    border: 2.5px solid #f59e0b !important;
    background: #f59e0b !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25), 0 0 16px rgba(245, 158, 11, 0.8) !important;
    z-index: 3 !important;
}

.ladder-node-scale {
    border: 2px solid #3b82f6 !important;
}

.ladder-node-base {
    border: 2px solid #14b8a6 !important;
}

.ladder-node-dip {
    border: 2px solid #64748b !important;
}

.ladder-dot-line {
    border-bottom: 2px dotted #475569;
}

.ladder-dot-line.tp {
    border-color: #22c55e !important;
}

.ladder-dot-line.live {
    border-color: #f59e0b !important;
}

.ladder-dot-line.scale {
    border-color: #3b82f6 !important;
}

.ladder-dot-line.base {
    border-color: #14b8a6 !important;
}

.ladder-dot-line.dip {
    border-color: #475569 !important;
}

.ladder-pill-tp {
    border: 1.5px solid #22c55e !important;
    color: #22c55e !important;
    background: rgba(34, 197, 94, 0.08) !important;
    border-radius: 9999px !important;
    padding: 2.5px 12px !important;
    font-weight: 800 !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
}

.ladder-pill-price-tp {
    border: 1.5px solid #22c55e !important;
    color: #22c55e !important;
    background: rgba(34, 197, 94, 0.08) !important;
    border-radius: 9999px !important;
    padding: 2.5px 12px !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    font-family: 'JetBrains Mono', monospace !important;
    white-space: nowrap !important;
}

.ladder-pill-live {
    border: 1.5px solid #f59e0b !important;
    color: #fbbf24 !important;
    background: rgba(245, 158, 11, 0.08) !important;
    border-radius: 9999px !important;
    padding: 3px 12px !important;
    font-weight: 800 !important;
    font-size: 0.76rem !important;
    font-family: 'JetBrains Mono', monospace !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

.ladder-card-scale {
    border: 1.5px solid #3b82f6 !important;
    background: rgba(59, 130, 246, 0.08) !important;
    border-radius: 10px !important;
    padding: 4px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 120px !important;
}

.ladder-card-base {
    border: 1.5px solid #14b8a6 !important;
    background: rgba(20, 184, 166, 0.08) !important;
    border-radius: 10px !important;
    padding: 4px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 120px !important;
}

.ladder-pill-dip {
    border: 1.5px solid #475569 !important;
    color: #94a3b8 !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 9999px !important;
    padding: 2.5px 12px !important;
    font-weight: 700 !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
}

.ladder-pill-price-dip {
    border: 1.5px solid #475569 !important;
    color: #cbd5e1 !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 9999px !important;
    padding: 2.5px 12px !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    font-family: 'JetBrains Mono', monospace !important;
    white-space: nowrap !important;
}

/* Base and Scale-in Card Qty & Price */
.ladder-card-qty {
    color: #ffffff !important;
}

.ladder-card-scale .ladder-card-price {
    color: #60a5fa !important;
}

.ladder-card-base .ladder-card-price {
    color: #2dd4bf !important;
}

/* Light Mode Overrides for Position Ladder, Pills & Cards */
[data-theme="light"] .ladder-pill-live {
    color: #b45309 !important;
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: #d97706 !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.25) !important;
}

[data-theme="light"] .ladder-pill-tp {
    color: #047857 !important;
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: #10b981 !important;
}

[data-theme="light"] .ladder-pill-price-tp {
    color: #047857 !important;
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: #10b981 !important;
}

[data-theme="light"] .ladder-pill-dip {
    color: #334155 !important;
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .ladder-pill-price-dip {
    color: #0f172a !important;
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    font-weight: 800 !important;
}

[data-theme="light"] .ladder-card-scale {
    background: rgba(37, 99, 235, 0.06) !important;
    border-color: #3b82f6 !important;
}

[data-theme="light"] .ladder-card-scale .ladder-card-qty {
    color: #0f172a !important;
}

[data-theme="light"] .ladder-card-scale .ladder-card-price {
    color: #1d4ed8 !important;
}

[data-theme="light"] .ladder-card-base {
    background: rgba(20, 184, 166, 0.06) !important;
    border-color: #14b8a6 !important;
}

[data-theme="light"] .ladder-card-base .ladder-card-qty {
    color: #0f172a !important;
}

[data-theme="light"] .ladder-card-base .ladder-card-price {
    color: #0f766e !important;
}

[data-theme="light"] .ladder-dot-line.dip {
    border-color: #cbd5e1 !important;
}

/* Meter & Strip Classes */
.mission-meter-title {
    color: #94a3b8 !important;
}

[data-theme="light"] .mission-meter-title {
    color: #475569 !important;
}

.mission-meter-count {
    color: #ffffff !important;
}

[data-theme="light"] .mission-meter-count {
    color: #0f172a !important;
}

.mission-strip-label {
    color: #94a3b8 !important;
}

[data-theme="light"] .mission-strip-label {
    color: #334155 !important;
}

.mission-strip-dot {
    color: #475569 !important;
}

[data-theme="light"] .mission-strip-dot {
    color: #94a3b8 !important;
}

/* Action Buttons & SL Card */
.btn-dip-action {
    background: rgba(14, 165, 233, 0.08) !important;
    border: 1.5px solid rgba(14, 165, 233, 0.35) !important;
    color: #38bdf8 !important;
}

[data-theme="light"] .btn-dip-action {
    background: rgba(14, 165, 233, 0.1) !important;
    border-color: rgba(14, 165, 233, 0.5) !important;
    color: #0284c7 !important;
}

.btn-scaleout-action {
    background: rgba(34, 197, 94, 0.08) !important;
    border: 1.5px solid rgba(34, 197, 94, 0.35) !important;
    color: #22c55e !important;
}

[data-theme="light"] .btn-scaleout-action {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: #059669 !important;
}

.hard-sl-card {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

.hard-sl-price {
    color: #ffffff !important;
}

.hard-sl-sub {
    color: #94a3b8 !important;
}

[data-theme="light"] .hard-sl-card {
    background: rgba(239, 68, 68, 0.06) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #dc2626 !important;
}

[data-theme="light"] .hard-sl-price {
    color: #991b1b !important;
}

[data-theme="light"] .hard-sl-sub {
    color: #64748b !important;
}

/* Timeline Cards */
.ladder-timeline-card {
    background: #0b111e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-size: 0.70rem !important;
}

.ladder-timeline-title {
    color: #ffffff !important;
}

[data-theme="light"] .ladder-timeline-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .ladder-timeline-title {
    color: #0f172a !important;
}

/* Capacity Meters & Metric Card */
.mission-meter-card {
    background: #0b111e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 0.70rem 0.85rem !important;
    margin-bottom: 0.85rem !important;
}

[data-theme="light"] .mission-meter-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

.mission-meter-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    margin-bottom: 0.5rem !important;
}

.mission-meter-col {
    padding: 0 6px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="light"] .mission-meter-col {
    border-left: 1px solid #e2e8f0 !important;
}

.mission-meter-col:first-child {
    padding-left: 0 !important;
    border-left: none !important;
}

.mission-meter-col:last-child {
    padding-right: 0 !important;
}

.mission-meter-bar-track {
    height: 5px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
}

[data-theme="light"] .mission-meter-bar-track {
    background: rgba(0, 0, 0, 0.08) !important;
}

.mission-meter-bar-fill {
    height: 100% !important;
    border-radius: 9999px !important;
    transition: width 0.3s ease !important;
}

.mission-meter-bar-fill.fill-dip {
    background: linear-gradient(90deg, #8b5cf6, #c084fc) !important;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5) !important;
}

.mission-meter-bar-fill.fill-profit {
    background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5) !important;
}

.mission-meter-bar-fill.fill-lifetime {
    background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5) !important;
}

.mission-meter-bar-fill.fill-derisk {
    background: linear-gradient(90deg, #0d9488, #14b8a6) !important;
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.5) !important;
}

/* 7-TF Tiles in State View */
.mission-tf-tile {
    background: var(--bg-surface, #090d16) !important;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 6px !important;
    padding: 0.25rem 0.15rem !important;
    text-align: center !important;
    font-family: 'JetBrains Mono', monospace !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.mission-tf-tile.tf-changed {
    border-color: #38bdf8 !important;
    background: rgba(14, 165, 233, 0.1) !important;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.25) !important;
}

.mission-tf-tile.tf-aligned {
    border-color: rgba(16, 185, 129, 0.3) !important;
    background: rgba(16, 185, 129, 0.05) !important;
}

.mission-tf-tile.tf-opposing {
    border-color: rgba(239, 68, 68, 0.35) !important;
    background: rgba(239, 68, 68, 0.08) !important;
}

/* Decision Strip */
.mission-decision-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
}

.mission-decision-cell {
    background: var(--bg-surface, #090d16) !important;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 6px !important;
    padding: 0.35rem 0.2rem !important;
    text-align: center !important;
    font-family: 'JetBrains Mono', monospace !important;
}

/* ==========================================================================
   13. INSTITUTIONAL SEGMENTED CAPACITY METERS & LUMINOUS LADDER SYSTEM
   ========================================================================== */
.segmented-meter-track {
    display: flex !important;
    gap: 3px !important;
    width: 100% !important;
    margin-bottom: 6px !important;
}

.segmented-meter-pill {
    flex: 1 !important;
    height: 5px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-theme="light"] .segmented-meter-pill {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

/* DIP: Neon Purple Segments */
.segmented-meter-pill.fill-dip {
    background: linear-gradient(135deg, #8b5cf6, #a855f7) !important;
    border-color: #c084fc !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.55) !important;
}

[data-theme="light"] .segmented-meter-pill.fill-dip {
    background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
    border-color: #6d28d9 !important;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.35) !important;
}

/* PROFIT ADDS: Golden Amber Segments */
.segmented-meter-pill.fill-profit {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    border-color: #fde047 !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.55) !important;
}

[data-theme="light"] .segmented-meter-pill.fill-profit {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    border-color: #b45309 !important;
    box-shadow: 0 0 8px rgba(217, 119, 6, 0.35) !important;
}

/* LIFETIME: Ice Blue / Sapphire Segments */
.segmented-meter-pill.fill-lifetime {
    background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
    border-color: #7dd3fc !important;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.55) !important;
}

[data-theme="light"] .segmented-meter-pill.fill-lifetime {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.35) !important;
}

/* DE-RISK: Emerald / Teal Segments */
.segmented-meter-pill.fill-derisk {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    border-color: #34d399 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.55) !important;
}

[data-theme="light"] .segmented-meter-pill.fill-derisk {
    background: linear-gradient(135deg, #059669, #047857) !important;
    border-color: #059669 !important;
    box-shadow: 0 0 8px rgba(5, 150, 105, 0.35) !important;
}

/* ENHANCED LUMINOUS LADDER TRACK & NODES */
.mission-ladder-card {
    background: radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.05) 0%, #080d19 75%) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] .mission-ladder-card {
    background: radial-gradient(circle at 50% 0%, rgba(2, 132, 199, 0.03) 0%, #ffffff 80%) !important;
    box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.06) !important;
}

.mission-ladder-rail-line {
    width: 2.5px !important;
    background: linear-gradient(180deg, #10b981 0%, #f59e0b 35%, #3b82f6 65%, #64748b 100%) !important;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.25) !important;
}

[data-theme="light"] .mission-ladder-rail-line {
    background: linear-gradient(180deg, #059669 0%, #d97706 35%, #2563eb 65%, #94a3b8 100%) !important;
    box-shadow: none !important;
}

/* GLOWING LADDER NODES */
.ladder-node-tp {
    border: 2.5px solid #10b981 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.7) !important;
}

.ladder-node-scale {
    border: 2.5px solid #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.7) !important;
}

.ladder-node-base {
    border: 2.5px solid #14b8a6 !important;
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.7) !important;
}

.ladder-node-dip {
    border: 2px solid #64748b !important;
}

/* ENHANCED LIVE PIN GLOW */
.ladder-pill-live {
    border: 1.5px solid #f59e0b !important;
    color: #fbbf24 !important;
    background: rgba(245, 158, 11, 0.12) !important;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.35), inset 0 0 8px rgba(245, 158, 11, 0.15) !important;
}

[data-theme="light"] .ladder-pill-live {
    border-color: #d97706 !important;
    color: #b45309 !important;
    background: rgba(245, 158, 11, 0.14) !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.22) !important;
}

/* ENHANCED TP PILL */
.ladder-pill-tp {
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25) !important;
}

.ladder-pill-price-tp {
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2) !important;
}

/* MODAL INNER CANVAS HARMONY */
[data-theme="light"] #missionModalBody {
    background: #f8fafc !important;
}

/* DESKTOP ROW EDGE ACCENTS FOR POSITIONS TABLE */
#positionsTable tbody tr.active-position-row {
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#positionsTable tbody tr.active-position-row:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px -2px rgba(15, 23, 42, 0.08) !important;
}

#positionsTable tbody tr.pos-row-profit td:first-child {
    box-shadow: inset 2px 0 8px -1px rgba(16, 185, 129, 0.4) !important;
}

#positionsTable tbody tr.pos-row-drawdown td:first-child {
    box-shadow: inset 2px 0 8px -1px rgba(239, 68, 68, 0.4) !important;
}

/* INLINE EXPANDED FORENSIC DRAWER (Seamless Folding Card Shell) */
.desktop-expanded-row .expanded-light-deck {
    background: var(--bg-surface) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
    position: relative;
}

[data-theme="light"] .desktop-expanded-row .expanded-light-deck {
    background: var(--bg-surface, #ffffff) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-subtle, #e2e8f0) !important;
    box-shadow: none !important;
}

/* Subtle inset shelf separator inside the content deck (does not touch outer frame) */
.desktop-expanded-row .expanded-light-deck::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: var(--border-subtle);
    opacity: 0.45;
}

/* SLEEK DRAWER TERMINAL BUTTON */
.drawer-terminal-btn {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--color-accent) !important;
    transition: all 0.2s ease !important;
}

.drawer-terminal-btn:hover {
    background: var(--bg-hover) !important;
    border-color: #f59e0b !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2) !important;
}

/* SLEEK MODERN ACTION PILLS */
.drawer-action-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    letter-spacing: 0.4px !important;
}

.drawer-action-btn:hover {
    transform: translateY(-1px) !important;
}

.btn-action-resume {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3) !important;
}

.btn-action-resume:hover {
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.5) !important;
}

.btn-action-pause {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3) !important;
}

.btn-action-pause:hover {
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.5) !important;
}

.btn-action-flip {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}

.btn-action-flip:hover {
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.5) !important;
}

.btn-action-close {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
}

.btn-action-close:hover {
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.5) !important;
}

/* HERO MODULE REFINED DESKTOP SPACING */
@media (min-width: 992px) {
    .hero-executive-strip .hero-module {
        padding-left: 1.15rem !important;
        padding-right: 1.15rem !important;
    }
    .hero-executive-strip .hero-module:first-child {
        padding-left: 0.35rem !important;
    }
    .hero-executive-strip .hero-module:last-child {
        padding-right: 0.35rem !important;
    }
}

/* ==========================================================================
   DIRECTION-AWARE RISK & TARGET RUNWAY (UNIFIED COORDINATES)
   ========================================================================== */
.runway {
    position: relative;
}
.runway-labels {
    position: relative;
    width: 100%;
    height: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
.runway-labels .runway-mark,
.runway-labels .mark {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    white-space: nowrap;
    background: transparent !important;
    padding: 0 !important;
}
.runway-labels .runway-mark.sl,
.runway-labels .mark.sl {
    transform: translateY(-50%);
    left: 0;
    background: transparent !important;
}
.runway-labels .runway-mark.tp,
.runway-labels .mark.tp {
    transform: translateY(-50%) translateX(-100%);
    left: 100%;
    background: transparent !important;
}
.runway-labels .runway-mark.entry,
.runway-labels .mark.entry {
    background: rgba(2, 132, 199, 0.10) !important;
    border: 1px solid rgba(2, 132, 199, 0.25) !important;
    border-radius: 4px;
    padding: 1px 5px !important;
}
.runway-labels.mobile-staggered,
.runway-labels.staggered {
    height: 48px !important;
}
.runway-labels.mobile-staggered .runway-mark.entry,
.runway-labels.staggered .runway-mark.entry {
    top: 0 !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
}
.runway-labels.mobile-staggered .runway-mark.tp50,
.runway-labels.staggered .runway-mark.tp50 {
    top: 16px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
}
.runway-labels.mobile-staggered .runway-mark.sl,
.runway-labels.staggered .runway-mark.sl {
    top: 32px !important;
    bottom: auto !important;
    transform: none !important;
    left: 0 !important;
}
.runway-labels.mobile-staggered .runway-mark.tp,
.runway-labels.staggered .runway-mark.tp {
    top: 32px !important;
    bottom: auto !important;
    transform: translateX(-100%) !important;
    left: 100% !important;
}