/*
 * NCAS Flight Services
 * Flight Workspace Stylesheet
 *
 * Version: 0.4.7
 *
 * Light Theme
 * White / Light Gray / Charcoal / NCAS Red
 *
 * Layout:
 *   Row 1: Main navigation
 *   Row 2: Full-width NCAS banner
 *   Row 3: Flight sidebar + Leaflet map
 *
 * The third row automatically occupies all remaining
 * viewport space. No manual height calculations.
 */


/* ==========================================================
   01. THEME & GLOBAL
   ========================================================== */

:root {
    --red: #da0924;
    --ink: #19212c;
    --muted: #728095;
    --line: #e4e8ed;
    --bg: #f4f6f8;

    --header-height: 68px;
    --banner-height: clamp(140px, 16vw, 260px);
    --sidebar-width: 350px;
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
}

body {
    display: grid;

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

    grid-template-rows:
        var(--header-height)
        var(--banner-height)
        minmax(0, 1fr);

    width: 100%;
    height: 100vh;
    height: 100dvh;

    min-height: 0;
    margin: 0;

    overflow: hidden;

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

    color: var(--ink);
    background: var(--bg);
}

button,
select {
    font: inherit;
}


/* ==========================================================
   02. TOP NAVIGATION
   ========================================================== */

.topbar {
    grid-row: 1;
    grid-column: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 100%;
    min-height: 0;

    gap: 14px;
    padding: 0 2.3%;

    background: #fff;
    border-bottom: 1px solid #e9ebee;
}

.brand img {
    display: block;

    width: 145px;
    height: 57px;

    object-fit: contain;
}

.topbar-right {
    display: flex;
    align-items: center;

    gap: 22px;
}

.snapshot-pill {
    padding: 8px 12px;

    border: 1px solid #f3cad0;
    border-radius: 18px;

    background: #fff7f8;
    color: #a92237;

    font-size: 10px;
    letter-spacing: 0.09em;

    white-space: nowrap;
}

.back-link {
    color: var(--red);

    font-size: 13px;
    font-weight: 750;

    text-decoration: none;
}


/* ==========================================================
   03. FULL-WIDTH NCAS BANNER
   ========================================================== */

/*
 * The banner is a direct child of <body>.
 * It sits BETWEEN the topbar and workspace.
 *
 * Do not place this element inside .flight-sidebar.
 */

.sidebar-art {
    grid-row: 2;
    grid-column: 1;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    background-color: #fff;

    background-image:
        url('/assets/images/ncas-hero-approved.webp');

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    border-bottom: 2px solid var(--red);
}


/* ==========================================================
   04. WORKSPACE LAYOUT
   ========================================================== */

/*
 * The workspace occupies the remaining Grid row.
 * No viewport subtraction is necessary.
 */

.workspace {
    grid-row: 3;
    grid-column: 1;

    display: grid;

    grid-template-columns:
        var(--sidebar-width)
        minmax(0, 1fr);

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* Flight information sidebar */

.flight-sidebar {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    scrollbar-width: thin;

    background: #fff;
    border-right: 1px solid var(--line);
}

.sidebar-footer {
    margin: 0 12px 7px;
    padding-top: 0;

    color: #9aa5b4;
    font-size: 10px;
}


/* ==========================================================
   05. SELECTED FLIGHT SUMMARY
   ========================================================== */

.flight-summary {
    padding: 10px 13px 5px;
}

.eyebrow {
    margin-bottom: 8px;

    color: var(--red);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.17em;
}

.flight-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 8px;
    margin-bottom: 4px;
}

.flight-mode-row .eyebrow {
    margin-bottom: 0;
}

.call-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;
}

.call-row h1 {
    margin: 0;

    font-size: 25px;
    font-weight: 800;

    letter-spacing: -0.035em;
}

.status-pill {
    max-width: 175px;

    padding: 6px 9px;

    border: 1px solid #f5c6cf;
    border-radius: 7px;

    background: #fff1f3;
    color: #d10a26;

    font-size: 11px;
    font-weight: 800;

    line-height: 1.2;
    text-align: center;
}

.aircraft-name {
    margin: 2px 0 9px;

    color: #68798f;

    font-size: 12px;
    line-height: 1.5;
}


/* ==========================================================
   06. AIRPORTS & FLIGHT METRICS
   ========================================================== */

.airports {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        43px
        minmax(0, 1fr);

    align-items: center;

    padding: 9px 6px;
    margin-bottom: 9px;

    background: #fafbfc;

    border: 1px solid var(--line);
    border-radius: 10px;

    text-align: center;
}

.airports strong {
    display: block;

    font-size: 22px;
    letter-spacing: -0.04em;
}

.airports small {
    display: block;

    margin-top: 1px;

    color: var(--muted);
    font-size: 11px;
}

.route-arrow {
    color: var(--red);
    font-size: 21px;
}


/* Flight metric tiles */

.metric-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 6px;
}

.metric-grid > div {
    padding: 8px 9px;

    background: #f4f6f8;
    border-radius: 8px;
}

.metric-grid span,
.last-update span,
.analytics-line span {
    display: block;

    margin-bottom: 4px;

    color: var(--muted);
    font-size: 10px;
}

.metric-grid strong {
    font-size: 16px;
}


/* Last update / replay timestamp */

.last-update {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 8px 0;

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

.last-update span {
    margin: 0;
}

.last-update strong {
    font-size: 11px;
    text-align: right;
}


/* Maximum recorded flight statistics */

.analytics-line {
    display: grid;

    gap: 6px;

    padding: 8px 0 0;
}

.analytics-line > div {
    display: flex;
    justify-content: space-between;

    gap: 10px;
}

.analytics-line span {
    margin: 0;
}

.analytics-line strong {
    font-size: 12px;
}


/* ==========================================================
   07. HISTORICAL REPLAY CONTROLS
   ========================================================== */

.replay-box,
.route-box {
    margin: 3px 10px 8px;
    padding: 10px 11px;

    background: #fff;

    border: 1px solid var(--line);
    border-radius: 10px;
}

.section-head,
.replay-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.section-head h2,
.route-box h2 {
    margin: 0 0 7px;

    font-size: 14px;
}

.section-head span {
    margin-bottom: 7px;

    color: var(--muted);
    font-size: 11px;
}

.replay-controls {
    margin-bottom: 7px;
}

.replay-controls button {
    padding: 8px 12px;

    background: var(--red);
    color: #fff;

    border: none;
    border-radius: 7px;

    font-size: 12px;
    font-weight: 750;

    cursor: pointer;
}

.replay-controls button:disabled {
    opacity: 0.45;
    cursor: default;
}

.speed-label {
    color: var(--muted);
    font-size: 11px;
}

.speed-label select {
    padding: 5px;

    background: #fff;

    border: 1px solid var(--line);
    border-radius: 5px;

    font-size: 12px;
}

.replay-box input[type="range"] {
    display: block;

    width: 100%;

    accent-color: var(--red);
    cursor: pointer;
}

.hint {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.35;
}


/* Return to latest recorded position */

.return-latest {
    display: block;

    width: 100%;

    margin: 0 0 7px;
    padding: 7px 10px;

    background: #fff8f9;
    color: var(--red);

    border: 1px solid #e9c3c9;
    border-radius: 6px;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.return-latest[hidden] {
    display: none;
}


/* ==========================================================
   08. FILED FLIGHT PLAN ROUTE
   ========================================================== */

.route-box {
    margin-top: 0;
}

.route-box p {
    margin: 0;

    color: #526174;

    font-size: 12px;
    line-height: 1.65;

    overflow-wrap: anywhere;
}


/* ==========================================================
   09. REPLAY DISPLAY STATES
   ========================================================== */

/*
 * Supported modes:
 *
 *   latest
 *   playing
 *   paused
 *   complete
 */

.mode-indicator {
    padding: 5px 8px;

    background: #edf1f5;
    color: #5c6879;

    border-radius: 5px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.05em;

    white-space: nowrap;
}


/* Playing */

.flight-sidebar[data-view-mode="playing"] .mode-indicator {
    background: #d80828;
    color: #fff;
}

.flight-sidebar[data-view-mode="playing"] .flight-summary {
    background: linear-gradient(
        #fff8f9,
        #fff 100px
    );
}

.flight-sidebar[data-view-mode="playing"] .replay-box {
    border-color: #e88798;
    box-shadow: 0 0 0 2px #d808280a;
}


/* Paused */

.flight-sidebar[data-view-mode="paused"] .mode-indicator {
    background: #fff1dc;
    color: #9d5904;

    border: 1px solid #f4d6a9;
}

.flight-sidebar[data-view-mode="paused"] .replay-box {
    border-color: #e9c895;
}


/* Completed */

.flight-sidebar[data-view-mode="complete"] .mode-indicator {
    background: #e8f5ee;
    color: #167447;
}


/* ==========================================================
   10. FLIGHT MAP
   ========================================================== */

.map-workspace {
    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}

#flight-map {
    width: 100%;
    height: 100%;

    background: #dbe8ef;
}

.leaflet-container {
    font-family: inherit;
}

.ncas-flight-plane {
    background: transparent;
    border: 0;
}

.plane-halo {
    filter: drop-shadow(
        0 2px 2px #28334270
    );
}


/* Map heading / fit recorded flight */

.map-heading {
    position: absolute;

    z-index: 600;

    top: 16px;
    left: 18px;
    right: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    pointer-events: none;
}

.map-heading > div {
    padding: 10px 14px;

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

    border: 1px solid #e7e8ec;
    border-radius: 8px;

    box-shadow: 0 4px 15px #18253416;
}

.map-heading strong {
    display: block;
    font-size: 14px;
}

.map-heading span {
    display: block;

    margin-top: 2px;

    color: var(--muted);
    font-size: 11px;
}

.map-heading button {
    padding: 10px 12px;

    background: #fff;
    color: var(--red);

    border: 1px solid #e8eaee;
    border-radius: 8px;

    box-shadow: 0 3px 12px #18253412;

    font-size: 12px;
    font-weight: 750;

    cursor: pointer;
    pointer-events: auto;
}


/* ==========================================================
   11. NEARBY VISIBLE FLIGHTS
   ========================================================== */

.nearby-overlay {
    position: absolute;

    z-index: 650;

    bottom: 17px;
    left: 17px;
    right: 17px;

    pointer-events: none;
}

.nearby-title {
    display: flex;
    align-items: center;

    gap: 12px;

    padding-left: 3px;
    margin-bottom: 9px;

    text-shadow: 0 1px 4px #fff;
}

.nearby-title strong {
    font-size: 12px;
}

.nearby-title span {
    color: #66768b;
    font-size: 10px;
}


/* Nearby flight cards */

.nearby-cards {
    display: grid;

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

    gap: 9px;
}

.nearby-card {
    display: block;

    min-width: 0;
    padding: 12px 13px;

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

    border: 1px solid #e4e8ed;
    border-radius: 10px;

    box-shadow: 0 5px 22px #22334c29;

    text-decoration: none;

    pointer-events: auto;

    transition:
        transform 0.13s,
        border-color 0.13s;
}

.nearby-card:hover {
    transform: translateY(-3px);
    border-color: #e28a9b;
}

.nearby-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 6px;
}

.nearby-top strong {
    overflow: hidden;

    font-size: 14px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.nearby-top em {
    color: var(--red);

    font-size: 11px;
    font-style: normal;
    font-weight: 750;

    white-space: nowrap;
}

.nearby-route {
    overflow: hidden;

    margin: 8px 0 6px;

    color: #69798b;

    font-size: 11px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.nearby-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    color: #7a8796;
    font-size: 10px;
}


/* No nearby flights */

.empty-nearby {
    grid-column: 1 / -1;

    max-width: 520px;
    padding: 14px;

    background: rgba(255, 255, 255, 0.96);
    color: #6e7b8c;

    border-radius: 8px;

    box-shadow: 0 4px 15px #192b3e1d;

    font-size: 12px;
    pointer-events: auto;
}


/* ==========================================================
   12. RESPONSIVE LAYOUT
   ========================================================== */


/* Medium desktop / tablet landscape */

@media (min-width: 721px) and (max-width: 990px) {

    :root {
        --sidebar-width: 305px;
    }

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

    .nearby-card:nth-child(3) {
        display: none;
    }
}


/* Short desktop windows */

@media (min-width: 721px) and (max-height: 760px) {

    .flight-summary {
        padding-top: 7px;
    }

    .metric-grid > div {
        padding: 6px 8px;
    }

    .airports {
        padding: 7px 5px;
    }

    .replay-box,
    .route-box {
        padding: 8px 10px;
    }
}


/* Mobile layout */

@media (max-width: 720px) {

    :root {
        --header-height: 60px;
        --banner-height: 130px;
    }

    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    .topbar {
        flex: 0 0 var(--header-height);
        height: var(--header-height);
    }

    .brand img {
        width: 105px;
        height: 48px;
    }

    .snapshot-pill {
        display: none;
    }

    .sidebar-art {
        flex: 0 0 var(--banner-height);

        height: var(--banner-height);
        min-height: var(--banner-height);

        background-position: center;
        background-size: cover;
    }

    .workspace {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: auto;

        min-height: 0;

        overflow: visible;
    }

    .flight-sidebar {
        width: 100%;
        height: auto;

        max-height: none;

        overflow: visible;

        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .flight-summary {
        padding: 14px;
    }

    .airports {
        margin-bottom: 10px;
    }

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

    .metric-grid > div {
        padding: 9px 6px;
    }

    .metric-grid strong {
        font-size: 13px;
    }

    .metric-grid span {
        font-size: 9px;
    }

    .replay-box,
    .route-box {
        margin: 3px 13px 12px;
    }

    .sidebar-footer {
        display: none;
    }

    .map-workspace {
        width: 100%;
        height: 65vh;
        min-height: 460px;
    }

    .map-heading {
        top: 10px;
        left: 10px;
        right: 10px;
    }

    .map-heading span {
        display: none;
    }

    .nearby-overlay {
        bottom: 10px;
        left: 10px;
        right: 10px;
    }

    .nearby-cards {
        grid-template-columns: 1fr 1fr;
    }

    .nearby-card {
        padding: 9px;
    }

    .nearby-meta {
        display: none;
    }
}

/* Return to pilot flight history */

/* =====================================================
   NCAS FLIGHT DETAIL — RETURN NAVIGATION
   ===================================================== */

.back-to-flight-list {
    color: #c8102e;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.back-to-flight-list:hover {
    color: #a50b24;
    text-decoration: underline;
}

.back-to-flight-list:focus-visible {
    outline: 2px solid #c8102e;
    outline-offset: 4px;
    border-radius: 2px;
}

/* NCAS v0.7.5 sidebar enhancements */
.ncas-flight-pilot { margin:.5rem 0; font-size:.92rem; opacity:.9; }
.ncas-flight-estimates { display:grid; gap:.65rem; margin:1.1rem 0; padding:1rem; border:1px solid rgba(125,153,175,.25); border-radius:12px; }
.ncas-flight-estimates>div { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.ncas-flight-estimates span { font-size:.8rem; opacity:.75; }
.ncas-flight-estimates strong { font-size:.85rem; }
.ncas-flight-estimates small { opacity:.6; line-height:1.4; }

/* v0.7.5.1: restrained airport direction labels instead of airplane emoji. */
.airport-direction-label {
    display: inline-block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .11em;
}