/* ==========================================================================
   OpsAssist — shared responsive overrides (mobile-fix pass)
   Loaded AFTER each page's inline <style>, so these rules win on small
   screens. Everything is inside a max-width media query, so the desktop
   layout (> 860px) is completely unaffected.
   ========================================================================== */

/* ---- Tablet / phone: collapse multi-column layouts, fix overflow --------- */
@media (max-width: 860px) {

  .container { padding: 18px 14px 64px; }

  /* Two-/three-column page grids -> single column.
     (.layout is a fixed "360px 1fr" that never collapses on its own;
      .signon-layout is a 3-track grid with a spacer column.) */
  .layout        { grid-template-columns: 1fr !important; }
  .signon-layout { grid-template-columns: 1fr !important; }

  /* Hero: stack the headline above the action pills instead of squeezing
     the text into a narrow sliver that wraps down the whole screen. */
  .hero          { flex-direction: column; align-items: flex-start; }
  .hero-actions  { width: 100%; }
  .quick-pill    { flex: 1 1 auto; }

  /* Rein in oversized headings on phones. */
  .topbar h1, .hero h1 { font-size: 26px; line-height: 1.15; }
  .hero h2             { font-size: 19px; line-height: 1.3; }

  /* Wide data tables: scroll INSIDE their own box (swipe sideways) instead of
     forcing the entire page wider than the viewport and clipping content. */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  /* Keep the inline edit-form column from ballooning into full-width white
     bars — give it a sensible fixed width and let its fields wrap normally. */
  td form { white-space: normal; }
  td input, td select, td textarea, td button, td .actions {
    width: 220px;
    max-width: 220px;
  }

  /* Nav pills: one swipeable row rather than a tall stacked block. */
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;              /* Firefox */
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; white-space: nowrap; }
}

/* ---- Small phones: tighten type scale and dense grids -------------------- */
@media (max-width: 520px) {
  .summary-row       { grid-template-columns: 1fr 1fr !important; }
  .card .value       { font-size: 26px; }
  .summary-card strong { font-size: 20px; }
}