/* ========================================
   MODERN APP STYLES FOR HGOV ADO REPORTING
   ======================================== */

/* ========================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ======================================== */

/* ========================================
   LIGHT THEME (Default)
   ======================================== */
:root,
[data-theme="light"] {
    /* Primary Colors */
    --primary-color: #1b6ec2;
    --primary-hover: #1861ac;
    --primary-rgb: 27, 110, 194;

    /* Secondary Colors */
    --secondary-color: #6c757d;
    --secondary-hover: #5a6268;

    /* Accent Colors */
    --accent-gradient-start: #1b6ec2;
    --accent-gradient-end: #1861ac;

    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-dark: rgb(5, 39, 103);
    --bg-darker: #3a0647;

    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --text-light: #d7d7d7;
    --text-on-primary: #ffffff;
    --text-on-primary-muted: rgba(255, 255, 255, 0.8);

    /* Border Colors */
    --border-color: #dee2e6;
    --border-light: rgba(255, 255, 255, 0.1);

    /* Shadow Tokens */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.2);

    /* Card/Surface Colors */
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --card-header-bg: #f8f9fa;

    /* Table Colors */
    --table-header-bg: #f8f9fa;
    --table-row-hover: rgba(27, 110, 194, 0.05);
    --table-border: #dee2e6;

    /* Form Colors */
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-focus-border: #1b6ec2;

    /* Status Colors - Base */
    --success-color: #28a745;
    --success-bg: #d4edda;
    --success-text: #155724;
    --success-rgb: 34, 197, 94;
    --warning-color: #ffc107;
    --warning-bg: #fff3cd;
    --warning-text: #856404;
    --warning-rgb: 255, 193, 7;
    --danger-color: #dc3545;
    --danger-rgb: 220, 53, 69;
    --danger-bg: #f8d7da;
    --danger-text: #721c24;
    --info-color: #17a2b8;
    --info-bg: #d1ecf1;
    --info-text: #0c5460;

    /* Button Shadows */
    --btn-primary-shadow: 0 4px 12px rgba(0, 120, 212, 0.3);
    --btn-primary-hover-shadow: 0 6px 16px rgba(0, 120, 212, 0.4);

    /* Work Item Type Colors */
    --epic-color: #e65100;
    --epic-bg: rgba(255, 152, 0, 0.15);
    --feature-color: #2e7d32;
    --feature-bg: rgba(76, 175, 80, 0.15);
    --pbi-color: #1565c0;
    --pbi-bg: rgba(33, 150, 243, 0.15);
    --task-color: #c2185b;
    --task-bg: rgba(233, 30, 99, 0.15);

    /* Help Box Colors */
    --info-box-bg: #e7f1ff;
    --warning-box-bg: #fff3cd;
    --success-box-bg: #d1e7dd;

    /* Report Card Icon Colors */
    --report-icon-executive-bg: #dbeafe;
    --report-icon-executive-color: #2563eb;
    --report-icon-project-bg: #dcfce7;
    --report-icon-project-color: #16a34a;
    --report-icon-team-bg: #fef3c7;
    --report-icon-team-color: #d97706;
    --report-icon-resource-bg: #f3e8ff;
    --report-icon-resource-color: #9333ea;
    --report-icon-primary-gradient: linear-gradient(135deg, #2563eb, #1d4ed8);

    /* Toast Notification Gradients */
    --toast-success-gradient: linear-gradient(135deg, var(--success-color) 0%, #0e7a36 100%);
    --toast-error-gradient: linear-gradient(135deg, var(--danger-color) 0%, #c82333 100%);

    /* Progress Bar Gradients */
    --progress-success-gradient: linear-gradient(90deg, var(--success-color) 0%, #20c997 100%);

    /* Gantt Highlight Colors */
    --highlight-dev-bg: rgba(16, 185, 129, 0.1);
    --highlight-qa-bg: rgba(0, 131, 143, 0.1);
    --highlight-projected-bg: rgba(139, 92, 246, 0.1);

    /* Utilization/Capacity States */
    --utilization-under-bg: rgba(100, 181, 246, 0.15);
    --utilization-under-text: #1565c0;
    --utilization-healthy-bg: rgba(76, 175, 80, 0.15);
    --utilization-healthy-text: #2e7d32;
    --utilization-full-bg: rgba(255, 152, 0, 0.15);
    --utilization-full-text: #ef6c00;
    --utilization-over-bg: rgba(244, 67, 54, 0.15);
    --utilization-over-text: #c62828;

    /* Heatmap Cell Colors */
    --heatmap-green-bg: #e8f5e9;
    --heatmap-green-text: #2e7d32;
    --heatmap-yellow-bg: #fffde7;
    --heatmap-yellow-text: #f9a825;
    --heatmap-orange-bg: #fff3e0;
    --heatmap-orange-text: #ef6c00;
    --heatmap-red-bg: #ffebee;
    --heatmap-red-text: #c62828;

    /* Legend Item Colors */
    --legend-green-bg: #e8f5e9;
    --legend-green-text: #2e7d32;
    --legend-yellow-bg: #fffde7;
    --legend-yellow-text: #f9a825;
    --legend-orange-bg: #fff3e0;
    --legend-orange-text: #ef6c00;
    --legend-red-bg: #ffebee;
    --legend-red-text: #c62828;

    /* Status Dot Colors (Gantt) */
    --status-dot-green: #4caf50;
    --status-dot-yellow: #ff9800;
    --status-dot-red: #f44336;

    /* Calculated Date Colors */
    --calc-date-dev: #2e7d32;
    --calc-date-qa: #00838f;
    --calc-date-projected: #7b1fa2;

    /* Badge Variants */
    --badge-auto-bg: rgba(76, 175, 80, 0.15);
    --badge-auto-text: #2e7d32;
    --badge-manual-bg: rgba(33, 150, 243, 0.15);
    --badge-manual-text: #1565c0;
    --badge-qa-bg: #fce7f3;
    --badge-qa-text: #9d174d;

    /* Health Badges */
    --health-ok-bg: rgba(76, 175, 80, 0.15);
    --health-ok-text: #2e7d32;
    --health-risk-bg: rgba(255, 152, 0, 0.15);
    --health-risk-text: #ef6c00;
    --health-over-bg: rgba(244, 67, 54, 0.15);
    --health-over-text: #c62828;

    /* Status Badge Colors */
    --status-low-bg: #fef3c7;
    --status-low-text: #92400e;
    --status-medium-bg: #dbeafe;
    --status-medium-text: #1e40af;
    --status-good-bg: #d1fae5;
    --status-good-text: #065f46;
    --status-high-bg: #ffedd5;
    --status-high-text: #9a3412;
    --status-critical-bg: #fee2e2;
    --status-critical-text: #991b1b;
    --status-unassigned-bg: #e5e7eb;
    --status-unassigned-text: #4b5563;

    /* Utilization Bar Colors */
    --utilization-low-bg: #fcd34d;
    --utilization-medium-bg: #60a5fa;
    --utilization-good-bg: #34d399;
    --utilization-high-bg: #f97316;
    --utilization-critical-bg: #ef4444;

    /* Fixed Hours Row States */
    --fixed-complete-bg: rgba(76, 175, 80, 0.1);
    --fixed-near-complete-bg: rgba(255, 152, 0, 0.1);
    --fixed-info-bg: rgba(23, 162, 184, 0.1);
    --fixed-total-bg: rgba(27, 110, 194, 0.1);

    /* Special States */
    --transition-gradient-start: rgba(30, 136, 229, 0.15);
    --transition-gradient-end: rgba(76, 175, 80, 0.15);
    --transition-text: #1565c0;
    --stabilization-bg: rgba(255, 152, 0, 0.15);
    --stabilization-text: #ef6c00;
    --stabilization-active-bg: rgba(230, 126, 34, 0.15);
    --stabilization-total-bg: #fef5e7;
    --stabilization-border: #e67e22;
    --deduction-text: #c62828;

    /* Header Gradients */
    --header-gradient-start: #1b6ec2;
    --header-gradient-end: #1861ac;
    --header-gradient: linear-gradient(135deg, #0078d4 0%, #106ebe 100%);

    /* Month Cell States */
    --has-value-bg: rgba(0, 120, 212, 0.05);
    --past-month-bg: #e9ecef;
    --current-month-bg: #fff3cd;

    /* Buffer Section */
    --buffer-header-bg: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    --buffer-border: #2196f3;
    --buffer-text: #1976d2;
    --buffer-row-bg: #f1f8ff;
    --buffer-row-hover-bg: #e3f2fd;
    --buffer-active-bg: rgba(33, 150, 243, 0.15);
    --buffer-workstream-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --buffer-workstream-hover-bg: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    --total-with-buffer-bg: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);

    /* Fixed Hours Section */
    --fixed-hours-header-bg: linear-gradient(135deg, #e8f4f8 0%, #d4edda 100%);
    --fixed-hours-row-bg: #f0f9ff;
    --fixed-hours-row-hover-bg: #e6f3ff;
    --total-row-bg: #e8f4fd;

    /* Health State Backgrounds */
    --health-complete-bg: rgba(40, 167, 69, 0.15);
    --health-partial-bg: rgba(255, 193, 7, 0.15);
    --health-missing-bg: rgba(220, 53, 69, 0.1);

    /* Progress Gradient */
    --progress-gradient: linear-gradient(90deg, #17a2b8, #28a745);

    /* Dialog Colors */
    --dialog-bg: #ffffff;
    --dialog-backdrop: rgba(0, 0, 0, 0.5);
    --dialog-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
    --dialog-header-primary: linear-gradient(135deg, #0078d4 0%, #106ebe 100%);
    --dialog-header-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --selected-row-highlight: #e7f3ff;
    --will-change-highlight: #e8f5e9;

    /* Popover Colors */
    --popover-positive-text: #2e7d32;
    --popover-negative-text: #c62828;
    --popover-highlight-text: #1b6ec2;
    --popover-applied-text: #2e7d32;
    --popover-balance-text: #e65100;
    --popover-allocation-text: #7b1fa2;
    --popover-stabilization-text: #7b1fa2;
    --popover-winddown-text: #1565c0;

    /* Timeoff Card */
    --timeoff-bg: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    --timeoff-border: #ffe082;
    --timeoff-label: #f57c00;
    --timeoff-value: #e65100;

    /* Conflict Card */
    --conflict-bg: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    --conflict-border: #ffcc80;
    --conflict-header-bg: rgba(255, 152, 0, 0.15);
    --conflict-title: #e65100;
    --conflict-badge-bg: #e65100;
    --conflict-project: #bf360c;
    --conflict-context: #6d4c41;

    /* Applied Hours Cards */
    --applied-card-bg: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    --applied-card-border: #a5d6a7;
    --applied-title: #2e7d32;
    --applied-stab-bg: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    --applied-stab-border: #ce93d8;
    --applied-stab-title: #7b1fa2;
    --applied-winddown-bg: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    --applied-winddown-border: #90caf9;
    --applied-winddown-title: #1565c0;

    /* Fixed Hours Indicator */
    --fixed-indicator-bg: rgba(0, 150, 136, 0.08);
    --fixed-indicator-border: #009688;
    --fixed-indicator-text: #00796b;

    /* Tooltip Colors */
    --tooltip-bg: #2d2d2d;
    --tooltip-border: #444444;
    --tooltip-text: #ffffff;

    /* Timeline/Cell Colors */
    --timeline-cell-border: rgba(0, 0, 0, 0.05);
    --timeline-today-bg: rgba(27, 110, 194, 0.1);
    --selected-row-bg: rgba(27, 110, 194, 0.1);

    /* Nav Rail Colors */
    --nav-bg: #ffffff;
    --nav-border: #e5e5e5;
    --nav-item-hover: rgba(0, 120, 212, 0.06);
    --nav-item-active-bg: rgba(0, 120, 212, 0.1);
    --nav-item-hover-gradient: linear-gradient(90deg, rgba(0, 120, 212, 0.06) 0%, transparent 100%);
    --nav-item-hover-text: #106ebe;
    --nav-active-gradient: linear-gradient(90deg, rgba(0, 120, 212, 0.1) 0%, rgba(0, 120, 212, 0.03) 100%);
    --nav-indicator-gradient: linear-gradient(180deg, transparent 0%, #0078d4 20%, #106ebe 50%, #0078d4 80%, transparent 100%);
    --nav-indicator-glow: 0 0 8px rgba(0, 120, 212, 0.5);
    --nav-indicator-glow-strong: 0 0 12px rgba(0, 120, 212, 0.7);
    --nav-icon-hover-shadow: drop-shadow(0 0 4px rgba(0, 120, 212, 0.3));
    --nav-collapsed-hover: radial-gradient(circle at left, rgba(0, 120, 212, 0.15) 0%, transparent 70%);
    --nav-active-bar-gradient: linear-gradient(180deg, #0078d4 0%, #106ebe 100%);
    --nav-active-bar-glow: 0 0 12px rgba(0, 120, 212, 0.5), 0 0 24px rgba(0, 120, 212, 0.3);
    --nav-active-bar-glow-strong: 0 0 16px rgba(0, 120, 212, 0.7), 0 0 32px rgba(0, 120, 212, 0.4);
    --nav-icon-active-shadow: drop-shadow(0 0 4px rgba(0, 120, 212, 0.4));
    --nav-collapsed-active-glow: 0 0 8px rgba(0, 120, 212, 0.6);

    /* Footer */
    --footer-bg: #f8f9fa;
    --footer-border: #e5e5e5;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography */
    --font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-monospace: 'Courier New', Courier, monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Z-index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* Code Colors */
    --code-color: #c02d76;
    --code-bg: rgba(192, 45, 118, 0.1);
    --pre-bg: #f8f9fa;

    /* Additional Missing Variables - Light Theme */
    /* Badge variants */
    --badge-purple-bg: rgba(139, 92, 246, 0.15);
    --badge-purple-text: #7c3aed;

    /* Border variants */
    --border-color-strong: #adb5bd;
    --border-subtle: rgba(0, 0, 0, 0.05);

    /* Button header */
    --btn-header-bg: rgba(255, 255, 255, 0.2);
    --btn-header-hover-bg: rgba(255, 255, 255, 0.3);

    /* Card shadow */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Danger extended */
    --danger-border: #f5c6cb;
    --danger-gradient: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    --danger-hover: #c82333;

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(27, 110, 194, 0.25);

    /* Frozen column shadow */
    --frozen-col-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);

    /* Hover background */
    --hover-bg: rgba(0, 0, 0, 0.04);

    /* Info extended */
    --info-border: #b8daff;
    --info-color-dark: #0c5460;
    --info-gradient: linear-gradient(135deg, #17a2b8 0%, #138496 100%);

    /* Secondary extended */
    --secondary-gradient: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);

    /* Purple/Indigo gradient (for special actions like forecast) */
    --purple-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --purple-gradient-hover: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
    --shadow-purple: 0 2px 8px rgba(102, 126, 234, 0.4);

    /* Text on dark backgrounds (for warning badges etc) */
    --text-on-dark: #1a1d23;

    /* Header border light (for transparent overlays on headers) */
    --header-border-light: rgba(255, 255, 255, 0.3);
    --header-border-hover: rgba(255, 255, 255, 0.4);
    --header-icon-bg: rgba(255, 255, 255, 0.2);

    /* Hero pattern background (decorative radial patterns) */
    --hero-pattern-bg:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 20px);

    /* Checkbox accent color */
    --checkbox-accent: #ffffff;

    /* Link hover */
    --link-hover-color: #0056b3;

    /* Modal */
    --modal-backdrop: rgba(0, 0, 0, 0.5);
    --modal-overlay: rgba(0, 0, 0, 0.5);

    /* Page header */
    --page-header-gradient: linear-gradient(135deg, #0078d4 0%, #106ebe 100%);

    /* Settings/Admin header gradient */
    --settings-header-gradient: linear-gradient(135deg, #6c757d 0%, #495057 100%);

    /* Login page gradient */
    --login-page-gradient: linear-gradient(135deg, #0078d4 0%, #106ebe 50%, #004578 100%);

    /* Primary extended */
    --primary-bg: rgba(27, 110, 194, 0.1);
    --primary-focus: rgba(27, 110, 194, 0.25);
    --primary-gradient: linear-gradient(135deg, #1b6ec2 0%, #1861ac 100%);
    --primary-gradient-hover: linear-gradient(135deg, #106ebe 0%, #0078d4 100%);
    --shadow-primary: 0 2px 4px rgba(0, 120, 212, 0.3);
    --shadow-primary-lg: 0 6px 16px rgba(0, 120, 212, 0.4);

    /* Row stripe */
    --row-stripe-bg: rgba(0, 0, 0, 0.02);

    /* Section header */
    --section-header-bg: #f1f5f9;

    /* Shadow extra small */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);

    /* Text Shadow (for text on colored backgrounds) */
    --text-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.2);
    --text-shadow-light: 0 0 2px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.6);

    /* Teal/Cyan extended (for fixed hours, special allocations) */
    --teal-color: #009688;
    --teal-gradient: linear-gradient(90deg, #009688, #00897b);
    --teal-bg: rgba(0, 150, 136, 0.1);

    /* Stabilization extended */
    --stabilization-header-bg: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    --stabilization-row-bg: #fffbf0;
    --stabilization-row-hover-bg: #fff8e1;

    /* Status extended */
    --status-ok-bg: rgba(40, 167, 69, 0.15);
    --status-ok-text: #155724;
    --status-over-bg: rgba(220, 53, 69, 0.15);
    --status-over-text: #721c24;
    --status-risk-bg: rgba(255, 193, 7, 0.15);
    --status-risk-text: #856404;
    --status-warning-bg: rgba(255, 193, 7, 0.15);
    --status-warning-text: #856404;

    /* Success extended */
    --success-border: #c3e6cb;
    --success-gradient: linear-gradient(135deg, #28a745 0%, #218838 100%);

    /* Surface secondary */
    --surface-secondary: #f8f9fa;

    /* Table header text */
    --table-header-text: #495057;

    /* Utilization simple labels */
    --utilization-full: #ff9800;
    --utilization-healthy: #4caf50;
    --utilization-over: #f44336;
    --utilization-under: #2196f3;

    /* Utilization bar gradients */
    --utilization-bar-healthy: linear-gradient(90deg, #4caf50 0%, #8bc34a 100%);
    --utilization-bar-over: linear-gradient(90deg, #f44336 0%, #ff7043 100%);
    --utilization-bar-full: linear-gradient(90deg, #ff9800 0%, #ffca28 100%);

    /* Applied value background */
    --applied-value-bg: rgba(255, 255, 255, 0.6);

    /* Variance row */
    --variance-row-bg: rgba(255, 152, 0, 0.05);

    /* Warning extended */
    --warning-border: #ffeeba;
    --warning-gradient: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    --warning-text-dark: #664d03;

    /* ========================================
       GANTT CHART VARIABLES
       ======================================== */

    /* Extension Bar (Overdue forecast) */
    --extension-bar-gradient: linear-gradient(90deg, rgba(239, 68, 68, 0.6) 0%, rgba(185, 28, 28, 0.9) 100%);
    --extension-bar-border: rgba(239, 68, 68, 0.8);
    --extension-bar-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);

    /* Bar Progress and Labels */
    --bar-progress-overlay: rgba(0, 0, 0, 0.15);
    --bar-label-color: rgba(0, 0, 0, 0.7);
    --stripe-pattern-light: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(255, 255, 255, 0.15) 3px, rgba(255, 255, 255, 0.15) 6px);

    /* Pulse Animation */
    --pulse-shadow-strong: rgba(33, 150, 243, 0.4);
    --pulse-shadow-light: rgba(33, 150, 243, 0.2);

    /* Drag Interactions */
    --drag-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --drag-handle-hover: rgba(0, 0, 0, 0.2);

    /* Phase Indicators - Stabilization (Orange) */
    --stabilization-border-color: #e67e22;
    --stabilization-hover-bg: rgba(230, 126, 34, 0.1);
    --stabilization-hover-shadow: 0 2px 8px rgba(230, 126, 34, 0.3);

    /* Phase Indicators - Bug Remediation (Red/Coral) */
    --remediation-border-color: #e74c3c;
    --remediation-gradient: linear-gradient(90deg, rgba(231, 76, 60, 0.15) 0%, rgba(192, 57, 43, 0.2) 100%);
    --remediation-hover-bg: rgba(231, 76, 60, 0.15);
    --remediation-hover-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
    --remediation-stripe-pattern: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(231, 76, 60, 0.1) 4px, rgba(231, 76, 60, 0.1) 8px);
    --remediation-color: #e74c3c;

    /* Phase Indicators - Buffer (Blue) */
    --buffer-gradient: linear-gradient(90deg, rgba(227, 242, 253, 0.9) 0%, rgba(187, 222, 251, 0.9) 100%);
    --buffer-border-color: #2196f3;
    --buffer-border-dark: #1976d2;
    --buffer-hover-shadow: 0 2px 8px rgba(33, 150, 243, 0.5);
    --buffer-stripe-pattern: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(33, 150, 243, 0.1) 4px, rgba(33, 150, 243, 0.1) 8px);

    /* Progress Gradient */
    --progress-gradient: linear-gradient(90deg, #28a745 0%, #20c997 100%);

    /* Month Column Backgrounds */
    --past-month-bg: #e9ecef;
    --current-month-bg: #fff3cd;

    /* Work Item Type Badge Colors - Azure DevOps standard */
    --wi-epic-bg: #ff7b00;
    --wi-feature-bg: #773b93;
    --wi-pbi-bg: #009ccc;
    --wi-bug-bg: #cc293d;
    --wi-task-bg: #f2cb1d;
    --wi-task-text: #333333;

    /* Allocation Bar Colors */
    --allocation-bar-low: #81c784;
    --allocation-bar-medium: #ffb74d;
    --allocation-bar-high: #64b5f6;
    --allocation-bar-over: #e57373;

    /* Source Badge Colors */
    --badge-auto-bg: rgba(33, 150, 243, 0.15);
    --badge-auto-text: #1976d2;
    --badge-manual-bg: rgba(156, 39, 176, 0.15);
    --badge-manual-text: #7b1fa2;

    /* Heatmap Legend Colors */
    --legend-green-bg: rgba(76, 175, 80, 0.2);
    --legend-green-text: #2e7d32;
    --legend-yellow-bg: rgba(255, 193, 7, 0.2);
    --legend-yellow-text: #f57f17;
    --legend-orange-bg: rgba(255, 152, 0, 0.2);
    --legend-orange-text: #e65100;
    --legend-red-bg: rgba(244, 67, 54, 0.2);
    --legend-red-text: #c62828;

    /* Heatmap Cell Backgrounds */
    --heatmap-green-bg: rgba(76, 175, 80, 0.25);
    --heatmap-yellow-bg: rgba(255, 193, 7, 0.25);
    --heatmap-orange-bg: rgba(255, 152, 0, 0.3);
    --heatmap-red-bg: rgba(244, 67, 54, 0.3);
    --heatmap-cell-hover-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);

    /* Project Count & Stacked Project */
    --project-count-bg: rgba(0, 0, 0, 0.1);
    --stacked-project-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

    /* Transition Gradient */
    --transition-gradient-start: #e3f2fd;
    --transition-gradient-end: #fff3e0;
    --transition-text: #5d4037;

    /* Page Header Gradient */
    --page-header-gradient: linear-gradient(135deg, #0078d4 0%, #106ebe 100%);
    --header-icon-bg: rgba(255, 255, 255, 0.2);
    --header-icon-border: rgba(255, 255, 255, 0.3);
    --header-text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    --header-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

    /* Warning Banner (External Sync) */
    --warning-banner-bg: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
    --warning-banner-border: #ffc107;
    --warning-banner-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
    --warning-banner-icon-bg: #ffc107;
    --warning-banner-title: #664d03;
    --warning-banner-text: #856404;
    --warning-banner-note-bg: rgba(255, 255, 255, 0.5);

    /* Sync Action Buttons */
    --btn-sync-gradient: linear-gradient(135deg, #14a114 0%, #107c10 100%);
    --btn-sync-hover: linear-gradient(135deg, #14a114 0%, #107c10 100%);
    --btn-sync-shadow: 0 4px 12px rgba(16, 124, 16, 0.3);
    --btn-sync-hover-shadow: 0 8px 20px rgba(16, 124, 16, 0.4);
    --btn-resume-gradient: linear-gradient(135deg, #ff8c00 0%, #e67300 100%);
    --btn-resume-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
    --btn-cancel-gradient: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);
    --btn-cancel-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    --btn-cancel-pulse-shadow: 0 4px 20px rgba(255, 107, 53, 0.5);
    --btn-7pace-gradient: linear-gradient(135deg, #6b5b95 0%, #5a4d80 100%);
    --btn-7pace-shadow: 0 4px 12px rgba(107, 91, 149, 0.3);
    --btn-clear-gradient: linear-gradient(135deg, #d13438 0%, #a0262a 100%);
    --btn-clear-shadow: 0 4px 12px rgba(209, 52, 56, 0.3);
    --btn-recalculate-gradient: linear-gradient(135deg, #16825d 0%, #107c4e 100%);
    --btn-recalculate-shadow: 0 4px 12px rgba(22, 130, 93, 0.3);
    --btn-monthly-gradient: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);
    --btn-monthly-shadow: 0 3px 10px rgba(63, 81, 181, 0.3);
    --btn-resources-gradient: linear-gradient(135deg, #26a69a 0%, #00897b 100%);
    --btn-resources-shadow: 0 3px 10px rgba(0, 137, 123, 0.3);
    --btn-investigate-gradient: linear-gradient(135deg, #7b1fa2 0%, #6a1b9a 100%);
    --btn-investigate-shadow: 0 3px 10px rgba(106, 27, 154, 0.3);
    --btn-work-items-gradient: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);
    --btn-work-items-shadow: 0 3px 10px rgba(63, 81, 181, 0.3);
    --btn-forecast-gradient: linear-gradient(135deg, #26a69a 0%, #00897b 100%);
    --btn-forecast-shadow: 0 3px 10px rgba(0, 137, 123, 0.3);
    --btn-timesheets-gradient: linear-gradient(135deg, #7b1fa2 0%, #6a1b9a 100%);
    --btn-timesheets-shadow: 0 3px 10px rgba(106, 27, 154, 0.3);
    --btn-cache-gradient: linear-gradient(135deg, #16825d 0%, #107c4e 100%);
    --btn-cache-shadow: 0 4px 12px rgba(22, 130, 93, 0.3);

    /* Loading / Progress Bars */
    --loading-bar-border: rgba(0, 120, 212, 0.2);
    --loading-spinner-color: var(--primary-color);
    --progress-card-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --progress-card-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    --progress-bar-fill: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    --progress-bar-track: rgba(255, 255, 255, 0.2);
    --progress-bar-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    --progress-fill-glow: 0 2px 8px rgba(79, 172, 254, 0.5);

    /* 7pace/Purple Theme */
    --sevenpace-color: #9c27b0;
    --sevenpace-bg: rgba(156, 39, 176, 0.1);
    --sevenpace-text: #7b1fa2;
    --sevenpace-gradient: linear-gradient(90deg, #9c27b0 0%, #ce93d8 100%);

    /* Settings Icon */
    --settings-icon-gradient: linear-gradient(135deg, var(--text-muted) 0%, var(--text-secondary) 100%);
    --settings-icon-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);

    /* Allocation Bar (Teams Timeline) */
    --allocation-bar-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --allocation-bar-hover-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --allocation-bar-border: rgba(0, 0, 0, 0.12);
    --allocation-bar-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%, rgba(0, 0, 0, 0.05) 100%);
    --segment-highlight-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 40%);
    --segment-divider: rgba(255, 255, 255, 0.25);
    --allocation-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 8px rgba(0, 0, 0, 0.2);
    --resize-handle-bg: rgba(255, 255, 255, 0.6);
    --resize-handle-left-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, transparent 100%);
    --resize-handle-right-gradient: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0%, transparent 100%);
    --resize-handle-hover-bg: rgba(255, 255, 255, 0.3);
    --allocation-bar-resizing-shadow: 0 12px 24px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    --priority-badge-bg: rgba(0, 0, 0, 0.35);
    --delay-indicator-shadow: 0 1px 3px rgba(239, 68, 68, 0.4);
    --pulse-border-start: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(239, 68, 68, 0);
    --pulse-border-mid: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 8px 2px rgba(239, 68, 68, 0.3);
    --pulse-border-severe-start: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(220, 38, 38, 0);
    --pulse-border-severe-mid: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 12px 4px rgba(220, 38, 38, 0.4);
    --danger-severe-gradient: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    --color-dot-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ========================================
   DARK THEME
   ======================================== */
[data-theme="dark"] {
    /* Primary Colors - slightly brighter for dark backgrounds */
    --primary-color: #4da3ff;
    --primary-hover: #6eb5ff;
    --primary-rgb: 77, 163, 255;

    /* Secondary Colors */
    --secondary-color: #9ca3af;
    --secondary-hover: #b5bbc5;

    /* Accent Colors */
    --accent-gradient-start: #4da3ff;
    --accent-gradient-end: #6eb5ff;

    /* Background Colors - GitHub dark */
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --bg-dark: #010409;
    --bg-darker: #010409;

    /* Text Colors - GitHub dark (brightened for better readability) */
    --text-primary: #ffffff;
    --text-secondary: #b1bac4;
    --text-muted: #9ca3af;
    --text-light: #8b949e;
    --text-on-primary: #ffffff;
    --text-on-primary-muted: rgba(255, 255, 255, 0.85);

    /* Border Colors - GitHub dark */
    --border-color: #30363d;
    --border-light: rgba(255, 255, 255, 0.08);

    /* Shadow Tokens - more pronounced in dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.7);

    /* Card/Surface Colors - GitHub dark */
    --card-bg: #161b22;
    --card-border: #30363d;
    --card-header-bg: #21262d;

    /* Table Colors - GitHub dark */
    --table-header-bg: #21262d;
    --table-row-hover: rgba(77, 163, 255, 0.08);
    --table-border: #30363d;

    /* Form Colors - GitHub dark */
    --input-bg: #21262d;
    --input-border: #30363d;
    --input-focus-border: #4da3ff;

    /* Status Colors - adjusted for dark mode */
    --success-color: #81c784;
    --success-bg: rgba(129, 199, 132, 0.15);
    --success-text: #81c784;
    --success-rgb: 129, 199, 132;
    --warning-color: #ffb74d;
    --warning-bg: rgba(255, 183, 77, 0.15);
    --warning-text: #ffb74d;
    --warning-rgb: 255, 183, 77;
    --danger-color: #ef5350;
    --danger-bg: rgba(239, 83, 80, 0.15);
    --danger-rgb: 239, 83, 80;
    --danger-text: #ef5350;
    --info-color: #64b5f6;
    --info-bg: rgba(100, 181, 246, 0.15);
    --info-text: #64b5f6;

    /* Button Shadows - Dark */
    --btn-primary-shadow: 0 4px 12px rgba(77, 163, 255, 0.25);
    --btn-primary-hover-shadow: 0 6px 16px rgba(77, 163, 255, 0.35);

    /* Work Item Type Colors - Dark */
    --epic-color: #ffb74d;
    --epic-bg: rgba(255, 152, 0, 0.2);
    --feature-color: #81c784;
    --feature-bg: rgba(129, 199, 132, 0.2);
    --pbi-color: #64b5f6;
    --pbi-bg: rgba(100, 181, 246, 0.2);
    --task-color: #f48fb1;
    --task-bg: rgba(244, 143, 177, 0.2);

    /* Help Box Colors - Dark */
    --info-box-bg: rgba(13, 110, 253, 0.15);
    --warning-box-bg: rgba(255, 193, 7, 0.15);
    --success-box-bg: rgba(25, 135, 84, 0.15);

    /* Report Card Icon Colors - Dark */
    --report-icon-executive-bg: rgba(37, 99, 235, 0.2);
    --report-icon-executive-color: #60a5fa;
    --report-icon-project-bg: rgba(22, 163, 74, 0.2);
    --report-icon-project-color: #4ade80;
    --report-icon-team-bg: rgba(217, 119, 6, 0.2);
    --report-icon-team-color: #fbbf24;
    --report-icon-resource-bg: rgba(147, 51, 234, 0.2);
    --report-icon-resource-color: #c084fc;
    --report-icon-primary-gradient: linear-gradient(135deg, #3b82f6, #2563eb);

    /* Toast Notification Gradients - Dark */
    --toast-success-gradient: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    --toast-error-gradient: linear-gradient(135deg, #f87171 0%, #ef4444 100%);

    /* Progress Bar Gradients - Dark */
    --progress-success-gradient: linear-gradient(90deg, #4ade80 0%, #2dd4bf 100%);

    /* Gantt Highlight Colors - Dark */
    --highlight-dev-bg: rgba(16, 185, 129, 0.15);
    --highlight-qa-bg: rgba(38, 198, 218, 0.15);
    --highlight-projected-bg: rgba(139, 92, 246, 0.15);

    /* Utilization/Capacity States - Dark */
    --utilization-under-bg: rgba(100, 181, 246, 0.15);
    --utilization-under-text: #64b5f6;
    --utilization-healthy-bg: rgba(129, 199, 132, 0.15);
    --utilization-healthy-text: #81c784;
    --utilization-full-bg: rgba(255, 183, 77, 0.2);
    --utilization-full-text: #ffb74d;
    --utilization-over-bg: rgba(239, 83, 80, 0.2);
    --utilization-over-text: #ef5350;

    /* Heatmap Cell Colors - Dark */
    --heatmap-green-bg: rgba(46, 125, 50, 0.3);
    --heatmap-green-text: #81c784;
    --heatmap-yellow-bg: rgba(251, 192, 45, 0.3);
    --heatmap-yellow-text: #ffeb3b;
    --heatmap-orange-bg: rgba(239, 108, 0, 0.3);
    --heatmap-orange-text: #ffb74d;
    --heatmap-red-bg: rgba(198, 40, 40, 0.3);
    --heatmap-red-text: #ef5350;

    /* Legend Item Colors - Dark */
    --legend-green-bg: #1a3d1a;
    --legend-green-text: #81c784;
    --legend-yellow-bg: #3d3d1a;
    --legend-yellow-text: #ffeb3b;
    --legend-orange-bg: #3d2e1a;
    --legend-orange-text: #ffb74d;
    --legend-red-bg: #3d1a1a;
    --legend-red-text: #ef5350;

    /* Status Dot Colors (Gantt) - Dark */
    --status-dot-green: #4caf50;
    --status-dot-yellow: #ff9800;
    --status-dot-red: #f44336;

    /* Calculated Date Colors - Dark */
    --calc-date-dev: #81c784;
    --calc-date-qa: #26c6da;
    --calc-date-projected: #ba68c8;

    /* Badge Variants - Dark */
    --badge-auto-bg: rgba(129, 199, 132, 0.2);
    --badge-auto-text: #81c784;
    --badge-manual-bg: rgba(100, 181, 246, 0.2);
    --badge-manual-text: #64b5f6;
    --badge-qa-bg: rgba(236, 72, 153, 0.2);
    --badge-qa-text: #f472b6;

    /* Health Badges - Dark */
    --health-ok-bg: rgba(129, 199, 132, 0.2);
    --health-ok-text: #81c784;
    --health-risk-bg: rgba(255, 183, 77, 0.2);
    --health-risk-text: #ffb74d;
    --health-over-bg: rgba(239, 83, 80, 0.2);
    --health-over-text: #ef5350;

    /* Status Badge Colors - Dark */
    --status-low-bg: rgba(252, 211, 77, 0.2);
    --status-low-text: #fcd34d;
    --status-medium-bg: rgba(96, 165, 250, 0.2);
    --status-medium-text: #60a5fa;
    --status-good-bg: rgba(52, 211, 153, 0.2);
    --status-good-text: #34d399;
    --status-high-bg: rgba(249, 115, 22, 0.2);
    --status-high-text: #f97316;
    --status-critical-bg: rgba(239, 68, 68, 0.2);
    --status-critical-text: #ef4444;
    --status-unassigned-bg: rgba(107, 114, 128, 0.2);
    --status-unassigned-text: #9ca3af;

    /* Utilization Bar Colors - Dark */
    --utilization-low-bg: #fcd34d;
    --utilization-medium-bg: #60a5fa;
    --utilization-good-bg: #34d399;
    --utilization-high-bg: #f97316;
    --utilization-critical-bg: #ef4444;

    /* Fixed Hours Row States - Dark */
    --fixed-complete-bg: rgba(129, 199, 132, 0.15);
    --fixed-near-complete-bg: rgba(255, 183, 77, 0.15);
    --fixed-info-bg: rgba(23, 162, 184, 0.1);
    --fixed-total-bg: rgba(77, 163, 255, 0.15);

    /* Special States - Dark */
    --transition-gradient-start: rgba(30, 136, 229, 0.3);
    --transition-gradient-end: rgba(46, 125, 50, 0.3);
    --transition-text: #4da3ff;
    --stabilization-bg: rgba(255, 152, 0, 0.2);
    --stabilization-text: #ffb74d;
    --stabilization-active-bg: rgba(230, 126, 34, 0.2);
    --stabilization-total-bg: rgba(230, 126, 34, 0.15);
    --stabilization-border: #f39c12;
    --deduction-text: #ef5350;

    /* Header Gradients - Dark */
    --header-gradient-start: #1565c0;
    --header-gradient-end: #0d47a1;
    --header-gradient: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);

    /* Month Cell States - Dark */
    --has-value-bg: rgba(77, 163, 255, 0.1);
    --past-month-bg: #1c2128;
    --current-month-bg: rgba(255, 183, 77, 0.15);

    /* Buffer Section - Dark */
    --buffer-header-bg: linear-gradient(135deg, rgba(33, 150, 243, 0.2) 0%, rgba(21, 101, 192, 0.2) 100%);
    --buffer-border: #42a5f5;
    --buffer-text: #64b5f6;
    --buffer-row-bg: rgba(33, 150, 243, 0.1);
    --buffer-row-hover-bg: rgba(33, 150, 243, 0.15);
    --buffer-active-bg: rgba(33, 150, 243, 0.2);
    --buffer-workstream-bg: linear-gradient(135deg, #1c2128 0%, #161b22 100%);
    --buffer-workstream-hover-bg: linear-gradient(135deg, #21262d 0%, #1c2128 100%);
    --total-with-buffer-bg: linear-gradient(135deg, rgba(129, 199, 132, 0.2) 0%, rgba(76, 175, 80, 0.15) 100%);

    /* Fixed Hours Section - Dark */
    --fixed-hours-header-bg: linear-gradient(135deg, rgba(23, 162, 184, 0.2) 0%, rgba(40, 167, 69, 0.15) 100%);
    --fixed-hours-row-bg: rgba(23, 162, 184, 0.1);
    --fixed-hours-row-hover-bg: rgba(23, 162, 184, 0.15);
    --total-row-bg: rgba(77, 163, 255, 0.15);

    /* Health State Backgrounds - Dark */
    --health-complete-bg: rgba(129, 199, 132, 0.15);
    --health-partial-bg: rgba(255, 183, 77, 0.15);
    --health-missing-bg: rgba(239, 83, 80, 0.15);

    /* Progress Gradient - Dark */
    --progress-gradient: linear-gradient(90deg, #64b5f6, #81c784);

    /* Dialog Colors - Dark */
    --dialog-bg: var(--bg-secondary);
    --dialog-backdrop: rgba(0, 0, 0, 0.7);
    --dialog-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    --dialog-header-primary: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
    --dialog-header-purple: linear-gradient(135deg, #5568dc 0%, #6a3f98 100%);
    --selected-row-highlight: rgba(77, 163, 255, 0.15);
    --will-change-highlight: rgba(129, 199, 132, 0.15);

    /* Popover Colors - Dark */
    --popover-positive-text: #81c784;
    --popover-negative-text: #ef5350;
    --popover-highlight-text: #4da3ff;
    --popover-applied-text: #81c784;
    --popover-balance-text: #ffb74d;
    --popover-allocation-text: #ba68c8;
    --popover-stabilization-text: #ba68c8;
    --popover-winddown-text: #64b5f6;

    /* Timeoff Card - Dark */
    --timeoff-bg: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 236, 179, 0.1) 100%);
    --timeoff-border: rgba(255, 224, 130, 0.3);
    --timeoff-label: #ffb74d;
    --timeoff-value: #ffcc80;

    /* Conflict Card - Dark */
    --conflict-bg: linear-gradient(135deg, rgba(255, 152, 0, 0.15) 0%, rgba(255, 224, 178, 0.1) 100%);
    --conflict-border: rgba(255, 204, 128, 0.3);
    --conflict-header-bg: rgba(255, 152, 0, 0.15);
    --conflict-title: #ffb74d;
    --conflict-badge-bg: #e65100;
    --conflict-project: #ffcc80;
    --conflict-context: #bcaaa4;

    /* Applied Hours Cards - Dark */
    --applied-card-bg: linear-gradient(135deg, rgba(129, 199, 132, 0.2) 0%, rgba(76, 175, 80, 0.15) 100%);
    --applied-card-border: rgba(165, 214, 167, 0.4);
    --applied-title: #81c784;
    --applied-stab-bg: linear-gradient(135deg, rgba(186, 104, 200, 0.2) 0%, rgba(156, 39, 176, 0.15) 100%);
    --applied-stab-border: rgba(206, 147, 216, 0.4);
    --applied-stab-title: #ba68c8;
    --applied-winddown-bg: linear-gradient(135deg, rgba(100, 181, 246, 0.2) 0%, rgba(33, 150, 243, 0.15) 100%);
    --applied-winddown-border: rgba(144, 202, 249, 0.4);
    --applied-winddown-title: #64b5f6;

    /* Fixed Hours Indicator - Dark */
    --fixed-indicator-bg: rgba(0, 150, 136, 0.15);
    --fixed-indicator-border: #26a69a;
    --fixed-indicator-text: #4db6ac;

    /* Tooltip Colors - Dark (same as light since tooltip is dark by design) */
    --tooltip-bg: #161b22;
    --tooltip-border: #30363d;
    --tooltip-text: #e8eaed;

    /* Timeline/Cell Colors - Dark */
    --timeline-cell-border: rgba(255, 255, 255, 0.05);
    --timeline-today-bg: rgba(77, 163, 255, 0.1);
    --selected-row-bg: rgba(77, 163, 255, 0.15);

    /* Nav Rail Colors */
    --nav-bg: #161b22;
    --nav-border: #30363d;
    --nav-item-hover: rgba(77, 163, 255, 0.1);
    --nav-item-active-bg: rgba(77, 163, 255, 0.15);
    --nav-item-hover-gradient: linear-gradient(90deg, rgba(77, 163, 255, 0.1) 0%, transparent 100%);
    --nav-item-hover-text: #4da3ff;
    --nav-active-gradient: linear-gradient(90deg, rgba(77, 163, 255, 0.15) 0%, rgba(77, 163, 255, 0.05) 100%);
    --nav-indicator-gradient: linear-gradient(180deg, transparent 0%, #4da3ff 20%, #6eb5ff 50%, #4da3ff 80%, transparent 100%);
    --nav-indicator-glow: 0 0 8px rgba(77, 163, 255, 0.5);
    --nav-indicator-glow-strong: 0 0 12px rgba(77, 163, 255, 0.7);
    --nav-icon-hover-shadow: drop-shadow(0 0 4px rgba(77, 163, 255, 0.3));
    --nav-collapsed-hover: radial-gradient(circle at left, rgba(77, 163, 255, 0.15) 0%, transparent 70%);
    --nav-active-bar-gradient: linear-gradient(180deg, var(--primary-color) 0%, #6eb5ff 100%);
    --nav-active-bar-glow: 0 0 12px rgba(77, 163, 255, 0.5), 0 0 24px rgba(77, 163, 255, 0.3);
    --nav-active-bar-glow-strong: 0 0 16px rgba(77, 163, 255, 0.7), 0 0 32px rgba(77, 163, 255, 0.4);
    --nav-icon-active-shadow: drop-shadow(0 0 4px rgba(77, 163, 255, 0.4));
    --nav-collapsed-active-glow: 0 0 8px rgba(77, 163, 255, 0.6);

    /* Footer */
    --footer-bg: #161b22;
    --footer-border: #30363d;

    /* Code Colors */
    --code-color: #f472b6;
    --code-bg: rgba(244, 114, 182, 0.15);
    --pre-bg: #1c2128;

    /* Additional Missing Variables - Dark Theme */
    /* Badge variants */
    --badge-purple-bg: rgba(139, 92, 246, 0.2);
    --badge-purple-text: #a78bfa;

    /* Border variants */
    --border-color-strong: #3d444d;
    --border-subtle: rgba(255, 255, 255, 0.05);

    /* Button header */
    --btn-header-bg: rgba(255, 255, 255, 0.1);
    --btn-header-hover-bg: rgba(255, 255, 255, 0.2);

    /* Card shadow */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

    /* Danger extended */
    --danger-border: rgba(239, 83, 80, 0.3);
    --danger-gradient: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
    --danger-hover: #e53935;

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(77, 163, 255, 0.3);

    /* Frozen column shadow */
    --frozen-col-shadow: 4px 0 8px rgba(0, 0, 0, 0.3);

    /* Header border light (for transparent overlays on headers) */
    --header-border-light: rgba(255, 255, 255, 0.2);
    --header-border-hover: rgba(255, 255, 255, 0.3);
    --header-icon-bg: rgba(255, 255, 255, 0.15);

    /* Hero pattern background (decorative radial patterns) */
    --hero-pattern-bg:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(255, 255, 255, 0.02) 10px, rgba(255, 255, 255, 0.02) 20px);

    /* Checkbox accent color */
    --checkbox-accent: #4da3ff;

    /* Hover background */
    --hover-bg: rgba(255, 255, 255, 0.04);

    /* Info extended */
    --info-border: rgba(100, 181, 246, 0.3);
    --info-color-dark: #64b5f6;
    --info-gradient: linear-gradient(135deg, #4dd0e1 0%, #26c6da 100%);

    /* Secondary extended */
    --secondary-gradient: linear-gradient(135deg, #78909c 0%, #607d8b 100%);

    /* Purple/Indigo gradient (for special actions like forecast) */
    --purple-gradient: linear-gradient(135deg, #7c8af5 0%, #9063c9 100%);
    --purple-gradient-hover: linear-gradient(135deg, #8b99f7 0%, #a074d4 100%);
    --shadow-purple: 0 2px 8px rgba(124, 138, 245, 0.5);

    /* Text on dark backgrounds (for warning badges etc) */
    --text-on-dark: #0d1117;

    /* Link hover */
    --link-hover-color: #6eb5ff;

    /* Modal */
    --modal-backdrop: rgba(0, 0, 0, 0.7);
    --modal-overlay: rgba(0, 0, 0, 0.7);

    /* Page header - gray tone for dark mode */
    --page-header-gradient: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);

    /* Settings/Admin header gradient - same as page header in dark mode */
    --settings-header-gradient: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);

    /* Login page gradient */
    --login-page-gradient: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #0d2137 100%);

    /* Primary extended */
    --primary-bg: rgba(77, 163, 255, 0.15);
    --primary-focus: rgba(77, 163, 255, 0.3);
    --primary-gradient: linear-gradient(135deg, #1b6ec2 0%, #1861ac 100%);
    --primary-gradient-hover: linear-gradient(135deg, #106ebe 0%, #0078d4 100%);
    --shadow-primary: 0 2px 4px rgba(77, 163, 255, 0.4);
    --shadow-primary-lg: 0 6px 16px rgba(77, 163, 255, 0.5);

    /* Row stripe */
    --row-stripe-bg: rgba(255, 255, 255, 0.02);

    /* Section header */
    --section-header-bg: #1c2128;

    /* Shadow extra small */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);

    /* Text Shadow (for text on colored backgrounds) */
    --text-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.3);
    --text-shadow-light: 0 0 2px rgba(255, 255, 255, 0.6), 0 0 4px rgba(255, 255, 255, 0.4);

    /* Teal/Cyan extended (for fixed hours, special allocations) */
    --teal-color: #26a69a;
    --teal-gradient: linear-gradient(90deg, #26a69a, #4db6ac);
    --teal-bg: rgba(38, 166, 154, 0.15);

    /* Stabilization extended */
    --stabilization-header-bg: linear-gradient(135deg, rgba(255, 183, 77, 0.2) 0%, rgba(255, 152, 0, 0.15) 100%);
    --stabilization-row-bg: rgba(255, 152, 0, 0.1);
    --stabilization-row-hover-bg: rgba(255, 152, 0, 0.15);

    /* Status extended */
    --status-ok-bg: rgba(129, 199, 132, 0.2);
    --status-ok-text: #81c784;
    --status-over-bg: rgba(239, 83, 80, 0.2);
    --status-over-text: #ef5350;
    --status-risk-bg: rgba(255, 183, 77, 0.2);
    --status-risk-text: #ffb74d;
    --status-warning-bg: rgba(255, 183, 77, 0.2);
    --status-warning-text: #ffb74d;

    /* Success extended */
    --success-border: rgba(129, 199, 132, 0.3);
    --success-gradient: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);

    /* Surface secondary */
    --surface-secondary: #2a2f38;

    /* Table header text */
    --table-header-text: #e8eaed;

    /* Utilization simple labels */
    --utilization-full: #ffb74d;
    --utilization-healthy: #81c784;
    --utilization-over: #ef5350;
    --utilization-under: #64b5f6;

    /* Utilization bar gradients - brighter for dark theme */
    --utilization-bar-healthy: linear-gradient(90deg, #66bb6a 0%, #aed581 100%);
    --utilization-bar-over: linear-gradient(90deg, #ef5350 0%, #ff8a65 100%);
    --utilization-bar-full: linear-gradient(90deg, #ffb74d 0%, #ffd54f 100%);

    /* Applied value background */
    --applied-value-bg: rgba(255, 255, 255, 0.15);

    /* Variance row */
    --variance-row-bg: rgba(255, 152, 0, 0.1);

    /* Warning extended */
    --warning-border: rgba(255, 183, 77, 0.3);
    --warning-gradient: linear-gradient(135deg, #ffb74d 0%, #ffa726 100%);
    --warning-text-dark: #ffcc80;

    /* ========================================
       GANTT CHART VARIABLES - DARK THEME
       ======================================== */

    /* Extension Bar (Overdue forecast) - darker bg, brighter colors */
    --extension-bar-gradient: linear-gradient(90deg, rgba(239, 68, 68, 0.5) 0%, rgba(185, 28, 28, 0.8) 100%);
    --extension-bar-border: rgba(239, 68, 68, 0.7);
    --extension-bar-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);

    /* Bar Progress and Labels */
    --bar-progress-overlay: rgba(255, 255, 255, 0.15);
    --bar-label-color: rgba(255, 255, 255, 0.85);
    --stripe-pattern-light: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0.1) 6px);

    /* Pulse Animation */
    --pulse-shadow-strong: rgba(77, 163, 255, 0.4);
    --pulse-shadow-light: rgba(77, 163, 255, 0.2);

    /* Drag Interactions */
    --drag-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    --drag-handle-hover: rgba(255, 255, 255, 0.2);

    /* Phase Indicators - Stabilization (Orange) - adjusted for dark */
    --stabilization-border-color: #f39c12;
    --stabilization-hover-bg: rgba(243, 156, 18, 0.15);
    --stabilization-hover-shadow: 0 2px 8px rgba(243, 156, 18, 0.4);

    /* Phase Indicators - Bug Remediation (Red/Coral) - adjusted for dark */
    --remediation-border-color: #ef5350;
    --remediation-gradient: linear-gradient(90deg, rgba(239, 83, 80, 0.25) 0%, rgba(211, 47, 47, 0.3) 100%);
    --remediation-hover-bg: rgba(239, 83, 80, 0.2);
    --remediation-hover-shadow: 0 2px 8px rgba(239, 83, 80, 0.5);
    --remediation-stripe-pattern: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(239, 83, 80, 0.15) 4px, rgba(239, 83, 80, 0.15) 8px);
    --remediation-color: #ef5350;

    /* Phase Indicators - Buffer (Blue) - adjusted for dark */
    --buffer-gradient: linear-gradient(90deg, rgba(33, 150, 243, 0.3) 0%, rgba(25, 118, 210, 0.4) 100%);
    --buffer-border-color: #42a5f5;
    --buffer-border-dark: #1e88e5;
    --buffer-hover-shadow: 0 2px 8px rgba(66, 165, 245, 0.5);
    --buffer-stripe-pattern: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(66, 165, 245, 0.15) 4px, rgba(66, 165, 245, 0.15) 8px);

    /* Progress Gradient */
    --progress-gradient: linear-gradient(90deg, #66bb6a 0%, #26a69a 100%);

    /* Month Column Backgrounds */
    --past-month-bg: #2a2f38;
    --current-month-bg: rgba(255, 183, 77, 0.2);

    /* Work Item Type Badge Colors - slightly brighter for dark theme */
    --wi-epic-bg: #ff8f1f;
    --wi-feature-bg: #9651b8;
    --wi-pbi-bg: #0db4e8;
    --wi-bug-bg: #e53d52;
    --wi-task-bg: #f5d54a;
    --wi-task-text: #1a1d23;

    /* Allocation Bar Colors - brighter for dark theme */
    --allocation-bar-low: #81c784;
    --allocation-bar-medium: #ffb74d;
    --allocation-bar-high: #64b5f6;
    --allocation-bar-over: #ef5350;

    /* Source Badge Colors - darker backgrounds, brighter text */
    --badge-auto-bg: rgba(77, 163, 255, 0.2);
    --badge-auto-text: #64b5f6;
    --badge-manual-bg: rgba(186, 104, 200, 0.2);
    --badge-manual-text: #ce93d8;

    /* Heatmap Legend Colors - adjusted for dark bg */
    --legend-green-bg: rgba(129, 199, 132, 0.25);
    --legend-green-text: #a5d6a7;
    --legend-yellow-bg: rgba(255, 213, 79, 0.25);
    --legend-yellow-text: #ffd54f;
    --legend-orange-bg: rgba(255, 183, 77, 0.25);
    --legend-orange-text: #ffb74d;
    --legend-red-bg: rgba(239, 83, 80, 0.25);
    --legend-red-text: #ef9a9a;

    /* Heatmap Cell Backgrounds - adjusted for dark */
    --heatmap-green-bg: rgba(129, 199, 132, 0.2);
    --heatmap-yellow-bg: rgba(255, 213, 79, 0.2);
    --heatmap-orange-bg: rgba(255, 183, 77, 0.25);
    --heatmap-red-bg: rgba(239, 83, 80, 0.25);
    --heatmap-cell-hover-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);

    /* Project Count & Stacked Project */
    --project-count-bg: rgba(255, 255, 255, 0.15);
    --stacked-project-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

    /* Transition Gradient - dark theme */
    --transition-gradient-start: rgba(66, 165, 245, 0.2);
    --transition-gradient-end: rgba(255, 183, 77, 0.2);
    --transition-text: #e0e0e0;

    /* Page Header Gradient - dark theme (gray tone) */
    --page-header-gradient: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    --header-icon-bg: rgba(255, 255, 255, 0.15);
    --header-icon-border: rgba(255, 255, 255, 0.25);
    --header-text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    --header-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

    /* Warning Banner (External Sync) - dark theme */
    --warning-banner-bg: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 183, 77, 0.1) 100%);
    --warning-banner-border: rgba(255, 193, 7, 0.5);
    --warning-banner-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --warning-banner-icon-bg: #ffc107;
    --warning-banner-title: #ffd54f;
    --warning-banner-text: #ffca28;
    --warning-banner-note-bg: rgba(0, 0, 0, 0.2);

    /* Sync Action Buttons - slightly brighter for dark mode */
    --btn-sync-gradient: linear-gradient(135deg, #4caf50 0%, #43a047 100%);
    --btn-sync-hover: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
    --btn-sync-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    --btn-sync-hover-shadow: 0 8px 20px rgba(76, 175, 80, 0.4);
    --btn-resume-gradient: linear-gradient(135deg, #ffb74d 0%, #ffa726 100%);
    --btn-resume-shadow: 0 4px 12px rgba(255, 183, 77, 0.3);
    --btn-cancel-gradient: linear-gradient(135deg, #ff8a65 0%, #ff7043 100%);
    --btn-cancel-shadow: 0 4px 12px rgba(255, 138, 101, 0.3);
    --btn-cancel-pulse-shadow: 0 4px 20px rgba(255, 138, 101, 0.5);
    --btn-7pace-gradient: linear-gradient(135deg, #9575cd 0%, #7e57c2 100%);
    --btn-7pace-shadow: 0 4px 12px rgba(149, 117, 205, 0.3);
    --btn-clear-gradient: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
    --btn-clear-shadow: 0 4px 12px rgba(239, 83, 80, 0.3);
    --btn-recalculate-gradient: linear-gradient(135deg, #4db6ac 0%, #26a69a 100%);
    --btn-recalculate-shadow: 0 4px 12px rgba(77, 182, 172, 0.3);
    --btn-monthly-gradient: linear-gradient(135deg, #7986cb 0%, #5c6bc0 100%);
    --btn-monthly-shadow: 0 3px 10px rgba(121, 134, 203, 0.3);
    --btn-resources-gradient: linear-gradient(135deg, #4db6ac 0%, #26a69a 100%);
    --btn-resources-shadow: 0 3px 10px rgba(77, 182, 172, 0.3);
    --btn-investigate-gradient: linear-gradient(135deg, #ba68c8 0%, #9c27b0 100%);
    --btn-investigate-shadow: 0 3px 10px rgba(186, 104, 200, 0.3);
    --btn-work-items-gradient: linear-gradient(135deg, #7986cb 0%, #5c6bc0 100%);
    --btn-work-items-shadow: 0 3px 10px rgba(121, 134, 203, 0.3);
    --btn-forecast-gradient: linear-gradient(135deg, #4db6ac 0%, #26a69a 100%);
    --btn-forecast-shadow: 0 3px 10px rgba(77, 182, 172, 0.3);
    --btn-timesheets-gradient: linear-gradient(135deg, #ba68c8 0%, #9c27b0 100%);
    --btn-timesheets-shadow: 0 3px 10px rgba(186, 104, 200, 0.3);
    --btn-cache-gradient: linear-gradient(135deg, #4db6ac 0%, #26a69a 100%);
    --btn-cache-shadow: 0 4px 12px rgba(77, 182, 172, 0.3);

    /* Loading / Progress Bars - dark theme */
    --loading-bar-border: rgba(77, 163, 255, 0.3);
    --loading-spinner-color: var(--primary-color);
    --progress-card-gradient: linear-gradient(135deg, #7c4dff 0%, #9c27b0 100%);
    --progress-card-shadow: 0 8px 24px rgba(124, 77, 255, 0.3);
    --progress-bar-fill: linear-gradient(90deg, #64b5f6 0%, #26c6da 100%);
    --progress-bar-track: rgba(255, 255, 255, 0.15);
    --progress-bar-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    --progress-fill-glow: 0 2px 8px rgba(100, 181, 246, 0.5);

    /* 7pace/Purple Theme - dark variant */
    --sevenpace-color: #ce93d8;
    --sevenpace-bg: rgba(186, 104, 200, 0.15);
    --sevenpace-text: #e1bee7;
    --sevenpace-gradient: linear-gradient(90deg, #ba68c8 0%, #e1bee7 100%);

    /* Settings Icon - dark theme */
    --settings-icon-gradient: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
    --settings-icon-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

    /* Allocation Bar (Teams Timeline) - dark theme */
    --allocation-bar-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --allocation-bar-hover-shadow: 0 8px 16px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --allocation-bar-border: rgba(255, 255, 255, 0.1);
    --allocation-bar-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%, rgba(0, 0, 0, 0.1) 100%);
    --segment-highlight-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%);
    --segment-divider: rgba(255, 255, 255, 0.2);
    --allocation-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.3);
    --resize-handle-bg: rgba(255, 255, 255, 0.5);
    --resize-handle-left-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
    --resize-handle-right-gradient: linear-gradient(270deg, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
    --resize-handle-hover-bg: rgba(255, 255, 255, 0.25);
    --allocation-bar-resizing-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), 0 6px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --priority-badge-bg: rgba(0, 0, 0, 0.5);
    --delay-indicator-shadow: 0 1px 3px rgba(239, 68, 68, 0.5);
    --pulse-border-start: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(239, 68, 68, 0);
    --pulse-border-mid: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 8px 2px rgba(239, 68, 68, 0.4);
    --pulse-border-severe-start: 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(220, 38, 38, 0);
    --pulse-border-severe-mid: 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 12px 4px rgba(220, 38, 38, 0.5);
    --danger-severe-gradient: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    --color-dot-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ========================================
   BASE STYLES
   ======================================== */

html,
body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    overflow: hidden; /* Prevent browser scrollbar - content area scrolls instead */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--font-size-3xl);
}

h2 {
    font-size: var(--font-size-2xl);
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-lg);
}

h5,
h6 {
    font-size: var(--font-size-base);
}

h1:focus {
    outline: none;
}

/* ========================================
   LINKS
   ======================================== */

a,
.btn-link {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover,
.btn-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
    border-radius: var(--radius-md);
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-hover);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: #145a8e;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(var(--primary-rgb), 0.5);
}

/* Button icon vertical alignment - fixes icon centering in all buttons */
.btn i,
.btn .oi {
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Ensure inline-flex buttons center icons properly */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ========================================
   CARDS & PANELS
   ======================================== */

.card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
}

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

.card-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-md) var(--spacing-lg);
    font-weight: var(--font-weight-semibold);
}

.card-body {
    padding: var(--spacing-lg);
}

/* ========================================
   CONTENT CONTAINER
   ======================================== */

.content {
    padding-top: 1.1rem;
}

/* ========================================
   FORMS
   ======================================== */

.form-control {
    border-radius: var(--radius-md);
    border-color: var(--border-color);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-control:focus {
    border-color: var(--primary-color);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
    border-color: #26b050;
}

.invalid {
    outline: 1px solid #dc3545;
    border-color: #dc3545;
}

.validation-message {
    color: #dc3545;
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

/* ========================================
   TABLES
   ======================================== */

.table {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.table thead th {
    background: var(--bg-secondary);
    font-weight: var(--font-weight-semibold);
    border-bottom: 2px solid var(--border-color);
}

.table-hover tbody tr:hover {
    background: rgba(var(--primary-rgb), 0.05);
}

/* ========================================
   ERROR UI
   ======================================== */

#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: var(--shadow-lg);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: var(--z-modal);
    border-top: 3px solid #ffc107;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    font-size: 1.25rem;
    color: var(--text-secondary);
    transition: color var(--transition-base);
}

#blazor-error-ui .dismiss:hover {
    color: var(--text-primary);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem,
        #dc3545;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--radius-md);
    margin: var(--spacing-md);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
    font-weight: var(--font-weight-medium);
}

/* ========================================
   LOADING PROGRESS
   ======================================== */

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--primary-color);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: var(--font-weight-bold);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--text-primary);
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ========================================
   CODE BLOCKS
   ======================================== */

code {
    color: var(--code-color);
    background: var(--code-bg);
    padding: 0.125rem 0.25rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-family-monospace);
    font-size: 0.875em;
}

pre {
    background: var(--pre-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    overflow-x: auto;
}

pre code {
    background: none;
    padding: 0;
}

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

.text-gradient {
    background: linear-gradient(135deg, var(--accent-gradient-start) 0%, var(--accent-gradient-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

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

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

.rounded-modern {
    border-radius: var(--radius-lg) !important;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn var(--transition-slow);
}

.slide-in-up {
    animation: slideInUp var(--transition-slow);
}

.slide-in-down {
    animation: slideInDown var(--transition-slow);
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

@media (max-width: 767.98px) {
    :root {
        --font-size-3xl: 1.5rem;
        --font-size-2xl: 1.25rem;
        --font-size-xl: 1.125rem;
    }

    .card-body {
        padding: var(--spacing-md);
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 3px solid rgba(var(--primary-rgb), 0.5);
    outline-offset: 2px;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .no-print,
    #blazor-error-ui {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }

    .card {
        page-break-inside: avoid;
    }
}

/* ========================================
   DARK THEME FORM OVERRIDES
   ======================================== */

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--input-focus-border);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.1rem var(--bg-primary), 0 0 0 0.25rem rgba(var(--primary-rgb), 0.5);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled {
    background-color: var(--bg-tertiary);
    color: var(--text-muted);
}

/* Dark theme for form labels */
[data-theme="dark"] .form-label {
    color: var(--text-secondary);
}

/* Dark theme for Blazor error UI */
[data-theme="dark"] #blazor-error-ui {
    background: rgba(251, 191, 36, 0.15);
    border-top-color: #ffc107;
    color: var(--text-primary);
}

/* Dark theme for loading progress */
[data-theme="dark"] .loading-progress circle {
    stroke: var(--bg-tertiary);
}

/* Consistent thin scrollbar styling for both themes */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}

/* Mobile: even thinner scrollbars */
@media (max-width: 767.98px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

/* Dark theme for form check inputs */
[data-theme="dark"] .form-check-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

[data-theme="dark"] .form-check-label {
    color: var(--text-primary);
}

/* ========================================
   DARK THEME FOR BOOTSTRAP ALERTS
   ======================================== */

[data-theme="dark"] .alert {
    color: var(--text-primary);
    border-width: 1px;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(13, 202, 240, 0.15);
    border-color: rgba(13, 202, 240, 0.4);
    color: #6edff6;
}

[data-theme="dark"] .alert-info strong,
[data-theme="dark"] .alert-info h4,
[data-theme="dark"] .alert-info h5 {
    color: #6edff6;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: rgba(25, 135, 84, 0.4);
    color: #75b798;
}

[data-theme="dark"] .alert-success strong,
[data-theme="dark"] .alert-success h4,
[data-theme="dark"] .alert-success h5 {
    color: #75b798;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
    color: #ea868f;
}

[data-theme="dark"] .alert-danger strong,
[data-theme="dark"] .alert-danger h4,
[data-theme="dark"] .alert-danger h5 {
    color: #ea868f;
}

[data-theme="dark"] .alert-danger code {
    background-color: rgba(220, 53, 69, 0.2);
    color: #f1aeb5;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffda6a;
}

[data-theme="dark"] .alert-warning strong,
[data-theme="dark"] .alert-warning h4,
[data-theme="dark"] .alert-warning h5 {
    color: #ffda6a;
}

/* ========================================
   DARK THEME FOR BOOTSTRAP CARDS
   ======================================== */

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

[data-theme="dark"] .card-header {
    background-color: var(--card-header-bg);
    border-bottom-color: var(--card-border);
    color: var(--text-primary);
}

[data-theme="dark"] .card-header h5,
[data-theme="dark"] .card-header h6 {
    color: var(--text-primary);
}

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

[data-theme="dark"] .card-body h6 {
    color: var(--text-primary);
}

/* ========================================
   DARK THEME FOR BOOTSTRAP TABLES
   ======================================== */

[data-theme="dark"] .table {
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .table th {
    color: var(--text-secondary);
}

[data-theme="dark"] .table-sm th,
[data-theme="dark"] .table-sm td {
    padding: 0.5rem;
}

/* ========================================
   DARK THEME FOR TEXT UTILITIES
   ======================================== */

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

[data-theme="dark"] code {
    background-color: var(--code-bg);
    color: var(--code-color);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}