/* ══════════════════════════════════════════════════
   OFP PLANNER V2 — styles for the recoded app
   Layered after efb-theme-v2.css.
══════════════════════════════════════════════════ */

/* Empty-state feature list — replaces a blank "enter your username" screen
   with a quick preview of what the app actually gives you once connected. */
.ofp-empty-features{
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ofp-empty-feature{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ink-soft);
    padding: 10px 12px;
    background: var(--paper2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 10px);
}
.ofp-empty-feature span{
    font-size: 16px;
    flex-shrink: 0;
}

/* Runway badge under each ICAO in the briefing hero */
.ofp-rwy-badge{
    display: inline-block;
    margin-top: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink-soft);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 8px;
}

/* Times row — EOBT / ETA / Block / Flight time, sits between the hero and weights card */
.ofp-times-row{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 14px 0;
}
.ofp-time-pill{
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 10px);
    padding: 9px 6px;
    text-align: center;
}
.ofp-time-val{
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.ofp-time-lbl{
    font-size: 8.5px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 2px;
}
@media(max-width:420px){
    .ofp-times-row{ grid-template-columns: repeat(2, 1fr); }
}

/* Proportional stacked fuel bar — single visual summary before the itemised list */
.fuel-stack-bar{
    display: flex;
    height: 10px;
    border-radius: 6px;
    overflow: hidden;
    margin: 0 14px 14px;
    background: var(--paper3);
}
.fuel-stack-seg{
    height: 100%;
    transition: width .5s ease;
}
.fuel-stack-seg:not(:last-child){
    border-right: 1px solid rgba(255,255,255,.5);
}

/* Small colour-matched dot on each fuel item row, ties the list back to the stacked bar above */
.fuel-item-dot{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   FLIGHT STRIP — replaces the KPI-tile hero. Modeled on
   a boarding-pass / paper flight-strip layout rather than
   a dashboard stat-card grid.
══════════════════════════════════════════════════ */
.ofp-section-card{
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0;
    margin-bottom: 10px;
    overflow: hidden;
}
.ofp-section-hdr{
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--log-red);
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--line);
}
.ofp-section-ico{ width: 13px; height: 13px; flex-shrink: 0; }
.ofp-section-card .res-row{
    padding: 7px 14px;
    margin: 0;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
}
.ofp-section-card .res-row:last-child{ border-bottom: none; }
.ofp-section-card .res-row span{
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: .03em;
    color: var(--ink-faint);
}
.ofp-section-card button.btn--ghost{
    margin: 10px 14px 12px !important;
    width: calc(100% - 28px) !important;
}

.ofp-map-wrap{
    margin: 14px 0;
    border-radius: var(--radius-md, 14px);
    overflow: hidden;
    border: 1px solid var(--line);
}
.ofp-map-route-strip{
    padding: 8px 12px;
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--ink-soft);
    background: var(--paper2);
    border-top: 1px solid var(--line);
    word-break: break-word;
}
#ofpMap{
    height: 220px;
    width: 100%;
    background: var(--paper2);
}
.ofp-map-marker-dep, .ofp-map-marker-arr{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.ofp-map-marker-dep{ background: #178a4c; }
.ofp-map-marker-arr{ background: var(--log-red); }
.ofp-map-marker-wpt{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fbbf24;
    border: 1px solid rgba(0,0,0,.3);
}
.ofp-map-wind{
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.ofp-map-wind svg{ width: 100%; height: 100%; }
.ofp-map-wind-lbl{
    font-size: 9px;
    font-weight: 800;
    color: #fbbf24;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
    text-align: center;
    margin-top: 1px;
}

.ofp-strip{
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--log-red-tint), rgba(37,99,235,.05));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 20px);
    padding: 20px 18px;
    margin-bottom: 14px;
}
.ofp-strip-apt{
    flex: 0 0 auto;
    min-width: 92px;
}
.ofp-strip-icao{
    font-size: 32px;
    font-weight: 200;
    letter-spacing: -.03em;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ofp-strip-city{
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 3px;
}
.ofp-strip-mid{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    min-width: 0;
}
.ofp-strip-ac{
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink-soft);
    white-space: nowrap;
}
.ofp-strip-line{
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(to right, var(--log-red) 0, var(--log-red) 5px, transparent 5px, transparent 10px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ofp-strip-line span{
    background: var(--paper);
    padding: 0 6px;
    font-size: 13px;
    color: var(--log-red);
    position: relative;
}
.ofp-strip-dist{
    font-size: 10px;
    color: var(--ink-faint);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════
   MANIFEST — dense label/value document rows, replacing
   the uniform meta-pill / time-pill tile grids.
══════════════════════════════════════════════════ */
.ofp-manifest{
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 14px);
    overflow: hidden;
    margin-bottom: 14px;
}
.ofp-manifest-row{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 14px;
    font-size: 12px;
    border-top: 1px solid var(--line);
    background: var(--paper);
}
.ofp-manifest-row:first-child{ border-top: none; }
.ofp-manifest-row span{ color: var(--ink-faint); text-transform: uppercase; font-size: 9.5px; letter-spacing: .07em; }
.ofp-manifest-row strong{ color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Limits tab explainer — sets expectations that structural limits are editable reference values, not pulled from a certified data source */
.ofp-limits-note{
    font-size: 11px;
    line-height: 1.6;
    color: var(--ink-soft);
    background: var(--paper2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 10px);
    padding: 12px 14px;
    margin-bottom: 14px;
}

/* Navlog — waypoint-by-waypoint routing table */
.navlog-hdr-row{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
    gap: 6px;
    padding: 7px 12px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-faint);
    background: var(--paper2);
    border-radius: var(--radius-sm, 10px) var(--radius-sm, 10px) 0 0;
    border: 1px solid var(--line);
    border-bottom: none;
}
.navlog-row{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
    gap: 6px;
    padding: 8px 12px;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-top: none;
}
.navlog-row:last-child{ border-radius: 0 0 var(--radius-sm, 10px) var(--radius-sm, 10px); }
.navlog-row:nth-child(even){ background: var(--paper2); }
.navlog-fix{ font-weight: 700; color: var(--ink); }