/* A-2.2 — responsive + accessibility tweaks across screen sizes.
 *
 * Maintainer convention: organise by breakpoint, smallest-first.
 * Bootstrap-5 ranges used as anchors:
 *   <= 375 px  very small phones (iPhone SE, older Android)
 *   <= 576 px  phones (Bootstrap xs)
 *   <= 768 px  tablets portrait + large phones (Bootstrap sm)
 *   <= 992 px  small tablets / iPad portrait (Bootstrap md)
 *  >= 1440 px  large desktops
 *
 * The body padding-bottom reserves space for the fixed disclaimer
 * footer (mod_disclaimer.R) — it has to scale because the footer
 * wraps to 2-3 lines on narrow phones.
 */

/* ============ All viewports ============ */

/* Body padding-bottom default for the fixed disclaimer footer.
   Single-line footer ~ 28 px; allow a hair more so the last bit of
   content sits clear above the dashed border. */
body {
  padding-bottom: 40px;
}

/* Disclaimer footer link — touch-friendly even on desktop. */
.oktemp-footer-link {
  min-height: 24px;
  display: inline-block;
}

/* ============ <= 375 px : very small phones ============ */
@media (max-width: 375px) {
  /* Brand text — shrink hard so the hamburger doesn't get pushed. */
  .navbar-brand {
    font-size: 0.9rem;
    letter-spacing: -0.02em;
  }

  /* Bump 'small' marginalia to a more readable size on tiny screens —
     12 px greys outdoor + bright LCD are unreadable. */
  .small,
  .small.text-muted,
  p.small,
  .alert.small {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  /* Disclaimer footer can wrap to 3 lines on a 320 px screen; reserve
     more body padding so content scrolls clear. */
  body {
    padding-bottom: 64px;
  }
}

/* ============ <= 576 px : all phones (Bootstrap xs) ============ */
@media (max-width: 576px) {
  /* Body padding-bottom for the wrapping footer. */
  body {
    padding-bottom: 52px;
  }

  /* Bigger touch targets for small buttons. */
  .btn-sm {
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
    min-height: 36px;
  }

  /* Stack horizontal button rows in the station-panel header so each
     button gets full width and a comfortable tap area. */
  .station-header-row,
  .row.station-header {
    flex-direction: column;
    gap: 0.5rem;
  }
  .station-header-row > [class*="col-"],
  .row.station-header > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Modal — let the disclaimer modal fit a phone, not a desktop. */
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem);
  }

  /* Popovers — popover max-width default (380) overflows a 320 px
     screen. Cap at viewport width and let them scroll vertically. */
  .popover {
    max-width: 90vw !important;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* Plot heights: 300 px stacked twice consumes a phone's viewport.
     Shrink for breathing room. */
  .shiny-plot-output,
  div[id$="-temp_plot"],
  div[id$="-flow_plot"] {
    height: 220px !important;
  }

  /* Alerts (caveat boxes) — bump padding + slightly larger text
     because the yellow-on-yellow Bootstrap default is fragile on
     bright LCDs at small sizes. */
  .alert.small {
    padding: 0.75rem 1rem;
  }

  /* Leaflet controls — shrink to reclaim viewport. */
  .leaflet-control-layers,
  .leaflet-control-attribution {
    font-size: 0.8rem;
    max-width: 160px;
  }

  /* Leaflet legend block — narrower max, allow word-wrap rather than
     hard <br>. */
  .leaflet-legend,
  .info.legend {
    font-size: 0.85rem;
    max-width: 150px;
    word-break: break-word;
  }

  /* Hide navbar tagline on phones (already there at 768; reinforce
     for the xs range). */
  .navbar-text.text-warning {
    display: none;
  }
}

/* ============ <= 768 px : phones + large phones landscape ============ */
@media (max-width: 768px) {
  /* Maps: trade fixed 640 px for viewport-relative so legend + banner
     stay reachable without long scroll. */
  #basin_map-map,
  #risk_map-map,
  #thermal_grid-map {
    height: 55vh !important;
    min-height: 320px;
  }

  /* Station panel: stack temperature + discharge plots. */
  .station-plot-row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* New tabs added 2026-05-20: stack their hand-written column rows on
     phones + narrow tablets. column(8)+column(4) and column(7)+column(5)
     squeeze the right-hand panel below readability at <768 px. */
  .compare-controls > [class*="col-"],
  .refugia-row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* The Refugia table needs vertical separation from the map when
     stacked. */
  .refugia-row > [class*="col-"] + [class*="col-"] {
    margin-top: 1rem;
  }

  /* Long brand text: shrink so it doesn't wrap into two lines and
     shove the nav toggle around. */
  .navbar-brand {
    font-size: 1rem;
    white-space: normal;
    line-height: 1.15;
  }

  /* Sidebar text — when the offcanvas drawer is open, default 'small'
     text is hard to read. */
  .sidebar .small,
  .sidebar .small.text-muted {
    font-size: 0.95rem;
  }
}

/* ============ 769-992 px : iPad portrait + small tablets ============ */
@media (min-width: 769px) and (max-width: 992px) {
  #basin_map-map,
  #risk_map-map,
  #thermal_grid-map {
    height: 65vh !important;
  }

  /* On iPad portrait the side-by-side plots are still tight at
     300 px — give them a hair more without breaking the layout. */
  div[id$="-temp_plot"],
  div[id$="-flow_plot"] {
    height: 270px !important;
  }
}

/* ============ >= 1440 px : large desktops ============ */
@media (min-width: 1440px) {
  /* Default container caps content at ~1320 px on Bootstrap 5; loosen
     for big monitors so the map + side panels breathe. */
  .container,
  .container-fluid {
    max-width: 1600px;
  }
}