/* Flight Ops Cockpit — responsive layout (3.1.22; 3.1.24 header flight line and bottom tab bar).
 *
 * Loaded LAST, after every inline <style> block and cockpit-v3118.css, so it is the one place that
 * decides how the header, the tab bar and the wide panels fit a screen. Earlier releases layered
 * width fixes on top of each other; several of them pinned sizes (a 218 px status column, a
 * 486 px Next Flight bar, a nine-column tab grid) that only worked at iPad width.
 *
 * Breakpoints, by the device actually in the hand:
 *   ≥1100 px   iPad landscape, laptop, desktop — one header row: brand · UTC + flight · theme
 *   700–1099   iPad portrait / small tablet  — brand and theme, then UTC + flight
 *   <700       phone                          — compact brand and theme, then UTC + flight
 * 3.1.24: the tab bar sits at the bottom at every width (seven tabs, in the order of the day) and
 * the old bottom bar (SAVE / REVIEW & CERTIFY) moved to the top of the Log — see app-shell.js.
 * Checked with tools/responsive-audit.py at 320, 360, 390, 430, 600, 768, 820, 1024, 1180, 1366
 * and 1920 px on every screen: no page is wider than the screen, nothing in the header overlaps
 * and no tab label is clipped.
 */

/* ---------- every width ------------------------------------------------------------------- */
/* 3.1.27 — clip, not hidden: overflow-x:hidden made <body> its own scroll container, and with the
   page's overscroll-behavior-y:none on body a mouse wheel or trackpad stopped at body and never
   reached the page — HOME, LOG, BRIEFING, FDP and MORE pages would not scroll on a Mac. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, canvas, video { max-width: 100%; }

/* Header: brand and status are two grid areas that never overlap. */
.v302-header-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas: "brand status" !important;
  align-items: center !important;
  gap: 10px 18px !important;
  min-height: 0 !important;
}
.v302-brand { grid-area: brand !important; display: flex !important; align-items: center !important; min-width: 0 !important; }
.v302-brand-logo { flex: 0 1 auto !important; min-width: 0 !important; }
.v25-brand-copy { flex: 0 0 auto !important; position: relative !important; left: auto !important; top: auto !important; transform: none !important; }
.v25-version { white-space: nowrap !important; }
.v302-status-cluster {
  grid-area: status !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
.v302-status-pill { white-space: nowrap !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.v302-theme-switch { flex: 0 0 auto !important; }
.v302-status-cluster > * { width: auto !important; max-width: 100% !important; flex: 0 0 auto !important; grid-column: auto !important; margin: 0 !important; }
.v302-theme-switch { display: inline-flex !important; }
.v302-theme-switch > .v302-theme-btn { flex: 0 0 auto !important; width: auto !important; }

/* Tab bar: equal columns, labels never clipped. */
#nav { display: grid !important; grid-template-columns: repeat(9, minmax(0, 1fr)) !important; gap: 6px !important; overflow: visible !important; }
#nav > button { min-width: 0 !important; width: auto !important; position: relative !important; }
/* The ✓ / ! state is a corner badge, so it never takes width from the label. */
#nav > button .nav-state { position: absolute !important; top: 3px !important; right: 3px !important; margin: 0 !important; }
#nav > button .nav-label { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; letter-spacing: .02em !important; }

/* CMS schedule header: title, actions and Next Flight wrap instead of pushing the page wide. */
.cms-schedule-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "title actions" "next next" !important;
  gap: 10px 14px !important;
  align-items: start !important;
}
.cms-schedule-head > .cms-schedule-title { grid-area: title !important; min-width: 0 !important; }
.cms-schedule-head > .cms-schedule-actions { grid-area: actions !important; display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 8px !important; width: auto !important; min-width: 0 !important; }
.cms-schedule-head > .cms-next-head { grid-area: next !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; }
.cms-next-head .cms-next { min-width: 0 !important; max-width: 100% !important; }
.cms-next-head .cms-next .route { min-width: 0 !important; }

/* Wide tables scroll inside their card rather than widening the page. */
.screen table { max-width: 100%; }
.screen .card, .screen .compliance-tile, .screen .sector { min-width: 0; }
.fo-wide-scroll, .screen .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* Below wide desktop the nine tabs are too narrow for icon-beside-label: stack icon over label. */
@media (max-width: 1365px) {
  #nav > button { flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 3px !important; padding: 6px 2px !important; min-height: 54px !important; position: relative !important; text-align: center !important; }
  #nav > button .nav-label { font-size: 11px !important; line-height: 1.1 !important; }
  #nav > button .nav-state { position: absolute !important; top: 3px !important; right: 3px !important; margin: 0 !important; }
}

/* ---------- iPad portrait / small tablet --------------------------------------------------- */
@media (max-width: 1099px) {
  .v302-header-row {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "brand" "status" !important;
    padding-top: 10px !important; padding-bottom: 10px !important;
  }
  .v302-status-cluster { justify-content: flex-start !important; }
}

/* ---------- phone -------------------------------------------------------------------------- */
@media (max-width: 699px) {
  .v302-brand-logo { height: 40px !important; max-height: 40px !important; max-width: min(64vw, 260px) !important; }
  .v302-brand { gap: 10px !important; }
  .v25-brand-copy { padding-left: 10px !important; }
  .v25-brand-copy:before { top: -6px !important; bottom: -6px !important; }
  .v25-version { padding: 4px 8px !important; font-size: 10px !important; }
  .v302-status-cluster { gap: 5px !important; }
  .v302-status-pill { font-size: 10px !important; padding: 6px 9px !important; min-height: 0 !important; letter-spacing: .04em !important; }
  .v302-theme-btn { font-size: 10px !important; padding: 6px 10px !important; min-height: 32px !important; }
  #localState { font-size: 10px !important; padding: 6px 9px !important; }

  #nav { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 5px !important; padding-left: 8px !important; padding-right: 8px !important; }
  #nav > button { min-height: 50px !important; padding: 6px 2px !important; }
  #nav > button .nav-label { font-size: 10px !important; letter-spacing: 0 !important; }

  .cms-schedule-head { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "title" "next" "actions" !important; }
  .cms-schedule-head > .cms-schedule-actions { justify-content: flex-start !important; }
  .cms-schedule-head > .cms-schedule-actions .btn { flex: 1 1 auto !important; }
  /* Next Flight: label and date on the left, button on the right, route on its own line. */
  .cms-next-head .cms-next {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "label button" "meta button" "route route" !important;
  }
  .cms-next-head .cms-next .cms-next-label { grid-area: label !important; }
  .cms-next-head .cms-next .cms-next-top { grid-area: meta !important; }
  /* Month calendar: the gold border marks today; the TODAY tag does not fit a phone-width cell. */
  .cms-cal-num > span { display: none !important; }
}

@media (max-width: 359px) {
  #nav > button .nav-label { font-size: 9px !important; }
  .v302-status-pill { font-size: 9px !important; padding: 5px 7px !important; }
}

/* ---------- 3.1.24 app shell: header flight line, bottom tab bar ---------------------------- */
body.shell-on .v302-header-row { grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-areas: "brand flight status" !important; }
body.shell-on .shell-flight { grid-area: flight; }
body.shell-on #headerAircraft, body.shell-on #headerRoute { display: none !important; }
body.shell-on .v302-brand-logo { height: 40px !important; max-height: 40px !important; width: auto !important; }
body.shell-on .shell-flight #headerUtc { min-width: 0 !important; font-size: 17px !important; padding: 8px 12px !important; letter-spacing: .04em !important; }
body.shell-on .v302-header { position: sticky !important; top: 0 !important; z-index: 40 !important; }

body.shell-on #nav {
  position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 45 !important;
  display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 6px !important;
  margin: 0 !important; padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  border-top: 2px solid var(--v30-gold, #b7923f) !important; border-bottom: 0 !important; overflow: visible !important;
  max-width: none !important; width: auto !important;
}
body.shell-on #nav > .nav-logo-wrap { display: none !important; }
body.shell-on #nav > button {
  flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 3px !important;
  min-height: 56px !important; padding: 6px 2px !important; text-align: center !important; position: relative !important;
}
body.shell-on #nav > button .nav-label { font-size: 11px !important; line-height: 1.1 !important; }
body.shell-on #nav > button.shell-home { margin-right: 6px !important; }
body.shell-on #nav > button.shell-home::after { content: ""; position: absolute; right: -7px; top: 8px; bottom: 8px; border-right: 1px solid var(--line); }
body.shell-on footer { display: none !important; }
body.shell-on main { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
body.shell-on .screen { scroll-margin-bottom: 96px !important; }
/* anything scrolled into view (NEXT actions, review panel, fields) stops above the tab bar */
html:has(body.shell-on) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
@media print { body.shell-on #nav { display: none !important; } }

@media (max-width: 1099px) {
  body.shell-on .v302-header-row { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "brand status" "flight flight" !important; }
}
@media (max-width: 699px) {
  body.shell-on .v302-brand-logo { height: 30px !important; max-height: 30px !important; max-width: 46vw !important; }
  body.shell-on .v25-version { font-size: 9px !important; padding: 3px 6px !important; }
  body.shell-on .shell-flight { gap: 10px; }
  body.shell-on .shell-flight #headerUtc { font-size: 12px !important; padding: 5px 7px !important; letter-spacing: 0 !important; }
  body.shell-on .shell-flight-l1 { font-size: 13px; }
  body.shell-on .shell-flight-l2 { font-size: 12px; }
  body.shell-on .v302-theme-btn { padding: 6px 8px !important; }
  body.shell-on #nav { gap: 3px !important; padding-left: max(4px, env(safe-area-inset-left)) !important; padding-right: max(4px, env(safe-area-inset-right)) !important; }
  body.shell-on #nav > button { min-height: 54px !important; padding: 5px 0 !important; }
  body.shell-on #nav > button .nav-label { font-size: 9.5px !important; letter-spacing: 0 !important; }
  body.shell-on #nav > button.shell-home { margin-right: 3px !important; }
  body.shell-on #nav > button.shell-home::after { right: -4px; }
}
@media (max-width: 359px) {
  body.shell-on #nav > button .nav-label { font-size: 8.5px !important; }
  body.shell-on .v302-theme-btn { padding: 5px 6px !important; font-size: 9px !important; }
}

/* Tables (fuel reconciliation, trend, NAV plan, recency) scroll sideways inside their own box. */
.screen:not(#printView) div:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
#fuelTable { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }