/* ==========================================================================
   CommerceFlow — Mobile hardening (r7.7.2-m)
   Load this AFTER app.css. Every rule is scoped to phone widths, so tablet
   (>640px) and desktop layouts are left exactly as they are today.
   Goal: remove the four things that make phones feel broken —
     1. focus-zoom on inputs, 2. tiny tap targets, 3. sideways page scroll,
     4. cramped KPI/action layout in card mode.
   ========================================================================== */

/* 1) STOP iOS FOCUS-ZOOM ---------------------------------------------------
   iOS Safari zooms the whole page in whenever a focused field's font is
   under 16px. The dense tables/forms use 10–11px inputs, so every tap on a
   field jerks the layout. Forcing 16px on phones removes that entirely.
   16px is also the comfortable minimum for thumb typing. */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea { min-height: 96px !important; }
  /* keep in-row checkboxes their intended small size */
  .r73-check-control input,
  .r73-check-list input { min-height: 16px !important; }
}

/* 2) TAP TARGETS -----------------------------------------------------------
   Table row actions are 24px tall on desktop (fine with a mouse). On a phone
   they need to be at least ~40px and easy to hit. */
@media (max-width: 640px) {
  .r73-action,
  .button.small,
  .icon-button,
  .flash-close,
  .password-toggle {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .r73-action { font-size: 12px; padding: 8px 12px; }
}

/* 3) NO SIDEWAYS PAGE SCROLL ----------------------------------------------
   One over-wide child makes the entire page pan left/right, which is the
   single biggest "this feels broken" signal on mobile. Clamp children to the
   viewport and let genuinely wide things (tables, media) stay inside. */
@media (max-width: 640px) {
  .page { overflow-x: hidden; }
  .app-main,
  .page > *,
  .card,
  section { min-width: 0; max-width: 100%; }
  img, svg, video, canvas, pre { max-width: 100%; height: auto; }
  /* the horizontal scroll belongs to the table wrapper only, never the page */
  .r73-table-scroll { max-width: 100%; }
}

/* 4) DATA TABLES IN CARD MODE ---------------------------------------------
   The JS turns wide tables into stacked cards under 720px. Two cleanups so
   the cards read well and never overflow a small phone. */
@media (max-width: 640px) {
  /* the actions column carries a fixed 340–390px width for the desktop table;
     in card mode it must be fluid so buttons wrap instead of overflowing */
  .mobile-card-table td.r73-actions-cell { grid-template-columns: 1fr; width: auto !important; text-align: left; }
  .mobile-card-table td.r73-actions-cell::before { margin-bottom: 6px; }
  .mobile-card-table .r73-row-actions { width: 100%; gap: 8px; }
  .mobile-card-table .r73-row-actions > a,
  .mobile-card-table .r73-row-actions > form,
  .mobile-card-table .r73-row-actions .r73-action { flex: 1 1 46%; }
  /* give each card a touch more breathing room */
  .mobile-card-table tr { padding: 15px; }
  .mobile-card-table td { padding: 11px 2px; }
}

/* 5) KPI TILES -------------------------------------------------------------
   Four KPI tiles collapse to 2×2 on phones; on the narrowest devices two
   across is cramped, so go single-column and let each tile breathe. */
@media (max-width: 440px) {
  .executive-kpis,
  .kpi-grid { grid-template-columns: 1fr !important; }
}

/* 6) STICKY BOTTOM ACTION BARS --------------------------------------------
   Full-width primary actions in forms should span the screen and clear the
   fixed mobile bottom-nav so they're never hidden behind it. */
@media (max-width: 640px) {
  .form-action-bar,
  .r73-form-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .form-action-bar button,
  .form-action-bar .button,
  .r73-form-actions button,
  .r73-form-actions .button { width: 100%; min-height: 46px; }
  .r73-form-actions span { margin: 0 0 4px; text-align: center; }
}

/* 7) LOGIN: FORM FIRST ON PHONES ------------------------------------------
   The navy brand story stacks above the sign-in card and, with its large
   hero type, pushes the actual form far down the page. On phones, tighten the
   hero and drop the decorative 01/02/03 benefits so the form is reachable
   without a long scroll. (Brand identity is preserved, just condensed.) */
@media (max-width: 560px) {
  .workspace-login-brand { padding: 30px 22px 26px !important; min-height: auto; }
  .workspace-login-message h1 { font-size: 27px !important; margin: 8px 0 10px; }
  .workspace-login-message p { font-size: 14px; }
  .workspace-login-benefits { display: none; }
  .workspace-login-card-wrap { padding: 26px 16px !important; }
}

/* 8) TABLET SANITY (721–1024px) -------------------------------------------
   Not phone scope, but the requested tablet dead-zone: keep the wide-table
   horizontal scroll contained and stop filter bars from overflowing. */
@media (min-width: 721px) and (max-width: 1024px) {
  .r73-table-scroll { -webkit-overflow-scrolling: touch; }
  .r73-filter-bar { grid-template-columns: minmax(200px, 1fr) auto auto; }
}