/* Emergency override styles for mobile */
@media (max-width: 991px) {
    /* Force hide sidebar completely on mobile */
    #sidebar, .sidebar, div#sidebar, [id="sidebar"] { 
        display: none !important;
        width: 0 !important; 
        min-width: 0 !important;
        max-width: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        height: 0 !important;
        overflow: hidden !important;
        transform: translateX(-100%) !important;
    }
    
    /* Force content to be full width */
    #content, .content-wrapper, [id="content"] {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Force grid system to stack */
    .dbc-row, .row, .d-flex:not(.navbar-nav):not(.align-items-center) {
        display: block !important;
        flex-direction: column !important;
    }
    
    .dbc-col, [class*="col-"], .col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 15px !important;
    }
    
    /* Fix card layout */
    .card, .dash-card {
        margin-bottom: 15px !important;
        width: 100% !important;
    }

    /* Fix for ISA Analysis cards */
    [id*="isa-"], [class*="isa-"] {
        width: 100% !important;
        display: block !important;
        margin-bottom: 15px !important;
    }

    /* Force dashboard cards to stack properly */
    .dash-card .row,
    .card .row {
        display: block !important;
    }

    .dash-card [class*="col-"],
    .card [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Fix Dash inline flex elements */
    div[style*="display: flex"] {
        display: block !important;
    }
    
    /* Standard Bootstrap navbar styles */
    .navbar-collapse {
        overflow: hidden;
    }
    
    .navbar-collapse.show {
        display: block !important;
    }
    
    /* Mobile navbar text color overrides */
    .navbar-brand, .navbar-brand-text, .navbar-brand span {
        color: white !important;
    }
    
    .navbar-nav .nav-link {
        color: white !important;
    }
    
    .navbar-nav .nav-link:hover {
        color: #e0e0e0 !important;
    }
    
    .navbar-nav .nav-link.active {
        color: white !important;
        font-weight: bold !important;
    }
}

/* Desktop sidebar settings - Ensure when collapsed sidebar fully hides */
#sidebar[style*="width: 0"], #sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transform: translateX(-100%) !important;
}

/* Fix Navigation heading in mobile view */
@media (max-width: 768px) {
    /* Fix mobile navigation header */
    .mobile-nav h1, 
    .navbar-brand h1,
    .mobile-header h1,
    h1.navigation-title,
    .navigation-label,
    #navigation-label,
    .navbar-header-title {
        color: white !important;
        font-weight: 600 !important;
        font-size: 1.75rem !important;
        opacity: 1 !important;
        -webkit-text-fill-color: white !important;
    }
    
    /* Fix Trading Analysis heading */
    .trading-analysis-header,
    #trading-analysis-header,
    .trading-section-title,
    .analysis-title,
    .trading-analysis-title {
        color: white !important;
        font-weight: 600 !important;
        font-size: 1.25rem !important;
        opacity: 1 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        -webkit-text-fill-color: white !important;
    }
    
    /* Add more whitespace */
    .content-section,
    .dashboard-section,
    section {
        margin-bottom: 3rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Update mobile heading labels to be darker */
    .mobile-nav .navbar-brand,
    .navbar-text,
    .nav-label,
    .section-label {
        color: var(--color-gray-900) !important;
    }
}

/* Ultra-specific selectors for the Navigation and Trading Analysis labels */
#mobile-menu-container > div > div > h1,
.mobile-navbar > nav > div > h1,
.navigation-wrapper > h1,
.mobile-menu h1,
h1.mobile-title,
.menu-header > h1 {
    color: var(--color-gray-900) !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Ultra-specific targeting for the Trading Analysis text at bottom */
#trading-analysis,
.trading-analysis,
.menu-content > div > h3,
.menu-section-title,
.trading-title {
    color: var(--color-gray-900) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    opacity: 1 !important;
}

/* Target any heading with "Trading" in the class or id */
[class*="trading"], 
[id*="trading"],
[class*="analysis"],
[id*="analysis"] {
    color: var(--color-gray-900) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* Force all h1-h6 to have visible text in mobile view */
@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        color: #333333 !important;
        opacity: 1 !important;
        font-weight: 600 !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #333333 !important;
    }
    
    /* Exception for navbar titles that should remain white */
    .navbar h1,
    .navbar-brand h1,
    nav h1,
    header h1,
    h1[class*="navbar"],
    h1[id*="navbar"] {
        color: white !important;
        -webkit-text-fill-color: white !important;
    }
    
    /* LOGIN/REGISTER PAGE SPECIFIC: Ensure text on purple background is white */
    .auth-image .auth-content h2,
    .auth-image .auth-overlay + .auth-content h2,
    div[class*="auth-image"] h2,
    div[class*="auth-image"] .auth-content h2,
    body:not(.dashboard-page) .auth-image h2,
    body:not(.dashboard-page) .auth-image .auth-content h2 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        opacity: 1 !important;
        font-weight: 700 !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .auth-image .auth-content p,
    .auth-image .auth-overlay + .auth-content p,
    div[class*="auth-image"] p,
    div[class*="auth-image"] .auth-content p,
    body:not(.dashboard-page) .auth-image p,
    body:not(.dashboard-page) .auth-image .auth-content p {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        opacity: 0.9 !important;
        font-weight: 400 !important;
    }
}

/* Super specific override for Navigation header in mobile view */
h1,
h1 *,
nav h1,
.mobile-navbar h1,
[role="navigation"] h1,
[class*="navbar"] h1,
[id*="navbar"] h1,
[class*="navigation"] h1,
[id*="navigation"] h1,
div[role="banner"] h1,
header h1,
.navbar-brand h1,
[class^="nav"] h1 {
    color: var(--color-gray-900) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Fix mobile navbar white text */
@media (max-width: 991px) {
    /* Mobile navbar text color overrides - make text white instead of dark */
    .navbar-brand, 
    .navbar-brand-text, 
    .navbar-brand span,
    .navigation-text,
    .navbar-text,
    .navbar-header,
    .navbar-title,
    #navbar-title,
    .mobile-title,
    .tfe-api-title,
    [class*="title"] {
        color: white !important;
        font-weight: 600 !important;
    }
    
    .navbar-nav .nav-link {
        color: white !important;
    }
    
    .navbar-nav .nav-link:hover {
        color: #e0e0e0 !important;
    }
    
    .navbar-nav .nav-link.active {
        color: white !important;
        font-weight: bold !important;
    }

    /* TFE API Dashboard title and subtitle */
    h1, h2 {
        color: #333333 !important;
        opacity: 1 !important;
        font-weight: 600 !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #333333 !important;
    }

    /* Explicitly target navigation label */
    h1:contains("Navigation"),
    nav h1,
    h1.navigation-label,
    #navigation-label {
        color: white !important;
        font-weight: 700 !important;
        opacity: 1 !important;
        letter-spacing: normal !important;
        text-shadow: none !important;
    }
}

/* Ultra high specificity overrides for exactly what's in screenshot */
body h1:first-child,
#root h1:first-child,
div[class] h1:first-child,
nav + div h1:first-child,
body > div h1,
.mobile-menu h1,
div[class*="mobile"] h1,
div[data-dash-is-loading] + div h1,
div[class*="wrapper"] h1,
div[class*="main"] h1,
header h1,
.navbar h1,
nav h1,
[role="banner"] h1,
h1.navigation-label,
#navigation-label,
h1[class*="navigation"],
h1#navigation,
h1[id*="navigation"],
h1[class*="navbar"],
h1[id*="navbar"] {
    color: white !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: white !important;
}

/* Force all blue icons to use different colors based on position */
i.fa, 
i.fas, 
i.far, 
i.fab,
svg.fa, 
svg.fas, 
svg.far, 
svg.fab,
div[class*="icon"] i,
div[class*="icon"] svg,
span[class*="icon"] i,
span[class*="icon"] svg,
[class*="feature"] i,
[class*="feature"] svg {
    color: inherit !important;
}

/* OVERRIDE: Carefully target specific feature icons in content cards/dashboard to be blue */
.card div:nth-of-type(n) .feature-icon,
.card div:nth-of-type(n) [class*="feature"] i,
.card div:nth-of-type(n) [class*="feature"] svg,
.dashboard-card div:nth-of-type(n) .feature-icon,
.dashboard-card div:nth-of-type(n) [class*="feature"] i,
.dashboard-card div:nth-of-type(n) [class*="feature"] svg,
.content-card div:nth-of-type(n) .feature-icon,
.content-card div:nth-of-type(n) [class*="feature"] i,
.content-card div:nth-of-type(n) [class*="feature"] svg,
.trading-card div:nth-of-type(n) .feature-icon,
.trading-card div:nth-of-type(n) [class*="feature"] i,
.trading-card div:nth-of-type(n) [class*="feature"] svg,
.analysis-card div:nth-of-type(n) .feature-icon,
.analysis-card div:nth-of-type(n) [class*="feature"] i,
.analysis-card div:nth-of-type(n) [class*="feature"] svg {
    color: #4285F4 !important; /* Google blue */
    -webkit-text-fill-color: #4285F4 !important;
}

/* Only target orange-colored icons in the main content */
i[style*="color: #ff6b35"]:not(.fa-chevron-left):not(.chevron-left):not([class*="nav"]),
i[style*="color: #F4B400"]:not(.fa-chevron-left):not(.chevron-left):not([class*="nav"]),
i[style*="color: #ea4335"]:not(.fa-chevron-left):not(.chevron-left):not([class*="nav"]),
i[style*="color: orange"]:not(.fa-chevron-left):not(.chevron-left):not([class*="nav"]),
i[style*="color: #fd7e14"]:not(.fa-chevron-left):not(.chevron-left):not([class*="nav"]),
svg[style*="color: #ff6b35"]:not(.fa-chevron-left):not(.chevron-left):not([class*="nav"]),
svg[style*="color: #F4B400"]:not(.fa-chevron-left):not(.chevron-left):not([class*="nav"]),
svg[style*="color: #ea4335"]:not(.fa-chevron-left):not(.chevron-left):not([class*="nav"]),
svg[style*="color: orange"]:not(.fa-chevron-left):not(.chevron-left):not([class*="nav"]),
svg[style*="color: #fd7e14"]:not(.fa-chevron-left):not(.chevron-left):not([class*="nav"]) {
    color: #4285F4 !important; /* Google blue */
    -webkit-text-fill-color: #4285F4 !important;
}

/* SPECIFIC EXCEPTION: Ensure Redis cache icon is white */
[id*="cache"] i,
[id*="cache"] .fa,
[id*="cache"] .fas,
[id*="cache"] svg,
[class*="cache"] i,
[class*="cache"] .fa,
[class*="cache"] .fas,
[class*="cache"] svg,
[id*="redis"] i,
[id*="redis"] .fa,
[id*="redis"] .fas,
[id*="redis"] svg,
[class*="redis"] i,
[class*="redis"] .fa,
[class*="redis"] .fas,
[class*="redis"] svg,
.cache-modal i,
.cache-modal .fa,
.cache-modal .fas,
.cache-modal svg,
#cache-modal i,
#cache-modal .fa,
#cache-modal .fas,
#cache-modal svg {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* Override the header background to ensure it's white */
.dashboard-header,
[class*="dashboard-header"],
[id*="dashboard-header"],
header[class*="dash"],
header[id*="dash"],
header.main-header,
.header-banner,
[class*="header-banner"],
[id*="header-banner"] {
    /* Removing white background to fix the issue */
    /* background-color: white !important; */
    /* background: white !important; */
    color: white !important;
}

/* Make h2 headings black instead of purple */
h2.section-header,
.section-header,
h2[class*="navigation"],
h2.dashboard-title,
#quick-navigation,
h2:not([class*="dashboard"]), /* Target regular h2s but not dashboard h2s */
.quick-navigation,
.trading-analysis,
h2.trading-analysis,
[class*="quick-navigation"],
[id*="quick-navigation"],
[class*="trading-analysis"],
[id*="trading-analysis"] {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    font-weight: 600 !important;
}

/* Override white color for non-dashboard h2 elements in mobile view */
@media (max-width: 768px) {
    h2:not([class*="dashboard"]):not([id*="dashboard"]) {
        color: #333333 !important;
        -webkit-text-fill-color: #333333 !important;
    }
}

/* Make sidebar collapse chevron white */
.sidebar-toggle i,
.sidebar-toggle .fa,
.sidebar-toggle .fas,
.sidebar-toggle svg,
[class*="sidebar-toggle"] i,
[id*="sidebar-toggle"] i,
[class*="collapse"] i,
.sidebar-collapse i,
i.sidebar-chevron,
.sidebar-chevron i,
.chevron-icon,
button[aria-label*="sidebar"] i,
button[aria-label*="collapse"] i,
.collapse-sidebar i,
.btn-sidebar-toggle i {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* Fix the left purple navigation box chevron */
.quick-nav-chevron,
.left-chevron,
.sidebar-nav-chevron,
.purple-box i,
.purple-box .fa,
.purple-box .fas,
.purple-nav-box i,
i.chevron-left,
.chevron-left,
.fa-chevron-left,
.card-navigation-chevron,
[class*="prev"] i,
[id*="prev"] i,
[aria-label*="previous"] i,
[class*="prev-slide"] i,
div[style*="background-color: #6d28d9"] i,
div[style*="background-color: rgb(109, 40, 217)"] i,
div[class*="purple"] i {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* Target specifically the purple box and its contents */
.purple-box,
[class*="purple-box"],
[style*="background-color: #6d28d9"],
[style*="background-color: rgb(109, 40, 217)"],
[style*="background-color:#6d28d9"],
[style*="background-color:rgb(109,40,217)"],
[class*="purple-bg"],
[class*="primary-bg"] {
    background-color: #6d28d9 !important;
}

.purple-box *,
[class*="purple-box"] *,
[style*="background-color: #6d28d9"] *,
[style*="background-color: rgb(109, 40, 217)"] *,
[style*="background-color:#6d28d9"] *,
[style*="background-color:rgb(109,40,217)"] *,
[class*="purple-bg"] *,
[class*="primary-bg"] * {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* Fix blue Trading Analysis text */
h2.trading-analysis, 
.trading-analysis,
#trading-analysis,
span.trading-analysis,
.trading-analysis-text,
.blue-trading-text,
.blue-text,
[style*="color: #4285F4"],
[style*="color: rgb(66, 133, 244)"],
[style*="color:#4285F4"],
[style*="color:rgb(66,133,244)"],
[style*="color: #2196f3"],
[style*="color: rgb(33, 150, 243)"],
[style*="color:#2196f3"],
[style*="color:rgb(33,150,243)"],
[style*="color: blue"],
[class*="trading-analysis"] {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    font-weight: 500 !important;
}

/* Ensure section headers are black with the right styling */
h2.section-header,
.section-header,
h2.section-title,
.section-title,
h2[class*="section"],
[class*="section-header"],
[id*="section-header"],
[class*="section-title"],
[id*="section-title"] {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    font-weight: 600 !important;
    position: relative !important;
    padding-bottom: 10px !important;
}

/* Fix the purple underline if needed */
h2.section-header:after,
.section-header:after,
h2.section-title:after,
.section-title:after,
[class*="section-header"]:after,
[id*="section-header"]:after,
[class*="section-title"]:after,
[id*="section-title"]:after {
    background: linear-gradient(to right, #6d28d9, #5b21b6) !important;
}

/* Ultra-specific selectors for Quick Navigation and Trading Analysis sections */
h2,
h2[class],
h2[id],
h2.section-header,
h2.trading-analysis,
h2#trading-analysis,
h2.quick-navigation,
h2#quick-navigation,
#quick-navigation,
#trading-analysis,
.quick-navigation,
.trading-analysis,
[class="quick-navigation"],
[id="quick-navigation"],
[class="trading-analysis"],
[id="trading-analysis"],
h2[class*="navigation"],
h2[class*="quick"],
h2[class*="trading"],
h2[class*="analysis"],
h2[id*="navigation"],
h2[id*="quick"],
h2[id*="trading"],
h2[id*="analysis"] {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    font-weight: 600 !important;
    font-size: 1.75rem !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    -webkit-background-clip: initial !important;
    text-shadow: none !important;
}

/* Override any gradient text effects */
h2[style*="background"],
h2[style*="linear-gradient"],
h2[style*="radial-gradient"],
h2[style*="-webkit-text-fill-color"],
h2[style*="-webkit-background-clip"] {
    background: none !important;
    background-image: none !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
}

/* Target specific colors by hex/rgb values to override */
[style*="color: #6d28d9"],
[style*="color:#6d28d9"],
[style*="color: rgb(109, 40, 217)"],
[style*="color:rgb(109,40,217)"],
[style*="color: #4285F4"], 
[style*="color:#4285F4"],
[style*="color: rgb(66, 133, 244)"],
[style*="color:rgb(66,133,244)"],
[style*="color: #2196f3"], 
[style*="color:#2196f3"],
[style*="color: rgb(33, 150, 243)"],
[style*="color:rgb(33,150,243)"],
[class*="purple-text"],
[class*="blue-text"],
[class*="primary-text"],
[class*="indigo-text"] {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    background: none !important;
    background-image: none !important;
}

/* Target headings by CSS classes or specific text content */
h2,
.heading-with-underline,
.section-heading,
.content-heading,
.page-section-title,
.dashboard-section-title {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
}

/* Fix dark sidebar navigation items to be white */
.sidebar h2,
.sidebar h3,
.sidebar-nav h2,
.sidebar-nav h3,
.sidebar-menu h2,
.sidebar-menu h3,
.sidebar [class*="trading"],
.sidebar [id*="trading"],
.sidebar [class*="analysis"],
.sidebar [id*="analysis"],
.sidebar [class*="isa"],
.sidebar [id*="isa"],
#sidebar h2,
#sidebar h3,
.sidebar-heading,
.sidebar-title,
.sidebar-section-title,
.sidebar-nav-item,
.sidebar-nav-link,
.sidebar-link,
[class*="sidebar"] [class*="trading"],
[class*="sidebar"] [id*="trading"],
[class*="sidebar"] [class*="analysis"],
[class*="sidebar"] [id*="analysis"],
[class*="sidebar"] [class*="isa"],
[class*="sidebar"] [id*="isa"],
nav.sidebar a,
nav.sidebar span,
.nav-sidebar a,
.nav-sidebar span,
[class*="sidebar-nav"] a,
[class*="sidebar-nav"] span,
.sidebar-nav-text,
.sidebar-link-text,
.sidebar-section-text {
    color: white !important;
    -webkit-text-fill-color: white !important;
    opacity: 1 !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Target specifically the Trading Analysis and ISA Analysis labels in sidebar */
.sidebar-nav [class*="trading"],
.sidebar-nav [id*="trading"],
.sidebar-nav [class*="analysis"],
.sidebar-nav [id*="analysis"],
.sidebar-nav [class*="isa"],
.sidebar-nav [id*="isa"],
nav.sidebar [class*="trading"],
nav.sidebar [id*="trading"],
nav.sidebar [class*="analysis"],
nav.sidebar [id*="analysis"],
nav.sidebar [class*="isa"],
nav.sidebar [id*="isa"],
h2.sidebar-heading[class*="trading"],
h2.sidebar-heading[class*="analysis"],
h2.sidebar-heading[class*="isa"],
.sidebar h2.all-caps,
.sidebar h3.all-caps,
.sidebar h2.uppercase,
.sidebar h3.uppercase,
.sidebar .text-uppercase,
.sidebar-nav-text.text-uppercase,
.sidebar-section-text.text-uppercase {
    color: white !important;
    -webkit-text-fill-color: white !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 1rem !important;
}

/* Last resort override for dark uppercase TRADING ANALYSIS on dark backgrounds */
[class*="trading"][style*="text-transform: uppercase"],
[class*="TRADING"],
[id*="TRADING"],
[class*="Trading Analysis"],
[id*="Trading Analysis"],
[class*="trading-analysis"]:not([class*="welcome"]):not([class*="dashboard"]),
[id*="trading-analysis"]:not([id*="welcome"]):not([id*="dashboard"]),
.sidebar-nav-text h2,
.sidebar-nav-text h3,
.sidebar-section-text h2, 
.sidebar-section-text h3,
#TRADING_ANALYSIS, 
.TRADING_ANALYSIS,
#trading_analysis, 
.trading_analysis,
h2:has(+ .trading-content),
h2 ~ .trading-analysis-content,
.trading-section h2,
.trading-section h3 {
    color: white !important;
    -webkit-text-fill-color: white !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    background: none !important;
    font-weight: 600 !important;
    visibility: visible !important;
}

/* Make dashboard icons blue instead of orange */
.dashboard-icon,
.dashboard-feature-icon,
.card-icon,
.feature-icon,
.analysis-icon,
[class*="dashboard"] i,
[class*="dashboard"] svg,
[class*="card"] i:not([class*="cache"]):not([class*="redis"]),
[class*="card"] svg:not([class*="cache"]):not([class*="redis"]),
i.fa-chart-line,
i.fa-chart-bar,
i.fa-chart-pie,
i.fa-chart-area,
i.fa-exchange-alt,
svg.fa-chart-line,
svg.fa-chart-bar,
svg.fa-chart-pie,
svg.fa-chart-area,
svg.fa-exchange-alt {
    color: #4285F4 !important; /* Google blue */
    -webkit-text-fill-color: #4285F4 !important;
}

/* Override specifically the icons in the cards shown in the screenshot */
[class*="dashboard-card"] i:not(.fa-chevron-left),
[class*="feature-card"] i:not(.fa-chevron-left),
[id*="trading-executive"] i:not(.fa-chevron-left),
[id*="broker-analysis"] i:not(.fa-chevron-left),
[id*="instrument-analysis"] i:not(.fa-chevron-left),
[id*="trading-strategy"] i:not(.fa-chevron-left),
[class*="trading-executive"] i:not(.fa-chevron-left),
[class*="broker-analysis"] i:not(.fa-chevron-left),
[class*="instrument-analysis"] i:not(.fa-chevron-left),
[class*="trading-strategy"] i:not(.fa-chevron-left) {
    color: #4285F4 !important; /* Google blue */
    -webkit-text-fill-color: #4285F4 !important;
}

/* Make Redis cache icon white */
.cache-icon,
.redis-icon,
i.fa-server,
i.fa-database,
svg.fa-server,
svg.fa-database,
[class*="cache"] i,
[class*="cache"] svg,
[class*="redis"] i,
[class*="redis"] svg {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* Reset styles for the navigation icons and left-chevron */
.nav-icon,
i.fa-analytics,
i.fa-graph,
i.fa-chart,
i.fa-tachometer-alt,
i.fa-tachometer,
svg.fa-analytics,
svg.fa-graph,
svg.fa-chart,
svg.fa-tachometer-alt,
svg.fa-tachometer,
.fa-chevron-left,
.chevron-left,
i.chevron-left,
svg.chevron-left {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Override any orange-colored icons */
i[style*="color: #ff6b35"],
i[style*="color: #F4B400"],
i[style*="color: #ea4335"],
i[style*="color: orange"],
i[style*="color: #fd7e14"],
svg[style*="color: #ff6b35"],
svg[style*="color: #F4B400"],
svg[style*="color: #ea4335"],
svg[style*="color: orange"],
svg[style*="color: #fd7e14"] {
    color: #4285F4 !important; /* Google blue */
    -webkit-text-fill-color: #4285F4 !important;
}

/* Target only the feature icons in dashboard content cards with more specific selectors */
.card .feature-icon,
.dashboard-card .feature-icon,
.quick-link-card .feature-icon,
.card[class*="trading"] .feature-icon,
.card[class*="analysis"] .feature-icon,
.dashboard-content .feature-icon,
.dashboard-card-content .feature-icon,
.card-content .feature-icon {
    color: #4285F4 !important; /* Google blue */
    -webkit-text-fill-color: #4285F4 !important;
}

/* Target only chart and analysis-related icons */
i.fa-chart-line,
i.fa-chart-bar,
i.fa-chart-pie, 
i.fa-chart-area,
i.fa-exchange-alt,
i.fa-arrow-right,
i.fa-arrow-left:not(.fa-chevron-left):not(.chevron-left),
svg.fa-chart-line,
svg.fa-chart-bar,
svg.fa-chart-pie,
svg.fa-chart-area,
svg.fa-exchange-alt,
svg.fa-arrow-right,
svg.fa-arrow-left:not(.fa-chevron-left):not(.chevron-left) {
    color: #4285F4 !important; /* Google blue */
    -webkit-text-fill-color: #4285F4 !important;
}

/* Keep left/right navigation chevrons in the purple box white */
.left-chevron,
.chevron-left,
i.chevron-left,
.fa-chevron-left,
i.fa-chevron-left,
svg.fa-chevron-left,
.purple-box i,
.purple-box .fa,
.purple-box .fas,
.purple-nav-box i,
[style*="background-color: #6d28d9"] i,
[style*="background-color: rgb(109, 40, 217)"] i,
[class*="prev"] i,
[id*="prev"] i {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* HIGHEST PRIORITY OVERRIDE: Ensure all sidebar icons are white */
.sidebar i,
.sidebar .fa,
.sidebar .fas,
.sidebar .far,
.sidebar .fab,
.sidebar .fal,
.sidebar svg,
#sidebar i,
#sidebar .fa,
#sidebar .fas,
#sidebar .far,
#sidebar .fab,
#sidebar .fal,
#sidebar svg,
div[class*="sidebar"] i,
div[class*="sidebar"] .fa,
div[class*="sidebar"] .fas,
div[class*="sidebar"] .far,
div[class*="sidebar"] .fab,
div[class*="sidebar"] .fal,
div[class*="sidebar"] svg,
div[id*="sidebar"] i,
div[id*="sidebar"] .fa,
div[id*="sidebar"] .fas,
div[id*="sidebar"] .far,
div[id*="sidebar"] .fab,
div[id*="sidebar"] .fal,
div[id*="sidebar"] svg,
nav.sidebar i,
nav.sidebar .fa,
nav.sidebar .fas,
nav.sidebar .far,
nav.sidebar .fab,
nav.sidebar .fal,
nav.sidebar svg,
[class*="sidebar-nav"] i,
[class*="sidebar-nav"] .fa,
[class*="sidebar-nav"] .fas,
[class*="sidebar-nav"] .far,
[class*="sidebar-nav"] .fab,
[class*="sidebar-nav"] .fal,
[class*="sidebar-nav"] svg,
[class*="nav-sidebar"] i,
[class*="nav-sidebar"] .fa,
[class*="nav-sidebar"] .fas,
[class*="nav-sidebar"] .far,
[class*="nav-sidebar"] .fab,
[class*="nav-sidebar"] .fal,
[class*="nav-sidebar"] svg,
.sidebar-menu i,
.sidebar-menu .fa,
.sidebar-menu .fas,
.sidebar-menu .far,
.sidebar-menu .fab,
.sidebar-menu .fal,
.sidebar-menu svg,
.nav-item i,
.nav-item .fa,
.nav-item .fas,
.nav-item .far,
.nav-item .fab,
.nav-item .fal,
.nav-item svg,
.sidebar a i,
.sidebar a .fa,
.sidebar a .fas,
.sidebar a .far,
.sidebar a .fab,
.sidebar a .fal,
.sidebar a svg,
.sidebar .nav-link i,
.sidebar .nav-link .fa,
.sidebar .nav-link .fas,
.sidebar .nav-link .far,
.sidebar .nav-link .fab,
.sidebar .nav-link .fal,
.sidebar .nav-link svg {
    color: white !important;
    -webkit-text-fill-color: white !important;
    fill: white !important;
    opacity: 1 !important;
}

/* Make all button text white in purple buttons */
.btn,
button,
a.btn,
button.btn,
input[type="button"],
input[type="submit"],
[class*="btn"],
[class*="button"],
.card .btn,
.card button,
.dashboard-card .btn,
.dashboard-card button,
[class*="purple"] .btn,
[class*="purple"] button,
[style*="background-color: #6d28d9"] .btn,
[style*="background-color: #6d28d9"] button,
[style*="background-color: rgb(109, 40, 217)"] .btn,
[style*="background-color: rgb(109, 40, 217)"] button,
[style*="background-color: #5b21b6"] .btn,
[style*="background-color: #5b21b6"] button,
[style*="background-color: rgb(91, 33, 182)"] .btn,
[style*="background-color: rgb(91, 33, 182)"] button,
.btn-primary,
.btn-secondary,
.btn-info,
.btn-dark,
.btn-purple,
a[class*="view"],
a[class*="View"],
button[class*="view"],
button[class*="View"],
.view-btn,
.view-button,
.card-button,
.action-button {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* Ultra-specific targeting for the View button in Trading Executive Summary */
[class*="trading-executive"] .btn,
[class*="trading-executive"] button,
[class*="trading-executive"] a,
[id*="trading-executive"] .btn,
[id*="trading-executive"] button,
[id*="trading-executive"] a,
.card a.btn,
.card button.btn,
.dashboard-card a.btn,
.dashboard-card button.btn,
a[href*="trading"],
a[href*="analysis"],
a[href*="executive"],
a[href*="summary"],
.card [class*="btn"][style*="background"],
.dashboard-card [class*="btn"][style*="background"],
.card [class*="btn"][style*="bg-"],
.dashboard-card [class*="btn"][style*="bg-"],
.btn[style*="background-color: #6d28d9"],
.btn[style*="background-color: rgb(109, 40, 217)"],
.btn[style*="background: #6d28d9"],
.btn[style*="background: rgb(109, 40, 217)"],
[style*="background-color: #6d28d9"] a,
[style*="background-color: rgb(109, 40, 217)"] a,
[style*="background: #6d28d9"] a,
[style*="background: rgb(109, 40, 217)"] a {
    color: white !important;
    -webkit-text-fill-color: white !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

/* !!! HIGHEST PRIORITY !!! - Purple background buttons must have white text */
.btn-primary,
.btn-purple,
a.btn-primary,
a.btn-purple,
button.btn-primary,
button.btn-purple,
.card-btn,
a.card-btn,
button.card-btn,
[class$="-primary"],
[class$="-purple"],
[class*="btn"][style*="background-color: #6d28d9"],
[class*="btn"][style*="background-color: rgb(109, 40, 217)"],
[class*="btn"][style*="background-color: #5b21b6"],
[class*="btn"][style*="background-color: rgb(91, 33, 182)"],
button[style*="background-color: #6d28d9"],
button[style*="background-color: rgb(109, 40, 217)"],
button[style*="background-color: #5b21b6"],
button[style*="background-color: rgb(91, 33, 182)"],
a[style*="background-color: #6d28d9"],
a[style*="background-color: rgb(109, 40, 217)"],
a[style*="background-color: #5b21b6"],
a[style*="background-color: rgb(91, 33, 182)"],
[class*="view-btn"],
[class*="view-button"],
[class*="card-btn"],
[class*="card-button"],
[class*="btn-view"],
[class*="button-view"],
[class*="view"],
[class*="action"],
a:not([class]):not([id])[style*="background-color"],
button:not([class]):not([id])[style*="background-color"],
.card a:not([class]):not([id]),
.card button:not([class]):not([id]),
.dashboard-card a:not([class]):not([id]),
.dashboard-card button:not([class]):not([id]) {
    color: white !important;
    -webkit-text-fill-color: white !important;
    fill: white !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Mobile fixes for login and register pages */
@media (max-width: 768px) {
    /* Hide the left decorative image/panel completely */
    .auth-image {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        clip-path: none !important;
        position: absolute !important;
        left: -9999px !important;
        visibility: hidden !important;
    }
    
    /* Make the form container take full width and add proper spacing */
    .auth-container {
        flex-direction: column !important;
        min-height: 100vh !important;
        height: auto !important;
        padding: 0 !important;
    }
    
    .auth-form-container {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
        padding: 2rem 1.5rem !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        margin: 0 !important;
        min-height: 100vh !important;
    }
    
    /* Add more space at the bottom for copyright text */
    .page-footer {
        position: relative !important;
        padding: 2rem 1rem !important;
        margin-top: 2rem !important;
        bottom: 0 !important;
    }
    
    /* Ensure buttons have enough space */
    .btn-primary {
        margin-bottom: 2rem !important;
        padding: 1rem 0.8rem !important;
    }
    
    /* Fix form layout */
    .form-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .form-group {
        margin-bottom: 1.5rem !important;
    }
    
    /* Make text more readable */
    .auth-subtitle {
        margin-bottom: 2rem !important;
        padding: 0 1rem !important;
    }
    
    /* Fix logo size for mobile */
    .tfe-logo {
        max-height: 60px !important;
    }
    
    /* Add proper spacing and alignment for the auth footer */
    .auth-footer {
        margin-top: 2rem !important;
        margin-bottom: 1rem !important;
        padding: 0 1rem !important;
    }
}

/* Additional fixes specifically for login page on mobile */
@media (max-width: 768px) {
    /* Fix purple gradient footer on login page */
    .auth-footer-gradient,
    .auth-gradient-footer,
    [class*="gradient-footer"],
    [class*="footer-gradient"],
    [class*="auth"] + div[style*="background"],
    [class*="login"] + div[style*="background"],
    [class*="register"] + div[style*="background"],
    [class*="auth-form"] + div[style*="background"],
    [class*="auth-container"] + div[style*="background"],
    .page-footer + div[style*="background"],
    div[style*="linear-gradient"],
    div[style*="background: linear-gradient"],
    div[style*="background-image: linear-gradient"],
    [class*="auth"] ~ div[style*="background-color: #6d28d9"],
    [class*="auth"] ~ div[style*="background-color: rgb(109, 40, 217)"],
    [class*="auth"] ~ div[style*="background: linear-gradient"],
    [class*="page-content"] > div:last-child[style*="background"],
    [class*="bg-gradient"],
    [id*="bg-gradient"],
    [class*="gradient-bg"],
    [id*="gradient-bg"] {
        position: relative !important;
        margin-top: 2rem !important;
        height: auto !important;
        min-height: 150px !important;
        padding: 2rem 1.5rem !important;
        z-index: 1 !important;
    }
    
    /* Ensure all auth components stack properly on mobile */
    body > div,
    .auth-page > div,
    .login-page > div,
    .register-page > div,
    #root > div,
    .app-container > div {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    /* Ensure content doesn't overflow */
    .auth-container,
    .auth-form-container,
    .login-container,
    .register-container,
    form[id*="login"],
    form[id*="register"],
    form[class*="login"],
    form[class*="register"],
    form[id*="auth"],
    form[class*="auth"] {
        overflow-y: visible !important;
        height: auto !important;
        min-height: auto !important;
        margin-bottom: 3rem !important;
    }
    
    /* Fix spacing around copyright */
    .copyright,
    .copyright-text,
    [class*="copyright"],
    [id*="copyright"],
    p:contains("© 2025"),
    div:contains("© 2025"),
    div:contains("rights reserved") {
        margin-top: 3rem !important;
        margin-bottom: 1rem !important;
        padding: 1rem !important;
        position: relative !important;
        display: block !important;
        text-align: center !important;
        clear: both !important;
    }
}

/* Direct fix for purple bottom sections */
@media (max-width: 768px) {
    /* Target the exact purple sections at bottom of login/register pages */
    .auth-insights,
    .insights-section,
    .login-insights,
    .register-insights,
    [class*="gradient-section"],
    [id*="gradient-section"],
    [style*="background-color: #6d28d9"],
    [style*="background-color: rgb(109, 40, 217)"],
    [style*="background: linear-gradient(135deg, #250076"],
    [style*="background-image: linear-gradient(135deg, #250076"],
    [style*="background: linear-gradient(135deg, rgb(37, 0, 118)"],
    [style*="background-image: linear-gradient(135deg, rgb(37, 0, 118)"] {
        position: relative !important;
        width: 100% !important;
        margin-top: 3rem !important;
        padding: 2rem 1.5rem !important;
        z-index: 1 !important;
        border-radius: 0 !important;
        clip-path: none !important;
    }
    
    /* Fix bottom gradient text visibility */
    .auth-insights *,
    .insights-section *,
    .login-insights *,
    .register-insights *,
    [class*="gradient-section"] *,
    [id*="gradient-section"] *,
    [style*="background-color: #6d28d9"] *,
    [style*="background-color: rgb(109, 40, 217)"] *,
    [style*="background: linear-gradient(135deg, #250076"] *,
    [style*="background-image: linear-gradient(135deg, #250076"] *,
    [style*="background: linear-gradient(135deg, rgb(37, 0, 118)"] *,
    [style*="background-image: linear-gradient(135deg, rgb(37, 0, 118)"] * {
        color: white !important;
        -webkit-text-fill-color: white !important;
        font-weight: 500 !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }
    
    /* Fix height of elements to ensure proper stacking */
    .auth-form-container {
        min-height: 0 !important;
    }
    
    /* Create buffer space at bottom of forms */
    .auth-container {
        padding-bottom: 2rem !important;
    }
    
    /* Make all form content visible */
    form,
    .form-container,
    .form-wrapper,
    .auth-form,
    .login-form,
    .register-form {
        margin-bottom: 3rem !important;
    }
}

/* Dashboard-specific header overrides for mobile */
@media (max-width: 991px) {
    /* Ensure Quick Navigation and Trading Analysis headers are dark */
    h2.quick-navigation,
    h2.trading-analysis,
    h2#quick-navigation,
    h2#trading-analysis,
    #quick-navigation,
    #trading-analysis,
    .quick-navigation,
    .trading-analysis,
    [class*="quick-navigation"],
    [id*="quick-navigation"],
    [class*="trading-analysis"],
    [id*="trading-analysis"],
    h2[class*="section-header"],
    h2[class*="section-title"],
    .card h2,
    .dash-card h2,
    .card-title {
        color: #333333 !important;
        -webkit-text-fill-color: #333333 !important;
        font-weight: 600 !important;
        font-size: 1.5rem !important;
    }
    
    /* Dashboard section descriptions should also be dark */
    .card p,
    .dash-card p,
    .card-text,
    .card-description,
    .card-body p,
    [class*="card-text"],
    [class*="card-description"],
    .trading-executive-summary p,
    [class*="trading-executive"] p {
        color: #555555 !important;
        -webkit-text-fill-color: #555555 !important;
    }
    
    /* Ensure card buttons have white text */
    .card .btn,
    .dash-card .btn,
    button[class*="View"],
    a[class*="View"] {
        color: white !important;
        -webkit-text-fill-color: white !important;
    }
}

/* Additional Login/Register page overrides for the purple section */
.auth-image .auth-content h2,
div[class*="auth-image"] h2,
.auth-image .auth-content .heading,
.auth-overlay + .auth-content h2,
[class*="auth-image"] [class*="content"] h2,
[class*="auth-content"] h2,
[class*="auth"] [style*="background"] h2,
[class*="login"] [style*="background"] h2,
[class*="register"] [style*="background"] h2,
.auth-image h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.auth-image .auth-content p,
div[class*="auth-image"] p,
.auth-image .auth-content .description,
.auth-overlay + .auth-content p,
[class*="auth-image"] [class*="content"] p,
[class*="auth-content"] p,
[class*="auth"] [style*="background"] p,
[class*="login"] [style*="background"] p,
[class*="register"] [style*="background"] p,
.auth-image p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 0.9 !important;
    font-weight: 400 !important;
}

/* Login/Register form text fixes - ensure dark text in form elements */
.auth-form-container h1,
.auth-form-container .auth-subtitle,
.auth-form-container label,
.auth-form-container .form-group label,
.auth-form-container .form-actions label,
.auth-form-container .remember-me label,
.auth-form-container .forgot-password,
.auth-form-container .auth-footer p,
.auth-form-container .page-footer {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Fix the "Welcome Back" heading specifically */
.auth-form-container h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    margin-bottom: 0.5rem !important;
}

/* Make "Forgot password" link purple */
.forgot-password,
a.forgot-password,
.auth-form-container .forgot-password {
    color: #6d28d9 !important;
    -webkit-text-fill-color: #6d28d9 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

/* Purple for register and login links */
.auth-footer a,
.auth-form-container .auth-footer a {
    color: #6d28d9 !important;
    -webkit-text-fill-color: #6d28d9 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

/* Form checkbox remember me */
.remember-me,
.remember-me label,
.auth-form-container .remember-me,
.auth-form-container .remember-me label {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    font-weight: 400 !important;
}

/* Account section mobile fixes */
.account-section {
    text-align: left !important;
}

.account-section .mt-4,
.account-section div:not(.d-flex) {
    text-align: left !important;
}

.account-section .btn {
    margin: 0 !important;
    justify-content: flex-start !important;
}