/* ============================================================
   INFUSION AI — Dual Theme System
   Terminal Night (dark) · Professional Daylight (light)
   WCAG AA Compliant · 200ms Transitions
   ============================================================ */

/* ----------------------------------------------------------
   1. CSS CUSTOM PROPERTIES — DARK THEME (DEFAULT)
   ---------------------------------------------------------- */
:root,
[data-theme="dark"] {
    --bg-deep: #0B0E14;
    --panel-bg: #151A22;
    --border-color: #2B3340;
    --text-main: #F1F5F9;
    --text-muted: #94A3B8;
    --accent-blue: #60A5FA;
    --bull-green: #34D399;
    --bear-red: #F87171;
    --input-bg: #0F1219;
    --navbar-bg: #111827;
    --chart-tooltip-bg: #151A22;
    --chart-grid-color: #2B3340;
    --shadow-color: rgba(0, 0, 0, 0.35);
    --hover-bg: #1E2532;

    /* Extended palette */
    --focus-ring: rgba(96, 165, 250, 0.3);
    --panel-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --navbar-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --navbar-border: rgba(43, 51, 64, 0.6);
    --badge-bull-bg: rgba(52, 211, 153, 0.15);
    --badge-bear-bg: rgba(248, 113, 113, 0.15);
    --badge-neutral-bg: rgba(148, 163, 184, 0.15);
    --dropdown-bg: #151A22;
    --scrollbar-thumb: #2B3340;
    --scrollbar-track: #0B0E14;
    --toggle-bg: rgba(148, 163, 184, 0.15);
    --toggle-hover: rgba(96, 165, 250, 0.2);
    --toggle-color: #F59E0B;
    --panel-backdrop: none;
    --link-color: #60A5FA;
    --info-color: #38BDF8;
    --warning-color: #FBBF24;
    --success-color: #34D399;
}

/* ----------------------------------------------------------
   2. CSS CUSTOM PROPERTIES — LIGHT THEME
   ---------------------------------------------------------- */
[data-theme="light"] {
    --bg-deep: #F8FAFC;
    --panel-bg: #FFFFFF;
    --border-color: #E2E8F0;
    --text-main: #0F172A;
    --text-muted: #475569;
    --accent-blue: #2563EB;
    --bull-green: #059669;
    --bear-red: #DC2626;
    --input-bg: #F1F5F9;
    --navbar-bg: #FFFFFF;
    --chart-tooltip-bg: #FFFFFF;
    --chart-grid-color: #E2E8F0;
    --shadow-color: rgba(15, 23, 42, 0.08);
    --hover-bg: #EFF6FF;

    /* Extended palette */
    --focus-ring: rgba(37, 99, 235, 0.25);
    --panel-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
    --navbar-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
    --navbar-border: rgba(226, 232, 240, 0.8);
    --badge-bull-bg: rgba(5, 150, 105, 0.1);
    --badge-bear-bg: rgba(220, 38, 38, 0.1);
    --badge-neutral-bg: rgba(71, 85, 105, 0.1);
    --dropdown-bg: #FFFFFF;
    --scrollbar-thumb: #CBD5E1;
    --scrollbar-track: #F1F5F9;
    --toggle-bg: rgba(71, 85, 105, 0.1);
    --toggle-hover: rgba(37, 99, 235, 0.12);
    --toggle-color: #475569;
    --panel-backdrop: blur(12px);
    --link-color: #2563EB;
    --info-color: #0284C7;
    --warning-color: #D97706;
    --success-color: #059669;
}

/* ----------------------------------------------------------
   3. GLOBAL TRANSITIONS (200ms smooth theme change)
   ---------------------------------------------------------- */
body,
.quant-panel,
.form-control,
.form-select,
.navbar,
.btn-category,
.badge-bullish,
.badge-bearish,
.badge-neutral,
.list-group-item,
.dropdown-menu,
.input-group-text,
.alert {
    transition: background-color 200ms ease,
                color 200ms ease,
                border-color 200ms ease,
                box-shadow 200ms ease;
}

/* ----------------------------------------------------------
   4. BASE STYLES
   ---------------------------------------------------------- */
body {
    background-color: var(--bg-deep);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* ----------------------------------------------------------
   5. NAVBAR
   ---------------------------------------------------------- */
.navbar-themed {
    background-color: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-border);
    box-shadow: var(--navbar-shadow);
}

[data-theme="light"] .navbar-themed {
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.navbar-themed .navbar-brand {
    color: var(--text-main);
    font-weight: 700;
    letter-spacing: -0.3px;
}

.navbar-themed .navbar-brand:hover {
    color: var(--accent-blue);
}

.navbar-themed .navbar-brand .fa-robot {
    color: var(--accent-blue);
}

/* ----------------------------------------------------------
   6. QUANT PANELS
   ---------------------------------------------------------- */
.quant-panel {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--panel-shadow);
    padding: 24px;
}

[data-theme="light"] .quant-panel {
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.7);
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04),
                0 4px 16px -2px rgba(15, 23, 42, 0.06);
}

/* ----------------------------------------------------------
   7. FORM CONTROLS & INPUTS
   ---------------------------------------------------------- */
.form-control,
.form-select {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--accent-blue);
    color: var(--text-main);
    box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

/* Glow effect on focus */
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25),
                0 0 16px -4px rgba(96, 165, 250, 0.15);
}

[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.18),
                0 0 16px -4px rgba(37, 99, 235, 0.1);
}

.input-group-text {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* Override bootstrap dark form-select arrow for light theme */
[data-theme="light"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ----------------------------------------------------------
   8. SCROLLABLE DROPDOWN MENUS
   ---------------------------------------------------------- */
.scrollable-menu {
    max-height: 250px;
    overflow-y: auto;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px -5px var(--shadow-color);
}

.scrollable-menu .dropdown-item {
    color: var(--text-main);
    transition: background-color 150ms ease, color 150ms ease;
}

.scrollable-menu .dropdown-item:hover,
.scrollable-menu .dropdown-item:focus {
    background-color: var(--hover-bg);
    color: var(--accent-blue);
}

/* Dropdown override for themed context */
.dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
}

.dropdown-item {
    color: var(--text-main);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--hover-bg);
    color: var(--accent-blue);
}

/* Custom scrollbar */
.scrollable-menu::-webkit-scrollbar {
    width: 6px;
}

.scrollable-menu::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 3px;
}

.scrollable-menu::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

/* ----------------------------------------------------------
   9. CATEGORY BUTTONS
   ---------------------------------------------------------- */
.btn-category {
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    background: transparent;
    border-radius: 6px;
    font-weight: 500;
    transition: all 200ms ease;
}

.btn-category:hover,
.btn-category:focus {
    color: var(--text-main);
    border-color: var(--text-muted);
}

[data-theme="dark"] .btn-category:hover,
[data-theme="dark"] .btn-category:focus {
    background-color: var(--hover-bg);
}

[data-theme="light"] .btn-category:hover,
[data-theme="light"] .btn-category:focus {
    background-color: var(--hover-bg);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    box-shadow: 0 1px 4px -1px rgba(37, 99, 235, 0.15);
}

/* ----------------------------------------------------------
   10. SENTIMENT BADGES
   ---------------------------------------------------------- */
.badge-bullish {
    background-color: var(--badge-bull-bg);
    color: var(--bull-green);
    border: 1px solid var(--bull-green);
}

.badge-bearish {
    background-color: var(--badge-bear-bg);
    color: var(--bear-red);
    border: 1px solid var(--bear-red);
}

.badge-neutral {
    background-color: var(--badge-neutral-bg);
    color: var(--text-muted);
    border: 1px solid var(--text-muted);
}

/* ----------------------------------------------------------
   11. THEME TOGGLE BUTTON
   ---------------------------------------------------------- */
.theme-toggle-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: var(--toggle-bg);
    border: 1px solid var(--border-color);
    color: var(--toggle-color);
    font-size: 1rem;
    cursor: pointer;
    transition: all 200ms ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle-btn:hover {
    background-color: var(--toggle-hover);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    transform: scale(1.05);
}

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

/* Icon rotation animation on theme change */
.theme-toggle-btn i {
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 200ms ease;
}

.theme-toggle-btn:hover i {
    transform: rotate(25deg);
}

/* ----------------------------------------------------------
   12. SEARCH RESULTS LIST
   ---------------------------------------------------------- */
#searchResults .list-group-item {
    background-color: var(--panel-bg);
    color: var(--text-main);
    border-color: var(--border-color);
    transition: background-color 150ms ease;
}

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

/* ----------------------------------------------------------
   13. UTILITY OVERRIDES
   ---------------------------------------------------------- */

/* Text color utilities — theme aware */
.text-themed-main {
    color: var(--text-main) !important;
}

.text-themed-muted {
    color: var(--text-muted) !important;
}

.text-themed-accent {
    color: var(--accent-blue) !important;
}

/* Borders */
.border-themed {
    border-color: var(--border-color) !important;
}

/* Override bootstrap .text-muted for both themes */
.text-muted {
    color: var(--text-muted) !important;
}

/* Override bootstrap text-info for theme awareness */
[data-theme="light"] .text-info {
    color: var(--info-color) !important;
}

[data-theme="light"] .text-warning {
    color: var(--warning-color) !important;
}

[data-theme="light"] .text-success {
    color: var(--success-color) !important;
}

/* Override bootstrap .text-secondary */
.text-secondary {
    color: var(--text-muted) !important;
}

/* Alerts */
.alert-danger {
    background-color: var(--badge-bear-bg);
    color: var(--bear-red);
    border-color: var(--bear-red);
}

/* Border-bottom/top overrides for consistency */
.border-secondary {
    border-color: var(--border-color) !important;
}

.border-bottom {
    border-color: var(--border-color) !important;
}

/* Links inside panels */
.quant-panel a:not(.btn):not(.dropdown-item):not(.badge) {
    color: var(--link-color);
}

.quant-panel a:not(.btn):not(.dropdown-item):not(.badge):hover {
    color: var(--accent-blue);
    filter: brightness(1.2);
}

/* ----------------------------------------------------------
   14. SPINNER & LOADING STATES
   ---------------------------------------------------------- */
.spinner-border {
    color: var(--accent-blue);
}

/* ----------------------------------------------------------
   15. HR / DIVIDERS
   ---------------------------------------------------------- */
hr {
    border-color: var(--border-color);
    opacity: 0.6;
}

/* ----------------------------------------------------------
   16. BUTTON PRIMARY — Ensure consistency across themes
   ---------------------------------------------------------- */
.btn-primary {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #FFFFFF;
    font-weight: 600;
    transition: all 200ms ease;
}

.btn-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px -2px var(--focus-ring);
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

/* ----------------------------------------------------------
   17. MARKET PULSE PANEL — theme override
   ---------------------------------------------------------- */
.market-pulse-panel {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .market-pulse-panel {
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ----------------------------------------------------------
   18. SELECTION STYLES
   ---------------------------------------------------------- */
::selection {
    background-color: var(--accent-blue);
    color: #FFFFFF;
}

/* ----------------------------------------------------------
   19. RESPONSIVE ADJUSTMENTS
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .quant-panel {
        padding: 16px;
        border-radius: 10px;
    }

    .theme-toggle-btn {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }
}

/* ----------------------------------------------------------
   20. PRINT STYLES
   ---------------------------------------------------------- */
@media print {
    body {
        background: #FFFFFF !important;
        color: #000000 !important;
    }

    .quant-panel {
        box-shadow: none !important;
        border: 1px solid #DDD !important;
    }

    .theme-toggle-btn,
    .navbar {
        display: none !important;
    }
}