/* ============================================================================
   mobile-pro.css  (v250)
   Universal responsive + touch polish, loaded LAST on every page so it can
   refine without rewriting each module. Design rules:
     • Desktop is left untouched — every layout change is gated behind a
       small-width or coarse-pointer media query.
     • Universally-safe niceties (safe-area insets, tap highlight, momentum
       scroll, no iOS text inflation) apply everywhere with no visual downside.
   Breakpoints:  ≤960px tablet · ≤640px phone · ≤400px small phone
   ============================================================================ */

/* ---- Universally safe (all screens) -------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
/* Smooth momentum scrolling inside the common scroll containers */
.content, .shell, .reports-main, .cc-shell, .modal-body, .modal-box,
[style*="overflow-x:auto"], [style*="overflow-x: auto"], [style*="overflow:auto"] {
  -webkit-overflow-scrolling: touch;
}

/* ---- Tablet (≤960px) ----------------------------------------------------- */
@media (max-width: 960px) {
  /* Trim the generous desktop paddings so content gets more room */
  .content, .shell, .reports-main, .cc-shell { padding-left: 18px; padding-right: 18px; }
  .rh-nav-inner, .cc-nav-inner { padding-left: 18px; padding-right: 18px; }
}

/* ---- Phone (≤640px) ------------------------------------------------------ */
@media (max-width: 640px) {
  /* Guard against accidental page-level horizontal scroll. We use overflow-x:
     clip (not hidden) so it does NOT create a scroll container — this keeps
     position:sticky topbars working. Wide DATA tables stay scrollable because
     they become their own scroll boxes (below). */
  html, body { max-width: 100%; }
  body { overflow-x: clip; }

  /* Trim paddings, and honor the iOS notch via safe-area insets (env() is 0 on
     non-notched devices, so this is also correct on Android/old iPhones). */
  .content, .shell, .reports-main, .cc-shell,
  .modules-section, .page-head, .topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .content { padding-top: 14px; padding-bottom: 80px; }   /* room above bottom-nav */
  .bottom-nav { padding-bottom: max(6px, env(safe-area-inset-bottom)); }

  /* Any multi-column grid collapses to a single column on phones */
  .form-grid, .mod-grid, .acc-grid, .tile-grid, .rpt-grid,
  .kpi-grid, .grid-2, .grid-3, .grid-4, .two-col, .three-col {
    grid-template-columns: 1fr !important;
  }

  /* Data tables scroll horizontally inside their own box instead of pushing
     the whole page wide. white-space:nowrap keeps rows from getting too tall. */
  .table, table.table, .reports-main table, .content table, .card table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Modals / dialogs become near-full-screen sheets so forms are usable */
  .modal { padding: 0 !important; align-items: stretch !important; }
  .modal-box, .modal-content, .modal-card, .modal .box, .sheet {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
  }
  .modal-body { flex: 1; overflow-y: auto; }

  /* Toolbar button rows wrap instead of overflowing */
  .page-head, .card-header, .top-right { flex-wrap: wrap; gap: 8px; }
  .btn { white-space: nowrap; }

  /* Hide non-essential desktop chrome labels to save width */
  .top-meta { display: none; }
}

/* ---- Small phone (≤400px) ------------------------------------------------ */
@media (max-width: 400px) {
  .btn-back-modules span, .user-pill-info { display: none; }   /* icon-only on tiny screens */
}

/* ---- Coarse pointer (touch): comfortable tap targets --------------------- */
@media (pointer: coarse) {
  .btn, .icon-btn, .bottom-nav a, .bottom-nav button,
  select, input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }
  .icon-btn { min-width: 40px; min-height: 40px; }
  .btn-sm { min-height: 36px; }
  /* Inputs at ≥16px prevent iOS Safari from auto-zooming on focus */
  input, select, textarea { font-size: 16px; }
}

/* ---- Print: drop on-screen chrome so reports print clean ----------------- */
@media print {
  .topbar, .bottom-nav, .fab-back, .back-fab, .cc-nav, .rh-nav,
  .btn-back-modules, .icon-btn, .cmd-overlay { display: none !important; }
}