/* ============================================================
   Mobile layout overrides for the GPP Greece dashboard.
   ============================================================
   Everything in this file is scoped inside a single media query, so
   it has ZERO effect above the breakpoint -- the desktop layout
   (four side-by-side columns, all the precise alignment spacers
   built for that side-by-side arrangement) stays exactly as-is.

   Why !important everywhere below: the desktop column widths are set
   as inline styles from Python (flexBasis/maxWidth percentages), and
   inline styles normally beat external stylesheet rules regardless
   of selector specificity. A rule with !important is the one
   exception that still wins over a plain inline style, which is the
   only way an external stylesheet can override them here without
   editing the Python layout itself for every one of these values.

   Breakpoint: 768px (Bootstrap's own sm/md boundary) -- covers phones
   and narrow tablets in portrait, not just the smallest phone widths.
   Adjust the number below if you want the cutover to happen sooner
   or later.
   ============================================================ */

@media (max-width: 768px) {

  /* ---- Stack all four columns vertically instead of side by side ----
     Bootstrap's .row already has flex-wrap: wrap by default; forcing
     every column to 100% width makes each one wrap onto its own line
     on its own, no other change needed to make the stacking happen. */
  .app-col-sidebar,
  .app-col-main,
  .app-col-map,
  .app-col-ts-controls,
  .app-col-ts-chart {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  /* ---- Alignment spacers only mean something side-by-side ----
     These exist purely to line panels 1/3/4 up with the map's top
     edge when they sit beside it. Once stacked, "aligned with the
     map" isn't a meaningful position any more -- collapsing them to
     zero height removes the pointless gap they'd otherwise leave. */
  .app-top-align-spacer,
  .app-map-top-spacer {
    height: 0 !important;
  }

  /* ---- Citations: hide the sidebar copy, show the bottom-of-page copy ----
     The sidebar copy (app-citations-desktop) only made sense pushed to
     the bottom of a column stretched to match the map's height, which
     doesn't happen once stacked -- hidden here in favor of a second
     copy placed after everything else in the page (app-citations-
     mobile, hidden by default in Python so desktop is unaffected). */
  .app-citations-desktop {
    display: none !important;
  }
  .app-citations-mobile {
    display: block !important;
  }

  /* ---- Tighter divider-line spacing everywhere on mobile ----
     Bootstrap's default hr margin (1rem top+bottom) reads as
     reasonable breathing room on a wide desktop layout, but adds up
     to a lot of wasted vertical space once everything is stacked
     full-width on a small screen -- halved here across every divider
     line at once, rather than hunting down each one individually. */
  hr {
    margin: 0.5rem 0 !important;
  }

  /* ---- MAIN no longer needs its own top offset ----
     paddingTop: 31px exists so MAIN's content starts level with the
     sidebar's when they sit side by side. Stacked, MAIN comes after
     the sidebar (which keeps its own 31px, unchanged, to clear
     whatever sits above the whole page) -- MAIN repeating that same
     offset here is just extra gap between the sidebar's last content
     and the map. */
  .app-col-main {
    padding-top: 8px !important;
  }

  /* ---- Clear separation above "Time series" ----
     Its divider line uses mt-0 (flush against the now-collapsed
     alignment spacer above it), which reads as barely-there once
     stacked directly under the map/reset-view area -- given its own
     breathing room here instead. Wins over the blanket hr rule above
     via higher selector specificity (element+class beats class alone),
     not via rule order. */
  hr.app-ts-top-line {
    margin-top: 1rem !important;
  }

  /* ---- Shorter map on phones ----
     620px (the desktop height) can dominate an entire phone screen
     before the user even reaches the controls below it. */
  #gee-map {
    height: 380px !important;
  }

  /* ---- Omit the main title ----
     "Gross Primary Productivity — Greece" -- redundant with the
     sidebar's own "GPP Greece" heading, and costs valuable vertical
     space on a phone screen. */
  .app-col-main > h2 {
    display: none !important;
  }

  /* ---- Collapse the Annual-mode reserved space in the ts-controls
     column ----
     ts-years-col/ts-view-col use visibility:hidden (not display:none)
     in Annual mode, deliberately reserving their height so the chart
     column next to them keeps the same vertical position it has in
     Daily mode -- a desktop, side-by-side concern that stops applying
     once columns stack. The attribute selectors below only match when
     that inline visibility:hidden is actually present (i.e. Annual
     mode specifically), so Daily mode's real Years/View controls stay
     untouched and fully usable. */
  #ts-years-col[style*="visibility"][style*="hidden"],
  #ts-view-col[style*="visibility"][style*="hidden"] {
    display: none !important;
  }

  /* ---- Let charts fill their container's width ----
     Works together with config={'responsive': True} on each
     dcc.Graph (set from the Python side) -- Plotly's own responsive
     handling needs the container it's measuring to actually be
     full-width for this to have any effect, which the column-
     stacking rules above provide. */
  .js-plotly-plot,
  .plot-container {
    width: 100% !important;
  }
}