/**
 * EAS Station - Base Styles
 * Core CSS variables, typography, and fundamental styles
 */

/* ============================================
   CSS VARIABLES (Light & Dark Theme)
   ============================================ */

/* Cosmo Theme (Default Light Theme) */
:root,
[data-theme="cosmo"] {
    /* Primary Brand Colors */
    --primary-color: #204885; /* Aegean Blue */
    --primary-soft: #2f5fa4;
    --secondary-color: #872a96; /* Plum Crazy */
    --secondary-soft: #9d5bb1;
    --accent-color: #4f6fb3;

    /* Status Colors */
    --success-color: #2eb08d;
    --danger-color: #e05263;
    --warning-color: #f6b968;
    --info-color: #2f5aa1;
    --critical-color: #ff4f8b;

    /* Background Colors */
    --light-color: #f4f5fb;
    --dark-color: #19263a;
    --bg-color: #e8ecf7;
    --surface-color: #ffffff;
    --bg-card: #ffffff;
    --bg-primary: #19263a;

    /* Text Colors */
    --text-color: #1c2233;
    --text-secondary: #5a6c8f;
    --text-muted: #8892a6;

    /* Borders & Shadows */
    --border-color: #ced7ea;
    --shadow-color: rgba(32, 72, 133, 0.12);
    --shadow: rgba(32, 72, 133, 0.12);

    /* Semantic Aliases */
    --accent-primary: #4f6fb3;
    --accent-secondary: #872a96;
    --info: #2f5aa1;
    --success: #2eb08d;
    --warning: #f6b968;
    --danger: #e05263;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Spacing Scale */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2.25rem;

    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.3s ease-in-out;

    /* Logo Treatment */
    --logo-backdrop: rgba(255, 255, 255, 0.96);
    --logo-border-color: rgba(32, 72, 133, 0.22);
    --logo-shadow: 0 12px 28px rgba(20, 33, 55, 0.35);
    --logo-padding: 0.25rem 0.65rem;
    --logo-radius: 14px;

    /* Layout Spacing */
    --layout-padding-top: 1.5rem;
    --layout-padding-x: 1.5rem;
    --layout-padding-bottom: 2.5rem;
    --footer-margin-top: 60px;
}

/* Dark Theme - Enhanced for Better Readability */
[data-theme="dark"] {
    /* Primary Brand Colors - Brighter and more vibrant */
    --primary-color: #6b96ff;
    --primary-soft: #5580d8;
    --secondary-color: #c9a8ff;
    --secondary-soft: #d5b5ff;
    --accent-color: #a8c6ff;

    /* Status Colors - Enhanced contrast */
    --success-color: #67ffd6;
    --danger-color: #ffafbf;
    --warning-color: #ffe3ad;
    --info-color: #adcfff;
    --critical-color: #ffb0d4;

    /* Background Colors - Lifted for better contrast */
    --light-color: #455169;
    --dark-color: #161d2b;
    --bg-color: #1b2434;
    --surface-color: #243046;
    --bg-card: #243046;
    --bg-primary: #161d2b;

    /* Text Colors - Maximum readability with high contrast */
    --text-color: #ffffff;
    --text-secondary: #dbe4f8;
    --text-muted: #acbad8;

    /* Borders & Shadows */
    --border-color: #40516c;
    --shadow-color: rgba(8, 11, 19, 0.55);
    --shadow: rgba(8, 11, 19, 0.55);

    /* Semantic Aliases */
    --accent-primary: #a8c6ff;
    --accent-secondary: #d5b5ff;
    --info: #adcfff;
    --success: #67ffd6;
    --warning: #ffe3ad;
    --danger: #ffafbf;

    /* Branding */
    --logo-backdrop: rgba(255, 255, 255, 0.95);
    --logo-border-color: rgba(173, 207, 255, 0.45);
    --logo-shadow: 0 14px 32px rgba(5, 9, 16, 0.55);
}

/* Coffee Theme - Warm coffee-inspired dark theme */
[data-theme="coffee"] {
    --primary-color: #e2b37f;
    --primary-soft: #d5a674;
    --secondary-color: #c7a06e;
    --secondary-soft: #d1aa78;
    --accent-color: #edc999;
    --success-color: #9cda7a;
    --danger-color: #ff9da0;
    --warning-color: #ffd886;
    --info-color: #8bd1ff;
    --critical-color: #ff7f7f;
    --light-color: #5b4333;
    --dark-color: #281c12;
    --bg-color: #32261c;
    --surface-color: #403024;
    --bg-card: #403024;
    --bg-primary: #281c12;
    --text-color: #fff9f2;
    --text-secondary: #f4e6d0;
    --text-muted: #d9c2a5;
    --border-color: #6a5240;
    --shadow-color: rgba(10, 7, 4, 0.6);
    --shadow: rgba(10, 7, 4, 0.6);
    --accent-primary: #edc999;
    --accent-secondary: #d1aa78;
    --info: #8bd1ff;
    --success: #9cda7a;
    --warning: #ffd886;
    --danger: #ff9da0;

    /* Branding */
    --logo-backdrop: rgba(255, 245, 232, 0.94);
    --logo-border-color: rgba(210, 170, 120, 0.4);
    --logo-shadow: 0 12px 30px rgba(23, 15, 8, 0.55);
}

/* Spring Theme - Fresh spring-inspired light theme */
[data-theme="spring"] {
    --primary-color: #43a047;
    --primary-soft: #66bb6a;
    --secondary-color: #8bc34a;
    --secondary-soft: #9ccc65;
    --accent-color: #7cb342;
    --success-color: #4caf50;
    --danger-color: #ef5350;
    --warning-color: #ffa726;
    --info-color: #29b6f6;
    --critical-color: #e53935;
    --light-color: #f1f8e9;
    --dark-color: #33691e;
    --bg-color: #f9fbe7;
    --surface-color: #ffffff;
    --bg-card: #ffffff;
    --bg-primary: #33691e;
    --text-color: #1b5e20;
    --text-secondary: #558b2f;
    --text-muted: #7cb342;
    --border-color: #c5e1a5;
    --shadow-color: rgba(67, 160, 71, 0.12);
    --shadow: rgba(67, 160, 71, 0.12);
    --accent-primary: #7cb342;
    --accent-secondary: #9ccc65;
    --info: #29b6f6;
    --success: #4caf50;
    --warning: #ffa726;
    --danger: #ef5350;

    /* Branding */
    --logo-backdrop: rgba(255, 255, 255, 0.96);
    --logo-border-color: rgba(67, 160, 71, 0.22);
    --logo-shadow: 0 12px 28px rgba(51, 105, 30, 0.35);
    --logo-padding: 0.25rem 0.65rem;
    --logo-radius: 14px;
}

/* Red Theme - Bold red accent theme */
[data-theme="red"] {
    --primary-color: #c62828;
    --primary-soft: #d32f2f;
    --secondary-color: #e53935;
    --secondary-soft: #ef5350;
    --accent-color: #f44336;
    --success-color: #66bb6a;
    --danger-color: #d32f2f;
    --warning-color: #ffa726;
    --info-color: #42a5f5;
    --critical-color: #b71c1c;
    --light-color: #ffebee;
    --dark-color: #b71c1c;
    --bg-color: #fce4ec;
    --surface-color: #ffffff;
    --bg-card: #ffffff;
    --bg-primary: #b71c1c;
    --text-color: #1a1a1a;
    --text-secondary: #5f5f5f;
    --text-muted: #9e9e9e;
    --border-color: #ffcdd2;
    --shadow-color: rgba(198, 40, 40, 0.12);
    --shadow: rgba(198, 40, 40, 0.12);
    --accent-primary: #f44336;
    --accent-secondary: #ef5350;
    --info: #42a5f5;
    --success: #66bb6a;
    --warning: #ffa726;
    --danger: #d32f2f;

    /* Branding */
    --logo-backdrop: rgba(255, 255, 255, 0.96);
    --logo-border-color: rgba(198, 40, 40, 0.22);
    --logo-shadow: 0 12px 28px rgba(183, 28, 28, 0.35);
    --logo-padding: 0.25rem 0.65rem;
    --logo-radius: 14px;
}

/* Green Theme - Nature-inspired green theme */
[data-theme="green"] {
    --primary-color: #2e7d32;
    --primary-soft: #388e3c;
    --secondary-color: #43a047;
    --secondary-soft: #66bb6a;
    --accent-color: #4caf50;
    --success-color: #66bb6a;
    --danger-color: #ef5350;
    --warning-color: #ffa726;
    --info-color: #29b6f6;
    --critical-color: #e53935;
    --light-color: #e8f5e9;
    --dark-color: #1b5e20;
    --bg-color: #f1f8e9;
    --surface-color: #ffffff;
    --bg-card: #ffffff;
    --bg-primary: #1b5e20;
    --text-color: #1b5e20;
    --text-secondary: #388e3c;
    --text-muted: #66bb6a;
    --border-color: #c8e6c9;
    --shadow-color: rgba(46, 125, 50, 0.12);
    --shadow: rgba(46, 125, 50, 0.12);
    --accent-primary: #4caf50;
    --accent-secondary: #66bb6a;
    --info: #29b6f6;
    --success: #66bb6a;
    --warning: #ffa726;
    --danger: #ef5350;

    /* Branding */
    --logo-backdrop: rgba(255, 255, 255, 0.96);
    --logo-border-color: rgba(46, 125, 50, 0.22);
    --logo-shadow: 0 12px 28px rgba(27, 94, 32, 0.35);
    --logo-padding: 0.25rem 0.65rem;
    --logo-radius: 14px;
}

/* Blue Theme - Ocean blue theme */
[data-theme="blue"] {
    --primary-color: #1565c0;
    --primary-soft: #1976d2;
    --secondary-color: #1e88e5;
    --secondary-soft: #42a5f5;
    --accent-color: #2196f3;
    --success-color: #66bb6a;
    --danger-color: #ef5350;
    --warning-color: #ffa726;
    --info-color: #42a5f5;
    --critical-color: #e53935;
    --light-color: #e3f2fd;
    --dark-color: #0d47a1;
    --bg-color: #e1f5fe;
    --surface-color: #ffffff;
    --bg-card: #ffffff;
    --bg-primary: #0d47a1;
    --text-color: #0d47a1;
    --text-secondary: #1976d2;
    --text-muted: #64b5f6;
    --border-color: #bbdefb;
    --shadow-color: rgba(21, 101, 192, 0.12);
    --shadow: rgba(21, 101, 192, 0.12);
    --accent-primary: #2196f3;
    --accent-secondary: #42a5f5;
    --info: #42a5f5;
    --success: #66bb6a;
    --warning: #ffa726;
    --danger: #ef5350;

    /* Branding */
    --logo-backdrop: rgba(255, 255, 255, 0.96);
    --logo-border-color: rgba(21, 101, 192, 0.22);
    --logo-shadow: 0 12px 28px rgba(13, 71, 161, 0.35);
    --logo-padding: 0.25rem 0.65rem;
    --logo-radius: 14px;
}

/* Purple Theme - Royal purple theme */
[data-theme="purple"] {
    --primary-color: #6a1b9a;
    --primary-soft: #7b1fa2;
    --secondary-color: #8e24aa;
    --secondary-soft: #ab47bc;
    --accent-color: #9c27b0;
    --success-color: #66bb6a;
    --danger-color: #ef5350;
    --warning-color: #ffa726;
    --info-color: #42a5f5;
    --critical-color: #e53935;
    --light-color: #f3e5f5;
    --dark-color: #4a148c;
    --bg-color: #f3e5f5;
    --surface-color: #ffffff;
    --bg-card: #ffffff;
    --bg-primary: #4a148c;
    --text-color: #4a148c;
    --text-secondary: #7b1fa2;
    --text-muted: #ba68c8;
    --border-color: #e1bee7;
    --shadow-color: rgba(106, 27, 154, 0.12);
    --shadow: rgba(106, 27, 154, 0.12);
    --accent-primary: #9c27b0;
    --accent-secondary: #ab47bc;
    --info: #42a5f5;
    --success: #66bb6a;
    --warning: #ffa726;
    --danger: #ef5350;

    /* Branding */
    --logo-backdrop: rgba(255, 255, 255, 0.96);
    --logo-border-color: rgba(106, 27, 154, 0.22);
    --logo-shadow: 0 12px 28px rgba(74, 20, 140, 0.35);
    --logo-padding: 0.25rem 0.65rem;
    --logo-radius: 14px;
}

/* Pink Theme - Soft pink theme */
[data-theme="pink"] {
    --primary-color: #c2185b;
    --primary-soft: #d81b60;
    --secondary-color: #e91e63;
    --secondary-soft: #f06292;
    --accent-color: #ec407a;
    --success-color: #66bb6a;
    --danger-color: #ef5350;
    --warning-color: #ffa726;
    --info-color: #42a5f5;
    --critical-color: #e53935;
    --light-color: #fce4ec;
    --dark-color: #880e4f;
    --bg-color: #fce4ec;
    --surface-color: #ffffff;
    --bg-card: #ffffff;
    --bg-primary: #880e4f;
    --text-color: #880e4f;
    --text-secondary: #c2185b;
    --text-muted: #f06292;
    --border-color: #f8bbd0;
    --shadow-color: rgba(194, 24, 91, 0.12);
    --shadow: rgba(194, 24, 91, 0.12);
    --accent-primary: #ec407a;
    --accent-secondary: #f06292;
    --info: #42a5f5;
    --success: #66bb6a;
    --warning: #ffa726;
    --danger: #ef5350;

    /* Branding */
    --logo-backdrop: rgba(255, 255, 255, 0.96);
    --logo-border-color: rgba(194, 24, 91, 0.22);
    --logo-shadow: 0 12px 28px rgba(136, 14, 79, 0.35);
    --logo-padding: 0.25rem 0.65rem;
    --logo-radius: 14px;
}

/* Orange Theme - Energetic orange theme */
[data-theme="orange"] {
    --primary-color: #e65100;
    --primary-soft: #f57c00;
    --secondary-color: #fb8c00;
    --secondary-soft: #ffa726;
    --accent-color: #ff9800;
    --success-color: #66bb6a;
    --danger-color: #ef5350;
    --warning-color: #ffa726;
    --info-color: #42a5f5;
    --critical-color: #e53935;
    --light-color: #fff3e0;
    --dark-color: #e65100;
    --bg-color: #fff8e1;
    --surface-color: #ffffff;
    --bg-card: #ffffff;
    --bg-primary: #e65100;
    --text-color: #e65100;
    --text-secondary: #f57c00;
    --text-muted: #ffb74d;
    --border-color: #ffe0b2;
    --shadow-color: rgba(230, 81, 0, 0.12);
    --shadow: rgba(230, 81, 0, 0.12);
    --accent-primary: #ff9800;
    --accent-secondary: #ffa726;
    --info: #42a5f5;
    --success: #66bb6a;
    --warning: #ffa726;
    --danger: #ef5350;

    /* Branding */
    --logo-backdrop: rgba(255, 255, 255, 0.96);
    --logo-border-color: rgba(230, 81, 0, 0.22);
    --logo-shadow: 0 12px 28px rgba(230, 81, 0, 0.35);
    --logo-padding: 0.25rem 0.65rem;
    --logo-radius: 14px;
}

/* Yellow Theme - Bright yellow theme */
[data-theme="yellow"] {
    --primary-color: #f57f17;
    --primary-soft: #f9a825;
    --secondary-color: #fbc02d;
    --secondary-soft: #fdd835;
    --accent-color: #ffeb3b;
    --success-color: #66bb6a;
    --danger-color: #ef5350;
    --warning-color: #ffa726;
    --info-color: #42a5f5;
    --critical-color: #e53935;
    --light-color: #fffde7;
    --dark-color: #f57f17;
    --bg-color: #fffde7;
    --surface-color: #ffffff;
    --bg-card: #ffffff;
    --bg-primary: #f57f17;
    --text-color: #f57f17;
    --text-secondary: #f9a825;
    --text-muted: #fdd835;
    --border-color: #fff9c4;
    --shadow-color: rgba(245, 127, 23, 0.12);
    --shadow: rgba(245, 127, 23, 0.12);
    --accent-primary: #ffeb3b;
    --accent-secondary: #fdd835;
    --info: #42a5f5;
    --success: #66bb6a;
    --warning: #ffa726;
    --danger: #ef5350;

    /* Branding */
    --logo-backdrop: rgba(255, 255, 255, 0.96);
    --logo-border-color: rgba(245, 127, 23, 0.22);
    --logo-shadow: 0 12px 28px rgba(245, 127, 23, 0.35);
    --logo-padding: 0.25rem 0.65rem;
    --logo-radius: 14px;
}

/* Aurora Theme - Polar lights inspired dark theme */
[data-theme="aurora"] {
    --primary-color: #32c7c2;
    --primary-soft: #3bd5cf;
    --secondary-color: #8a5ddc;
    --secondary-soft: #9f75f0;
    --accent-color: #6ff0ff;
    --success-color: #6df7c5;
    --danger-color: #ff8fa2;
    --warning-color: #ffd27a;
    --info-color: #7bbdff;
    --critical-color: #ff7fa1;
    --light-color: #3a4f65;
    --dark-color: #0a1726;
    --bg-color: #0f1c2d;
    --surface-color: #182537;
    --bg-card: #182537;
    --bg-primary: #0a1726;
    --text-color: #f4f8ff;
    --text-secondary: #c5ddff;
    --text-muted: #8ea6c7;
    --border-color: #264768;
    --shadow-color: rgba(6, 17, 31, 0.55);
    --shadow: rgba(6, 17, 31, 0.55);
    --accent-primary: #6ff0ff;
    --accent-secondary: #9f75f0;
    --info: #7bbdff;
    --success: #6df7c5;
    --warning: #ffd27a;
    --danger: #ff8fa2;

    /* Branding */
    --logo-backdrop: rgba(255, 255, 255, 0.92);
    --logo-border-color: rgba(123, 189, 255, 0.48);
    --logo-shadow: 0 16px 36px rgba(5, 14, 29, 0.6);
}

/* Nebula Theme - Deep space magenta & cyan dark theme */
[data-theme="nebula"] {
    --primary-color: #ff6ac1;
    --primary-soft: #ff82cb;
    --secondary-color: #5e7bff;
    --secondary-soft: #7a95ff;
    --accent-color: #8ef0ff;
    --success-color: #71f9b8;
    --danger-color: #ff7f9d;
    --warning-color: #ffd47a;
    --info-color: #7ab7ff;
    --critical-color: #ff5d9d;
    --light-color: #46385a;
    --dark-color: #140621;
    --bg-color: #19082b;
    --surface-color: #221036;
    --bg-card: #221036;
    --bg-primary: #140621;
    --text-color: #fdf7ff;
    --text-secondary: #d7c6ff;
    --text-muted: #a990d6;
    --border-color: #3b2b55;
    --shadow-color: rgba(12, 3, 23, 0.6);
    --shadow: rgba(12, 3, 23, 0.6);
    --accent-primary: #8ef0ff;
    --accent-secondary: #7a95ff;
    --info: #7ab7ff;
    --success: #71f9b8;
    --warning: #ffd47a;
    --danger: #ff7f9d;

    /* Branding */
    --logo-backdrop: rgba(255, 255, 255, 0.9);
    --logo-border-color: rgba(122, 149, 255, 0.55);
    --logo-shadow: 0 18px 40px rgba(10, 2, 22, 0.6);
}

/* Sunset Theme - Golden hour inspired light theme */
[data-theme="sunset"] {
    --primary-color: #ff7849;
    --primary-soft: #ff8a5f;
    --secondary-color: #ffb347;
    --secondary-soft: #ffc76b;
    --accent-color: #ff9e5a;
    --success-color: #6fd7a3;
    --danger-color: #ff6b7f;
    --warning-color: #ffd166;
    --info-color: #6ec8ff;
    --critical-color: #ff4f6f;
    --light-color: #fff1e6;
    --dark-color: #7a341a;
    --bg-color: #fff5eb;
    --surface-color: #ffffff;
    --bg-card: #ffffff;
    --bg-primary: #7a341a;
    --text-color: #7a341a;
    --text-secondary: #d47447;
    --text-muted: #ffab76;
    --border-color: #ffd9c2;
    --shadow-color: rgba(255, 120, 73, 0.18);
    --shadow: rgba(255, 120, 73, 0.18);
    --accent-primary: #ff9e5a;
    --accent-secondary: #ffc76b;
    --info: #6ec8ff;
    --success: #6fd7a3;
    --warning: #ffd166;
    --danger: #ff6b7f;

    /* Branding */
    --logo-backdrop: rgba(255, 255, 255, 0.96);
    --logo-border-color: rgba(255, 153, 102, 0.38);
    --logo-shadow: 0 12px 26px rgba(122, 52, 26, 0.28);
}

/* Midnight Theme - Deep slate with neon telemetry accents */
[data-theme="midnight"] {
    --primary-color: #0f172a;
    --primary-soft: #1e293b;
    --secondary-color: #0ea5e9;
    --secondary-soft: #38bdf8;
    --accent-color: #f4a261;
    --success-color: #34d399;
    --danger-color: #f87171;
    --warning-color: #fbbf24;
    --info-color: #60a5fa;
    --critical-color: #fb7185;
    --light-color: #1e293b;
    --dark-color: #020817;
    --bg-color: #030712;
    --surface-color: #0f172a;
    --bg-card: #111c32;
    --bg-primary: #020817;
    --text-color: #f8fafc;
    --text-secondary: #cbd5f5;
    --text-muted: #94a3b8;
    --border-color: rgba(148, 163, 184, 0.35);
    --shadow-color: rgba(2, 8, 23, 0.65);
    --shadow: rgba(2, 8, 23, 0.65);
    --accent-primary: #f4a261;
    --accent-secondary: #38bdf8;
    --info: #60a5fa;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;

    /* Branding */
    --logo-backdrop: rgba(15, 23, 42, 0.95);
    --logo-border-color: rgba(96, 165, 250, 0.45);
    --logo-shadow: 0 18px 40px rgba(2, 8, 23, 0.7);
}

/* Tide Theme - Crisp coastal light palette */
[data-theme="tide"] {
    --primary-color: #0284c7;
    --primary-soft: #7dd3fc;
    --secondary-color: #0f766e;
    --secondary-soft: #5eead4;
    --accent-color: #eab308;
    --success-color: #22c55e;
    --danger-color: #f97316;
    --warning-color: #facc15;
    --info-color: #0ea5e9;
    --critical-color: #fb7185;
    --light-color: #f0f9ff;
    --dark-color: #0f172a;
    --bg-color: #f5fbff;
    --surface-color: #ffffff;
    --bg-card: #ffffff;
    --bg-primary: #0f172a;
    --text-color: #0f172a;
    --text-secondary: #155e75;
    --text-muted: #4b5563;
    --border-color: #dbeafe;
    --shadow-color: rgba(2, 132, 199, 0.12);
    --shadow: rgba(2, 132, 199, 0.12);
    --accent-primary: #eab308;
    --accent-secondary: #0f766e;
    --info: #0ea5e9;
    --success: #22c55e;
    --warning: #facc15;
    --danger: #f97316;

    /* Branding */
    --logo-backdrop: rgba(255, 255, 255, 0.98);
    --logo-border-color: rgba(2, 132, 199, 0.22);
    --logo-shadow: 0 10px 24px rgba(2, 132, 199, 0.15);
}

/* ============================================
   BOOTSTRAP VARIABLE BRIDGE
   ============================================ */

:root {
    --bs-body-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --bs-body-font-size: 0.95rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--text-color);
    --bs-body-bg: var(--bg-color);
    --bs-heading-color: var(--text-color);
    --bs-secondary-color: var(--text-secondary);
    --bs-secondary-bg: var(--surface-color);
    --bs-border-color: var(--border-color);
    --bs-link-color: var(--primary-color);
    --bs-link-hover-color: var(--accent-color);
    --bs-card-bg: var(--surface-color);
    --bs-card-color: var(--text-color);
    --bs-card-border-color: var(--border-color);
    --bs-card-cap-bg: var(--surface-color);
    --bs-card-cap-color: var(--text-secondary);
    --bs-dropdown-bg: var(--surface-color);
    --bs-dropdown-color: var(--text-color);
    --bs-dropdown-border-color: var(--border-color);
    --bs-dropdown-link-color: var(--text-color);
    --bs-dropdown-link-hover-color: var(--accent-color);
    --bs-modal-bg: var(--surface-color);
    --bs-modal-color: var(--text-color);
    --bs-modal-border-color: var(--border-color);
    --bs-popover-bg: var(--surface-color);
    --bs-popover-border-color: var(--border-color);
    --bs-list-group-bg: var(--surface-color);
    --bs-list-group-color: var(--text-color);
    --bs-table-bg: var(--surface-color);
    --bs-table-color: var(--text-color);
    --bs-table-border-color: var(--border-color);
    --bs-form-control-bg: var(--surface-color);
    --bs-form-control-color: var(--text-color);
    --bs-form-control-border-color: var(--border-color);
    --bs-form-control-placeholder-color: var(--text-muted);
    --bs-form-select-bg: var(--surface-color);
    --bs-form-select-color: var(--text-color);
    --bs-form-select-border-color: var(--border-color);
}

/* ============================================
   BASE TYPOGRAPHY & LAYOUT
   ============================================ */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    background-color: var(--bg-color);
    color: var(--text-color);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--transition-medium), color var(--transition-medium);
}

[data-theme-mode="dark"] body {
    color: var(--text-color, var(--color-text-primary, #f5f8ff));
    background-color: var(--bg-color, #141b29);
}

[data-theme-mode="dark"] a {
    color: var(--accent-color, var(--color-info, #60a5fa));
}

[data-theme-mode="dark"] a:hover,
[data-theme-mode="dark"] a:focus {
    color: var(--color-text-primary, #ffffff);
}

main {
    padding: var(--layout-padding-top) var(--layout-padding-x) var(--layout-padding-bottom);
}

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

a {
    color: var(--primary-color);
    transition: color var(--transition-fast);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--accent-color);
}

/* ============================================
   CARDS
   ============================================ */

.card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 0.125rem 0.25rem var(--shadow-color);
    color: var(--text-color);
    transition: background-color var(--transition-medium), color var(--transition-medium);
}

.card .card-title,
.card .card-text {
    color: inherit;
}

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

.form-label,
.form-check-label {
    color: var(--text-secondary);
}

.form-text,
.form-check-label .text-muted {
    color: var(--text-muted);
}

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

.table {
    background-color: var(--surface-color);
    color: var(--text-color);
}

.table th {
    background: linear-gradient(120deg, var(--primary-soft), var(--secondary-soft));
    border-top: none;
    color: #fff;
}

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

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

/* ============================================
   MAP STYLING
   ============================================ */

.map-container {
    position: relative;
    z-index: 1;
}

.leaflet-container {
    background: var(--light-color);
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.toast-container {
    position: fixed;
    top: 88px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-end;
    width: min(360px, calc(100vw - 40px));
    z-index: 9999;
}

.toast-container .toast {
    width: 100%;
    max-width: 360px;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);
    word-wrap: break-word;
}

.toast-container .toast .toast-body {
    word-break: break-word;
}

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

@media print {
    .navbar, .theme-toggle-button, .footer {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 576px) {
    main {
        padding: calc(var(--layout-padding-top) + 0.5rem) 1rem var(--layout-padding-bottom);
    }
}

/* ============================================
   THEME SELECTOR MODAL
   ============================================ */

.theme-card {
    transition: all var(--transition-fast);
}

.theme-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.5rem var(--shadow-color);
}

.theme-card.border-primary {
    border-width: 2px;
}

/* Modal content uses theme colors */
.modal-content {
    background-color: var(--surface-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

.modal-header,
.modal-footer {
    border-color: var(--border-color);
}

.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .btn-theme-toggle {
        top: 60px;
        right: 10px;
        width: 40px;
        height: 40px;
    }
}

/* ============================================
   BOOTSTRAP THEME OVERRIDES FOR DARK MODE
   Fix white cards on dark themes and text visibility
   ============================================ */

/* Override Bootstrap's hardcoded background colors to use theme variables */
[data-theme-mode="dark"] .bg-white,
[data-theme-mode="dark"] .card,
[data-theme-mode="dark"] .bg-light {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
}

[data-theme-mode="dark"] .card-header.bg-light,
[data-theme-mode="dark"] .card-footer.bg-light {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme-mode="dark"] .card-header.bg-dark {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--text-color) !important;
}

/* Ensure text colors are appropriate for dark mode */
[data-theme-mode="dark"] .text-dark {
    color: var(--text-color) !important;
}

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

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

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

/* Fix table backgrounds in dark mode */
[data-theme-mode="dark"] .table {
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme-mode="dark"] .table thead th {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme-mode="dark"] .table tbody tr {
    border-color: var(--border-color);
}

[data-theme-mode="dark"] .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Fix badge text visibility on colored backgrounds */
[data-theme-mode="dark"] .badge.bg-warning,
[data-theme-mode="dark"] .bg-warning {
    background-color: var(--warning-color) !important;
}

[data-theme-mode="dark"] .badge.bg-warning.text-dark,
[data-theme-mode="dark"] .bg-warning .text-dark,
[data-theme-mode="dark"] .bg-warning.text-dark {
    color: #1a1a1a !important;
}

[data-theme-mode="dark"] .badge.bg-info,
[data-theme-mode="dark"] .bg-info {
    background-color: var(--info-color) !important;
}

[data-theme-mode="dark"] .badge.bg-info.text-dark,
[data-theme-mode="dark"] .bg-info .text-dark,
[data-theme-mode="dark"] .bg-info.text-dark {
    color: #1a1a1a !important;
}

[data-theme-mode="dark"] .badge.bg-success {
    background-color: var(--success-color) !important;
}

[data-theme-mode="dark"] .badge.bg-danger {
    background-color: var(--danger-color) !important;
}

/* Fix subtle background variants */
[data-theme-mode="dark"] .bg-light-subtle {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-color) !important;
}

[data-theme-mode="dark"] .bg-dark-subtle {
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: var(--text-color) !important;
}

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

/* Fix list groups */
[data-theme-mode="dark"] .list-group-item {
    background-color: var(--surface-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme-mode="dark"] .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Fix dropdown menus */
[data-theme-mode="dark"] .dropdown-menu {
    background-color: var(--surface-color);
    border-color: var(--border-color);
}

[data-theme-mode="dark"] .dropdown-item {
    color: var(--text-color);
}

[data-theme-mode="dark"] .dropdown-item:hover,
[data-theme-mode="dark"] .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--accent-color);
}

/* Fix form controls */
[data-theme-mode="dark"] .form-control,
[data-theme-mode="dark"] .form-select {
    background-color: var(--surface-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme-mode="dark"] .form-control:focus,
[data-theme-mode="dark"] .form-select:focus {
    background-color: var(--surface-color);
    color: var(--text-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(107, 150, 255, 0.25);
}

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

[data-theme-mode="dark"] .form-control[readonly],
[data-theme-mode="dark"] .form-control:disabled {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
}

/* Fix input groups */
[data-theme-mode="dark"] .input-group-text {
    background-color: var(--surface-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* Fix modals */
[data-theme-mode="dark"] .modal-content {
    background-color: var(--surface-color);
    color: var(--text-color);
}

[data-theme-mode="dark"] .modal-header,
[data-theme-mode="dark"] .modal-footer {
    border-color: var(--border-color);
}

/* Fix modal headers with bg-warning */
[data-theme-mode="dark"] .modal-header.bg-warning {
    background-color: var(--warning-color) !important;
}

[data-theme-mode="dark"] .modal-header.bg-warning .text-dark {
    color: #1a1a1a !important;
}

/* Fix accordions */
[data-theme-mode="dark"] .accordion-item {
    background-color: var(--surface-color);
    border-color: var(--border-color);
}

[data-theme-mode="dark"] .accordion-button {
    background-color: var(--surface-color);
    color: var(--text-color);
}

[data-theme-mode="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--accent-color);
}

/* Fix nav tabs */
[data-theme-mode="dark"] .nav-tabs {
    border-color: var(--border-color);
}

[data-theme-mode="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
}

[data-theme-mode="dark"] .nav-tabs .nav-link:hover,
[data-theme-mode="dark"] .nav-tabs .nav-link:focus {
    color: var(--accent-color);
    border-color: var(--border-color);
}

[data-theme-mode="dark"] .nav-tabs .nav-link.active {
    background-color: var(--surface-color);
    color: var(--accent-color);
    border-color: var(--border-color) var(--border-color) var(--surface-color);
}

/* Fix alerts */
[data-theme-mode="dark"] .alert {
    border-color: var(--border-color);
}

[data-theme-mode="dark"] .alert-warning {
    background-color: rgba(255, 227, 173, 0.15);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

[data-theme-mode="dark"] .alert-info {
    background-color: rgba(173, 207, 255, 0.15);
    border-color: var(--info-color);
    color: var(--info-color);
}

[data-theme-mode="dark"] .alert-success {
    background-color: rgba(103, 255, 214, 0.15);
    border-color: var(--success-color);
    color: var(--success-color);
}

[data-theme-mode="dark"] .alert-danger {
    background-color: rgba(255, 175, 191, 0.15);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

/* Fix breadcrumbs */
[data-theme-mode="dark"] .breadcrumb {
    background-color: transparent;
}

[data-theme-mode="dark"] .breadcrumb-item {
    color: var(--text-secondary);
}

[data-theme-mode="dark"] .breadcrumb-item.active {
    color: var(--text-color);
}

[data-theme-mode="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

/* Fix pagination */
[data-theme-mode="dark"] .page-link {
    background-color: var(--surface-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme-mode="dark"] .page-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--accent-color);
    border-color: var(--border-color);
}

[data-theme-mode="dark"] .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

[data-theme-mode="dark"] .page-item.disabled .page-link {
    background-color: var(--surface-color);
    color: var(--text-muted);
    border-color: var(--border-color);
}

/* Fix progress bars */
[data-theme-mode="dark"] .progress {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Fix offcanvas */
[data-theme-mode="dark"] .offcanvas {
    background-color: var(--surface-color);
    color: var(--text-color);
}

[data-theme-mode="dark"] .offcanvas-header {
    border-bottom: 1px solid var(--border-color);
}

/* Fix tooltips and popovers */
[data-theme-mode="dark"] .tooltip-inner {
    background-color: var(--bg-primary);
    color: var(--text-color);
}

[data-theme-mode="dark"] .popover {
    background-color: var(--surface-color);
    border-color: var(--border-color);
}

[data-theme-mode="dark"] .popover-header {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

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

/* ============================================
   INDIVIDUAL DARK THEME OVERRIDES
   Apply same fixes to all dark theme variants
   ============================================ */

/* Dark Theme Specific */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .card,
[data-theme="dark"] .bg-light,
[data-theme="coffee"] .bg-white,
[data-theme="coffee"] .card,
[data-theme="coffee"] .bg-light,
[data-theme="aurora"] .bg-white,
[data-theme="aurora"] .card,
[data-theme="aurora"] .bg-light,
[data-theme="nebula"] .bg-white,
[data-theme="nebula"] .card,
[data-theme="nebula"] .bg-light {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
}

/* Text color fixes for all dark themes */
[data-theme="dark"] .text-dark,
[data-theme="coffee"] .text-dark,
[data-theme="aurora"] .text-dark,
[data-theme="nebula"] .text-dark {
    color: var(--text-color) !important;
}

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

[data-theme="dark"] .text-secondary,
[data-theme="coffee"] .text-secondary,
[data-theme="aurora"] .text-secondary,
[data-theme="nebula"] .text-secondary {
    color: var(--text-secondary) !important;
}

/* Form controls for all dark themes */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="coffee"] .form-control,
[data-theme="coffee"] .form-select,
[data-theme="aurora"] .form-control,
[data-theme="aurora"] .form-select,
[data-theme="nebula"] .form-control,
[data-theme="nebula"] .form-select {
    background-color: var(--surface-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

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

/* Modal fixes for all dark themes */
[data-theme="dark"] .modal-content,
[data-theme="coffee"] .modal-content,
[data-theme="aurora"] .modal-content,
[data-theme="nebula"] .modal-content {
    background-color: var(--surface-color);
    color: var(--text-color);
}

/* Dropdown fixes for all dark themes */
[data-theme="dark"] .dropdown-menu,
[data-theme="coffee"] .dropdown-menu,
[data-theme="aurora"] .dropdown-menu,
[data-theme="nebula"] .dropdown-menu {
    background-color: var(--surface-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item,
[data-theme="coffee"] .dropdown-item,
[data-theme="aurora"] .dropdown-item,
[data-theme="nebula"] .dropdown-item {
    color: var(--text-color);
}

/* List group fixes for all dark themes */
[data-theme="dark"] .list-group-item,
[data-theme="coffee"] .list-group-item,
[data-theme="aurora"] .list-group-item,
[data-theme="nebula"] .list-group-item {
    background-color: var(--surface-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* Table fixes for all dark themes */
[data-theme="dark"] .table,
[data-theme="coffee"] .table,
[data-theme="aurora"] .table,
[data-theme="nebula"] .table {
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .table thead th,
[data-theme="coffee"] .table thead th,
[data-theme="aurora"] .table thead th,
[data-theme="nebula"] .table thead th {
    color: var(--text-color);
}

/* Badge fixes for all dark themes with proper contrast */
[data-theme="dark"] .badge.bg-warning.text-dark,
[data-theme="dark"] .bg-warning.text-dark,
[data-theme="coffee"] .badge.bg-warning.text-dark,
[data-theme="coffee"] .bg-warning.text-dark,
[data-theme="aurora"] .badge.bg-warning.text-dark,
[data-theme="aurora"] .bg-warning.text-dark,
[data-theme="nebula"] .badge.bg-warning.text-dark,
[data-theme="nebula"] .bg-warning.text-dark {
    color: #1a1a1a !important;
}

[data-theme="dark"] .badge.bg-info.text-dark,
[data-theme="dark"] .bg-info.text-dark,
[data-theme="coffee"] .badge.bg-info.text-dark,
[data-theme="coffee"] .bg-info.text-dark,
[data-theme="aurora"] .badge.bg-info.text-dark,
[data-theme="aurora"] .bg-info.text-dark,
[data-theme="nebula"] .badge.bg-info.text-dark,
[data-theme="nebula"] .bg-info.text-dark {
    color: #1a1a1a !important;
}

/* Subtle background fixes for all dark themes */
[data-theme="dark"] .bg-dark-subtle,
[data-theme="coffee"] .bg-dark-subtle,
[data-theme="aurora"] .bg-dark-subtle,
[data-theme="nebula"] .bg-dark-subtle {
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .bg-dark-subtle .text-dark,
[data-theme="coffee"] .bg-dark-subtle .text-dark,
[data-theme="aurora"] .bg-dark-subtle .text-dark,
[data-theme="nebula"] .bg-dark-subtle .text-dark {
    color: var(--text-color) !important;
}

/* ============================================
   ALERT DETAIL PAGE FIXES
   Fix hardcoded backgrounds and text colors
   ============================================ */

/* Alert detail page specific elements */
[data-theme-mode="dark"] .affected-summary,
[data-theme-mode="dark"] .alert-description,
[data-theme-mode="dark"] .timing-card,
[data-theme-mode="dark"] .technical-details,
[data-theme-mode="dark"] .raw-data-container {
    background-color: var(--surface-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme-mode="dark"] .boundary-type-header {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme-mode="dark"] .timing-label,
[data-theme-mode="dark"] .detail-label {
    color: var(--text-secondary) !important;
}

[data-theme-mode="dark"] .timing-value {
    color: var(--primary-color) !important;
}

[data-theme-mode="dark"] .raw-data-content {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

[data-theme-mode="dark"] .boundary-item-simple {
    border-color: var(--border-color) !important;
}

[data-theme-mode="dark"] .boundary-item-simple:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

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

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

[data-theme-mode="dark"] .alert-instruction h6 {
    color: var(--warning-color) !important;
}

[data-theme-mode="dark"] .popup-title {
    color: var(--primary-color) !important;
}

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

/* Apply to individual dark themes as well */
[data-theme="dark"] .affected-summary,
[data-theme="dark"] .alert-description,
[data-theme="dark"] .timing-card,
[data-theme="dark"] .technical-details,
[data-theme="dark"] .raw-data-container,
[data-theme="coffee"] .affected-summary,
[data-theme="coffee"] .alert-description,
[data-theme="coffee"] .timing-card,
[data-theme="coffee"] .technical-details,
[data-theme="coffee"] .raw-data-container,
[data-theme="aurora"] .affected-summary,
[data-theme="aurora"] .alert-description,
[data-theme="aurora"] .timing-card,
[data-theme="aurora"] .technical-details,
[data-theme="aurora"] .raw-data-container,
[data-theme="nebula"] .affected-summary,
[data-theme="nebula"] .alert-description,
[data-theme="nebula"] .timing-card,
[data-theme="nebula"] .technical-details,
[data-theme="nebula"] .raw-data-container {
    background-color: var(--surface-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .boundary-type-header,
[data-theme="coffee"] .boundary-type-header,
[data-theme="aurora"] .boundary-type-header,
[data-theme="nebula"] .boundary-type-header {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .timing-label,
[data-theme="dark"] .detail-label,
[data-theme="coffee"] .timing-label,
[data-theme="coffee"] .detail-label,
[data-theme="aurora"] .timing-label,
[data-theme="aurora"] .detail-label,
[data-theme="nebula"] .timing-label,
[data-theme="nebula"] .detail-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .raw-data-content,
[data-theme="coffee"] .raw-data-content,
[data-theme="aurora"] .raw-data-content,
[data-theme="nebula"] .raw-data-content {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .boundary-item-simple,
[data-theme="coffee"] .boundary-item-simple,
[data-theme="aurora"] .boundary-item-simple,
[data-theme="nebula"] .boundary-item-simple {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .alert-content,
[data-theme="coffee"] .alert-content,
[data-theme="aurora"] .alert-content,
[data-theme="nebula"] .alert-content {
    color: var(--text-color) !important;
}

/* ============================================
   ADDITIONAL PAGE-SPECIFIC FIXES
   Fix hardcoded colors across all templates
   ============================================ */

/* Status badges and indicators */
[data-theme-mode="dark"] .status-idle {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-color) !important;
}

/* Documentation and content viewers */
[data-theme-mode="dark"] .doc-content,
[data-theme-mode="dark"] .doc-sidebar,
[data-theme-mode="dark"] .doc-header {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
}

[data-theme-mode="dark"] .doc-nav-link {
    color: var(--text-secondary) !important;
}

[data-theme-mode="dark"] .doc-nav-link:hover {
    color: var(--accent-color) !important;
}

/* Audio monitoring and health dashboards */
[data-theme-mode="dark"] .health-card,
[data-theme-mode="dark"] .test-result-card,
[data-theme-mode="dark"] .audio-source-card {
    background-color: var(--surface-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Admin panel specific */
[data-theme-mode="dark"] .operation-card,
[data-theme-mode="dark"] .rbac-card,
[data-theme-mode="dark"] .audit-log-entry {
    background-color: var(--surface-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Logs and diagnostics */
[data-theme-mode="dark"] .log-entry,
[data-theme-mode="dark"] .diagnostic-panel {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
}

/* Map containers with inline styles */
[data-theme-mode="dark"] #map {
    background-color: var(--surface-color) !important;
}

/* Analytics and stats */
[data-theme-mode="dark"] .stat-card,
[data-theme-mode="dark"] .analytics-panel {
    background-color: var(--surface-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* LED control and similar interfaces */
[data-theme-mode="dark"] .control-panel,
[data-theme-mode="dark"] .settings-panel {
    background-color: var(--surface-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Generic container classes with hardcoded backgrounds */
[data-theme-mode="dark"] .content-container,
[data-theme-mode="dark"] .data-container,
[data-theme-mode="dark"] .info-panel {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
}

/* Fix small text and labels */
[data-theme-mode="dark"] small,
[data-theme-mode="dark"] .small {
    color: var(--text-muted) !important;
}

/* Fix code blocks */
[data-theme-mode="dark"] code {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--accent-color) !important;
}

[data-theme-mode="dark"] pre {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme-mode="dark"] pre code {
    background-color: transparent !important;
    color: var(--text-color) !important;
}

/* Fix headers in sections */
[data-theme-mode="dark"] h1,
[data-theme-mode="dark"] h2,
[data-theme-mode="dark"] h3,
[data-theme-mode="dark"] h4,
[data-theme-mode="dark"] h5,
[data-theme-mode="dark"] h6 {
    color: var(--text-color) !important;
}

/* Fix paragraphs and general text */
[data-theme-mode="dark"] p {
    color: var(--text-color) !important;
}

/* Fix strong and bold text */
[data-theme-mode="dark"] strong,
[data-theme-mode="dark"] b {
    color: var(--text-color) !important;
}

/* Apply to individual themes */
[data-theme="dark"] .status-idle,
[data-theme="coffee"] .status-idle,
[data-theme="aurora"] .status-idle,
[data-theme="nebula"] .status-idle {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] #map,
[data-theme="coffee"] #map,
[data-theme="aurora"] #map,
[data-theme="nebula"] #map {
    background-color: var(--surface-color) !important;
}

[data-theme="dark"] code,
[data-theme="coffee"] code,
[data-theme="aurora"] code,
[data-theme="nebula"] code {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--accent-color) !important;
}

[data-theme="dark"] pre,
[data-theme="coffee"] pre,
[data-theme="aurora"] pre,
[data-theme="nebula"] pre {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] pre code,
[data-theme="coffee"] pre code,
[data-theme="aurora"] pre code,
[data-theme="nebula"] pre code {
    background-color: transparent !important;
    color: var(--text-color) !important;
}

/* ============================================
   FILE INPUT BUTTON FIXES
   Fix "Choose File" buttons in dark themes
   ============================================ */

/* File input controls */
[data-theme-mode="dark"] input[type="file"],
[data-theme-mode="dark"] .form-control[type="file"] {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* File selector button (modern browsers) */
[data-theme-mode="dark"] input[type="file"]::file-selector-button,
[data-theme-mode="dark"] .form-control[type="file"]::file-selector-button {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary-color) !important;
    padding: 0.375rem 0.75rem !important;
    margin-right: 0.75rem !important;
    border-radius: 0.375rem !important;
    cursor: pointer !important;
}

[data-theme-mode="dark"] input[type="file"]::file-selector-button:hover,
[data-theme-mode="dark"] .form-control[type="file"]::file-selector-button:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Webkit file upload button (Safari/Chrome fallback) */
[data-theme-mode="dark"] input[type="file"]::-webkit-file-upload-button,
[data-theme-mode="dark"] .form-control[type="file"]::-webkit-file-upload-button {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary-color) !important;
    padding: 0.375rem 0.75rem !important;
    margin-right: 0.75rem !important;
    border-radius: 0.375rem !important;
    cursor: pointer !important;
}

[data-theme-mode="dark"] input[type="file"]::-webkit-file-upload-button:hover,
[data-theme-mode="dark"] .form-control[type="file"]::-webkit-file-upload-button:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Apply to individual dark themes */
[data-theme="dark"] input[type="file"],
[data-theme="dark"] .form-control[type="file"],
[data-theme="coffee"] input[type="file"],
[data-theme="coffee"] .form-control[type="file"],
[data-theme="aurora"] input[type="file"],
[data-theme="aurora"] .form-control[type="file"],
[data-theme="nebula"] input[type="file"],
[data-theme="nebula"] .form-control[type="file"] {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] input[type="file"]::file-selector-button,
[data-theme="dark"] .form-control[type="file"]::file-selector-button,
[data-theme="coffee"] input[type="file"]::file-selector-button,
[data-theme="coffee"] .form-control[type="file"]::file-selector-button,
[data-theme="aurora"] input[type="file"]::file-selector-button,
[data-theme="aurora"] .form-control[type="file"]::file-selector-button,
[data-theme="nebula"] input[type="file"]::file-selector-button,
[data-theme="nebula"] .form-control[type="file"]::file-selector-button {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary-color) !important;
}

[data-theme="dark"] input[type="file"]::file-selector-button:hover,
[data-theme="dark"] .form-control[type="file"]::file-selector-button:hover,
[data-theme="coffee"] input[type="file"]::file-selector-button:hover,
[data-theme="coffee"] .form-control[type="file"]::file-selector-button:hover,
[data-theme="aurora"] input[type="file"]::file-selector-button:hover,
[data-theme="aurora"] .form-control[type="file"]::file-selector-button:hover,
[data-theme="nebula"] input[type="file"]::file-selector-button:hover,
[data-theme="nebula"] .form-control[type="file"]::file-selector-button:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

[data-theme="dark"] input[type="file"]::-webkit-file-upload-button,
[data-theme="dark"] .form-control[type="file"]::-webkit-file-upload-button,
[data-theme="coffee"] input[type="file"]::-webkit-file-upload-button,
[data-theme="coffee"] .form-control[type="file"]::-webkit-file-upload-button,
[data-theme="aurora"] input[type="file"]::-webkit-file-upload-button,
[data-theme="aurora"] .form-control[type="file"]::-webkit-file-upload-button,
[data-theme="nebula"] input[type="file"]::-webkit-file-upload-button,
[data-theme="nebula"] .form-control[type="file"]::-webkit-file-upload-button {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary-color) !important;
}

[data-theme="dark"] input[type="file"]::-webkit-file-upload-button:hover,
[data-theme="dark"] .form-control[type="file"]::-webkit-file-upload-button:hover,
[data-theme="coffee"] input[type="file"]::-webkit-file-upload-button:hover,
[data-theme="coffee"] .form-control[type="file"]::-webkit-file-upload-button:hover,
[data-theme="aurora"] input[type="file"]::-webkit-file-upload-button:hover,
[data-theme="aurora"] .form-control[type="file"]::-webkit-file-upload-button:hover,
[data-theme="nebula"] input[type="file"]::-webkit-file-upload-button:hover,
[data-theme="nebula"] .form-control[type="file"]::-webkit-file-upload-button:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Help Page Enhancements */
.quick-links-card {
    background: linear-gradient(135deg, rgba(32, 72, 133, 0.05), rgba(135, 42, 150, 0.05));
}

.help-quick-link {
    display: flex;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    align-items: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    background-color: var(--bg-card);
}

.help-quick-link:hover,
.help-quick-link:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    text-decoration: none;
}

.help-quick-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.operations-flow-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.08));
    border-left: 4px solid var(--primary-color);
}

.operations-flow li {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--border-color);
}

.operations-flow li:last-child {
    border-bottom: none;
}

.flow-step {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-resource-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    background-color: var(--bg-card);
    height: 100%;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.help-resource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
}

.help-resource-logo {
    width: 130px;
    height: auto;
    filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.18));
}

@media (max-width: 767.98px) {
    .help-quick-link {
        flex-direction: row;
    }

    .operations-flow-card {
        border-left-width: 2px;
    }
}