/* ============================================
   OPCNY SIMULATOR - THEME VARIABLES
   CSS Custom Properties for Dark/Light Theme
   ============================================ */

/* ============================================
   ROOT: DEFAULT DARK THEME
   ============================================ */
:root {
    /* === COLOR SCHEME === */
    color-scheme: dark light;

    /* === BACKGROUNDS === */
    --bg-primary: #131722;           /* Main app background */
    --bg-secondary: #1e222d;         /* Cards, blocks, containers */
    --bg-tertiary: #2a2e39;          /* Input fields, buttons, elevated elements */
    --bg-hover: #363a45;             /* Hover state backgrounds */
    --bg-active: #434651;            /* Active/pressed state */

    /* === BORDERS === */
    --border-primary: #2a2e39;       /* Default border */
    --border-secondary: #363a45;     /* Stronger border */
    --border-hover: #434651;         /* Border on hover */
    --border-focus: #193fa8;         /* Focus state border */

    /* === TEXT COLORS === */
    --text-primary: #d1d4dc;         /* Main text color */
    --text-secondary: #787b86;       /* Secondary/muted text */
    --text-tertiary: #b2b5be;        /* Tertiary text */
    --text-muted: #434651;           /* Very muted text (placeholders) */
    --text-inverse: #1e222d;         /* Text on light backgrounds */
    --text-white: #ffffff;           /* Pure white text */

    /* === ACCENT COLORS === */
    --accent-primary: #193fa8;       /* Primary brand blue */
    --accent-primary-hover: #1e53e5; /* Primary hover */
    --accent-primary-light: #2962ff; /* Light accent */
    --accent-primary-bg: rgba(41, 98, 255, 0.1);  /* Accent background tint */
    --accent-primary-bg-hover: rgba(41, 98, 255, 0.15);

    /* === SEMANTIC COLORS === */
    /* Success / Positive / Call (Green) */
    --color-success: #089981;
    --color-success-hover: #0bb89e;
    --color-success-light: #26a69a;
    --color-success-bg: rgba(8, 153, 129, 0.2);
    --color-success-text: #4caf50;

    /* Error / Negative / Put (Red) */
    --color-error: #f23645;
    --color-error-hover: #ff4757;
    --color-error-light: #ef5350;
    --color-error-bg: rgba(242, 54, 69, 0.2);

    /* Warning / Short (Orange) */
    --color-warning: #ff9800;
    --color-warning-hover: #ffa726;
    --color-warning-light: #ffb74d;
    --color-warning-bg: rgba(255, 152, 0, 0.2);

    /* Warning semantic aliases */
    --warning-bg: rgba(255, 152, 0, 0.15);
    --warning-border: rgba(255, 152, 0, 0.3);
    --warning-text: #ffb74d;

    /* Info (Purple - AI Mentor) */
    --color-info: #7b68ee;
    --color-info-light: #9575cd;
    --color-info-bg: rgba(123, 104, 238, 0.2);

    /* Teal (Strategies, positive) */
    --color-teal: #26a69a;
    --color-teal-hover: #1e8e85;
    --color-teal-bg: rgba(38, 166, 154, 0.2);

    /* === GRADIENTS === */
    --gradient-primary: linear-gradient(135deg, #193fa8 0%, #2962ff 100%);
    --gradient-success: linear-gradient(135deg, #026654 0%, #089981 100%);
    --gradient-error: linear-gradient(135deg, #a01d27 0%, #f23645 100%);
    --gradient-teal: linear-gradient(135deg, #26a69a 0%, #1e8e85 100%);
    --gradient-button: linear-gradient(135deg, #4caf50 0%, #26a69a 100%);

    /* === SHADOWS === */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 4px 12px rgba(41, 98, 255, 0.4);
    --shadow-success: 0 4px 12px rgba(8, 153, 129, 0.3);
    --shadow-error: 0 4px 12px rgba(242, 54, 69, 0.3);
    --shadow-warning: 0 4px 12px rgba(255, 152, 0, 0.3);

    /* === CHART COLORS === */
    --chart-bg: #1e222d;
    --chart-grid: #2a2e39;
    --chart-candle-up: #089981;
    --chart-candle-down: #f23645;
    --chart-volume: #363a45;

    /* === SCROLLBAR === */
    --scrollbar-track: #1e222d;
    --scrollbar-thumb: #2a2e39;
    --scrollbar-thumb-hover: #363a45;

    /* === MODAL === */
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --modal-bg: #1e222d;
    --modal-header-bg: #131722;

    /* === TABLE === */
    --table-header-bg: #1e222d;
    --table-row-hover: #2a2e39;
    --table-border: #2a2e39;

    /* === TRANSITIONS === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* === BORDER RADIUS === */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-2xl: 12px;
    --radius-full: 50%;

    /* === SPACING === */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;

    /* === FONT SIZES === */
    --font-xs: 9px;
    --font-sm: 11px;
    --font-md: 13px;
    --font-lg: 14px;
    --font-xl: 16px;
    --font-2xl: 18px;
    --font-3xl: 20px;
}

/* ============================================
   LIGHT THEME
   ============================================ */
[data-theme="light"],
.light-theme {
    /* === BACKGROUNDS === */
    --bg-primary: #f5f7fa;           /* Main app background */
    --bg-secondary: #ffffff;         /* Cards, blocks, containers */
    --bg-tertiary: #e8ecf0;          /* Input fields, buttons, elevated elements */
    --bg-hover: #dce0e5;             /* Hover state backgrounds */
    --bg-active: #d0d4da;            /* Active/pressed state */

    /* === BORDERS === */
    --border-primary: #dce0e5;       /* Default border */
    --border-secondary: #c5cad1;     /* Stronger border */
    --border-hover: #b0b6be;         /* Border on hover */
    --border-focus: #1976d2;         /* Focus state border */

    /* === TEXT COLORS === */
    --text-primary: #1e222d;         /* Main text color */
    --text-secondary: #5d6068;       /* Secondary/muted text */
    --text-tertiary: #787b86;        /* Tertiary text */
    --text-muted: #9ca3af;           /* Very muted text (placeholders) */
    --text-inverse: #ffffff;         /* Text on dark backgrounds */
    --text-white: #ffffff;           /* Pure white text */

    /* === ACCENT COLORS === */
    --accent-primary: #1976d2;       /* Primary brand blue (lighter for light mode) */
    --accent-primary-hover: #1565c0; /* Primary hover */
    --accent-primary-light: #42a5f5; /* Light accent */
    --accent-primary-bg: rgba(25, 118, 210, 0.08);  /* Accent background tint */
    --accent-primary-bg-hover: rgba(25, 118, 210, 0.12);

    /* === SEMANTIC COLORS (adjusted for light mode) === */
    /* Success / Positive / Call (Green) */
    --color-success: #0d9668;
    --color-success-hover: #0f8a5f;
    --color-success-light: #10b981;
    --color-success-bg: rgba(16, 185, 129, 0.12);
    --color-success-text: #059669;

    /* Error / Negative / Put (Red) */
    --color-error: #dc2626;
    --color-error-hover: #b91c1c;
    --color-error-light: #ef4444;
    --color-error-bg: rgba(220, 38, 38, 0.1);

    /* Warning / Short (Orange) */
    --color-warning: #ea580c;
    --color-warning-hover: #c2410c;
    --color-warning-light: #f97316;
    --color-warning-bg: rgba(234, 88, 12, 0.1);

    /* Warning semantic aliases */
    --warning-bg: rgba(234, 88, 12, 0.1);
    --warning-border: rgba(234, 88, 12, 0.25);
    --warning-text: #c2410c;

    /* Info (Purple - AI Mentor) */
    --color-info: #7c3aed;
    --color-info-light: #8b5cf6;
    --color-info-bg: rgba(124, 58, 237, 0.1);

    /* Teal (Strategies, positive) */
    --color-teal: #0d9488;
    --color-teal-hover: #0f766e;
    --color-teal-bg: rgba(13, 148, 136, 0.1);

    /* === GRADIENTS === */
    --gradient-primary: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
    --gradient-success: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --gradient-error: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    --gradient-teal: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    --gradient-button: linear-gradient(135deg, #059669 0%, #10b981 100%);

    /* === SHADOWS === */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 15px 35px rgba(0, 0, 0, 0.12);
    --shadow-accent: 0 4px 12px rgba(25, 118, 210, 0.25);
    --shadow-success: 0 4px 12px rgba(16, 185, 129, 0.2);
    --shadow-error: 0 4px 12px rgba(220, 38, 38, 0.2);
    --shadow-warning: 0 4px 12px rgba(234, 88, 12, 0.2);

    /* === CHART COLORS === */
    --chart-bg: #ffffff;
    --chart-grid: #e8ecf0;
    --chart-candle-up: #10b981;
    --chart-candle-down: #ef4444;
    --chart-volume: #e8ecf0;

    /* === SCROLLBAR === */
    --scrollbar-track: #f5f7fa;
    --scrollbar-thumb: #c5cad1;
    --scrollbar-thumb-hover: #b0b6be;

    /* === MODAL === */
    --modal-overlay: rgba(0, 0, 0, 0.4);
    --modal-bg: #ffffff;
    --modal-header-bg: #f5f7fa;

    /* === TABLE === */
    --table-header-bg: #f5f7fa;
    --table-row-hover: #f0f3f6;
    --table-border: #e8ecf0;
}

/* ============================================
   SYSTEM PREFERENCE AUTO-DETECTION
   ============================================ */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        /* Light theme variables - copy from [data-theme="light"] above */
        --bg-primary: #f5f7fa;
        --bg-secondary: #ffffff;
        --bg-tertiary: #e8ecf0;
        --bg-hover: #dce0e5;
        --bg-active: #d0d4da;

        --border-primary: #dce0e5;
        --border-secondary: #c5cad1;
        --border-hover: #b0b6be;
        --border-focus: #1976d2;

        --text-primary: #1e222d;
        --text-secondary: #5d6068;
        --text-tertiary: #787b86;
        --text-muted: #9ca3af;
        --text-inverse: #ffffff;

        --accent-primary: #1976d2;
        --accent-primary-hover: #1565c0;
        --accent-primary-light: #42a5f5;
        --accent-primary-bg: rgba(25, 118, 210, 0.08);
        --accent-primary-bg-hover: rgba(25, 118, 210, 0.12);

        --color-success: #0d9668;
        --color-success-hover: #0f8a5f;
        --color-success-light: #10b981;
        --color-success-bg: rgba(16, 185, 129, 0.12);
        --color-success-text: #059669;

        --color-error: #dc2626;
        --color-error-hover: #b91c1c;
        --color-error-light: #ef4444;
        --color-error-bg: rgba(220, 38, 38, 0.1);

        --color-warning: #ea580c;
        --color-warning-hover: #c2410c;
        --color-warning-light: #f97316;
        --color-warning-bg: rgba(234, 88, 12, 0.1);

        --color-info: #7c3aed;
        --color-info-light: #8b5cf6;
        --color-info-bg: rgba(124, 58, 237, 0.1);

        --color-teal: #0d9488;
        --color-teal-hover: #0f766e;
        --color-teal-bg: rgba(13, 148, 136, 0.1);

        --gradient-primary: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
        --gradient-success: linear-gradient(135deg, #059669 0%, #10b981 100%);
        --gradient-error: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
        --gradient-teal: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
        --gradient-button: linear-gradient(135deg, #059669 0%, #10b981 100%);

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
        --shadow-xl: 0 15px 35px rgba(0, 0, 0, 0.12);
        --shadow-accent: 0 4px 12px rgba(25, 118, 210, 0.25);
        --shadow-success: 0 4px 12px rgba(16, 185, 129, 0.2);
        --shadow-error: 0 4px 12px rgba(220, 38, 38, 0.2);
        --shadow-warning: 0 4px 12px rgba(234, 88, 12, 0.2);

        --chart-bg: #ffffff;
        --chart-grid: #e8ecf0;
        --chart-candle-up: #10b981;
        --chart-candle-down: #ef4444;
        --chart-volume: #e8ecf0;

        --scrollbar-track: #f5f7fa;
        --scrollbar-thumb: #c5cad1;
        --scrollbar-thumb-hover: #b0b6be;

        --modal-overlay: rgba(0, 0, 0, 0.4);
        --modal-bg: #ffffff;
        --modal-header-bg: #f5f7fa;

        --table-header-bg: #f5f7fa;
        --table-row-hover: #f0f3f6;
        --table-border: #e8ecf0;
    }
}

/* ============================================
   UTILITY CLASSES FOR THEME
   ============================================ */
.theme-transition {
    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        color var(--transition-normal),
        box-shadow var(--transition-normal);
}

/* Force dark theme (override system preference) */
[data-theme="dark"] {
    /* Uses default :root variables which are dark */
}

/* ============================================
   THEME TOGGLE BUTTON STYLES
   ============================================ */

.theme-toggle-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 99999;
    display: flex;
    align-items: center;
}

.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    color: var(--text-secondary);
}

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

.theme-toggle-btn:active {
    transform: scale(0.95);
}

/* Theme Icons */
.theme-icon {
    display: none;
    width: 18px;
    height: 18px;
}

/* Show appropriate icon based on current theme */
.theme-toggle-btn.theme-dark .theme-icon-dark {
    display: block;
}

.theme-toggle-btn.theme-light .theme-icon-light {
    display: block;
}

.theme-toggle-btn.theme-system .theme-icon-system {
    display: block;
}

/* Default (when no class is set yet) - show dark icon */
.theme-toggle-btn:not(.theme-dark):not(.theme-light):not(.theme-system) .theme-icon-dark {
    display: block;
}

/* ============================================
   CORE ELEMENT THEME SUPPORT
   (Using CSS variables for key elements)
   ============================================ */

body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.block {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

.block-header {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-primary);
}

/* Inputs and selects */
.model-select,
.time-select,
.ticker-input,
.period-select,
.speed-select,
.budget-input,
.quantity-input {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

.model-select:hover,
.time-select:hover,
.ticker-input:hover,
.period-select:hover,
.speed-select:hover {
    background: var(--bg-hover);
}

.model-select:focus,
.time-select:focus,
.ticker-input:focus,
.period-select:focus,
.speed-select:focus,
.budget-input:focus,
.quantity-input:focus {
    border-color: var(--accent-primary);
    outline: none;
}

/* Primary buttons */
.generate-btn,
.model-settings-btn,
.load-ticker-btn {
    background: var(--accent-primary);
    color: var(--text-white);
}

.generate-btn:hover:not(:disabled),
.model-settings-btn:hover,
.load-ticker-btn:hover:not(:disabled) {
    background: var(--accent-primary-hover);
}

/* Timeframe and chart type buttons */
.tf-btn,
.chart-type-btn {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--bg-primary);
}

.tf-btn:hover:not(:disabled),
.chart-type-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.tf-btn.active,
.chart-type-btn.active {
    background: var(--accent-primary);
    color: var(--text-white);
}

/* Button group */
.button-group {
    background: var(--bg-primary);
}

/* Preview and export buttons */
.preview-btn,
.export-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-secondary);
}

.preview-btn:hover:not(:disabled),
.export-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

/* Info panel */
.info-panel {
    background: var(--bg-primary);
    border-bottom-color: var(--border-primary);
    color: var(--text-secondary);
}

.info-item strong {
    color: var(--text-tertiary);
}

/* Search dropdown */
.search-results-dropdown {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
}

.search-result-item {
    border-bottom-color: var(--border-secondary);
}

.search-result-item:hover {
    background: var(--bg-hover);
}

.search-result-item strong {
    color: var(--accent-primary);
}

.search-result-item .result-name {
    color: var(--text-primary);
}

.search-result-item .result-exchange {
    color: var(--text-secondary);
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Modal overlays */
.preview-modal-overlay,
.trade-modal-overlay,
.model-settings-modal-overlay,
.strategy-detail-modal-overlay,
.ai-mentor-modal-overlay {
    background: var(--modal-overlay);
}

/* Modal content */
.preview-modal,
.trade-modal,
.strategy-detail-modal,
.ai-mentor-modal {
    background: var(--modal-bg);
    border-color: var(--border-primary);
}

.preview-modal-header,
.trade-modal-header {
    background: var(--modal-header-bg);
    border-bottom-color: var(--border-primary);
}

.preview-modal-header h3,
.trade-modal-header h3 {
    color: var(--text-primary);
}

/* Tables */
.option-chain-table thead,
.trades-table thead,
.cashflow-table thead {
    background: var(--table-header-bg);
}

.option-chain-table th,
.trades-table th,
.cashflow-table th {
    color: var(--text-primary);
    border-bottom-color: var(--table-border);
    background: var(--table-header-bg);
}

.option-chain-table tbody tr:hover,
.trades-table tbody tr:hover,
.cashflow-table tbody tr:hover {
    background: var(--table-row-hover);
}

.option-chain-table td,
.trades-table td,
.cashflow-table td {
    color: var(--text-primary);
    border-bottom-color: var(--table-border);
}

/* Block titles and sections */
.block-title {
    color: var(--text-secondary);
    border-bottom-color: var(--border-primary);
}

.sim-section-title,
.sim-section-title-vertical {
    color: var(--text-secondary);
}

/* Control content */
.control-content {
    background: var(--bg-secondary);
}

.control-btn {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

.control-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.control-label {
    color: var(--text-secondary);
}

.progress-info {
    color: var(--text-secondary);
}

.progress-slider {
    background: var(--bg-tertiary);
}

.progress-slider::-webkit-slider-thumb {
    background: var(--accent-primary);
}

.progress-slider::-moz-range-thumb {
    background: var(--accent-primary);
}

/* Current candle date */
.current-candle-date {
    color: var(--accent-primary-light);
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
}

/* Trade content */
.trade-content {
    background: var(--bg-secondary);
}

.current-price {
    background: var(--bg-tertiary);
}

.price-label {
    color: var(--text-secondary);
}

.price-value {
    color: var(--accent-primary);
}

/* Buy/Sell/Short buttons */
.trade-btn.buy-btn {
    background: var(--color-success);
    color: var(--text-white);
}

.trade-btn.buy-btn:hover:not(:disabled) {
    background: var(--color-success-hover);
}

.trade-btn.sell-btn {
    background: var(--color-error);
    color: var(--text-white);
}

.trade-btn.sell-btn:hover:not(:disabled) {
    background: var(--color-error-hover);
}

.trade-btn.short-btn {
    background: var(--color-warning);
    color: var(--text-white);
}

.trade-btn.short-btn:hover:not(:disabled) {
    background: var(--color-warning-hover);
}

/* Budget section */
.budget-input-row {
    background: var(--bg-secondary);
}

.budget-label,
.budget-stat-label {
    color: var(--text-secondary);
}

.budget-stat-item {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
}

.budget-stat-value {
    color: var(--text-white);
}

/* Portfolio */
.portfolio-tab {
    color: var(--text-secondary);
}

.portfolio-tab:hover {
    color: var(--text-tertiary);
    background: var(--accent-primary-bg);
}

.portfolio-tab.active {
    color: var(--accent-primary-light);
    border-bottom-color: var(--accent-primary-light);
}

.portfolio-item {
    background: var(--bg-secondary);
    border-color: var(--border-secondary);
}

.portfolio-item:hover {
    border-color: var(--border-hover);
    background: var(--bg-hover);
}

.portfolio-empty {
    color: var(--text-muted);
}

.item-symbol {
    color: var(--text-white);
    background: var(--bg-hover);
}

.item-symbol.call {
    background: var(--color-success);
}

.item-symbol.put {
    background: var(--color-error);
}

.item-strike,
.item-qty,
.item-detail {
    color: var(--text-secondary);
}

.item-pnl.positive {
    color: var(--color-success);
}

.item-pnl.negative {
    color: var(--color-error);
}

/* Loading message */
.loading-message {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
}

.loading-text {
    color: var(--text-primary);
}

.loading-spinner {
    border-color: var(--bg-tertiary);
    border-top-color: var(--accent-primary);
}

/* Error message */
.error-message {
    background: var(--bg-tertiary);
    border-left-color: var(--color-error);
    color: var(--color-error);
}

/* Option chain */
.option-chain-header {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-primary);
}

.option-chain-title {
    color: var(--text-primary);
}

.expiration-tabs {
    background: var(--bg-primary);
}

.expiration-tab {
    background: var(--bg-tertiary);
    border-color: var(--bg-primary);
    color: var(--text-secondary);
}

.expiration-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.expiration-tab.active {
    background: var(--accent-primary);
    color: var(--text-white);
}

.option-chain-footer {
    background: var(--bg-tertiary);
    border-top-color: var(--border-secondary);
}

.footer-info {
    color: var(--text-secondary);
}

.footer-info strong {
    color: var(--text-primary);
}

/* Strategies */
.strategies-sidebar {
    background: var(--bg-secondary);
    border-right-color: var(--border-secondary);
}

.strategy-level-header {
    color: var(--text-primary);
}

.strategy-level-header:hover {
    background: var(--bg-tertiary);
}

.level-arrow {
    color: var(--text-secondary);
}

.level-count {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.strategy-list-item {
    color: var(--text-secondary);
}

.strategy-list-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.strategy-list-item.active {
    background: var(--bg-tertiary);
    color: var(--accent-primary-light);
    border-left-color: var(--accent-primary-light);
}

.strategies-detail {
    background: var(--bg-primary);
}

.detail-empty,
.detail-loading {
    color: var(--text-secondary);
}

.detail-title {
    color: var(--text-primary);
}

.detail-description {
    color: var(--text-secondary);
}

.detail-analysis {
    background: var(--bg-secondary);
}

/* AI Mentor */
.ai-chat-messages {
    background: var(--bg-secondary);
}

.chat-message .message-content {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.user-message .message-content {
    border-left-color: var(--color-teal);
}

.ai-message .message-content {
    border-left-color: var(--color-info);
}

.ai-context-bar {
    background: var(--bg-tertiary);
    border-bottom-color: var(--border-secondary);
}

.context-item {
    color: var(--text-primary);
}

.context-item strong {
    color: var(--text-secondary);
}

.quick-action-btn {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
    color: var(--text-primary);
}

.quick-action-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--color-teal);
    color: var(--color-teal);
}