/* Common/Global Styles for ValueHound */

/* Logo Styles */
.navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0.25rem 0;
}

.navbar-brand .logo-img {
    height: 40px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.navbar-brand .logo-img:hover {
    transform: scale(1.05);
}

/* Dark theme: use dark logo image instead of filter */
.logo-dark { display: none !important; }
[data-theme="dark"] .logo-light { display: none !important; }
[data-theme="dark"] .logo-dark { display: inline-block !important; }

/* Dark theme adjustments for navbar logo (when not using separate dark image) */
[data-theme="dark"] .navbar-brand .logo-img:not(.logo-dark) {
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.1));
}

/* Hero logo styles (for home page) */
.hero-logo {
    height: 120px;
    width: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
    transition: transform 0.3s ease;
}

.hero-logo:hover {
    transform: scale(1.05);
}

/* Dark theme adjustments for hero logo */
[data-theme="dark"] .hero-logo {
    filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.1));
}

/* Hero heading with gradient text */
.hero-heading {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive logo sizes */
@media (max-width: 768px) {
    .navbar-brand .logo-img {
        height: 32px;
    }
    
    .hero-logo {
        height: 80px;
    }
}

/* Watchlist Modal z-index fix - ensure it's above all other modals */
#addToWatchlistModal,
.watchlist-notes-modal,
#removeWatchlistConfirmModal {
    z-index: 1075 !important;
}

#addToWatchlistModal .modal-dialog,
.watchlist-notes-modal .modal-dialog,
#removeWatchlistConfirmModal .modal-dialog {
    z-index: 1076 !important;
}

/* Ensure backdrop is below watchlist modal but above other modals */
#addToWatchlistModal.show ~ .modal-backdrop,
body:has(#addToWatchlistModal.show) .modal-backdrop,
.watchlist-notes-modal.show ~ .modal-backdrop,
body:has(.watchlist-notes-modal.show) .modal-backdrop,
#removeWatchlistConfirmModal.show ~ .modal-backdrop,
body:has(#removeWatchlistConfirmModal.show) .modal-backdrop {
    z-index: 1074 !important;
}

/* General modal backdrop z-index (fallback) */
.modal-backdrop.show {
    z-index: 1055 !important;
}

/* Additional z-index rules for watchlist modals to ensure they're always on top */
#addToWatchlistModal.modal.show,
.watchlist-notes-modal.modal.show,
#removeWatchlistConfirmModal.modal.show {
    z-index: 1075 !important;
}

#addToWatchlistModal.modal.show .modal-dialog,
.watchlist-notes-modal.modal.show .modal-dialog,
#removeWatchlistConfirmModal.modal.show .modal-dialog {
    z-index: 1076 !important;
}

/* Ensure backdrop is always below watchlist modals when they're shown */
body.modal-open #addToWatchlistModal.show ~ .modal-backdrop,
body.modal-open .watchlist-notes-modal.show ~ .modal-backdrop,
body.modal-open #removeWatchlistConfirmModal.show ~ .modal-backdrop {
    z-index: 1074 !important;
}

/* Watchlist Notes Modal - smaller buttons */
#watchlistNotesModal .modal-footer .btn {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* Watchlist Modal Dark Theme Support */
[data-theme="dark"] #addToWatchlistModal .modal-content {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] #addToWatchlistModal .modal-header {
    background-color: var(--bg-card-hover, #0f172a) !important;
    border-bottom-color: var(--border-color, #334155) !important;
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] #addToWatchlistModal .modal-body {
    background-color: var(--bg-card, #1e293b) !important;
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] #addToWatchlistModal .modal-footer {
    background-color: var(--bg-card, #1e293b) !important;
    border-top-color: var(--border-color, #334155) !important;
}

/* Input fields dark theme */
[data-theme="dark"] #addToWatchlistModal .form-control,
[data-theme="dark"] #addToWatchlistModal .form-select {
    background-color: var(--bg-card-hover, #0f172a) !important;
    border-color: var(--border-color, #334155) !important;
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] #addToWatchlistModal .form-control:focus,
[data-theme="dark"] #addToWatchlistModal .form-select:focus {
    background-color: var(--bg-card-hover, #0f172a) !important;
    border-color: var(--primary-color, #6366f1) !important;
    color: var(--text-primary, #f8fafc) !important;
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25) !important;
}

[data-theme="dark"] #addToWatchlistModal .form-control::placeholder {
    color: var(--text-muted, #94a3b8) !important;
    opacity: 0.7;
}

/* Input group text dark theme */
[data-theme="dark"] #addToWatchlistModal .input-group-text {
    background-color: var(--bg-card-hover, #0f172a) !important;
    border-color: var(--border-color, #334155) !important;
    color: var(--text-primary, #f8fafc) !important;
}

/* Stock info display box dark theme */
[data-theme="dark"] #addToWatchlistModal .watchlist-stock-info-box,
[data-theme="dark"] #addToWatchlistModal .watchlist-total-value-box {
    background-color: var(--bg-card-hover, #0f172a) !important;
    border: 1px solid var(--border-color, #334155) !important;
}

/* Light theme for stock info boxes */
#addToWatchlistModal .watchlist-stock-info-box,
#addToWatchlistModal .watchlist-total-value-box {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

/* Add to Watchlist modal: visible borders on all text fields and inputs */
#addToWatchlistModal .form-control,
#addToWatchlistModal .input-group .form-control,
#addToWatchlistModal textarea.form-control {
    border: 1px solid #ced4da !important;
}
#addToWatchlistModal .form-control:focus {
    border-color: #86b7fe !important;
}
#addToWatchlistModal .input-group-text {
    border: 1px solid #ced4da !important;
}

[data-theme="dark"] #addToWatchlistModal .text-muted {
    color: var(--text-muted, #94a3b8) !important;
}

/* Labels dark theme */
[data-theme="dark"] #addToWatchlistModal .form-label {
    color: var(--text-primary, #f8fafc) !important;
}

/* Close button dark theme */
[data-theme="dark"] #addToWatchlistModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Global Search Styles */
.global-search-wrapper {
    flex-shrink: 0;
}

/* Prevent navbar items from wrapping - Desktop only */
@media (min-width: 992px) {
    .navbar {
        overflow: visible !important;
    }

    .navbar-collapse {
        overflow: visible !important;
        display: flex !important;
        flex-basis: auto !important;
        flex-grow: 1 !important;
        align-items: center !important;
    }

    /* Add spacing between logo and nav items */
    .navbar-brand {
        margin-right: 3.5rem !important;
    }

    /* Center nav items - maintain Bootstrap's mx-auto behavior */
    .navbar-nav.mx-auto {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .navbar-nav.mx-auto .nav-item {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .navbar-nav.mx-auto .nav-link {
        white-space: nowrap !important;
        padding: 0.75rem 0.6rem !important;
        font-size: 0.875rem !important;
    }

    /* Ensure container maintains proper flex layout */
    .navbar .container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        overflow: visible !important;
    }

    /* Right-aligned items (search, notifications, user) */
    .navbar-nav.ms-auto {
        flex-shrink: 0 !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        white-space: nowrap;
        display: flex !important;
        align-items: center !important;
        padding-left: 3.5rem !important;
    }
}

/* Mobile responsive adjustments */
@media (max-width: 991.98px) {
    /* Reset desktop no-wrap rules for mobile */
    .navbar-collapse {
        flex-wrap: wrap !important;
    }
    
    .navbar-nav.mx-auto {
        justify-content: center;
        width: 100%;
        margin-bottom: 0.75rem;
        flex-wrap: wrap !important;
        flex-direction: column !important;
    }
    
    .navbar-nav.mx-auto .nav-item {
        width: 100%;
        text-align: center;
    }
    
    .navbar-nav.mx-auto .nav-link {
        width: 100%;
        padding: 0.75rem 1rem !important;
        text-align: center;
        white-space: normal !important;
    }
    
    .navbar-nav.ms-auto {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        flex-wrap: wrap !important;
    }
    
    .global-search-wrapper {
        flex: 1;
        min-width: 150px;
        max-width: 220px;
        margin-right: 0 !important;
    }
    
    .global-search-input-group {
        width: 100% !important;
    }
    
    .global-search-input-group:focus-within,
    .global-search-input-group.has-results {
        width: 100% !important;
    }
    
    .nav-item.me-3 {
        margin-right: 0 !important;
    }
    
    .theme-switcher {
        flex-shrink: 0;
        width: 36px !important;
        height: 36px !important;
    }
    
    .nav-item.dropdown .nav-link {
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Ensure navbar container doesn't cause issues on mobile */
    .navbar .container {
        flex-wrap: wrap !important;
    }
}

.global-search-input-group {
    width: 200px;
    /* Removed transition to prevent animation between search box and notification button */
}

.global-search-input-group:focus-within,
.global-search-input-group.has-results {
    width: 260px;
}

/* On medium screens, ensure nav items don't wrap */
@media (min-width: 992px) and (max-width: 1400px) {
    .navbar-nav.mx-auto .nav-link {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.8125rem !important;
    }
    
    .global-search-input-group {
        width: 160px;
    }
    
    .global-search-input-group:focus-within,
    .global-search-input-group.has-results {
        width: 200px;
    }
}

/* On smaller screens, make it more compact */
@media (max-width: 1200px) {
    .global-search-input-group {
        width: 160px;
    }
    
    .global-search-input-group:focus-within,
    .global-search-input-group.has-results {
        width: 220px;
    }
    
    .navbar-nav.mx-auto .nav-link {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.8125rem !important;
    }
}

@media (max-width: 992px) {
    .global-search-input-group {
        width: 150px;
    }
    
    .global-search-input-group:focus-within,
    .global-search-input-group.has-results {
        width: 200px;
    }
    
    .global-search-input::placeholder {
        font-size: 0.8rem;
    }
}

.global-search-form .form-control {
    color: white !important;
}

.global-search-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.global-search-form .form-control:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: white !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
}

.global-search-form .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

.global-search-form .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: white !important;
}

/* Dark theme adjustments for global search */
[data-theme="dark"] .global-search-form .form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .global-search-form .form-control:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Light theme - ensure text is visible */
/* Light theme - ensure text is visible and borders are present */
body[data-theme="light"] .global-search-form .form-control {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body[data-theme="light"] .global-search-form .form-control::placeholder {
    color: var(--text-muted) !important;
}

body[data-theme="light"] .global-search-form .form-control:focus {
    background: var(--bg-card-hover) !important;
    border-color: var(--accent-green) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 3px var(--accent-green-dim) !important;
}

/* Light theme - input group text borders */
body[data-theme="light"] .global-search-form .input-group-text {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-right: none !important;
    color: var(--text-secondary) !important;
}

/* Light theme - input group text border on focus */
body[data-theme="light"] .global-search-form .input-group:focus-within .input-group-text {
    border-color: var(--accent-green) !important;
    border-right: none !important;
}

body[data-theme="light"] .global-search-form .input-group .form-control {
    border-left: none !important;
}

body[data-theme="light"] .global-search-form .input-group .form-control:focus {
    border-left: 1px solid var(--accent-green) !important;
}

body[data-theme="light"] .global-search-form .btn-outline-light {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body[data-theme="light"] .global-search-form .btn-outline-light:hover {
    background: var(--bg-secondary) !important;
    border-color: var(--accent-green) !important;
    color: var(--accent-green) !important;
}

/* Search Results Dropdown - Glassmorphism */
.global-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 0.25rem;
    display: none;
}

.global-search-results.show {
    display: block;
}

.global-search-results .search-result-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--glass-border);
    transition: background 0.2s ease;
    color: var(--text-primary);
}

.global-search-results .search-result-item:last-child {
    border-bottom: none;
}

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

        .global-search-results .search-result-item .symbol {
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-normal);
            color: var(--text-primary);
            margin-right: 0.5rem;
        }
        
        .global-search-results .search-result-item .name {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-normal);
            line-height: var(--line-height-normal);
            color: var(--text-secondary);
        }

.global-search-results .no-results {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
}

/* Navigation Active State Styles */
.navbar-nav .nav-link {
    text-decoration: none !important;
}

        .navbar-nav .nav-link.active {
            background: rgba(255, 255, 255, 0.2) !important;
            color: rgba(255, 255, 255, 1) !important;
            font-weight: var(--font-weight-semibold) !important;
            position: relative;
            text-decoration: none !important;
        }

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 2px 2px 0 0;
}

.navbar-nav .nav-link.active:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Dark theme adjustments for active nav link */
[data-theme="dark"] .navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 1) !important;
}

[data-theme="dark"] .navbar-nav .nav-link.active::after {
    background: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .navbar-nav .nav-link.active:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Light theme adjustments for active nav link */
[data-theme="light"] .navbar-nav .nav-link.active {
    background: rgba(0, 212, 170, 0.15) !important; /* accent-green with opacity */
    color: var(--accent-green) !important;
    font-weight: var(--font-weight-semibold) !important;
}

[data-theme="light"] .navbar-nav .nav-link.active::after {
    background: var(--accent-green);
}

[data-theme="light"] .navbar-nav .nav-link.active:hover {
    background: rgba(0, 212, 170, 0.2) !important;
    color: var(--accent-green) !important;
}

        /* Toast Notification Styles - Glassmorphism */
        .toast {
            background: var(--glass-bg) !important;
            border: 1px solid var(--glass-border) !important;
            box-shadow: var(--glass-shadow) !important;
            border-radius: var(--radius-md) !important;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
        }
        
        .toast-header {
            background: var(--glass-bg-light) !important;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-bottom: 1px solid var(--glass-border) !important;
            color: var(--text-primary) !important;
        }

.toast-header.toast-success {
    background: var(--success-gradient) !important;
    color: white !important;
}

.toast-header.toast-error {
    background: var(--danger-gradient) !important;
    color: white !important;
}

.toast-header.toast-warning {
    background: var(--warning-gradient) !important;
    color: white !important;
}

.toast-header.toast-info {
    background: var(--info-gradient) !important;
    color: white !important;
}

.toast-body {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

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

[data-theme="dark"] .toast-body {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}



/* ============================================
   CSS moved from base.html
   ============================================ */


        :root {
            /* Light Theme - Pastel Color Palette */
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            --danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            --info-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            
            /* Light Theme - Soft Pastels */
            --soft-blue: #e3f2fd;
            --soft-purple: #f3e5f5;
            --soft-green: #e8f5e8;
            --soft-pink: #fce4ec;
            --soft-orange: #fff3e0;
            --soft-yellow: #fffde7;
            
            /* Value Investing Colors */
            --value-excellent: #4caf50;
            --value-good: #8bc34a;
            --value-acceptable: #ffc107;
            --value-poor: #f44336;
            
            /* Light Theme - Background Gradients */
            --bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --bg-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --bg-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --bg-warning: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            --bg-danger: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            --bg-light: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            
            /* Light Theme - Glassmorphism Variables */
            --glass-bg: rgba(255, 255, 255, 0.7);
            --glass-bg-hover: rgba(255, 255, 255, 0.85);
            --glass-bg-light: rgba(255, 255, 255, 0.5);
            --glass-border: rgba(255, 255, 255, 0.18);
            --glass-border-light: rgba(255, 255, 255, 0.1);
            --glass-blur: blur(20px);
            --glass-blur-strong: blur(40px);
            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            --glass-shadow-hover: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
            
            /* Light Theme - Base Colors */
            --bg-body: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            --bg-card: rgba(255, 255, 255, 0.7);
            --bg-card-hover: rgba(255, 255, 255, 0.85);
            --text-primary: #2d3748;
            --text-secondary: #4a5568;
            --text-muted: #718096;
            --border-color: rgba(255, 255, 255, 0.18);
            --border-light: rgba(255, 255, 255, 0.1);
            
            /* Light Theme - Shadows */
            --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
            --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
            --shadow-strong: 0 15px 50px rgba(0, 0, 0, 0.15);
            
            /* Border Radius */
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
        }
        
        /* Dark Theme Variables */
        [data-theme="dark"] {
            /* Dark Theme - Color Palette (maintaining same hue relationships) */
            --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            --secondary-gradient: linear-gradient(135deg, #ec4899 0%, #f59e0b 100%);
            --success-gradient: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
            --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #84cc16 100%);
            --danger-gradient: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
            --info-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
            
            /* Dark Theme - Soft Colors (darker versions) */
            --soft-blue: #1e3a8a;
            --soft-purple: #581c87;
            --soft-green: #064e3b;
            --soft-pink: #831843;
            --soft-orange: #9a3412;
            --soft-yellow: #713f12;
            
            /* Dark Theme - Value Investing Colors (high contrast) */
            --value-excellent: #22c55e;
            --value-good: #84cc16;
            --value-acceptable: #eab308;
            --value-poor: #ef4444;
            
            /* Dark Theme - Background Gradients */
            --bg-primary: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            --bg-secondary: linear-gradient(135deg, #7c2d12 0%, #dc2626 100%);
            --bg-success: linear-gradient(135deg, #064e3b 0%, #059669 100%);
            --bg-warning: linear-gradient(135deg, #92400e 0%, #d97706 100%);
            --bg-danger: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%);
            --bg-light: linear-gradient(135deg, #374151 0%, #4b5563 100%);
            
            /* Dark Theme - Glassmorphism Variables */
            --glass-bg: rgba(30, 41, 59, 0.6);
            --glass-bg-hover: rgba(30, 41, 59, 0.75);
            --glass-bg-light: rgba(30, 41, 59, 0.4);
            --glass-border: rgba(255, 255, 255, 0.1);
            --glass-border-light: rgba(255, 255, 255, 0.05);
            --glass-blur: blur(20px);
            --glass-blur-strong: blur(40px);
            --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
            --glass-shadow-hover: 0 12px 40px 0 rgba(0, 0, 0, 0.7);
            
            /* Dark Theme - Base Colors (high contrast) */
            --bg-body: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            --bg-card: rgba(30, 41, 59, 0.6);
            --bg-card-hover: rgba(30, 41, 59, 0.75);
            --text-primary: #f8fafc;
            --text-secondary: #e2e8f0;
            --text-muted: #cbd5e1;
            --border-color: rgba(255, 255, 255, 0.1);
            --border-light: rgba(255, 255, 255, 0.05);
            
            /* Dark Theme - Shadows */
            --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
            --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.4);
            --shadow-strong: 0 15px 50px rgba(0, 0, 0, 0.5);
        }
        
        /* Typography System - Professional & Consistent */
        :root {
            /* Typography Scale - Based on 16px base (1rem = 16px) */
            --font-size-xs: 0.75rem;      /* 12px - Small labels, captions */
            --font-size-sm: 0.875rem;     /* 14px - Secondary text, small buttons */
            --font-size-base: 1rem;       /* 16px - Body text, default */
            --font-size-lg: 1.125rem;     /* 18px - Emphasized body text */
            --font-size-xl: 1.25rem;      /* 20px - Small headings */
            --font-size-2xl: 1.5rem;      /* 24px - Section headings */
            --font-size-3xl: 1.875rem;    /* 30px - Page headings */
            --font-size-4xl: 2.25rem;     /* 36px - Hero headings */
            --font-size-5xl: 3rem;        /* 48px - Large hero headings */
            
            /* Line Heights - For optimal readability */
            --line-height-tight: 1.25;    /* Headings */
            --line-height-normal: 1.5;     /* Body text */
            --line-height-relaxed: 1.75;   /* Long-form content */
            
            /* Letter Spacing */
            --letter-spacing-tight: -0.025em;  /* Headings */
            --letter-spacing-normal: 0;        /* Body text */
            --letter-spacing-wide: 0.025em;    /* Uppercase text */
            --letter-spacing-wider: 0.05em;    /* Labels, badges */
            
            /* Font Weights */
            --font-weight-light: 300;
            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;
        }
        
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        body {
            background: var(--bg-body);
            min-height: 100vh;
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-normal);
            line-height: var(--line-height-normal);
            letter-spacing: var(--letter-spacing-normal);
            color: var(--text-primary);
            transition: background 0.3s ease, color 0.3s ease;
        }
        
        /* Typography Hierarchy - Headings */
        h1, .h1 {
            font-size: var(--font-size-4xl);
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-tight);
            letter-spacing: var(--letter-spacing-tight);
            color: var(--text-primary);
            margin-bottom: 1rem;
        }
        
        h2, .h2 {
            font-size: var(--font-size-3xl);
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-tight);
            letter-spacing: var(--letter-spacing-tight);
            color: var(--text-primary);
            margin-bottom: 0.875rem;
        }
        
        h3, .h3 {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-tight);
            letter-spacing: var(--letter-spacing-tight);
            color: var(--text-primary);
            margin-bottom: 0.75rem;
        }
        
        h4, .h4 {
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-normal);
            letter-spacing: var(--letter-spacing-normal);
            color: var(--text-primary);
            margin-bottom: 0.625rem;
        }
        
        h5, .h5 {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-normal);
            letter-spacing: var(--letter-spacing-normal);
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }
        
        h6, .h6 {
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-normal);
            letter-spacing: var(--letter-spacing-normal);
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }
        
        /* Body Text */
        p {
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-normal);
            line-height: var(--line-height-relaxed);
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }
        
        /* Small Text */
        small, .small {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-normal);
            line-height: var(--line-height-normal);
            color: var(--text-muted);
        }
        
        /* Links */
        a {
            font-size: inherit;
            font-weight: var(--font-weight-medium);
            color: var(--text-primary);
            text-decoration: none;
            transition: color 0.2s ease;
        }
        
        a:hover {
            color: var(--text-primary);
            text-decoration: underline;
        }
        
        /* Responsive Typography */
        @media (max-width: 768px) {
            h1, .h1 { font-size: var(--font-size-3xl); }
            h2, .h2 { font-size: var(--font-size-2xl); }
            h3, .h3 { font-size: var(--font-size-xl); }
            h4, .h4 { font-size: var(--font-size-lg); }
        }
        
        /* Navigation - Glassmorphism */
        .navbar {
            background: var(--bg-primary) !important;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            box-shadow: var(--glass-shadow);
            border: none;
            border-bottom: 1px solid var(--glass-border);
        }
        
        /* Light theme navbar - semi-transparent with minimal blur */
        [data-theme="light"] .navbar {
            background: rgba(248, 250, 252, 0.98) !important; /* Slightly transparent white */
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            box-shadow: none !important; /* Remove shadow in light theme */
        }
        
        /* Dark theme navbar - semi-transparent with minimal blur */
        [data-theme="dark"] .navbar {
            background: rgba(15, 23, 42, 0.98) !important; /* Slightly transparent dark */
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
        }

        /* User profile dropdown in navbar: backdrop blur via ::before (Chrome fix for nested elements) */
        .navbar .dropdown-menu {
            background: rgba(255, 255, 255, 0.85) !important;
            overflow: visible;
        }
        .navbar .dropdown-menu::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px);
            z-index: -1;
            pointer-events: none;
        }
        [data-theme="dark"] .navbar .dropdown-menu {
            background: rgba(30, 41, 59, 0.9) !important;
        }
        
        .navbar-nav .nav-link {
            color: var(--text-secondary) !important;
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium);
            line-height: var(--line-height-normal);
            padding: 0.75rem 1rem !important;
            border-radius: var(--radius-sm);
            transition: all 0.3s ease;
            margin: 0 0.25rem;
        }
        
        /* Light theme nav links */
        [data-theme="light"] .navbar-nav .nav-link {
            color: var(--text-primary) !important;
        }
        
        .navbar-nav .nav-link:hover {
            color: var(--accent-green) !important;
            background: transparent;
            transform: translateY(0);
        }
        
        /* Cards - Glassmorphism */
        .card {
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg);
            box-shadow: var(--glass-shadow);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: var(--glass-bg);
            color: var(--text-primary);
            overflow: hidden;
        }
        
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            z-index: 0;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: var(--glass-shadow-hover);
            background: var(--glass-bg-hover);
            border-color: var(--glass-border);
        }
        
        .card:hover::before {
            opacity: 1;
        }
        
        .card-header {
            background: var(--glass-bg-light);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-bottom: 1px solid var(--glass-border);
            border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-normal);
            color: var(--text-primary);
            position: relative;
            z-index: 1;
        }
        
        .card-body {
            color: var(--text-primary);
            position: relative;
            z-index: 1;
        }
        
        .card-title {
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-normal);
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }
        
        .card-text {
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-normal);
            line-height: var(--line-height-relaxed);
            color: var(--text-secondary);
        }
        
        /* Stock Cards */
        .stock-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-left: 4px solid transparent;
            position: relative;
            overflow: hidden;
        }
        
        .stock-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--primary-gradient);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .stock-card:hover::before {
            opacity: 1;
        }
        
        .stock-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: var(--shadow-strong);
        }
        
        .stock-card.strong-buy { 
            border-left-color: var(--value-excellent);
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(139, 195, 74, 0.05) 100%);
        }
        .stock-card.buy { 
            border-left-color: var(--value-good);
            background: linear-gradient(135deg, rgba(139, 195, 74, 0.05) 0%, rgba(255, 193, 7, 0.05) 100%);
        }
        .stock-card.hold { 
            border-left-color: var(--value-acceptable);
            background: linear-gradient(135deg, rgba(255, 193, 7, 0.05) 0%, rgba(255, 152, 0, 0.05) 100%);
        }
        .stock-card.sell, .stock-card.strong-sell { 
            border-left-color: var(--value-poor);
            background: linear-gradient(135deg, rgba(244, 67, 54, 0.05) 0%, rgba(255, 87, 34, 0.05) 100%);
        }
        
        /* Recommendation Badges */
        .badge.recommendation-strong-buy { 
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
            color: white !important;
            box-shadow: var(--shadow-soft);
            border: none !important;
            font-weight: 600;
        }
        .badge.recommendation-buy { 
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
            color: white !important;
            border: none !important;
            font-weight: 600;
        }
        .badge.recommendation-hold {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
            color: white !important;
            border: none !important;
        }
        .badge.recommendation-not-applicable {
            background: #6c757d !important;
            color: white !important;
            border: none !important;
            font-weight: 600;
        }
        .badge.recommendation-sell { 
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
            color: white !important;
            border: none !important;
            font-weight: 600;
        }
        .badge.recommendation-strong-sell { 
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
            color: white !important;
            box-shadow: var(--shadow-soft);
            border: none !important;
            font-weight: 600;
        }
        
        /* Metric Colors */
        .metric-excellent { 
            color: var(--value-excellent); 
            font-weight: 600;
            background: rgba(76, 175, 80, 0.1);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
        }
        .metric-good { 
            color: var(--value-good);
            font-weight: 500;
            background: rgba(139, 195, 74, 0.1);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
        }
        .metric-acceptable { 
            color: var(--value-acceptable);
            font-weight: 500;
            background: rgba(255, 193, 7, 0.1);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
        }
        .metric-poor { 
            color: var(--value-poor);
            font-weight: 600;
            background: rgba(244, 67, 54, 0.1);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
        }
        
        /* Progress Bars */
        .score-progress {
            height: 8px;
            border-radius: var(--radius-sm);
            background: linear-gradient(90deg, #f44336 0%, #ffc107 50%, #4caf50 100%);
            overflow: hidden;
        }
        
        .score-progress .progress-bar {
            border-radius: var(--radius-sm);
            transition: width 0.8s ease;
        }
        
        /* Buttons - Custom Glassmorphism */
        .btn {
            border-radius: var(--radius-md);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium);
            line-height: var(--line-height-normal);
            letter-spacing: var(--letter-spacing-normal);
            padding: 0.75rem 1.5rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid var(--glass-border);
            position: relative;
            overflow: hidden;
            color: var(--text-primary);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            box-shadow: var(--shadow-soft);
        }
        
        .btn-sm {
            font-size: var(--font-size-sm);
            padding: 0.5rem 1rem;
        }
        
        .btn-lg {
            font-size: var(--font-size-lg);
            padding: 1rem 2rem;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
            z-index: 0;
        }
        
        .btn:hover::before {
            left: 100%;
        }
        
        .btn > * {
            position: relative;
            z-index: 1;
        }
        
        .btn-primary {
            background: var(--primary-gradient);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            box-shadow: var(--shadow-soft);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
            border-color: rgba(255, 255, 255, 0.3);
            color: white; /* Preserve white text on hover for gradient buttons */
        }
        
        .btn-success {
            background: var(--success-gradient);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            box-shadow: var(--shadow-soft);
        }
        
        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
            color: white; /* Preserve white text on hover for gradient buttons */
        }
        
        .btn-warning {
            background: var(--warning-gradient);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            box-shadow: var(--shadow-soft);
        }
        
        .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
            color: white; /* Preserve white text on hover for gradient buttons */
        }
        
        .btn-danger {
            background: var(--danger-gradient);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            box-shadow: var(--shadow-soft);
        }
        
        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
            color: white; /* Preserve white text on hover for gradient buttons */
        }
        
        /* Light theme - preserve original text color on hover for buttons that don't use gradients */
        [data-theme="light"] .btn:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.btn-outline-primary):not(.btn-outline-light):not(.btn-outline-secondary):not(.btn-secondary):hover {
            color: inherit !important;
        }
        
        /* Light theme - ensure badges and other elements maintain their color on hover */
        [data-theme="light"] .badge:hover,
        [data-theme="light"] .btn.badge:hover {
            color: inherit !important;
        }
        
        .btn-outline-primary,
        .btn-outline-light,
        .btn-outline-secondary {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            color: var(--text-primary);
        }
        
        /* Light theme - make borders more visible for outline buttons */
        [data-theme="light"] .btn-outline-primary,
        [data-theme="light"] .btn-outline-light,
        [data-theme="light"] .btn-outline-secondary {
            border-color: #ced4da !important; /* Bootstrap's default border color - more visible */
        }
        
        [data-theme="light"] .btn-outline-primary:hover,
        [data-theme="light"] .btn-outline-light:hover,
        [data-theme="light"] .btn-outline-secondary:hover {
            border-color: #adb5bd !important; /* Darker on hover */
        }
        
        [data-theme="light"] .btn-outline-primary:active,
        [data-theme="light"] .btn-outline-primary:focus,
        [data-theme="light"] .btn-outline-light:active,
        [data-theme="light"] .btn-outline-light:focus,
        [data-theme="light"] .btn-outline-secondary:active,
        [data-theme="light"] .btn-outline-secondary:focus {
            border-color: #6c757d !important; /* Darkest on active/focus */
        }
        
        .btn-outline-primary:hover,
        .btn-outline-light:hover,
        .btn-outline-secondary:hover {
            background: var(--glass-bg-hover);
            border-color: var(--glass-border);
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
            color: var(--text-primary) !important; /* Preserve original text color on hover */
        }
        
        /* Light theme - ensure text color doesn't change to white on hover */
        [data-theme="light"] .btn-outline-primary:hover,
        [data-theme="light"] .btn-outline-light:hover,
        [data-theme="light"] .btn-outline-secondary:hover {
            color: var(--text-primary) !important;
        }
        
        /* Light theme - prevent any button from changing text color to white on hover */
        /* Exception: gradient buttons (btn-primary, btn-success, etc.) should keep white text */
        [data-theme="light"] .btn:hover:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger) {
            color: inherit !important;
        }
        
        /* Light theme - ensure badges maintain their original color on hover */
        [data-theme="light"] .badge:hover,
        [data-theme="light"] .btn.badge:hover {
            color: inherit !important;
        }
        
        .btn-secondary {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            color: var(--text-primary);
        }
        
        .btn-secondary:hover {
            background: var(--glass-bg-hover);
            border-color: var(--glass-border);
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }
        
        /* Data Quality Indicator */
        .data-quality-indicator {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-normal);
            line-height: var(--line-height-normal);
            opacity: 0.7;
            background: var(--bg-light);
            color: var(--text-muted);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-color);
        }
        
        /* Form Elements - Glassmorphism */
        .form-control, .form-select {
            background: var(--glass-bg) !important;
            border: 1px solid var(--glass-border) !important;
            color: var(--text-primary) !important;
            border-radius: var(--radius-sm);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .form-control:focus, .form-select:focus {
            background: var(--glass-bg-hover) !important;
            border: 1px solid var(--glass-border) !important;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), var(--shadow-soft);
            color: var(--text-primary) !important;
            outline: none;
        }
        
        .form-control::placeholder {
            color: var(--text-muted) !important;
            opacity: 0.7;
        }
        
        .form-label {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            line-height: var(--line-height-normal);
            letter-spacing: var(--letter-spacing-wide);
            color: var(--text-primary) !important;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
        }
        
        .input-group .form-control {
            border-right: none;
        }
        
        .input-group .btn {
            border-left: none;
        }
        
        /* Alerts - Glassmorphism */
        .alert {
            background: transparent !important;
            border: 1px solid var(--glass-border) !important;
            color: var(--text-primary) !important;
            border-radius: var(--radius-md);
            box-shadow: var(--glass-shadow);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            position: relative;
            overflow: hidden;
        }
        
        /* Override for disclaimer-section to use transparent background */
        .disclaimer-section.alert,
        .disclaimer-section {
            background: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: none !important;
        }
        
        .alert-success {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%) !important;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-left: 4px solid var(--value-excellent);
            border-color: rgba(16, 185, 129, 0.2);
            color: var(--text-primary) !important;
        }
        
        .alert-warning {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(132, 204, 22, 0.15) 100%) !important;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-left: 4px solid var(--value-acceptable);
            border-color: rgba(245, 158, 11, 0.2);
            color: var(--text-primary) !important;
        }
        
        .alert-danger {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(249, 115, 22, 0.15) 100%) !important;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-left: 4px solid var(--value-poor);
            border-color: rgba(239, 68, 68, 0.2);
            color: var(--text-primary) !important;
        }
        
        .alert-info {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-left: 4px solid #3b82f6;
            border-color: rgba(59, 130, 246, 0.2);
            color: var(--text-primary) !important;
        }
        
        /* Chart Container - Glassmorphism */
        .chart-container {
            position: relative;
            height: 400px;
            margin: 20px 0;
            border-radius: var(--radius-lg);
            padding: 20px;
            box-shadow: var(--glass-shadow);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
        }
        
        /* Dark theme chart styling */
        [data-theme="dark"] .chart-container {
            border: 1px solid var(--glass-border) !important;
        }
        
        /* Metric Cards - Glassmorphism */
        .metric-card {
            background: var(--glass-bg);
            border-radius: var(--radius-md);
            padding: 1.5rem;
            text-align: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid var(--glass-border);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            box-shadow: var(--glass-shadow);
        }
        
        .metric-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--glass-shadow-hover);
            background: var(--glass-bg-hover);
        }
        
        .metric-value {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-tight);
            margin: 0.5rem 0;
            color: var(--text-primary);
        }
        
        .metric-label {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            line-height: var(--line-height-normal);
            letter-spacing: var(--letter-spacing-wide);
            text-transform: uppercase;
            color: var(--text-muted);
        }
        
        /* Dark theme metric styling */
        [data-theme="dark"] .metric-label {
            color: #cbd5e1 !important;
            font-weight: 600;
        }
        
        [data-theme="dark"] .metric-value {
            color: #f8fafc !important;
            font-weight: 700;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
        
        /* Additional dark theme metric card styling */
        [data-theme="dark"] .metric-card {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-md);
            padding: 1rem;
            transition: all 0.3s ease;
        }
        
        [data-theme="dark"] .metric-card:hover {
            background: var(--glass-bg-hover);
            border-color: var(--glass-border);
        }
        
        /* Alerts - Already updated above with glassmorphism */
        
        /* Footer */
        .footer {
            background: var(--bg-primary) !important;
            color: white !important;
            margin-top: auto;
        }
        
        /* Footer text - theme-aware */
        .footer,
        .footer p,
        .footer small,
        .footer span {
            color: var(--text-secondary) !important;
        }
        
        .footer a {
            color: var(--text-secondary) !important;
        }
        
        .footer a:hover {
            color: var(--accent-green) !important;
        }
        
        /* Dark theme footer - white text */
        [data-theme="dark"] .footer,
        [data-theme="dark"] .footer *,
        [data-theme="dark"] .footer p,
        [data-theme="dark"] .footer a,
        [data-theme="dark"] .footer small,
        [data-theme="dark"] .footer span {
            color: rgba(255, 255, 255, 0.95) !important;
        }
        
        [data-theme="dark"] .footer a:hover {
            color: rgba(255, 255, 255, 1) !important;
        }
        
        /* Footer Logo Styles */
        .footer-logo {
            height: 48px;
            width: auto;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }
        
        /* Footer Brand Logo (for landing-footer structure) */
        .footer-brand .logo-img {
            height: 32px;
            width: auto;
        }
        
        /* Footer Tagline Styles */
        .footer-tagline {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-normal);
            line-height: var(--line-height-normal);
            font-style: italic;
            letter-spacing: var(--letter-spacing-wide);
            color: rgba(255, 255, 255, 0.9) !important;
            margin-top: 0.5rem;
        }
        
        [data-theme="dark"] .footer-tagline {
            color: rgba(255, 255, 255, 0.85) !important;
        }
        
        /* Footer Link Styles - Theme-aware colors */
        .footer-link {
            color: var(--text-secondary) !important;
            text-decoration: none;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        
        .footer-link:hover {
            color: var(--accent-green) !important;
            text-decoration: underline !important;
        }
        
        /* Dark theme footer links */
        [data-theme="dark"] .footer-link {
            color: rgba(255, 255, 255, 0.95) !important;
        }
        
        [data-theme="dark"] .footer-link:hover {
            color: rgba(255, 255, 255, 1) !important;
        }
        
        /* Footer Separator */
        .footer-separator {
            color: rgba(255, 255, 255, 0.6) !important;
        }
        
        /* Footer Border Top */
        .footer-border-top {
            border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
        
        /* Override any Bootstrap text color classes in footer */
        .footer .text-light,
        .footer .text-muted,
        .footer .text-secondary {
            color: rgba(255, 255, 255, 0.95) !important;
        }
        
        /* Ensure icons in footer are also white */
        .footer i,
        .footer .fa,
        .footer [class*="fa-"] {
            color: rgba(255, 255, 255, 0.95) !important;
        }
        
        /* Mobile Footer Adjustments */
        @media (max-width: 767.98px) {
            .footer {
                padding: 1.5rem 0 !important;
            }
            
            .footer-logo {
                height: 40px;
            }
            
            .footer-brand .logo-img {
                height: 28px;
            }
            
            .footer-tagline {
                font-size: var(--font-size-xs);
            }
            
            .footer-link {
                padding: 0.25rem 0;
            }
            
            .landing-footer {
                padding: 3rem 1.5rem;
            }

            .footer-content {
                flex-direction: column;
                gap: 2rem;
                text-align: center;
            }

            .footer-brand {
                order: -1;
            }

            .footer-links {
                flex-direction: column;
                gap: 2rem;
                width: 100%;
            }

            .footer-column {
                text-align: center;
                align-items: center;
            }

            .footer-column a {
                display: inline-block;
                padding: 0.5rem 0;
            }
        }
        
        /* Landing Footer Styles (for shared footer structure) */
        .landing-footer {
            padding: 4rem;
            border-top: 1px solid var(--border-color);
            position: relative;
            z-index: 1;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 4rem;
        }

        .footer-brand p {
            color: var(--text-muted);
            font-size: 0.9rem;
            margin-top: 1rem;
            max-width: 300px;
            line-height: 1.6;
        }

        .footer-brand .logo-text {
            display: inline-block;
        }

        .footer-links {
            display: flex;
            gap: 4rem;
        }

        .footer-column {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .footer-column h4 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            width: 100%;
            text-align: left;
            color: var(--text-primary);
        }

        .footer-column ul {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .footer-column li {
            margin-bottom: 0.75rem;
            width: 100%;
            text-align: left;
        }

        .footer-column a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        .footer-column a:hover {
            color: var(--text-primary);
        }

        .footer-bottom {
            max-width: 1200px;
            margin: 3rem auto 0;
            padding-top: 2rem;
            border-top: 1px solid var(--border-color);
            text-align: center;
        }

        .footer-bottom p {
            color: var(--text-muted);
            font-size: 0.85rem;
        }

        /* Footer Disclaimer Text - White in light theme (override global small rule) */
        body[data-theme="light"] .footer .footer-disclaimer-text,
        body[data-theme="light"] .footer .footer-disclaimer-text.small,
        body[data-theme="light"] .footer .footer-disclaimer-text p,
        body[data-theme="light"] .footer .footer-disclaimer-text strong,
        body[data-theme="light"] .footer .footer-disclaimer-text * {
            color: white !important;
        }
        
        body[data-theme="light"] .footer .footer-disclaimer-text {
            opacity: 0.9;
        }
        
        /* Footer Disclaimer Text - Keep existing styling in dark theme */
        body[data-theme="dark"] .footer .footer-disclaimer-text {
            color: rgba(255, 255, 255, 0.9) !important;
        }
        
        /* Loading Animation */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .stock-card {
                margin-bottom: 1rem;
            }
            
            .chart-container {
                height: 300px;
            }
            
        }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: var(--radius-sm);
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--primary-gradient);
            border-radius: var(--radius-sm);
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-gradient);
        }
        
        /* Theme Switcher Button - Glassmorphism */
        .theme-switcher {
            border: 1px solid var(--glass-border) !important;
            background: var(--glass-bg) !important;
            color: var(--text-primary) !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 0.5rem 0.75rem;
            border-radius: var(--radius-sm);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            box-shadow: var(--shadow-soft);
        }
        
        .theme-switcher:hover {
            background: var(--glass-bg-hover) !important;
            border-color: var(--glass-border) !important;
            transform: translateY(-1px);
            box-shadow: var(--shadow-medium);
        }
        
        /* Dropdowns - Glassmorphism */
        .dropdown-menu {
            background: var(--glass-bg) !important;
            border: 1px solid var(--glass-border) !important;
            box-shadow: var(--glass-shadow);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-radius: var(--radius-md);
            padding: 0.5rem 0;
            min-width: 200px;
            max-width: 300px;
            overflow: hidden;
        }
        
        .dropdown-item {
            background: transparent !important;
            color: var(--text-primary) !important;
            padding: 0.625rem 1rem;
            transition: all 0.2s ease;
            border-radius: 0;
            text-decoration: none !important;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.875rem !important;
            font-weight: 400;
            line-height: 1.5;
            display: flex;
            align-items: center;
        }
        
        .dropdown-item:hover {
            background: var(--glass-bg-hover) !important;
            color: var(--text-primary) !important;
            text-decoration: none !important;
        }
        
        .dropdown-item:active {
            background: var(--glass-bg-hover) !important;
            color: var(--text-primary) !important;
        }
        
        .dropdown-divider {
            border-color: rgba(0, 0, 0, 0.15) !important;
            border-top-width: 1px;
            margin: 0.5rem 0;
            opacity: 1;
        }
        
        /* Additional Dark Theme Elements */
        [data-theme="dark"] .dropdown-menu {
            background: var(--glass-bg) !important;
            border: 1px solid var(--glass-border) !important;
            box-shadow: var(--glass-shadow);
            min-width: 200px;
            max-width: 300px;
            overflow: hidden;
        }
        
        [data-theme="dark"] .dropdown-item,
        [data-theme="dark"] .dropdown-item:not(:hover):not(:active):not(:focus) {
            background: transparent !important;
            background-color: transparent !important;
            color: var(--text-primary) !important;
            font-size: 0.875rem !important;
        }
        
        [data-theme="dark"] .dropdown-item:hover,
        [data-theme="dark"] .dropdown-item:focus {
            background: var(--glass-bg-hover) !important;
            background-color: var(--glass-bg-hover) !important;
            color: var(--text-primary) !important;
            text-decoration: none !important;
        }
        
        [data-theme="dark"] .dropdown-item:active {
            background: var(--glass-bg-hover) !important;
            background-color: var(--glass-bg-hover) !important;
            color: var(--text-primary) !important;
        }
        
        [data-theme="dark"] .dropdown-divider {
            border-color: rgba(255, 255, 255, 0.15) !important;
            border-top-width: 1px;
            opacity: 1;
        }
        
        /* Light theme divider */
        [data-theme="light"] .dropdown-divider {
            border-color: rgba(0, 0, 0, 0.15) !important;
            border-top-width: 1px;
            opacity: 1;
        }
        
        /* Text Colors for All Elements - Already defined in typography system above */
        
        /* Tables - Glassmorphism */
        .table {
            background: var(--glass-bg) !important;
            color: var(--text-primary) !important;
            border-radius: var(--radius-md);
            overflow: hidden;
            border: 1px solid var(--glass-border);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            box-shadow: var(--glass-shadow);
        }
        
        .table thead th {
            background: var(--glass-bg-light) !important;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            color: var(--text-primary) !important;
            border: none;
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-normal);
            letter-spacing: var(--letter-spacing-wide);
            text-transform: uppercase;
            border-bottom: 1px solid var(--glass-border);
        }
        
        .table tbody tr {
            transition: all 0.3s ease;
        }
        
        .table tbody tr:hover {
            background: var(--glass-bg-hover);
        }
        
        .table tbody td {
            border: none;
            border-bottom: 1px solid var(--glass-border);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-normal);
            line-height: var(--line-height-normal);
            color: var(--text-primary);
            padding: 0.75rem;
        }
        
        /* Dark theme table styling */
        [data-theme="dark"] .table {
            background: #1e293b !important;
            color: #f8fafc !important;
            border: 1px solid #475569 !important;
        }
        
        [data-theme="dark"] .table thead th {
            background: #334155 !important;
            color: #f8fafc !important;
            border-bottom: 1px solid #475569 !important;
            font-weight: 600;
        }
        
        [data-theme="dark"] .table tbody tr {
            background: #1e293b !important;
            color: #f8fafc !important;
        }
        
        /* Override Bootstrap table striping in dark mode */
        [data-theme="dark"] .table tbody tr:nth-of-type(odd) {
            background: #1e293b !important;
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .table tbody tr:nth-of-type(even) {
            background: #1e293b !important;
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .table tbody tr:hover {
            background: #334155 !important;
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .table tbody td {
            color: #f8fafc !important;
            border-bottom: 1px solid #374151 !important;
            background: transparent !important;
        }
        
        [data-theme="dark"] .table tbody tr:last-child td {
            border-bottom: none !important;
        }
        
        /* Dark theme table headers and labels */
        [data-theme="dark"] .table h6 {
            color: #cbd5e1 !important;
        }
        
        [data-theme="dark"] .table .text-secondary {
            color: #cbd5e1 !important;
        }
        
        [data-theme="dark"] .table .text-info {
            color: #60a5fa !important;
        }
        
        [data-theme="dark"] .table strong {
            color: #f8fafc !important;
        }
        
        /* Additional Bootstrap table overrides for dark mode */
        [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
            background: #1e293b !important;
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
            background: #1e293b !important;
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .table-hover tbody tr:hover {
            background: #334155 !important;
            color: #f8fafc !important;
        }
        
        /* Force all table cells to have consistent dark background */
        [data-theme="dark"] .table tbody tr td {
            background: #1e293b !important;
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .table tbody tr:nth-child(odd) td {
            background: #1e293b !important;
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .table tbody tr:nth-child(even) td {
            background: #1e293b !important;
            color: #f8fafc !important;
        }
        
        /* Badges - Glassmorphism */
        .badge {
            color: var(--text-primary) !important;
            border: 1px solid var(--glass-border);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-medium);
            line-height: var(--line-height-normal);
            letter-spacing: var(--letter-spacing-wider);
            text-transform: uppercase;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 0.25rem 0.5rem;
        }
        
        /* Gradient Badge Overrides */
        .badge.bg-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            color: white !important;
            border: none !important;
        }
        
        .badge.bg-success {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
            color: white !important;
            border: none !important;
        }
        
        .badge.bg-warning {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
            color: white !important;
            border: none !important;
        }
        
        .badge.bg-danger {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
            color: white !important;
            border: none !important;
        }
        
        .badge.bg-info {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            color: white !important;
            border: none !important;
        }
        
        .badge.bg-secondary {
            background: var(--bg-light) !important;
            color: var(--text-primary) !important;
            border: 1px solid var(--border-color);
        }
        
        .badge.bg-dark {
            background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%) !important;
            color: white !important;
            border: none;
        }
        
        .badge.bg-light {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border: 1px solid var(--border-color);
        }
        
        /* Gradient Badge Classes */
        .badge.bg-gradient-primary {
            background: var(--bg-primary) !important;
            color: white !important;
            border: none;
        }
        
        .badge.bg-gradient-success {
            background: var(--bg-success) !important;
            color: white !important;
            border: none;
        }
        
        .badge.bg-gradient-warning {
            background: var(--bg-warning) !important;
            color: white !important;
            border: none;
        }
        
        .badge.bg-gradient-danger {
            background: var(--bg-danger) !important;
            color: white !important;
            border: none;
        }
        
        .badge.bg-gradient-info {
            background: var(--bg-primary) !important;
            color: white !important;
            border: none;
        }
        
        .badge.bg-gradient-secondary {
            background: var(--bg-light) !important;
            color: var(--text-primary) !important;
            border: 1px solid var(--border-color);
        }
        
        .badge.bg-gradient-dark {
            background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%) !important;
            color: white !important;
            border: none;
        }
        
        /* Force gradient application with maximum specificity */
        .card .badge.recommendation-strong-buy {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
            background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
            background-color: transparent !important;
            color: white !important;
            border: none !important;
        }
        
        .card .badge.recommendation-buy {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
            background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
            background-color: transparent !important;
            color: white !important;
            border: none !important;
        }
        
        .card .badge.recommendation-hold {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
            background-image: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
            background-color: transparent !important;
            color: white !important;
            border: none !important;
        }
        
        .card .badge.recommendation-sell {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
            background-image: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
            background-color: transparent !important;
            color: white !important;
            border: none !important;
        }
        
        .card .badge.recommendation-strong-sell {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
            background-image: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
            background-color: transparent !important;
            color: white !important;
            border: none !important;
        }
        
        /* Test gradients - should definitely work */
        .test-gradient {
            background: linear-gradient(45deg, #ff0000, #00ff00) !important;
            color: white !important;
        }
        
        /* Dark theme text contrast fixes */
        [data-theme="dark"] .text-muted {
            color: #e2e8f0 !important;
        }
        
        [data-theme="dark"] .card .text-muted {
            color: #cbd5e1 !important;
        }
        
        /* Price change colors - must override h1-h6 color rules */
        .text-success {
            color: #28a745 !important;
        }
        
        .text-danger {
            color: #dc3545 !important;
        }
        
        /* Dark theme: brighter colors for better contrast */
        [data-theme="dark"] .text-success {
            color: #4ade80 !important;
        }
        
        [data-theme="dark"] .text-danger {
            color: #f87171 !important;
        }
        
        /* Ensure price change colors override heading colors - MAXIMUM SPECIFICITY */
        h1.text-success, h2.text-success, h3.text-success, h4.text-success, h5.text-success, h6.text-success,
        .h1.text-success, .h2.text-success, .h3.text-success, .h4.text-success, .h5.text-success, .h6.text-success,
        div.h5.text-success, span.text-success, p.text-success, div.text-success {
            color: #28a745 !important;
        }
        
        h1.text-danger, h2.text-danger, h3.text-danger, h4.text-danger, h5.text-danger, h6.text-danger,
        .h1.text-danger, .h2.text-danger, .h3.text-danger, .h4.text-danger, .h5.text-danger, .h6.text-danger,
        div.h5.text-danger, span.text-danger, p.text-danger, div.text-danger {
            color: #dc3545 !important;
        }
        
        [data-theme="dark"] h1.text-success, [data-theme="dark"] h2.text-success, [data-theme="dark"] h3.text-success, 
        [data-theme="dark"] h4.text-success, [data-theme="dark"] h5.text-success, [data-theme="dark"] h6.text-success,
        [data-theme="dark"] .h1.text-success, [data-theme="dark"] .h2.text-success, [data-theme="dark"] .h3.text-success, 
        [data-theme="dark"] .h4.text-success, [data-theme="dark"] .h5.text-success, [data-theme="dark"] .h6.text-success,
        [data-theme="dark"] div.h5.text-success, [data-theme="dark"] span.text-success, [data-theme="dark"] p.text-success, [data-theme="dark"] div.text-success {
            color: #4ade80 !important;
        }
        
        [data-theme="dark"] h1.text-danger, [data-theme="dark"] h2.text-danger, [data-theme="dark"] h3.text-danger, 
        [data-theme="dark"] h4.text-danger, [data-theme="dark"] h5.text-danger, [data-theme="dark"] h6.text-danger,
        [data-theme="dark"] .h1.text-danger, [data-theme="dark"] .h2.text-danger, [data-theme="dark"] .h3.text-danger, 
        [data-theme="dark"] .h4.text-danger, [data-theme="dark"] .h5.text-danger, [data-theme="dark"] .h6.text-danger,
        [data-theme="dark"] div.h5.text-danger, [data-theme="dark"] span.text-danger, [data-theme="dark"] p.text-danger, [data-theme="dark"] div.text-danger {
            color: #f87171 !important;
        }
        
        [data-theme="dark"] .card small {
            color: #cbd5e1 !important;
        }
        
        [data-theme="dark"] .card .card-text {
            color: #e2e8f0 !important;
        }
        
        [data-theme="dark"] .card .card-title {
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .card h5 {
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .card h6 {
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .card .fw-bold {
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .card .mb-0 {
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .card .h3 {
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .card .h4 {
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .card .h5 {
            color: #f8fafc !important;
        }
        
        [data-theme="dark"] .card .h6 {
            color: #f8fafc !important;
        }
        
        /* Modals - Glassmorphism */
        .modal-content {
            background: var(--glass-bg) !important;
            border: 1px solid var(--glass-border) !important;
            color: var(--text-primary) !important;
            border-radius: var(--radius-lg);
            box-shadow: var(--glass-shadow-hover);
            backdrop-filter: var(--glass-blur-strong);
            -webkit-backdrop-filter: var(--glass-blur-strong);
            overflow: hidden;
        }
        
        .modal-backdrop {
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            background: rgba(0, 0, 0, 0.3) !important;
        }
        
        .modal-header {
            background: var(--glass-bg-light) !important;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-bottom: 1px solid var(--glass-border) !important;
            color: var(--text-primary) !important;
        }
        
        .modal-footer {
            background: var(--glass-bg-light) !important;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-top: 1px solid var(--glass-border) !important;
            color: var(--text-primary) !important;
        }
        
        .modal-title {
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-normal);
            color: var(--text-primary) !important;
        }
        
        .btn-close {
            filter: brightness(0) invert(1);
            opacity: 0.7;
            transition: opacity 0.3s ease;
        }
        
        .btn-close:hover {
            opacity: 1;
        }
        
        /* Scrollbar for Dark Theme */
        [data-theme="dark"] ::-webkit-scrollbar-track {
            background: var(--bg-card);
        }
        
        [data-theme="dark"] ::-webkit-scrollbar-thumb {
            background: var(--border-color);
        }
        
        [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
            background: var(--border-light);
        }
    

/* Global layout adjustments from body style block */

        /* Pagination - Glassmorphism */
        .pagination .page-link {
            background: var(--glass-bg) !important;
            border: 1px solid var(--glass-border) !important;
            color: var(--text-primary) !important;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            transition: all 0.3s ease;
        }
        
        .pagination .page-link:hover {
            background: var(--glass-bg-hover) !important;
            border-color: var(--glass-border) !important;
            transform: translateY(-2px);
            box-shadow: var(--shadow-soft);
        }
        
        .pagination .page-item.active .page-link {
            background: var(--primary-gradient) !important;
            border-color: rgba(255, 255, 255, 0.2) !important;
            color: white !important;
            box-shadow: var(--shadow-medium);
        }
        
        /* Global layout adjustments */
        html, body { margin: 0; }
        body { padding-top: 0; }
        .navbar { z-index: 2000; min-height: 56px; }
        
        /* Remove underline decoration from anchor buttons globally */
        a.btn,
        a.btn:hover,
        a.btn:focus,
        a.btn:active,
        a.btn:visited {
            text-decoration: none !important;
        }