/* Imperial Treasure Analytics — shared phone rules.
   Loaded LAST in every template so it wins over per-page CSS.
   Only touches ≤576px; desktop and tablet are untouched. */
@media (max-width: 576px) {

  /* ── page ─────────────────────────────────────────────────────────────── */
  html, body { overflow-x: hidden; }          /* no accidental sideways scroll */
  img, canvas, svg, iframe { max-width: 100%; }

  /* ── topbar ───────────────────────────────────────────────────────────────
     Every page builds its topbar as one non-wrapping flex row. On a phone the
     title plus five buttons never fit, so the row wraps and the title column is
     allowed to shrink instead of pushing the buttons off-screen. */
  .topbar, .itopbar {
    flex-wrap: wrap !important;
    row-gap: 6px;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .topbar > .me-auto, .itopbar > .me-auto,
  .topbar .flex-fill, .topbar-center { min-width: 0; }
  .topbar h1, .itopbar h1, .topbar-title {
    font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar small, .topbar-subtitle, .topbar-sub { font-size: .68rem; }
  .topbar-btn { padding: 5px 7px !important; font-size: .78rem !important; }
  .topbar-time, .last-upd, #topbar-updated { font-size: .66rem; }

  /* ── tables that have no scroll wrapper of their own ──────────────────────
     mobile.js wraps them at runtime; this is the wrapper's styling. */
  .mob-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .mob-scroll > table { max-width: none; }

  /* ── things that commonly refuse to wrap ─────────────────────────────────*/
  .nav-pills, .nav-tabs, .btn-group, .filters, .filter-bar, .preset-bar,
  .controls, .stats-strip, .summary-strip, .card-header-bar {
    flex-wrap: wrap !important;
  }
  .btn-group > .btn, .nav-pills .nav-link, .nav-tabs .nav-link { font-size: .78rem; }

  /* CRM sub-nav: four tabs never fit 390px — let the strip scroll rather than
     hang off the edge (members.html already did this; now every page does). */
  .crm-subnav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .crm-subnav a { padding: 7px 12px !important; white-space: nowrap; }

  /* multi-select pickers keep a desktop min-width; let them shrink to the
     available column so the chevron stays on screen */
  .ms-sel, .ms-selector {
    flex: 1 1 100% !important; width: 100% !important;
    min-width: 0 !important; max-width: 100%;
  }
  .ms-trigger { min-width: 0 !important; max-width: 100%; overflow: hidden; }
  .ms-panel { max-width: calc(100vw - 24px); }
}