/* =============================================================================
   STOCK GURU - CUSTOM STYLES
   Imports professional theme first, then applies custom overrides
   ============================================================================= */

/* Import the professional theme (loaded separately by Dash from assets/css) */
/* Note: professional.css is loaded automatically by Dash */

/* Define Custom Color Variables - Legacy support */
:root {
    /* Whites */
    --pure-white: #ffffff;
    --off-white: #f4f3f5;
    --warm-white: #fff8f3;
    
    /* Warm Grays */
    --warm-light-gray: #e8e6df;
    --mid-gray: #d7d2cb;
    --warm-gray: #8c8279;
    
    /* Cool Grays */
    --light-gray: #d9d9d6;
    --cool-gray: #b1b3b3;
    --dark-gray: #454142;
    
    /* Browns */
    --light-brown: #e1d3c7;
    --brown: #bf9474;
    --dark-brown: #5c4738;
    
    /* Yellows */
    --light-yellow: #ffe399;
    --yellow: #ffb900;
    --dark-yellow: #7f5a1a;
    
    /* Oranges */
    --light-orange: #ffa38b;
    --orange: #ff5c39;
    --dark-orange: #73391d;
    
    /* Reds */
    --light-red: #ffb3bb;
    --red: #f4364c;
    --dark-red: #73262f;
    
    /* Magentas */
    --light-magenta: #d59ed7;
    --magenta: #c03bc4;
    --dark-magenta: #702573;
    
    /* Purples */
    --light-purple: #c5b4e3;
    --purple: #8661c5;
    --dark-purple: #463668;
    
    /* Blues */
    --light-blue: #50e6ff;
    --blue: #0078d4;
    --mid-blue:  #51aeda;
    --dark-blue:  #243a5e;
    
    /* Teals */
    --light-teal: #b9dcd2;
    --teal: #49c5b1;
    --dark-teal: #225b62;
    
    /* Greens */
    --light-green: #d4ec8e;
    --green: #8de971;
    --dark-green: #07641d;
    
    /* Blacks */
    --blue-black: #091f2c;
    --pure-black: #000000;
    --brown-black: #291817;
}

/* Example usage for elements */
body {
    background-color: var(--pure-white); /* Example: using pure white as background */
    color: var(--dark-gray);             /* Example: using dark gray as the text color */
    font-family: 'Segoe UI', 'Segoe UI Regular', 'Segoe UI Semibold', 'sans-serif';
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Segoe UI Semibold', 'sans-serif';
}

/* Style the banner with logo and title */
.banner {
    position: relative; /* Ensure it's positioned relative to its container */
    top: 0;
    left: 0rem; /* Space for the sidebar */
    width: 80%;/*calc(80% - 16rem); /* Full width minus sidebar width */
    z-index: 2; /* Ensure it appears above the sidebar */
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 5px;
    background-color: var(--pure-white); /* Use one of the whites for the background */
    margin-left: 0; /* Add margin to account for the sidebar */
    margin-top: 0; /* Ensure no margin-top if needed */
   
}

.logo {
    width: 175px;   /* Set the width to 150px */
    height: auto;   /* Maintain the aspect ratio */
}
.cscp-logo {
    margin: 0 0 0 50px;
    width: 100px;   /* Set the width to 150px */
    height: auto;   /* Maintain the aspect ratio */
}
.banner-title {
    font-size: 1.5rem;
    color: var(--pure-black); /* Use dark blue for the title text */
    margin-left: 10px;
}

.separator {
    font-size: 1.5rem;
    color: var(--pure-black);
    margin: 0 5px;
}

.sidebar {
    color: var(--pure-white);
    background-color: var(--dark-blue);
    display: flex;
    flex-direction: column; /* Allows vertical alignment */
    justify-content: top; /* Centers content vertically */
    align-items: center; /* Centers content horizontally */
}

.erd-link {
    color: var(--off-white);
}

.my-3 {
    color: var(--pure-white);
    background-color: var(--light-blue);
}

.tbl-box {
    color: var(--pure-black);
    background-color: var(--dark-blue);
    text-align: right;
    text-overflow: ellipsis;
}

.graph-title {
    display: flex;
    flex-direction: column; /* Allows vertical alignment */
    justify-content: center; /* Centers content vertically */
    align-items: center; /* Centers content horizontally */
    color: var(--pure-white);
    background-color: var(--dark-blue);
    text-align: center;
    text-overflow: ellipsis;
    margin-bottom: 7px;
}
/* Add this to your custom.css */
.loading-overlay {
    position: relative;
}

.loading-overlay::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border-top: 4px solid #000;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
    z-index: 999;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.dash-graph .xtick text,
.dash-graph .ytick text,
.dash-graph .legend text,
.dash-graph .annotation text {
  font-size: 14px !important;
}

/* Adjust font family */
.dash-graph text {
  font-family: "Arial", sans-serif !important;
}

.annotation {
    font-family: "Arial", sans-serif !important;
    font-size: 14px !important;
}
/* assets/style.css */
.input-container {
    position: relative;
}

.suggestions {
    border: 1px solid rgba(255,255,255,0.04);
    background-color: var(--panel-dark);
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    color: #dbe9ee;
}

.suggestion-item {
    padding: 8px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: rgba(255,255,255,0.03);
}
.chat-bubble-user {
    background-color: #007bff;
    color: white;
    border-radius: 15px 15px 0 15px;
    padding: 10px;
    margin: 5px;
    max-width: 100%;
    align-self: flex-end;
}

.chat-bubble-bot {
    background-color: #f1f1f1;
    color: black;
    border-radius: 15px 15px 15px 0;
    padding: 10px;
    margin: 5px;
    max-width: 100%;
    align-self: flex-start;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spinning-background {
    animation: spin 10s linear infinite;
}




/* Suggestion item styling */
.suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.suggestion-item:hover {
    background-color: #f8f9fa;
}

/* Scrollbar styling */
#stock-suggestions::-webkit-scrollbar {
    width: 6px;
}

#stock-suggestions::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/* Active suggestion highlight */
.suggestion-item.active {
    background-color: #e9ecef;
}

/* Bell shake animation */
@keyframes bellShake {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(15deg); }
    30% { transform: rotate(-15deg); }
    45% { transform: rotate(10deg); }
    60% { transform: rotate(-10deg); }
    75% { transform: rotate(5deg); }
    85% { transform: rotate(-5deg); }
}

/* Bell icon base styles */
#bell-icon {
    font-size: 1.5rem;
    transition: color 0.3s ease, text-shadow 0.3s ease, filter 0.3s ease;
    transform-origin: center center;
    cursor: pointer;
    will-change: filter, color;
}

/* Bell icon hover effects - use filter only to prevent layout shift */
#bell-icon:hover {
    filter: brightness(1.3) drop-shadow(0 0 3px rgba(255,255,255,0.3));
}

/* Hover effect for signal cards */
.hover-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(180deg, rgba(12,18,22,0.55), rgba(8,14,18,0.6));
}

.hover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.suggestions-container {
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: var(--panel-dark);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: #dbe9ee;
}

/* Bell button hover effect - no transform to prevent flickering */
#bell-button:hover {
    /* Removed transform scale to prevent layout shift and flickering */
}

#bell-button:hover #bell-icon {
    filter: brightness(1.3) drop-shadow(0 0 3px rgba(255,255,255,0.3));
}

/* Bell shake animation when there are signals */
@keyframes bell-shake {
    0% { transform: rotate(0); }
    5% { transform: rotate(15deg); }
    10% { transform: rotate(-15deg); }
    15% { transform: rotate(10deg); }
    20% { transform: rotate(-10deg); }
    25% { transform: rotate(5deg); }
    30% { transform: rotate(-5deg); }
    35% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

.suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #f5f5f5;
}

.suggestion-symbol {
    font-weight: bold;
}

.suggestion-name {
    font-size: 0.8em;
    color: #666;
}

/* Stock Dashboard Tile Hover Effect */
.stock-tile-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stock-tile-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
}

/* =====================================================
   MOBILE-FIRST RESPONSIVE PORTFOLIO TILES
   ===================================================== */

/* Portfolio tile container - better mobile spacing */
.portfolio-tiles-container {
    padding: 0.5rem;
}

/* Stock tile mobile optimization */
@media (max-width: 576px) {
    /* Make tiles compact on mobile */
    .stock-tile-hover {
        margin-bottom: 0.5rem !important;
    }
    
    .stock-tile-hover .card-header {
        padding: 0.4rem 0.6rem !important;
    }
    
    .stock-tile-hover .card-body {
        padding: 0.4rem !important;
    }
    
    /* Smaller fonts on mobile */
    .stock-tile-hover h5 {
        font-size: 0.75rem !important;
    }
    
    .stock-tile-hover .badge {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.4rem !important;
    }
    
    /* Compact metric boxes */
    .stock-tile-hover .p-2 {
        padding: 0.35rem !important;
    }
    
    /* Summary cards on mobile */
    .summary-card-mobile {
        margin-bottom: 0.5rem;
    }
    
    /* Hide "View Chart" text on very small screens */
    .stock-tile-hover .btn span {
        font-size: 0.65rem !important;
    }
    
    /* Full-width columns on mobile */
    .col-xs-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Tablet optimization */
@media (min-width: 577px) and (max-width: 991px) {
    .stock-tile-hover .card-header {
        padding: 0.5rem 0.7rem !important;
    }
    
    .stock-tile-hover .card-body {
        padding: 0.5rem !important;
    }
    
    .stock-tile-hover h5 {
        font-size: 0.8rem !important;
    }
}

/* Desktop optimization */
@media (min-width: 992px) {
    .stock-tile-hover:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
    }
}

/* Transaction count badge styling */
.txn-badge {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: white !important;
    font-size: 0.55rem !important;
    padding: 0.1rem 0.4rem !important;
    border-radius: 10px !important;
    vertical-align: middle !important;
    margin-left: 0.3rem !important;
}

/* Price comparison row styling */
.price-compare-row {
    background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, transparent 100%);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.5rem;
}

/* Summary cards responsive */
.summary-cards-row .card {
    min-height: 70px;
}

@media (max-width: 768px) {
    .summary-cards-row .card {
        min-height: auto;
    }
    
    .summary-cards-row .card-body {
        padding: 0.5rem !important;
    }
}

/* Market indices responsive */
#market-indices-card {
    transition: transform 0.2s ease;
}

#market-indices-card:hover {
    transform: scale(1.02);
}

@media (max-width: 576px) {
    #market-indices-card .card-body {
        padding: 0.4rem !important;
    }
    
    #market-indices-card span {
        font-size: 0.65rem !important;
    }
}

/* Consolidated stock indicator */
.consolidated-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.consolidated-indicator .badge {
    animation: pulse-subtle 2s infinite;
}

@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Smooth page transitions */
.portfolio-page {
    animation: pageSlideIn 0.3s ease-out;
}

@keyframes pageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Touch-friendly buttons on mobile */
@media (max-width: 768px) {
    .stock-tile-hover button,
    .stock-tile-hover .btn {
        min-height: 36px;
        touch-action: manipulation;
    }
}

/* Profit/Loss colors - ensure consistency */
.profit-positive {
    color: #10b981 !important;
}

.profit-negative {
    color: #ef4444 !important;
}

/* Card border accent based on P&L */
.stock-tile-profit {
    border-left: 3px solid #10b981 !important;
}

.stock-tile-loss {
    border-left: 3px solid #ef4444 !important;
}

/* Custom Scrollbar for Portfolio Container */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* === Nexus-like dark theme additions === */
/* Variables (fallbacks already defined above) */
:root {
    --bg-dark: #07141a;        /* page background */
    --panel-dark: #0e1a21;     /* card/panel */
    --panel-darker: #0b1418;   /* slightly darker */
    --muted: #98a6b3;          /* muted text */
    --accent: #14c7d0;         /* cyan accent */
    --accent-2: #6f6af8;       /* purple accent */
    --card-shadow: rgba(6,10,14,0.7);
}

/* Global background and base text color */
body {
    background-color: var(--bg-dark) !important;
    color: #cfe7ee !important;
}

/* Navbar / header */
.navbar {
    background: linear-gradient(90deg, #071418 0%, #0d2026 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}
.navbar .nav-link, .navbar .text-white { color: #d7e6eb !important; }

/* Sidebar */
#desktop-sidebar {
    background: var(--panel-dark) !important;
    border-right: 1px solid rgba(255,255,255,0.03) !important;
}
.list-group-item {
    background: transparent !important;
    color: var(--muted) !important;
    border: none !important;
}
.list-group-item:hover {
    background: rgba(20,30,40,0.35) !important;
    color: #e6f7fb !important;
}
.list-group-item.active, .list-group-item.active:hover {
    background: linear-gradient(90deg, rgba(20,42,52,0.55), rgba(12,28,34,0.55)) !important;
    color: var(--accent) !important;
    border-left: 4px solid var(--accent) !important;
}

/* Cards, offcanvas, modals */
.card, .card-body, .card-header, .offcanvas, .offcanvas .offcanvas-body, .modal-content {
    background: linear-gradient(180deg, var(--panel-dark), var(--panel-darker)) !important;
    color: #d6eef3 !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
    box-shadow: 0 8px 24px var(--card-shadow) !important;
}

/* Page content wrapper */
#page-content {
    background-color: transparent !important;
    color: #dbe9ee !important;
}

/* Footer */
footer {
    background: transparent !important;
    color: #94a8b3 !important;
}

/* Buttons and badges */
.badge-primary { background-color: var(--accent) !important; color: #021016 !important; }
.btn-link, .btn-link:hover { color: #e6f7fb !important; }

/* Dark scrollbars */
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); }

/* Small tweaks for charts/legends to be readable on dark bg */
.dash-graph .xtick text, .dash-graph .ytick text, .dash-graph .legend text { fill: #9fb6bf !important; }

/* Keep the left menu compact and centered icons */
.list-group-item i { width: 24px; text-align: left; }

/* End dark theme additions */

/* Sidebar brand */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.sidebar-brand img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.sidebar-brand .brand-title {
    font-weight: 700;
    color: #e6f7fb;
    font-size: 0.95rem;
    letter-spacing: 0.4px;
}
.sidebar-brand .brand-sub {
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1;
}

/* Clean sidebar - no cards, compact */
.desktop-sidebar-col { min-width: 200px; max-width: 200px; }
.desktop-sidebar-col .list-group-item { 
    padding: 10px 12px; 
    border-radius: 6px; 
    font-size: 0.85rem;
    margin-bottom: 2px;
}

/* Sidebar section labels */
.desktop-sidebar-col .text-muted {
    color: rgba(255,255,255,0.4) !important;
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Hide any cards inside sidebar for cleaner look */
.desktop-sidebar-col .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.desktop-sidebar-col .card-header {
    display: none !important;
}

.desktop-sidebar-col .card-body {
    padding: 0 !important;
}

/* Navbar search */
.navbar-search {
    width: 520px;
    max-width: 60%;
    margin-left: 12px;
}
.navbar-search input {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
    color: #dbe9ee;
    padding: 10px 14px;
    border-radius: 10px;
}
.navbar-search input::placeholder { color: rgba(255,255,255,0.5); }

/* Small icon/badge adjustments */
#bell-icon, #chat-icon-header { color: #dbe9ee !important; }

/* Right-side metric and resource cards */
.metric-card {
    background: linear-gradient(180deg, rgba(16,26,31,0.8), rgba(10,18,22,0.85));
    border: 1px solid rgba(255,255,255,0.03) !important;
    border-radius: 10px;
    padding: 10px;
}
.metric-card h5 { color: #e6fbff; margin: 0; }
.metric-card small { color: var(--muted); }

.time-card {
    background: linear-gradient(180deg, rgba(14,24,28,0.75), rgba(8,16,20,0.85));
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.03) !important;
}

.resource-card { padding: 8px; border-radius: 10px; }
.resource-card .card-header { border-bottom: none; }
.resource-card .progress { background-color: rgba(255,255,255,0.04); border-radius: 6px; }
.resource-card .progress .progress-bar { box-shadow: none; }

/* Chart cards and SPC-like visuals */
.chart-card { 
    background: linear-gradient(180deg, rgba(12,20,24,0.6), rgba(8,14,18,0.7));
    border-radius: 10px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.03) !important;
}

/* Market indices (NIFTY/SENSEX) - make numeric font sizes match summary H4s */
#market-indices-card #nifty-value,
#market-indices-card #sensex-value {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #e6f7fb !important;
}

#market-indices-card #nifty-change,
#market-indices-card #sensex-change {
    font-size: 0.7rem !important;
    font-weight: 500 !important;
}


/* Table styles for summary metrics */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}
.data-table thead th {
    color: #dbe9ee;
    font-weight: 700;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    padding: 12px 16px;
}
.data-table tbody td {
    background: linear-gradient(180deg, rgba(13,23,28,0.45), rgba(9,17,20,0.45));
    padding: 12px 16px;
    color: #cfe7ee;
    border-top: 1px solid rgba(255,255,255,0.02);
}
.data-table tbody tr td:first-child { border-top-left-radius: 8px; }
.data-table tbody tr td:last-child { border-top-right-radius: 8px; }

/* SPC-like lines and spec highlight */
.spec-line {
    stroke: rgba(20,200,200,0.12);
}
.target-line { stroke: rgba(200,160,40,0.14); }

/* Tile hover for dashboard tiles */
.dashboard-tile { background: linear-gradient(180deg, rgba(12,18,22,0.55), rgba(8,14,18,0.6)); border-radius: 10px; padding: 12px; }
.dashboard-tile:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.45); transform: translateY(-4px); }

/* Make Plotly backgrounds transparent but with grid lines visible */
.js-plotly-plot .plotly .bg { fill: transparent !important; }
.js-plotly-plot .plotly .gridlayer .xgrid, .js-plotly-plot .plotly .gridlayer .ygrid { stroke: rgba(255,255,255,0.04) !important; }



/* Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* Professional Card Shadows */
.shadow-lg {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Badge Hover Effect */
.badge {
    transition: transform 0.2s ease;
}

.badge:hover {
    transform: scale(1.05);
}

/* Chat Icon Animations */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

/* Chat button hover effect - use filter instead of transform to prevent flickering */
#chat-toggle-button-header:hover {
    /* Removed transform scale to prevent layout shift */
}

#chat-toggle-button-header:hover #chat-icon-header {
    filter: brightness(1.3) drop-shadow(0 0 3px rgba(255,255,255,0.3));
}

/* Chat side panel responsive styles */
#chat-window {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    z-index: 1050;
    transition: right 0.3s ease-in-out;
    box-shadow: -4px 0 15px rgba(0,0,0,0.1);
}

#chat-window.open {
    right: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    #chat-window {
        width: 100%;
        right: -100%;
    }
}

#chat-overlay {
    cursor: pointer;
}

/* Smooth scrolling for chat messages */
#chat-messages-container {
    scroll-behavior: smooth;
}

/* Custom scrollbar for chat */
#chat-messages-container::-webkit-scrollbar {
    width: 6px;
}

#chat-messages-container::-webkit-scrollbar-track {
    background: transparent;
}

#chat-messages-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

#chat-messages-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Force overrides for any remaining light/white backgrounds that were set inline
   or via utility classes. This ensures right-side panels inherit the dark theme. */
.bg-white {
    background: transparent !important;
    color: inherit !important;
}

.portfolio-container, .suggestions, .suggestions-container {
    background: transparent !important;
    border-color: rgba(255,255,255,0.03) !important;
}

.suggestion-item:hover {
    background-color: rgba(255,255,255,0.03) !important;
    color: #e6f7fb !important;
}

/* DatePickerSingle styling to match dark theme - BRIGHTER */
.DateInput_input {
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    min-width: 120px !important;
}

.DateInput_input:focus {
    background: rgba(255,255,255,0.18) !important;
    border-color: #3b82f6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.25) !important;
}

.DateInput_input::placeholder {
    color: rgba(255,255,255,0.6) !important;
}

/* If any inline style sets a white background via style attribute like
   style="background-color: #ffffff", the following attribute selector
   will attempt to neutralize it where possible. It's intentionally scoped
   so it doesn't wipe necessary backgrounds (cards already use dark styles).
*/
[style*="background-color: #ffffff"] {
    background: transparent !important;
}


/* Stock Guru message styling */
.stock-guru-markdown {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}

.stock-guru-markdown h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1976D2;
    margin-bottom: 8px;
    border-bottom: 2px solid #2196F3;
    padding-bottom: 4px;
}

.stock-guru-markdown h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #1565C0;
    margin-top: 8px;
    margin-bottom: 4px;
}

.stock-guru-markdown p {
    margin: 4px 0;
}

.stock-guru-markdown strong {
    color: #0D47A1;
    font-weight: 600;
}

.stock-guru-markdown ul, .stock-guru-markdown ol {
    margin: 6px 0;
    padding-left: 20px;
}

.stock-guru-markdown li {
    margin: 2px 0;
}

.stock-guru-markdown code {
    background-color: #E3F2FD;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
    color: #0D47A1;
}

.stock-guru-markdown blockquote {
    border-left: 3px solid #2196F3;
    padding-left: 10px;
    margin: 8px 0;
    color: #424242;
    font-style: italic;
}

/* Stock Guru typing indicator */
@keyframes typing {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    background-color: #2196F3;
    border-radius: 50%;
    animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Reusable branded button style to match login and primary actions */
.btn-brand {
    border-radius: 8px !important;
    padding: 6px 12px !important;
    background: linear-gradient(to right, #3498db, #2ecc71) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(52,152,219,0.12) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.btn-brand:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

/* Outline variant if needed */
.btn-brand.outline {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: #dbe9ee !important;
    box-shadow: none !important;
}

/* Tile price styling for better visibility on dark background */
.tile-price {
    color: #e6fbff !important;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.tile-price.small { font-size: 0.85rem !important; }


/* Search input and suggestions visibility on dark backgrounds */
.search-input, .navbar-search input, .form-control.search-input {
    color: #dbe9ee !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
}
.search-input::placeholder, .navbar-search input::placeholder {
    color: rgba(219,233,238,0.45) !important;
}
.suggestions, .suggestions-container, #stock-suggestions {
    background: linear-gradient(180deg, rgba(16,22,26,0.6), rgba(10,14,18,0.6)) !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
    color: #dbe9ee !important;
}
.suggestion-item { color: #cfe7ee !important; }

/* Tabs styling: make card/tile tabs readable on dark background and clearly show active/inactive */
.card .nav-tabs .nav-link,
.nav-tabs .nav-link {
    background: transparent !important;
    color: var(--muted) !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    margin-right: 6px !important;
    padding: 6px 12px !important;
    border-radius: 8px 8px 0 0 !important;
    opacity: 0.85;
}
.card .nav-tabs .nav-link:hover,
.nav-tabs .nav-link:hover {
    opacity: 1;
    color: #e6f7fb !important;
}
.card .nav-tabs .nav-link.active,
.nav-tabs .nav-link.active {
    background: linear-gradient(90deg, rgba(20,40,50,0.5), rgba(12,24,30,0.6)) !important;
    color: #e6f7fb !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.5) !important;
    opacity: 1 !important;
}

/* =============================================================================
   CUSTOM BUTTON-STYLE TABS (Investment/Portfolio)
   ============================================================================= */
.nav-pills-custom {
    background: rgba(15, 23, 42, 0.6) !important;
    padding: 6px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    gap: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.nav-pills-custom .nav-link {
    background: transparent !important;
    color: #9ca3af !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
}

.nav-pills-custom .nav-link:hover {
    background: rgba(102, 126, 234, 0.15) !important;
    color: #c4b5fd !important;
}

.nav-pills-custom .nav-link.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

/* Specific small tab pill used in tiles (if present) */
.analysis-tabs .nav-link, .analysis-tabs .nav-link.active {
    padding: 6px 14px !important;
}


/* Ensure tab label text inside card headers is readable */
.card .nav-tabs .nav-link .nav-label {
    color: inherit !important;
}

/* Make it obvious when a tab is not selected by dimming label */
.nav-tabs .nav-link:not(.active) { filter: brightness(0.85); }


/* Improve visibility of search inputs on dark background */
.search-input, .navbar-search input {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    color: #dbe9ee !important;
}
.search-input::placeholder, .navbar-search input::placeholder {
    color: rgba(255,255,255,0.45) !important;
}

/* Tabs styling: clear active vs inactive, allow deselect look consistent */
.nav-tabs .nav-link {
    background: transparent !important;
    color: var(--muted) !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    margin-right: 6px !important;
}
.nav-tabs .nav-link.active {
    background: linear-gradient(90deg, rgba(20,40,50,0.6), rgba(10,22,28,0.6)) !important;
    color: var(--accent) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
}
.nav-tabs .nav-link:not(.active):hover {
    background: rgba(255,255,255,0.02) !important;
    color: #e6f7fb !important;
}

/* Ensure any tab container background is transparent so dark card shows through */
.nav-tabs {
    background: transparent !important;
    border-bottom: none !important;
}

/* =======================================================================
   MODERN FINANCIAL CHART STYLING
   ======================================================================= */

/* Chart container styling */
.dash-graph {
    border-radius: 12px !important;
    overflow: hidden;
}

/* Plotly chart backgrounds */
.js-plotly-plot .plotly .bg {
    fill: rgba(15, 23, 42, 0.95) !important;
}

.js-plotly-plot .plotly .main-svg {
    background: transparent !important;
}

/* Chart grid lines - subtle */
.js-plotly-plot .plotly .gridlayer .xgrid,
.js-plotly-plot .plotly .gridlayer .ygrid {
    stroke: rgba(148, 163, 184, 0.08) !important;
    stroke-dasharray: none !important;
}

/* Chart axis lines */
.js-plotly-plot .plotly .zerolinelayer line {
    stroke: rgba(148, 163, 184, 0.15) !important;
}

/* Chart text colors */
.js-plotly-plot .plotly .xtick text,
.js-plotly-plot .plotly .ytick text {
    fill: #64748b !important;
    font-size: 11px !important;
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.js-plotly-plot .plotly .gtitle {
    fill: #f8fafc !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Legend styling */
.js-plotly-plot .plotly .legend text {
    fill: #cbd5e1 !important;
    font-size: 11px !important;
}

.js-plotly-plot .plotly .legend .bg {
    fill: transparent !important;
    stroke: none !important;
}

/* Hover labels */
.js-plotly-plot .plotly .hoverlayer .hovertext {
    stroke: rgba(148, 163, 184, 0.3) !important;
}

.js-plotly-plot .plotly .hoverlayer .hovertext rect {
    fill: rgba(30, 41, 59, 0.95) !important;
    rx: 6px !important;
    ry: 6px !important;
}

.js-plotly-plot .plotly .hoverlayer .hovertext text {
    fill: #f8fafc !important;
    font-size: 12px !important;
}

/* Candlestick charts - bullish */
.js-plotly-plot .plotly .candlestick .increasing .ha rect,
.js-plotly-plot .plotly .candlestick .increasing .hl rect {
    fill: rgba(16, 185, 129, 0.7) !important;
    stroke: #10b981 !important;
}

/* Candlestick charts - bearish */
.js-plotly-plot .plotly .candlestick .decreasing .ha rect,
.js-plotly-plot .plotly .candlestick .decreasing .hl rect {
    fill: rgba(239, 68, 68, 0.7) !important;
    stroke: #ef4444 !important;
}

/* Modebar (chart controls) styling */
.js-plotly-plot .plotly .modebar {
    background: transparent !important;
}

.js-plotly-plot .plotly .modebar-btn {
    color: #64748b !important;
}

.js-plotly-plot .plotly .modebar-btn:hover {
    color: #f8fafc !important;
}

.js-plotly-plot .plotly .modebar-btn.active {
    color: #3b82f6 !important;
}

/* Chart card wrapper */
.chart-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden;
}

.chart-card .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08) !important;
    padding: 1rem 1.25rem !important;
}

.chart-card .card-body {
    background: transparent !important;
    padding: 0.75rem !important;
}

/* Responsive chart graph - dynamic sizing */
.chart-graph-responsive {
    width: 100% !important;
    height: 100% !important;
    min-height: 220px !important;
}

.chart-graph-responsive .js-plotly-plot,
.chart-graph-responsive .plotly,
.chart-graph-responsive .plot-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 220px !important;
}

.chart-graph-responsive .main-svg {
    width: 100% !important;
    height: 100% !important;
}

/* Stock tile chart tab content */
.tab-content .card-body .chart-graph-responsive {
    min-height: 200px !important;
}

/* Chart tabs styling */
.chart-tabs .nav-tabs {
    border-bottom: 1px solid rgba(148, 163, 184, 0.08) !important;
    padding: 0 0.75rem;
}

.chart-tabs .nav-tabs .nav-link {
    color: #64748b !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    padding: 0.6rem 1rem !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.chart-tabs .nav-tabs .nav-link:hover {
    color: #cbd5e1 !important;
    border-bottom-color: rgba(59, 130, 246, 0.3) !important;
}

.chart-tabs .nav-tabs .nav-link.active {
    color: #22d3ee !important;
    border-bottom-color: #22d3ee !important;
    background: transparent !important;
}

/* Portfolio performance card styling */
.portfolio-chart-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(30, 41, 59, 0.5) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.06) !important;
    border-radius: 16px !important;
}

.portfolio-chart-card .card-header {
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
}

/* Stock analysis accordion styling */
.accordion-item {
    background: transparent !important;
    border: 1px solid rgba(148, 163, 184, 0.06) !important;
    border-radius: 12px !important;
    margin-bottom: 0.5rem !important;
}

.accordion-button {
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.4) 100%) !important;
    color: #f8fafc !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
    color: #22d3ee !important;
}

.accordion-button::after {
    filter: invert(1) !important;
}

.accordion-collapse {
    background: transparent !important;
}

.accordion-body {
    background: transparent !important;
    padding: 1rem !important;
}

/* Token usage chart specific styling */
.token-usage-chart .js-plotly-plot .plotly .bg {
    fill: transparent !important;
}

/* Price trend indicators */
.price-up {
    color: #10b981 !important;
}

.price-down {
    color: #ef4444 !important;
}

.price-neutral {
    color: #64748b !important;
}

/* Financial metric badges */
.metric-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.metric-badge.profit {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.metric-badge.loss {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Chart loading state */
.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 12px;
}

.chart-loading::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid rgba(59, 130, 246, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: chartSpin 0.8s linear infinite;
}

@keyframes chartSpin {
    to { transform: rotate(360deg); }
}

/* Responsive chart sizing */
@media (max-width: 768px) {
    .chart-card {
        border-radius: 10px !important;
    }
    
    .js-plotly-plot .plotly .gtitle {
        font-size: 14px !important;
    }
    
    .js-plotly-plot .plotly .xtick text,
    .js-plotly-plot .plotly .ytick text {
        font-size: 10px !important;
    }
    
    .chart-tabs .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
}

/* Annotation styling */
.js-plotly-plot .plotly .annotation text {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
}

.js-plotly-plot .plotly .annotation .bg {
    rx: 6px !important;
    ry: 6px !important;
}

/* Range slider styling (for charts with range slider) */
.js-plotly-plot .plotly .rangeslider .bg {
    fill: rgba(30, 41, 59, 0.5) !important;
    stroke: rgba(148, 163, 184, 0.1) !important;
}

/* Spike lines */
.js-plotly-plot .plotly .xaxislayer-above .spikeline,
.js-plotly-plot .plotly .yaxislayer-above .spikeline {
    stroke: rgba(148, 163, 184, 0.3) !important;
}

/* End Modern Financial Chart Styling */

/* =============================================================================
   INVESTMENT IDEAS PAGE STYLING
   Professional stock analyst interface
============================================================================= */

/* Risk Profile Cards */
.risk-profile-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.risk-profile-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.risk-profile-card.selected {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* Stock Tiles */
#investment-ideas-output .card {
    transition: all 0.25s ease;
}

#investment-ideas-output .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 188, 212, 0.4) !important;
}

/* Portfolio Summary Card */
.portfolio-summary-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* Strategy Selection Buttons */
#aggressive-btn, #moderate-btn, #conservative-btn {
    transition: all 0.2s ease;
    font-weight: 500;
}

#aggressive-btn:hover {
    background-color: rgba(239, 68, 68, 0.2) !important;
    transform: scale(1.02);
}

#moderate-btn:hover {
    background-color: rgba(245, 158, 11, 0.2) !important;
    transform: scale(1.02);
}

#conservative-btn:hover {
    background-color: rgba(34, 197, 94, 0.2) !important;
    transform: scale(1.02);
}

/* Active strategy indicator */
#selected-strategy-display {
    transition: all 0.3s ease;
    border-radius: 12px;
    font-weight: 500;
}

/* Investment Amount Input */
#investment-amount {
    font-size: 1.2rem !important;
    font-weight: 600;
}

#investment-amount:focus {
    border-color: #00bcd4 !important;
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.2) !important;
}

/* Quick Amount Buttons */
[id^="amt-"] {
    transition: all 0.2s ease;
}

[id^="amt-"]:hover {
    transform: scale(1.05);
}

/* Metrics Cards */
.metric-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 12px;
    transition: background 0.2s ease;
}

.metric-card:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Investment Tabs */
#investment-tabs .nav-link {
    color: #94a3b8 !important;
    border-color: transparent !important;
    background-color: transparent !important;
    transition: all 0.2s ease;
}

#investment-tabs .nav-link:hover {
    color: #e2e8f0 !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

#investment-tabs .nav-link.active {
    color: #00bcd4 !important;
    background-color: rgba(0, 188, 212, 0.1) !important;
    border-bottom: 2px solid #00bcd4 !important;
}

/* Analysis Modal */
#analysis-modal .modal-content {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
}

#analysis-modal .modal-header {
    border-bottom: 1px solid #334155;
}

#analysis-modal .modal-footer {
    border-top: 1px solid #334155;
}

/* =============================================================================
   PORTFOLIO HOME PAGE — Dark Theme Default
   ============================================================================= */

/* Page Container */
.portfolio-page-container {
    background: linear-gradient(135deg, #151f2b 0%, #0e1a21 100%);
}

/* Summary Cards (Current Value, Investment, Profit, Returns, Sensex, Nifty) */
.summary-card {
    border-radius: 10px;
    background: linear-gradient(135deg, #151f2b 0%, #0e1a21 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
}

.summary-card-body {
    padding: 0.75rem;
}

.summary-card-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.3px;
    margin-bottom: 0.3rem;
}

.summary-card-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 0.2rem;
}

.summary-card-value-inline {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.summary-card-change {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Stock Tile Cards */
.stock-tile-card {
    border-radius: 8px;
    border: none;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.stock-tile-inner {
    padding: 1rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.stock-tile-meta {
    color: #9ca3af;
    font-size: 0.8rem;
}

.stock-tile-meta-sep {
    color: #6b7280;
    font-size: 0.8rem;
}

.stock-tile-pnl-pct {
    font-size: 0.9rem;
    font-weight: 600;
}

.stock-tile-symbol {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
}

.stock-tile-pnl-amt {
    font-size: 1.1rem;
    font-weight: 700;
}

.stock-tile-label-green {
    color: #10b981;
    font-size: 0.8rem;
}

/* Market Indices Combined Card */
.market-idx-card {
    background: linear-gradient(135deg, #151f2b 0%, #0e1a21 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    min-height: 65px;
    margin: 0;
    padding: 0.5rem;
}

.market-idx-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #9ca3af;
}

.market-idx-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
}

.market-idx-change {
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.1;
}

.market-idx-open {
    font-size: 0.6rem;
    line-height: 1.1;
    color: #6b7280;
}

.market-idx-divider {
    border-right: 1px solid #374151;
}

/* =============================================================================
   ANALYSIS DETAILS MODAL (Dark Theme Default)
   ============================================================================= */

#analysis-details-modal .modal-content {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
}

.analysis-details-header {
    padding: 18px 25px;
    background: linear-gradient(90deg, rgba(20,30,40,0.95), rgba(15,25,35,0.95));
    border-bottom: 2px solid #a78bfa;
}

.analysis-details-title {
    color: #f8fafc;
    font-weight: 700;
}

.analysis-details-body {
    padding: 20px 25px;
    color: #f8fafc;
    background: linear-gradient(180deg, rgba(15,25,35,0.95), rgba(10,20,30,0.95));
    min-height: 400px;
    max-height: 80vh;
    overflow-y: auto;
}

.analysis-details-footer {
    padding: 12px 25px;
    background: linear-gradient(90deg, rgba(20,30,40,0.95), rgba(15,25,35,0.95));
    border-top: 1px solid rgba(255,255,255,0.1);
}

.analysis-details-footer .btn-secondary {
    border: 1px solid rgba(255,255,255,0.1);
    color: #f8fafc;
}

.analysis-details-no-data {
    color: #cbd5e1;
}

.analysis-details-muted {
    color: #64748b;
}

/* Analysis Cards - Dark Theme */
.analysis-card-blue {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 8px;
}

.analysis-card-header-blue {
    background: rgba(59, 130, 246, 0.1);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    padding: 0.75rem 1rem;
}

.analysis-card-purple {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(167, 139, 250, 0.15);
    border-radius: 8px;
}

.analysis-card-header-purple {
    background: rgba(167, 139, 250, 0.1);
    border-bottom: 1px solid rgba(167, 139, 250, 0.2);
    padding: 0.75rem 1rem;
}

.analysis-card-amber {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: 8px;
}

.analysis-card-header-amber {
    background: rgba(245, 158, 11, 0.1);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    padding: 0.75rem 1rem;
}

.analysis-details-pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #e2e8f0;
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
}

.analysis-details-pre-sm {
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Stock Score Badge Animation */
.score-badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Responsive adjustments for Investment Page */
@media (max-width: 768px) {
    #investment-ideas-output .card {
        min-height: auto !important;
    }
    
    .portfolio-summary-card .d-flex {
        flex-direction: column;
        gap: 1rem;
    }
    
    #selected-strategy-display {
        font-size: 0.9rem;
    }
}

/* End Investment Ideas Page Styling */

/* =============================================================================
   DROPDOWN STYLING - Dark Theme for PnL Year Filter
   ============================================================================= */

/* Base dropdown styling */
.dash-dropdown .Select-control,
#pnl-year-filter .Select-control {
    background-color: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px !important;
    min-height: 36px !important;
}

.dash-dropdown .Select-value-label,
.dash-dropdown .Select-placeholder,
#pnl-year-filter .Select-value-label,
#pnl-year-filter .Select-placeholder {
    color: #f8fafc !important;
    font-weight: 500 !important;
}

/* Dropdown menu */
.dash-dropdown .Select-menu-outer,
#pnl-year-filter .Select-menu-outer {
    background-color: rgba(30, 41, 59, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    z-index: 99999 !important;
    margin-top: 2px !important;
}

/* Dropdown options */
.dash-dropdown .VirtualizedSelectOption,
.dash-dropdown .Select-option,
#pnl-year-filter .VirtualizedSelectOption,
#pnl-year-filter .Select-option {
    background-color: transparent !important;
    color: #f8fafc !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
}

/* Hover/focused option */
.dash-dropdown .VirtualizedSelectOption:hover,
.dash-dropdown .Select-option:hover,
.dash-dropdown .VirtualizedSelectFocusedOption,
.dash-dropdown .Select-option.is-focused,
#pnl-year-filter .VirtualizedSelectOption:hover,
#pnl-year-filter .Select-option:hover,
#pnl-year-filter .VirtualizedSelectFocusedOption,
#pnl-year-filter .Select-option.is-focused {
    background-color: rgba(59, 130, 246, 0.35) !important;
    color: #ffffff !important;
}

/* Selected option */
.dash-dropdown .Select-option.is-selected,
#pnl-year-filter .Select-option.is-selected {
    background-color: rgba(59, 130, 246, 0.5) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Arrow indicator */
.dash-dropdown .Select-arrow,
#pnl-year-filter .Select-arrow {
    border-color: #f8fafc transparent transparent !important;
}

/* Input text when searching */
.dash-dropdown .Select-input input,
#pnl-year-filter .Select-input input {
    color: #f8fafc !important;
}

/* Clear indicator */
.dash-dropdown .Select-clear,
#pnl-year-filter .Select-clear {
    color: #94a3b8 !important;
}

.dash-dropdown .Select-clear:hover,
#pnl-year-filter .Select-clear:hover {
    color: #f8fafc !important;
}
/* =============================================================================
   TECHNICAL ANALYSIS CRITERIA - Theme Compatible Styling
   ============================================================================= */

/* Default (Dark Theme) Criteria Styles */
.criteria-container {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid rgba(71, 85, 105, 0.5);
}

.criteria-title {
    color: #f8fafc !important;
    font-weight: 600;
    font-size: 1.1rem;
}

.criteria-subtitle {
    color: #cbd5e1 !important;
    font-size: 0.85rem;
}

.criteria-group-header {
    color: #fbbf24 !important;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(71, 85, 105, 0.6) !important;
}

.criteria-item {
    color: #f1f5f9 !important;
    margin-bottom: 4px;
    display: flex;
    align-items: flex-start;
}

.criteria-text {
    color: #f1f5f9 !important;
    font-size: 0.85rem;
    line-height: 1.5;
}

.criteria-icon {
    font-size: 0.9rem;
    min-width: 20px;
}

.criteria-icon.text-success {
    color: #4ade80 !important;
}

.criteria-icon.text-danger {
    color: #f87171 !important;
}

.criteria-list {
    margin-bottom: 0;
}

.criteria-list li {
    color: #f1f5f9 !important;
}

.criteria-list li span {
    color: #f1f5f9 !important;
}

.criteria-group {
    margin-bottom: 1rem;
}

/* Criteria Accordion Styling - Dark Theme */
.criteria-accordion .accordion-item {
    background-color: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
}

.criteria-accordion .accordion-button {
    background-color: rgba(30, 41, 59, 0.98) !important;
    color: #f1f5f9 !important;
    font-weight: 500;
    padding: 12px 16px;
}

.criteria-accordion .accordion-button:not(.collapsed) {
    background-color: rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
}

.criteria-accordion .accordion-button::after {
    filter: brightness(0) invert(1);
}

.criteria-accordion .accordion-body {
    padding: 0;
    background-color: transparent;
}

/* Force all text visible in criteria container - Dark Theme */
.criteria-container *,
.criteria-container span,
.criteria-container li,
.criteria-container ul li,
.criteria-container ul li span,
.criteria-container .criteria-list li,
.criteria-container .criteria-list li span,
.criteria-container .criteria-item,
.criteria-container .criteria-item span {
    color: #ffffff !important;
}

.criteria-container .criteria-group-header,
.criteria-group-header {
    color: #fbbf24 !important;
}

.criteria-container .text-muted,
.criteria-container .criteria-subtitle {
    color: #cbd5e1 !important;
}

/* Specific override for criteria text elements */
.criteria-text,
.criteria-container .criteria-text,
ul.criteria-list li span.criteria-text {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Override any modal or card styles affecting criteria */
.modal-body .criteria-container *,
.card-body .criteria-container *,
.accordion-body .criteria-container * {
    color: #ffffff !important;
}

.modal-body .criteria-group-header,
.card-body .criteria-group-header,
.accordion-body .criteria-group-header {
    color: #fbbf24 !important;
}

/* =============================================================================
   STOCK PERFORMANCE CHART STYLES
   Support for both light and dark themes
   ============================================================================= */

/* Dark theme (default) */
.perf-container {
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --bg-card: rgba(30, 41, 59, 0.8);
    --border-color: rgba(255,255,255,0.1);
    --chart-bg: rgba(15, 23, 42, 0.9);
    padding: 1rem;
}

/* Light theme overrides */
[data-bs-theme="light"] .perf-container,
.light-theme .perf-container,
body.light-theme .perf-container {
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --bg-card: #ffffff;
    --border-color: #e2e8f0;
    --chart-bg: #f8fafc;
}

.perf-summary-container {
    margin-bottom: 1.5rem;
}

.perf-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.perf-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Light theme cards */
[data-bs-theme="light"] .perf-summary-card,
.light-theme .perf-summary-card,
body.light-theme .perf-summary-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.perf-summary-card.perf-highlight {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(59, 130, 246, 0.1));
    border-color: rgba(16, 185, 129, 0.4);
}

[data-bs-theme="light"] .perf-summary-card.perf-highlight,
.light-theme .perf-summary-card.perf-highlight,
body.light-theme .perf-summary-card.perf-highlight {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.08));
    border-color: rgba(16, 185, 129, 0.5);
}

.perf-card-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

/* Light theme labels */
[data-bs-theme="light"] .perf-card-label,
.light-theme .perf-card-label,
body.light-theme .perf-card-label {
    color: #64748b !important;
}

.perf-card-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Light theme values */
[data-bs-theme="light"] .perf-card-value,
.light-theme .perf-card-value,
body.light-theme .perf-card-value {
    color: #1e293b !important;
}

.perf-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Chart container with scroll */
.perf-chart-wrapper {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--text-secondary) transparent;
}

.perf-chart-wrapper::-webkit-scrollbar {
    width: 6px;
}

.perf-chart-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.perf-chart-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--text-secondary);
    border-radius: 3px;
}

.perf-pnl-chart {
    background: var(--chart-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    max-height: 500px;
    overflow-y: auto !important;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--text-secondary) transparent;
    -webkit-overflow-scrolling: touch;
}

.perf-pnl-chart::-webkit-scrollbar {
    width: 8px;
}

.perf-pnl-chart::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.perf-pnl-chart::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
}

.perf-pnl-chart::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Light theme chart */
[data-bs-theme="light"] .perf-pnl-chart,
.light-theme .perf-pnl-chart,
body.light-theme .perf-pnl-chart {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* P&L Section */
.perf-pnl-section {
    margin-top: 1.5rem;
}

.perf-chart-container {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 1rem;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 600px;
}

[data-bs-theme="light"] .perf-chart-container,
.light-theme .perf-chart-container,
body.light-theme .perf-chart-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.perf-stocks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.perf-stock-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.875rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

[data-bs-theme="light"] .perf-stock-card,
.light-theme .perf-stock-card,
body.light-theme .perf-stock-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.perf-stock-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.perf-stock-card.positive {
    border-left: 3px solid #10b981;
}

.perf-stock-card.negative {
    border-left: 3px solid #ef4444;
}

.perf-stock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.perf-stock-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.perf-pnl-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.perf-pnl-badge.positive {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.perf-pnl-badge.negative {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.perf-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.perf-metric {
    text-align: center;
}

.perf-metric-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}

.perf-metric-value {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.perf-metric-value.positive {
    color: #10b981;
}

.perf-metric-value.negative {
    color: #ef4444;
}

@media (max-width: 576px) {
    .perf-summary-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .perf-stocks-grid {
        grid-template-columns: 1fr;
    }
    .perf-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .perf-pnl-chart {
        max-height: 50vh !important;
        min-height: 250px;
    }
}

/* ===============================================
   Portfolio Trend Chart Styles - Theme Aware
   =============================================== */

.portfolio-trend-container {
    background: var(--bg-primary, #f8fafc);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.portfolio-metric-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portfolio-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

.portfolio-trend-empty {
    background: var(--card-bg, #ffffff);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

/* Light Theme - Portfolio Trend */
[data-bs-theme="light"] .portfolio-trend-container,
body.light-theme .portfolio-trend-container {
    --card-bg: #ffffff;
    --text-primary: #1e293b;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    background: #f8fafc;
}

[data-bs-theme="light"] .portfolio-metric-card,
body.light-theme .portfolio-metric-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b;
}

/* Dark Theme - Portfolio Trend */
body:not(.light-theme) .portfolio-trend-container {
    --card-bg: #1e293b;
    --text-primary: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: #334155;
    background: #0f172a;
}

body:not(.light-theme) .portfolio-metric-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    color: #f1f5f9;
}

body:not(.light-theme) .portfolio-metric-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* Chart background for themes */
[data-bs-theme="light"] .portfolio-trend-container > div:last-child > div,
body.light-theme .portfolio-trend-container > div:last-child > div {
    background: #ffffff !important;
}

body:not(.light-theme) .portfolio-trend-container > div:last-child > div {
    background: #1e293b !important;
}

/* Form select in chart */
.portfolio-trend-container .form-select {
    background-color: var(--card-bg, #ffffff);
    color: var(--text-primary, #1e293b);
    border-color: var(--border-color, #e2e8f0);
}

body:not(.light-theme) .portfolio-trend-container .form-select {
    background-color: #1e293b;
    color: #f1f5f9;
    border-color: #475569;
}

/* Chart title colors */
.portfolio-trend-container h6 {
    color: var(--text-primary, #1e293b) !important;
}

[data-bs-theme="dark"] .portfolio-trend-container h6 {
    color: #f1f5f9 !important;
}

/* Mobile responsive - Portfolio Trend */
@media (max-width: 768px) {
    .portfolio-trend-container {
        padding: 12px !important;
    }
    
    .portfolio-metric-card {
        padding: 12px !important;
    }
    
    .portfolio-metric-card > div:nth-child(2) {
        font-size: 1.1rem !important;
    }
}

/* =============================================================================
   CRITICAL: MOBILE SCROLL FIX
   Ensures scrolling works on iOS Safari and Android Chrome
   ============================================================================= */

@media (max-width: 991px) {
    /* Ensure the main containers allow scrolling */
    html, body {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        overscroll-behavior-y: auto !important;
    }
    
    /* Main content should not block scroll */
    #app-container,
    #react-entry-point,
    #_dash-app-content,
    ._dash-loading,
    .container-fluid,
    #page-content,
    .main-content-wrapper,
    .main-content-col {
        overflow: visible !important;
        overflow-x: hidden !important;
        height: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* iOS Safari specific fix */
@supports (-webkit-touch-callout: none) {
    html, body {
        -webkit-overflow-scrolling: touch !important;
        overflow-y: scroll !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    body {
        min-height: -webkit-fill-available !important;
    }
}

/* =============================================================================
   PORTFOLIO TILE REFRESH ENHANCEMENTS
   Additional styling for modern refresh behavior
   ============================================================================= */

/* Refresh button hover effect */
#refresh-portfolio-button {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#refresh-portfolio-button:hover {
    transform: scale(1.1);
}

#refresh-portfolio-button:active {
    transform: scale(0.95);
}

/* Spinning refresh icon when active */
#refresh-portfolio-button.refresh-btn-active {
    pointer-events: none;
}

#refresh-portfolio-button.refresh-btn-active .fa-sync-alt,
#refresh-portfolio-button.refresh-btn-active .navbar-icon {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Stock tile card smooth hover transitions */
.stock-tile-hover,
[class*="col-"] .card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Portfolio overview content - smooth transitions */
#workflow-overview-content {
    transition: opacity 0.3s ease;
}

/* Summary card animations on refresh */
.summary-cards-row .card,
.row .card[style*="linear-gradient"] {
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}

/* Tiles container position for overlay */
.portfolio-container {
    position: relative;
}

/* Value update pulse effect */
@keyframes valuePulse {
    0% { 
        transform: scale(1);
        text-shadow: none;
    }
    50% { 
        transform: scale(1.05);
        text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    }
    100% { 
        transform: scale(1);
        text-shadow: none;
    }
}

.value-updated {
    animation: valuePulse 0.5s ease-out;
}

/* Market indices refresh animation */
#nifty-value, #sensex-value,
#nifty-change, #sensex-change {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Smooth number transitions */
.price-value,
.profit-value,
.percentage-value {
    transition: all 0.3s ease;
}

/* =============================================================================
   ENHANCED TILE FLIP ANIMATIONS
   Modern 3D flip effect for tile updates
   ============================================================================= */

/* Base card setup for 3D transforms */
.card {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* 3D flip animation class */
.tile-flip-update {
    animation: tileFlip3D 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-style: preserve-3d;
}

@keyframes tileFlip3D {
    0% {
        transform: perspective(1000px) rotateY(0deg);
        opacity: 1;
    }
    50% {
        transform: perspective(1000px) rotateY(90deg);
        opacity: 0.6;
    }
    100% {
        transform: perspective(1000px) rotateY(0deg);
        opacity: 1;
    }
}

/* Staggered delays for flip animation */
.tile-flip-update:nth-child(1) { animation-delay: 0ms; }
.tile-flip-update:nth-child(2) { animation-delay: 50ms; }
.tile-flip-update:nth-child(3) { animation-delay: 100ms; }
.tile-flip-update:nth-child(4) { animation-delay: 150ms; }
.tile-flip-update:nth-child(5) { animation-delay: 200ms; }
.tile-flip-update:nth-child(6) { animation-delay: 250ms; }
.tile-flip-update:nth-child(7) { animation-delay: 300ms; }
.tile-flip-update:nth-child(8) { animation-delay: 350ms; }
.tile-flip-update:nth-child(9) { animation-delay: 400ms; }
.tile-flip-update:nth-child(10) { animation-delay: 450ms; }
.tile-flip-update:nth-child(11) { animation-delay: 500ms; }
.tile-flip-update:nth-child(12) { animation-delay: 550ms; }
.tile-flip-update:nth-child(n+13) { animation-delay: 600ms; }

/* Value change glow effect */
@keyframes valueGlow {
    0% { 
        box-shadow: 0 0 0 rgba(16, 185, 129, 0);
    }
    50% { 
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    }
    100% { 
        box-shadow: 0 0 0 rgba(16, 185, 129, 0);
    }
}

.value-glow {
    animation: valueGlow 0.8s ease-out;
}

/* Prevent tab content flicker during refresh */
#home-portfolio-tabs .tab-content {
    min-height: 200px;
}

/* Tab persistence - maintain tab styling */
#home-portfolio-tabs .nav-link.active {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* =============================================================================
   PORTFOLIO TABS - PROFESSIONAL STYLING
   ============================================================================= */
.portfolio-tabs .nav-tabs {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    gap: 8px;
}

.portfolio-tabs .nav-link {
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 12px 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transition: all 0.2s ease;
}

.portfolio-tabs .nav-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.portfolio-tabs .nav-link.active {
    background: rgba(255, 255, 255, 0.15) !important;
    border-bottom: 3px solid currentColor !important;
}

/* Stock Accordion Improvements */
.stock-accordion .accordion-item {
    background: transparent !important;
    border: none !important;
    margin-bottom: 10px;
}

.stock-accordion .accordion-button {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.9) 100%) !important;
    color: #f8fafc !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.stock-accordion .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(71, 85, 105, 0.95) 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.stock-accordion .accordion-button::after {
    filter: invert(1) brightness(2);
}

.stock-accordion .accordion-body {
    background: transparent !important;
    padding: 0 !important;
    padding-top: 8px !important;
}

/* =============================================================================
   PERFORMANCE ANALYTICS - DARK THEME
   ============================================================================= */
.performance-analytics-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
}

/* Time filter button group */
.btn-group .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: #667eea !important;
}

.btn-group .btn-secondary.btn-outline {
    color: #94a3b8 !important;
    border-color: #475569 !important;
}

.btn-group .btn-secondary.btn-outline:hover {
    background: rgba(102, 126, 234, 0.2) !important;
    color: #e2e8f0 !important;
}

/* Performance quick stats cards */
.performance-stat-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.8) 100%);
    border-radius: 8px;
    padding: 12px;
}

/* Performance filter button group */
.performance-filter-group {
    gap: 8px;
}

.performance-filter-group .btn {
    border-radius: 20px !important;
    padding: 8px 20px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.performance-filter-group .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

.performance-filter-group .btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #94a3b8 !important;
}

.performance-filter-group .btn-secondary:hover {
    background: rgba(102, 126, 234, 0.2) !important;
    border-color: #667eea !important;
    color: #e2e8f0 !important;
}

/* =============================================================================
   DASH DATATABLE - PROFESSIONAL DARK THEME
   ============================================================================= */
.token-datatable-container {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.token-datatable-container .dash-table-container {
    background: transparent !important;
}

.token-datatable-container .dash-spreadsheet-container {
    background: transparent !important;
}

.token-datatable-container .dash-spreadsheet {
    background: transparent !important;
}

/* Header styling */
.token-datatable-container th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px;
}

/* Cell styling */
.token-datatable-container td {
    background: transparent !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Odd rows - subtle highlight */
.token-datatable-container tr:nth-child(odd) td {
    background: rgba(102, 126, 234, 0.06) !important;
}

/* Hover effect */
.token-datatable-container tr:hover td {
    background: rgba(102, 126, 234, 0.15) !important;
}

/* Filter input styling */
.token-datatable-container .dash-filter input,
.token-datatable-container input[type="text"] {
    background-color: rgba(30, 41, 59, 0.8) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease;
}

.token-datatable-container .dash-filter input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

.token-datatable-container .dash-filter input:focus {
    border-color: #667eea !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
    background-color: rgba(15, 23, 42, 0.9) !important;
}

/* Sort icon styling */
.token-datatable-container .column-header--sort {
    color: white !important;
}

/* Pagination styling */
.token-datatable-container .previous-next-container {
    background: transparent !important;
    padding: 12px !important;
}

.token-datatable-container .previous-next-container button {
    background: rgba(102, 126, 234, 0.2) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    margin: 0 4px !important;
    transition: all 0.2s ease;
}

.token-datatable-container .previous-next-container button:hover {
    background: rgba(102, 126, 234, 0.4) !important;
    border-color: #667eea !important;
}

.token-datatable-container .current-page,
.token-datatable-container .page-number {
    color: #e2e8f0 !important;
}

/* Selected cell styling */
.token-datatable-container td.cell--selected {
    background: rgba(102, 126, 234, 0.25) !important;
    border: none !important;
}

/* Total Tokens column highlight */
.token-datatable-container td[data-dash-column="Total Tokens"] {
    color: #a78bfa !important;
    font-weight: 600 !important;
}

/* User column styling */
.token-datatable-container td[data-dash-column="User"] {
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
}

/* Generic DataTable dark theme fallback */
.dash-table-container .dash-filter input,
.dash-table-container input[type="text"],
.dash-spreadsheet-container .dash-filter input,
.dash-spreadsheet input.dash-filter--case-sensitive--default,
.dash-spreadsheet input.dash-filter--case-insensitive--default {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #475569 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
}

.dash-table-container .dash-filter input::placeholder,
.dash-spreadsheet input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

.dash-table-container .dash-filter input:focus,
.dash-spreadsheet input:focus {
    border-color: #667eea !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3) !important;
}

/* DataTable cells in dark mode */
.dash-spreadsheet-container .dash-cell,
.dash-table-container td {
    color: #e2e8f0 !important;
}

/* =============================================================================
   INVESTMENT TREND CHART - Dark Theme (matches Stock P&L styling)
   ============================================================================= */

/* Main container - inherits page dark background */
.investment-trend-chart {
    background: transparent;
}

/* Metric cards - Dark theme */
.investment-trend-chart .portfolio-metric-card {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    color: #f8fafc;
}

/* Ensure dark theme metric cards override any light-theme bleed */
body:not(.light-theme) .portfolio-metric-card {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

body:not(.light-theme) .portfolio-metric-card .metric-label {
    color: #94a3b8 !important;
}

.investment-trend-chart .portfolio-metric-card.metric-main {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)) !important;
    border: 2px solid rgba(16, 185, 129, 0.4) !important;
}

.investment-trend-chart .portfolio-metric-card .metric-label {
    color: #94a3b8 !important;
}

/* Chart container - Dark theme */
.investment-trend-chart .investment-chart-container {
    background: #1e293b !important;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Period tabs container */
.investment-trend-chart .period-tabs-container {
    background: rgba(99, 102, 241, 0.1);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Plotly chart text - Dark theme */
.investment-trend-chart .xtick text,
.investment-trend-chart .ytick text {
    fill: #94a3b8 !important;
}

.investment-trend-chart .legendtext {
    fill: #94a3b8 !important;
}

/* Grid lines - Dark theme */
.investment-trend-chart .gridlayer line {
    stroke: rgba(148, 163, 184, 0.15) !important;
}

/* Axis lines - Dark theme */
.investment-trend-chart .xlines line,
.investment-trend-chart .ylines line {
    stroke: rgba(148, 163, 184, 0.3) !important;
}

/* Range slider - Dark theme */
.investment-trend-chart .rangeslider-bg {
    fill: rgba(30, 41, 59, 0.5) !important;
}

.investment-trend-chart .rangeslider-mask-min,
.investment-trend-chart .rangeslider-mask-max {
    fill: rgba(15, 23, 42, 0.6) !important;
}

.investment-trend-chart .rangeslider-slidebox {
    fill: rgba(99, 102, 241, 0.2) !important;
    stroke: rgba(99, 102, 241, 0.5) !important;
}

.investment-trend-chart .rangeslider-grabarea {
    fill: rgba(99, 102, 241, 0.3) !important;
}

/* Period tab buttons - Dark theme */
.investment-trend-chart .period-tab {
    transition: all 0.2s ease;
}

.investment-trend-chart .period-tab:hover {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #f8fafc !important;
}

/* =============================================================================
   INVESTMENT TREND CHART - Light Theme
   ============================================================================= */

/* Light Theme - Investment Trend Chart */
[data-theme="light"] .investment-trend-chart,
.light-theme .investment-trend-chart,
body.light-theme .investment-trend-chart {
    background: transparent;
}

/* Metric cards - Light theme */
[data-theme="light"] .investment-trend-chart .portfolio-metric-card,
.light-theme .investment-trend-chart .portfolio-metric-card,
body.light-theme .investment-trend-chart .portfolio-metric-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    color: #1e293b !important;
}

[data-theme="light"] .investment-trend-chart .portfolio-metric-card.metric-main,
.light-theme .investment-trend-chart .portfolio-metric-card.metric-main,
body.light-theme .investment-trend-chart .portfolio-metric-card.metric-main {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.02)) !important;
    border: 2px solid rgba(16, 185, 129, 0.4) !important;
}

[data-theme="light"] .investment-trend-chart .portfolio-metric-card .metric-label,
.light-theme .investment-trend-chart .portfolio-metric-card .metric-label,
body.light-theme .investment-trend-chart .portfolio-metric-card .metric-label {
    color: #64748b !important;
}

/* Chart container - Light theme */
[data-theme="light"] .investment-trend-chart .investment-chart-container,
.light-theme .investment-trend-chart .investment-chart-container,
body.light-theme .investment-trend-chart .investment-chart-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Period tabs container - Light theme */
[data-theme="light"] .investment-trend-chart .period-tabs-container,
.light-theme .investment-trend-chart .period-tabs-container,
body.light-theme .investment-trend-chart .period-tabs-container {
    background: rgba(99, 102, 241, 0.05) !important;
    border: 1px solid #e2e8f0 !important;
}

/* Title styling - Light theme */
[data-theme="light"] .investment-trend-chart h4,
.light-theme .investment-trend-chart h4,
body.light-theme .investment-trend-chart h4 {
    color: #1e293b !important;
}

/* Plotly chart text - Light theme */
[data-theme="light"] .investment-trend-chart .xtick text,
[data-theme="light"] .investment-trend-chart .ytick text,
.light-theme .investment-trend-chart .xtick text,
.light-theme .investment-trend-chart .ytick text,
body.light-theme .investment-trend-chart .xtick text,
body.light-theme .investment-trend-chart .ytick text {
    fill: #64748b !important;
}

[data-theme="light"] .investment-trend-chart .legendtext,
.light-theme .investment-trend-chart .legendtext,
body.light-theme .investment-trend-chart .legendtext {
    fill: #64748b !important;
}

/* Grid lines - Light theme */
[data-theme="light"] .investment-trend-chart .gridlayer line,
.light-theme .investment-trend-chart .gridlayer line,
body.light-theme .investment-trend-chart .gridlayer line {
    stroke: rgba(148, 163, 184, 0.2) !important;
}

/* Range slider - Light theme */
[data-theme="light"] .investment-trend-chart .rangeslider-bg,
.light-theme .investment-trend-chart .rangeslider-bg,
body.light-theme .investment-trend-chart .rangeslider-bg {
    fill: #f1f5f9 !important;
}

[data-theme="light"] .investment-trend-chart .rangeslider-mask-min,
[data-theme="light"] .investment-trend-chart .rangeslider-mask-max,
.light-theme .investment-trend-chart .rangeslider-mask-min,
.light-theme .investment-trend-chart .rangeslider-mask-max,
body.light-theme .investment-trend-chart .rangeslider-mask-min,
body.light-theme .investment-trend-chart .rangeslider-mask-max {
    fill: rgba(241, 245, 249, 0.85) !important;
}

[data-theme="light"] .investment-trend-chart .rangeslider-slidebox,
.light-theme .investment-trend-chart .rangeslider-slidebox,
body.light-theme .investment-trend-chart .rangeslider-slidebox {
    fill: rgba(99, 102, 241, 0.15) !important;
    stroke: rgba(99, 102, 241, 0.4) !important;
}

/* Light theme period tabs */
[data-theme="light"] .investment-trend-chart .period-tab,
.light-theme .investment-trend-chart .period-tab,
body.light-theme .investment-trend-chart .period-tab {
    color: #64748b !important;
}

[data-theme="light"] .investment-trend-chart .period-tab:hover,
.light-theme .investment-trend-chart .period-tab:hover,
body.light-theme .investment-trend-chart .period-tab:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #1e293b !important;
}

[data-theme="light"] .investment-trend-chart .period-tab.active,
.light-theme .investment-trend-chart .period-tab.active,
body.light-theme .investment-trend-chart .period-tab.active {
    background: #6366f1 !important;
    color: #ffffff !important;
}

/* Hover label - both themes (keep dark for readability) */
.investment-trend-chart .hoverlayer .hovertext path {
    fill: rgba(30, 41, 59, 0.95) !important;
    stroke: rgba(148, 163, 184, 0.3) !important;
}

/* Mobile responsiveness for period tabs */
@media (max-width: 576px) {
    .investment-trend-chart .period-tabs-container {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .investment-trend-chart .period-tab {
        padding: 5px 12px !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
    }
}

/* =============================================================================
   EQUITY CURVE CHART - Dark Theme (Default)
   ============================================================================= */

.equity-curve-container {
    background: transparent;
    padding: 0;
}

.equity-curve-section {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.equity-curve-title {
    color: #f8fafc !important;
}

.equity-curve-subtitle {
    color: #94a3b8 !important;
}

.equity-curve-chart-container {
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
}

/* Equity Curve chart line color for dark theme */
.equity-curve-container .js-plotly-plot .scatter .lines path {
    stroke: #1f2937 !important;
}

/* =============================================================================
   EQUITY CURVE CHART - Light Theme
   ============================================================================= */

[data-theme="light"] .equity-curve-section,
.light-theme .equity-curve-section,
body.light-theme .equity-curve-section {
    background: linear-gradient(145deg, #ffffff, #f1f5f9) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
}

[data-theme="light"] .equity-curve-title,
.light-theme .equity-curve-title,
body.light-theme .equity-curve-title {
    color: #1e293b !important;
}

[data-theme="light"] .equity-curve-subtitle,
.light-theme .equity-curve-subtitle,
body.light-theme .equity-curve-subtitle {
    color: #64748b !important;
}

/* Light theme chart axis text */
[data-theme="light"] .equity-curve-container .xtick text,
[data-theme="light"] .equity-curve-container .ytick text,
.light-theme .equity-curve-container .xtick text,
.light-theme .equity-curve-container .ytick text,
body.light-theme .equity-curve-container .xtick text,
body.light-theme .equity-curve-container .ytick text {
    fill: #64748b !important;
}

/* Light theme grid lines */
[data-theme="light"] .equity-curve-container .xgrid,
[data-theme="light"] .equity-curve-container .ygrid,
.light-theme .equity-curve-container .xgrid,
.light-theme .equity-curve-container .ygrid,
body.light-theme .equity-curve-container .xgrid,
body.light-theme .equity-curve-container .ygrid {
    stroke: rgba(148, 163, 184, 0.2) !important;
}

/* Light theme range slider */
[data-theme="light"] .equity-curve-container .rangeslider-bg,
.light-theme .equity-curve-container .rangeslider-bg,
body.light-theme .equity-curve-container .rangeslider-bg {
    fill: #f1f5f9 !important;
}

[data-theme="light"] .equity-curve-container .rangeslider-mask-min,
[data-theme="light"] .equity-curve-container .rangeslider-mask-max,
.light-theme .equity-curve-container .rangeslider-mask-min,
.light-theme .equity-curve-container .rangeslider-mask-max,
body.light-theme .equity-curve-container .rangeslider-mask-min,
body.light-theme .equity-curve-container .rangeslider-mask-max {
    fill: rgba(241, 245, 249, 0.85) !important;
}

[data-theme="light"] .equity-curve-container .rangeslider-slidebox,
.light-theme .equity-curve-container .rangeslider-slidebox,
body.light-theme .equity-curve-container .rangeslider-slidebox {
    fill: rgba(99, 102, 241, 0.15) !important;
    stroke: rgba(99, 102, 241, 0.4) !important;
}

/* Light theme period tabs */
[data-theme="light"] .equity-curve-container .period-tab,
.light-theme .equity-curve-container .period-tab,
body.light-theme .equity-curve-container .period-tab {
    color: #64748b !important;
}

[data-theme="light"] .equity-curve-container .period-tab:hover,
.light-theme .equity-curve-container .period-tab:hover,
body.light-theme .equity-curve-container .period-tab:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #1e293b !important;
}

[data-theme="light"] .equity-curve-container .period-tab.active,
.light-theme .equity-curve-container .period-tab.active,
body.light-theme .equity-curve-container .period-tab.active {
    background: #6366f1 !important;
    color: #ffffff !important;
}

/* =============================================================================
   STOCK TREND SECTION - Dark Theme (Default)
   ============================================================================= */

.stock-trend-section {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.stock-trend-title {
    color: #f8fafc !important;
}

.stock-trend-subtitle {
    color: #94a3b8 !important;
}

.stock-trend-accordion {
    background: transparent;
}

.stock-trend-accordion-item {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    border-radius: 10px !important;
    margin-bottom: 0.75rem !important;
    overflow: hidden;
}

.stock-trend-accordion-item .accordion-button {
    background: transparent !important;
    color: #f8fafc !important;
    padding: 1rem 1.25rem;
    box-shadow: none !important;
}

.stock-trend-accordion-item .accordion-button:not(.collapsed) {
    background: rgba(59, 130, 246, 0.1) !important;
}

.stock-trend-accordion-item .accordion-button::after {
    filter: invert(1);
}

.stock-trend-accordion-item .accordion-body {
    background: transparent;
    padding: 0.5rem 1rem 1rem;
}

.stock-trend-symbol {
    color: #f8fafc !important;
}

.stock-trend-price {
    color: #f8fafc !important;
}

.stock-trend-metric-value {
    color: #f8fafc !important;
}

.stock-trend-chart-container {
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
}

.stock-trend-chart-wrapper {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
}

/* Stock Trend Range Slider - Dark Theme */
.stock-trend-chart-container .rangeslider-bg {
    fill: rgba(30, 41, 59, 0.8) !important;
}

.stock-trend-chart-container .rangeslider-mask-min,
.stock-trend-chart-container .rangeslider-mask-max {
    fill: rgba(15, 23, 42, 0.7) !important;
}

.stock-trend-chart-container .rangeslider-slidebox {
    fill: rgba(59, 130, 246, 0.2) !important;
    stroke: rgba(59, 130, 246, 0.5) !important;
}

.stock-trend-chart-container .rangeslider-grabarea {
    fill: rgba(59, 130, 246, 0.3) !important;
}

/* =============================================================================
   STOCK TREND SECTION - Light Theme
   ============================================================================= */

[data-theme="light"] .stock-trend-section,
.light-theme .stock-trend-section,
body.light-theme .stock-trend-section {
    background: linear-gradient(145deg, #ffffff, #f1f5f9) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
}

[data-theme="light"] .stock-trend-title,
.light-theme .stock-trend-title,
body.light-theme .stock-trend-title {
    color: #1e293b !important;
}

[data-theme="light"] .stock-trend-subtitle,
.light-theme .stock-trend-subtitle,
body.light-theme .stock-trend-subtitle {
    color: #64748b !important;
}

[data-theme="light"] .stock-trend-accordion-item,
.light-theme .stock-trend-accordion-item,
body.light-theme .stock-trend-accordion-item {
    background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
}

[data-theme="light"] .stock-trend-accordion-item .accordion-button,
.light-theme .stock-trend-accordion-item .accordion-button,
body.light-theme .stock-trend-accordion-item .accordion-button {
    background: transparent !important;
    color: #1e293b !important;
}

[data-theme="light"] .stock-trend-accordion-item .accordion-button:not(.collapsed),
.light-theme .stock-trend-accordion-item .accordion-button:not(.collapsed),
body.light-theme .stock-trend-accordion-item .accordion-button:not(.collapsed) {
    background: rgba(59, 130, 246, 0.08) !important;
}

[data-theme="light"] .stock-trend-accordion-item .accordion-button::after,
.light-theme .stock-trend-accordion-item .accordion-button::after,
body.light-theme .stock-trend-accordion-item .accordion-button::after {
    filter: none;
}

[data-theme="light"] .stock-trend-symbol,
.light-theme .stock-trend-symbol,
body.light-theme .stock-trend-symbol {
    color: #1e293b !important;
}

[data-theme="light"] .stock-trend-price,
.light-theme .stock-trend-price,
body.light-theme .stock-trend-price {
    color: #1e293b !important;
}

[data-theme="light"] .stock-trend-metric-value,
.light-theme .stock-trend-metric-value,
body.light-theme .stock-trend-metric-value {
    color: #1e293b !important;
}

[data-theme="light"] .stock-trend-chart-wrapper,
.light-theme .stock-trend-chart-wrapper,
body.light-theme .stock-trend-chart-wrapper {
    background: rgba(241, 245, 249, 0.5);
}

/* Light theme chart axis text */
[data-theme="light"] .stock-trend-chart-container .xtick text,
[data-theme="light"] .stock-trend-chart-container .ytick text,
.light-theme .stock-trend-chart-container .xtick text,
.light-theme .stock-trend-chart-container .ytick text,
body.light-theme .stock-trend-chart-container .xtick text,
body.light-theme .stock-trend-chart-container .ytick text {
    fill: #64748b !important;
}

/* Light theme grid lines */
[data-theme="light"] .stock-trend-chart-container .xgrid,
[data-theme="light"] .stock-trend-chart-container .ygrid,
.light-theme .stock-trend-chart-container .xgrid,
.light-theme .stock-trend-chart-container .ygrid,
body.light-theme .stock-trend-chart-container .xgrid,
body.light-theme .stock-trend-chart-container .ygrid {
    stroke: rgba(148, 163, 184, 0.2) !important;
}

/* Light theme range slider */
[data-theme="light"] .stock-trend-chart-container .rangeslider-bg,
.light-theme .stock-trend-chart-container .rangeslider-bg,
body.light-theme .stock-trend-chart-container .rangeslider-bg {
    fill: #f1f5f9 !important;
}

[data-theme="light"] .stock-trend-chart-container .rangeslider-mask-min,
[data-theme="light"] .stock-trend-chart-container .rangeslider-mask-max,
.light-theme .stock-trend-chart-container .rangeslider-mask-min,
.light-theme .stock-trend-chart-container .rangeslider-mask-max,
body.light-theme .stock-trend-chart-container .rangeslider-mask-min,
body.light-theme .stock-trend-chart-container .rangeslider-mask-max {
    fill: rgba(241, 245, 249, 0.85) !important;
}

[data-theme="light"] .stock-trend-chart-container .rangeslider-slidebox,
.light-theme .stock-trend-chart-container .rangeslider-slidebox,
body.light-theme .stock-trend-chart-container .rangeslider-slidebox {
    fill: rgba(59, 130, 246, 0.15) !important;
    stroke: rgba(59, 130, 246, 0.4) !important;
}

[data-theme="light"] .stock-trend-chart-container .rangeslider-grabarea,
.light-theme .stock-trend-chart-container .rangeslider-grabarea,
body.light-theme .stock-trend-chart-container .rangeslider-grabarea {
    fill: rgba(59, 130, 246, 0.2) !important;
}

/* =============================================================================
   RISK MANAGEMENT DASHBOARD - Dark Theme (Default)
   ============================================================================= */

.risk-management-dashboard {
    padding: 1rem;
}

.risk-management-container {
    background: transparent;
}

/* Risk Metric Cards */
.risk-metric-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.1);
    transition: all 0.3s ease;
}

.risk-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Risk Chart Cards */
.risk-chart-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    overflow: hidden;
}

.risk-chart-card .risk-chart {
    width: 100%;
    height: 350px;
}

/* Risk Chart Select Dropdown */
.risk-chart-select {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    padding: 4px 8px !important;
}

.risk-chart-select:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
}

.risk-chart-select option {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Purple text color class */
.text-purple {
    color: #a78bfa !important;
}

/* =============================================================================
   RISK MANAGEMENT DASHBOARD - Light Theme
   ============================================================================= */

[data-theme="light"] .risk-management-dashboard,
.light-theme .risk-management-dashboard,
body.light-theme .risk-management-dashboard {
    color: #1e293b;
}

[data-theme="light"] .risk-metric-card,
.light-theme .risk-metric-card,
body.light-theme .risk-metric-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .risk-metric-card > div:first-child,
.light-theme .risk-metric-card > div:first-child,
body.light-theme .risk-metric-card > div:first-child {
    color: #64748b !important;
}

[data-theme="light"] .risk-metric-card > div:last-child,
.light-theme .risk-metric-card > div:last-child,
body.light-theme .risk-metric-card > div:last-child {
    color: #1e293b !important;
}

[data-theme="light"] .risk-chart-card,
.light-theme .risk-chart-card,
body.light-theme .risk-chart-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .risk-chart-card span,
.light-theme .risk-chart-card span,
body.light-theme .risk-chart-card span {
    color: #1e293b !important;
}

[data-theme="light"] .risk-chart-card small,
.light-theme .risk-chart-card small,
body.light-theme .risk-chart-card small {
    color: #64748b !important;
}

[data-theme="light"] .risk-chart-select,
.light-theme .risk-chart-select,
body.light-theme .risk-chart-select {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

[data-theme="light"] .risk-chart-select option,
.light-theme .risk-chart-select option,
body.light-theme .risk-chart-select option {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

/* Light theme chart backgrounds */
[data-theme="light"] .risk-chart-card .js-plotly-plot .plotly .main-svg,
.light-theme .risk-chart-card .js-plotly-plot .plotly .main-svg,
body.light-theme .risk-chart-card .js-plotly-plot .plotly .main-svg {
    background: transparent !important;
}

[data-theme="light"] .risk-chart-card .js-plotly-plot .plotly .bg,
.light-theme .risk-chart-card .js-plotly-plot .plotly .bg,
body.light-theme .risk-chart-card .js-plotly-plot .plotly .bg {
    fill: transparent !important;
}

/* Light theme axis labels */
[data-theme="light"] .risk-chart-card .xtick text,
[data-theme="light"] .risk-chart-card .ytick text,
[data-theme="light"] .risk-chart-card .g-xtitle text,
[data-theme="light"] .risk-chart-card .g-ytitle text,
.light-theme .risk-chart-card .xtick text,
.light-theme .risk-chart-card .ytick text,
.light-theme .risk-chart-card .g-xtitle text,
.light-theme .risk-chart-card .g-ytitle text,
body.light-theme .risk-chart-card .xtick text,
body.light-theme .risk-chart-card .ytick text,
body.light-theme .risk-chart-card .g-xtitle text,
body.light-theme .risk-chart-card .g-ytitle text {
    fill: #64748b !important;
}

/* Light theme gridlines */
[data-theme="light"] .risk-chart-card .xgrid,
[data-theme="light"] .risk-chart-card .ygrid,
.light-theme .risk-chart-card .xgrid,
.light-theme .risk-chart-card .ygrid,
body.light-theme .risk-chart-card .xgrid,
body.light-theme .risk-chart-card .ygrid {
    stroke: rgba(148, 163, 184, 0.15) !important;
}

/* Light theme header */
[data-theme="light"] .risk-management-dashboard h4,
.light-theme .risk-management-dashboard h4,
body.light-theme .risk-management-dashboard h4 {
    color: #1e293b !important;
}

/* =============================================================================
   STOCK ANALYSIS DASHBOARD - Dark Theme (Default)
   ============================================================================= */

.stock-analysis-dashboard {
    padding: 0.5rem;
}

/* Summary Card */
.stock-analysis-summary-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 16px;
    padding: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.stock-analysis-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .stock-analysis-summary-grid {
        grid-template-columns: 1fr;
    }
}

.stock-analysis-summary-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.stock-analysis-summary-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    color: #818cf8;
}

.stock-analysis-summary-label {
    display: block;
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.stock-analysis-summary-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #f8fafc;
}

.stock-analysis-summary-pct {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

/* Tabs */
.stock-analysis-tabs {
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.stock-analysis-tabs .nav-link {
    color: #94a3b8 !important;
    font-weight: 600;
    border: none !important;
    background: transparent !important;
    padding: 0.75rem 1.25rem;
}

.stock-analysis-tabs .nav-link.active {
    color: #f8fafc !important;
    background: transparent !important;
    border-bottom: 2px solid #6366f1 !important;
}

.stock-analysis-tab-profit .nav-link.active {
    border-bottom-color: #10b981 !important;
}

.stock-analysis-tab-loss .nav-link.active {
    border-bottom-color: #ef4444 !important;
}

/* Accordion */
.stock-analysis-accordion {
    background: transparent;
}

.stock-analysis-accordion-item {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    border-radius: 12px !important;
    margin-bottom: 0.75rem !important;
    overflow: hidden;
}

.stock-analysis-accordion-item .accordion-button {
    background: transparent !important;
    color: #f8fafc !important;
    padding: 1rem;
    box-shadow: none !important;
}

.stock-analysis-accordion-item .accordion-button:not(.collapsed) {
    background: rgba(99, 102, 241, 0.08) !important;
}

.stock-analysis-accordion-item .accordion-button::after {
    filter: invert(1);
}

.stock-analysis-accordion-item .accordion-body {
    background: transparent;
    padding: 0;
}

/* Accordion Header */
.stock-analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.stock-analysis-symbol {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f8fafc;
}

.stock-analysis-header-price {
    font-size: 0.95rem;
    font-weight: 600;
    color: #94a3b8;
}

.stock-analysis-header-pnl {
    font-size: 0.95rem;
    font-weight: 700;
}

.stock-analysis-header-pct {
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.stock-analysis-header-action {
    font-size: 0.65rem;
    font-weight: 600;
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.stock-analysis-header-reco {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    border: 1px solid;
    background: transparent;
}

/* Card Content */
.stock-analysis-card {
    padding: 1rem;
}

.stock-analysis-body {
    display: flex;
    flex-direction: column;
}

/* Labels */
.stock-analysis-label {
    display: block;
    font-size: 0.65rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

/* P&L Card */
.stock-analysis-pnl-card {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stock-analysis-pnl-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.stock-analysis-pnl-pct {
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
}

/* Metrics Row */
.stock-analysis-metrics-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.stock-analysis-metric-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 0.75rem;
    text-align: center;
    border: 1px solid rgba(148, 163, 184, 0.08);
}

.stock-analysis-value {
    font-size: 1.25rem;
    font-weight: 700;
    display: block;
}

.stock-analysis-current {
    color: #60a5fa;
}

.stock-analysis-invested {
    color: #a78bfa;
}

/* Info Row */
.stock-analysis-info-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

@media (max-width: 576px) {
    .stock-analysis-info-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stock-analysis-info-item {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 0.5rem;
    text-align: center;
    border: 1px solid rgba(148, 163, 184, 0.05);
}

.stock-analysis-small-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
    display: block;
}

/* Progress Bar */
.stock-analysis-progress-pct {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
}

.stock-analysis-progress-bar {
    height: 6px;
    background: rgba(148, 163, 184, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

/* AI Prices */
.stock-analysis-ai-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.stock-analysis-ai-card {
    padding: 0.6rem;
    border-radius: 8px;
    text-align: center;
}

.stock-analysis-ai-buy-card {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.stock-analysis-ai-sell-card {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.stock-analysis-ai-buy {
    font-size: 1rem;
    font-weight: 700;
    color: #10b981;
    display: block;
}

.stock-analysis-ai-sell {
    font-size: 1rem;
    font-weight: 700;
    color: #ef4444;
    display: block;
}

/* AI Insight Card */
.stock-analysis-insight-card {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    align-items: flex-start;
}

.stock-analysis-insight-text {
    font-size: 0.8rem;
    color: #c4b5fd;
    line-height: 1.4;
}

/* Footer */
.stock-analysis-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.stock-analysis-meta-item {
    font-size: 0.7rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stock-analysis-alerts {
    display: flex;
    gap: 0.25rem;
}

.stock-analysis-alert {
    font-size: 0.6rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.2);
    color: #64748b;
}

.stock-analysis-alert.active {
    background: #10b981;
    color: white;
}

/* =============================================================================
   STOCK ANALYSIS DASHBOARD - Light Theme
   ============================================================================= */

[data-theme="light"] .stock-analysis-summary-card,
.light-theme .stock-analysis-summary-card,
body.light-theme .stock-analysis-summary-card {
    background: linear-gradient(145deg, #ffffff, #f1f5f9) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
}

[data-theme="light"] .stock-analysis-summary-item,
.light-theme .stock-analysis-summary-item,
body.light-theme .stock-analysis-summary-item {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .stock-analysis-summary-icon,
.light-theme .stock-analysis-summary-icon,
body.light-theme .stock-analysis-summary-icon {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

[data-theme="light"] .stock-analysis-summary-label,
.light-theme .stock-analysis-summary-label,
body.light-theme .stock-analysis-summary-label {
    color: #64748b;
}

[data-theme="light"] .stock-analysis-summary-value,
.light-theme .stock-analysis-summary-value,
body.light-theme .stock-analysis-summary-value {
    color: #1e293b;
}

[data-theme="light"] .stock-analysis-tabs,
.light-theme .stock-analysis-tabs,
body.light-theme .stock-analysis-tabs {
    border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] .stock-analysis-tabs .nav-link,
.light-theme .stock-analysis-tabs .nav-link,
body.light-theme .stock-analysis-tabs .nav-link {
    color: #64748b !important;
}

[data-theme="light"] .stock-analysis-tabs .nav-link.active,
.light-theme .stock-analysis-tabs .nav-link.active,
body.light-theme .stock-analysis-tabs .nav-link.active {
    color: #1e293b !important;
}

[data-theme="light"] .stock-analysis-accordion-item,
.light-theme .stock-analysis-accordion-item,
body.light-theme .stock-analysis-accordion-item {
    background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
}

[data-theme="light"] .stock-analysis-accordion-item .accordion-button,
.light-theme .stock-analysis-accordion-item .accordion-button,
body.light-theme .stock-analysis-accordion-item .accordion-button {
    color: #1e293b !important;
}

[data-theme="light"] .stock-analysis-accordion-item .accordion-button:not(.collapsed),
.light-theme .stock-analysis-accordion-item .accordion-button:not(.collapsed),
body.light-theme .stock-analysis-accordion-item .accordion-button:not(.collapsed) {
    background: rgba(99, 102, 241, 0.05) !important;
}

[data-theme="light"] .stock-analysis-accordion-item .accordion-button::after,
.light-theme .stock-analysis-accordion-item .accordion-button::after,
body.light-theme .stock-analysis-accordion-item .accordion-button::after {
    filter: none;
}

[data-theme="light"] .stock-analysis-symbol,
.light-theme .stock-analysis-symbol,
body.light-theme .stock-analysis-symbol {
    color: #1e293b;
}

[data-theme="light"] .stock-analysis-header-price,
.light-theme .stock-analysis-header-price,
body.light-theme .stock-analysis-header-price {
    color: #64748b;
}

[data-theme="light"] .stock-analysis-label,
.light-theme .stock-analysis-label,
body.light-theme .stock-analysis-label {
    color: #64748b;
}

[data-theme="light"] .stock-analysis-metric-card,
.light-theme .stock-analysis-metric-card,
body.light-theme .stock-analysis-metric-card {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

[data-theme="light"] .stock-analysis-current,
.light-theme .stock-analysis-current,
body.light-theme .stock-analysis-current {
    color: #3b82f6;
}

[data-theme="light"] .stock-analysis-invested,
.light-theme .stock-analysis-invested,
body.light-theme .stock-analysis-invested {
    color: #7c3aed;
}

[data-theme="light"] .stock-analysis-info-item,
.light-theme .stock-analysis-info-item,
body.light-theme .stock-analysis-info-item {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.1);
}

[data-theme="light"] .stock-analysis-small-value,
.light-theme .stock-analysis-small-value,
body.light-theme .stock-analysis-small-value {
    color: #1e293b;
}

[data-theme="light"] .stock-analysis-progress-pct,
.light-theme .stock-analysis-progress-pct,
body.light-theme .stock-analysis-progress-pct {
    color: #64748b;
}

[data-theme="light"] .stock-analysis-progress-bar,
.light-theme .stock-analysis-progress-bar,
body.light-theme .stock-analysis-progress-bar {
    background: rgba(148, 163, 184, 0.2);
}

[data-theme="light"] .stock-analysis-ai-buy-card,
.light-theme .stock-analysis-ai-buy-card,
body.light-theme .stock-analysis-ai-buy-card {
    background: rgba(16, 185, 129, 0.08);
}

[data-theme="light"] .stock-analysis-ai-sell-card,
.light-theme .stock-analysis-ai-sell-card,
body.light-theme .stock-analysis-ai-sell-card {
    background: rgba(239, 68, 68, 0.08);
}

[data-theme="light"] .stock-analysis-insight-card,
.light-theme .stock-analysis-insight-card,
body.light-theme .stock-analysis-insight-card {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.15);
}

[data-theme="light"] .stock-analysis-insight-text,
.light-theme .stock-analysis-insight-text,
body.light-theme .stock-analysis-insight-text {
    color: #6d28d9;
}

[data-theme="light"] .stock-analysis-footer,
.light-theme .stock-analysis-footer,
body.light-theme .stock-analysis-footer {
    border-top-color: rgba(148, 163, 184, 0.15);
}

[data-theme="light"] .stock-analysis-meta-item,
.light-theme .stock-analysis-meta-item,
body.light-theme .stock-analysis-meta-item {
    color: #64748b;
}

[data-theme="light"] .stock-analysis-alert,
.light-theme .stock-analysis-alert,
body.light-theme .stock-analysis-alert {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

[data-theme="light"] .risk-management-dashboard > div > p,
.light-theme .risk-management-dashboard > div > p,
body.light-theme .risk-management-dashboard > div > p {
    color: #64748b !important;
}

/* Mobile responsiveness for Risk Dashboard */
@media (max-width: 768px) {
    .risk-metric-card {
        padding: 0.75rem;
    }
    
    .risk-metric-card > div:last-child {
        font-size: 1.2rem !important;
    }
    
    .risk-chart-card .risk-chart {
        height: 300px;
    }
}

/* ==========================================================================
   INVESTMENT PAGE — Dark Theme (default)
   ========================================================================== */

/* Page wrapper & container */
.invest-page-wrapper {
    padding: 0;
}
.invest-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
}

/* Input section */
.invest-input-section {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

/* Labels */
.invest-label {
    color: #e2e8f0;
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Amount input */
.invest-input-prefix {
    background: #0f172a;
    border: 1px solid #334155;
    color: #00bcd4;
    font-weight: 600;
}
.invest-amount-input,
.invest-amount-input.form-control {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #e2e8f0 !important;
}
.invest-amount-input:focus {
    border-color: #00bcd4 !important;
    box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.15) !important;
}

/* Risk buttons */
.invest-risk-btn {
    border-radius: 8px !important;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.35rem 1rem;
}

/* Quick amount buttons */
.invest-quick-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    border-color: #475569;
    color: #94a3b8;
}
.invest-quick-btn:hover {
    background: rgba(0, 188, 212, 0.1);
    border-color: #00bcd4;
    color: #00bcd4;
}

/* Strategy display bar */
.invest-strategy-display {
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid #334155;
}
.invest-strategy-aggressive {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}
.invest-strategy-moderate {
    background: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: #22c55e !important;
}

/* Sector filter section */
.invest-sector-section {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

/* Sector checklist pills */
.invest-sector-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.invest-sector-checklist .form-check {
    padding-left: 0;
    margin: 0;
}
.invest-sector-checklist .form-check-input {
    display: none;
}
.invest-sector-checklist .form-check-label {
    background: rgba(0, 188, 212, 0.08);
    border: 1px solid rgba(0, 188, 212, 0.2);
    color: #94a3b8;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.invest-sector-checklist .form-check-input:checked + .form-check-label {
    background: rgba(0, 188, 212, 0.18);
    border-color: #00bcd4;
    color: #00bcd4;
    font-weight: 500;
}
.invest-sector-checklist .form-check-label:hover {
    background: rgba(0, 188, 212, 0.15);
    border-color: #00bcd4;
}

/* Link buttons */
.invest-link-btn {
    color: #00bcd4 !important;
    text-decoration: none !important;
    font-size: 0.8rem;
}
.invest-link-btn:hover {
    text-decoration: underline !important;
}
.invest-link-btn-muted {
    color: #94a3b8 !important;
    text-decoration: none !important;
    font-size: 0.8rem;
}

/* Icons */
.invest-accent-icon {
    color: #00bcd4;
}
.invest-muted-icon {
    color: #64748b;
    font-size: 0.8rem;
}

/* Text utilities */
.invest-heading {
    color: #e2e8f0;
}
.invest-subtext {
    color: #94a3b8;
}
.invest-muted-text {
    color: #64748b;
}
.invest-divider {
    border-color: #334155;
}

/* Tabs */
.invest-tabs {
    border-bottom: 1px solid #334155;
}
.invest-tabs .nav-link {
    color: #94a3b8;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 1.2rem;
    font-size: 0.875rem;
    transition: color 0.2s, border-color 0.2s;
}
.invest-tabs .nav-link:hover {
    color: #e2e8f0;
    border-bottom-color: #475569;
}
.invest-tabs .nav-link.active {
    color: #00bcd4 !important;
    background: transparent !important;
    border-bottom: 2px solid #00bcd4 !important;
}

/* Summary card */
.invest-summary-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 1.25rem;
}

/* Metric card */
.invest-metric-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 0.75rem;
}

/* Stock tile card */
.invest-stock-tile {
    background: #1e293b !important;
    border-radius: 16px !important;
    border: 1px solid #334155 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.invest-stock-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Chart wrapper */
.invest-chart-wrapper {
    background: #0f172a;
    border-radius: 16px;
}

/* Analysis modal */
.invest-analysis-modal .modal-content {
    background: #1e293b;
    border: 1px solid #334155;
}
.invest-modal-header {
    background: #1e293b;
    border-bottom: 1px solid #334155;
    color: #e2e8f0;
}
.invest-modal-body {
    background: #1e293b;
    color: #e2e8f0;
}
.invest-modal-footer {
    background: #1e293b;
    border-top: 1px solid #334155;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .invest-page-container {
        padding: 0.5rem;
    }
    .invest-input-section {
        padding: 0.75rem;
    }
    .invest-sector-section {
        padding: 0.75rem;
    }
    .invest-strategy-display {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ==========================================================================
   SEARCH PAGE — Dark Theme (default)
   ========================================================================== */

/* Search card */
.search-card {
    border-radius: 12px !important;
    background: #1e293b;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.search-card-body {
    padding: 12px 16px;
}

/* Search input */
.search-stock-input {
    width: 100%;
    font-size: 0.95rem;
    padding: 8px 14px !important;
    height: 42px !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease;
}
.search-stock-input::placeholder {
    color: #64748b !important;
}
.search-stock-input:focus {
    border-color: #00bcd4 !important;
    box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.15) !important;
}

/* Search button */
.search-stock-btn {
    height: 42px !important;
    font-weight: 500;
    border-radius: 8px !important;
    background: linear-gradient(to right, #198754, #2ecc71) !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   CHART MODAL — Dark Theme (default)
   ========================================================================== */

/* Modal container */
.chart-modal .modal-content {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* Header */
.chart-modal-header {
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
    padding: 16px 24px;
}
.chart-modal-icon {
    color: #22d3ee;
    font-size: 1.1rem;
}
.chart-modal-title {
    color: #f1f5f9;
    font-size: 1.1rem;
    font-weight: 600;
}
.chart-modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Body */
.chart-modal-body {
    background: #0f172a;
    color: #e2e8f0;
    padding: 20px 24px;
    min-height: 480px;
}

/* Footer */
.chart-modal-footer {
    background: #0f172a;
    border-top: 1px solid #1e293b;
    padding: 12px 24px;
}
.chart-modal-close-btn {
    border-radius: 8px;
    border: 1px solid #334155;
    color: #cbd5e1;
    font-weight: 500;
    background: transparent;
}
.chart-modal-close-btn:hover {
    background: #1e293b;
    border-color: #475569;
    color: #f1f5f9;
}

/* Price info header */
.chart-info-header {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 16px 20px;
}
.chart-info-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.2;
}
.chart-price-up {
    color: #10b981;
    font-weight: 600;
    font-size: 0.95rem;
}
.chart-price-down {
    color: #ef4444;
    font-weight: 600;
    font-size: 0.95rem;
}
.chart-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}
.chart-info-label {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 500;
}
.chart-info-value {
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Chart tabs */
.chart-tabs {
    border-bottom: 1px solid #1e293b;
}
.chart-tabs .nav-link {
    color: #64748b;
    font-weight: 500;
    font-size: 0.85rem;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 16px;
    transition: all 0.2s;
}
.chart-tabs .nav-link:hover {
    color: #e2e8f0;
    border-bottom-color: #475569;
}
.chart-tabs .nav-link.active {
    color: #22d3ee !important;
    background: transparent !important;
    border-bottom: 2px solid #22d3ee !important;
}

/* Chart graph wrapper */
.chart-graph-wrapper {
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
}

/* Signal bar */
.chart-signal-bar {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 12px;
}

/* Criteria group */
.chart-criteria-group-title {
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 1px solid #334155;
    padding-bottom: 5px;
    margin-bottom: 8px;
}
.chart-criteria-accordion .accordion-item {
    background: #1e293b;
    border-color: #334155;
}
.chart-criteria-accordion .accordion-button {
    background: #1e293b;
    color: #e2e8f0;
    font-size: 0.9rem;
    box-shadow: none;
}
.chart-criteria-accordion .accordion-button:not(.collapsed) {
    background: #1e293b;
    color: #22d3ee;
}
.chart-criteria-accordion .accordion-body {
    background: #0f172a;
    color: #cbd5e1;
}

/* ==========================================================================
   MARKET FLAG SELECTOR — Dark Theme (default)
   ========================================================================== */

.market-flag-btn {
    cursor: pointer;
    transition: transform 0.2s ease;
    line-height: 1;
}
.market-flag-btn:hover {
    transform: scale(1.15);
}
/* Flag images */
.market-flag-img {
    width: 18px !important;
    height: 13px !important;
    max-width: 18px !important;
    max-height: 13px !important;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.2);
    vertical-align: middle;
    display: inline-block;
}
.market-flag-img-dd {
    width: 20px !important;
    height: 14px !important;
    max-width: 20px !important;
    max-height: 14px !important;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.1);
    display: inline-block;
}

.market-flag-dropdown {
    position: absolute;
    top: 42px;
    right: 0;
    width: 190px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    z-index: 1100;
    padding: 6px;
    animation: flagDropIn 0.15s ease;
}
@keyframes flagDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.market-flag-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    color: #cbd5e1;
}
.market-flag-option:hover {
    background: rgba(255,255,255,0.06);
}
.market-flag-option.market-flag-active {
    background: rgba(34,211,238,0.1);
}

.market-flag-label {
    font-size: 0.88rem;
    font-weight: 500;
}

.market-flag-check {
    color: #22d3ee;
    font-size: 0.85rem;
}

/* =============================================================================
   ADMIN PAGE - Theme-aware styles (Dark & Light)
   ============================================================================= */

/* ── Admin Card ── */
.admin-card {
    background: var(--panel-dark, #0f172a) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: var(--text-primary, #f8fafc) !important;
}
.admin-card .card-body {
    background: transparent !important;
    color: var(--text-primary, #f8fafc) !important;
}

/* ── Admin Table (Dark) ── */
.admin-table,
.admin-table > tbody,
.admin-table > thead {
    color: var(--text-primary, #f8fafc) !important;
    background: transparent !important;
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: rgba(255,255,255,0.03) !important;
    --bs-table-hover-bg: rgba(255,255,255,0.05) !important;
    --bs-table-color: var(--text-primary, #f8fafc) !important;
    --bs-table-striped-color: var(--text-primary, #f8fafc) !important;
    --bs-table-hover-color: var(--text-primary, #f8fafc) !important;
    --bs-table-border-color: rgba(255,255,255,0.06) !important;
}
.admin-table thead th {
    background: rgba(255,255,255,0.04) !important;
    color: #94a3b8 !important;
    border-bottom: 2px solid rgba(255,255,255,0.08) !important;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px !important;
}
.admin-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    transition: background 0.15s ease;
    background: transparent !important;
}
.admin-table tbody tr:nth-of-type(odd) {
    background: rgba(255,255,255,0.02) !important;
}
.admin-table tbody tr:hover {
    background: rgba(255,255,255,0.06) !important;
}
.admin-table tbody td {
    color: #e2e8f0 !important;
    padding: 10px 12px !important;
    vertical-align: middle;
    border-color: rgba(255,255,255,0.04) !important;
    font-size: 0.88rem;
    background: transparent !important;
}

/* Force override Bootstrap striped defaults in dark mode */
.admin-table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(255,255,255,0.02) !important;
    color: #e2e8f0 !important;
}
.admin-table.table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-bg-type: transparent !important;
    color: #e2e8f0 !important;
}
.admin-table.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(255,255,255,0.06) !important;
    color: #f8fafc !important;
}

/* ── Admin Search Input ── */
.admin-search-input {
    background: rgba(255,255,255,0.04) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 6px;
}
.admin-search-input::placeholder {
    color: #64748b !important;
}
.admin-search-input:focus {
    background: rgba(255,255,255,0.06) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.25) !important;
    color: #f8fafc !important;
}

/* ── Admin H6 labels ── */
.admin-card h6 {
    color: var(--text-primary, #f8fafc) !important;
}

/* ── Admin pagination / muted text ── */
.admin-card .text-muted {
    color: #64748b !important;
}

/* ── Delete button dark outline ── */
.admin-table .btn-outline-dark {
    color: #94a3b8 !important;
    border-color: rgba(255,255,255,0.15) !important;
}
.admin-table .btn-outline-dark:hover {
    color: #fff !important;
    background: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* =============================================================================
   LIGHT THEME OVERRIDES for Admin
   ============================================================================= */
body.light-theme .admin-card {
    background: #ffffff !important;
    border-color: #d1d9e6 !important;
    color: #1a202c !important;
}
body.light-theme .admin-card .card-body {
    color: #1a202c !important;
}
body.light-theme .admin-table,
body.light-theme .admin-table > tbody,
body.light-theme .admin-table > thead {
    color: #1a202c !important;
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: #f8fafc !important;
    --bs-table-hover-bg: #edf2f7 !important;
    --bs-table-color: #1a202c !important;
    --bs-table-striped-color: #1a202c !important;
    --bs-table-hover-color: #1a202c !important;
    --bs-table-border-color: #e2e8f0 !important;
}
body.light-theme .admin-table thead th {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-bottom-color: #cbd5e1 !important;
}
body.light-theme .admin-table tbody tr {
    border-color: #e2e8f0 !important;
    background: transparent !important;
}
body.light-theme .admin-table tbody tr:nth-of-type(odd) {
    background: #f8fafc !important;
}
body.light-theme .admin-table tbody tr:hover {
    background: #edf2f7 !important;
}
body.light-theme .admin-table tbody td {
    color: #1a202c !important;
    border-color: #e2e8f0 !important;
    background: transparent !important;
}
body.light-theme .admin-table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: #f8fafc !important;
    color: #1a202c !important;
}
body.light-theme .admin-table.table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-bg-type: transparent !important;
    color: #1a202c !important;
}
body.light-theme .admin-table.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: #edf2f7 !important;
    color: #1a202c !important;
}
body.light-theme .admin-search-input {
    background: #ffffff !important;
    color: #1a202c !important;
    border-color: #cbd5e1 !important;
}
body.light-theme .admin-search-input::placeholder {
    color: #94a3b8 !important;
}
body.light-theme .admin-search-input:focus {
    background: #ffffff !important;
    color: #1a202c !important;
}
body.light-theme .admin-card h6 {
    color: #1a202c !important;
}
body.light-theme .admin-card .text-muted {
    color: #718096 !important;
}
body.light-theme .admin-table .btn-outline-dark {
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}
body.light-theme .admin-table .btn-outline-dark:hover {
    color: #fff !important;
    background: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* =============================================================================
   ADMIN REPORTS DASHBOARD
   ============================================================================= */

/* ── KPI Stat Cards ── */
.admin-card.p-3 {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    position: relative;
    overflow: hidden;
}
.admin-card.p-3::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.admin-card.p-3:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.admin-card.p-3:hover::before {
    opacity: 1;
}

/* ── Report Period Selector ── */
#report-period-select .form-check-input:checked {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
}
#report-period-select .form-check-label {
    user-select: none;
    transition: color 0.15s ease;
}
#report-period-select .form-check-input:checked + .form-check-label {
    color: #818cf8 !important;
    font-weight: 600 !important;
}
body.light-theme #report-period-select .form-check-input:checked + .form-check-label {
    color: #4f46e5 !important;
}

/* ── SVG chart containers ── */
.admin-card iframe {
    border: none !important;
    background: transparent !important;
    width: 100%;
    pointer-events: none;
    display: block;
}

/* ── Prediction accuracy progress bars ── */
.rpt-pred-bar-track {
    background: rgba(128, 128, 128, 0.15);
    border-radius: 6px;
    overflow: hidden;
    height: 8px;
}
.rpt-pred-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Budget / Portfolio badges ── */
.rpt-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.rpt-badge-green {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}
.rpt-badge-red {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}
body.light-theme .rpt-badge-green {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
body.light-theme .rpt-badge-red {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

/* ── Top Stocks list ── */
.rpt-stock-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: background 0.15s ease;
}
.rpt-stock-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
body.light-theme .rpt-stock-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* ── Billing / P&L table within reports ── */
.admin-card .rpt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
}
.admin-card .rpt-table thead th {
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 1;
}
.admin-card .rpt-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle;
}
.admin-card .rpt-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}
body.light-theme .admin-card .rpt-table thead th {
    background: #f1f5f9;
    color: #475569;
    border-bottom-color: #e2e8f0;
}
body.light-theme .admin-card .rpt-table tbody td {
    border-bottom-color: #f1f5f9;
    color: #1e293b;
}
body.light-theme .admin-card .rpt-table tbody tr:hover {
    background: #f8fafc;
}

/* ── Scrollable container for large tables ── */
.rpt-scroll {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
}
.rpt-scroll::-webkit-scrollbar {
    width: 5px;
}
.rpt-scroll::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 4px;
}

/* ── Report card heading icons ── */
.admin-card h6 i.fas {
    opacity: 0.5;
    font-size: 0.8rem;
}

/* ── Responsive: stack on mobile ── */
@media (max-width: 767px) {
    .admin-card.p-3 {
        padding: 12px !important;
    }
}