/* ══════════════════════════════════════════════════════════════
   LAB ATMOSPHERES - 3 Light Theme Variations
   PilotPrep ATPL Labs
   ══════════════════════════════════════════════════════════════ */

/* === CSS VARIABLES === */
:root {
    /* Theme: Aviation Blue (Default) */
    --atmo-bg: #ffffff;
    --atmo-bg-secondary: #f8fafc;
    --atmo-card: #ffffff;
    --atmo-border: #e2e8f0;
    --atmo-accent: #0ea5e9;
    --atmo-accent-light: #e0f2fe;
    --atmo-accent-dark: #0284c7;
    --atmo-text: #0f172a;
    --atmo-text-muted: #64748b;
    --atmo-success: #10b981;
    --atmo-warning: #f59e0b;
    --atmo-danger: #ef4444;
    --atmo-glow: rgba(14, 165, 233, 0.15);
}

/* === FULLSCREEN MODE (Desktop) === */
@media (min-width: 1024px) {
    body.fullscreen-lab {
        height: 100vh;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.fullscreen-lab .lab-container {
        height: 100vh;
        display: grid;
        grid-template-rows: auto 1fr;
        overflow: hidden;
    }

    body.fullscreen-lab .main-grid {
        max-width: none !important;
        height: 100%;
        overflow: hidden;
        padding: 1.5rem;
        gap: 1.5rem;
    }

    body.fullscreen-lab .viz-section {
        height: 100%;
        overflow: hidden;
    }

    body.fullscreen-lab .controls-section {
        overflow-y: auto;
        max-height: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════
   THEME 1: AVIATION BLUE (Default)
   Clean, professional, airline-inspired
   ══════════════════════════════════════════════════════════════ */
body.atmo-aviation {
    --atmo-bg: #ffffff;
    --atmo-bg-secondary: #f0f9ff;
    --atmo-card: #ffffff;
    --atmo-border: #bae6fd;
    --atmo-accent: #0ea5e9;
    --atmo-accent-light: #e0f2fe;
    --atmo-accent-dark: #0284c7;
    --atmo-glow: rgba(14, 165, 233, 0.2);
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
}

body.atmo-aviation .atmo-card {
    background: var(--atmo-card);
    border: 1px solid var(--atmo-border);
    box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.08), 
                0 2px 4px -2px rgba(14, 165, 233, 0.05);
}

body.atmo-aviation .atmo-card:hover {
    border-color: var(--atmo-accent);
    box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.15);
}

body.atmo-aviation .atmo-viz {
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
}

body.atmo-aviation .atmo-accent-text {
    color: var(--atmo-accent-dark);
}

body.atmo-aviation .atmo-badge {
    background: var(--atmo-accent-light);
    color: var(--atmo-accent-dark);
    border: 1px solid var(--atmo-accent);
}

/* ══════════════════════════════════════════════════════════════
   THEME 2: EMERALD PRO
   Fresh, modern, eco-aviation feel
   ══════════════════════════════════════════════════════════════ */
body.atmo-emerald {
    --atmo-bg: #ffffff;
    --atmo-bg-secondary: #f0fdf4;
    --atmo-card: #ffffff;
    --atmo-border: #bbf7d0;
    --atmo-accent: #10b981;
    --atmo-accent-light: #d1fae5;
    --atmo-accent-dark: #059669;
    --atmo-glow: rgba(16, 185, 129, 0.2);
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

body.atmo-emerald .atmo-card {
    background: var(--atmo-card);
    border: 1px solid var(--atmo-border);
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.08), 
                0 2px 4px -2px rgba(16, 185, 129, 0.05);
}

body.atmo-emerald .atmo-card:hover {
    border-color: var(--atmo-accent);
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.15);
}

body.atmo-emerald .atmo-viz {
    background: linear-gradient(180deg, #d1fae5 0%, #a7f3d0 50%, #6ee7b7 100%);
}

body.atmo-emerald .atmo-accent-text {
    color: var(--atmo-accent-dark);
}

body.atmo-emerald .atmo-badge {
    background: var(--atmo-accent-light);
    color: var(--atmo-accent-dark);
    border: 1px solid var(--atmo-accent);
}

/* ══════════════════════════════════════════════════════════════
   THEME 3: VIOLET TECH
   Premium, futuristic, next-gen EFB
   ══════════════════════════════════════════════════════════════ */
body.atmo-violet {
    --atmo-bg: #ffffff;
    --atmo-bg-secondary: #faf5ff;
    --atmo-card: #ffffff;
    --atmo-border: #e9d5ff;
    --atmo-accent: #a855f7;
    --atmo-accent-light: #f3e8ff;
    --atmo-accent-dark: #9333ea;
    --atmo-glow: rgba(168, 85, 247, 0.2);
    background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
}

body.atmo-violet .atmo-card {
    background: var(--atmo-card);
    border: 1px solid var(--atmo-border);
    box-shadow: 0 4px 6px -1px rgba(168, 85, 247, 0.08), 
                0 2px 4px -2px rgba(168, 85, 247, 0.05);
}

body.atmo-violet .atmo-card:hover {
    border-color: var(--atmo-accent);
    box-shadow: 0 10px 25px -5px rgba(168, 85, 247, 0.15);
}

body.atmo-violet .atmo-viz {
    background: linear-gradient(180deg, #f3e8ff 0%, #e9d5ff 50%, #d8b4fe 100%);
}

body.atmo-violet .atmo-accent-text {
    color: var(--atmo-accent-dark);
}

body.atmo-violet .atmo-badge {
    background: var(--atmo-accent-light);
    color: var(--atmo-accent-dark);
    border: 1px solid var(--atmo-accent);
}

/* ══════════════════════════════════════════════════════════════
   THEME SWITCHER UI
   ══════════════════════════════════════════════════════════════ */
.theme-switcher {
    display: flex;
    gap: 0.5rem;
    padding: 0.375rem;
    background: #f8fafc;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
}

.theme-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    color: #64748b;
}

.theme-btn:hover:not(.active) {
    background: #f1f5f9;
    color: #334155;
}

.theme-btn.active {
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.theme-btn[data-theme="aviation"].active {
    border-color: #0ea5e9;
    color: #0284c7;
}

.theme-btn[data-theme="emerald"].active {
    border-color: #10b981;
    color: #059669;
}

.theme-btn[data-theme="violet"].active {
    border-color: #a855f7;
    color: #9333ea;
}

/* Color preview dots */
.theme-preview {
    display: flex;
    gap: 2px;
}

.theme-preview span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.theme-btn[data-theme="aviation"] .theme-preview span:nth-child(1) { background: #0ea5e9; }
.theme-btn[data-theme="aviation"] .theme-preview span:nth-child(2) { background: #38bdf8; }
.theme-btn[data-theme="aviation"] .theme-preview span:nth-child(3) { background: #7dd3fc; }

.theme-btn[data-theme="emerald"] .theme-preview span:nth-child(1) { background: #10b981; }
.theme-btn[data-theme="emerald"] .theme-preview span:nth-child(2) { background: #34d399; }
.theme-btn[data-theme="emerald"] .theme-preview span:nth-child(3) { background: #6ee7b7; }

.theme-btn[data-theme="violet"] .theme-preview span:nth-child(1) { background: #a855f7; }
.theme-btn[data-theme="violet"] .theme-preview span:nth-child(2) { background: #c084fc; }
.theme-btn[data-theme="violet"] .theme-preview span:nth-child(3) { background: #d8b4fe; }

/* ══════════════════════════════════════════════════════════════
   LAB HEADER (Fullscreen optimized)
   ══════════════════════════════════════════════════════════════ */
.lab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: white;
    border-bottom: 1px solid var(--atmo-border, #e2e8f0);
    gap: 1rem;
    flex-wrap: wrap;
}

.lab-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lab-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.lab-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s;
}

.lab-back-btn:hover {
    background: #f1f5f9;
    color: #334155;
    border-color: #cbd5e1;
}

.lab-title-group h1 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.lab-title-group p {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0.25rem 0 0 0;
}

/* ══════════════════════════════════════════════════════════════
   TRANSITIONS
   ══════════════════════════════════════════════════════════════ */
body,
.atmo-card,
.atmo-viz,
.atmo-badge {
    transition: background 0.3s ease, 
                border-color 0.3s ease, 
                box-shadow 0.3s ease,
                color 0.3s ease;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .theme-switcher {
        padding: 0.25rem;
    }
    
    .theme-btn {
        padding: 0.375rem 0.5rem;
        font-size: 0;
    }
    
    .theme-btn .theme-icon {
        font-size: 1rem;
    }
    
    .lab-header {
        padding: 0.75rem 1rem;
    }
}