/* ============================================
   DARK THEME - EXECUTIVE DASHBOARD
   Based on Built By Veterans Dashboard Design
   ============================================ */

body.theme-dark {
    /* Core Dark Background Colors */
    --bg: #0A0E17;
    --sf: #141824;
    --g8: #0F1419;
    --g7: #1A1F2E;
    --g6: #00D9A3;  /* Primary Teal-Green Accent */
    --g5: #1AE5B0;
    --g4: #34EFB8;
    --g3: #7FFFD4;
    --g1: #1E2535;
    --g9: #07090F;
    
    /* Text Colors */
    --t1: #FFFFFF;
    --t2: #C5CBD6;
    --t3: #8B92A7;
    --sf-text: #FFFFFF;
    
    /* Border Colors */
    --bd: rgba(255, 255, 255, 0.08);
    --green-border-12: rgba(0, 217, 163, 0.12);
    --green-border-08: rgba(0, 217, 163, 0.08);
    --green-border-06: rgba(0, 217, 163, 0.06);
    
    /* Action/Interaction Colors */
    --green-action-08: rgba(0, 217, 163, 0.08);
    --green-action-06: rgba(0, 217, 163, 0.06);
    --green-action-04: rgba(0, 217, 163, 0.04);
    
    /* Error Colors */
    --error: #FF4D6D;
    --red: #FF4D6D;
    --rbg: rgba(255, 77, 109, 0.12);
    --rbd: #FF6B87;
    --danger-overlay: rgba(255, 77, 109, 0.18);
    --alert-light: rgba(255, 77, 109, 0.08);
    --alert-strong: #FF3355;
    
    /* Success/Green Variants */
    --green-success: #00D9A3;
    --success-light-bg: rgba(0, 217, 163, 0.12);
    --green-50: #00C294;
    --green-100: rgba(0, 217, 163, 0.1);
    --green-300: #34EFB8;
    --green-500: #00D9A3;
    --green-600: #00B589;
    --green-600-dark: #009F78;
    --green-600-alt: #00B589;
    --green-600-darker: #008A67;
    --green-900: #006F56;
    --greeni-50: rgba(0, 217, 163, 0.05);
    
    /* Purple Variants (for charts/data) */
    --purple-100: #2D2545;
    --purple-200: #3D3060;
    --purple-500: #9D5EF5;
    --purple-600: #8B4AE5;
    --purple-700: #7A3CD5;
    
    /* Blue Variants (for charts/data) */
    --blue-100: #1E2845;
    --blue-500: #4A9EFF;
    --blue-600: #3A8EEF;
    --blue-800: #2A7EDF;
    
    /* Shadows */
    --sh1: 0 2px 8px rgba(0, 0, 0, 0.4);
    --sh2: 0 4px 16px rgba(0, 0, 0, 0.5);
    --sh3: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-dark-30: 0 -4px 20px rgba(0, 0, 0, 0.5);
    --shadow-medium-12: 0 8px 24px rgba(0, 0, 0, 0.4);
    
    /* Green Shadows */
    --green-shadow-30: 0 4px 14px rgba(0, 217, 163, 0.3);
    --green-shadow-20: 0 2px 10px rgba(0, 217, 163, 0.2);
    --shadow-green-30: rgba(0, 217, 163, 0.3);
    --shadow-green-30b: rgba(0, 217, 163, 0.3);
    --green-shadow-22: rgba(0, 217, 163, 0.22);
    --green-shadow: rgba(0, 217, 163, 0.32);
    
    /* Focus States */
    --focus-shadow: 0 0 0 3px rgba(0, 217, 163, 0.2);
    --focus-shadow-strong: rgba(0, 217, 163, 0.3);
    --focus-shadow-medium: rgba(0, 217, 163, 0.2);
    --focus-shadow-medium1: rgba(0, 217, 163, 0.2);
    --focus-shadow-light: rgba(0, 217, 163, 0.15);
    --focus-shadow-lighter: rgba(0, 217, 163, 0.1);
    --shadow-focus-light: rgba(0, 217, 163, 0.1);
    --shadow-focus-medium: rgba(0, 217, 163, 0.12);
    --shadow-focus-strong: rgba(0, 217, 163, 0.2);
    
    /* Helper Colors */
    --helper-border: rgba(0, 217, 163, 0.12);
    --helper-bg: rgba(0, 217, 163, 0.08);
    --helper-border-green: rgba(0, 217, 163, 0.24);
    --helper-border-light: rgba(0, 217, 163, 0.12);
    
    /* White Overlay Variants */
    --white-overlay: rgba(255, 255, 255, 0.05);
    --white-overlay-light: rgba(255, 255, 255, 0.03);
    --white-overlay-semi: rgba(255, 255, 255, 0.08);
    
    /* Black Overlay Variants */
    --black-45: rgba(0, 0, 0, 0.7);
    --black-50: rgba(0, 0, 0, 0.75);
    --black-30: rgba(0, 0, 0, 0.5);
    --black-10: rgba(0, 0, 0, 0.2);
    
    /* Surface Variants */
    --surface: #141824;
    --surface-light: #1A1F2E;
    --surface-lighter: #1E2535;
    --surface-lightest: #232A3C;
    --surface-hover: rgba(255, 255, 255, 0.03);
    --surface-hover-light: rgba(255, 255, 255, 0.05);
    
    /* Background Variants */
    --bg-light: #0F1419;
    --bg-light1: #141824;
    --bg-light-alt: #1A1F2E;
    --bg-lighter: #1E2535;
    --bg-lightest: #232A3C;
    --bg-very-light: #0A0E17;
    --bg-ultra-light: #0D1119;
    
    /* Border Variants */
    --border-light: rgba(255, 255, 255, 0.08);
    --border-light1: rgba(0, 217, 163, 0.12);
    --border-lighter: rgba(255, 255, 255, 0.06);
    --border-hover-green: rgba(0, 217, 163, 0.24);
    --border-light-green: rgba(0, 217, 163, 0.08);
    --muted-border: rgba(255, 255, 255, 0.1);
    --muted-border-2: rgba(255, 255, 255, 0.08);
    --bdr: rgba(255, 255, 255, 0.08);
    --bdr2: rgba(255, 255, 255, 0.12);
    
    /* Dropdown */
    --dropdown-hover: rgba(255, 255, 255, 0.05);
    --dropdown-border: rgba(255, 255, 255, 0.08);
    --dropdown-add-bg: rgba(0, 217, 163, 0.06);
    --dropdown-shadow: rgba(0, 0, 0, 0.5);
    
    /* Input Colors */
    --input-border: rgba(255, 255, 255, 0.12);
    --input-text-color: #8B92A7;
    --surface-input: #1A1F2E;
    --text-placeholder: #6B7280;
    
    /* Text Variants */
    --text-gray: #8B92A7;
    --text-gray-light: #A0A6B8;
    --text-gray-lighter: #B5B9C7;
    --text-gray-lightest: #C5CBD6;
    --text-gray-dark: #FFFFFF;
    --text-secondary: #8B92A7;
    --text-dark: #FFFFFF;
    --text-900: #FFFFFF;
    
    /* Icon Colors */
    --svg-icon: #8B92A7;
    --icon-gray-light: #A0A6B8;
    
    /* Special States */
    --green-action: #00D9A3;
    --green-focus: rgba(0, 217, 163, 0.15);
    --green-orb: rgba(0, 217, 163, 0.1);
    --green-bg-08: rgba(0, 217, 163, 0.08);
    --green-03: rgba(0, 217, 163, 0.3);
    --green-04: rgba(0, 217, 163, 0.04);
    --green-025: rgba(0, 217, 163, 0.25);
    --green-045: rgba(0, 217, 163, 0.45);
    
    /* Overlay */
    --green-overlay-08: rgba(0, 217, 163, 0.08);
    --green-overlay-06: rgba(0, 217, 163, 0.06);
    --dark-overlay: rgba(0, 0, 0, 0.9);
    --dark-overlay-semi: rgba(0, 0, 0, 0.5);
    
    /* Modal/Card */
    --modal-shadow: rgba(0, 0, 0, 0.6);
    --modal-shadow1: rgba(0, 0, 0, 0.5);
    --modal-shadow-light: rgba(0, 0, 0, 0.4);
    --modal-shadow-lighter: rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.7);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
    
    /* Warning Colors */
    --warning-bg: rgba(251, 191, 36, 0.12);
    --warning-border: rgba(251, 191, 36, 0.3);
    --warning-fill: #FBBF24;
    --warning-text: #FCD34D;
    --warning-text-dark: #F59E0B;
    
    /* Amber Colors */
    --amber: #F59E0B;
    --ambg: rgba(251, 191, 36, 0.12);
    --ambd: #FBBF24;
    --amber-500: #F59E0B;
    --amber-700: #D97706;
    --amber-darker: #B45309;
    --amber-dark: #92400e;
    
    /* Orange Colors */
    --orange: #FB923C;
    --orange-bg: rgba(251, 146, 60, 0.12);
    --orange-text: #FDBA74;
    
    /* Button Shadow */
    --button-shadow: rgba(0, 217, 163, 0.2);
    
    /* Success Focus */
    --success-focus: rgba(0, 217, 163, 0.15);
    --success-shadow-10: 0 0 0 3px rgba(0, 217, 163, 0.1);
    
    /* Danger Colors */
    --danger-bg: rgba(255, 77, 109, 0.12);
    --danger-light-bg: rgba(255, 77, 109, 0.08);
    --danger-light-bg1: rgba(255, 77, 109, 0.06);
    --danger-light-border: rgba(255, 77, 109, 0.3);
    --danger-text: #FF6B87;
    --danger-text1: #FF4D6D;
    --danger-text-hover: #FF3355;
    --danger-error-bg: rgba(255, 77, 109, 0.12);
    --danger-shadow-12: 0 0 0 3px rgba(255, 77, 109, 0.2);
    --danger-700: #FF1A3D;
    
    /* Focus/Gradients */
    --focus-light: rgba(0, 217, 163, 0.1);
    --focus-lighter: rgba(0, 217, 163, 0.06);
    --gradient-example-1: #0F1419;
    --gradient-example-2: #141824;
    --gradient-example-3: rgba(0, 217, 163, 0.08);
    --surface-gradient-start: #0F1419;
    --surface-gradient-end: #141824;
    
    /* Misc */
    --neon-green: #1AE5B0;
    --brand-yellow: #FBBF24;
    --light-bg: #141824;
    --light-border: rgba(0, 217, 163, 0.12);
    --light-border-soft: rgba(0, 217, 163, 0.08);
    --light-gray-bg: #1A1F2E;
    --muted: #8B92A7;
    --muted-600: #6B7280;
    --ink: #FFFFFF;
    --ink2: #C5CBD6;
    --red-focus: rgba(255, 77, 109, 0.15);
    --red-focus-alt: rgba(255, 77, 109, 0.1);
    --red-focus-15: rgba(255, 77, 109, 0.15);
    --shadow-lightbox: rgba(0, 0, 0, 0.95);
    --shadow-lightbox-btn: rgba(255, 255, 255, 0.1);
    --overlay-dark: rgba(0, 0, 0, 0.8);

    /* ── Link colors ─────────────────────────────── */
    --link-color: #60A5FA;
    --link-hover: #93C5FD;
}

/* Ensure transitions work smoothly in dark mode */
body.theme-dark * {
    transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

/* Override specific components for dark mode */
body.theme-dark .ut tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

body.theme-dark .tb-srch input,
body.theme-dark .ts input,
body.theme-dark .fi,
body.theme-dark .fs {
    color: var(--t1);
}

body.theme-dark .tb-srch input::placeholder,
body.theme-dark .ts input::placeholder,
body.theme-dark .fi::placeholder {
    color: var(--t3);
}

/* Scrollbar styling for dark theme */
body.theme-dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body.theme-dark ::-webkit-scrollbar-track {
    background: var(--g9);
}

body.theme-dark ::-webkit-scrollbar-thumb {
    background: var(--g7);
    border-radius: 3px;
}

body.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: var(--g6);
}

/* Ensure code blocks and pre tags look good in dark mode */
body.theme-dark code,
body.theme-dark pre {
    background: var(--g9);
    color: var(--t1);
    border: 1px solid var(--bd);
}

/* Table styling adjustments */
body.theme-dark .ut thead {
    background: var(--g9);
}

body.theme-dark .pipeline-table thead,
body.theme-dark .month-revenue-table thead {
    background: transparent;
}

/* Card hover effects in dark mode */
body.theme-dark .sc:hover,
body.theme-dark .metric-card:hover,
body.theme-dark .data-card:hover {
    box-shadow: 0 8px 24px rgba(0, 217, 163, 0.15);
}

/* Modal backdrop in dark mode */
body.theme-dark .mb {
    background: rgba(0, 0, 0, 0.85);
}

/* Toastr adjustments for dark theme */
body.theme-dark .toast-success {
    background-color: var(--g6) !important;
}

body.theme-dark .toast-error {
    background-color: var(--error) !important;
}

/* Form validation states in dark mode */
body.theme-dark .fi.inv,
body.theme-dark .fs.inv {
    background: rgba(255, 77, 109, 0.08);
}

body.theme-dark .fi.ok,
body.theme-dark .fs.ok {
    background: rgba(0, 217, 163, 0.08);
}