/* ============================================================================
   customer-responsive.css — mobile/tablet fixes for CUSTOMER-FACING pages only.

   LOADED BY (and only by): index.html, login.html, new-analysis.html, analysis.html,
   proposals.html, analyze.html, review-correct.html, schedule-a.html,
   account-review.html, merchant-form.html, reset-password.html

   DELIBERATELY NOT loaded by Back Office-owned pages (dashboard, recent-analyses,
   super-admin, agents-isos, residual-statements, leads, usage, settings) — that
   workstream owns its own responsive behaviour. Nothing here can reach them, which
   is why the broad `.grid-cols-*` overrides below are safe: they only ever apply on
   pages that opt in by linking this file.

   sidebar.js is Back Office-owned and is NOT modified; the mobile nav is implemented
   entirely here plus customer-nav.js.

   Breakpoints: 768px (tablet and below) and 480px (small phones).
   `!important` is used only where the page sets the property inline, since inline
   styles otherwise win.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Mobile navigation for the shared .v6-nav header
   The nav is a flex row of brand + links + right-side actions. Below 768px the
   links overflow and the CTA is pushed off-screen. Collapse the links into a
   drop-down panel toggled by the button customer-nav.js injects.
   --------------------------------------------------------------------------- */
.v6-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-left: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.v6-nav-toggle:focus-visible { outline: 2px solid #155eef; outline-offset: 2px; }
.v6-nav-toggle span {
  display: block; width: 18px; height: 2px; background: #0f172a;
  position: relative; border-radius: 2px;
}
.v6-nav-toggle span::before,
.v6-nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px;
  background: #0f172a; border-radius: 2px;
}
.v6-nav-toggle span::before { top: -6px; }
.v6-nav-toggle span::after  { top: 6px; }

@media (max-width: 768px) {
  .v6-nav {
    padding: 0 16px !important;
    height: auto !important;
    min-height: 60px;
    flex-wrap: wrap;
    row-gap: 0;
  }
  .v6-nav-brand { margin-right: 8px !important; font-size: 17px !important; }

  /* Links become a full-width stacked panel, hidden until toggled. */
  .v6-nav-links {
    display: none !important;
    order: 3;
    flex: 0 0 100% !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 6px 0 12px;
    border-top: 1px solid #eef2f7;
  }
  .v6-nav[data-nav-open="true"] .v6-nav-links { display: flex !important; }
  .v6-nav-link { padding: 11px 10px !important; font-size: 14px !important; border-radius: 8px; }

  .v6-nav-toggle { display: inline-flex; }

  /* Keep the primary action and avatar reachable next to the toggle. */
  .v6-nav-right { order: 2; margin-left: 8px !important; gap: 8px !important; }
  .v6-nav-cta {
    padding: 8px 11px !important; font-size: 12px !important;
    max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

@media (max-width: 480px) {
  /* On the smallest phones the CTA label is the first thing to give way, but the
     control itself must stay tappable — customer-nav.js shortens the label. */
  .v6-nav-cta { padding: 8px 10px !important; }
  .v6-nav-brand { font-size: 16px !important; }
}

/* Workflow step strip that sits under the nav on several pages. */
@media (max-width: 768px) {
  .v6-wf-steps {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    flex-wrap: nowrap !important;
  }
  .v6-wf-steps::-webkit-scrollbar { height: 4px; }
  .v6-wf-steps::-webkit-scrollbar-thumb { background: #d7dee8; border-radius: 4px; }
}

/* ---------------------------------------------------------------------------
   2. Global horizontal-overflow guard for customer pages
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
}

/* ---------------------------------------------------------------------------
   3. Multi-column grids that are hardcoded for desktop
   Covers both Tailwind utility grids and the inline grid-template-columns the
   pages set directly (hence !important).
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-7 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Opt-in class for inline grids the markup now tags. */
  .cf-grid-3, .cf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-7 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .cf-grid-3, .cf-grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Inline grid-template-columns set directly in markup — including grids these pages
   build at runtime from template strings, which no build-time class could reach.
   Matched by their literal 3+ column patterns so genuinely 2-column layouts are left
   alone. Inline styles lose to !important, so this reaches them. */
@media (max-width: 768px) {
  [style*="1fr 1fr 1fr"],
  [style*="repeat(3"],
  [style*="repeat(4"],
  [style*="repeat(5"],
  [style*="repeat(6"],
  [style*="repeat(7"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  [style*="1fr 1fr 1fr"],
  [style*="repeat(3"],
  [style*="repeat(4"],
  [style*="repeat(5"],
  [style*="repeat(6"],
  [style*="repeat(7"],
  [style*="1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* new-analysis.html intake method cards: three side-by-side upload/camera/manual
   cards. These are the primary entry point to the product, so they stack rather
   than shrink — a 2-up layout leaves the third card orphaned. */
@media (max-width: 768px) {
  .cf-method-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
}

/* ---------------------------------------------------------------------------
   4. Tables: bounded horizontal scrolling instead of clipping
   Wrapping the scroll on the container keeps the page itself from overflowing.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .cf-table-scroll,
  #proposals-table,
  #rc-sources-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .cf-table-scroll > table,
  #proposals-table table {
    min-width: 560px;
  }
  /* account-review.html statement-history table is rendered into a bare <table>
     with no scroll wrapper (unlike its sibling at line 1322, which already has
     overflow-x-auto). Give the table itself a scroll parent. */
  #trend-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; white-space: nowrap; }
  #proposals-table { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ---------------------------------------------------------------------------
   5. analysis.html — Schedule A / Layer 3 pricing rows
   .l3row is a 5-column grid whose fixed tracks total ~460px before gaps, so it
   overflows below ~500px. Stack it into a label + value block on mobile.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .l3row {
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) !important;
    row-gap: 4px !important;
    column-gap: 8px !important;
    padding: 9px 4px !important;
  }
  .l3row > *:nth-child(n+4) { grid-column: 2 / -1; }
}
@media (max-width: 480px) {
  .l3row { grid-template-columns: 28px minmax(0, 1fr) !important; }
  .l3row > *:nth-child(n+3) { grid-column: 2 / -1; }
}

/* schedule-a.html pricing tables. */
@media (max-width: 768px) {
  .sa-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .sa-table-wrap > table { min-width: 620px; }
}

/* ---------------------------------------------------------------------------
   6. proposals.html — document preview
   The preview clones a fixed 794px document template. customer-nav.js rescales
   it to fit; this bounds the container so the modal never overflows the viewport.
   The underlying #pdf-template / #pdf-template-analysis dimensions are NOT
   touched here — PDF generation clones them independently.
   --------------------------------------------------------------------------- */
#preview-container {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#preview-container > * { margin: 0 auto; }

@media (max-width: 768px) {
  #preview-modal { padding: 8px !important; }
  #preview-modal > div { max-height: 94vh !important; }
  #preview-container { padding: 8px !important; }
}

/* ---------------------------------------------------------------------------
   7. review-correct.html — fixed bottom action bar
   The bar is position:fixed with space-between; on mobile the helper text
   squeezes the primary button off-screen. Stack it and keep the primary action
   full-width and last. Body gets padding so the bar never covers content.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .rc-action-bar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px;
    padding: 10px 14px !important;
    max-height: 45vh;
    overflow-y: auto;
  }
  .rc-action-bar > * { width: 100%; }
  /* The buttons live in a nested flex ROW inside the bar. Stacking only the bar
     left that row intact, so "Save & Continue" was laid out at x=223..479 — past
     the 375px viewport edge and unreachable. Stack the inner row too. */
  .rc-action-bar > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .rc-action-bar .rc-btn { width: 100%; justify-content: center; box-sizing: border-box; }
  #rc-save-status { text-align: center; }
  /* Primary action last and largest so it is the obvious tap target. */
  #rc-btn-save-continue { order: 99; padding: 13px 16px !important; font-size: 15px !important; }
  body.cf-has-action-bar { padding-bottom: 230px !important; }
}

/* ---------------------------------------------------------------------------
   8. Form / input usability on small screens
   16px font-size prevents iOS Safari from zooming on focus.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; max-width: 100%; }
  .field-input { width: 100%; box-sizing: border-box; }
}

/* ---------------------------------------------------------------------------
   9. Generic containers that assume desktop width
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .v6-page, .v6-container, .v6-main { padding-left: 14px !important; padding-right: 14px !important; }
}