/* ========================================
   Quant Design System v1.0
   Global styles for consistent UX across platform
   ======================================== */

/* ========================================
   COLOR PALETTE - Deep Space / Neon Aesthetic
   ======================================== */
:root {
    /* Primary Colors */
    --quant-navy: #1e317e;
    --quant-navy-light: #2d4494;
    --quant-navy-dark: #0e1d47;
    --quant-navy-darkest: #050a1f;

    /* Accent Colors */
    --quant-purple: #8b5cf6;
    --quant-purple-light: #a78bfa;
    --quant-purple-dark: #7c3aed;
    --quant-teal: #06b6d4;
    --quant-teal-light: #22d3ee;
    --quant-teal-dark: #0891b2;

    /* Modern Neon Accent - Deep Space Theme */
    --quant-neon-cyan: #00D4FF;
    --quant-neon-cyan-light: #33DDFF;
    --quant-neon-cyan-dark: #00B8D4;

    /* Grays */
    --quant-gray-50: #f9fafb;
    --quant-gray-100: #f3f4f6;
    --quant-gray-200: #e5e7eb;
    --quant-gray-300: #d1d5db;
    --quant-gray-400: #9ca3af;
    --quant-gray-500: #6b7280;
    --quant-gray-600: #4b5563;
    --quant-gray-700: #374151;
    --quant-gray-800: #1f2937;
    --quant-gray-900: #111827;

    /* Semantic Colors */
    --quant-success: #10b981;
    --quant-warning: #f59e0b;
    --quant-danger: #ef4444;
    --quant-info: #3b82f6;

    /* Shadows */
    --quant-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --quant-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --quant-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --quant-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --quant-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Border Radius */
    --quant-radius-sm: 0.25rem;
    --quant-radius: 0.375rem;
    --quant-radius-md: 0.5rem;
    --quant-radius-lg: 0.75rem;
    --quant-radius-xl: 1rem;

    /* Semantic Backgrounds & Borders (Default Light) */
    --quant-bg-body: #f3f4f6;
    /* gray-100 */
    --quant-bg-surface: #ffffff;
    --quant-bg-subtle: #f9fafb;
    /* gray-50 */
    --quant-border-color: #e5e7eb;
    /* gray-200 */
    --quant-text-main: #111827;
    /* gray-900 */
    --quant-text-muted: #6b7280;
    /* gray-500 */
}

/* ========================================
   DARK MODE OVERRIDES - Deep Space / Neon Aesthetic
   ======================================== */
body.dark-mode {
    /* Deep Space Background Palette */
    --quant-bg-body: #0B0F19;
    /* Very deep charcoal with hint of blue */
    --quant-bg-surface: #151B2B;
    /* Lighter than body, for cards and surfaces */
    --quant-bg-subtle: #1E293B;
    /* Hover states, inputs, dropdowns */
    --quant-border-color: #1E293B;
    /* Very low contrast for structural elements */

    /* Text Hierarchy - Crisp whites and cool grays */
    --quant-text-main: #FFFFFF;
    /* Pure white for headings and key data */
    --quant-text-muted: #94A3B8;
    /* Cool muted slate gray for labels and body */
    --quant-text-placeholder: #64748B;
    /* Darker gray for less important details */

    /* Neon Accent - Electric Cyan */
    --quant-teal: #00D4FF;
    /* Vibrant neon cyan */
    --quant-teal-light: #33DDFF;
    /* Lighter for hover */
    --quant-teal-dark: #00B8D4;
    /* Darker variant */

    /* Inverted Grays for Dark Mode */
    --quant-gray-50: #111827;
    /* was 900 */
    --quant-gray-100: #1f2937;
    /* was 800 */
    --quant-gray-200: #374151;
    /* was 700 */
    --quant-gray-300: #4b5563;
    /* was 600 */
    --quant-gray-400: #6b7280;
    /* was 500 */
    --quant-gray-500: #9ca3af;
    /* was 400 */
    --quant-gray-600: #d1d5db;
    /* was 300 */
    --quant-gray-700: #e5e7eb;
    /* was 200 */
    --quant-gray-800: #f3f4f6;
    /* was 100 */
    --quant-gray-900: #f9fafb;
    /* was 50 */

    /* Shadows */
    --quant-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --quant-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --quant-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --quant-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);

    /* Glass Effects */
    --quant-glass-bg: rgba(14, 21, 41, 0.7);
    --quant-glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --quant-glass-blur: blur(12px);

    background-color: var(--quant-bg-body);
    color: var(--quant-text-main);
}

/* ========================================
   BOOTSTRAP UTILITY CLASSES - Dark Mode Overrides
   Global overrides for common Bootstrap utility classes
   ======================================== */

/* Text color utilities */
body.dark-mode .text-dark,
body.dark-mode .text-dark:hover,
body.dark-mode .text-dark:focus {
    color: var(--quant-text-main) !important;
}

body.dark-mode .text-secondary {
    color: var(--quant-text-muted) !important;
}

body.dark-mode .text-muted {
    color: var(--quant-text-muted) !important;
}

body.dark-mode .text-white {
    color: var(--quant-text-main) !important;
}

body.dark-mode .text-black {
    color: var(--quant-text-main) !important;
}

/* Background color utilities */
body.dark-mode .bg-light,
body.dark-mode .bg-white {
    background-color: var(--quant-bg-surface) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .bg-dark {
    background-color: var(--quant-bg-subtle) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .bg-secondary {
    background-color: var(--quant-bg-subtle) !important;
    color: var(--quant-text-main) !important;
}

/* Border utilities */
body.dark-mode .border {
    border-color: var(--quant-border-color) !important;
}

body.dark-mode .border-light {
    border-color: var(--quant-border-color) !important;
}

body.dark-mode .border-dark {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* List group items */
body.dark-mode .list-group-item {
    background-color: var(--quant-bg-surface) !important;
    border-color: var(--quant-border-color) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .list-group-item.active {
    background-color: var(--quant-navy) !important;
    border-color: var(--quant-navy) !important;
    color: var(--quant-text-main) !important;
}

/* Ensure headings are light in dark mode */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--quant-text-main);
}

/* Fix table cells and labels in dark mode */
body.dark-mode td,
body.dark-mode label {
    color: var(--quant-text-main) !important;
}

/* Fix table text in dark mode */
body.dark-mode .table {
    color: var(--quant-text-main) !important;
}

/* Fix DataTables thead background in dark mode */
body.dark-mode div.dataTables_wrapper thead {
    background-color: var(--quant-bg-subtle) !important;
}

body.dark-mode div.dataTables_wrapper thead th {
    background-color: transparent !important;
    color: var(--quant-text-main) !important;
}

/* Fix ApexCharts SVG text elements in dark mode */
body.dark-mode .apexcharts-svg text,
body.dark-mode .apexcharts-svg tspan {
    fill: var(--quant-text-main) !important;
}

/* Darken all ApexCharts line strokes in dark mode */
body.dark-mode .apexcharts-canvas svg line,
body.dark-mode .apexcharts-canvas svg polyline,
body.dark-mode .apexcharts-canvas svg path,
body.dark-mode .apexcharts-canvas svg rect,
body.dark-mode .apexcharts-canvas svg circle,
body.dark-mode .apexcharts-canvas svg ellipse,
body.dark-mode .apexcharts-canvas svg polygon {
    stroke: rgba(255, 255, 255, 0.2) !important;
}

/* Grid lines specifically */
body.dark-mode .apexcharts-gridline,
body.dark-mode .apexcharts-xaxis-tick,
body.dark-mode .apexcharts-yaxis-tick {
    stroke: rgba(255, 255, 255, 0.1) !important;
}

/* Axis lines */
body.dark-mode .apexcharts-xaxis line,
body.dark-mode .apexcharts-yaxis line {
    stroke: rgba(255, 255, 255, 0.15) !important;
}

/* Fix default button text color in dark mode */
body.dark-mode .btn {
    color: var(--quant-text-main);
}

body.dark-mode .btn:not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-dark):not(.btn-outline-light):not(.btn-primary):not(.btn-quant-primary):not(.btn-quant-teal):not(.btn-quant-purple):not(.btn-ai-teal):not(.btn-ai-primary) {
    color: var(--quant-text-main) !important;
}

/* Fix form elements in dark mode */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="search"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="url"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--quant-bg-subtle) !important;
    border: 2px solid rgba(0, 212, 255, 0.3) !important;
    color: var(--quant-text-main) !important;
    border-radius: 10px !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.3s ease-in-out !important;
}

/* Small form controls - only left/right padding to keep text readable */
body.dark-mode .form-control-sm,
body.dark-mode .form-select.form-control-sm,
body.dark-mode select.form-control-sm {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background-color: var(--quant-bg-subtle) !important;
    border-color: var(--quant-neon-cyan) !important;
    color: var(--quant-text-main) !important;
    outline: none !important;
    /* Multi-layered neon glow effect */
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5), 0 0 0 4px rgba(0, 212, 255, 0.15) !important;
}

body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--quant-text-placeholder) !important;
    opacity: 0.7;
}

/* Form Select Dropdown Arrow - Neon Cyan */
body.dark-mode .form-select,
body.dark-mode select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300D4FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.5rem !important; /* Make room for the arrow */
}

/* Form Select Options */
body.dark-mode .form-select option {
    background-color: var(--quant-bg-surface) !important;
    color: var(--quant-text-main) !important;
    padding: 12px !important;
}

body.dark-mode .form-select option:checked {
    background-color: var(--quant-neon-cyan) !important;
    color: var(--quant-bg-body) !important;
    background: linear-gradient(var(--quant-neon-cyan), var(--quant-neon-cyan)) !important;
}

/* Regular select elements - ensure selected text is visible */
body.dark-mode select option {
    background-color: var(--quant-bg-surface) !important;
    color: var(--quant-text-main) !important;
    padding: 12px !important;
}

body.dark-mode select option:checked {
    background-color: var(--quant-neon-cyan) !important;
    color: var(--quant-bg-body) !important;
}

/* Ensure the select element itself shows visible text */
body.dark-mode select,
body.dark-mode select:focus {
    color: var(--quant-text-main) !important;
}

body.dark-mode select * {
    color: var(--quant-text-main) !important;
}

/* Remove padding from select elements inside dataTables (they have fixed height) */
.dataTable select,
body.dark-mode .dataTable select {
    padding: 0 !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    height: 25px !important;
    line-height: 25px !important;
}

/* Form Labels - Better visibility in dark mode */
body.dark-mode .form-label,
body.dark-mode legend {
    color: var(--quant-text-main) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

body.dark-mode .form-text,
body.dark-mode .text-muted {
    color: var(--quant-text-muted) !important;
}

/* Checkboxes and Radio Buttons - Neon styling */
body.dark-mode .form-check-input {
    background-color: var(--quant-bg-subtle) !important;
    border: 2px solid rgba(0, 212, 255, 0.3) !important;
    width: 1.2em !important;
    height: 1.2em !important;
    margin-top: 0.15em !important;
    transition: all 0.2s ease !important;
}

body.dark-mode .form-check-input:checked {
    background-color: var(--quant-neon-cyan) !important;
    border-color: var(--quant-neon-cyan) !important;
    /* Add a small glow to the checked box */
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6) !important;
}

body.dark-mode .form-check-input:focus {
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5), 0 0 0 4px rgba(0, 212, 255, 0.15) !important;
    border-color: var(--quant-neon-cyan) !important;
}

body.dark-mode .form-check-label {
    color: var(--quant-text-main) !important;
    padding-left: 0.5rem !important;
    padding-top: 2px !important;
}

/* Links - Dark Mode (Neon Cyan) */
body.dark-mode a {
    color: var(--quant-neon-cyan) !important;
}

/* Buttons should not inherit link color - they have their own colors */
body.dark-mode a.btn,
body.dark-mode a.btn-quant-teal,
body.dark-mode a.btn-ai-teal,
body.dark-mode a.btn-quant-primary,
body.dark-mode a.btn-primary,
body.dark-mode a.btn-quant-purple,
body.dark-mode a.btn-ai-primary,
body.dark-mode a.btn-outline-primary,
body.dark-mode a.btn-outline-secondary,
body.dark-mode a.btn-outline-success,
body.dark-mode a.btn-outline-danger,
body.dark-mode a.btn-outline-warning,
body.dark-mode a.btn-outline-info {
    color: inherit !important;
}

body.dark-mode a:hover {
    color: var(--quant-neon-cyan-light) !important;
}

/* Visited link styles removed - links should look the same whether visited or not */

body.dark-mode a:active {
    color: var(--quant-neon-cyan-dark) !important;
}

body.dark-mode a:focus {
    color: var(--quant-neon-cyan-light) !important;
    outline: 2px solid var(--quant-neon-cyan);
    outline-offset: 2px;
}

/* Navigation links - Keep light/white in dark mode */
body.dark-mode .main-menu a,
body.dark-mode .navigation-main a,
body.dark-mode .navigation a,
body.dark-mode .nav-item a {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-mode .main-menu a:hover,
body.dark-mode .navigation-main a:hover,
body.dark-mode .navigation a:hover,
body.dark-mode .nav-item a:hover {
    color: white !important;
}

/* Visited navigation link styles removed */

/* Links in cards/content areas */
body.dark-mode .card a,
body.dark-mode .quant-card a {
    color: var(--quant-neon-cyan) !important;
}

body.dark-mode .card a:hover,
body.dark-mode .quant-card a:hover {
    color: var(--quant-neon-cyan-light) !important;
}

/* Primary/important links */
body.dark-mode a.btn-primary,
body.dark-mode a.btn-quant-primary,
body.dark-mode a.btn-ai-teal {
    color: white !important;
}

body.dark-mode a.btn-primary:hover,
body.dark-mode a.btn-quant-primary:hover,
body.dark-mode a.btn-ai-teal:hover {
    color: white !important;
}

/* Dropdown Menu - Dark Mode */
body.dark-mode .dropdown-menu {
    background-color: var(--quant-bg-surface) !important;
    border-color: var(--quant-border-color) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .dropdown-menu .dropdown-item {
    color: var(--quant-text-main) !important;
}

body.dark-mode .dropdown-menu .dropdown-item:hover,
body.dark-mode .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .dropdown-menu .dropdown-item.active,
body.dark-mode .dropdown-menu .dropdown-item:active {
    background-color: var(--quant-navy) !important;
    color: white !important;
}

body.dark-mode .dropdown-menu .dropdown-divider {
    border-top-color: var(--quant-border-color) !important;
}

/* Dropdown Menu Caret (::before) - Dark Mode */
body.dark-mode .dropdown .dropdown-menu::before {
    background: var(--quant-bg-surface) !important;
    border-top-color: var(--quant-border-color) !important;
    border-left-color: var(--quant-border-color) !important;
}

/* List Group Items - Dark Mode */
body.dark-mode .list-group-item {
    background-color: var(--quant-bg-surface) !important;
    border-color: var(--quant-border-color) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .list-group-item.active {
    background-color: var(--quant-navy) !important;
    border-color: var(--quant-navy) !important;
    color: white !important;
}

body.dark-mode .list-group-item a {
    color: var(--quant-text-main) !important;
}

body.dark-mode .list-group-item a:hover {
    color: var(--quant-neon-cyan) !important;
}

body.dark-mode .list-group-item a.danger {
    color: var(--quant-danger) !important;
}

body.dark-mode .list-group-item a.danger:hover {
    color: #f87171 !important;
}

/* Welcome Hero Card - Modern treatment */
.card-welcome-hero {
    background: linear-gradient(135deg, #0e1d47 0%, #1e317e 100%);
    border: none;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Light mode - use lighter gradient */
body:not(.dark-mode) .card-welcome-hero {
    background: linear-gradient(135deg, #1e317e 0%, #2d4494 100%);
}

.card-welcome-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: rgba(22, 211, 211, 0.08);
    border-radius: 50%;
    transform: translate(50%, -50%);
}

body:not(.dark-mode) .card-welcome-hero::before {
    background: rgba(22, 211, 211, 0.12);
}

.card-welcome-hero .card-body {
    position: relative;
    z-index: 1;
}

.card-welcome-hero h1 {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.card-welcome-hero h1 i {
    background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-welcome-hero h4,
.card-welcome-hero p,
.card-welcome-hero small,
.card-welcome-hero li {
    color: rgba(255, 255, 255, 0.95);
}

.card-welcome-hero .list-group-item {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
}

body:not(.dark-mode) .card-welcome-hero .list-group-item {
    border-color: rgba(255, 255, 255, 0.2);
}

.card-welcome-hero .list-group-item:hover {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body:not(.dark-mode) .card-welcome-hero .list-group-item:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.card-welcome-hero .list-group-item a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: underline;
}

.card-welcome-hero .list-group-item a:hover {
    color: white;
}

.card-welcome-hero .btn-primary,
.card-welcome-hero .btn-ai-teal {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
}

.card-welcome-hero .btn-primary:hover,
.card-welcome-hero .btn-ai-teal:hover {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.6);
    transform: translateY(-2px);
    color: white;
}

/* Select2 in dark mode - Neon styling to match form elements */
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: var(--quant-bg-subtle) !important;
    border: 2px solid rgba(0, 212, 255, 0.3) !important;
    color: var(--quant-text-main) !important;
    border-radius: 10px !important;
    min-height: 38px !important;
    transition: all 0.3s ease-in-out !important;
}

/* Force text color on all Select2 selection elements */
body.dark-mode .select2-container--default .select2-selection,
body.dark-mode .select2-container--default .select2-selection * {
    color: var(--quant-text-main) !important;
}

body.dark-mode .select2-container--default .select2-selection--single {
    height: auto !important;
    padding: 0 !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--quant-text-main) !important;
    padding: 0.75rem 1rem !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 38px !important;
}

/* Navbar Select2 - add padding for arrow */
.header-navbar .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 35px !important;
}

body.dark-mode .header-navbar .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 35px !important;
}

/* Ensure text inside selection is visible */
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered * {
    color: var(--quant-text-main) !important;
}

body.dark-mode .select2-container--default .select2-selection--multiple {
    padding: 0.25rem 0.5rem !important;
}

body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--quant-text-main) !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Ensure text inside multiple selection is visible */
body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__rendered * {
    color: var(--quant-text-main) !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 0.75rem !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--quant-neon-cyan) !important;
    border-width: 6px 5px 0 5px !important;
}

body.dark-mode .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--quant-neon-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5), 0 0 0 4px rgba(0, 212, 255, 0.15) !important;
}

body.dark-mode .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-bottom-color: var(--quant-neon-cyan) !important;
    border-top-color: transparent !important;
    border-width: 0 5px 6px 5px !important;
}

body.dark-mode .select2-container--default.select2-container--focus .select2-selection--single,
body.dark-mode .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--quant-neon-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5), 0 0 0 4px rgba(0, 212, 255, 0.15) !important;
}

body.dark-mode .select2-dropdown {
    background-color: var(--quant-bg-surface) !important;
    border: 2px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .select2-container--default .select2-results__option {
    color: var(--quant-text-main) !important;
    background-color: transparent !important;
    padding: 12px !important;
    transition: all 0.2s ease !important;
}

body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(0, 212, 255, 0.2) !important;
    color: var(--quant-neon-cyan) !important;
}

body.dark-mode .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--quant-neon-cyan) !important;
    color: var(--quant-bg-body) !important;
    font-weight: 600 !important;
}

body.dark-mode .select2-search--dropdown .select2-search__field {
    background-color: var(--quant-bg-subtle) !important;
    border: 2px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 8px !important;
    color: var(--quant-text-main) !important;
    padding: 0.5rem 0.75rem !important;
    margin: 8px !important;
    transition: all 0.3s ease-in-out !important;
}

body.dark-mode .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--quant-neon-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.4) !important;
    outline: none !important;
}

body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--quant-neon-cyan) !important;
    border: none !important;
    color: var(--quant-bg-body) !important;
    border-radius: 6px !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0.25rem !important;
    font-weight: 500 !important;
}

body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--quant-bg-body) !important;
    margin-right: 0.25rem !important;
    font-weight: 600 !important;
}

body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--quant-bg-body) !important;
    opacity: 0.8 !important;
}

/* Style select2-search inline element - invisible when empty, visible when focused/typing */
body.dark-mode .select2-container--default .select2-selection--multiple .select2-search--inline {
    float: left !important;
    width: auto !important;
    min-width: 20px !important;
}

body.dark-mode .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    padding: 0.25rem 0.5rem !important;
    border: none !important;
    background: transparent !important;
    color: var(--quant-text-main) !important;
    font-size: inherit !important;
    line-height: 1.5 !important;
    height: auto !important;
    box-shadow: none !important;
    outline: none !important;
}

/* When the field is focused or has content, make it visible and wider for typing */
body.dark-mode .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field:focus,
body.dark-mode .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field:not(:placeholder-shown) {
    width: 200px !important;
    min-width: 200px !important;
}

/* ========================================
   AUTHENTICATION PAGES - Modern Login/Register
   ======================================== */

/* Background gradient for auth pages - only on anonymous pages */
body.horizontal-layout.blank-page {
    background: linear-gradient(135deg, #1e317e 0%, #0e1d47 100%);
    min-height: 100vh;
}

body.horizontal-layout.blank-page.dark-mode {
    background: linear-gradient(135deg, #0e1d47 0%, #050a1f 100%);
}

/* Authentication card */
.bg-authentication {
    background: white !important;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

body.dark-mode .bg-authentication {
    background: var(--quant-bg-surface) !important;
    border: 1px solid var(--quant-border-color);
}

/* Logo */
.login-logo {
    height: 65px;
    background-size: contain;
    background-position: center;
    margin-bottom: 1rem;
}

/* Navigation tabs */
.bg-authentication .nav-tabs {
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

body.dark-mode .bg-authentication .nav-tabs {
    border-bottom-color: var(--quant-border-color);
}

.bg-authentication .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--quant-text-muted);
    padding: 0.75rem 1rem;
    font-weight: 500;
    transition: all 0.2s;
}

body.dark-mode .bg-authentication .nav-tabs .nav-link {
    color: var(--quant-text-muted);
}

.bg-authentication .nav-tabs .nav-link:hover {
    border-bottom-color: var(--quant-navy);
    color: var(--quant-navy);
}

body.dark-mode .bg-authentication .nav-tabs .nav-link:hover {
    border-bottom-color: var(--quant-teal);
    color: var(--quant-teal);
}

.bg-authentication .nav-tabs .nav-link.active {
    border-bottom-color: var(--quant-navy);
    color: var(--quant-navy);
    background: transparent;
}

body.dark-mode .bg-authentication .nav-tabs .nav-link.active {
    border-bottom-color: var(--quant-teal);
    color: var(--quant-teal);
}

/* Card header */
.bg-authentication .card-header {
    background: transparent;
    border: none;
    padding: 1.5rem 1.5rem 0.5rem;
}

.bg-authentication .card-title h4 {
    color: var(--quant-text-main);
    font-weight: 600;
    font-size: 1.5rem;
}

body.dark-mode .bg-authentication .card-title h4 {
    color: var(--quant-text-main);
}

/* Form elements */
.bg-authentication .form-label-group {
    margin-bottom: 1.5rem;
}

.bg-authentication .form-control {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem 0.75rem 3rem;
    font-size: 1rem;
    transition: all 0.2s;
}

body.dark-mode .bg-authentication .form-control {
    background-color: var(--quant-bg-surface);
    border-color: var(--quant-border-color);
    color: var(--quant-text-main);
}

.bg-authentication .form-control:focus {
    border-color: var(--quant-navy);
    box-shadow: 0 0 0 3px rgba(30, 49, 126, 0.1);
    outline: none;
}

body.dark-mode .bg-authentication .form-control:focus {
    border-color: var(--quant-teal);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

.bg-authentication .form-control-position {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--quant-text-muted);
    z-index: 10;
}

body.dark-mode .bg-authentication .form-control-position {
    color: var(--quant-text-muted);
}

.bg-authentication .form-control:focus + .form-control-position {
    color: var(--quant-navy);
}

body.dark-mode .bg-authentication .form-control:focus + .form-control-position {
    color: var(--quant-teal);
}

.bg-authentication label {
    color: var(--quant-text-main);
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

body.dark-mode .bg-authentication label {
    color: var(--quant-text-main);
}

/* Buttons */
.bg-authentication .btn-primary {
    background: linear-gradient(135deg, var(--quant-navy) 0%, var(--quant-navy-light) 100%);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(30, 49, 126, 0.3);
    transition: all 0.2s;
}

.bg-authentication .btn-primary:hover {
    background: linear-gradient(135deg, var(--quant-navy-light) 0%, var(--quant-navy) 100%);
    box-shadow: 0 6px 16px rgba(30, 49, 126, 0.4);
    transform: translateY(-1px);
    color: white;
}

.bg-authentication .btn-outline-primary {
    border: 1px solid var(--quant-navy);
    color: var(--quant-navy);
    background: transparent;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.bg-authentication .btn-outline-primary:hover {
    background: var(--quant-navy);
    color: white;
    border-color: var(--quant-navy);
}

body.dark-mode .bg-authentication .btn-outline-primary {
    border-color: var(--quant-teal);
    color: var(--quant-teal);
}

body.dark-mode .bg-authentication .btn-outline-primary:hover {
    background: var(--quant-teal);
    color: white;
    border-color: var(--quant-teal);
}

/* Links */
.bg-authentication .card-link {
    color: var(--quant-navy);
    text-decoration: none;
    font-weight: 500;
}

.bg-authentication .card-link:hover {
    color: var(--quant-navy-light);
    text-decoration: underline;
}

body.dark-mode .bg-authentication .card-link {
    color: var(--quant-teal);
}

body.dark-mode .bg-authentication .card-link:hover {
    color: var(--quant-teal-light);
}

/* Checkbox */
.bg-authentication .vs-checkbox-con {
    color: var(--quant-text-main);
}

body.dark-mode .bg-authentication .vs-checkbox-con {
    color: var(--quant-text-main);
}

/* Alerts */
.bg-authentication .alert {
    border-radius: 0.5rem;
    border: none;
    padding: 1rem;
}

/* OR divider */
.bg-authentication .text-muted {
    color: var(--quant-text-muted);
    font-size: 0.875rem;
}

body.dark-mode .bg-authentication .text-muted {
    color: var(--quant-text-muted);
}

/* Card body padding */
.bg-authentication .card-body {
    padding: 1.5rem;
}

/* Form group spacing */
.bg-authentication .form-group {
    margin-bottom: 1.5rem;
}

/* Fix Navbar in Dark Mode */
body.dark-mode .navbar-light {
    background-color: var(--quant-bg-surface) !important;
    border-bottom: 1px solid var(--quant-border-color);
}

body.dark-mode .navbar-light .navbar-brand,
body.dark-mode .navbar-light .nav-link {
    color: var(--quant-text-main) !important;
}

/* Fix AI Filters Bar */
body.dark-mode .ai-filters-bar {
    background: var(--quant-bg-surface);
    border-color: var(--quant-border-color);
}

/* Fix Outline Buttons in Dark Mode */
body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-success,
body.dark-mode .btn-outline-danger,
body.dark-mode .btn-outline-warning,
body.dark-mode .btn-outline-info,
body.dark-mode .btn-outline-dark,
body.dark-mode .btn-outline-light {
    background-color: transparent;
    color: var(--quant-neon-cyan) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
}

body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-success:hover,
body.dark-mode .btn-outline-warning:hover,
body.dark-mode .btn-outline-info:hover,
body.dark-mode .btn-outline-dark:hover,
body.dark-mode .btn-outline-light:hover {
    background-color: rgba(0, 212, 255, 0.1) !important;
    color: var(--quant-neon-cyan) !important;
    border-color: var(--quant-neon-cyan) !important;
}

/* Delete button (destructive action) - red on hover */
body.dark-mode .btn-outline-danger:hover {
    background-color: rgba(248, 113, 113, 0.2) !important;
    color: #f87171 !important;
    border-color: #f87171 !important;
    box-shadow: 0 0 10px rgba(248, 113, 113, 0.4) !important;
}

/* ========================================
   GLASSMORPHISM UTILITIES
   ======================================== */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    box-shadow: var(--quant-shadow-lg);
}

body.dark-mode .glass-panel {
    background: var(--quant-glass-bg);
    border: var(--quant-glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

body.dark-mode .glass-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .glass-card:hover {
    transform: translateY(-5px);
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

/* ========================================
   TABLES - Modern, Clean Design
   ======================================== */

/* Table Container - Light mode */
.quant-table-container,
.ai-table-container {
    background: var(--quant-bg-surface);
    padding: 1.5rem;
    border-radius: var(--quant-radius);
    box-shadow: var(--quant-shadow);
    border: 1px solid var(--quant-border-color);
    margin-bottom: 1.5rem;
}

/* Table Container with glassmorphism - Deep Space (Dark mode only) */
body.dark-mode .quant-table-container,
body.dark-mode .ai-table-container {
    background: linear-gradient(145deg, #1A202E 0%, #151B2B 100%);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    border: none;
}

/* Remove default table margins */
.quant-table-container .table,
.ai-table-container .table {
    margin-bottom: 0;
    background: var(--quant-bg-surface);
    color: var(--quant-text-main);
}

/* Modern table headers */
.quant-table-container .table thead th,
.ai-table-container .table thead th {
    background: var(--quant-bg-subtle);
    color: var(--quant-gray-500);
    font-weight: 600;
    border-bottom: 2px solid var(--quant-border-color);
    border-top: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 0.85rem 1rem;
}

/* Dark mode - table thead background and styling */
body.dark-mode .table thead,
body.dark-mode .quant-table-container .table thead,
body.dark-mode .ai-table-container .table thead,
body.dark-mode div.dataTables_wrapper .table thead,
body.dark-mode table.dataTable thead {
    background-color: var(--quant-bg-subtle) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Dark mode - subtle table header borders (override #e9e9e9) */
body.dark-mode .table thead th,
body.dark-mode .quant-table-container .table thead th,
body.dark-mode .ai-table-container .table thead th,
body.dark-mode div.dataTables_wrapper .table thead th,
body.dark-mode table.dataTable thead th {
    background-color: transparent !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05) !important;
    border-top: none !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--quant-text-main) !important;
    font-weight: 600 !important;
}

/* Dark mode - subtle table cell borders */
body.dark-mode .table td,
body.dark-mode .quant-table-container .table td,
body.dark-mode .ai-table-container .table td,
body.dark-mode div.dataTables_wrapper .table td,
body.dark-mode table.dataTable td {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dark mode - table td and th general overrides */
body.dark-mode .table td,
body.dark-mode .table th {
    color: var(--quant-text-main) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .table th {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05) !important;
}

/* Clean table rows */
.quant-table-container .table tbody tr,
.ai-table-container .table tbody tr {
    transition: all 0.15s;
    border-bottom: 1px solid var(--quant-gray-100);
}

.quant-table-container .table tbody tr:hover,
.ai-table-container .table tbody tr:hover {
    background: var(--quant-gray-50);
}

.quant-table-container .table tbody tr:last-child,
.ai-table-container .table tbody tr:last-child {
    border-bottom: none;
}

/* Consistent cell padding */
.quant-table-container .table td,
.ai-table-container .table td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    color: var(--quant-gray-700);
    border-top: none;
}

/* ========================================
   CARDS - Elevation & Hover Effects
   ======================================== */

/* Modern card - Light mode (matching dark mode aesthetic) */
.quant-card,
.card {
    /* background removed - allows gradient classes to work properly */
    border: 1px solid var(--quant-border-color);
    border-radius: 12px; /* Match dark mode border-radius */
    box-shadow: var(--quant-shadow);
    transition: box-shadow 0.3s ease; /* Match dark mode transition */
    overflow: hidden; /* Prevent content from expanding beyond card */
    position: relative; /* Establish positioning context */
}

/* Cards containing modals should not have any transitions */
.card:has(.modal),
.quant-card:has(.modal),
.card .modal,
.quant-card .modal {
    transition: none !important;
    transform: none !important;
}

.quant-card:hover,
.card:hover {
    box-shadow: var(--quant-shadow-md);
    /* No transform by default - only apply if explicitly requested */
}

/* Prevent card hover animations from affecting modals and their contents */
.modal .card:hover,
.modal .quant-card:hover,
.modal:hover .card,
.modal:hover .quant-card {
    transform: none !important;
    box-shadow: inherit !important;
}

/* Modern card with glassmorphism - Deep Space aesthetic (Dark mode only) */
body.dark-mode .quant-card,
body.dark-mode .card {
    /* Subtle gradient for depth instead of flat color */
    background: linear-gradient(145deg, #1A202E 0%, #151B2B 100%);
    border: none;
    border-radius: 12px;
    /* Soft shadow to lift off page with inner glow border effect */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
    overflow: hidden; /* Prevent content from expanding beyond card */
    position: relative; /* Establish positioning context */
}

/* Dark mode: Cards containing modals should not have any transitions */
body.dark-mode .card:has(.modal),
body.dark-mode .quant-card:has(.modal),
body.dark-mode .card .modal,
body.dark-mode .quant-card .modal {
    transition: none !important;
    transform: none !important;
}

body.dark-mode .quant-card:hover,
body.dark-mode .card:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 12px -2px rgba(0, 0, 0, 0.4), 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    /* No transform by default - only apply if explicitly requested */
}

/* Prevent dark mode card hover animations from affecting modals */
body.dark-mode .modal .card:hover,
body.dark-mode .modal .quant-card:hover,
body.dark-mode .modal:hover .card,
body.dark-mode .modal:hover .quant-card {
    transform: none !important;
    box-shadow: inherit !important;
}

/* Optional: Card hover lift effect - only applies when explicitly added */
.card-hover-lift:hover,
.quant-card-hover-lift:hover,
.hover-lift:hover {
    transform: translateY(-2px);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

body.dark-mode .card-hover-lift:hover,
body.dark-mode .quant-card-hover-lift:hover,
body.dark-mode .hover-lift:hover {
    transform: translateY(-2px);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Card headers with better contrast */
.quant-card .card-header,
.card .card-header {
    background: transparent;
    border-bottom: none;
    font-weight: 600;
    color: var(--quant-text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4rem;
    padding: 0 20px;
}

/* Buttons inside card-header need top margin */
.card-header .btn,
.card-header button {
    margin-top: 10px !important;
}

body.dark-mode .quant-card .card-header,
body.dark-mode .card .card-header {
    background: transparent;
    border-bottom: none;
}

.card .card-header .card-title {
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.card .card-header .card-subtitle {
    /* Padding now inherited from .card-header */
    margin-bottom: 0;
}

/* ========================================
   BUTTONS - Consistent & Modern
   ======================================== */

/* Remove box-shadow from dropdown toggle buttons */
.btn.dropdown-toggle {
    box-shadow: none !important;
}

/* Loading tab overlay - hides content in both light and dark modes */
.loading-tab-overlay {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
}

body.dark-mode .loading-tab-overlay {
    background-color: rgba(15, 21, 34, 0.95);
}

/* ========================================
   CODE ELEMENTS - Dark Mode Enhancement
   ======================================== */

/* Inline code styling for dark mode */
body.dark-mode code:not(pre code) {
    background: #000 !important;
    color: #c266ac !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 4px !important;
    font-family: 'Courier New', 'Monaco', 'Menlo', 'Consolas', monospace !important;
    font-size: 1em !important;
    border: none !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

/* Code blocks (pre) styling for dark mode */
body.dark-mode pre {
    background: #000 !important;
    color: #ffffff !important;
    padding: 1rem 1.25rem !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    margin: 1rem !important;
    border: none !important;
    box-shadow: none !important;
    font-family: 'Courier New', 'Monaco', 'Menlo', 'Consolas', monospace !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.01em !important;
}

/* Code inside pre blocks */
body.dark-mode pre code {
    background: transparent !important;
    padding: 0 !important;
    color: #ffffff !important;
    border: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
}

/* Allow word wrapping but prevent character breaking on buttons */
.btn,
button.btn,
a.btn,
button,
input[type="button"],
input[type="submit"] {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    hyphens: none !important;
}

/* Primary Button - Navy */
.btn-quant-primary,
.btn-primary {
    background: linear-gradient(135deg, var(--quant-navy) 0%, var(--quant-navy-light) 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(30, 49, 126, 0.3);
    transition: all 0.2s ease;
}

.btn-quant-primary:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, var(--quant-navy) 0%, var(--quant-navy-light) 100%);
    filter: brightness(1.1);
    box-shadow: 0 6px 16px rgba(30, 49, 126, 0.4);
    transform: translateY(-1px);
    color: white;
}

/* Accent Button - Teal (for create/add actions) */
.btn-quant-teal,
.btn-ai-teal {
    background: linear-gradient(135deg, var(--quant-teal) 0%, var(--quant-teal-dark) 100%) !important;
    border: none;
    color: white !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
    transition: all 0.2s ease;
}

.btn-quant-teal:hover,
.btn-ai-teal:hover {
    background: linear-gradient(135deg, var(--quant-teal-dark) 0%, #0e7490 100%) !important;
    box-shadow: 0 6px 16px rgba(6, 182, 212, 0.4);
    transform: translateY(-1px);
    color: white !important;
}

/* Purple Accent Button */
.btn-quant-purple,
.btn-ai-primary {
    background: linear-gradient(135deg, var(--quant-purple) 0%, var(--quant-purple-dark) 100%) !important;
    border: none;
    color: white !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    transition: all 0.2s ease;
}

.btn-quant-purple:hover,
.btn-ai-primary:hover,
.btn-quant-purple:hover *,
.btn-ai-primary:hover * {
    background: linear-gradient(135deg, var(--quant-purple-dark) 0%, #6d28d9 100%) !important;
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
    transform: translateY(-1px);
    color: white !important;
}

/* Secondary Button - Dark Mode */
body.dark-mode .btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--quant-text-main) !important;
    box-shadow: none !important;
}

body.dark-mode .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: none !important;
}

body.dark-mode .btn-secondary:focus,
body.dark-mode .btn-secondary:active {
    box-shadow: none !important;
    outline: 2px solid rgba(255, 255, 255, 0.3) !important;
    outline-offset: 2px !important;
}

/* Outline buttons with better states */
.btn-outline-primary,
a.btn-outline-primary {
    border-color: var(--quant-navy);
    color: var(--quant-navy);
}

.btn-outline-primary:hover,
a.btn-outline-primary:hover {
    background: var(--quant-navy);
    border-color: var(--quant-navy);
    color: white !important;
}

/* ========================================
   BADGES - Improved Contrast
   ======================================== */

.badge-quant-primary,
.badge-light-primary {
    background: #e3f9f9;
    color: #0d8b8b;
    border: 1px solid #16d3d3;
    font-weight: 500;
}

.badge-quant-success,
.badge-light-success {
    background: #d1fae5;
    color: #047857;
    font-weight: 500;
}

.badge-quant-info,
.badge-light-info {
    background: #dbeafe;
    color: #1e40af;
    font-weight: 500;
}

.badge-quant-warning,
.badge-light-warning {
    background: #fef3c7;
    color: #92400e;
    font-weight: 500;
}

.badge-quant-danger,
.badge-light-danger {
    background: #fee2e2;
    color: #991b1b;
    font-weight: 500;
}

/* ========================================
   BADGES - Dark Mode Overrides
   ======================================== */

body.dark-mode .badge {
    font-weight: 500;
}

body.dark-mode .badge-primary {
    background: rgba(0, 212, 255, 0.2) !important;
    color: var(--quant-neon-cyan) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
}

body.dark-mode .badge-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--quant-text-main) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .badge-success {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

body.dark-mode .badge-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

body.dark-mode .badge-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

body.dark-mode .badge-info {
    background: rgba(6, 182, 212, 0.2) !important;
    color: var(--quant-neon-cyan) !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important;
}

body.dark-mode .badge-light {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--quant-text-main) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .badge-dark {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--quant-text-main) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ========================================
   HERO HEADERS - Page-Level Headers
   ======================================== */

.quant-hero {
    background: linear-gradient(135deg, var(--quant-navy-dark) 0%, var(--quant-navy) 100%);
    color: white;
    padding: 3rem 2rem;
    border-radius: var(--quant-radius);
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--quant-shadow-md);
}

.quant-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 50%;
    transform: translate(50%, -50%);
}

.quant-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
    color: white;
}

.quant-hero h1 i,
.quant-hero h1 .fa {
    background: linear-gradient(135deg, #c4b5fd 0%, var(--quant-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.quant-hero p {
    font-size: 1.1rem;
    opacity: 0.95;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    color: white;
}

/* Ensure teal buttons have white text for readability */
.quant-hero .btn-quant-teal,
.quant-hero .btn-ai-teal,
body.dark-mode .btn-quant-teal,
body.dark-mode .btn-ai-teal,
body.dark-mode .quant-hero .btn-quant-teal,
body.dark-mode .quant-hero .btn-ai-teal {
    color: white !important;
}

.quant-hero .btn-quant-teal:hover,
.quant-hero .btn-ai-teal:hover,
body.dark-mode .btn-quant-teal:hover,
body.dark-mode .btn-ai-teal:hover,
body.dark-mode .quant-hero .btn-quant-teal:hover,
body.dark-mode .quant-hero .btn-ai-teal:hover {
    color: white !important;
}

/* Ensure icons inside teal buttons are also white */
.quant-hero .btn-quant-teal i,
.quant-hero .btn-ai-teal i,
body.dark-mode .btn-quant-teal i,
body.dark-mode .btn-ai-teal i,
body.dark-mode .quant-hero .btn-quant-teal i,
body.dark-mode .quant-hero .btn-ai-teal i {
    color: white !important;
}

/* ========================================
   FILTERS BAR - Consistent Across Pages
   ======================================== */

.quant-filters-bar {
    background: var(--quant-bg-surface);
    padding: 1.25rem 1.5rem;
    border-radius: var(--quant-radius);
    box-shadow: var(--quant-shadow);
    margin-bottom: 1.5rem;
    border: 1px solid var(--quant-border-color);
}

.quant-filters-bar .form-control {
    background: var(--quant-bg-surface);
    border: 1px solid var(--quant-border-color);
    color: var(--quant-text-main);
}

.quant-filters-bar .form-control:focus {
    border-color: var(--quant-navy);
    box-shadow: 0 0 0 2px rgba(30, 49, 126, 0.1);
}

.quant-filters-bar label {
    color: var(--quant-text-main);
    font-weight: 600;
}

/* ========================================
   EMPTY STATES - Friendly & Clear
   ======================================== */

.quant-empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.quant-empty-state-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-radius: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--quant-navy);
    font-size: 48px;
    box-shadow: 0 4px 12px rgba(30, 49, 126, 0.1);
}

.quant-empty-state h3 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--quant-text-main);
}

.quant-empty-state p {
    font-size: 1.1rem;
    color: var(--quant-gray-500);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   FORMS - Better UX
   ======================================== */

.quant-form-group label {
    font-weight: 600;
    color: var(--quant-text-main);
    margin-bottom: 0.5rem;
}

.quant-form-group .form-control {
    border: 1px solid var(--quant-border-color);
    background: var(--quant-bg-surface);
    color: var(--quant-text-main);
    transition: all 0.15s ease;
}

.quant-form-group .form-control:focus {
    border-color: var(--quant-navy);
    box-shadow: 0 0 0 3px rgba(30, 49, 126, 0.1);
}

/* ========================================
   MODALS - Modern & Clean
   ======================================== */

.quant-modal .modal-content {
    background: var(--quant-bg-surface);
    border-radius: var(--quant-radius-lg);
    border: 1px solid var(--quant-border-color);
    box-shadow: var(--quant-shadow-xl);
}

.quant-modal .modal-header {
    background: var(--quant-bg-subtle);
    border-bottom: 1px solid var(--quant-border-color);
    border-radius: var(--quant-radius-lg) var(--quant-radius-lg) 0 0;
}

.quant-modal .modal-header .modal-title {
    font-weight: 600;
    color: var(--quant-text-main);
}

/* ========================================
   MODALS - Dark Mode Support & Fixes
   ======================================== */

/* Modal container - ensures modals are at body level */
#modal-container {
    position: static;
    z-index: auto;
    /* Container itself should not interfere with layout */
}

/* Modal backdrop - fix z-index and positioning (both light and dark mode) */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
.modal-backdrop.fade.show {
    z-index: 1040 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    /* CRITICAL: Block all pointer events to elements behind the modal */
    pointer-events: auto !important;
    /* Ensure backdrop captures all events */
    touch-action: none !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    /* Disable any animations/transitions that might interfere */
    animation: none !important;
    transition: opacity 0.15s linear !important;
    transform: none !important;
    /* Prevent any layout shifts */
    will-change: opacity !important;
}

body.dark-mode .modal-backdrop,
body.dark-mode .modal-backdrop.fade,
body.dark-mode .modal-backdrop.show,
body.dark-mode .modal-backdrop.fade.show {
    background-color: rgba(0, 0, 0, 0.8) !important;
    opacity: 0.8 !important;
}

/* Ensure modal is properly positioned - prevent jumping/flickering */
.modal,
.modal.fade,
.modal.show,
.modal.fade.show {
    z-index: 1050 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    outline: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Prevent any transforms or animations that could cause jumping */
    transform: none !important;
    -webkit-transform: none !important;
    animation: none !important;
    transition: none !important;
    /* Isolate modal from layout changes behind it */
    isolation: isolate !important;
    contain: layout style paint !important;
    will-change: auto !important;
}

.modal.show,
.modal.fade.show {
    display: block !important;
}

/* Ensure modal dialog is properly positioned - prevent jumping */
.modal-dialog,
.modal-dialog.fade,
.modal-dialog.show,
.modal.fade .modal-dialog,
.modal.show .modal-dialog {
    position: relative !important;
    z-index: 1055 !important;
    margin: 1.75rem auto !important;
    pointer-events: none !important;
    max-width: 500px !important;
    /* CRITICAL: Disable ALL transforms that Bootstrap applies for fade animation */
    transform: none !important;
    -webkit-transform: none !important;
    animation: none !important;
    transition: opacity 0.15s linear !important;
    /* Ensure stable positioning */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

.modal-dialog .modal-content {
    pointer-events: auto !important;
    position: relative !important;
    /* Prevent any transforms */
    transform: none !important;
    -webkit-transform: none !important;
    animation: none !important;
    /* Ensure content doesn't shift */
    will-change: auto !important;
}

/* Prevent close button transforms from affecting layout */
.modal-header .close {
    transform: translate(8px, -2px) !important;
    will-change: transform !important;
}

.modal-header .close:hover,
.modal-header .close:focus,
.modal-header .close:active {
    transform: translate(5px, 3px) !important;
}

/* Prevent body scroll and layout shifts when modal is open */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* Modal content */
body.dark-mode .modal-content {
    background-color: var(--quant-bg-surface) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--quant-text-main) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* Modal header */
body.dark-mode .modal-header {
    background-color: var(--quant-bg-subtle) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .modal-header .modal-title {
    color: var(--quant-text-main) !important;
}

/* Modal close button */
body.dark-mode .modal-header .close,
body.dark-mode .modal-header button.close {
    color: var(--quant-text-main) !important;
    opacity: 0.8 !important;
}

body.dark-mode .modal-header .close:hover,
body.dark-mode .modal-header button.close:hover {
    color: var(--quant-neon-cyan) !important;
    opacity: 1 !important;
}

/* Modal body */
body.dark-mode .modal-body {
    background-color: var(--quant-bg-surface) !important;
    color: var(--quant-text-main) !important;
}

/* Modal footer */
body.dark-mode .modal-footer {
    background-color: var(--quant-bg-subtle) !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Alerts inside modals */
body.dark-mode .modal-body .alert {
    background-color: var(--quant-bg-subtle) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .modal-body .alert-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}

body.dark-mode .modal-body .alert-info {
    background-color: rgba(6, 182, 212, 0.15) !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
    color: var(--quant-neon-cyan) !important;
}

body.dark-mode .modal-body .alert-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

body.dark-mode .modal-body .alert-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
}

/* ========================================
   ALERTS - Improved Readability
   ======================================== */

.alert-quant-info {
    background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 100%);
    border: 1px solid #93c5fd;
    border-radius: var(--quant-radius);
    color: #1e40af;
}

.alert-quant-success {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.alert-quant-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
    color: #78350f;
}

.alert-quant-danger {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 1px solid #f87171;
    color: #7f1d1d;
}

/* Dark mode support for quant alerts */
body.dark-mode .alert-quant-info {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
    border-color: rgba(6, 182, 212, 0.3);
    color: var(--quant-neon-cyan);
}

body.dark-mode .alert-quant-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

body.dark-mode .alert-quant-warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.1) 100%);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

body.dark-mode .alert-quant-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

/* ========================================
   STATS CARDS - Consistent Metrics Display
   ======================================== */

.quant-stat-card {
    background: var(--quant-bg-surface);
    border: 1px solid var(--quant-border-color);
    border-radius: var(--quant-radius);
    padding: 1.5rem;
    box-shadow: var(--quant-shadow);
    transition: all 0.2s ease;
}

.quant-stat-card:hover {
    box-shadow: var(--quant-shadow-md);
    transform: translateY(-2px);
}

.quant-stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--quant-text-main);
    margin-bottom: 0.25rem;
}

.quant-stat-card .stat-label {
    font-size: 0.875rem;
    color: var(--quant-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.quant-stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--quant-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 1rem;
}

/* ========================================
   BREADCRUMBS - Enhanced Navigation
   ======================================== */

.breadcrumb-quant {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.breadcrumb-quant .breadcrumb-item {
    color: var(--quant-gray-500);
}

.breadcrumb-quant .breadcrumb-item.active {
    color: var(--quant-gray-900);
    font-weight: 500;
}

.breadcrumb-quant .breadcrumb-item a {
    color: var(--quant-gray-600);
    text-decoration: none;
}

.breadcrumb-quant .breadcrumb-item a:hover {
    color: var(--quant-navy);
}

/* ========================================
   PAGINATION - Modern Style
   ======================================== */

.pagination-quant .page-item.active .page-link {
    background: var(--quant-navy);
    border-color: var(--quant-navy);
    color: white;
    box-shadow: 0 2px 4px rgba(30, 49, 126, 0.2);
}

.pagination-quant .page-item:not(.active) .page-link:hover {
    background: var(--quant-gray-50);
    border-color: var(--quant-gray-400);
}

/* DataTables Pagination - Dark Mode */
body.dark-mode .paginate_button .page-link,
body.dark-mode li.paginate_button a,
body.dark-mode .pagination .page-item .page-link {
    background-color: var(--quant-bg-subtle) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .paginate_button .page-link:hover,
body.dark-mode li.paginate_button a:hover,
body.dark-mode .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: rgba(0, 212, 255, 0.1) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
    color: var(--quant-neon-cyan) !important;
}

body.dark-mode .paginate_button.active .page-link,
body.dark-mode li.paginate_button.active a,
body.dark-mode .pagination .page-item.active .page-link {
    background-color: var(--quant-neon-cyan) !important;
    border-color: var(--quant-neon-cyan) !important;
    color: var(--quant-bg-body) !important;
}

body.dark-mode .paginate_button.disabled .page-link,
body.dark-mode li.paginate_button.disabled a,
body.dark-mode .pagination .page-item.disabled .page-link {
    background-color: var(--quant-bg-subtle) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--quant-text-muted) !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Override #f0f0f0 background for active pagination items */
body.dark-mode .pagination .page-item.active,
body.dark-mode li.paginate_button.active,
body.dark-mode .pagination li.page-item.active {
    background-color: transparent !important;
}

body.dark-mode .pagination .page-item.active .page-link,
body.dark-mode li.paginate_button.active .page-link,
body.dark-mode .pagination li.page-item.active .page-link {
    background-color: var(--quant-neon-cyan) !important;
    border-color: var(--quant-neon-cyan) !important;
    color: var(--quant-bg-body) !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Text colors */
.text-quant-navy {
    color: var(--quant-navy);
}

.text-quant-purple {
    color: var(--quant-purple);
}

.text-quant-teal {
    color: var(--quant-teal);
}

/* Background colors */
.bg-quant-navy {
    background-color: var(--quant-navy);
}

.bg-quant-purple {
    background-color: var(--quant-purple);
}

.bg-quant-teal {
    background-color: var(--quant-teal);
}

.bg-quant-gray-50 {
    background-color: var(--quant-gray-50);
}

/* Shadows */
.shadow-quant-sm {
    box-shadow: var(--quant-shadow-sm);
}

.shadow-quant {
    box-shadow: var(--quant-shadow);
}

.shadow-quant-md {
    box-shadow: var(--quant-shadow-md);
}

.shadow-quant-lg {
    box-shadow: var(--quant-shadow-lg);
}

/* Border radius */
.rounded-quant-sm {
    border-radius: var(--quant-radius-sm);
}

.rounded-quant {
    border-radius: var(--quant-radius);
}

.rounded-quant-lg {
    border-radius: var(--quant-radius-lg);
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* fadeIn animation - only applies to elements with explicit .fade-in class */
.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Prevent fadeIn animation on modals and anything containing modals */
.modal .fade-in,
.fade-in:has(.modal) {
    animation: none !important;
    transform: none !important;
}

/* ========================================
   PROGRESS BARS - Dark Mode Support
   ======================================== */

/* Progress bar background in dark mode */
body.dark-mode .progress {
    background-color: var(--quant-bg-subtle) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Progress bar fill colors in dark mode */
body.dark-mode .progress-bar {
    background-color: var(--quant-neon-cyan) !important;
    color: var(--quant-text-main) !important;
}

/* Bootstrap progress bar variants in dark mode */
body.dark-mode .progress-bar.bg-primary {
    background-color: var(--quant-neon-cyan) !important;
}

body.dark-mode .progress-bar.bg-success {
    background-color: rgba(34, 197, 94, 0.8) !important;
}

body.dark-mode .progress-bar.bg-warning {
    background-color: rgba(251, 191, 36, 0.8) !important;
}

body.dark-mode .progress-bar.bg-danger {
    background-color: rgba(239, 68, 68, 0.8) !important;
}

body.dark-mode .progress-bar.bg-info {
    background-color: var(--quant-neon-cyan) !important;
}

body.dark-mode .progress-bar.bg-secondary {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ========================================
   RESPONSIVE IMPROVEMENTS
   ======================================== */

@media (max-width: 768px) {
    .quant-hero {
        padding: 2rem 1.5rem;
    }

    .quant-hero h1 {
        font-size: 2rem;
    }

    .quant-table-container,
    .ai-table-container {
        padding: 1rem;
    }

    .quant-stat-card {
        margin-bottom: 1rem;
    }
}

/* ========================================
   NAVBAR - Deep Space Background (Both Light & Dark Mode)
   ======================================== */
.main-menu.menu-dark .navigation,
body.semi-dark-layout .main-menu {
    background-color: #0F1522 !important;
    background: #0F1522 !important;
    border-right: 1px solid var(--quant-border-color) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3) !important;
}

/* Navbar header - Deep Space (matches navigation, both light and dark mode) */
.main-menu .navbar-header {
    background-color: #0F1522 !important;
    background: #0F1522 !important;
}

/* Ensure all navigation sub-elements also use Deep Space background (both light and dark mode) */
.main-menu.menu-dark .navigation > li > ul,
body.semi-dark-layout .main-menu-content .navigation-main,
body.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content,
body.semi-dark-layout .main-menu-content .navigation-main .nav-item.open a,
body.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content li:not(.active) a {
    background-color: #0F1522 !important;
    background: #0F1522 !important;
}

/* Active navigation link - Neon cyan accent */
body.dark-mode .main-menu .nav-item.active > a,
body.dark-mode .navigation-main .nav-item.active > a,
body.dark-mode .navigation .nav-item.active > a {
    background: rgba(0, 212, 255, 0.1) !important;
    color: var(--quant-neon-cyan) !important;
    border-left: 3px solid var(--quant-neon-cyan) !important;
}

/* Remove background from li.active itself */
body.dark-mode .menu-content li.active,
body.dark-mode .navigation .menu-content li.active,
body.dark-mode .navigation-main .menu-content li.active,
body.dark-mode .main-menu .menu-content li.active,
body.dark-mode .navigation > li > ul li.active,
body.semi-dark-layout .main-menu-content .navigation-main .sidebar-group-active .menu-content li.active {
    background-color: transparent !important;
    background: transparent !important;
}

/* Active sub-menu items - Neon cyan accent (on the anchor tag) */
body.dark-mode .menu-content li.active > a,
body.dark-mode .navigation .menu-content li.active > a,
body.dark-mode .navigation-main .menu-content li.active > a,
body.dark-mode .main-menu .menu-content li.active > a,
body.dark-mode .navigation > li > ul li.active > a,
body.semi-dark-layout .main-menu-content .navigation-main .sidebar-group-active .menu-content .active a {
    background: rgba(0, 212, 255, 0.1) !important;
    color: var(--quant-neon-cyan) !important;
    border-left: 3px solid var(--quant-neon-cyan) !important;
}

/* ========================================
   SCROLLBARS - Dark Mode (Transparent Background)
   ======================================== */

/* Webkit browsers (Chrome, Safari, Edge) */
body.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: transparent !important;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.3) !important;
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.5) !important;
    background-clip: padding-box;
}

body.dark-mode ::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* Firefox */
body.dark-mode {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.3) transparent;
}

/* ========================================
   CODE EDITOR PAGE - Seamless Integration
   ======================================== */

/* Remove bottom border radius on code editor card */
.code-editor-card {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove border from Monaco editor to blend seamlessly */
#quant__editor {
    border: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    background-color: var(--quant-bg-body) !important;
}

/* ========================================
   ACCORDIONS - Dark Mode Support
   ======================================== */

/* Accordion cards */
body.dark-mode .accordion .card,
body.dark-mode .accordion .collapse-border-item.card,
body.dark-mode .accordion .collapse-header {
    background-color: var(--quant-bg-surface) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--quant-text-main) !important;
}

/* Accordion card headers */
body.dark-mode .accordion .card-header,
body.dark-mode .accordion .collapse-header .card-header {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .accordion .card-header:hover,
body.dark-mode .accordion .collapse-header .card-header:hover {
    background-color: rgba(0, 212, 255, 0.05) !important;
}

body.dark-mode .accordion .card-header[aria-expanded="true"],
body.dark-mode .accordion .collapse-header .card-header[aria-expanded="true"] {
    background-color: rgba(0, 212, 255, 0.1) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
}

/* Accordion collapse title */
body.dark-mode .accordion .collapse-title,
body.dark-mode .accordion .lead.collapse-title {
    color: var(--quant-text-main) !important;
}

/* Accordion card bodies - override #f8f9fa */
body.dark-mode .accordion .card-body,
body.dark-mode .accordion .collapse .card-body,
body.dark-mode .accordion .card-accordion-collapse .card-body,
body.dark-mode .accordion .card-accordion-collapse.collapsing .card-body,
body.dark-mode .accordion .card-accordion-collapse.show .card-body,
body.dark-mode .accordion .collapse.show .card-body,
body.dark-mode .accordion .collapse.collapsing .card-body {
    background-color: var(--quant-bg-surface) !important;
    color: var(--quant-text-main) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Accordion collapse states */
body.dark-mode .accordion .collapse,
body.dark-mode .accordion .card-accordion-collapse {
    background-color: var(--quant-bg-surface) !important;
}

/* Accordion borders */
body.dark-mode .accordion .collapse-border-item {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .accordion .collapse-border-item:not(:last-child) {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   LIVEWIRE COMPONENTS - Dark Mode Support
   ======================================== */

/* Override white background on expanded table rows (Alpine.js x-show) */
body.dark-mode tr[x-show][x-collapse],
body.dark-mode tr[style*="background-color: #fff"],
body.dark-mode tr[style*="background-color:#fff"],
body.dark-mode tr[style*="background-color: rgb(255, 255, 255)"],
body.dark-mode tr[style*="background-color:rgba(255, 255, 255"] {
    background-color: var(--quant-bg-surface) !important;
    color: var(--quant-text-main) !important;
}

/* Override any inline white backgrounds in Livewire components */
body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background-color:#fff"],
body.dark-mode [style*="background-color: rgb(255, 255, 255)"],
body.dark-mode [style*="background-color:rgba(255, 255, 255, 0.85)"] {
    background-color: var(--quant-bg-surface) !important;
}

/* Environment detail badges */
body.dark-mode .env-detail-badge {
    background-color: var(--quant-bg-subtle) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .env-detail-badge > div {
    color: var(--quant-text-main) !important;
}

body.dark-mode .env-detail-badge > div:first-child {
    color: var(--quant-text-muted) !important;
}

/* Table striped rows in dark mode */
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--quant-bg-surface) !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

body.dark-mode .table-striped tbody tr:hover {
    background-color: rgba(0, 212, 255, 0.05) !important;
}

/* Table hover in dark mode */
body.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(0, 212, 255, 0.05) !important;
    color: var(--quant-text-main) !important;
}

/* Table tbody+tbody border in dark mode */
body.dark-mode .table tbody+tbody {
    border-top-color: rgba(255, 255, 255, 0.05) !important;
}

/* Description lists (dl/dt/dd) in dark mode */
body.dark-mode dl dt {
    color: var(--quant-text-muted) !important;
}

body.dark-mode dl dd {
    color: var(--quant-text-main) !important;
}

/* Breadcrumbs in dark mode */
body.dark-mode .breadcrumb {
    background-color: transparent !important;
}

body.dark-mode .breadcrumb-item,
body.dark-mode .breadcrumb-item a {
    color: var(--quant-text-muted) !important;
}

body.dark-mode .breadcrumb-item.active {
    color: var(--quant-text-main) !important;
}

body.dark-mode .breadcrumb-item a:hover {
    color: var(--quant-neon-cyan) !important;
}

/* Spinner in dark mode */
body.dark-mode .spinner-border {
    border-color: rgba(0, 212, 255, 0.3) !important;
    border-right-color: var(--quant-neon-cyan) !important;
}

/* Small tables in dark mode */
body.dark-mode .table-sm td,
body.dark-mode .table-sm th {
    color: var(--quant-text-main) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Border-bottom utility class - dark mode */
body.dark-mode .border-bottom {
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* Navigation pills/tabs - modern dark mode styling */
body.dark-mode .nav-pills .nav-link {
    color: var(--quant-text-muted) !important;
    background-color: transparent !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    margin-right: 0.5rem !important;
    transition: all 0.2s ease !important;
}

body.dark-mode .nav-pills .nav-link:hover {
    color: var(--quant-text-main) !important;
    background-color: rgba(0, 212, 255, 0.05) !important;
    border-color: rgba(0, 212, 255, 0.2) !important;
}

body.dark-mode .nav-pills .nav-link.active {
    color: var(--quant-neon-cyan) !important;
    background-color: rgba(0, 212, 255, 0.1) !important;
    border-color: var(--quant-neon-cyan) !important;
    font-weight: 600 !important;
}

/* ========================================
   AI AGENTS - Dark Mode Styling
   ======================================== */

/* Agent Cards - Dark Mode */
body.dark-mode .agent-card,
body.dark-mode .collection-card {
    background: linear-gradient(145deg, #1A202E 0%, #151B2B 100%) !important;
    border: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
    border-radius: 12px !important;
}

/* Circular glowing edge animation on hover - improved version */
/* ========================================
   GLOW BORDER EFFECT - Reusable for any card
   ======================================== */

/* Mouse-following glow border - apply .glow-border class to any card */
body.dark-mode .glow-border::before,
body.dark-mode .card.glow-border::before,
body.dark-mode .quant-card.glow-border::before,
body.dark-mode .agent-card::before,
body.dark-mode .collection-card::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    /* Mouse-following glow - angle will be set by JavaScript */
    /* More subtle and thinner glow */
    background: conic-gradient(
        from var(--glow-angle, 0deg),
        transparent 0deg,
        transparent 120deg,
        rgba(0, 212, 255, 0.25) 125deg,
        rgba(0, 212, 255, 0.5) 128deg,
        rgba(0, 212, 255, 0.5) 132deg,
        rgba(0, 212, 255, 0.25) 135deg,
        transparent 140deg
    ) !important;
    border-radius: 14px !important;
    opacity: 0 !important;
    z-index: 0 !important;
    transition: opacity 0.3s ease !important;
    /* Background transition removed - JavaScript handles smooth animation */
    pointer-events: none !important;
    /* Clip to card's border-radius */
    clip-path: inset(0 round 12px) !important;
    -webkit-clip-path: inset(0 round 12px) !important;
}

body.dark-mode .glow-border:hover::before,
body.dark-mode .card.glow-border:hover::before,
body.dark-mode .quant-card.glow-border:hover::before,
body.dark-mode .agent-card:hover::before,
body.dark-mode .collection-card:hover::before {
    opacity: 1 !important;
}

/* Base styles for glow-border cards - ensure proper positioning */
body.dark-mode .glow-border,
body.dark-mode .card.glow-border,
body.dark-mode .quant-card.glow-border {
    position: relative !important;
    overflow: hidden !important;
}

body.dark-mode .agent-card::after,
body.dark-mode .collection-card::after,
body.dark-mode .glow-border::after,
body.dark-mode .card.glow-border::after,
body.dark-mode .quant-card.glow-border::after {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    right: 2px !important;
    bottom: 2px !important;
    background: linear-gradient(145deg, #1A202E 0%, #151B2B 100%) !important;
    border-radius: 12px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

body.dark-mode .agent-card:hover,
body.dark-mode .collection-card:hover,
body.dark-mode .glow-border:hover,
body.dark-mode .card.glow-border:hover,
body.dark-mode .quant-card.glow-border:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 12px -2px rgba(0, 0, 0, 0.4), 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 212, 255, 0.3) !important;
    transform: translateY(-4px) !important;
}

/* Ensure card content is above the animated border */
body.dark-mode .agent-card .card-body,
body.dark-mode .collection-card .card-body,
body.dark-mode .glow-border .card-body,
body.dark-mode .card.glow-border .card-body,
body.dark-mode .quant-card.glow-border .card-body {
    position: relative !important;
    z-index: 2 !important;
}

/* Collection Card (Tools) - Dark Mode Styling */
body.dark-mode .collection-header {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0.08) 100%) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
}

body.dark-mode .collection-icon {
    background: rgba(0, 212, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2) !important;
}

body.dark-mode .collection-description {
    color: var(--quant-text-muted) !important;
}

body.dark-mode .collection-body {
    color: var(--quant-text-main) !important;
}

/* Agent Header - Dark Mode */
body.dark-mode .agent-header {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0.08) 100%) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
}

body.dark-mode .agent-icon {
    background: rgba(0, 212, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2) !important;
}

body.dark-mode .agent-header h4 {
    color: var(--quant-text-main) !important;
}

body.dark-mode .agent-header .badge {
    background: rgba(0, 212, 255, 0.2) !important;
    color: var(--quant-neon-cyan) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
}

/* Agent Description - Dark Mode */
body.dark-mode .agent-description {
    color: var(--quant-text-muted) !important;
}

/* Agent Model Badge - Dark Mode */
body.dark-mode .agent-model {
    background: rgba(0, 212, 255, 0.15) !important;
    color: var(--quant-neon-cyan) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.2) !important;
}

/* Agent Stats - Dark Mode */
body.dark-mode .agent-stats {
    background: rgba(0, 212, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .stat-item {
    color: var(--quant-text-muted) !important;
}

body.dark-mode .stat-item i {
    color: var(--quant-neon-cyan) !important;
}

body.dark-mode .stat-item strong {
    color: var(--quant-text-main) !important;
}

/* Agent Tools - Dark Mode */
body.dark-mode .agent-tools-label {
    color: var(--quant-text-muted) !important;
}

body.dark-mode .tool-badge {
    background: rgba(0, 212, 255, 0.15) !important;
    color: var(--quant-neon-cyan) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
}

body.dark-mode .tool-badge i {
    color: var(--quant-neon-cyan) !important;
}

body.dark-mode .tool-more {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--quant-text-muted) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Agent Actions Buttons - Dark Mode (inherit general outline button styles) */

/* Hero Sections - Dark Mode */
body.dark-mode .agents-hero,
body.dark-mode .ai-hero {
    background: linear-gradient(135deg, #0B0F19 0%, #1A202E 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .agents-hero::before,
body.dark-mode .ai-hero::before {
    background: rgba(0, 212, 255, 0.05) !important;
}

body.dark-mode .agents-hero h1,
body.dark-mode .ai-hero h1 {
    color: var(--quant-text-main) !important;
}

body.dark-mode .agents-hero p,
body.dark-mode .ai-hero p {
    color: var(--quant-text-muted) !important;
}

/* Filter Bar - Dark Mode */
body.dark-mode .ai-filters-bar {
    background: linear-gradient(145deg, #1A202E 0%, #151B2B 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .ai-filters-bar label {
    color: var(--quant-text-main) !important;
}

/* Wizard Steps - Dark Mode */
body.dark-mode .ai-wizard-steps {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .ai-wizard-steps::before {
    background: rgba(255, 255, 255, 0.1) !important;
    z-index: 0 !important;
}

body.dark-mode .ai-wizard-step {
    color: var(--quant-text-muted) !important;
    z-index: 1 !important;
}

body.dark-mode .ai-wizard-step-circle {
    position: relative !important;
    z-index: 2 !important;
    background: var(--quant-bg-subtle) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--quant-text-muted) !important;
}

body.dark-mode .ai-wizard-step.active .ai-wizard-step-circle {
    background: var(--quant-neon-cyan) !important;
    color: #0B0F19 !important;
    border-color: var(--quant-neon-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5) !important;
    z-index: 3 !important;
}

body.dark-mode .ai-wizard-step.active .ai-wizard-step-label {
    color: var(--quant-neon-cyan) !important;
}

body.dark-mode .ai-wizard-step.completed .ai-wizard-step-circle {
    background: rgba(0, 212, 255, 0.2) !important;
    color: var(--quant-neon-cyan) !important;
    border: 2px solid var(--quant-neon-cyan) !important;
    z-index: 2 !important;
}

body.dark-mode .ai-wizard-step.completed .ai-wizard-step-label {
    color: var(--quant-text-muted) !important;
}

/* Wizard Content - Dark Mode */
body.dark-mode .ai-wizard-content {
    background: transparent !important;
}

body.dark-mode .ai-wizard-content h5 {
    color: var(--quant-text-main) !important;
}

body.dark-mode .ai-wizard-content p.text-muted {
    color: var(--quant-text-muted) !important;
}

/* Wizard Actions - Dark Mode */
body.dark-mode .ai-wizard-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Tool Selection - Dark Mode */
body.dark-mode .tool-selection {
    background: rgba(0, 212, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
}

body.dark-mode .tool-selection h6 {
    color: var(--quant-neon-cyan) !important;
}

body.dark-mode .ai-tool-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .ai-tool-item:last-child {
    border-bottom: none !important;
}

body.dark-mode .ai-tool-item.selected {
    background: rgba(0, 212, 255, 0.05) !important;
    border-left: 3px solid var(--quant-neon-cyan) !important;
}

body.dark-mode .custom-control-label {
    color: var(--quant-text-main) !important;
}

/* Review Section - Dark Mode */
body.dark-mode #review-tools .badge,
body.dark-mode #review-collections .badge {
    background: rgba(0, 212, 255, 0.15) !important;
    color: var(--quant-neon-cyan) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
}

body.dark-mode #review-system-prompt {
    background: rgba(0, 212, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .ai-alert-info {
    background: rgba(0, 212, 255, 0.1) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .ai-alert-info strong {
    color: var(--quant-neon-cyan) !important;
}

/* Empty State - Dark Mode */
body.dark-mode .ai-empty-state {
    color: var(--quant-text-muted) !important;
}

body.dark-mode .ai-empty-state h3 {
    color: var(--quant-text-main) !important;
}

body.dark-mode .ai-empty-state-icon {
    color: var(--quant-neon-cyan) !important;
}

/* System Prompt Editor - Dark Mode */
body.dark-mode .system-prompt-editor {
    border: 2px solid rgba(0, 212, 255, 0.3) !important;
    background: var(--quant-bg-subtle) !important;
    border-radius: 10px !important;
}

body.dark-mode .system-prompt-editor:focus-within {
    border-color: var(--quant-neon-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5), 0 0 0 4px rgba(0, 212, 255, 0.15) !important;
}

/* Monaco Editor Dark Theme Override */
body.dark-mode .monaco-editor {
    background: var(--quant-bg-subtle) !important;
}

body.dark-mode .monaco-editor .monaco-editor-background {
    background: var(--quant-bg-subtle) !important;
}

/* Form Controls in Wizard - Dark Mode */
body.dark-mode .ai-wizard-content .form-control,
body.dark-mode .ai-wizard-content input[type="text"],
body.dark-mode .ai-wizard-content input[type="number"],
body.dark-mode .ai-wizard-content textarea,
body.dark-mode .ai-wizard-content select {
    background-color: var(--quant-bg-subtle) !important;
    border: 2px solid rgba(0, 212, 255, 0.3) !important;
    color: var(--quant-text-main) !important;
    border-radius: 10px !important;
}

body.dark-mode .ai-wizard-content .form-control:focus,
body.dark-mode .ai-wizard-content input[type="text"]:focus,
body.dark-mode .ai-wizard-content input[type="number"]:focus,
body.dark-mode .ai-wizard-content textarea:focus,
body.dark-mode .ai-wizard-content select:focus {
    background-color: var(--quant-bg-subtle) !important;
    border-color: var(--quant-neon-cyan) !important;
    color: var(--quant-text-main) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5), 0 0 0 4px rgba(0, 212, 255, 0.15) !important;
}

body.dark-mode .ai-wizard-content .form-control::placeholder,
body.dark-mode .ai-wizard-content input[type="text"]::placeholder,
body.dark-mode .ai-wizard-content textarea::placeholder {
    color: var(--quant-text-placeholder) !important;
    opacity: 0.7 !important;
}

body.dark-mode .ai-wizard-content select option {
    background-color: var(--quant-bg-subtle) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .ai-wizard-content select option:checked {
    background-color: var(--quant-neon-cyan) !important;
    color: #0B0F19 !important;
}

/* Custom Range Slider - Dark Mode */
body.dark-mode .ai-wizard-content .custom-range {
    background: var(--quant-bg-subtle) !important;
}

body.dark-mode .ai-wizard-content .custom-range::-webkit-slider-thumb {
    background: var(--quant-neon-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6) !important;
}

body.dark-mode .ai-wizard-content .custom-range::-moz-range-thumb {
    background: var(--quant-neon-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6) !important;
    border: none !important;
}

body.dark-mode .ai-wizard-content .custom-range::-webkit-slider-runnable-track {
    background: rgba(0, 212, 255, 0.2) !important;
}

body.dark-mode .ai-wizard-content .custom-range::-moz-range-track {
    background: rgba(0, 212, 255, 0.2) !important;
}

/* Tool Selection Area - Dark Mode */
body.dark-mode .tool-selection {
    background: rgba(0, 212, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
}

body.dark-mode .tool-selection h6 {
    color: var(--quant-neon-cyan) !important;
}

/* AI Tool Item - Dark Mode */
body.dark-mode .ai-tool-item {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
    transition: all 0.2s ease !important;
    background: rgba(0, 212, 255, 0.02) !important;
}

body.dark-mode .ai-tool-item:hover {
    background: rgba(0, 212, 255, 0.05) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
}

body.dark-mode .ai-tool-item:last-child {
    margin-bottom: 0 !important;
}

body.dark-mode .ai-tool-item.selected {
    background: rgba(0, 212, 255, 0.15) !important;
    border: 2px solid var(--quant-neon-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1), 0 0 20px rgba(0, 212, 255, 0.2) !important;
}

/* Custom Checkbox - Dark Mode */
body.dark-mode .ai-wizard-content .custom-control-input {
    width: 1.25rem !important;
    height: 1.25rem !important;
    background-color: var(--quant-bg-subtle) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

body.dark-mode .ai-wizard-content .custom-control-input:not(:checked) {
    background-color: var(--quant-bg-subtle) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode .ai-wizard-content .custom-control-input:checked {
    background-color: var(--quant-neon-cyan) !important;
    border-color: var(--quant-neon-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6), inset 0 0 0 2px var(--quant-bg-subtle) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%230B0F19' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e") !important;
}

body.dark-mode .ai-wizard-content .custom-control-input:focus {
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5), 0 0 0 4px rgba(0, 212, 255, 0.15) !important;
    border-color: var(--quant-neon-cyan) !important;
    outline: none !important;
}

body.dark-mode .ai-wizard-content .custom-control-input:focus:not(:checked) {
    border-color: var(--quant-neon-cyan) !important;
}

body.dark-mode .ai-wizard-content .custom-control-label {
    color: var(--quant-text-main) !important;
    padding-left: 0.5rem !important;
    cursor: pointer !important;
}

body.dark-mode .ai-wizard-content .custom-control-label strong {
    color: var(--quant-text-main) !important;
    font-weight: 600 !important;
}

body.dark-mode .ai-wizard-content .custom-control-label small {
    color: var(--quant-text-muted) !important;
    display: block !important;
    margin-top: 0.25rem !important;
}

/* Alert Info in Wizard - Dark Mode */
body.dark-mode .ai-wizard-content .alert-info,
body.dark-mode .ai-wizard-content .alert {
    background: rgba(0, 212, 255, 0.1) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    color: var(--quant-text-main) !important;
}

body.dark-mode .ai-wizard-content .alert code {
    background: rgba(0, 212, 255, 0.2) !important;
    color: var(--quant-neon-cyan) !important;
    padding: 0.2rem 0.4rem !important;
    border-radius: 4px !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
}

/* Review Section - Dark Mode */
body.dark-mode .ai-wizard-content .card {
    background: linear-gradient(145deg, #1A202E 0%, #151B2B 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .ai-wizard-content .card h6 {
    color: var(--quant-neon-cyan) !important;
}

body.dark-mode .ai-wizard-content dl dt {
    color: var(--quant-text-muted) !important;
}

body.dark-mode .ai-wizard-content dl dd {
    color: var(--quant-text-main) !important;
}

/* Wizard Actions Buttons - Dark Mode */
body.dark-mode .ai-wizard-actions .btn-outline-secondary {
    background: transparent !important;
    color: var(--quant-text-muted) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .ai-wizard-actions .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: var(--quant-text-main) !important;
}

/* Form Labels - Dark Mode */
body.dark-mode .ai-wizard-content label {
    color: var(--quant-text-main) !important;
}

body.dark-mode .ai-wizard-content label .text-danger {
    color: #f87171 !important;
}

body.dark-mode .ai-wizard-content .text-muted {
    color: var(--quant-text-muted) !important;
}

/* Small text in wizard - Dark Mode */
body.dark-mode .ai-wizard-content small.text-muted {
    color: var(--quant-text-muted) !important;
}

/* Temperature value display - Dark Mode */
body.dark-mode #temperature-value {
    color: var(--quant-neon-cyan) !important;
    font-weight: 600 !important;
}

/* D-flex justify-content-between labels - Dark Mode */
body.dark-mode .ai-wizard-content .d-flex.justify-content-between small {
    color: var(--quant-text-muted) !important;
}