/* =========================================================
   REGA FLIGHT TRACKER
   tracker.css
   ========================================================= */


/* =========================================================
   THEME
   ========================================================= */

:root {
    --bg: #eef2f6;
    --bg-soft: #f7f9fc;

    --card: rgba(255, 255, 255, 0.88);
    --card-strong: rgba(255, 255, 255, 0.96);

    --text: #112033;
    --muted: #64748b;

    --border: rgba(15, 23, 42, 0.08);

    --shadow:
        0 14px 40px
        rgba(15, 23, 42, 0.08);

    --shadow-soft:
        0 8px 24px
        rgba(15, 23, 42, 0.07);

    --accent: #e30a17;
    --accent-dark: #b80712;

    --success: #16a34a;

    --heli: #d80d19;
    --jet: #1650a2;

    --radius: 24px;
    --radius-sm: 16px;

    --max-width: 1440px;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    min-height: 100%;

    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at top left,
            #ffffff 0%,
            #f4f7fb 32%,
            #eef2f6 100%
        );
}


body {
    min-height: 100vh;
}


button,
input,
select {
    font: inherit;
}


/* =========================================================
   APP
   ========================================================= */

.app-shell {
    width:
        min(
            calc(100% - 32px),
            var(--max-width)
        );

    margin: 0 auto;

    padding:
        18px 0 40px;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 18px;

    margin-bottom: 12px;
}


.brand {
    display: flex;

    align-items: center;

    gap: 12px;
}


.brand-mark {
    width: 46px;
    height: 46px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #ff1726 0%,
            #d50814 100%
        );

    color: #ffffff;

    font-weight: 900;

    font-size: 24px;

    box-shadow:
        0 7px 20px
        rgba(227, 10, 23, 0.24);
}


.brand-title {
    font-size: 1.65rem;

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -0.03em;
}


.brand-subtitle {
    margin-top: 3px;

    color: var(--muted);

    font-size: 0.88rem;
}


.header-right {
    display: flex;

    align-items: center;

    gap: 12px;
}


.live-pill {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 13px;

    border-radius:
        999px;

    background:
        var(--card-strong);

    border:
        1px solid
        var(--border);

    box-shadow:
        var(--shadow-soft);

    font-size:
        0.88rem;

    font-weight: 600;

    color:
        var(--text);
}


.live-pill-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        #94a3b8;
}


.live-pill-dot.live {
    background:
        var(--success);

    box-shadow:
        0 0 0 5px
        rgba(22, 163, 74, 0.10);
}


/* =========================================================
   COMPACT HERO / OVERVIEW
   ========================================================= */

.hero-card {
    padding:
        14px 16px;

    border-radius:
        20px;

    background:
        var(--card);

    border:
        1px solid
        var(--border);

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(12px);

    margin-bottom:
        14px;
}


.hero-top {
    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap: 16px;

    margin-bottom:
        11px;
}


.hero-kicker {
    font-size:
        0.66rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    color:
        var(--accent);

    margin-bottom:
        2px;
}


.hero-card h1 {
    margin: 0;

    font-size:
        1.48rem;

    line-height:
        1.08;

    letter-spacing:
        -0.025em;
}


.hero-text {
    margin:
        3px 0 0;

    max-width:
        600px;

    color:
        var(--muted);

    line-height:
        1.4;

    font-size:
        0.84rem;
}


/* =========================================================
   VIEW SWITCH
   ========================================================= */

.view-switch {
    display: inline-flex;

    gap: 4px;

    padding: 5px;

    border-radius:
        999px;

    background:
        #edf2f7;

    border:
        1px solid
        var(--border);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.7);

    flex-shrink: 0;
}


.view-switch-btn {
    border: 0;

    background:
        transparent;

    color:
        #475569;

    padding:
        8px 13px;

    border-radius:
        999px;

    font-size:
        0.88rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        180ms ease;
}


.view-switch-btn:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.65
        );
}


.view-switch-btn.active {
    color:
        #ffffff;

    background:
        linear-gradient(
            180deg,
            #ef2330 0%,
            #d70713 100%
        );

    box-shadow:
        0 6px 18px
        rgba(227, 10, 23, 0.24);
}


/* =========================================================
   COMPACT STATISTICS
   ========================================================= */

.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 8px;
}


.stat-card {
    padding:
        10px 13px;

    border-radius:
        15px;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    border:
        1px solid
        var(--border);

    box-shadow:
        0 5px 16px
        rgba(15, 23, 42, 0.045);
}


.stat-label {
    display: block;

    font-size:
        0.64rem;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

    color:
        var(--muted);

    font-weight:
        800;

    margin-bottom:
        4px;
}


.stat-value {
    display: block;

    font-size:
        1.58rem;

    line-height: 1;

    font-weight:
        900;

    letter-spacing:
        -0.03em;
}


/* =========================================================
   VIEWS
   ========================================================= */

.view-panel {
    display: none;
}


.view-panel.active {
    display: block;
}


/* =========================================================
   PANEL
   ========================================================= */

.panel-card {
    padding: 15px;

    border-radius:
        var(--radius);

    background:
        var(--card);

    border:
        1px solid
        var(--border);

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(10px);
}


.panel-head {
    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap: 12px;

    margin-bottom:
        11px;
}


.panel-head-stack {
    align-items:
        center;
}


.panel-kicker {
    font-size:
        0.70rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    color:
        var(--accent);

    margin-bottom:
        3px;
}


.panel-card h2 {
    margin: 0;

    font-size:
        1.65rem;

    line-height:
        1.06;

    letter-spacing:
        -0.03em;
}


.panel-meta {
    color:
        var(--muted);

    font-size:
        0.82rem;

    font-weight:
        600;
}


.panel-tools {
    display: flex;

    align-items: center;

    justify-content:
        flex-end;

    gap: 10px;

    flex-wrap: wrap;
}


/* =========================================================
   BASE TOGGLE
   ========================================================= */

.toggle-chip {
    border:
        1px solid
        rgba(15, 23, 42, 0.08);

    border-radius:
        999px;

    padding:
        8px 12px;

    background:
        #eef2f6;

    color:
        #334155;

    font-size:
        0.82rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        180ms ease;
}


.toggle-chip:hover {
    background:
        #e2e8f0;
}


.toggle-chip.active {
    background:
        linear-gradient(
            180deg,
            #ef2330 0%,
            #d70713 100%
        );

    color:
        #ffffff;

    box-shadow:
        0 6px 18px
        rgba(227, 10, 23, 0.20);
}


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

.map-frame {
    width: 100%;

    overflow:
        hidden;

    border-radius:
        20px;

    border:
        1px solid
        var(--border);

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.5);

    background:
        #dbe4ed;
}


.map-frame-large {
    height:
        72vh;

    min-height:
        540px;
}


.map-frame-modal {
    height:
        66vh;

    min-height:
        420px;
}


.leaflet-container {
    font-family:
        inherit;

    background:
        #dbe4ed;
}


.leaflet-control-zoom {
    border:
        none !important;

    box-shadow:
        0 10px 28px
        rgba(15, 23, 42, 0.12)
        !important;
}


.leaflet-control-zoom a {
    color:
        var(--text)
        !important;
}


/* =========================================================
   AIRCRAFT MARKERS
   ========================================================= */

.aircraft-marker {
    background:
        transparent !important;

    border:
        0 !important;
}


.aircraft-badge {
    width:
        50px !important;

    height:
        50px !important;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    padding:
        0 !important;
}


.aircraft-badge.heli {
    color:
        var(--heli);
}


.aircraft-badge.jet {
    color:
        var(--jet);
}


.aircraft-vector {
    transform-origin:
        50% 50%;

    overflow:
        visible;

    filter:
        drop-shadow(
            0 1px 1px
            rgba(255, 255, 255, 1)
        )
        drop-shadow(
            0 2px 2px
            rgba(255, 255, 255, 0.94)
        )
        drop-shadow(
            0 3px 5px
            rgba(15, 23, 42, 0.28)
        );
}


.helicopter-vector {
    width:
        48px;

    height:
        48px;
}


.jet-vector {
    width:
        42px;

    height:
        42px;
}


/* =========================================================
   AIRCRAFT LABEL
   ========================================================= */

.aircraft-label {
    padding:
        5px 8px;

    border-radius:
        999px;

    border:
        1px solid
        rgba(15, 23, 42, 0.10);

    background:
        rgba(
            255,
            255,
            255,
            0.93
        );

    color:
        #0f172a;

    font-size:
        0.74rem;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        0.01em;

    box-shadow:
        0 5px 14px
        rgba(15, 23, 42, 0.10);

    backdrop-filter:
        blur(5px);
}


.aircraft-label::before {
    display: none;
}


/* =========================================================
   AIRCRAFT POPUP
   ========================================================= */

.aircraft-popup {
    min-width:
        220px;
}


.aircraft-popup-title {
    font-weight:
        900;

    font-size:
        1rem;

    margin-bottom:
        10px;
}


.aircraft-popup-grid {
    display: grid;

    grid-template-columns:
        1fr auto;

    gap:
        7px 14px;

    font-size:
        0.86rem;
}


.aircraft-popup-grid .label {
    color:
        var(--muted);
}


.aircraft-popup-grid .value {
    font-weight:
        700;

    color:
        var(--text);
}


/* =========================================================
   REGA BASE MARKERS
   ========================================================= */

.base-marker {
    background:
        transparent;

    border: 0;
}


.base-marker-badge {
    min-width:
        34px;

    height:
        34px;

    padding:
        0 9px;

    border-radius:
        999px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #111827;

    color:
        #ffffff;

    border:
        2px solid
        #ffffff;

    box-shadow:
        0 8px 20px
        rgba(15, 23, 42, 0.17);

    font-size:
        0.70rem;

    font-weight:
        900;

    letter-spacing:
        0.04em;

    line-height:
        1;
}


/*
 * Rega-Center Zürich-Flughafen
 */

.base-marker-badge.center {
    min-width:
        36px;

    background:
        linear-gradient(
            180deg,
            #ef2330 0%,
            #d70713 100%
        );

    box-shadow:
        0 8px 22px
        rgba(227, 10, 23, 0.26);
}


.base-tooltip {
    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    border:
        1px solid
        rgba(15, 23, 42, 0.08);

    box-shadow:
        0 8px 22px
        rgba(15, 23, 42, 0.10);

    font-weight:
        800;

    color:
        #0f172a;
}


.base-tooltip::before {
    display: none;
}


.base-popup-title {
    font-weight:
        900;

    margin-bottom:
        6px;
}


.base-popup-sub {
    color:
        #64748b;

    font-size:
        0.88rem;
}


/* =========================================================
   MISSION CONTROLS
   ========================================================= */

.mission-controls {
    display: flex;

    align-items: center;

    justify-content:
        flex-end;

    gap: 10px;

    flex-wrap: wrap;
}


.mission-filter {
    display:
        inline-flex;

    gap: 6px;

    padding: 5px;

    border-radius:
        999px;

    background:
        #eef2f6;

    border:
        1px solid
        var(--border);
}


.mission-filter-btn {
    border: 0;

    background:
        transparent;

    color:
        #475569;

    padding:
        8px 12px;

    border-radius:
        999px;

    font-size:
        0.84rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        180ms ease;
}


.mission-filter-btn:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.75
        );
}


.mission-filter-btn.active {
    color:
        #ffffff;

    background:
        linear-gradient(
            180deg,
            #1e293b 0%,
            #0f172a 100%
        );

    box-shadow:
        0 5px 14px
        rgba(15, 23, 42, 0.15);
}


.mission-select {
    min-width:
        230px;

    min-height:
        39px;

    border-radius:
        12px;

    border:
        1px solid
        rgba(15, 23, 42, 0.10);

    background:
        #ffffff;

    color:
        #0f172a;

    padding:
        8px 36px 8px 12px;

    font-size:
        0.84rem;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 6px 18px
        rgba(15, 23, 42, 0.05);

    outline:
        none;
}


.mission-select:focus {
    border-color:
        rgba(227, 10, 23, 0.40);

    box-shadow:
        0 0 0 4px
        rgba(227, 10, 23, 0.08);
}


.mission-hint {
    margin:
        4px 0 12px;

    color:
        var(--muted);

    font-size:
        0.88rem;
}


/* =========================================================
   MISSION TABLE
   ========================================================= */

.table-wrap {
    overflow-x:
        auto;

    border-radius:
        18px;

    border:
        1px solid
        var(--border);

    background:
        rgba(
            255,
            255,
            255,
            0.65
        );
}


.mission-table {
    width:
        100%;

    border-collapse:
        collapse;

    min-width:
        900px;
}


.mission-table th,
.mission-table td {
    padding:
        14px 15px;

    border-bottom:
        1px solid
        rgba(15, 23, 42, 0.07);

    text-align:
        left;

    vertical-align:
        middle;
}


.mission-table thead th {
    background:
        rgba(
            248,
            250,
            252,
            0.95
        );

    color:
        var(--muted);

    font-size:
        0.73rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.09em;

    font-weight:
        900;
}


.mission-table tbody tr {
    cursor:
        pointer;

    transition:
        180ms ease;
}


.mission-table tbody tr:hover {
    background:
        rgba(
            241,
            245,
            249,
            0.88
        );
}


.mission-table tbody tr:last-child td {
    border-bottom: 0;
}


.mission-name {
    font-weight:
        900;
}


.mission-sub {
    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        0.80rem;
}


/* =========================================================
   BADGES
   ========================================================= */

.badge {
    display:
        inline-flex;

    align-items:
        center;

    gap: 6px;

    padding:
        6px 9px;

    border-radius:
        999px;

    font-size:
        0.74rem;

    font-weight:
        900;

    line-height:
        1;
}


.badge.live {
    color:
        #166534;

    background:
        rgba(
            22,
            163,
            74,
            0.12
        );
}


.badge.done {
    color:
        #334155;

    background:
        rgba(
            148,
            163,
            184,
            0.16
        );
}


.badge-type {
    display:
        inline-flex;

    align-items:
        center;

    padding:
        6px 8px;

    border-radius:
        999px;

    font-size:
        0.72rem;

    font-weight:
        900;

    letter-spacing:
        0.04em;

    color:
        #ffffff;
}


.badge-type.heli {
    background:
        linear-gradient(
            180deg,
            #ef2330 0%,
            #d70713 100%
        );
}


.badge-type.jet {
    background:
        linear-gradient(
            180deg,
            #2563eb 0%,
            #1747b9 100%
        );
}


.badge-dot {
    width: 7px;
    height: 7px;

    border-radius:
        50%;

    background:
        currentColor;
}


.empty-cell {
    text-align:
        center;

    color:
        var(--muted);

    padding:
        28px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    margin-top:
        18px;

    color:
        var(--muted);

    font-size:
        0.82rem;

    line-height:
        1.5;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal-backdrop {
    position:
        fixed;

    inset: 0;

    background:
        rgba(
            15,
            23,
            42,
            0.52
        );

    backdrop-filter:
        blur(5px);

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    z-index:
        5000;

    padding:
        20px;
}


.modal-backdrop.open {
    display:
        flex;
}


.modal-card {
    width:
        min(
            1180px,
            100%
        );

    border-radius:
        28px;

    background:
        #ffffff;

    border:
        1px solid
        rgba(15, 23, 42, 0.08);

    box-shadow:
        0 30px 80px
        rgba(15, 23, 42, 0.28);

    overflow:
        hidden;
}


.modal-head {
    padding:
        18px 20px 13px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;
}


.modal-kicker {
    color:
        var(--accent);

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    margin-bottom:
        4px;
}


.modal-card h3 {
    margin: 0;

    font-size:
        1.7rem;

    line-height:
        1.06;
}


.modal-meta {
    margin-top:
        6px;

    color:
        var(--muted);

    font-weight:
        600;
}


.modal-close {
    width: 40px;
    height: 40px;

    border: 0;

    border-radius:
        50%;

    background:
        #f1f5f9;

    color:
        #0f172a;

    font-size:
        1.75rem;

    line-height: 1;

    cursor:
        pointer;

    transition:
        160ms ease;
}


.modal-close:hover {
    background:
        #e2e8f0;

    transform:
        scale(1.04);
}


/* =========================================================
   LEAFLET POPUPS
   ========================================================= */

.leaflet-popup-content-wrapper {
    border-radius:
        16px;

    box-shadow:
        0 14px 38px
        rgba(15, 23, 42, 0.18);
}


.leaflet-popup-content {
    margin:
        15px 16px;
}


.leaflet-popup-tip {
    box-shadow:
        none;
}


/* =========================================================
   RESPONSIVE <= 1080px
   ========================================================= */

@media (
    max-width: 1080px
) {

    .hero-top {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .stats-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .mission-controls {
        justify-content:
            flex-start;
    }

}


/* =========================================================
   RESPONSIVE <= 780px
   ========================================================= */

@media (
    max-width: 780px
) {

    .site-header {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .header-right {
        width:
            100%;
    }


    .app-shell {
        width:
            min(
                calc(100% - 18px),
                var(--max-width)
            );

        padding-top:
            12px;
    }


    .brand-mark {
        width:
            43px;

        height:
            43px;

        font-size:
            22px;
    }


    .brand-title {
        font-size:
            1.45rem;
    }


    .brand-subtitle {
        font-size:
            0.82rem;
    }


    .hero-card {
        padding:
            13px;
    }


    .hero-top {
        margin-bottom:
            10px;
    }


    .hero-card h1,
    .panel-card h2 {
        font-size:
            1.45rem;
    }


    .view-switch {
        width:
            100%;

        display:
            grid;

        grid-template-columns:
            repeat(
                3,
                1fr
            );

        border-radius:
            17px;
    }


    .view-switch-btn {
        padding:
            9px 6px;
    }


    .stats-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .stat-value {
        font-size:
            1.5rem;
    }


    .panel-head {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .panel-tools,
    .mission-controls {
        width:
            100%;

        align-items:
            stretch;

        justify-content:
            flex-start;
    }


    .mission-filter {
        width:
            100%;

        display:
            grid;

        grid-template-columns:
            repeat(
                3,
                1fr
            );

        border-radius:
            16px;
    }


    .mission-select {
        width:
            100%;

        min-width:
            0;
    }


    .map-frame-large {
        height:
            62vh;

        min-height:
            420px;
    }


    .map-frame-modal {
        height:
            56vh;

        min-height:
            360px;
    }


    .modal-backdrop {
        padding:
            8px;
    }


    .modal-card {
        border-radius:
            20px;
    }


    .aircraft-badge {
        width:
            46px !important;

        height:
            46px !important;
    }


    .helicopter-vector {
        width:
            44px;

        height:
            44px;
    }


    .jet-vector {
        width:
            38px;

        height:
            38px;
    }

}


/* =========================================================
   RESPONSIVE <= 500px
   ========================================================= */

@media (
    max-width: 500px
) {

    .stats-grid {
        grid-template-columns:
            1fr 1fr;

        gap:
            7px;
    }


    .stat-card {
        padding:
            10px;
    }


    .stat-label {
        font-size:
            0.62rem;
    }


    .stat-value {
        font-size:
            1.42rem;
    }


    .panel-card {
        padding:
            10px;
    }


    .map-frame {
        border-radius:
            15px;
    }


    .map-frame-large {
        min-height:
            390px;
    }


    .aircraft-label {
        font-size:
            0.68rem;

        padding:
            4px 7px;
    }

}