/**
 * Tactical Air Defense Map - Master Stylesheet
 * Premium Monochrome Command Palette (Apple SF Pro / soft glass, dark + light themes)
 * Modularized Architecture: all component stylesheets are under 400 lines.
 */

/* 1. Design Tokens, Variables & Foundations */
@import url('css/variables.css');
@import url('css/base.css');

/* 2. Glassmorphism & Liquid Glass Blur Effects */
@import url('css/effects/glass.css');

/* 3. Layout Grid, HUD Overlay & Sliding Panels */
@import url('css/layout.css');

/* 4. HUD Components: Header, Clock, Threat Badges */
@import url('css/components/hud.css');
@import url('css/components/connection_status.css');

/* 5. Left Panel: Chronicle & View Switcher */
@import url('css/components/chronicle.css');

/* 6. Threat Cards & Active Danger List */
@import url('css/components/cards.css');

/* 7. Modal Windows & Intelligence Detail Cards */
@import url('css/components/modals.css');

/* 8. MapLibre GL Tactical Markers & Radar Halos */
@import url('css/components/map/markers.css');

/* 10. MapLibre GL Tactical Popups & Matrices */
@import url('css/components/map/popups.css');

/* 11. Canvas Visual Effects & PVO Pulses */
@import url('css/components/map/canvas.css');
@import url('css/components/map/pulses.css');

/* 12. Number Ticker & Motion Blur */
@import url('css/components/ticker.css');

/* 13. UAV Tactical Radar & Target Tracking Layer */
@import url('css/components/drone_radar.css');
@import url('css/components/activity_heat.css');

/* 14. Regional Historical Chronicle Modal */
@import url('css/components/region_modal.css');

/* 14b. Settings Modal: service status panel */
@import url('css/components/settings_modal.css');

/* 15. Scrollbars & Responsive Breakpoints */
@import url('css/responsive.css');

/* 16. Graphics quality profiles (low / balanced / high) */
@import url('css/quality.css');

/* Tactical airport marker container hook */
.tactical-airport-marker-container {
  pointer-events: auto;
}

/* Early access: exclusive layers stay hidden until the server confirms a session. */
body:not(.has-early-access) .early-only {
    display: none !important;
}

.settings-early-btn {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    background: var(--surface-raised, rgba(255, 255, 255, 0.04));
    color: var(--text-primary, #e8e8e8);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.settings-early-btn:hover {
    border-color: var(--border-strong, rgba(255, 255, 255, 0.24));
    background: var(--surface-hover, rgba(255, 255, 255, 0.08));
}

.settings-early-btn.is-active {
    border-color: var(--border-subtle, rgba(255, 255, 255, 0.12));
    color: var(--text-secondary, #9a9a9a);
}
