/* ============================================
   SkyLog – Pilot Flight Tracker
   Premium Dark Mode Design System v2
   ============================================ */

/* === CSS Variables / Design Tokens === */
:root {
    /* Canvas: Extremely dark slate with a subtle violet undertone */
    --bg-app: #090514;               /* Very deep purple-black */
    --bg-surface: #120e1f;           /* Dark violet-slate card surface */
    --bg-surface-elevated: #1a1528;  /* Elevated inner tiles */
    
    /* Borders: Muted violet-slate */
    --border-subtle: #2a2438;        
    --border-focus: #8b5cf6;         /* Violet-500 */

    /* Accents: Subtle Lilac & Aviation Blue */
    --color-accent-lilac: #8b5cf6;     /* Primary accent for UI elements, limits, and icons */
    --color-accent-blue: #60a5fa;      /* Blue-400 for critical PF values and flight times */
    --color-accent-subtle: rgba(139, 92, 246, 0.15); 
    
    /* Secondary Roles */
    --color-role-pf: #60a5fa;          /* Retain blue for PF */
    --color-role-pm: #d1d5db;          /* Soft light grey/white for PM */

    /* Typography */
    --text-heading: #f3f4f6;           /* Gray-100 */
    --text-body: #9ca3af;              /* Gray-400 */
    --text-muted: #6b7280;             /* Gray-500 */

    /* Integration Mappings (Midnight Slate & Subtle Lilac Default) */
    --color-accent: #8b5cf6;
    --color-accent-hover: #7c3aed;
    --theme-accent: #8b5cf6;
    --theme-accent-subtle: rgba(139, 92, 246, 0.15);
    --theme-accent-border: #8b5cf6;
    --theme-surface: #120e1f;
    --theme-surface-border: #2a2438;
    --theme-base: #090514;
    --theme-highlight: #60a5fa;
    --color-gold: #8b5cf6;
    --color-gold-hover: #a78bfa;
    --color-gold-subtle: rgba(139, 92, 246, 0.15);
    --text-primary: #60a5fa;
    --text-white: #f3f4f6;
    --text-secondary: #9ca3af;
    --bg-primary: #090514;
    --bg-secondary: #120e1f;
    --bg-card: #120e1f;
    --bg-card-hover: #1a1528;
    --bg-elevated: #1a1528;
    --bg-input: #090514;
    --border-color: #2a2438;
    --border-active: #8b5cf6;
}

/* Midnight Slate & Subtle Lilac Theme Class */
body.theme-midnight-lilac, [data-theme="theme-midnight-lilac"] {
    --bg-app: #090514;
    --bg-surface: #120e1f;
    --bg-surface-elevated: #1a1528;
    --border-subtle: #2a2438;
    --border-focus: #8b5cf6;
    --color-accent-lilac: #8b5cf6;
    --color-accent-blue: #60a5fa;
    --color-accent-subtle: rgba(139, 92, 246, 0.15);
    --color-role-pf: #60a5fa;
    --color-role-pm: #d1d5db;
    --text-heading: #f3f4f6;
    --text-body: #9ca3af;
    --text-muted: #6b7280;
    --color-accent: #8b5cf6;
    --color-accent-hover: #7c3aed;
    --theme-accent: #8b5cf6;
    --theme-accent-subtle: rgba(139, 92, 246, 0.15);
    --theme-accent-border: #8b5cf6;
    --theme-surface: #120e1f;
    --theme-surface-border: #2a2438;
    --theme-base: #090514;
    --theme-highlight: #60a5fa;
    --bg-primary: #090514;
    --bg-secondary: #120e1f;
    --bg-card: #120e1f;
    --bg-card-hover: #1a1528;
    --bg-elevated: #1a1528;
    --bg-input: #090514;
    --border-color: #2a2438;
    --border-active: #8b5cf6;
}

/* Modern Clean Deep Slate Theme Class */
body.theme-deep-slate, [data-theme="theme-deep-slate"] {
    --bg-app: #0b1120;
    --bg-surface: #111827;
    --bg-surface-elevated: #1f2937;
    --border-subtle: #1f2937;
    --border-focus: #38bdf8;
    --color-accent: #38bdf8;
    --color-accent-hover: #0ea5e9;
    --color-accent-subtle: rgba(56, 189, 248, 0.15);
    --color-role-pf: #38bdf8;
    --color-role-pm: #9ca3af;
    --text-heading: #f9fafb;
    --text-body: #9ca3af;
    --text-muted: #6b7280;
    --theme-accent: #38bdf8;
    --theme-accent-subtle: rgba(56, 189, 248, 0.15);
    --theme-accent-border: #38bdf8;
    --theme-surface: #111827;
    --theme-surface-border: #1f2937;
    --theme-base: #0b1120;
    --theme-highlight: #0ea5e9;
    --bg-primary: #0b1120;
    --bg-secondary: #111827;
    --bg-card: #111827;
    --bg-card-hover: #1f2937;
    --bg-elevated: #1f2937;
    --bg-input: #0b1120;
    --border-color: #1f2937;
    --border-active: #38bdf8;
}

/* Frosted Daylight Sky Theme Class */
body.theme-daylight-sky, [data-theme="theme-daylight-sky"] {
    --bg-app: #38bdf8;
    --bg-image: url('/path/to/bright-sky-liquid-bg.jpg');
    --bg-surface: rgba(255, 255, 255, 0.45);
    --bg-surface-elevated: rgba(255, 255, 255, 0.6);
    --backdrop-blur: blur(24px);
    --border-subtle: rgba(255, 255, 255, 0.5);
    --border-focus: #0f172a;
    --color-accent: #0f172a;
    --color-accent-hover: #1e293b;
    --color-accent-subtle: rgba(15, 23, 42, 0.1);
    --color-role-pf: #0f172a;
    --color-role-pm: #334155;
    --progress-fill: #0ea5e9;
    --progress-track: rgba(255,255,255, 0.7);
    --text-heading: #0f172a;
    --text-body: #1e293b;
    --text-muted: #475569;
    --theme-accent: #0f172a;
    --theme-accent-subtle: rgba(15, 23, 42, 0.1);
    --theme-accent-border: #0f172a;
    --theme-surface: rgba(255, 255, 255, 0.45);
    --theme-surface-border: rgba(255, 255, 255, 0.5);
    --theme-base: #38bdf8;
    --theme-highlight: #0ea5e9;
    --bg-primary: #38bdf8;
    --bg-secondary: rgba(255, 255, 255, 0.45);
    --bg-card: rgba(255, 255, 255, 0.45);
    --bg-card-hover: rgba(255, 255, 255, 0.6);
    --bg-elevated: rgba(255, 255, 255, 0.6);
    --bg-input: rgba(255, 255, 255, 0.75);
    --border-color: rgba(255, 255, 255, 0.5);
    --border-active: #0f172a;
}

/* Preserved Obsidian Black & Brilliant Gold for Theme Picker and TEST 51 */
body.theme-obsidian-gold, [data-theme="theme-obsidian-gold"] {
    --bg-app: #000000;
    --bg-surface: #0a0a0c;
    --bg-surface-elevated: #121214;
    --border-subtle: #27272a;
    --border-focus: #eab308;
    --color-gold: #eab308;
    --color-gold-hover: #facc15;
    --color-gold-subtle: rgba(234, 179, 8, 0.12);
    --color-accent-blue: #38bdf8;
    --text-primary: #eab308;
    --text-white: #fafafa;
    --text-secondary: #a1a1aa;
    --theme-accent: #eab308;
    --theme-accent-subtle: rgba(234, 179, 8, 0.12);
    --theme-accent-border: #eab308;
    --theme-surface: #0a0a0c;
    --theme-surface-border: #27272a;
    --theme-base: #000000;
    --theme-highlight: #facc15;
    --bg-primary: #000000;
    --bg-secondary: #0a0a0c;
    --bg-card: #0a0a0c;
    --bg-card-hover: #121214;
    --bg-elevated: #121214;
    --bg-input: #0a0a0c;
    --text-muted: #71717a;
    --text-accent: #eab308;
    --border-color: #27272a;
    --border-active: #eab308;
    --accent-blue: #38bdf8;
    --accent-purple: #eab308;
    --accent-pink: #eab308;
    --accent-teal: #38bdf8;
    --accent-amber: #eab308;
    --accent-red: #ef4444;
    --accent-green: #22c55e;
}

/* Legacy Emerald avionics fallback tokens for TEST 42 */
body.theme-emerald-compat {
    --color-accent: #34d399;
    --color-accent-subtle: rgba(52, 211, 153, 0.15);
}

/* Liquid Ocean & Electric Cyan Theme Class */
body.theme-liquid-ocean, [data-theme="theme-liquid-ocean"] {
    --bg-app: #081225;
    --bg-image: url('/path/to/liquid-blue-ocean-bg.jpg');
    --bg-surface: rgba(11, 23, 48, 0.65);
    --bg-surface-elevated: rgba(16, 33, 65, 0.75);
    --backdrop-blur: blur(16px);
    --border-subtle: rgba(56, 189, 248, 0.2);
    --border-focus: #22d3ee;
    --color-accent: #22d3ee;
    --color-accent-hover: #06b6d4;
    --color-accent-subtle: rgba(34, 211, 238, 0.15);
    --color-role-pf: #38bdf8;
    --color-role-pm: #94a3b8;
    --text-heading: #ffffff;
    --text-body: #bae6fd;
    --text-muted: #64748b;
    --theme-accent: #22d3ee;
    --theme-accent-subtle: rgba(34, 211, 238, 0.15);
    --theme-accent-border: #22d3ee;
    --theme-surface: rgba(11, 23, 48, 0.65);
    --theme-surface-border: rgba(56, 189, 248, 0.2);
    --theme-base: #081225;
    --theme-highlight: #06b6d4;
    --bg-primary: #081225;
    --bg-secondary: rgba(11, 23, 48, 0.65);
    --bg-card: rgba(11, 23, 48, 0.65);
    --bg-card-hover: rgba(16, 33, 65, 0.75);
    --bg-elevated: rgba(16, 33, 65, 0.75);
    --bg-input: rgba(8, 18, 37, 0.85);
    --border-color: rgba(56, 189, 248, 0.2);
    --border-active: #22d3ee;
}

/* Preserved Royal Navy & Classic Gold for Theme Picker and TEST 50 */
body.theme-royal-gold, [data-theme="theme-royal-gold"] {
    --bg-app: #040814;
    --bg-surface: #0c1527;
    --bg-surface-elevated: #132039;
    --border-subtle: #1e2a44;
    --border-focus: #c5a059;
    --color-gold: #c5a059;
    --color-gold-hover: #d4af37;
    --color-gold-subtle: rgba(197, 160, 89, 0.12);
    --color-accent-blue: #60a5fa;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --theme-accent: #c5a059;
    --theme-accent-subtle: rgba(197, 160, 89, 0.12);
    --theme-accent-border: #c5a059;
    --theme-surface: #0c1527;
    --theme-surface-border: #1e2a44;
    --theme-base: #040814;
    --theme-highlight: #d4af37;
    --bg-primary: #040814;
    --bg-secondary: #0c1527;
    --bg-card: #0c1527;
    --bg-card-hover: #132039;
    --bg-elevated: #132039;
    --bg-input: #0c1527;
    --border-color: #1e2a44;
    --border-active: #c5a059;
}

body.theme-light {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --bg-elevated: #f1f5f9;
    --bg-input: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-accent: #3b82f6;
    --border-color: #e2e8f0;
    --border-active: #3b82f6;
    --accent-blue: #3b82f6;
    --accent-purple: #8b5cf6;
    --accent-pink: #ec4899;
    --accent-teal: #14b8a6;
    --accent-amber: #f59e0b;
    --accent-red: #ef4444;
    --accent-green: #10b981;
}

body.theme-ocean {
    --bg-primary: #08121f;
    --bg-secondary: #0d1e30;
    --bg-card: #122840;
    --bg-card-hover: #183350;
    --bg-elevated: #162f4a;
    --bg-input: #0b1826;
    --text-primary: #e0f2fe;
    --text-secondary: #7dd3fc;
    --text-muted: #38bdf8;
    --text-accent: #0ea5e9;
    --border-color: rgba(14, 165, 233, 0.2);
    --border-active: #0ea5e9;
    --accent-blue: #38bdf8;
    --accent-purple: #a78bfa;
    --accent-pink: #f472b6;
    --accent-teal: #2dd4bf;
    --accent-amber: #fcd34d;
    --accent-red: #f87171;
    --accent-green: #34d399;
}

body.theme-sunset {
    --bg-primary: #1c0a0a;
    --bg-secondary: #2a1111;
    --bg-card: #3a1919;
    --bg-card-hover: #4a2121;
    --bg-elevated: #441d1d;
    --bg-input: #220f0f;
    --text-primary: #ffedd5;
    --text-secondary: #fdba74;
    --text-muted: #f97316;
    --text-accent: #f97316;
    --border-color: rgba(249, 115, 22, 0.2);
    --border-active: #ea580c;
    --accent-blue: #fdba74;
    --accent-purple: #fb923c;
    --accent-pink: #f87171;
    --accent-teal: #facc15;
    --accent-amber: #ea580c;
    --accent-red: #dc2626;
    --accent-green: #84cc16;
}

body.theme-forest {
    --bg-primary: #0a1c11;
    --bg-secondary: #112a1a;
    --bg-card: #193a25;
    --bg-card-hover: #214a30;
    --bg-elevated: #1e442c;
    --bg-input: #0e2216;
    --text-primary: #d1fae5;
    --text-secondary: #6ee7b7;
    --text-muted: #10b981;
    --text-accent: #10b981;
    --border-color: rgba(16, 185, 129, 0.2);
    --border-active: #059669;
    --accent-blue: #6ee7b7;
    --accent-purple: #34d399;
    --accent-pink: #10b981;
    --accent-teal: #059669;
    --accent-amber: #14b8a6;
    --accent-red: #ef4444;
    --accent-green: #22c55e;
}

body.theme-monochrome {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-card: #2a2a2a;
    --bg-card-hover: #333;
    --bg-elevated: #2f2f2f;
    --bg-input: #1a1a1a;
    --text-primary: #f5f5f5;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;
    --text-accent: #ffffff;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-active: rgba(255, 255, 255, 0.3);
    --accent-blue: #a3a3a3;
    --accent-purple: #d4d4d4;
    --accent-pink: #a3a3a3;
    --accent-teal: #d4d4d4;
    --accent-amber: #a3a3a3;
    --accent-red: #d4d4d4;
    --accent-green: #a3a3a3;
}

/* ===== AIRLINE & COCKPIT THEME PALETTES (v5.23) ===== */

/* 1. "Firebase" (Classic Warm Tech) */
body.theme-firebase, [data-theme="theme-firebase"] {
    --theme-accent: #F59E0B;
    --theme-highlight: #FBBF24;
    --theme-accent-subtle: rgba(245, 158, 11, 0.15);
    --theme-accent-border: rgba(245, 158, 11, 0.40);
    --theme-base: #0B132B;
    --theme-surface: #1C2541;
    --theme-surface-border: rgba(251, 191, 36, 0.18);
    --color-accent: #F59E0B;
    --color-accent-subtle: rgba(245, 158, 11, 0.15);
    --bg-primary: #0B132B;
    --bg-secondary: #141E36;
    --bg-card: #1C2541;
    --bg-card-hover: #243054;
    --bg-elevated: #222D4E;
    --bg-input: #0F1933;
    --text-primary: #FFFBEB;
    --text-secondary: #FDE68A;
    --text-muted: #94A3B8;
    --text-accent: #F59E0B;
    --border-color: rgba(251, 191, 36, 0.18);
    --border-active: rgba(245, 158, 11, 0.45);
    --accent-blue: #F59E0B;
    --accent-purple: #FBBF24;
    --accent-pink: #F97316;
    --accent-teal: #FBBF24;
    --accent-amber: #F59E0B;
    --accent-red: #EF4444;
    --accent-green: #22C55E;
}

/* 2. "Eurowings" (Brand Wings) */
body.theme-eurowings, [data-theme="theme-eurowings"] {
    --theme-accent: #9B1158;
    --theme-highlight: #0099CC;
    --theme-accent-subtle: rgba(155, 17, 88, 0.18);
    --theme-accent-border: rgba(155, 17, 88, 0.45);
    --theme-base: #0F172A;
    --theme-surface: #1E293B;
    --theme-surface-border: rgba(0, 153, 204, 0.18);
    --color-accent: #9B1158;
    --color-accent-subtle: rgba(155, 17, 88, 0.18);
    --bg-primary: #0F172A;
    --bg-secondary: #162033;
    --bg-card: #1E293B;
    --bg-card-hover: #27354D;
    --bg-elevated: #253349;
    --bg-input: #131D31;
    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-accent: #9B1158;
    --border-color: rgba(0, 153, 204, 0.18);
    --border-active: rgba(155, 17, 88, 0.50);
    --accent-blue: #0099CC;
    --accent-purple: #9B1158;
    --accent-pink: #9B1158;
    --accent-teal: #0099CC;
    --accent-amber: #F59E0B;
    --accent-red: #EF4444;
    --accent-green: #10B981;
}

/* 3. "Lufthansa" (Aviation Navy & Gold) */
body.theme-lufthansa, [data-theme="theme-lufthansa"] {
    --theme-accent: #F9BA00;
    --theme-highlight: #F9BA00;
    --theme-accent-subtle: rgba(249, 186, 0, 0.15);
    --theme-accent-border: rgba(249, 186, 0, 0.40);
    --theme-base: #001B44;
    --theme-surface: #052659;
    --theme-surface-border: rgba(249, 186, 0, 0.16);
    --color-accent: #F9BA00;
    --color-accent-subtle: rgba(249, 186, 0, 0.15);
    --bg-primary: #001B44;
    --bg-secondary: #03204F;
    --bg-card: #052659;
    --bg-card-hover: #0A316F;
    --bg-elevated: #082D66;
    --bg-input: #021E4A;
    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-accent: #F9BA00;
    --border-color: rgba(249, 186, 0, 0.16);
    --border-active: rgba(249, 186, 0, 0.45);
    --accent-blue: #38BDF8;
    --accent-purple: #F9BA00;
    --accent-pink: #F59E0B;
    --accent-teal: #F9BA00;
    --accent-amber: #F9BA00;
    --accent-red: #EF4444;
    --accent-green: #22C55E;
}

/* 4. "Discover Airlines" (Ocean & Sunshine) */
body.theme-discover, [data-theme="theme-discover"] {
    --theme-accent: #00A3E0;
    --theme-highlight: #FFB81C;
    --theme-accent-subtle: rgba(0, 163, 224, 0.15);
    --theme-accent-border: rgba(0, 163, 224, 0.40);
    --theme-base: #0A192F;
    --theme-surface: #132F4C;
    --theme-surface-border: rgba(0, 163, 224, 0.18);
    --color-accent: #00A3E0;
    --color-accent-subtle: rgba(0, 163, 224, 0.15);
    --bg-primary: #0A192F;
    --bg-secondary: #0E233E;
    --bg-card: #132F4C;
    --bg-card-hover: #193B5E;
    --bg-elevated: #173657;
    --bg-input: #0C1F38;
    --text-primary: #F0F9FF;
    --text-secondary: #BAE6FD;
    --text-muted: #7DD3FC;
    --text-accent: #00A3E0;
    --border-color: rgba(0, 163, 224, 0.18);
    --border-active: rgba(0, 163, 224, 0.45);
    --accent-blue: #00A3E0;
    --accent-purple: #FFB81C;
    --accent-pink: #FFB81C;
    --accent-teal: #00A3E0;
    --accent-amber: #FFB81C;
    --accent-red: #EF4444;
    --accent-green: #22C55E;
}

/* 5. "ITA Airways" (Azzurro Savoia) */
body.theme-ita, [data-theme="theme-ita"] {
    --theme-accent: #0066CC;
    --theme-highlight: #D4AF37;
    --theme-accent-subtle: rgba(0, 102, 204, 0.18);
    --theme-accent-border: rgba(212, 175, 55, 0.40);
    --theme-base: #071526;
    --theme-surface: #0F2238;
    --theme-surface-border: rgba(212, 175, 55, 0.18);
    --color-accent: #0066CC;
    --color-accent-subtle: rgba(0, 102, 204, 0.18);
    --bg-primary: #071526;
    --bg-secondary: #0B1B30;
    --bg-card: #0F2238;
    --bg-card-hover: #152D49;
    --bg-elevated: #132942;
    --bg-input: #09192D;
    --text-primary: #F8FAFC;
    --text-secondary: #E2E8F0;
    --text-muted: #94A3B8;
    --text-accent: #0066CC;
    --border-color: rgba(212, 175, 55, 0.18);
    --border-active: rgba(212, 175, 55, 0.45);
    --accent-blue: #0066CC;
    --accent-purple: #D4AF37;
    --accent-pink: #D4AF37;
    --accent-teal: #0066CC;
    --accent-amber: #D4AF37;
    --accent-red: #EF4444;
    --accent-green: #22C55E;
}

/* 6. "Airbus Cockpit" (Glass Cockpit EFIS) */
body.theme-airbus, [data-theme="theme-airbus"] {
    --theme-accent: #38BDF8;
    --theme-highlight: #22C55E;
    --theme-accent-subtle: rgba(56, 189, 248, 0.15);
    --theme-accent-border: rgba(56, 189, 248, 0.40);
    --theme-base: #111827;
    --theme-surface: #1F2937;
    --theme-surface-border: rgba(56, 189, 248, 0.16);
    --color-accent: #38BDF8;
    --color-accent-subtle: rgba(56, 189, 248, 0.15);
    --bg-primary: #111827;
    --bg-secondary: #18212F;
    --bg-card: #1F2937;
    --bg-card-hover: #283547;
    --bg-elevated: #253142;
    --bg-input: #141D2B;
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted: #9CA3AF;
    --text-accent: #38BDF8;
    --border-color: rgba(56, 189, 248, 0.16);
    --border-active: rgba(56, 189, 248, 0.45);
    --accent-blue: #38BDF8;
    --accent-purple: #22C55E;
    --accent-pink: #38BDF8;
    --accent-teal: #22C55E;
    --accent-amber: #F59E0B;
    --accent-red: #EF4444;
    --accent-green: #22C55E;
}

/* 7. "Night Vision / OLED" (Cockpit Dark Flight) */
body.theme-oled, [data-theme="theme-oled"] {
    --theme-accent: #EF4444;
    --theme-highlight: #F59E0B;
    --theme-accent-subtle: rgba(239, 68, 68, 0.15);
    --theme-accent-border: rgba(239, 68, 68, 0.40);
    --theme-base: #000000;
    --theme-surface: #121212;
    --theme-surface-border: rgba(239, 68, 68, 0.18);
    --color-accent: #EF4444;
    --color-accent-subtle: rgba(239, 68, 68, 0.15);
    --bg-primary: #000000;
    --bg-secondary: #0A0A0A;
    --bg-card: #121212;
    --bg-card-hover: #1A1A1A;
    --bg-elevated: #171717;
    --bg-input: #080808;
    --text-primary: #FEE2E2;
    --text-secondary: #FCA5A5;
    --text-muted: #991B1B;
    --text-accent: #EF4444;
    --border-color: rgba(239, 68, 68, 0.18);
    --border-active: rgba(239, 68, 68, 0.45);
    --accent-blue: #EF4444;
    --accent-purple: #F59E0B;
    --accent-pink: #EF4444;
    --accent-teal: #F59E0B;
    --accent-amber: #F59E0B;
    --accent-red: #EF4444;
    --accent-green: #F59E0B;
}

/* Navy Blue Theme – professional dark navy */
body.theme-navy {
    --bg-primary: #0a1628;
    --bg-secondary: #0f1f3d;
    --bg-card: #142952;
    --bg-card-hover: #1a3366;
    --bg-elevated: #172e5a;
    --bg-input: #0c1930;
    --text-primary: #e8edf5;
    --text-secondary: #8da2c4;
    --text-muted: #5a7ba8;
    --text-accent: #64b5f6;
    --border-color: rgba(100, 181, 246, 0.15);
    --border-active: #42a5f5;
    --accent-blue: #64b5f6;
    --accent-purple: #7986cb;
    --accent-pink: #ef5350;
    --accent-teal: #26c6da;
    --accent-amber: #ffd54f;
    --accent-red: #ef5350;
    --accent-green: #66bb6a;
}

/* Clean Minimal Theme – ultra sleek, high contrast, studio dark */
body.theme-clean {
    --bg-primary: #090a0f;
    --bg-secondary: #12141a;
    --bg-card: #181b24;
    --bg-card-hover: #1e222e;
    --bg-elevated: #232735;
    --bg-input: #101218;
    --text-primary: #ffffff;
    --text-secondary: #a1a7b8;
    --text-muted: #62697d;
    --text-accent: #38bdf8;
    --border-color: rgba(255, 255, 255, 0.07);
    --border-active: #38bdf8;
    --accent-blue: #38bdf8;
    --accent-purple: #818cf8;
    --accent-pink: #f43f5e;
    --accent-teal: #14b8a6;
    --accent-amber: #f59e0b;
    --accent-red: #f43f5e;
    --accent-green: #10b981;
}

/* Liquid Glass Theme – Apple iOS signature white frosted glass, ultra-clean, serious & professional */
body.theme-liquid-glass {
    --bg-primary: #f1f5f9;
    --bg-secondary: rgba(255, 255, 255, 0.75);
    --bg-card: rgba(255, 255, 255, 0.68);
    --bg-card-hover: rgba(255, 255, 255, 0.9);
    --bg-elevated: rgba(255, 255, 255, 0.85);
    --bg-input: rgba(255, 255, 255, 0.92);
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-accent: #2563eb;
    --border-color: rgba(255, 255, 255, 0.85);
    --border-active: #2563eb;
    --accent-blue: #2563eb;
    --accent-purple: #7c3aed;
    --accent-pink: #db2777;
    --accent-teal: #0d9488;
    --accent-amber: #d97706;
    --accent-red: #dc2626;
    --accent-green: #16a34a;
}
body.theme-liquid-glass .section-card,
body.theme-liquid-glass .stat-card,
body.theme-liquid-glass .modal,
body.theme-liquid-glass #main-nav,
body.theme-liquid-glass .ov-hero,
body.theme-liquid-glass .map-card {
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.9);
}
body.theme-liquid-glass::before {
    background: radial-gradient(ellipse at 15% 15%, rgba(191, 219, 254, 0.5) 0%, transparent 55%),
                radial-gradient(ellipse at 85% 85%, rgba(233, 213, 255, 0.45) 0%, transparent 55%),
                radial-gradient(ellipse at 50% 50%, rgba(224, 231, 255, 0.4) 0%, transparent 65%);
}
body.theme-liquid-glass #main-nav {
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}
body.theme-liquid-glass .form-group input,
body.theme-liquid-glass .form-group select,
body.theme-liquid-glass .form-group textarea {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(203, 213, 225, 0.85);
    color: #0f172a;
}
body.theme-liquid-glass .toggle-btn {
    background: rgba(241, 245, 249, 0.85);
    color: #475569;
}
body.theme-liquid-glass .toggle-btn.active {
    background: #2563eb;
    color: #ffffff;
}
body.theme-liquid-glass .time-step-btn,
body.theme-liquid-glass .distance-step-btn,
body.theme-liquid-glass .btn-manage-dd {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(203, 213, 225, 0.85);
    color: #0f172a;
}

:root {
    --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    --gradient-pink: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    --gradient-teal: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --nav-height: 72px;
    --content-max-width: 1000px;
}

/* Firebase-specific gradients */
body.theme-firebase { --gradient-blue: linear-gradient(135deg, #ff9800 0%, #e65100 100%); --gradient-purple: linear-gradient(135deg, #ff6d00 0%, #bf360c 100%); --gradient-pink: linear-gradient(135deg, #ff3d00 0%, #b71c1c 100%); --gradient-teal: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%); }
body.theme-navy { --gradient-blue: linear-gradient(135deg, #42a5f5 0%, #1565c0 100%); --gradient-purple: linear-gradient(135deg, #5c6bc0 0%, #283593 100%); --gradient-pink: linear-gradient(135deg, #ef5350 0%, #c62828 100%); --gradient-teal: linear-gradient(135deg, #26c6da 0%, #00838f 100%); }

/* === Reset & Base === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-app, var(--bg-primary, #090514));
    background-image: none !important;
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
}

/* Main app container background */
.app-wrapper,
#app-wrapper,
#app-content,
.login-screen {
    background-color: var(--bg-app, #090514);
    background-image: none !important;
}

/* Preserved Deep Slate flat container background for TEST 54b */
body.theme-deep-slate,
body.theme-deep-slate .app-wrapper,
body.theme-deep-slate #app-wrapper,
body.theme-deep-slate #app-content,
body.theme-deep-slate .login-screen {
    background-color: var(--bg-app, var(--bg-primary, #0b1120));
    background-image: none !important;
}

/* Glassmorphism themes with background image (TEST 52b & TEST 53b) */
body.theme-daylight-sky,
body.theme-liquid-ocean,
body.theme-daylight-sky #app-wrapper,
body.theme-daylight-sky #app-content,
body.theme-daylight-sky .login-screen,
body.theme-liquid-ocean #app-wrapper,
body.theme-liquid-ocean #app-content,
body.theme-liquid-ocean .login-screen {
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
}

/* Disable text selection and copy callout in flight modal for app feel */
#flight-modal, #flight-modal * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
#flight-modal input, #flight-modal textarea {
    -webkit-user-select: auto;
    user-select: auto;
}

body::before {
    content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(ellipse at 10% 20%, rgba(96,165,250,0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(197,160,89,0.03) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(12,21,39,0.4) 0%, transparent 60%);
    pointer-events: none; z-index: 0;
}
body.theme-firebase::before { background: radial-gradient(ellipse at 10% 20%, rgba(255,152,0,0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(255,87,34,0.06) 0%, transparent 50%); }
body.theme-navy::before { background: radial-gradient(ellipse at 10% 20%, rgba(66,165,245,0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(92,107,192,0.06) 0%, transparent 50%); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* === Navigation === */
#main-nav {
    position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height);
    background: var(--bg-surface, var(--bg-elevated, #0c1527)); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-subtle, var(--border-color, #1e2a44)); display: flex; align-items: center; padding: 0 32px; z-index: 1000; gap: 24px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-logo { width: 32px; height: 32px; }
.nav-title { font-size: 1.3rem; font-weight: 800; background: linear-gradient(135deg, var(--color-gold, #c5a059), var(--color-accent-blue, #60a5fa)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; }
.nav-tabs { display: flex; gap: 4px; margin-left: 32px; }
.nav-tab { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 0.9rem; font-weight: 500; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-normal); white-space: nowrap; }
.nav-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.nav-tab.active {
    color: var(--color-accent-lilac, #8b5cf6) !important;
    background: var(--color-accent-subtle, rgba(139, 92, 246, 0.15)) !important;
    border-color: var(--border-focus, #8b5cf6) !important;
}
.nav-tab.active svg {
    stroke: var(--color-accent-lilac, #8b5cf6) !important;
    color: var(--color-accent-lilac, #8b5cf6) !important;
}
.nav-tab.active span {
    color: var(--color-accent-lilac, #8b5cf6) !important;
}
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-icon-btn { width: 40px; height: 40px; border: 1px solid transparent; background: rgba(255,255,255,0.06); color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); }
.nav-icon-btn svg { width: 20px; height: 20px; }
.nav-icon-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.nav-icon-btn.active,
#btn-settings.active {
    color: var(--color-accent-lilac, #8b5cf6) !important;
    border-color: var(--border-focus, #8b5cf6) !important;
    background: var(--color-accent-subtle, rgba(139, 92, 246, 0.15)) !important;
}
.nav-icon-btn.active svg,
#btn-settings.active svg {
    stroke: var(--color-accent-lilac, #8b5cf6) !important;
}

/* "+ Add Flight" Button: Midnight Slate & Subtle Lilac (#7c3aed) with White Text (#ffffff) */
.btn-add-flight,
#btn-add-flight {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #7c3aed !important;
    background: #7c3aed !important;
    background-color: #7c3aed !important;
    color: #ffffff !important;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
}
.btn-add-flight svg,
#btn-add-flight svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff !important;
    color: #ffffff !important;
}
.btn-add-flight span,
#btn-add-flight span {
    color: #ffffff !important;
    font-weight: 700;
}
.btn-add-flight:hover,
#btn-add-flight:hover {
    background: #6d28d9 !important;
    background-color: #6d28d9 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}
.btn-add-flight:active,
#btn-add-flight:active {
    transform: translateY(0);
}

/* Preserved Deep Slate Button Styling for TEST 54e */
body.theme-deep-slate .btn-add-flight,
body.theme-deep-slate #btn-add-flight {
    border: 1px solid #38bdf8 !important;
    background: #38bdf8 !important;
    background-color: #38bdf8 !important;
    color: #0b1120 !important;
}
body.theme-deep-slate .btn-add-flight svg,
body.theme-deep-slate #btn-add-flight svg,
body.theme-deep-slate .btn-add-flight span,
body.theme-deep-slate #btn-add-flight span {
    color: #0b1120 !important;
    stroke: #0b1120 !important;
}

/* Preserved Frosted Daylight Sky Button for TEST 53e */
body.theme-daylight-sky .btn-add-flight,
body.theme-daylight-sky #btn-add-flight {
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    background: #0ea5e9 !important;
    background-color: #0ea5e9 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(14, 165, 233, 0.35) !important;
}
body.theme-daylight-sky .btn-add-flight svg,
body.theme-daylight-sky #btn-add-flight svg,
body.theme-daylight-sky .btn-add-flight span,
body.theme-daylight-sky #btn-add-flight span {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Preserved Liquid Ocean Button Styling for TEST 52d */
body.theme-liquid-ocean .btn-add-flight,
body.theme-liquid-ocean #btn-add-flight {
    border: 1px solid var(--border-focus, #22d3ee) !important;
    background: linear-gradient(135deg, #22d3ee, #38bdf8) !important;
    background-color: #22d3ee !important;
    color: #081225 !important;
    box-shadow: 0 4px 18px rgba(34, 211, 238, 0.35) !important;
}
body.theme-liquid-ocean .btn-add-flight svg,
body.theme-liquid-ocean #btn-add-flight svg,
body.theme-liquid-ocean .btn-add-flight span,
body.theme-liquid-ocean #btn-add-flight span {
    color: #081225 !important;
    stroke: #081225 !important;
}

/* Preserved Solid Gold Button Styling for TEST 50d and TEST 51e */
body.theme-obsidian-gold .btn-add-flight,
body.theme-obsidian-gold #btn-add-flight,
body.theme-royal-gold .btn-add-flight,
body.theme-royal-gold #btn-add-flight {
    border: 1px solid var(--color-gold, #c5a059) !important;
    background: var(--color-gold, #eab308) !important;
    background-color: var(--color-gold, #eab308) !important;
    color: #000000 !important;
    box-shadow: 0 2px 14px var(--color-gold-subtle, rgba(197, 160, 89, 0.3));
}
body.theme-obsidian-gold .btn-add-flight svg,
body.theme-obsidian-gold #btn-add-flight svg,
body.theme-obsidian-gold .btn-add-flight span,
body.theme-obsidian-gold #btn-add-flight span,
body.theme-royal-gold .btn-add-flight svg,
body.theme-royal-gold #btn-add-flight svg,
body.theme-royal-gold .btn-add-flight span,
body.theme-royal-gold #btn-add-flight span {
    color: #000000 !important;
    stroke: #000000 !important;
}

/* === Utility Classes: Strict Anti-Blowout & Dimensions === */
.w-full { width: 100% !important; }
.max-w-full { max-width: 100% !important; }
.min-w-0 { min-width: 0 !important; }

/* Main Content Wrapper */
#app-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: calc(var(--nav-height) + 32px) 32px 64px;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Dashboard Root View Constraints (Strict Vertical Scrolling) */
#view-dashboard {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    overscroll-behavior-x: none;
}
#view-dashboard.active {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Views */
.view { display: none; animation: fadeIn 0.35s ease; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.view-header { margin-bottom: 32px; }
.view-header h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 4px; }
.subtitle { color: var(--text-secondary); font-size: 1rem; }

/* Stats Grid */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; }
.stat-card { border-radius: var(--radius-lg); padding: 24px; display: flex; align-items: center; gap: 16px; border: 1px solid var(--border-color); transition: all var(--transition-smooth); position: relative; overflow: hidden; }
.stat-card::after { content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100px; border-radius: 50%; opacity: 0.08; transition: all var(--transition-smooth); }
.stat-card:hover { transform: translateY(-3px); border-color: var(--border-active); }
.gradient-blue { background: var(--gradient-blue); }
.gradient-blue::after { background: var(--accent-blue); }
.gradient-purple { background: var(--gradient-purple); }
.gradient-purple::after { background: var(--accent-purple); }
.gradient-pink { background: var(--gradient-pink); }
.gradient-pink::after { background: var(--accent-pink); }
.gradient-teal { background: var(--gradient-teal); }
.gradient-teal::after { background: var(--accent-teal); }
.stat-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon svg { width: 28px; height: 28px; }
.stat-info { display: flex; flex-direction: column; }
.stat-value { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.5px; font-family: inherit; font-variant-numeric: tabular-nums; color: white; }
.stat-label { font-size: 0.8rem; color: rgba(255,255,255,0.85); font-weight: 500; margin-top: 2px; }

/* Section Cards */
.section-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 24px; transition: border-color var(--transition-normal); }
.section-card:hover { border-color: rgba(148, 163, 192, 0.2); }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.section-header h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.3px; }

/* Chart */
.chart-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 300px;
    box-sizing: border-box;
    overflow: hidden;
}
.chart-medium { height: 260px; }
.chart-container canvas {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Stats Detail Grid */
.stats-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.stats-detail-grid .full-width { grid-column: 1 / -1; }

/* Empty State */
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); }
.empty-icon { width: 56px; height: 56px; margin-bottom: 16px; opacity: 0.4; }
.empty-state p { font-size: 1rem; margin-bottom: 4px; }
.empty-state .hint { font-size: 0.85rem; opacity: 0.7; }

/* Flights List */
.flights-list .flight-item { display: grid; grid-template-columns: 100px 1fr auto auto auto auto; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-color); transition: background var(--transition-fast); }
.flights-list .flight-item:last-child { border-bottom: none; }
.flight-date { font-size: 0.85rem; color: var(--text-secondary); font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; }
.flight-route { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.flight-route .icao { font-family: inherit; font-size: 1rem; color: var(--text-primary); }
.flight-route .arrow { color: var(--accent-blue); font-size: 0.85rem; }
.flight-aircraft { font-size: 0.85rem; color: var(--text-secondary); padding: 4px 10px; background: rgba(167,139,250,0.1); border-radius: 6px; font-weight: 500; }
.flight-hours { font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-teal); font-size: 0.95rem; }
.flight-role { font-size: 0.75rem; padding: 3px 8px; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.flight-role.PIC { background: rgba(96,165,250,0.15); color: var(--accent-blue); }
.flight-role.SIC { background: rgba(167,139,250,0.15); color: var(--accent-purple); }
.flight-role.DUAL { background: rgba(251,191,36,0.15); color: var(--accent-amber); }
.flight-role.EXAM { background: rgba(244,114,182,0.15); color: var(--accent-pink); }
.flight-incomplete { color: var(--accent-red); font-size: 1.2rem; cursor: help; animation: pulse-red 2s infinite; }
@keyframes pulse-red { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.flight-highlight-star { color: #fbbf24; font-size: 1rem; margin-right: 4px; }

.flight-actions { display: flex; gap: 6px; }
.flight-actions button { width: 32px; height: 32px; border: none; background: transparent; color: var(--text-muted); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); }
.flight-actions button:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.flight-actions button.delete:hover { color: var(--accent-red); background: rgba(248,113,113,0.1); }
.flight-actions button svg { width: 16px; height: 16px; }

/* Logbook Table */
.flights-table-container table { width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; }
.flights-table-container th { text-align: left; padding: 6px 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 5; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-variant-numeric: tabular-nums; box-sizing: border-box !important; overflow: hidden !important; min-width: 0px !important; }
.flights-table-container td { padding: 6px 4px; font-size: 0.88rem; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-variant-numeric: tabular-nums; box-sizing: border-box !important; overflow: hidden !important; min-width: 0px !important; }
.flights-table-container th.p-0,
.flights-table-container td.p-0 { padding: 0px !important; }
.flights-table-container td.mono { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-variant-numeric: tabular-nums !important; font-weight: 500; color: var(--text-primary); }
.flights-table-container td.cell-route { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-weight: 600; color: var(--text-primary); }

/* Logbook Controls */
.logbook-controls { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.search-box { display: flex; align-items: center; gap: 10px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0 14px; flex: 1; min-width: 240px; transition: border-color var(--transition-fast); }
.search-box:focus-within { border-color: var(--border-active); }
.search-box svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.search-box input { border: none; background: transparent; color: var(--text-primary); font-family: inherit; font-size: 0.9rem; padding: 10px 0; width: 100%; outline: none; }
.search-box input::placeholder { color: var(--text-muted); }
.filter-select { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-secondary); font-family: inherit; font-size: 0.85rem; padding: 10px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--transition-fast); outline: none; }
.filter-select:focus { border-color: var(--border-active); }
.filter-select option { background: var(--bg-secondary); color: var(--text-primary); }

/* Top Airports */
.top-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.top-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-elevated); border-radius: var(--radius-sm); transition: all var(--transition-fast); }
.top-item:hover { background: var(--bg-card-hover); }
.top-rank { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); min-width: 24px; }
.top-code { font-family: inherit; font-weight: 700; color: var(--text-primary); font-size: 1rem; }
.top-count { margin-left: auto; font-size: 0.8rem; color: var(--text-secondary); font-family: inherit; font-variant-numeric: tabular-nums; }

/* === Modal === */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: all var(--transition-normal); padding: 24px; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-xl); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); transform: translateY(20px) scale(0.97); transition: transform var(--transition-smooth); }
.modal-overlay.active .modal { transform: translateY(0) scale(1); }
.modal-small { max-width: 420px; }
.modal-flight { max-width: 720px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 0; position: sticky; top: 0; background: var(--bg-secondary); z-index: 10; }
.modal-header h2 { font-size: 1.25rem; font-weight: 700; }
.modal-close { width: 36px; height: 36px; border: none; background: rgba(255,255,255,0.06); color: var(--text-secondary); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); }
.modal-close:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.modal-close svg { width: 20px; height: 20px; }
.delete-text { padding: 20px 28px; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; }

/* === Form === */
.flight-form { padding: 16px 28px 28px; }
.form-section { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.form-section:last-of-type { border-bottom: none; }
.form-section-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 16px; color: var(--text-accent); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { margin-bottom: 16px; }
.form-group label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.form-group input, .form-group select, .form-group textarea { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary); font-family: inherit; font-size: 16px; padding: 10px 14px; border-radius: var(--radius-sm); outline: none; transition: border-color var(--transition-fast); touch-action: manipulation; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(96,165,250,0.1); }
.form-group textarea { resize: vertical; min-height: 72px; }
.form-group select option { background: var(--bg-secondary); }

/* Toggle PF/PM */
.toggle-group { display: flex; gap: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-color); touch-action: manipulation; }
.toggle-btn { padding: 12px 18px; border: none; background: var(--bg-input); color: var(--text-muted); font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); min-height: 44px; touch-action: manipulation; }
.toggle-btn.active { background: var(--accent-blue); color: white; }
.toggle-btn:hover:not(.active) { background: var(--bg-card-hover); color: var(--text-primary); }

/* Managed Dropdown */
.managed-dropdown { display: flex; gap: 4px; }
.managed-dropdown select { flex: 1; font-size: 16px; }
.btn-manage-dd { width: 44px; min-height: 44px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); touch-action: manipulation; }
.btn-manage-dd:hover { background: var(--bg-card-hover); color: var(--text-primary); }

/* Route: Approach & Distance Row */
.form-row-approach-distance {
    display: grid !important;
    grid-template-columns: 1fr 1.35fr !important;
    gap: 12px;
    margin-bottom: 14px;
    align-items: end;
}
.form-group-approach { min-width: 0; }
.form-group-approach .managed-dropdown { display: flex; gap: 4px; align-items: center; }
.form-group-approach .managed-dropdown select { min-width: 0; flex: 1; min-height: 44px; }
.form-group-distance { min-width: 0; }
.distance-input-wrapper { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.distance-input {
    width: 68px !important;
    min-width: 52px;
    height: 44px;
    min-height: 44px;
    padding: 8px 6px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 16px !important;
    font-weight: 600;
    text-align: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    outline: none;
    box-sizing: border-box;
    touch-action: manipulation;
}
.distance-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(96,165,250,0.1);
}
.route-distance-unit {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    user-select: none;
    white-space: nowrap;
}
.distance-step-btn {
    width: 36px;
    height: 44px;
    min-height: 44px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    touch-action: manipulation;
    user-select: none;
}
.distance-step-btn:hover {
    background: rgba(96,165,250,0.15);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}
.distance-step-btn:active {
    transform: scale(0.92);
}
.distance-step-btn.distance-step-btn-fine {
    width: 28px;
    height: 36px;
    min-height: 36px;
    font-size: 0.95rem;
    align-self: center;
    padding: 0;
}
.route-distance-km {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    letter-spacing: -0.2px;
}
.req-star {
    color: var(--accent-red, #ef4444);
    font-weight: 700;
    margin-left: 2px;
}
.flight-form.flight-type-sonstiges .req-star {
    display: none !important;
}

@media (max-width: 480px) {
    .form-row-approach-distance {
        grid-template-columns: 1fr 1.35fr !important;
        gap: 8px;
    }
    .form-group-approach .btn-manage-dd {
        width: 36px;
        min-width: 36px;
    }
    .distance-input {
        width: 54px !important;
        font-size: 14px !important;
        padding: 6px 2px !important;
    }
    .distance-step-btn {
        width: 32px;
        min-width: 32px;
    }
    .distance-step-btn.distance-step-btn-fine {
        width: 24px;
        height: 32px;
        min-height: 32px;
        font-size: 0.85rem;
    }
    .distance-input-wrapper {
        gap: 4px;
    }
    .route-distance-km {
        font-size: 0.72rem;
    }
}

/* Times Grid */
.times-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; margin-bottom: 16px; }
.time-column { display: flex; flex-direction: column; gap: 8px; }
.time-input { font-family: 'JetBrains Mono', monospace !important; font-size: 18px !important; text-align: center; letter-spacing: 1px; min-height: 44px; touch-action: manipulation; }
.time-input-small { font-size: 16px !important; padding: 6px 8px !important; min-height: 38px; }
.time-planned label { font-size: 0.7rem !important; color: var(--text-muted) !important; }
.time-col-center { display: flex; align-items: center; justify-content: center; }

/* Delay Indicator */
.delay-indicator { text-align: center; padding: 12px 8px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); min-width: 100px; }
.delay-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; }
.delay-value-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; }
.delay-value { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 1.2rem; font-weight: 700; min-width: 50px; text-align: center; }
.delay-value.delay-late { color: var(--accent-red); }
.delay-value.delay-early { color: var(--accent-green); }

/* Computed Times Bar */
.computed-times-bar { display: flex; gap: 16px; margin-bottom: 12px; }
.computed-time-block { flex: 1; text-align: center; padding: 14px 12px; background: linear-gradient(135deg, var(--bg-elevated), var(--bg-card)); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.ct-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; display: block; }
.ct-value { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 1.4rem; font-weight: 700; color: var(--accent-teal); display: block; margin-top: 4px; }

/* Taxi Times */
.taxi-times-bar { display: flex; gap: 12px; margin-top: 8px; }
.taxi-time-item { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.8rem; min-height: 44px; }
.taxi-label { color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.7rem; }
.taxi-value { font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-teal); font-size: 0.95rem; }
.se-checkbox { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.se-checkbox input { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent-blue); }

/* Stepper Fields */
.stepper-field { display: flex; align-items: center; gap: 6px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 4px 8px; min-height: 44px; }
.stepper-display { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 1.1rem; font-weight: 600; color: var(--text-primary); min-width: 30px; text-align: center; flex: 1; }
.stepper-arrows { display: flex; flex-direction: column; gap: 3px; }
.stepper-btn { width: 38px; height: 26px; border: none; background: rgba(148,163,192,0.14); color: var(--text-secondary); border-radius: 4px; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); line-height: 1; touch-action: manipulation; user-select: none; }
.stepper-btn:hover { background: rgba(148,163,192,0.26); color: var(--text-primary); }
.stepper-btn:active { background: rgba(96,165,250,0.3); transform: scale(0.96); }
.stepper-sm { width: 38px; height: 38px; border-radius: 8px; font-size: 1.2rem; background: rgba(148,163,192,0.12); touch-action: manipulation; }

/* Fuel Stats Panel: 3-column Hero Layout */
.fuel-stats-panel { display: flex; gap: 10px; align-items: stretch; padding: 12px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-top: 12px; }
.fuel-stat { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border-color); text-align: center; }
.fuel-stat-side { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.fuel-stat-main { flex: 1.4; background: linear-gradient(135deg, rgba(96,165,250,0.18), rgba(167,139,250,0.15)) !important; border: 1.5px solid var(--accent-blue) !important; box-shadow: 0 4px 16px rgba(96,165,250,0.15); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.fs-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); font-weight: 600; }
.fs-label-hero { color: var(--accent-blue) !important; font-size: 0.72rem !important; font-weight: 800 !important; letter-spacing: 0.5px; }
.fs-value { display: block; font-family: inherit; font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 700; color: var(--accent-teal); margin-top: 4px; }
.fs-value-hero { font-size: 1.35rem !important; font-weight: 900 !important; color: var(--text-primary) !important; margin: 4px 0 2px !important; }
.fs-sub-hero { display: block; font-size: 0.65rem; color: var(--text-muted); opacity: 0.85; }

/* Highlight Toggle */
.highlight-toggle { display: flex !important; align-items: center; gap: 8px; cursor: pointer; flex-direction: row !important; }
.highlight-toggle input { width: 16px; height: 16px; accent-color: #fbbf24; }
.highlight-star { font-size: 1.2rem; }

/* File Input */
.file-input { padding: 8px !important; }
.image-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.image-previews img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-color); }

/* Manage DD Modal */
.manage-dd-content { padding: 16px 28px 28px; }
.manage-dd-add { display: flex; gap: 8px; margin-bottom: 16px; }
.manage-dd-add input { flex: 1; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary); font-family: inherit; font-size: 0.9rem; padding: 8px 14px; border-radius: var(--radius-sm); outline: none; }
.manage-dd-list { list-style: none; max-height: 200px; overflow-y: auto; }
.manage-dd-list li { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border-color); font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; color: var(--text-primary); }
.manage-dd-list li:last-child { border-bottom: none; }
.manage-dd-list .btn-remove-item { width: 24px; height: 24px; border: none; background: rgba(248,113,113,0.1); color: var(--accent-red); border-radius: 4px; cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
.manage-dd-list .btn-remove-item:hover { background: rgba(248,113,113,0.2); }
.btn-sm { padding: 8px 14px !important; font-size: 0.85rem !important; }

/* Form Actions */
.form-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 0 28px 28px; }
.flight-form .form-actions { padding: 8px 0 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border: none; font-family: inherit; font-size: 0.9rem; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-normal); white-space: nowrap; }
.btn-primary { background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); color: white; box-shadow: 0 2px 12px rgba(96,165,250,0.3); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(96,165,250,0.4); }
.btn-secondary { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.btn-secondary:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; box-shadow: 0 2px 12px rgba(239,68,68,0.3); }
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(239,68,68,0.4); }

/* Toast */
#toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); color: var(--text-primary); font-size: 0.9rem; min-width: 280px; animation: slideInToast 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.toast.success { border-left: 3px solid var(--accent-green); }
.toast.error { border-left: 3px solid var(--accent-red); }
.toast.info { border-left: 3px solid var(--accent-blue); }
@keyframes slideInToast { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOutToast { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(30px); } }

/* Sync Indicator */
.sync-indicator { position: fixed; top: calc(var(--nav-height) + 8px); right: 24px; display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.25); border-radius: var(--radius-sm); font-size: 0.8rem; color: var(--accent-blue); z-index: 999; animation: fadeIn 0.2s ease; }
.sync-spinner { width: 14px; height: 14px; border: 2px solid rgba(96,165,250,0.3); border-top: 2px solid var(--accent-blue); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Settings */
.settings-content { padding: 24px 28px 28px; }
.settings-user { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--bg-card); border-radius: var(--radius-md); margin-bottom: 24px; }
.settings-avatar { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border-color); }
.settings-user-name { font-weight: 600; font-size: 0.95rem; }
.settings-user-email { font-size: 0.8rem; color: var(--text-muted); }
.settings-section { margin-bottom: 20px; }
.settings-section h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 8px; }
.settings-hint { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.4; }
.settings-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.settings-buttons .btn { flex: 1; min-width: 100px; font-size: 0.82rem; padding: 10px 14px; }
.cloud-status { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-secondary); padding: 12px 16px; background: var(--bg-card); border-radius: var(--radius-sm); }
.cloud-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cloud-dot.online { background: var(--accent-green); box-shadow: 0 0 8px rgba(52,211,153,0.4); }
.cloud-dot.offline { background: var(--accent-amber); box-shadow: 0 0 8px rgba(251,191,36,0.4); }
.btn-logout { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.2); border-radius: var(--radius-sm); color: var(--accent-red); font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); }
.btn-logout:hover { background: rgba(248,113,113,0.2); }

/* Autocomplete */
.autocomplete-container { position: relative; }
.autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); max-height: 200px; overflow-y: auto; z-index: 3000; list-style: none; margin-top: 4px; display: none; box-shadow: var(--shadow-md); }
.autocomplete-list.active { display: block; }
.autocomplete-item { padding: 10px 14px; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); color: var(--text-primary); }
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: var(--bg-card-hover); }
.autocomplete-code { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--accent-blue); }
.autocomplete-name { color: var(--text-muted); font-size: 0.75rem; margin-left: 8px; }
.autocomplete-type { font-size: 0.7rem; color: var(--accent-teal); margin-left: auto; padding-left: 8px; }

/* Login Screen */
.login-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 5000; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-screen::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 30% 20%, rgba(96,165,250,0.1) 0%, transparent 50%), radial-gradient(ellipse at 70% 70%, rgba(167,139,250,0.1) 0%, transparent 50%); pointer-events: none; }
.login-container { position: relative; text-align: center; max-width: 400px; width: 100%; animation: fadeIn 0.6s ease; }
.login-hero { margin-bottom: 40px; }
.login-logo { width: 96px; height: 96px; border-radius: 24px; margin-bottom: 20px; box-shadow: 0 8px 32px rgba(96,165,250,0.2); }
.login-title { font-size: 2.8rem; font-weight: 900; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple), var(--accent-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -1px; margin-bottom: 8px; }
.login-subtitle { font-size: 1.2rem; color: var(--text-secondary); font-weight: 500; margin-bottom: 12px; }
.login-desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }
.btn-google-login { display: inline-flex; align-items: center; gap: 12px; padding: 14px 32px; background: white; color: #333; border: none; border-radius: var(--radius-md); font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all var(--transition-normal); box-shadow: 0 2px 12px rgba(0,0,0,0.2); margin-bottom: 24px; }
.btn-google-login:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.3); }
.btn-google-login:active { transform: translateY(0); }
.login-privacy { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

/* Hidden */
.hidden { display: none !important; }

/* Logbook Summary */
.logbook-summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 16px; font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; font-family: 'JetBrains Mono', monospace; }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-detail-grid { grid-template-columns: 1fr; }
    .form-row-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    #main-nav {
        padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 12px;
        gap: 12px; height: auto; min-height: auto;
        flex-wrap: wrap; border-bottom: 1px solid var(--border-color);
        box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    }
    .nav-brand { order: 1; }
    .nav-actions { order: 2; margin-left: auto; }
    .nav-tabs {
        margin-left: 0; order: 3; width: 100%;
        display: flex; justify-content: space-between;
        background: var(--bg-input); padding: 4px; border-radius: var(--radius-sm);
        margin-top: 6px;
    }
    .nav-tab { flex: 1; justify-content: center; padding: 8px 12px; }
    .btn-add-flight span { display: inline; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    #app-content { padding: calc(144px + env(safe-area-inset-top, 0px)) 16px 64px; }
    .flights-list .flight-item { grid-template-columns: 1fr 1fr; gap: 8px; }
    .form-row, .form-row-3 { grid-template-columns: 1fr; }
    .form-row-4 { grid-template-columns: 1fr 1fr; }
    .times-grid { grid-template-columns: 1fr; gap: 12px; }
    .time-col-center { flex-direction: row; }
    .delay-indicator { min-width: auto; }
    .computed-times-bar { flex-direction: row; }
    .logbook-controls { flex-direction: column; }
    .view-header h1 { font-size: 1.5rem; }
    .stat-value { font-size: 1.3rem; }
    .settings-buttons { flex-direction: column; }

    /* Mobile (Phone) Specific: Stack Taxi times vertically to avoid truncation */
    @media (max-width: 600px) {
        .taxi-times-bar { flex-direction: column !important; gap: 8px !important; width: 100% !important; }
        .taxi-time-item { width: 100% !important; box-sizing: border-box !important; }
        .fuel-stats-panel { flex-direction: column; gap: 8px; }
        .fuel-stat-main { order: -1; padding: 14px 10px; }
    }

    /* === FULL-SCREEN FLIGHT MODAL ON MOBILE (KEIN HORIZONTALES SCROLLEN, SAFE AREA RESPEKTIERT) === */
    .modal-overlay#flight-modal {
        padding: 0; align-items: stretch;
        overflow-x: hidden; width: 100vw;
    }
    .modal-overlay#flight-modal .modal.modal-flight {
        max-width: 100vw; width: 100vw; height: 100%; max-height: 100%;
        border-radius: 0; display: flex; flex-direction: column;
        overflow-x: hidden; border: none;
    }
    .modal-overlay#flight-modal .modal-header {
        position: sticky; top: 0; z-index: 20; flex-shrink: 0;
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
        padding-left: 18px; padding-right: 18px; padding-bottom: 12px;
        background: var(--bg-secondary); border-bottom: 1px solid var(--border-color);
    }
    .modal-overlay#flight-modal .flight-form {
        flex: 1; overflow-y: auto; overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 14px 16px 130px;
        width: 100%; max-width: 100%; box-sizing: border-box;
    }
    .modal-overlay#flight-modal .flight-form .form-actions {
        position: fixed; bottom: 0; left: 0; right: 0;
        padding: 12px 16px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        background: var(--bg-secondary); border-top: 1px solid var(--border-color);
        z-index: 20; box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
    }
    .modal-overlay#flight-modal .form-section { margin-bottom: 16px; padding-bottom: 14px; }
    .modal-overlay#flight-modal .form-section-title { font-size: 0.88rem; margin-bottom: 12px; }
    .modal-overlay#flight-modal .form-group label { font-size: 0.75rem; }
    .modal-overlay#flight-modal .form-group input,
    .modal-overlay#flight-modal .form-group select { min-height: 44px; font-size: 16px; }
    .modal-overlay#flight-modal .toggle-btn { min-height: 44px; padding: 10px 20px; }
    .modal-overlay#flight-modal .stepper-field { min-height: 44px; }
    .modal-overlay#flight-modal .time-step-btn { min-width: 44px; min-height: 44px; }
    .modal-overlay#flight-modal .stepper-btn { min-width: 28px; min-height: 20px; }
    .modal-overlay#flight-modal .btn-manage-dd { min-width: 44px; min-height: 44px; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .nav-tab span { display: none; }
}

/* iOS Safe Areas */
@supports (padding: env(safe-area-inset-top)) {
    #main-nav { padding-top: env(safe-area-inset-top); height: calc(var(--nav-height) + env(safe-area-inset-top)); }
    #app-content { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .login-screen { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

/* === Layout Variants for Flight Form === */
.layout-columns .flight-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.layout-columns .flight-form .form-section:nth-child(1) { grid-column: 1 / -1; }
.layout-columns .flight-form .form-section:nth-child(5) { grid-column: 1 / -1; }
.layout-columns .flight-form .form-section:nth-child(6) { grid-column: 1 / -1; }
.layout-columns .flight-form .form-actions { grid-column: 1 / -1; }

.layout-tabbed .form-section { display: none; }
.layout-tabbed .form-section.tab-active { display: block; }
.layout-tabbed .form-section:first-child { display: block; }
.form-tabs { display: flex; gap: 4px; padding: 12px 28px 0; overflow-x: auto; }
.form-tab-btn { padding: 8px 16px; border: none; background: var(--bg-input); color: var(--text-muted); font-family: inherit; font-size: 0.8rem; font-weight: 600; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; }
.form-tab-btn.active { background: var(--bg-secondary); color: var(--accent-blue); }
.form-tab-btn:hover:not(.active) { color: var(--text-primary); }

.layout-compact .form-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; margin-bottom: 12px; }
.layout-compact .form-section-title { cursor: pointer; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
.layout-compact .form-section-title::after { content: '▾'; transition: transform 0.2s; }
.layout-compact .form-section.collapsed .form-section-title::after { transform: rotate(-90deg); }
.layout-compact .form-section.collapsed > *:not(.form-section-title) { display: none; }
.layout-compact .form-section-title.has-content { margin-bottom: 16px; }

@media (max-width: 768px) {
    .layout-columns .flight-form { grid-template-columns: 1fr; }
    .form-tabs { padding: 12px 16px 0; }
}

/* === Route Display Toggle Checkboxes === */
.route-display-toggles { display: flex; align-items: center; gap: 10px; }
.route-toggle-label { display: flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; padding: 5px 10px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 20px; transition: all var(--transition-fast); user-select: none; white-space: nowrap; }
.route-toggle-label:hover { border-color: var(--border-active); color: var(--text-primary); }
.route-toggle-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent-blue); cursor: pointer; }
.route-toggle-label:has(input:checked) { border-color: var(--accent-blue); background: rgba(96,165,250,0.1); color: var(--accent-blue); }

/* === Time Step Buttons (+/-) === */
.time-input-wrapper { display: flex; align-items: center; gap: 4px; }
.time-input-wrapper .time-input { flex: 1; }
.time-step-btn { width: 32px; height: 36px; border: 1px solid var(--border-color); background: var(--bg-elevated); color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer; font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); flex-shrink: 0; }
.time-step-btn:hover { background: rgba(96,165,250,0.15); color: var(--accent-blue); border-color: var(--accent-blue); }
.time-step-btn:active { transform: scale(0.92); }

/* === Stepper Input === */
.stepper-input { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 1.1rem; font-weight: 600; color: var(--text-primary); min-width: 40px; text-align: center; flex: 1; background: transparent; border: none; outline: none; -moz-appearance: textfield; width: 60px; padding: 4px; }
.stepper-input::-webkit-outer-spin-button, .stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-input:focus { color: var(--accent-blue); }

/* === Rounded SE Toggle Switch === */
.se-toggle { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.se-toggle input { display: none; }
.se-toggle-track { position: relative; width: 34px; height: 18px; background: rgba(148,163,192,0.15); border-radius: 10px; transition: background var(--transition-fast); flex-shrink: 0; }
.se-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--text-muted); border-radius: 50%; transition: all var(--transition-fast); }
.se-toggle input:checked + .se-toggle-track { background: rgba(96,165,250,0.3); }
.se-toggle input:checked + .se-toggle-track .se-toggle-thumb { left: 18px; background: var(--accent-blue); }

/* === File Upload Area === */
.file-upload-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; border: 2px dashed var(--border-color); border-radius: var(--radius-md); background: var(--bg-input); color: var(--text-muted); cursor: pointer; transition: all var(--transition-fast); position: relative; min-height: 80px; }
.file-upload-area:hover { border-color: var(--accent-blue); background: rgba(96,165,250,0.04); color: var(--text-secondary); }
.file-upload-area svg { opacity: 0.5; }
.file-upload-area span { font-size: 0.82rem; font-weight: 500; }
.file-input-hidden { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-upload-area.drag-over { border-color: var(--accent-blue); background: rgba(96,165,250,0.08); }

/* === Form Row 4 responsive fix === */
.form-row-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
    .form-row-4 { grid-template-columns: 1fr 1fr; }
}

/* === Draft Badge === */
.draft-badge { background: rgba(251,191,36,0.15); color: var(--accent-amber); border: 1px solid rgba(251,191,36,0.3); padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; margin-right: 8px; vertical-align: middle; }

/* === De-Icing Toggle === */
.deicing-toggle { display: flex !important; align-items: center; gap: 8px; cursor: pointer; flex-direction: row !important; padding: 10px 0; min-height: 44px; }
.deicing-toggle input { width: 18px; height: 18px; accent-color: var(--accent-blue); cursor: pointer; }
.deicing-toggle span { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.deicing-toggle:has(input:checked) span { color: var(--accent-blue); }

/* Stepper single clean box */
/* Stepper single clean box - NO inner borders or boxes */
.stepper-field {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 2px 6px 2px 10px;
    min-height: 44px;
    box-sizing: border-box;
}
.form-group .stepper-field input.stepper-input,
.stepper-field .stepper-input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 38px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    text-align: center !important;
    flex: 1 !important;
    width: 60px !important;
}
.toggle-group.toggle-fit {
    width: fit-content !important;
    max-width: fit-content !important;
    display: inline-flex !important;
}

/* === 4-Item Horizontal Cycle Buttons Row (THR, FLAPS, REV, BRK) === */
.cycle-buttons-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
}

.cycle-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    transition: opacity var(--transition-fast), filter var(--transition-fast);
}

.cycle-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    user-select: none;
}

.cycle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 4px;
    min-height: 44px;
    cursor: pointer;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: all var(--transition-fast);
    touch-action: manipulation;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.cycle-btn:hover:not(:disabled) {
    border-color: var(--accent-blue);
    background: var(--bg-card-hover);
    color: #fff;
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.25);
}

.cycle-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.cycle-val {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Distinct value highlighting */
.cycle-btn.val-none .cycle-val {
    color: var(--text-muted);
    font-weight: 500;
}

.cycle-btn[data-val="A/THR"] {
    border-color: rgba(52, 211, 153, 0.45);
    color: #34d399;
}

.cycle-btn[data-val="MAN/THR"] {
    border-color: rgba(96, 165, 250, 0.4);
    color: var(--accent-blue);
}

.cycle-btn[data-val="MAX"] {
    border-color: rgba(245, 158, 11, 0.45);
    color: #fbbf24;
}

.cycle-btn[data-val="MED"] {
    border-color: rgba(96, 165, 250, 0.4);
    color: var(--accent-blue);
}

/* PM inactive/disabled state for THR */
.cycle-col.is-pm {
    opacity: 0.22 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    user-select: none !important;
}

.cycle-col.is-pm .cycle-btn {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
}

@media (max-width: 480px) {
    .cycle-buttons-row {
        gap: 6px;
    }
    .cycle-btn {
        font-size: 0.82rem;
        padding: 8px 2px;
        min-height: 40px;
    }
    .cycle-label {
        font-size: 0.7rem;
    }
}

/* Flight detail landing config strip */
.fd-landing-config-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.fd-cfg-pill {
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
}

.fd-cfg-pill strong {
    color: var(--text-primary);
}

.fd-cfg-pill.cfg-athr strong {
    color: #34d399;
}

.fd-cfg-pill.cfg-man strong {
    color: var(--accent-blue);
}

/* Switch Row (for De-Icing & Highlight Flight) */
.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    min-height: 44px;
    box-sizing: border-box;
}
.switch-row-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 480px) {
    .form-row-2 {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}

/* Manage DD Modal – Enlarged, full vertical scroll, locked horizontal */
.modal-manage {
    max-width: 580px;
    width: 95%;
}
.manage-dd-content {
    padding: 16px 22px 24px;
}
.manage-dd-add {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.manage-dd-add input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 16px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    min-height: 44px;
    box-sizing: border-box;
}
.manage-dd-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.manage-dd-list {
    list-style: none;
    max-height: 52vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-right: 4px;
}
.manage-dd-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    background: var(--bg-input);
    touch-action: pan-y !important;
    user-select: none;
    -webkit-user-select: none;
}
.manage-dd-list li.reorder-active {
    animation: shake-reorder 0.25s infinite;
    border-color: var(--accent-blue) !important;
    background: var(--bg-card-hover) !important;
}
.manage-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex: 1;
}
.manage-item-name {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.btn-item-rename {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.6;
    padding: 4px;
}
.btn-item-rename:hover { opacity: 1; }
.manage-item-ctrls {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Shake animation on items */
@keyframes shake-reorder {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    20% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    40% { transform: translate(1px, -1px) rotate(0.5deg); }
    60% { transform: translate(-1px, 1px) rotate(0deg); }
    80% { transform: translate(1px, 1px) rotate(0.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* === OVERVIEW / HAUPTÜBERSICHT === */
.ov-hero {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: grid;
    grid-template-columns: 1.3fr 2fr;
    gap: 20px;
    margin-bottom: 20px;
    align-items: center;
}
.ov-hero-main {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    padding-right: 20px;
}
.ov-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    font-weight: 600;
}
.ov-big {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--color-accent, #34d399);
    margin: 4px 0;
}
.ov-sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.ov-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ov-cell {
    display: flex;
    flex-direction: column;
}
.ov-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2px;
}

.ov-card {
    padding: 20px 24px;
    margin-bottom: 20px;
}
.ov-periods {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}
.ov-period-cell {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 8px;
    text-align: center;
}
.ov-period-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.ov-period-hrs {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-accent, #34d399);
}
.ov-period-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.ov-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.ov-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* FTL Limits */
.ftl-bar-group {
    margin-bottom: 14px;
}
.ftl-bar-group:last-child {
    margin-bottom: 0;
}
.ftl-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.ftl-val {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--color-gold, #eab308) !important;
}
.ftl-track {
    height: 8px;
    background: var(--bg-surface-elevated, var(--bg-input, #121214));
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-subtle, var(--border-color, #27272a));
}
.ftl-fill {
    height: 100%;
    background: var(--color-gold, var(--color-accent, #eab308)) !important;
    background-color: var(--color-gold, var(--color-accent, #eab308)) !important;
    border-radius: 4px;
    transition: width 0.4s ease;
}
.ftl-fill.warn {
    background: linear-gradient(90deg, var(--color-gold-hover, #facc15), var(--accent-red, #ef4444)) !important;
}

/* Duty (PF vs PM): PF in Sky Blue (#38bdf8), PM in Gold (#eab308) */
.duty-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.duty-box {
    flex: 1;
    background: var(--bg-surface-elevated, var(--bg-input, #121214));
    border: 1px solid var(--border-subtle, var(--border-color, #27272a));
    border-radius: var(--radius-sm);
    padding: 10px;
    text-align: center;
}
.duty-box.pf .duty-hrs,
.duty-pf-val {
    color: var(--color-accent-blue, #38bdf8) !important;
}
.duty-box.pm .duty-hrs,
.duty-pm-val {
    color: var(--color-gold, #eab308) !important;
}
.duty-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary, #a1a1aa);
    margin-bottom: 2px;
}
.duty-hrs {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 800;
}
.duty-sub {
    font-size: 0.72rem;
    color: var(--text-secondary, #a1a1aa);
    margin-top: 2px;
}
.duty-bar {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    margin-bottom: 8px;
    border: 1px solid var(--border-subtle, var(--border-color, #27272a));
    background: var(--bg-surface-elevated, #121214);
}
.duty-bar-pf,
.role-bar-pf {
    background: var(--color-accent-blue, #38bdf8) !important;
    background-color: var(--color-accent-blue, #38bdf8) !important;
    transition: width 0.3s;
}
.duty-bar-pm,
.role-bar-pm {
    background: var(--color-gold, #eab308) !important;
    background-color: var(--color-gold, #eab308) !important;
    transition: width 0.3s;
}
.duty-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary, #a1a1aa);
    font-weight: 600;
}
.duty-legend .pf-legend {
    color: var(--color-accent-blue, #38bdf8) !important;
}
.duty-legend .pm-legend {
    color: var(--color-gold, #eab308) !important;
}

/* === MAP TOOLBAR & VIEWS === */
.map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.seg-control {
    display: inline-flex;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 3px;
    gap: 2px;
}
.seg-btn {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.seg-btn.active {
    background: var(--accent-blue);
    color: white;
}
.seg-btn:hover:not(.active) {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}
.seg-control-sm .seg-btn {
    padding: 3px 10px;
    font-size: 0.75rem;
}
.map-summary {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
}
.map-card {
    padding: 0 !important;
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-md);
    height: 600px;
    min-height: 480px;
}
#flight-map,
#map {
    height: 100%;
    width: 100%;
    min-height: 400px;
    position: relative;
    z-index: 1;
    background: #111827;
}
body.theme-light #flight-map,
body.theme-clean #flight-map,
body.theme-liquid-glass #flight-map,
body.theme-light #map,
body.theme-clean #map,
body.theme-liquid-glass #map {
    background: #f8fafc;
}
path.route-arc-line {
    transition: stroke-opacity 0.2s ease, stroke-width 0.2s ease, filter 0.2s ease;
}
path.route-arc-glow {
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.65));
}
path.route-straight-line {
    transition: stroke 0.2s ease, stroke-width 0.2s ease, stroke-opacity 0.2s ease;
}
path.route-straight-line:hover {
    stroke: #38bdf8;
    stroke-width: 3.5px;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.75));
}
path.route-straight-line.route-selected,
path.route-selected,
path.route-arc-selected {
    filter: drop-shadow(0 0 6px #38bdf8) drop-shadow(0 0 14px rgba(56, 189, 248, 0.85));
}
path.airport-waypoint-dot {
    pointer-events: none;
    transition: r 0.15s ease, stroke-width 0.15s ease, fill-opacity 0.15s ease;
}

/* Clean EFB-style floating labels for map */
.leaflet-tooltip.efb-airport-label {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #f8fafc !important; /* slate-50 */
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9), -1px -1px 2px rgba(0, 0, 0, 0.9) !important;
  pointer-events: none !important;
}
/* Remove the tooltip triangle pointer */
.leaflet-tooltip.efb-airport-label::before {
  display: none !important;
}
.map-route-hud {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 16px rgba(56, 189, 248, 0.25);
    color: #f8fafc;
    pointer-events: auto;
    max-width: 90%;
}
.map-route-hud.hidden {
    display: none !important;
}
.map-route-hud-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.map-route-hud-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.map-route-hud-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00f0ff;
    box-shadow: 0 0 8px #00f0ff;
    flex-shrink: 0;
}
.map-route-hud-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
}
.map-route-hud-sub {
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.76rem;
    padding-left: 16px;
}
.map-route-hud-text {
    color: #f8fafc;
}
.map-route-hud-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.map-route-hud-btn {
    background: rgba(56, 189, 248, 0.16);
    border: 1px solid rgba(56, 189, 248, 0.45);
    color: #38bdf8;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.map-route-hud-btn:hover {
    background: rgba(56, 189, 248, 0.3);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}
.map-route-hud-close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    font-size: 0.9rem;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s ease;
}
.map-route-hud-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #f8fafc;
}
.map-route-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 480px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.map-route-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.map-route-item:hover {
    border-color: var(--border-active);
    background: var(--bg-card-hover);
    transform: translateX(2px);
}
.map-route-code {
    font-family: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.map-route-cnt {
    font-size: 0.82rem;
    color: var(--accent-blue);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(96, 165, 250, 0.12);
    padding: 3px 8px;
    border-radius: 4px;
}

/* === INVISIBLE AIRPORT TAP TARGETS & MAP HUB ACTION SHEET === */
.airport-tap-hitbox {
    cursor: pointer;
    pointer-events: auto !important;
    outline: none;
}

/* "In der Nähe auswählen" Nearby Modal */
.nearby-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 16px;
    box-sizing: border-box;
    animation: fadeInNearby 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nearby-modal-card {
    width: 100%;
    max-width: 440px;
    background: rgba(15, 23, 42, 0.95); /* bg-slate-900/95 */
    border: 1px solid rgba(30, 41, 59, 1); /* border-slate-800 */
    border-radius: 1rem; /* rounded-2xl */
    padding: 1rem; /* p-4 */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7); /* shadow-2xl */
    backdrop-filter: blur(12px); /* backdrop-blur-md */
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.nearby-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(30, 41, 59, 0.7);
    margin-bottom: 0.25rem;
}

.nearby-modal-title {
    color: #ffffff; /* text-white */
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    margin: 0;
    letter-spacing: -0.01em;
}

.nearby-modal-close {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.5);
    color: #94a3b8;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s ease;
}

.nearby-modal-close:hover {
    background: rgba(51, 65, 85, 0.8);
    color: #ffffff;
}

.nearby-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(85vh - 70px);
}

.nearby-modal-list {
    display: flex;
    flex-direction: column;
}

.nearby-modal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(30, 41, 59, 0.7); /* divide-y divide-slate-800/70 */
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.nearby-modal-item:last-child {
    border-bottom: none;
}

.nearby-modal-item:hover {
    background: rgba(30, 41, 59, 0.45);
}

.nearby-item-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nearby-item-title {
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nearby-item-sub {
    color: #94a3b8;
    font-size: 0.78rem;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nearby-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nearby-airport-badge {
    background: rgba(8, 47, 73, 0.6); /* bg-sky-950/60 */
    border: 1px solid rgba(7, 89, 133, 0.5); /* border-sky-800/50 */
    color: #38bdf8; /* text-sky-400 */
    font-family: 'JetBrains Mono', monospace; /* font-mono */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    padding: 3px 10px; /* px-2.5 py-1 */
    border-radius: 0.375rem; /* rounded-md */
    letter-spacing: 0.3px;
}

.nearby-route-badge {
    background: rgba(8, 47, 73, 0.4);
    border: 1px solid rgba(7, 89, 133, 0.4);
    color: #38bdf8;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 0.375rem;
}

@keyframes fadeInNearby {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.map-hub-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
    padding: 20px;
    box-sizing: border-box;
}
.map-hub-overlay.active {
    opacity: 1;
    visibility: visible;
}
.map-hub-sheet {
    width: 100%;
    max-width: 480px;
    background: var(--bg-modal);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 20px rgba(56, 189, 248, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(16px) scale(0.98);
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 85vh;
}
.map-hub-overlay.active .map-hub-sheet {
    transform: translateY(0) scale(1);
}
@media (max-width: 640px) {
    .map-hub-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .map-hub-sheet {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        max-height: 82vh;
        transform: translateY(100%);
    }
    .map-hub-overlay.active .map-hub-sheet {
        transform: translateY(0);
    }
}
.map-hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}
.map-hub-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.map-hub-code-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.map-hub-badge-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--accent-blue);
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.map-hub-badge-tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}
.map-hub-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 4px 0 0;
    line-height: 1.25;
}
.map-hub-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.map-hub-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}
.map-hub-content {
    padding: 16px 20px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Section 1: Prominent Airport Action Card */
.map-hub-action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(167, 139, 250, 0.1));
    border: 1.5px solid rgba(56, 189, 248, 0.35);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    color: inherit;
}
.map-hub-action-card:hover {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(167, 139, 250, 0.16));
    border-color: var(--accent-blue);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(56, 189, 248, 0.22);
}
.map-hub-action-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.16);
    border: 1px solid rgba(56, 189, 248, 0.3);
}
.map-hub-action-body {
    flex: 1;
    min-width: 0;
}
.map-hub-action-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.map-hub-action-sub {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.4;
}
.map-hub-action-arrow {
    color: var(--accent-blue);
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.map-hub-action-card:hover .map-hub-action-arrow {
    transform: translateX(3px);
}

/* Section 2: Connected Routes */
.map-hub-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}
.map-hub-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.map-hub-section-count {
    font-size: 0.75rem;
    color: var(--accent-blue);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}
.map-hub-routes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
}
.map-hub-route-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.map-hub-route-item:hover {
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateX(2px);
}
.map-hub-ri-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.map-hub-ri-icon {
    font-size: 0.95rem;
    color: var(--accent-blue);
    flex-shrink: 0;
}
.map-hub-ri-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.map-hub-ri-route {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}
.map-hub-ri-cities {
    font-size: 0.74rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.map-hub-ri-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.map-hub-ri-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-teal);
    background: rgba(45, 212, 191, 0.1);
    padding: 3px 8px;
    border-radius: 999px;
}
.map-hub-ri-arrow {
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: transform 0.15s ease;
}
.map-hub-route-item:hover .map-hub-ri-arrow {
    color: var(--accent-blue);
    transform: translateX(2px);
}

/* Light & Clean Theme Overrides */
body.theme-light .map-hub-sheet,
body.theme-clean .map-hub-sheet,
body.theme-liquid-glass .map-hub-sheet {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(203, 213, 225, 0.8);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 0 20px rgba(56, 189, 248, 0.15);
}
body.theme-light .map-hub-header,
body.theme-clean .map-hub-header,
body.theme-liquid-glass .map-hub-header {
    background: rgba(241, 245, 249, 0.6);
}
body.theme-light .map-hub-route-item,
body.theme-clean .map-hub-route-item,
body.theme-liquid-glass .map-hub-route-item {
    background: #ffffff;
    border-color: rgba(226, 232, 240, 0.9);
}
body.theme-light .map-hub-route-item:hover,
body.theme-clean .map-hub-route-item:hover,
body.theme-liquid-glass .map-hub-route-item:hover {
    background: rgba(240, 249, 255, 0.95);
    border-color: rgba(56, 189, 248, 0.5);
}

/* === STATS DETAILED ANALYSIS MODAL (APPLE LIQUID GLASS) === */
.modal-stat-detail {
    max-width: 760px !important;
    width: 94vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-modal);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    padding: 0;
    overflow: hidden;
}
.stat-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}
.stat-modal-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.stat-badge-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--accent-blue);
    background: rgba(96, 165, 250, 0.12);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.stat-badge-kind {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.stat-modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.25;
}
.stat-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.stat-modal-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}
.stat-modal-scroll {
    padding: 20px 24px 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.stat-hero-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.stat-hero-pill {
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.shp-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.shp-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}
.pf-text { color: var(--accent-blue); }
.pm-text { color: var(--accent-purple); }

/* Metric Cards Grid */
.stat-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.stat-cell-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    transition: all var(--transition-fast);
}
.stat-cell-card:hover {
    border-color: var(--border-active);
    background: var(--bg-card-hover);
    transform: translateY(-1px);
}
.scc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.scc-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}
.scc-icon {
    font-size: 0.85rem;
    opacity: 0.8;
}
.scc-main {
    display: flex;
    flex-direction: column;
}
.scc-value {
    font-size: 1.3rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    line-height: 1.2;
}
.scc-value.delay-early { color: #22c55e; }
.scc-value.delay-late { color: #f97316; }
.scc-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.scc-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 6px;
}
.scc-p95 {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    display: block;
}
.scc-p95 strong {
    color: var(--text-secondary);
}

/* Runway distribution */
.stat-runway-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}
.stat-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.runway-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.runway-stats-table th {
    text-align: left;
    padding: 6px 8px;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}
.runway-stats-table td {
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    font-family: 'JetBrains Mono', monospace;
}

/* Tab buttons for Route analysis */
.stat-tabs {
    display: flex;
    background: var(--bg-input);
    padding: 3px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    gap: 4px;
}
.stat-tab-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}
.stat-tab-btn.active {
    background: var(--accent-blue);
    color: white;
}

/* Flights table */
.stat-flights-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}
.stat-flights-table-scroll {
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
}
.stat-flights-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.stat-flights-table th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    text-align: left;
    padding: 8px 10px;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    z-index: 2;
}
.stat-flights-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.stat-flights-table tr.clickable-row {
    cursor: pointer;
    transition: background var(--transition-fast);
}
.stat-flights-table tr.clickable-row:hover {
    background: var(--bg-card-hover);
}
.stat-flights-table tr.clickable-row:hover td {
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .modal-stat-detail {
        max-height: 94vh;
        width: 96vw;
    }
    .stat-modal-header {
        padding: 14px 16px;
    }
    .stat-modal-scroll {
        padding: 14px 16px 20px;
        gap: 16px;
    }
    .stat-hero-summary {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .stat-grid-modern {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .ov-hero {
        grid-template-columns: 1fr;
    }
    .ov-hero-main {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 16px;
    }
    .ov-periods {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .ov-two-col {
        grid-template-columns: 1fr;
    }
    .modal-manage {
        max-width: 100vw;
        width: 100vw;
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        margin-top: auto;
    }
    .map-card {
        height: 420px;
        min-height: 400px;
    }
    #flight-map,
    #map {
        height: 100%;
        min-height: 400px;
    }
}

/* === ADVANCED LOGBOOK FILTER BAR & TYPOGRAPHY === */
.logbook-filter-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
    width: 100%;
}
.filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.filter-row-primary {
    justify-content: space-between;
}
.filter-row-secondary {
    justify-content: space-between;
    padding-top: 4px;
}
.filter-presets {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
}
.preset-pill {
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}
.preset-pill:hover {
    color: var(--text-primary);
    border-color: rgba(96,165,250,0.4);
}
.preset-pill.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
    box-shadow: 0 2px 10px rgba(96,165,250,0.3);
}

.filter-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    box-sizing: border-box;
}
.filter-date-lbl {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}
.filter-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
}
.filter-lbl {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}
.filter-date-input {
    border: none !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    font-family: inherit !important;
    font-size: 0.82rem !important;
    padding: 4px 0 !important;
    outline: none !important;
}
.btn-clear-filter {
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.25);
    color: var(--accent-red);
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-clear-filter:hover {
    background: rgba(239,68,68,0.22);
}
.filter-selects-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Live Filter Summary Bar */
.logbook-summary-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: linear-gradient(135deg, var(--bg-card), var(--bg-elevated));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    margin-top: 14px;
    margin-bottom: 16px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.lsb-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.lsb-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.lsb-stat-num {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1.05rem;
}
.lsb-duty-split {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
}
.lsb-badge-pf {
    color: var(--accent-blue);
    font-weight: 600;
}
.lsb-badge-pm {
    color: var(--accent-purple);
    font-weight: 600;
}

/* Logbook Table Typography & Strict Non-Wrapping */
.flights-table-container table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.flights-table-container th {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0px !important;
    box-sizing: border-box !important;
    position: relative;
    border-right: 1px solid rgba(51, 65, 85, 0.8) !important; /* border-r border-slate-700/80 */
}
.flights-table-container td {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0px !important;
    box-sizing: border-box !important;
}
.flights-table-container td.cell-route {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.flights-table-container td.cell-reg {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-variant-numeric: tabular-nums;
}
.flights-table-container td.cell-date {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
}
.flights-table-container td.mono {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* === DASHBOARD INTEL CARDS (APPROACH, THRUST, FUEL & PAYLOAD) === */
.intel-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.intel-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.intel-item-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.82rem;
}
.intel-name {
    font-weight: 600;
    color: var(--text-primary);
}
.intel-sub {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.intel-bar-track {
    width: 100%;
    height: 6px;
    background: rgba(148,163,192,0.12);
    border-radius: 4px;
    overflow: hidden;
}
.intel-bar-fill {
    height: 100%;
    background: var(--color-accent, #34d399);
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* Approaches Role Filter Pills */
.app-role-btn {
    cursor: pointer;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 9999px;
    transition: all 0.15s ease;
    user-select: none;
    line-height: 1.4;
}
.app-role-btn.active {
    background: var(--color-accent-subtle, rgba(52, 211, 153, 0.15));
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.app-role-btn:not(.active) {
    background: rgba(30, 41, 59, 0.6);
    color: #94a3b8;
    border: 1px solid rgba(51, 65, 85, 0.6);
}
.app-role-btn:not(.active):hover {
    color: #e2e8f0;
}

/* Thrust Split Card */
.thrust-split-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    justify-content: center;
}
.thrust-box-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.thrust-box {
    padding: 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
}
.thrust-box.manual {
    border-color: rgba(96,165,250,0.3);
}
.thrust-box.athr {
    border-color: rgba(167,139,250,0.3);
}
.thrust-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.thrust-val {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    margin: 4px 0 2px;
    color: var(--text-primary);
}
.thrust-pct {
    font-size: 0.75rem;
    color: var(--accent-blue);
    font-weight: 600;
}
.thrust-box.athr .thrust-pct {
    color: var(--accent-purple);
}

/* Operative Effizienz & Payload (Modular Master Card) */
.eff-master-card {
    display: flex;
    flex-direction: column;
}
.eff-master-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.eff-header-titles h2 {
    margin: 0;
}

/* Fleet Filter Popover */
.eff-fleet-filter-wrapper {
    position: relative;
    display: inline-flex;
}
.eff-fleet-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    transition: all 0.2s ease;
}
.eff-fleet-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}
.eff-fleet-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
    padding: 14px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}
.eff-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
}
.eff-popover-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 6px;
}
.eff-popover-close:hover {
    color: var(--text-primary);
}
.eff-quick-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.eff-preset-btn {
    padding: 4px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}
.eff-preset-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}
.eff-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.eff-cb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}
.eff-cb-row input {
    cursor: pointer;
    accent-color: var(--accent-blue);
}

/* Sub-sections Grid */
.eff-subsections-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-top: 14px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
@media (max-width: 767px) {
    .eff-subsections-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Sub-box Card */
.eff-sub-box {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.eff-sub-box.eff-dragging {
    opacity: 0.4;
    border-style: dashed;
}
.eff-sub-box.eff-drag-over {
    border-color: var(--accent-blue) !important;
    transform: scale(1.015);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25);
}
.eff-sub-box.eff-touch-active {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(-3px);
    border-color: var(--accent-blue);
    z-index: 20;
}

/* Sub-box Header */
.eff-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    user-select: none;
}
.eff-box-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.eff-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: color 0.15s;
}
.eff-drag-handle:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}
.eff-box-title {
    font-size: 0.75rem;
    font-weight: 500;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eff-box-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 400;
}
.eff-box-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.eff-info-btn {
    position: static !important;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    border: 1px solid #334155;
    background: rgba(30, 41, 59, 0.6);
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    padding: 0;
}
.eff-info-btn:hover, .eff-info-btn.active {
    color: #6ee7b7;
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

/* Master Card Container & Sub-boxes: Prevent Clipping */
.eff-master-card,
.eff-subsections-grid,
.eff-sub-box,
.dash-widget[data-widget-id="fuel"] {
    overflow: visible !important;
}

/* Tooltip Bubble */
.eff-tooltip-bubble {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: #0f172a;
    border: 1px solid rgba(51, 65, 85, 0.9);
    border-radius: 0.75rem;
    padding: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75);
    font-size: 0.75rem;
    color: #e2e8f0;
    line-height: 1.5;
    max-width: 280px;
    width: calc(100% - 16px);
    box-sizing: border-box;
    pointer-events: auto;
    animation: fadeIn 0.15s ease;
}
.eff-tooltip-bubble.eff-tooltip-up,
.eff-tooltip-bubble.bottom-full,
.eff-sub-box[data-eff-id="pax-cargo"] .eff-tooltip-bubble,
.eff-sub-box[data-eff-id="trip-fuel"] .eff-tooltip-bubble {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}
.eff-tooltip-bubble.active {
    display: block;
}
.eff-tooltip-title {
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-family: inherit;
}
.eff-tooltip-body {
    white-space: pre-line;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Metric Rows (Median-First) */
.eff-metrics-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.eff-metric-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.eff-metric-cell.primary {
    flex: 1.2;
}
.eff-metric-cell.secondary {
    flex: 1;
    text-align: right;
    align-items: flex-end;
}
.eff-metric-lbl {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-family: inherit;
}
.eff-metric-val {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}
.eff-metric-val.primary {
    font-size: 1.35rem;
    color: var(--color-accent, #34d399);
    font-weight: 700;
}
.eff-metric-val.secondary {
    font-size: 1.15rem;
    color: #cbd5e1;
    font-weight: 500;
}

/* Hairline Layout & Avionics Range Bar for Ops Performance & Payload */
.eff-hairline-divider {
    border: 0;
    border-top: 1px solid rgba(30, 41, 59, 0.8);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
    width: 100%;
}
.eff-range-track {
    height: 3px;
    background: #1e293b;
    border-radius: 9999px;
    position: relative;
    margin: 0.375rem 0;
    width: 100%;
}
.eff-range-segment {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(16, 185, 129, 0.45);
    border-radius: 9999px;
}
.eff-range-median-notch {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 7px;
    background: #ffffff;
    border-radius: 1px;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(52, 211, 153, 0.8);
}
.eff-hairline-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 6px;
    font-size: 10px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
}
.eff-bottom-left,
.eff-bottom-center,
.eff-bottom-right {
    font-size: 10px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    white-space: nowrap;
}

/* Badges Sub-Row */
.eff-badges-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.eff-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    font-size: 0.72rem;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    white-space: nowrap;
}
.eff-q-lbl {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent-blue);
}
.eff-sub-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-left: auto;
}

/* Empty Notice */
.eff-empty-notice {
    grid-column: 1 / -1;
    padding: 14px 18px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-sm);
    color: var(--accent-amber);
    font-size: 0.82rem;
    text-align: center;
    font-weight: 500;
}

/* Legacy class support if needed */
.fuel-intel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 14px;
}
.fuel-intel-cell {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fic-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.fic-val {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent-teal);
    margin: 2px 0;
}
.fic-q95 {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.fic-q95 strong {
    color: var(--text-primary);
}
.fic-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
}
@media (max-width: 900px) {
    .fuel-intel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
}
@media (max-width: 500px) {
    .fuel-intel-grid {
        grid-template-columns: 1fr;
    }
}

/* === STATS VIEW (AIRPORTS & ROUTES) === */
.stats-view-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.stats-content-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 20px;
}
.airports-card-grid, .routes-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.stat-card-item {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.stat-card-item:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.sci-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}
.sci-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}
.sci-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--accent-blue);
    background: rgba(96,165,250,0.12);
    padding: 2px 6px;
    border-radius: 4px;
}
.sci-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 0.8rem;
    margin: 8px 0;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.sci-stat-col {
    display: flex;
    flex-direction: column;
}
.sci-stat-lbl {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
}
.sci-stat-val {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
}
.sci-action-btn {
    align-self: flex-end;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-blue);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

/* Dark Terrain Mode Cockpit Filter */
.map-style-terrain .leaflet-tile-pane,
#flight-map.map-style-terrain .leaflet-tile-pane,
#map.map-style-terrain .leaflet-tile-pane {
    filter: invert(100%) hue-rotate(180deg) brightness(75%) contrast(110%) saturate(30%);
}

/* Map Disambiguation Modal */
.disambig-body {
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 70vh;
    overflow-y: auto;
}
.disambig-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.disambig-item:hover {
    border-color: var(--accent-blue);
    background: var(--bg-card-hover);
    transform: translateX(3px);
}
.disambig-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.disambig-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}
.disambig-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.disambig-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(96,165,250,0.14);
    color: var(--accent-blue);
    font-weight: 600;
}

/* ===== SKYLOG v4.5 ENHANCEMENTS ===== */

/* Master Period Filter in Dashboard */
.dash-master-period-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-period-lbl {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Header Date & Screenshot Import Row (Side-by-Side) */
.header-date-import-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 0;
    width: 100%;
}
.header-date-group {
    flex: 1 1 42%;
    min-width: 140px;
}
.header-import-group {
    flex: 1 1 58%;
    min-width: 180px;
}
.import-col-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-secondary);
}
.header-import-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}
.btn-import-screenshot {
    flex: 1;
    height: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0 14px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease;
}
.btn-import-screenshot:hover {
    background: var(--primary-hover);
}
.btn-import-screenshot:active {
    transform: scale(0.98);
}
.btn-paste-ocr-text {
    height: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 0 12px;
    font-size: 0.8rem;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.btn-paste-ocr-text:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.screenshot-ocr-status {
    margin-top: 10px;
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    line-height: 1.4;
}
.screenshot-ocr-status.info {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--primary);
}
.screenshot-ocr-status.success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}
.screenshot-ocr-status.error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}
@media (max-width: 480px) {
    .header-date-import-row {
        flex-direction: column;
        gap: 10px;
    }
    .header-date-group,
    .header-import-group {
        width: 100%;
        flex: 1 1 100%;
    }
}

/* Compact Fuel Stats Panel in Add Flight modal (Trip Fuel Burn & L/PAX/100km) */
.fuel-stats-panel-compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    gap: 12px;
    padding: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: 8px;
}
.fuel-stats-panel-compact .fuel-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}
.fuel-stats-panel-compact .fs-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: 600;
}
.fuel-stats-panel-compact .fs-value {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
}

/* Mass & Balance: Pax - Load Factor - Cargo 3-column row */
.mb-payload-row {
    display: grid;
    grid-template-columns: 1fr minmax(85px, 115px) 1fr;
    gap: 12px;
    margin-bottom: 16px;
    align-items: flex-end;
}
.mb-pax-group,
.mb-cargo-group {
    min-width: 0;
}
.mb-lf-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}
.mb-lf-label {
    text-align: center !important;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mb-lf-display {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    height: 44px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    padding: 2px 10px;
    user-select: none;
}
.mb-lf-val {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}
body.theme-liquid-glass .mb-lf-display {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(203, 213, 225, 0.85);
}
@media (max-width: 480px) {
    .mb-payload-row {
        gap: 8px;
        grid-template-columns: 1fr minmax(75px, 95px) 1fr;
    }
}

/* Aircraft & Engine Intelligence cards & grids */
.aircraft-engines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.ae-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ae-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ae-badge {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(96, 165, 250, 0.15);
    color: var(--accent-blue);
    font-weight: 600;
}
.ae-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
}
.ae-item-row:last-child {
    border-bottom: none;
}
.ae-item-name {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
}
.ae-item-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.ae-item-stat {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
}
.ae-progress-bar {
    width: 100%;
    height: 5px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}
.ae-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent-blue);
}

/* Taxi & Legs Intel cards - Flush Grid Alignment */
.dash-widget[data-widget-id="taxi"],
.dash-widget[data-widget-id="legs"] {
    display: flex;
    flex-direction: column;
}
.dash-widget[data-widget-id="taxi"] .section-card,
.dash-widget[data-widget-id="legs"] .section-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}
.dash-widget[data-widget-id="taxi"] #ov-taxi-intel,
.dash-widget[data-widget-id="legs"] #ov-legs-intel {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.taxi-intel-grid, .legs-intel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    flex: 1;
    align-content: stretch;
}
.taxi-intel-card, .legs-intel-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 14px 12px;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}
.tic-lbl {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
}
.tic-val {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}
.tic-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Legs Activity Timeline & Scrollbar Utilities */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.legs-timeline-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.legs-timeline-container::-webkit-scrollbar {
    display: none;
}
.legs-month-block {
    user-select: none;
    flex-shrink: 0;
}
.legs-days-strip {
    display: flex;
    align-items: flex-end;
}
.legs-day-bar {
    display: inline-block;
    flex-shrink: 0;
}

/* Milestones Grid */
.milestones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    font-variant-numeric: tabular-nums;
}
.milestone-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all var(--transition-fast);
}
.milestone-card.achieved {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.05);
}
.milestone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.milestone-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}
.milestone-badge {
    font-size: 0.75rem;
}
.milestone-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.milestone-numbers {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.milestone-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.milestone-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.milestone-card.achieved .milestone-fill {
    background: #22c55e;
}

/* Top Airports Controls */
.top-ap-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.top-ap-toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.top-ap-exclude-input {
    padding: 4px 8px;
    font-size: 0.78rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    width: 170px;
    text-transform: uppercase;
}

/* Cockpit Gadgets View */
.gadgets-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.gadget-card {
    padding: 24px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Gadget: Airport Quick Lookup */
.airport-lookup-search-box {
    margin: 16px 0;
}
.airport-lookup-result-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeIn 0.2s ease-in-out;
}
.airport-lookup-result-card.hidden {
    display: none;
}
.alr-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}
.alr-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.alr-airport-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
}
.alr-city-country {
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.alr-badges {
    display: flex;
    gap: 6px;
}
.alr-badge-icao, .alr-badge-iata {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
}
.alr-badge-icao {
    background: rgba(96, 165, 250, 0.15);
    color: var(--accent-blue);
}
.alr-badge-iata {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}
.alr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    padding: 14px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}
.alr-item-lbl {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}
.alr-item-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2px;
}
.alr-history-box {
    padding: 12px 14px;
    background: rgba(96, 165, 250, 0.08);
    border-left: 3px solid var(--accent-blue);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.btn-alr-view-stats {
    padding: 6px 12px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

/* Compact Logbook List/Table */
.btn-compact-pill {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-compact-pill.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}
.compact-logbook-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.compact-flight-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: 'Inter', -apple-system, sans-serif;
}
.compact-flight-row:hover {
    border-color: var(--accent-blue);
    background: var(--bg-card-hover);
    transform: translateY(-1px);
}
.compact-col-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 75px;
}
.compact-col-route {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    flex: 1;
    margin: 0 12px;
}
.compact-col-route .route-arrow {
    color: var(--accent-blue);
    font-weight: 400;
}
.compact-col-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.compact-reg-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: var(--text-secondary);
}
.compact-col-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-blue);
    min-width: 55px;
    text-align: right;
}

/* Manage Approaches Modal Polish */
.modal-manage {
    max-width: 480px;
    touch-action: pan-y;
    overflow-x: hidden;
}
.modal-manage .manage-dd-content {
    display: flex;
    flex-direction: column;
    max-height: 75vh;
}
.manage-dd-add {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-card);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.manage-dd-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
    padding-top: 8px;
}

/* Airport Edit Modal & Gadget Extensions */
.modal-airport-edit {
    max-width: 560px;
    width: 95%;
}
.airport-edit-form {
    padding: 16px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    max-height: 75vh;
    -webkit-overflow-scrolling: touch;
}
.alr-badge-custom {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.alr-btn-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.btn-alr-edit {
    padding: 6px 12px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-alr-edit:hover {
    background: var(--bg-card-hover);
    border-color: var(--text-muted);
}
.btn-stat-edit {
    padding: 4px 10px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: 8px;
    vertical-align: middle;
    transition: background 0.15s;
}
.btn-stat-edit:hover {
    background: var(--bg-card-hover);
}
.alr-not-found {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-color);
}
.alr-nf-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.btn-alr-create {
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Multi-result matches bar in Airport Gadget */
.alr-matches-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}
.alr-matches-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.alr-matches-header strong {
    color: var(--text-primary);
}
.alr-matches-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 4px;
}
.alr-match-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.alr-match-pill:hover {
    border-color: var(--accent-blue);
    background: rgba(96, 165, 250, 0.08);
    color: var(--text-primary);
}
.alr-match-pill.active {
    background: rgba(96, 165, 250, 0.15);
    border-color: var(--accent-blue);
    color: var(--text-primary);
    font-weight: 700;
}
.alr-match-pill .amp-code {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--accent-blue);
}
.alr-match-pill .amp-city {
    color: var(--text-primary);
}
.alr-match-pill .amp-rwy {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 700;
}
.rwy-highlight {
    color: #fbbf24 !important;
    background: rgba(245, 158, 11, 0.15);
    padding: 1px 4px;
    border-radius: 3px;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.autocomplete-rwy-chip {
    display: inline-block;
    font-size: 0.65rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 4px;
}

/* ==========================================================================
   Enhanced Individual Flight Detail Modal (SkyLog v5.2)
   ========================================================================== */
#detail-modal .modal.modal-flight {
    max-width: 680px;
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
    overflow: hidden;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}
.fd-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
    gap: 12px;
}
.fd-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.fd-header-date {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.5px;
}
.fd-badges-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.fd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
}
.fd-badge-pf {
    background: rgba(96,165,250,0.18);
    color: #60a5fa;
    border: 1px solid rgba(96,165,250,0.35);
}
.fd-badge-pm {
    background: rgba(148,163,184,0.14);
    color: #94a3b8;
    border: 1px solid rgba(148,163,184,0.28);
}
.fd-badge-role {
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.fd-badge-special {
    background: rgba(245,158,11,0.18);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.38);
    text-transform: uppercase;
}
.fd-badge-warning {
    background: rgba(239,68,68,0.18);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.4);
}
.fd-badge-landings {
    background: rgba(20,184,166,0.18);
    color: #2dd4bf;
    border: 1px solid rgba(20,184,166,0.35);
}
.fd-badge-ice {
    background: rgba(56,189,248,0.15);
    color: #38bdf8;
    border: 1px solid rgba(56,189,248,0.3);
}
.fd-badge-se {
    background: rgba(16,185,129,0.15);
    color: #34d399;
    border: 1px solid rgba(16,185,129,0.3);
}

.fd-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

/* Top Header Metrics (Block, Flight, Delay) */
.fd-top-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.fd-metric-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.fd-metric-card:hover {
    border-color: var(--border-active);
}
.fd-metric-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}
.fd-metric-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--accent-teal);
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.fd-metric-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

/* Delay Color-Coding */
.fd-metric-card.fd-delay-late {
    background: linear-gradient(135deg, rgba(239,68,68,0.14), rgba(239,68,68,0.03));
    border-color: rgba(239,68,68,0.4);
}
.fd-metric-card.fd-delay-late .fd-metric-value {
    color: var(--accent-red, #ef4444) !important;
}
.fd-metric-card.fd-delay-late .fd-metric-sub {
    color: #fca5a5;
    font-weight: 600;
}
.fd-metric-card.fd-delay-early {
    background: linear-gradient(135deg, rgba(16,185,129,0.14), rgba(16,185,129,0.03));
    border-color: rgba(16,185,129,0.4);
}
.fd-metric-card.fd-delay-early .fd-metric-value {
    color: var(--accent-green, #10b981) !important;
}
.fd-metric-card.fd-delay-early .fd-metric-sub {
    color: #6ee7b7;
    font-weight: 600;
}
.fd-metric-card.fd-delay-ontime {
    background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(16,185,129,0.02));
    border-color: rgba(16,185,129,0.3);
}
.fd-metric-card.fd-delay-ontime .fd-metric-value {
    color: var(--accent-green, #10b981) !important;
}
.fd-metric-card.fd-delay-ontime .fd-metric-sub {
    color: #6ee7b7;
}

/* Route, Approaches & Runway Header */
.fd-route-header-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fd-route-summary-headline {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 10px;
}
.fd-route-summary-headline svg {
    color: var(--accent-blue);
    flex-shrink: 0;
}
.fd-route-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}
.fd-port {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fd-port-arr {
    text-align: right;
    align-items: flex-end;
}
.fd-port-headline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.fd-arr-headline {
    justify-content: flex-end;
}
.fd-port-city {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}
.fd-port-sub {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
}
.fd-dep-sub {
    justify-content: flex-start;
}
.fd-arr-sub {
    justify-content: space-between;
    width: 100%;
}
.fd-port-codes {
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
}
.fd-rwy-pill {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(96,165,250,0.15);
    color: #60a5fa;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
}
.fd-port-times {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.fd-port-arr .fd-port-times {
    justify-content: flex-end;
}
.fd-times-flow {
    display: flex;
    align-items: center;
    gap: 6px;
}
.fd-arr-times {
    justify-content: flex-end;
}
.fd-taxi-flow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.fd-taxi-arrow {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.75;
}
.fd-taxi-pill {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.fd-time-chip {
    font-size: 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 2px 7px;
    border-radius: 4px;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
}
.fd-time-chip strong {
    color: var(--text-primary);
}
.fd-tc-lbl {
    color: var(--text-muted);
    font-size: 0.65rem;
    margin-right: 2px;
}

.fd-route-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
}
.fd-dist-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-blue);
    background: rgba(96,165,250,0.12);
    padding: 2px 7px;
    border-radius: 12px;
    border: 1px solid rgba(96,165,250,0.25);
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
}
.fd-route-arrow-line {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 80px;
    color: var(--text-muted);
}
.fd-line-dash {
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--border-color) 0, var(--border-color) 4px, transparent 4px, transparent 8px);
}
.fd-plane-icon {
    font-size: 0.85rem;
    color: var(--accent-blue);
}

/* Aircraft & Crew Strip */
.fd-aircraft-strip {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.fd-ac-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.fd-ac-model {
    font-weight: 800;
    color: var(--text-primary);
    font-size: 0.92rem;
}
.fd-ac-engine {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}
.fd-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}
.status-autothrust {
    background: rgba(20,184,166,0.15);
    color: #2dd4bf;
    border: 1px solid rgba(20,184,166,0.3);
}
.status-manual {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.3);
}

/* Dedicated Approach & Landing Section */
.fd-landing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fd-landing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.fd-lcfg-item {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
}
.fd-lcfg-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}
.fd-lcfg-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
}
.fd-lcfg-val.cfg-athr {
    color: #34d399;
}
.fd-lcfg-val.cfg-man {
    color: var(--accent-blue);
}
.fd-lcfg-val.cfg-max {
    color: #fbbf24;
}
.fd-lcfg-val.cfg-med {
    color: var(--accent-blue);
}
.fd-lcfg-val.cfg-none {
    color: var(--text-muted);
}

/* Operational & Performance Dashboard Grid */
.fd-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.fd-dash-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fd-dc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 8px;
}
.fd-dc-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}
.fd-dc-icon {
    font-size: 0.9rem;
    opacity: 0.85;
}
.fd-dc-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fd-dc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
}
.fd-dc-label {
    color: var(--text-secondary);
}
.fd-dc-val {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--text-primary);
}
.fd-dc-val.highlight-val {
    color: var(--accent-blue);
    font-weight: 700;
}
.fd-dc-val.cons-val {
    color: var(--accent-teal);
    font-weight: 700;
}
.fd-cons-row {
    background: rgba(20,184,166,0.08);
    border: 1px solid rgba(20,184,166,0.2);
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 4px;
}

/* Load Factor Visual Bar */
.fd-lf-bar-wrap {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin: 2px 0;
}
.fd-lf-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-teal));
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Weights & Operations Card */
.fd-card-weights {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
.fd-weights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}
.fd-w-item {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fd-w-lbl {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
}
.fd-w-val {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

/* Remarks Card */
.fd-remarks-card {
    background: rgba(255,255,255,0.02);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fd-rem-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.fd-rem-text {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.45;
    font-style: italic;
}

/* Modal Action Footer */
.fd-modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: rgba(22, 25, 34, 0.7);
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    #detail-modal {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    #detail-modal .modal.modal-flight {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 92vh !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .fd-modal-header {
        padding: 14px 16px;
    }
    .fd-modal-body {
        padding: 16px;
        gap: 12px;
    }
    .fd-dash-grid {
        grid-template-columns: 1fr;
    }
    .fd-top-metrics {
        gap: 8px;
    }
    .fd-metric-card {
        padding: 10px 8px;
    }
    .fd-metric-value {
        font-size: 1.15rem;
    }
    .fd-route-strip {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .fd-port-arr {
        text-align: left;
        align-items: flex-start;
    }
    .fd-arr-headline {
        justify-content: flex-start !important;
    }
    .fd-port-arr .fd-port-sub {
        justify-content: space-between;
    }
    .fd-port-arr .fd-port-times {
        justify-content: flex-start !important;
    }
    .fd-route-mid {
        display: none;
    }
    .fd-landing-grid {
        gap: 6px;
    }
    .fd-lcfg-item {
        padding: 8px 4px;
    }
    .fd-lcfg-val {
        font-size: 0.85rem;
    }
    .fd-modal-footer {
        padding: 12px 16px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
}

/* ===================================================
   LOGBOOK COLUMNS CONFIGURATOR (VIEW SETTINGS DRAWER)
   =================================================== */

.btn-columns-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.btn-columns-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-active);
    color: var(--text-primary);
}
.btn-columns-pill svg {
    color: var(--accent-blue);
}

/* Horizontal scrolling for dynamic columns table */
.flights-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    position: relative;
}
.flights-table-container table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
}
.flights-table-container col {
    box-sizing: border-box !important;
    min-width: 0px !important;
}
.flights-table-container th,
.flights-table-container td {
    white-space: nowrap !important;
    box-sizing: border-box !important;
    min-width: 0px !important;
    overflow: hidden !important;
}
.flights-table-container th > .w-full,
.flights-table-container td > .w-full {
    width: 100%;
    min-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Slide-over Drawer for Column Visibility */
.modal-columns-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 92vw;
    height: 100%;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    box-shadow: -12px 0 36px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 16px 0 0 16px;
}
#logbook-columns-modal.active .modal-columns-drawer,
#dash-widgets-modal.active .modal-columns-drawer {
    transform: translateX(0);
}

.columns-drawer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    gap: 10px;
    flex-wrap: wrap;
}
.columns-active-count {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.columns-active-count span {
    display: inline-block;
    background: rgba(96, 165, 250, 0.15);
    color: var(--accent-blue);
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 700;
}
.columns-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.columns-drawer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.columns-group-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.columns-group-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent-blue);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.columns-group-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.column-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.column-toggle-row:hover {
    background: rgba(255, 255, 255, 0.04);
}
.column-toggle-label {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 500;
}
.column-ios-toggle {
    margin: 0;
    flex-shrink: 0;
}

/* Mobile responsive bottom drawer */
@media (max-width: 600px) {
    .modal-columns-drawer {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: 85vh;
        border-left: none;
        border-top: 1px solid var(--border-color);
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.6);
    }
    #logbook-columns-modal.active .modal-columns-drawer,
    #dash-widgets-modal.active .modal-columns-drawer {
        transform: translateY(0);
    }
}

/* ===================================================
   LOGBOOK COLUMN REORDERING & EXCEL-STYLE RESIZING
   =================================================== */

.logbook-th-reorder {
    position: relative !important;
    cursor: grab;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}

.logbook-th-reorder:active {
    cursor: grabbing;
}

.logbook-th-reorder.col-dragging {
    opacity: 0.45;
    background: rgba(96, 165, 250, 0.12) !important;
}

.logbook-th-reorder.drag-over-left {
    border-left: 3px solid var(--accent-blue) !important;
}

.logbook-th-reorder.drag-over-right {
    border-right: 3px solid var(--accent-blue) !important;
}

.col-header-text {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Draggable divider handle for resizing */
.col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    bottom: 0;
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

/* Visible double-bar indicator (|| or two vertical hairline bars in text-slate-500 hover:text-sky-400) */
.col-resizer::after {
    content: '';
    display: block;
    width: 4px;
    height: 14px;
    border-left: 1.5px solid #64748b; /* text-slate-500 */
    border-right: 1.5px solid #64748b; /* text-slate-500 */
    opacity: 0.85;
    pointer-events: none;
    transition: border-color 0.15s, opacity 0.15s;
}

.col-resizer:hover::after,
.col-resizer.resizing::after {
    border-left-color: #38bdf8; /* hover:text-sky-400 */
    border-right-color: #38bdf8; /* hover:text-sky-400 */
    opacity: 1;
}

.col-resizer:hover,
.col-resizer.resizing {
    background: rgba(56, 189, 248, 0.2);
    border-right: 2px solid #38bdf8; /* border-r-2 border-sky-400 */
}

body.col-resizing-active {
    cursor: col-resize !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

body.col-resizing-active * {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* ===================================================
   ADVANCED MULTI-CRITERIA FILTER DRAWER & CONTROLS
   =================================================== */

.btn-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    padding: 7px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-filter-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-active);
    color: var(--text-primary);
}

.btn-filter-pill svg {
    color: var(--accent-purple);
}

.adv-filter-badge {
    background: var(--accent-blue);
    color: #fff;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
}

.adv-filter-badge.hidden {
    display: none;
}

/* Modal filter drawer */
.modal-filter-drawer {
    width: 500px;
}

#advanced-filter-modal.active .modal-filter-drawer {
    transform: translateX(0);
}

@media (max-width: 600px) {
    #advanced-filter-modal.active .modal-filter-drawer {
        transform: translateY(0);
    }
}

.adv-filter-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    padding: 8px 10px;
    box-sizing: border-box;
    transition: border-color var(--transition-fast);
}

.adv-filter-input:focus {
    outline: none;
    border-color: var(--border-active);
}

.adv-airports-checkbox-list {
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.2);
}

.adv-airport-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    font-size: 0.82rem;
}

.adv-airport-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.adv-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.adv-chip-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    font-size: 0.78rem;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    user-select: none;
}

.adv-chip-label:hover {
    border-color: var(--border-active);
    color: var(--text-primary);
}

.adv-chip-label.active {
    background: rgba(96, 165, 250, 0.18);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    font-weight: 600;
}

.adv-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.adv-range-row .adv-filter-input {
    flex: 1;
}

.badge-count {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.adv-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.adv-toggle-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 9999px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.adv-toggle-pill:hover {
    border-color: var(--border-active);
    color: var(--text-primary);
}

.adv-toggle-pill.active {
    background: rgba(56, 189, 248, 0.18);
    border-color: #38bdf8;
    color: #38bdf8;
    font-weight: 600;
}

.adv-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 9999px;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.adv-reset-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 9999px;
    background: rgba(248, 113, 113, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #f87171;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.adv-reset-chip:hover {
    background: rgba(248, 113, 113, 0.24);
}





/* ===================================================
   DASHBOARD REVAMP: REORDERABLE GRID, A320 BREAKDOWN,
   FLEET CEO/NEO, TOP 5 REGS & ENGINES
=================================================== */
.btn-widgets-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* Dashboard Widgets Grid & DnD */
.dash-widgets-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    gap: 16px;
    align-items: stretch !important; /* Strict vertical row stretch */
}

@media (max-width: 767px) {
    .dash-widgets-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px;
    }
}

.dash-widget {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Sizing Modes: 50% (col-span-1) vs 100% (col-span-2) */
.dash-widget.half-width,
.dash-widget.col-span-1 {
    grid-column: span 1 / span 1 !important;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.dash-widget.full-width,
.dash-widget.col-span-2 {
    grid-column: 1 / -1 !important;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .dash-widget[data-widget-id="limits"] {
        grid-column: span 1 / span 1 !important;
    }
}

@media (max-width: 767px) {
    .dash-widget,
    .dash-widget.half-width,
    .dash-widget.col-span-1,
    .dash-widget.full-width,
    .dash-widget.col-span-2 {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
}


/* Equal Height Cards & Internal Flex Distribution */
.dash-widget .ov-card,
.dash-widget .section-card,
.dash-widget .ov-hero {
    margin-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    flex: 1;
    padding: 1rem !important; /* Strict equal padding (p-4) across all widgets */
}

/* Standardized Headers (min-h-[48px] flex items-center justify-between) */
.dash-widget .section-header {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    box-sizing: border-box;
    position: relative;
    padding-right: 36px; /* Room for discrete drag handle */
}

/* Body Content Flex Absorption */
.dash-widget .section-card > div:not(.section-header),
.dash-widget .ov-card > div:not(.section-header),
.dash-widget .chart-container,
.dash-widget #ov-limits,
.dash-widget #ov-duty,
.dash-widget #ov-approaches,
.dash-widget #ov-thrust,
.dash-widget #ov-flaps,
.dash-widget #ov-fuel-intel,
.dash-widget #ov-a320-breakdown,
.dash-widget #ov-fleet-neo-ceo,
.dash-widget #ov-engines,
.dash-widget #ov-top-regs,
.dash-widget #ov-fuel-intel,
.dash-widget #ov-taxi-intel,
.dash-widget #ov-legs-intel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.dash-widget #ov-top-regs,
.dash-widget #ov-fuel-intel,
.dash-widget #top-airports {
    justify-content: flex-start;
}

.dash-widget.widget-dragging {
    opacity: 0.45;
    transform: scale(0.98);
}
.dash-widget.widget-drag-over {
    outline: 2px dashed var(--accent-blue);
    outline-offset: 4px;
    border-radius: var(--radius-lg);
}
.dash-widget.widget-touch-active {
    transform: scale(1.02);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    z-index: 100;
}

/* Top-Right Widget Controls (Width Toggle & Drag Handle) */
.widget-top-controls {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
}

.widget-width-toggle {
    display: none !important;
}

.widget-drag-handle {
    position: absolute;
    top: 14px;
    right: 14px;
    cursor: grab;
    opacity: 0.35;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    z-index: 10;
    transition: opacity var(--transition-fast), background var(--transition-fast);
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.widget-top-controls .widget-drag-handle {
    position: static;
}

.widget-drag-handle:hover, .dash-widget:hover .widget-drag-handle {
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.08);
}
.widget-drag-handle:active {
    cursor: grabbing;
}

/* A320 Family Breakdown */
.a320-family-node {
    margin-bottom: 14px;
}
.a320-family-node:last-child {
    margin-bottom: 0;
}
.a320-parent-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    user-select: none;
}
.a320-parent-row:hover {
    background: rgba(255, 255, 255, 0.04);
}
.a320-name-col {
    display: flex;
    align-items: center;
    gap: 8px;
}
.a320-collapse-icon {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: inline-block;
    width: 14px;
    text-align: center;
}
.a320-fam-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.a320-fam-share {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.a320-stat-col {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent-blue);
}
.a320-sub-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-left: 24px;
    margin-bottom: 10px;
}
.a320-sub-rows.collapsed {
    display: none;
}
.a320-child-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.a320-child-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.a320-child-badge.ceo {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.3);
}
.a320-child-badge.neo {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.a320-child-details {
    flex: 1;
}
.a320-child-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 3px;
}
.a320-child-stat {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    font-weight: 600;
}
.a320-child-stat small {
    color: var(--text-muted);
    font-weight: normal;
}
.ae-progress-bar.mini {
    height: 4px;
    margin-top: 2px;
}
.ae-progress-fill.ceo {
    background: #60a5fa;
}
.ae-progress-fill.neo {
    background: #22c55e;
}

/* Fleet CEO vs. NEO Card */
.fleet-neo-ceo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.fleet-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fleet-box-title {
    display: flex;
    align-items: center;
    gap: 6px;
}
.fleet-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.fleet-badge.ceo {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.3);
}
.fleet-badge.neo {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.fleet-box-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.fleet-box-hours {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 4px 0 2px 0;
}
.fleet-box-meta {
    font-size: 0.76rem;
    color: var(--text-secondary);
}
.fleet-box-tags {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.engine-tag {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.engine-tag.leap {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.2);
}
.fleet-split-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fleet-split-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}
.fleet-split-ceo {
    background: #60a5fa;
    transition: width 0.3s ease;
}
.fleet-split-neo {
    background: #22c55e;
    transition: width 0.3s ease;
}
.fleet-split-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    color: var(--text-muted);
}
.fleet-split-legend .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.fleet-split-legend .dot.ceo { background: #60a5fa; }
.fleet-split-legend .dot.neo { background: #22c55e; }

/* Top 5 Registrations */
.top-regs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.top-reg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.top-reg-row:hover {
    background: rgba(255, 255, 255, 0.03);
}
.top-reg-rank {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-blue);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.top-reg-body {
    flex: 1;
    min-width: 0;
}
.top-reg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.top-reg-name {
    display: flex;
    align-items: center;
    gap: 8px;
}
.top-reg-reg {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
}
.top-reg-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}
.top-reg-badge.neo {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}
.top-reg-badge.ceo {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}
.top-reg-values {
    display: flex;
    align-items: center;
    gap: 8px;
}
.top-reg-hours {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-primary);
}
.top-reg-flt-badge {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 10px;
}

/* Engines List */
.engines-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Block Time Limits & Quarterly MTV 300h Grid */
.ftl-easa-grid {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    height: 100%;
    flex: 1;
}
.ftl-bar-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    margin-bottom: 0;
}
.ftl-reg-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 9999px;
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.25);
    line-height: 1.2;
    letter-spacing: 0.3px;
}
@media (max-width: 900px) {
    .ftl-easa-grid {
        gap: 12px;
    }
}
.q-limits-divider {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    margin-bottom: 14px;
    border-top: 1px solid var(--border-color);
}
.q-limits-heading {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.q-limits-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.q-limits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
@media (max-width: 900px) {
    .q-limits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    }
}
@media (max-width: 480px) {
    .q-limits-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.q-limit-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    transition: all var(--transition-fast);
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.q-limit-card.current-q {
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 0 14px rgba(96, 165, 250, 0.08);
}
.q-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.q-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}
.q-card-dates {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.q-badge-active {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(96, 165, 250, 0.15);
    color: var(--accent-blue);
    border: 1px solid rgba(96, 165, 250, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.q-card-hours {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 2px 0;
}
.q-hours-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-blue);
}
.q-hours-max {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.q-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.q-count-sub {
    color: var(--text-muted);
}
.q-pct-val {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--text-secondary);
}

/* === DASHBOARD CHILD GRIDS & FLEX ITEMS ANTI-BLOWOUT (STRICT MIN-W-0) === */
.ov-hero,
.ov-hero-main,
.ov-hero-grid,
.ov-cell,
.ov-periods,
.ov-period-cell,
.duty-hero,
.duty-box,
.fuel-intel-grid,
.fuel-intel-card,
.a320-breakdown-container,
.fleet-neo-ceo-grid,
.fleet-ceo-box,
.fleet-neo-box,
.engines-list,
.engine-card,
.top-regs-list,
.top-reg-row,
.top-reg-body,
.taxi-intel-grid,
.taxi-intel-card,
.legs-intel-grid,
.legs-intel-card,
.milestones-grid,
.milestone-card,
.top-list,
.ftl-bar-group,
.q-card-header,
.q-card-title,
.q-card-dates,
.q-card-hours,
.q-card-footer {
    min-width: 0;
    box-sizing: border-box;
}
.q-card-hours {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Login Actions & Visible Auth Error Banner (v5.8) */
.login-actions-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    width: 100%;
}
.login-actions-stack .btn-google-login {
    margin-bottom: 0;
    width: 100%;
    max-width: 320px;
    justify-content: center;
}
.btn-google-redirect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    padding: 10px 18px;
    background: rgba(96, 165, 250, 0.12);
    color: var(--accent-blue);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-google-redirect:hover {
    background: rgba(96, 165, 250, 0.22);
    border-color: var(--accent-blue);
}
.login-auth-error {
    background: rgba(239, 68, 68, 0.12);
    border: 1.5px solid rgba(239, 68, 68, 0.45);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin: 0 auto 18px;
    max-width: 380px;
    width: 100%;
    text-align: left;
    color: var(--text-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    animation: fadeIn 0.25s ease;
    box-sizing: border-box;
}
.lae-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.lae-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f87171;
}
.lae-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}
.lae-close:hover {
    color: var(--text-primary);
}
.lae-code-row {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.lae-code-row code {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #fca5a5;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-all;
}
.lae-msg {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.lae-origin-row {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    word-break: break-all;
}
.lae-origin-row code {
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent-amber);
}
.btn-google-redirect-retry {
    width: 100%;
    padding: 9px 12px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}
.btn-google-redirect-retry:hover {
    opacity: 0.92;
}

/* Lean Period Comparison & Hero Diff Badges */
.ov-hero-val-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.ov-hero-mini-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.diff-badge-container {
    display: inline-flex;
    align-items: center;
}
.diff-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.diff-badge.diff-pos {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.diff-badge.diff-neg {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.dash-compare-wrapper {
    position: relative;
    display: inline-flex;
}
.btn-dash-compare-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}
.btn-dash-compare-toggle:hover {
    color: var(--text-primary);
    border-color: var(--accent-blue);
}
.btn-dash-compare-toggle.active {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    font-weight: 600;
}
.dash-compare-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    padding: 14px;
    min-width: 230px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}
.dcp-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}
.dcp-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-primary);
    cursor: pointer;
}
.dcp-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 20px;
}
.dcp-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.dcp-radio-label:hover {
    color: var(--text-primary);
}

/* Airbus A320 Family Total Time Header Badge */
.a320-total-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.76rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    background: var(--color-accent-subtle, rgba(52, 211, 153, 0.15));
    color: var(--color-accent, #34d399);
    border: 1px solid rgba(16, 185, 129, 0.3);
    letter-spacing: 0.3px;
    vertical-align: middle;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    cursor: pointer;
}

/* ==========================================================================
   v5.19 COCKPIT EMERALD PALETTE, RESPONSIVE PERIODS, DUTY & FULL-WIDTH MILESTONES
   ========================================================================== */

/* Hero Strip Restoration: Match Screenshot 1:1 */
.dash-widget[data-widget-id="hero"] .ov-hero {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.25rem 1.75rem !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
@media (max-width: 768px) {
    .dash-widget[data-widget-id="hero"] .ov-hero {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1.25rem !important;
    }
}
.ov-hero-main {
    border-right: none !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.ov-hero-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 3.5rem !important;
    row-gap: 0.75rem !important;
}
.ov-big {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: var(--color-accent, #34d399) !important; /* emerald-400 */
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    margin: 2px 0 !important;
}
.ov-cell .ov-val {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
}
.ov-cell .ov-label {
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

/* Block Hours by Period: Responsive Grid (2x3 on iPhone, 3x2 on sm, 1x6 on lg) */
.ov-periods,
#ov-periods,
.dash-widget #ov-periods {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.625rem !important;
    width: 100% !important;
    flex-direction: row !important;
}
@media (min-width: 640px) {
    .ov-periods,
    #ov-periods,
    .dash-widget #ov-periods {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1024px) {
    .ov-periods,
    #ov-periods,
    .dash-widget #ov-periods {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}
.ov-period-cell {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(30, 41, 59, 0.8) !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-width: 0 !important;
}
.ov-period-title {
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
}
.ov-period-hrs {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--color-accent, #34d399) !important;
    font-variant-numeric: tabular-nums !important;
}
.ov-period-sub {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
    margin-top: 0.25rem !important;
}

/* Duty & Legs Stats: Compact 2x2 internal grid with downsized footprint (p-3, gap-2) */
.legs-intel-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
}
.legs-intel-card {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(30, 41, 59, 0.8) !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem !important;
    min-height: 0 !important;
}
.legs-intel-card .tic-lbl {
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
    color: #94a3b8 !important;
}
.legs-intel-card .tic-val {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    font-variant-numeric: tabular-nums !important;
}

/* Karriere-Meilensteine: Full-Width Card with strict 2 horizontal rows (4 cols x 2 rows on md+, 2 cols x 4 rows on mobile) */
.dash-widget[data-widget-id="milestones"] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}
#ov-milestones,
.milestones-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    width: 100% !important;
    flex-direction: row !important;
}
@media (max-width: 767px) {
    #ov-milestones,
    .milestones-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
.milestone-card {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(30, 41, 59, 0.8) !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    min-height: 0 !important;
}
.milestone-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.milestone-title {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #e2e8f0 !important;
}
.milestone-pct {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    font-variant-numeric: tabular-nums !important;
}
.milestone-bar-wrap {
    height: 2px !important;
    width: 100% !important;
    background: #1e293b !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
}
.milestone-fill {
    height: 100% !important;
    background: var(--color-accent, #34d399) !important;
    border-radius: 9999px !important;
    transition: width 0.5s ease-in-out !important;
}
.milestone-bottom-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.6875rem !important;
    color: #64748b !important;
    font-variant-numeric: tabular-nums !important;
}
.milestone-badge {
    font-size: 0.7rem !important;
    padding: 1px 6px !important;
    border-radius: 9999px !important;
}
.milestone-numbers {
    font-size: 0.7rem !important;
    display: flex !important;
    justify-content: space-between !important;
    color: var(--text-muted) !important;
    margin-bottom: 2px !important;
    font-variant-numeric: tabular-nums !important;
}
.milestone-bar {
    height: 2px !important;
    background: var(--bg-card) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

/* ===== v5.22 / v5.23 DYNAMIC AIRLINE & COCKPIT THEME ENGINE ===== */
.text-\[var\(--theme-accent\)\],
.text-theme-accent {
    color: var(--theme-accent, #34d399) !important;
}
.bg-\[var\(--theme-accent\)\],
.bg-theme-accent {
    background-color: var(--theme-accent, #34d399) !important;
}
.bg-\[var\(--theme-accent-subtle\)\],
.bg-theme-accent-subtle {
    background-color: var(--theme-accent-subtle, rgba(52, 211, 153, 0.15)) !important;
}
.border-\[var\(--theme-accent-border\)\],
.border-theme-accent {
    border-color: var(--theme-accent-border, rgba(52, 211, 153, 0.35)) !important;
}
.bg-\[var\(--theme-accent\)\]\/40 {
    background-color: var(--theme-accent, #34d399) !important;
    opacity: 0.4;
}
.hover\:text-\[var\(--theme-accent\)\]:hover {
    color: var(--theme-accent, #34d399) !important;
}

/* Universal Surface & Card Binding via CSS Variables (Frosted Daylight Sky Theme) */
.section-card,
.dash-widget .section-card,
.eff-master-card,
.stat-card,
.ov-card,
.period-card,
.milestone-card,
.ap-cockpit-tile {
    background-color: var(--bg-surface);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--border-subtle);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Dark border on hover or active states for top-level cards */
.section-card:hover,
.dash-widget .section-card:hover,
.stat-card:hover,
.ov-card:hover,
.eff-master-card:hover,
.ap-cockpit-tile:hover,
.milestone-card:hover,
.section-card.active,
.dash-widget .section-card.active {
    border-color: var(--border-focus, #8b5cf6) !important;
    box-shadow: 0 4px 20px -2px rgba(139, 92, 246, 0.15) !important;
}

/* Inner elevated metric tiles */
.duty-box,
.eff-sub-card,
.period-chip,
.ap-metric-chip {
    background-color: var(--bg-surface-elevated, #1a1528) !important;
    border: 1px solid var(--border-subtle, #2a2438) !important;
}

/* Typography & Metric Numbers: Top block times & PF values use Aviation Blue (#60a5fa) */
#ov-total-hours,
.ov-period-hrs,
.duty-pf-val,
.duty-box.pf .duty-hrs {
    color: var(--color-accent-blue, #60a5fa) !important;
    text-shadow: none !important;
}

.ftl-val,
.stat-value,
.text-\[var\(--theme-accent\)\],
.text-theme-accent {
    color: var(--color-accent-lilac, #8b5cf6) !important;
    text-shadow: none !important;
}

/* Headings in Gray-100 */
h1, h2, h3, h4,
.section-title,
.modal-title,
.dash-widget h3 {
    color: var(--text-heading, #f3f4f6) !important;
}

/* Secondary Roles: Pilot Flying (Aviation Blue #60a5fa) & Pilot Monitoring (Soft Light Grey #d1d5db) */
.ap-role-pf,
.role-bar-pf,
.duty-bar-pf {
    background-color: var(--color-role-pf, #60a5fa) !important;
    background: var(--color-role-pf, #60a5fa) !important;
}
.ap-role-lbl .pf,
.duty-legend .pf-legend {
    color: var(--color-role-pf, #60a5fa) !important;
}
.duty-box.pm .duty-hrs,
.duty-pm-val,
.ap-role-lbl .pm,
.duty-legend .pm-legend {
    color: var(--color-role-pm, #d1d5db) !important;
    text-shadow: none !important;
}
.ap-role-pm,
.role-bar-pm,
.duty-bar-pm {
    background-color: var(--color-role-pm, #d1d5db) !important;
    background: var(--color-role-pm, #d1d5db) !important;
}
#app-role-filter .app-role-btn[data-role="PF"].active {
    background-color: rgba(96, 165, 250, 0.15) !important;
    color: var(--color-role-pf, #60a5fa) !important;
    border-color: var(--color-role-pf, #60a5fa) !important;
}
#app-role-filter .app-role-btn[data-role="PM"].active {
    background-color: rgba(209, 213, 219, 0.15) !important;
    color: var(--color-role-pm, #d1d5db) !important;
    border-color: var(--color-role-pm, #d1d5db) !important;
}

/* UI Accents: Progress Bars for Flight Time Limits use Subtle Lilac (#8b5cf6) with #1a1528 track */
.ftl-bar,
.progress-track,
.milestone-track {
    background: var(--bg-surface-elevated, #1a1528) !important;
    background-color: var(--bg-surface-elevated, #1a1528) !important;
}
.ftl-fill,
.progress-fill,
.milestone-fill {
    background: var(--color-accent-lilac, #8b5cf6) !important;
    background-color: var(--color-accent-lilac, #8b5cf6) !important;
}

/* Universal Active Toggle Pills ([ PF ], [ PM ], Segmented Controls) */
.app-role-btn.active,
.seg-btn.active,
.adv-filter-pill.active {
    background-color: var(--color-accent-subtle, rgba(139, 92, 246, 0.15)) !important;
    color: var(--color-accent-lilac, #8b5cf6) !important;
    border-color: var(--border-focus, #8b5cf6) !important;
}

/* Preserved Modern Clean Deep Slate Typography, Roles & Progress for TEST 54d & TEST 54f */
body.theme-deep-slate #ov-total-hours,
body.theme-deep-slate .ov-period-hrs,
body.theme-deep-slate .ftl-val,
body.theme-deep-slate .stat-value,
body.theme-deep-slate .text-\[var\(--theme-accent\)\],
body.theme-deep-slate .text-theme-accent {
    color: var(--color-accent, #38bdf8) !important;
}
body.theme-deep-slate h1,
body.theme-deep-slate h2,
body.theme-deep-slate h3,
body.theme-deep-slate h4,
body.theme-deep-slate .section-title,
body.theme-deep-slate .modal-title,
body.theme-deep-slate .dash-widget h3 {
    color: var(--text-heading, #f9fafb) !important;
}
body.theme-deep-slate .ftl-bar,
body.theme-deep-slate .progress-track,
body.theme-deep-slate .milestone-track {
    background: var(--bg-surface-elevated, #1f2937) !important;
    background-color: var(--bg-surface-elevated, #1f2937) !important;
}
body.theme-deep-slate .ftl-fill,
body.theme-deep-slate .progress-fill,
body.theme-deep-slate .milestone-fill {
    background: var(--color-accent, #38bdf8) !important;
    background-color: var(--color-accent, #38bdf8) !important;
}

/* Preserved Frosted Daylight Sky Typography, Roles & Progress for TEST 53d & TEST 53f */
body.theme-daylight-sky #ov-total-hours,
body.theme-daylight-sky .ov-period-hrs,
body.theme-daylight-sky .ftl-val,
body.theme-daylight-sky .stat-value,
body.theme-daylight-sky .text-\[var\(--theme-accent\)\],
body.theme-daylight-sky .text-theme-accent {
    color: var(--color-accent, #0f172a) !important;
}
body.theme-daylight-sky h1,
body.theme-daylight-sky h2,
body.theme-daylight-sky h3,
body.theme-daylight-sky h4,
body.theme-daylight-sky .section-title,
body.theme-daylight-sky .modal-title,
body.theme-daylight-sky .dash-widget h3 {
    color: var(--text-heading, #0f172a) !important;
}
body.theme-daylight-sky .ftl-bar,
body.theme-daylight-sky .progress-track,
body.theme-daylight-sky .milestone-track {
    background: var(--progress-track, rgba(255, 255, 255, 0.7)) !important;
    background-color: var(--progress-track, rgba(255, 255, 255, 0.7)) !important;
}
body.theme-daylight-sky .ftl-fill,
body.theme-daylight-sky .progress-fill,
body.theme-daylight-sky .milestone-fill {
    background: var(--progress-fill, #0ea5e9) !important;
    background-color: var(--progress-fill, #0ea5e9) !important;
}

/* Preserved Liquid Ocean Typography & Roles for TEST 52e */
body.theme-liquid-ocean #ov-total-hours,
body.theme-liquid-ocean .ov-period-hrs,
body.theme-liquid-ocean .ftl-val,
body.theme-liquid-ocean .stat-value {
    color: var(--color-accent, #22d3ee) !important;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.3) !important;
}
body.theme-liquid-ocean .ftl-fill {
    background: var(--color-accent, #22d3ee) !important;
}
body.theme-liquid-ocean .duty-box.pf .duty-hrs {
    color: var(--color-role-pf, #38bdf8) !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.3) !important;
}
body.theme-liquid-ocean .duty-box.pm .duty-hrs {
    color: var(--color-role-pm, #94a3b8) !important;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.3) !important;
}

/* Preserved Obsidian Gold Typography & Roles for TEST 50e, 50f, 50g, 51c, 51d, 51f, 51g */
body.theme-obsidian-gold .section-card:hover,
body.theme-obsidian-gold .dash-widget .section-card:hover,
body.theme-obsidian-gold .stat-card:hover,
body.theme-obsidian-gold .ov-card:hover,
body.theme-obsidian-gold .eff-master-card:hover,
body.theme-obsidian-gold .ap-cockpit-tile:hover,
body.theme-obsidian-gold .milestone-card:hover {
    border-color: rgba(234, 179, 8, 0.40) !important;
    box-shadow: 0 4px 20px -2px rgba(234, 179, 8, 0.08) !important;
}
body.theme-obsidian-gold #ov-total-hours,
body.theme-obsidian-gold .ov-period-hrs,
body.theme-obsidian-gold .ftl-val,
body.theme-obsidian-gold .duty-box.pm .duty-hrs,
body.theme-obsidian-gold .stat-value {
    color: var(--color-gold, #eab308) !important;
}
body.theme-obsidian-gold .ftl-fill,
body.theme-royal-gold .ftl-fill {
    background: var(--color-gold, #eab308) !important;
}
body.theme-obsidian-gold .nav-tab.active,
body.theme-royal-gold .nav-tab.active {
    color: var(--color-gold, #c5a059) !important;
}
body.theme-obsidian-gold .nav-tab.active svg,
body.theme-royal-gold .nav-tab.active svg {
    color: var(--color-gold, #c5a059) !important;
    stroke: var(--color-gold, #c5a059) !important;
}
body.theme-obsidian-gold .duty-box.pf .duty-hrs {
    color: var(--color-accent-blue, #38bdf8) !important;
}
body.theme-obsidian-gold .duty-bar-pf {
    background-color: var(--color-accent-blue, #38bdf8) !important;
}
body.theme-obsidian-gold .duty-box.pm .duty-hrs {
    color: var(--color-gold, #eab308) !important;
}
body.theme-obsidian-gold .duty-bar-pm {
    background-color: var(--color-gold, #eab308) !important;
}
body.theme-obsidian-gold #app-role-filter .app-role-btn[data-role="PM"].active {
    background-color: var(--color-gold-subtle, rgba(234, 179, 8, 0.12)) !important;
    color: var(--color-gold, #eab308) !important;
    border-color: var(--color-gold, #eab308) !important;
}

/* Settings Visual Theme Picker Grid */
.theme-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 10px;
}
.theme-picker-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 12px;
    border-radius: 12px;
    background: var(--theme-surface, rgba(15, 23, 42, 0.85));
    border: 1px solid var(--theme-surface-border, rgba(51, 65, 85, 0.75));
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
    width: 100%;
}
.theme-picker-card:hover {
    border-color: var(--theme-accent-border, rgba(148, 163, 184, 0.5));
    transform: translateY(-1px);
}
.theme-picker-card.active {
    border-color: var(--theme-accent, #34d399) !important;
    background: var(--theme-accent-subtle, rgba(52, 211, 153, 0.12)) !important;
    box-shadow: 0 0 0 1px var(--theme-accent, #34d399), 0 8px 20px -4px rgba(0, 0, 0, 0.45);
}
.tpc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 8px;
}
.tpc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}
.tpc-check {
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.15s ease;
    background: var(--theme-accent, #34d399);
    color: #020617;
}
.theme-picker-card.active .tpc-check {
    opacity: 1;
    transform: scale(1);
}
.tpc-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    line-height: 1.25;
}
.tpc-sub {
    font-size: 0.7rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 2px;
    margin-bottom: 10px;
}
.tpc-swatches {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}
.tpc-swatch {
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.modal.modal-stat-detail {
    max-width: 56rem !important; /* 4xl */
    width: 95vw !important;
    background: rgba(2, 6, 23, 0.96) !important;
    border: 1px solid rgba(30, 41, 59, 0.9) !important;
    border-radius: 1rem !important;
    padding: 1.25rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75) !important;
}

.ap-cockpit-tile {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(30, 41, 59, 0.9);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.4);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ap-cockpit-tile:hover {
    border-color: rgba(51, 65, 85, 0.95);
}

.ap-metric-chip {
    background: rgba(2, 6, 23, 0.65);
    border: 1px solid rgba(30, 41, 59, 0.8);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
}

.ap-app-item {
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ap-app-item:hover {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(51, 65, 85, 0.9);
}

/* ===== v5.17 / v5.22 AIRPORT STATS TABLE & DETAIL MODAL ===== */
.ap-ops-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(30, 41, 59, 0.9);
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.85);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
}
.ap-ops-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
}
.ap-ops-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    border-bottom: 1px solid rgba(51, 65, 85, 0.7);
    background: rgba(15, 23, 42, 0.95);
    white-space: nowrap;
}
.ap-ops-row {
    border-bottom: 1px solid rgba(30, 41, 59, 0.85);
    cursor: pointer;
    transition: background 0.15s ease;
}
.ap-ops-row:last-child {
    border-bottom: none;
}
.ap-ops-row:hover {
    background: rgba(52, 211, 153, 0.08);
}
.ap-ops-row.is-homebase {
    background: rgba(30, 41, 59, 0.45);
}
.ap-ops-table td {
    padding: 10px 12px;
    vertical-align: middle;
    color: #e2e8f0;
    white-space: nowrap;
}
.ap-ops-code {
    font-weight: 700;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ap-ops-city-inline {
    font-weight: 500;
    color: #94a3b8;
}
.ap-ops-hb-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 9999px;
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
}
.ap-ops-visits strong {
    color: var(--theme-accent, #34d399);
    font-weight: 700;
}
.ap-ops-delay.late { color: #f87171; font-weight: 600; }
.ap-ops-delay.early { color: #34d399; font-weight: 600; }
.ap-ops-delay.neutral { color: #94a3b8; }
.ap-ops-pair {
    color: #cbd5e1;
    font-weight: 500;
}
.ap-ops-role {
    min-width: 140px;
}
.ap-role-bar {
    display: flex;
    width: 100%;
    height: 6px;
    border-radius: 9999px;
    overflow: hidden;
    background: #334155;
    margin-bottom: 4px;
}
.ap-role-pf {
    background: var(--theme-accent, #34d399);
    height: 100%;
}
.ap-role-pm {
    background: #475569;
    height: 100%;
}
.ap-role-lbl {
    font-size: 0.7rem;
    color: #94a3b8;
}
.ap-role-lbl .pf { color: var(--theme-accent, #34d399); font-weight: 600; }
.ap-role-lbl .pm { color: #94a3b8; font-weight: 500; }
.ap-ops-chevron {
    color: #64748b;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: right;
}

/* Airport Detail Modal – Runway Matrix, Approaches & Gate Rest Card */
.ap-modal-ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.ap-rwy-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.ap-rwy-matrix th {
    text-align: left;
    padding: 6px 8px;
    font-size: 0.68rem;
    text-transform: uppercase;
    color: #94a3b8;
    border-bottom: 1px solid rgba(51, 65, 85, 0.7);
}
.ap-rwy-matrix td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(30, 41, 59, 0.6);
    color: #e2e8f0;
}
.ap-rwy-matrix td.pf { color: var(--theme-accent, #34d399); font-weight: 600; }
.ap-rwy-matrix td.pm { color: #94a3b8; }
.ap-rwy-use {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
}
.ap-rwy-use.use-arr { background: rgba(56, 189, 248, 0.14); color: #38bdf8; }
.ap-rwy-use.use-dep { background: rgba(52, 211, 153, 0.14); color: #34d399; }
.ap-rwy-use.use-mix { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }

.ap-app-ranking {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ap-app-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.ap-app-rank {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    min-width: 22px;
}
.ap-app-label {
    color: #e2e8f0;
    font-weight: 500;
    flex: 1;
}
.ap-app-bar {
    width: 72px;
    height: 6px;
    border-radius: 9999px;
    background: rgba(51, 65, 85, 0.6);
    overflow: hidden;
}
.ap-app-bar > span {
    display: block;
    height: 100%;
    background: var(--theme-accent, #34d399);
    border-radius: 9999px;
}

.ap-gate-card {
    padding: 14px 16px;
    margin-bottom: 14px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(51, 65, 85, 0.8);
    border-radius: 12px;
}
.ap-gate-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.ap-section-lbl {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.ap-gate-tooltip {
    display: none;
    font-size: 0.74rem;
    line-height: 1.4;
    color: #cbd5e1;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.ap-gate-tooltip.active {
    display: block;
}
.ap-gate-hero-lbl {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.ap-gate-hero-val {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-accent, #34d399);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    margin: 2px 0;
}
.ap-gate-hero-sub {
    font-size: 0.75rem;
    color: #64748b;
}
.ap-gate-divider {
    border-top: 1px solid rgba(30, 41, 59, 0.8);
    margin: 10px 0;
}
.ap-gate-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ap-gate-meta {
    margin-top: 4px;
    font-size: 0.68rem;
    color: #64748b;
}
.ap-empty-note {
    font-size: 0.78rem;
    color: #64748b;
    padding: 8px 0;
}

/* ===== v5.33 AIRPORT DETAIL VIEW (OPS PARITY, SPLIT DELAY, SEPARATED RUNWAYS, VISITS) ===== */
.ap-detail-modal {
    max-width: 960px;
    width: 96%;
}
.ap-modal-scroll {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    padding-right: 4px;
}
.ap-detail-modal .ap-cockpit-tile {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(51, 65, 85, 0.8);
    border-radius: 12px;
    padding: 16px;
}
.ap-header-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ap-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.ap-header-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ap-code-pill {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--theme-accent, #34d399);
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.35);
    padding: 3px 10px;
    border-radius: 6px;
}
.ap-visits-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #f8fafc;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(71, 85, 105, 0.8);
    padding: 3px 10px;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}
.ap-header-city {
    margin: 2px 0 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.25;
}
.ap-header-apname {
    font-size: 0.78rem;
    color: #94a3b8;
}
.ap-rwy-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
}
.ap-rwy-strip-lbl {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.ap-rwy-strip-val {
    font-size: 0.78rem;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(2, 6, 23, 0.75);
    border: 1px solid rgba(30, 41, 59, 0.9);
    padding: 2px 8px;
    border-radius: 5px;
    font-variant-numeric: tabular-nums;
}
.ap-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ap-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.ap-card-title {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.ap-card-sub {
    font-size: 0.7rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.ap-sub-count {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ap-pill-count {
    font-size: 0.68rem;
    font-weight: 600;
    color: #cbd5e1;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(51, 65, 85, 0.75);
    padding: 2px 8px;
    border-radius: 9999px;
    font-variant-numeric: tabular-nums;
}
.ap-eff-grid {
    gap: 12px;
}
.ap-eff-box .eff-metric-val.primary {
    color: var(--theme-accent, #34d399);
}
.ap-two-col-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 720px) {
    .ap-two-col-grid {
        grid-template-columns: 1fr;
    }
}
.ap-delay-col {
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(30, 41, 59, 0.85);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ap-delay-col-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(30, 41, 59, 0.85);
}
.ap-delay-col-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #f1f5f9;
}
.ap-delay-subblock {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(30, 41, 59, 0.75);
    border-radius: 8px;
    padding: 10px;
}
.ap-delay-subblock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.ap-delay-subblock-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #cbd5e1;
}
.ap-delay-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.ap-delay-kv {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ap-delay-kv-lbl {
    font-size: 0.66rem;
    color: #64748b;
}
.ap-delay-kv-val {
    font-size: 0.86rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ap-delay-late { color: #f87171; }
.ap-delay-early { color: #34d399; }
.ap-delay-neutral { color: #cbd5e1; }

.ap-rwy-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ap-rwy-split-row {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(30, 41, 59, 0.85);
}
.ap-rwy-split-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.ap-rwy-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #f8fafc;
}
.ap-rwy-total {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--theme-accent, #34d399);
    font-variant-numeric: tabular-nums;
}
.ap-role-bar {
    width: 100%;
    height: 6px;
    border-radius: 9999px;
    overflow: hidden;
    background: rgba(51, 65, 85, 0.7);
    display: flex;
    margin-bottom: 6px;
}
.ap-role-pf {
    height: 100%;
    background: var(--theme-accent, #34d399);
}
.ap-role-pm {
    height: 100%;
    background: #64748b;
}
.ap-rwy-pfpm-row,
.ap-app-pfpm {
    font-size: 0.72rem;
    font-weight: 500;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.ap-rwy-pfpm-row .pf,
.ap-app-pfpm .pf {
    color: var(--theme-accent, #34d399);
    font-weight: 600;
}
.ap-rwy-pfpm-row .pm,
.ap-app-pfpm .pm {
    color: #cbd5e1;
}
.ap-dot-sep {
    color: #475569;
    margin: 0 4px;
}
.ap-app-ranking {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ap-app-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(30, 41, 59, 0.85);
}
.ap-app-row-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}
.ap-app-proc {
    font-size: 0.82rem;
    font-weight: 700;
    color: #f1f5f9;
}
.ap-app-rwy {
    color: #cbd5e1;
    font-weight: 600;
}
.ap-app-row-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ap-app-count-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ap-app-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--theme-accent, #34d399);
    font-variant-numeric: tabular-nums;
}
.ap-sub-block-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 8px;
}
.ap-fleet-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ap-fleet-row {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(30, 41, 59, 0.85);
}
.ap-fleet-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    margin-bottom: 5px;
}
.ap-fleet-type {
    font-weight: 700;
    color: #f1f5f9;
}
.ap-fleet-visits {
    color: var(--theme-accent, #34d399);
}
.ap-fleet-pct {
    color: #94a3b8;
    font-weight: 500;
}
.ap-fleet-bar {
    width: 100%;
    height: 6px;
    border-radius: 9999px;
    background: rgba(51, 65, 85, 0.7);
    overflow: hidden;
}
.ap-fleet-bar-fill {
    display: block;
    height: 100%;
    background: var(--theme-accent, #34d399);
    border-radius: 9999px;
}
.ap-regs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ap-reg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.75);
    border: 1px solid rgba(30, 41, 59, 0.9);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    color: #e2e8f0;
}
.ap-reg-code {
    color: #f8fafc;
    font-weight: 700;
}
.ap-reg-visits {
    color: var(--theme-accent, #34d399);
    font-weight: 600;
}