/*
 * MyEFB 1.1.2 — window-adaptive iPad and tablet layout.
 *
 * All conditions use CSS viewport/window dimensions, NOT physical iPad
 * orientation. iPadOS resizable windows and browser Split View therefore
 * respond automatically, without JS viewport scaling or changing pilot data.
 * Phone-sized windows keep the existing compact layout.
 */

/* Medium Split View windows should not keep the 440px phone launcher. */
@media (min-width: 520px) and (max-width: 699px) {
  body[data-efb-app="home"] .efbHomeMain.efbHomeFlightFirst {
    box-sizing: border-box!important;
    width: 100%!important;
    max-width: none!important;
    height: 100dvh!important;
    min-height: 0!important;
    overflow-x: hidden!important;
    overflow-y: auto!important;
    -webkit-overflow-scrolling: touch;
  }
  body[data-efb-app="home"] .efbHomeFlightFirst :is(
    .myEfbHomeBrand, .efbHomeIntro, .efbAppsSection
  ) {
    box-sizing: border-box!important;
    width: min(100%, 640px)!important;
    max-width: 640px!important;
    min-width: 0!important;
  }
}

/* Fluid widths must shrink with their parent, including Stage Manager. */
@media (min-width: 700px) {
  body[data-efb-app="home"] .efbHomeMain.efbHomeFlightFirst {
    box-sizing: border-box!important;
    width: 100%!important;
    max-width: none!important;
    height: 100dvh!important;
    min-height: 0!important;
    overflow-x: hidden!important;
    overflow-y: auto!important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-inline: max(16px, env(safe-area-inset-left), env(safe-area-inset-right))!important;
  }
  body[data-efb-app="home"] .efbHomeFlightFirst :is(
    .myEfbHomeBrand, .efbHomeIntro, .efbAppsSection
  ) {
    box-sizing: border-box!important;
    width: min(100%, 1060px)!important;
    max-width: 1060px!important;
    min-width: 0!important;
  }
  body[data-efb-app="home"] .efbHomeFlightFirst .efbHomeIntro {
    margin-block: clamp(8px, 2dvh, 24px)!important;
  }
  body[data-efb-app="home"] .efbHomeFlightFirst .efbAppGrid {
    min-width: 0!important;
    grid-template-columns: repeat(2, minmax(0, 1fr))!important;
    gap: clamp(8px, 1.2vw, 16px)!important;
  }
  body[data-efb-app="home"] .efbHomeFlightFirst .efbAppTile {
    min-width: 0!important;
    max-width: 100%!important;
  }

  /* Landscape pages can use the full app window instead of phone columns. */
  #calculatorView.appMain {
    box-sizing: border-box!important;
    width: min(100%, 1400px)!important;
    max-width: 1400px!important;
    min-width: 0!important;
    padding-inline: clamp(12px, 2vw, 28px)!important;
    padding-bottom: max(104px, calc(env(safe-area-inset-bottom) + 92px))!important;
  }
  #calculatorView :is(.routeGrid, .routePair, .performanceScheduleRow, .performanceSwitcher) {
    min-width: 0!important;
    max-width: 100%!important;
  }
  #calculatorView :is(.routeField, .eobtField, .dateField, .performanceTab) {
    min-width: 0!important;
  }

  /* Checklist selection uses balanced, readable columns on wider windows. */
  body[data-efb-app="checklists"] #checklistsView.checklistsMain {
    box-sizing: border-box!important;
    width: min(100%, 1320px)!important;
    max-width: 1320px!important;
    min-width: 0!important;
    padding-inline: clamp(14px, 2vw, 28px)!important;
  }
  body[data-efb-app="checklists"] #checklistsView .checklistsPanel {
    box-sizing: border-box!important;
    width: 100%!important;
    max-width: 1160px!important;
    min-width: 0!important;
  }
  body[data-efb-app="checklists"] #checklistGroupLibrary {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr))!important;
    align-items: stretch!important;
    gap: clamp(9px, 1.3vw, 18px)!important;
  }
  body[data-efb-app="checklists"] #checklistGroupLibrary > * {
    box-sizing: border-box!important;
    min-width: 0!important;
    max-width: 100%!important;
  }

  body[data-efb-app="settings"] #settingsView.settingsMain {
    width: min(100%, 1380px)!important;
    max-width: 1380px!important;
    min-width: 0!important;
    box-sizing: border-box!important;
    padding-inline: clamp(12px, 2vw, 26px)!important;
  }
  body[data-efb-app="settings"] #settingsView .settingsContent {
    width: 100%!important;
    max-width: 1120px!important;
    min-width: 0!important;
  }
  body[data-efb-app="settings"] #settingsView .settingsNav {
    width: min(1100px, calc(100vw - 32px))!important;
    max-width: calc(100vw - 32px)!important;
    box-sizing: border-box!important;
  }
}

/* Roomy iPad mini landscape / large resizable windows: the cockpit cards
   use the WIDTH on a single row instead of stretching vertically. */
@media (min-width: 960px) and (min-height: 700px) {
  #dashboardView.flightDashboardMain {
    box-sizing: border-box!important;
    width: 100%!important;
    height: 100dvh!important;
    min-height: 0!important;
    overflow: hidden!important;
    padding:
      max(67px, calc(env(safe-area-inset-top) + 56px))
      clamp(14px, 2vw, 28px)
      max(88px, calc(env(safe-area-inset-bottom) + 78px))!important;
  }
  #dashboardView .flightDashboardShell {
    width: 100%!important;
    max-width: 1380px!important;
    min-width: 0!important;
    height: 100%!important;
    grid-template-rows: auto minmax(0, 1fr) auto!important;
    gap: clamp(9px, 1.3dvh, 16px)!important;
  }
  #dashboardView .flightDashboardMetrics {
    min-width: 0!important;
    min-height: 0!important;
    gap: clamp(9px, 1.2vw, 16px)!important;
  }
  #dashboardView[data-flight-stage="preflight"] .flightDashboardMetrics {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr)!important;
    grid-template-rows: minmax(0, 1fr)!important;
  }
  #dashboardView[data-flight-stage="preflight"] #dashboardFlightDetailsMetric {
    grid-column: 1!important;
    grid-row: 1!important;
  }
  #dashboardView[data-flight-stage="preflight"] #dashboardMetarMetric {
    grid-column: 2!important;
    grid-row: 1!important;
  }
  #dashboardView[data-flight-stage="flight"] .flightDashboardMetrics {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, 1.08fr)!important;
    grid-template-rows: minmax(0, 1fr)!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardBlockMetric {
    grid-column: 1!important;
    grid-row: 1!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardEnduranceMetric {
    grid-column: 2!important;
    grid-row: 1!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardMetarMetric {
    grid-column: 3!important;
    grid-row: 1!important;
  }
  #dashboardView .flightDashboardMetric {
    box-sizing: border-box!important;
    min-width: 0!important;
    padding: clamp(12px, 1.5vw, 22px)!important;
  }
  #dashboardView #dashboardEnduranceMetric .flightDashboardFuelReadouts {
    column-gap: clamp(7px, 1.3vw, 16px)!important;
  }
  #dashboardView #dashboardEnduranceMetric :is(
    .flightDashboardFuelReadout>strong,
    .flightDashboardRemainingValue>strong
  ) {
    font-size: clamp(2.05rem, 3.8vw, 3.4rem)!important;
  }
  #dashboardView #dashboardBlockMetric .flightDashboardBlockElapsedRow>strong {
    font-size: clamp(2.2rem, 4.2vw, 3.8rem)!important;
  }
  #dashboardView .flightDashboardTankPanel {
    gap: clamp(6px, 1vw, 12px)!important;
    margin-top: clamp(5px, 1.2dvh, 12px)!important;
  }
  #dashboardView .flightDashboardTankChoice {
    padding: clamp(5px, .75vw, 11px)!important;
  }
  #dashboardView .flightDashboardActions {
    min-height: 52px!important;
    gap: clamp(8px, 1vw, 14px)!important;
  }
}

/* Shorter or narrower tablet windows (excluding short iPhone landscape): avoid
   dashboard height. Keep scroll inside the page and reserve the bottom dock. */
@media (min-width: 440px) and (max-width: 959px) and (min-height: 450px),
       (min-width: 960px) and (max-height: 699px) and (min-height: 450px) {
  #dashboardView.flightDashboardMain {
    box-sizing: border-box!important;
    height: 100dvh!important;
    min-height: 0!important;
    overflow-x: hidden!important;
    overflow-y: auto!important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: max(56px, calc(env(safe-area-inset-top) + 44px))!important;
    padding-bottom: max(110px, calc(env(safe-area-inset-bottom) + 100px))!important;
    padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right))!important;
  }
  #dashboardView .flightDashboardShell {
    width: 100%!important;
    max-width: 1200px!important;
    height: auto!important;
    min-height: 100%!important;
    grid-template-rows: auto auto auto!important;
    gap: clamp(8px, 1.6dvh, 14px)!important;
  }
  #dashboardView[data-flight-stage="preflight"] .flightDashboardMetrics {
    height: auto!important;
    min-height: 0!important;
    grid-template-columns: minmax(0, 1fr)!important;
    grid-template-rows: minmax(215px, auto) minmax(155px, auto)!important;
  }
  #dashboardView[data-flight-stage="flight"] .flightDashboardMetrics {
    height: auto!important;
    min-height: 0!important;
    grid-template-columns: repeat(2, minmax(0, 1fr))!important;
    grid-template-rows: minmax(305px, auto) minmax(155px, auto)!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardMetarMetric {
    grid-column: 1 / -1!important;
    grid-row: 2!important;
  }
  #dashboardView :is(.flightDashboardMetric, .flightDashboardActions) {
    min-width: 0!important;
  }
  #dashboardView .flightDashboardMetric {
    padding: clamp(10px, 2vw, 18px)!important;
  }
}

/* Narrow floating windows need a fully stacked cockpit: no squeezed
   dual-tank control or METAR column, with accessible vertical scrolling. */
@media (min-width: 440px) and (max-width: 599px) and (min-height: 450px) {
  #dashboardView[data-flight-stage="flight"] .flightDashboardMetrics {
    grid-template-columns: minmax(0, 1fr)!important;
    grid-template-rows: minmax(185px, auto) minmax(280px, auto) minmax(160px, auto)!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardBlockMetric {
    grid-column: 1!important;
    grid-row: 1!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardEnduranceMetric {
    grid-column: 1!important;
    grid-row: 2!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardMetarMetric {
    grid-column: 1!important;
    grid-row: 3!important;
  }
  #dashboardView #dashboardEnduranceMetric :is(
    .flightDashboardFuelReadout>strong,
    .flightDashboardRemainingValue>strong
  ) {
    font-size: clamp(1.7rem, 6.5vw, 2.5rem)!important;
  }
}

/* Intermediate landscape windows: use both columns for preflight and let
   the METAR scroll internally rather than wasting the entire second row. */
@media (min-width: 820px) and (max-width: 959px) and (min-height: 630px) {
  #dashboardView[data-flight-stage="preflight"] .flightDashboardMetrics {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr)!important;
    grid-template-rows: minmax(310px, auto)!important;
  }
  #dashboardView[data-flight-stage="preflight"] #dashboardFlightDetailsMetric {
    grid-column: 1!important;
    grid-row: 1!important;
  }
  #dashboardView[data-flight-stage="preflight"] #dashboardMetarMetric {
    grid-column: 2!important;
    grid-row: 1!important;
  }
}

/* Four-column Home launcher when the ACTUAL window is wide enough.
   Narrowing the iPad window naturally falls back to two columns. */
@media (min-width: 800px) {
  body[data-efb-app="home"] .efbHomeFlightFirst .efbAppGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr))!important;
  }
  body[data-efb-app="home"] .efbHomeFlightFirst :is(
    .efbGridSlot:has(>[data-app-id="dashboard"]),
    .efbAppGrid>[data-app-id="dashboard"]
  ) {
    grid-column: span 2!important;
  }
  body[data-efb-app="home"] .efbHomeFlightFirst :is(
    .efbGridSlot:has(>[data-app-id="settings"]),
    .efbAppGrid>[data-app-id="settings"]
  ) {
    grid-column: 1 / -1!important;
  }
}

/* Don't let an especially short resizable window hide the launcher. */
@media (min-width: 700px) and (max-height: 600px) {
  body[data-efb-app="home"] .efbHomeMain.efbHomeFlightFirst {
    overflow-y: auto!important;
    padding-bottom: max(22px, env(safe-area-inset-bottom))!important;
  }
  body[data-efb-app="home"] .efbHomeFlightFirst .efbHomeIntro {
    margin-block: 7px!important;
  }
  body[data-efb-app="home"] .efbHomeFlightFirst [data-app-id="dashboard"] {
    min-height: 110px!important;
    height: auto!important;
  }
  body[data-efb-app="home"] .efbHomeFlightFirst :is(
    [data-app-id="calculator"], [data-app-id="checklists"]
  ) {
    min-height: 110px!important;
    height: auto!important;
  }
}

/* Avoid any fixed-viewport title or form overflowing the window width. */
@media (min-width: 520px) {
  #calculatorView :is(.dateControl, .eobtControlRow, .airportSearch, .manualRunwaySelectWrap),
  #settingsView :is(.settingsShell, .settingsCard, .settingsContent),
  #checklistsView :is(.checklistsPanel, .checklistGroupLibrary) {
    box-sizing: border-box!important;
    min-width: 0!important;
    max-width: 100%!important;
  }
}


/* 1.1.1 — Stage Manager's shortest landscape windows have <450 CSS px
   of height. Use a scrollable document flow instead of the phone-landscape
   fixed-height grid; preserve the full touch controls and safe bottom dock. */
@media (min-width: 440px) and (max-height: 449px) {
  #dashboardView.flightDashboardMain {
    box-sizing: border-box!important;
    width: 100%!important;
    height: 100dvh!important;
    min-height: 0!important;
    overflow-x: hidden!important;
    overflow-y: auto!important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding:
      max(46px, calc(env(safe-area-inset-top) + 40px))
      max(10px, env(safe-area-inset-right), env(safe-area-inset-left))
      max(118px, calc(env(safe-area-inset-bottom) + 108px))!important;
  }
  #dashboardView .flightDashboardShell {
    display: grid!important;
    box-sizing: border-box!important;
    width: 100%!important;
    max-width: 1200px!important;
    height: auto!important;
    min-height: 0!important;
    grid-template-rows: auto auto auto!important;
    gap: 9px!important;
  }
  #dashboardView .flightDashboardMetrics {
    height: auto!important;
    min-width: 0!important;
    min-height: 0!important;
    gap: 9px!important;
  }
  #dashboardView[data-flight-stage="preflight"] .flightDashboardMetrics {
    grid-template-columns: minmax(0, 1fr)!important;
    grid-template-rows: minmax(215px, auto) minmax(150px, auto)!important;
  }
  #dashboardView[data-flight-stage="flight"] .flightDashboardMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr))!important;
    grid-template-rows: minmax(275px, auto) minmax(155px, auto)!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardBlockMetric {
    grid-column: 1!important;
    grid-row: 1!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardEnduranceMetric {
    grid-column: 2!important;
    grid-row: 1!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardMetarMetric {
    grid-column: 1 / -1!important;
    grid-row: 2!important;
  }
  #dashboardView .flightDashboardMetric {
    box-sizing: border-box!important;
    min-width: 0!important;
    height: auto!important;
    padding: clamp(10px, 1.4vw, 16px)!important;
  }
  #dashboardView .flightDashboardActions {
    min-height: 48px!important;
    gap: 8px!important;
  }
  body[data-efb-app="home"] .efbHomeMain.efbHomeFlightFirst {
    box-sizing: border-box!important;
    height: 100dvh!important;
    min-height: 0!important;
    overflow-x: hidden!important;
    overflow-y: auto!important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(34px, calc(env(safe-area-inset-bottom) + 24px))!important;
  }
  #calculatorView.appMain, #checklistsView.checklistsMain, #settingsView.settingsMain {
    box-sizing: border-box!important;
    padding-bottom: max(118px, calc(env(safe-area-inset-bottom) + 108px))!important;
  }
}

/* In wide, very short windows keep the airport details and METAR side by
   side, using available width while vertical scrolling exposes all rows. */
@media (min-width: 820px) and (max-height: 449px) {
  #dashboardView[data-flight-stage="preflight"] .flightDashboardMetrics {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr)!important;
    grid-template-rows: minmax(270px, auto)!important;
  }
  #dashboardView[data-flight-stage="preflight"] #dashboardFlightDetailsMetric {
    grid-column: 1!important;
    grid-row: 1!important;
  }
  #dashboardView[data-flight-stage="preflight"] #dashboardMetarMetric {
    grid-column: 2!important;
    grid-row: 1!important;
  }
}

/* A narrow floating window must not squeeze two fuel-tank cards into half
   of an already-narrow two-column flight dashboard. */
@media (min-width: 440px) and (max-width: 639px) and (max-height: 449px) {
  #dashboardView[data-flight-stage="flight"] .flightDashboardMetrics {
    grid-template-columns: minmax(0, 1fr)!important;
    grid-template-rows: minmax(180px, auto) minmax(275px, auto) minmax(150px, auto)!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardBlockMetric {
    grid-column: 1!important;
    grid-row: 1!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardEnduranceMetric {
    grid-column: 1!important;
    grid-row: 2!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardMetarMetric {
    grid-column: 1!important;
    grid-row: 3!important;
  }
}


/* 1.1.2 — window-first refinements. At 780+ CSS px, even shorter Split View
   windows have room for preflight details and a separate METAR column.
   Their page already scrolls vertically, so do not throw away horizontal
   space solely because the available window is shorter than 700 CSS px. */
@media (min-width: 780px) and (max-width: 959px) and (min-height: 450px),
       (min-width: 960px) and (max-height: 699px) and (min-height: 450px) {
  #dashboardView[data-flight-stage="preflight"] .flightDashboardMetrics {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr)!important;
    grid-template-rows: minmax(265px, auto)!important;
    align-items: stretch!important;
  }
  #dashboardView[data-flight-stage="preflight"] #dashboardFlightDetailsMetric {
    grid-column: 1!important;
    grid-row: 1!important;
  }
  #dashboardView[data-flight-stage="preflight"] #dashboardMetarMetric {
    grid-column: 2!important;
    grid-row: 1!important;
    min-width: 0!important;
  }
}

/* In a narrow resizable tablet window the fuel card must have the FULL
   width: two side-by-side cockpit cards make individual tank inputs too
   narrow even if the viewport is technically wider than a phone. */
@media (min-width: 440px) and (max-width: 679px) and (min-height: 450px) {
  #dashboardView[data-flight-stage="flight"] .flightDashboardMetrics {
    grid-template-columns: minmax(0, 1fr)!important;
    grid-template-rows: minmax(180px, auto) minmax(285px, auto) minmax(155px, auto)!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardBlockMetric {
    grid-column: 1!important;grid-row: 1!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardEnduranceMetric {
    grid-column: 1!important;grid-row: 2!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardMetarMetric {
    grid-column: 1!important;grid-row: 3!important;
  }
}

/* At mid-size windows use the card width, not the overall screen width, for
   the big three numeric readouts. Existing 9vw rules can otherwise squeeze
   "Endurance" and "Fuel Rem." into one another in two-column layouts. */
@media (min-width: 680px) and (max-width: 959px) {
  #dashboardView[data-flight-stage="flight"] #dashboardEnduranceMetric :is(
    .flightDashboardFuelReadout > strong,
    .flightDashboardRemainingValue > strong
  ) {
    font-size: clamp(1.9rem, 3.9vw, 3rem)!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardBlockMetric .flightDashboardBlockElapsedRow > strong {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem)!important;
  }
  #dashboardView[data-flight-stage="flight"] #dashboardEnduranceMetric .flightDashboardFuelReadout > span {
    font-size: clamp(.68rem, 1.4vw, .87rem)!important;
    white-space: nowrap!important;
  }
}

/* On short tablet windows, preserve useful tap targets instead of shrinking
   controls to 25–33 CSS pixels. The dashboard scrolls when height is scarce. */
@media (min-width: 440px) and (max-height: 699px) {
  #dashboardView .flightDashboardTankChoice > button {
    box-sizing: border-box!important;
    min-height: 44px!important;
  }
  #dashboardView .flightDashboardTankChoice .flightDashboardTankStartInput {
    box-sizing: border-box!important;
    min-height: 40px!important;
    font-size: 16px!important;
  }
  #dashboardView .flightDashboardRefresh {
    width: 44px!important;
    height: 44px!important;
    min-width: 44px!important;
    min-height: 44px!important;
  }
  #dashboardView .flightDashboardAction {
    min-height: 44px!important;
  }
  body[data-efb-app="settings"] #settingsView .settingsNav button {
    min-height: 44px!important;
  }
}

/* Date and EOBT remain two coordinated columns while the window changes.
   Reserve a full-height heading row so UTC/Local cannot overlap the inputs,
   and keep date, time and Now on a shared lower baseline. */
@media (min-width: 520px) {
  #calculatorView .performanceScheduleRow {
    min-width: 0!important;
    width: 100%!important;
  }
  #calculatorView .performanceScheduleRow > #flightDateField,
  #calculatorView .performanceScheduleRow > .eobtField {
    grid-template-rows: 44px 44px!important;
    row-gap: 6px!important;
    min-width: 0!important;
  }
  #calculatorView .performanceScheduleRow .eobtHeading {
    height: 44px!important;
    min-height: 44px!important;
    max-height: 44px!important;
  }
  #calculatorView .performanceScheduleRow .timeModeToggle {
    box-sizing: border-box!important;
    padding: 0!important;
    max-height: 44px!important;
  }
  #calculatorView .performanceScheduleRow .eobtHeading .timeModeToggle button {
    box-sizing: border-box!important;
    height: 40px!important;
    min-height: 40px!important;
  }
  #calculatorView .performanceScheduleRow .eobtControlRow {
    grid-template-columns: minmax(0, 1fr) minmax(52px, 4.2rem)!important;
  }
  #calculatorView .performanceScheduleRow :is(
    .dateControl, .eobtControlRow, #eobt, #eobtNow
  ) {
    min-width: 0!important;
    max-width: 100%!important;
    box-sizing: border-box!important;
  }
}
@media (min-width: 520px) and (max-width: 659px) {
  #calculatorView .routeGrid > .performanceScheduleRow {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr)!important;
    column-gap: 8px!important;
  }
  #calculatorView .performanceScheduleRow .eobtControlRow {
    grid-template-columns: minmax(0, 1fr) 52px!important;
    column-gap: 5px!important;
  }
}