/* MaxAMove CRM — Mobile-only stylesheet
 * =====================================================================
 * Activates at <= 768px (phones).
 * Tablet (769-1024px) gets lighter adjustments.
 * Desktop (>1024px) is untouched.
 *
 * Uses [style*="..."] attribute selectors with !important to override
 * React's inline styles. This is the cleanest way to retrofit a mobile
 * experience without modifying every component file.
 * =====================================================================
 */

/* ---------------------------------------------------------------------
 * PHONES — max-width: 768px
 * --------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* ── Typography: bigger H1, more breathing room ────────────────── */
  h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
  }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }

  /* Prevent iOS Safari auto-zoom on input focus by ensuring 16px+ */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px !important;
  }
  input[type="checkbox"], input[type="radio"] {
    min-width: 18px;
    min-height: 18px;
  }

  /* ── Touch targets: minimum 40px buttons ────────────────────────── */
  button {
    min-height: 40px;
  }
  /* Don't pad the small icon-only nav buttons */
  .bnav-btn, .grp-header {
    min-height: unset !important;
  }

  /* ── Page padding: tighter on phones ────────────────────────────── */
  .pg {
    padding: 14px !important;
  }

  /* Major sections breathe a bit less */
  [style*="margin-bottom: 24px"] { margin-bottom: 16px !important; }
  [style*="margin-bottom: 20px"] { margin-bottom: 14px !important; }

  /* ── Cards: trim padding so content fits ───────────────────────── */
  [style*="padding: 22px"][style*="border-radius"] {
    padding: 14px !important;
  }
  [style*="padding: 20px"][style*="border-radius"] {
    padding: 14px !important;
  }
  [style*="padding: 24px"][style*="border-radius"] {
    padding: 16px !important;
  }
  [style*="padding: 28px"][style*="border-radius"] {
    padding: 18px !important;
  }

  /* ── ALL multi-column grids → single column ─────────────────────── */
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── 4-column kanban (Leads Pipeline, Jobs Board) ──────────────── */
  /* Convert to a horizontal scroll-snap row — like a mobile carousel.
     Each stage column takes ~88vw so users naturally swipe through stages. */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    grid-template-columns: unset !important;
    gap: 10px !important;
    padding-bottom: 6px !important;
  }
  [style*="grid-template-columns: repeat(4, 1fr)"] > * {
    flex: 0 0 86vw !important;
    scroll-snap-align: start !important;
    min-width: 0 !important;
  }
  [style*="grid-template-columns: repeat(4, 1fr)"]::-webkit-scrollbar {
    display: none;
  }

  /* ── Side drawers / detail panels ───────────────────────────────── */
  /* The lead/customer/etc. drawers use width: 420 or width: 300 + position: fixed.
     Make them full-width slide-in sheets on mobile. */
  [style*="width: 420"][style*="position: fixed"],
  [style*="width: 420px"][style*="position: fixed"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* In-page detail columns (CustomersView right panel) */
  [style*="width: 300"][style*="overflow-y"],
  [style*="width: 300px"][style*="overflow-y"] {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    position: static !important;
  }

  /* ── Two-column page layouts (CustomersView: list + detail) ───── */
  [style*="display: flex"][style*="gap: 20"] {
    flex-direction: column !important;
  }

  /* ── Tables: keep table layout intact, scroll the wrapper card ──
     IMPORTANT: don't use display:block on <table> — it splits thead/tbody
     into independently-sized blocks, which makes columns drift by a pixel
     or two. Keep the natural <table> layout so columns align perfectly. */
  table {
    font-size: 12px !important;
    table-layout: auto;
    width: 100% !important;
  }
  table th, table td {
    white-space: nowrap;
    padding: 10px 12px !important;
  }
  /* Make any wrapper card containing a table scroll horizontally on mobile.
     Uses :has() — supported on iOS Safari 16.4+, Chrome 105+, FF 121+. */
  [style*="overflow: hidden"]:has(> table),
  [style*="overflow:hidden"]:has(> table) {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Modals: bottom-sheet style instead of centered ────────────── */
  /* Match modals built like: position:fixed, inset:0, with a centered child card. */
  [style*="position: fixed"][style*="inset: 0"] {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  [style*="position: fixed"][style*="inset: 0"] > [style*="border-radius"][style*="max-width"] {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 88vh !important;
    margin: 0 !important;
  }

  /* ── Estimate wizard step bar: smaller pills, scrollable ──────── */
  /* The horizontal step buttons at the top of Estimates are flex-wrap on desktop;
     on mobile, single-line with horizontal scroll is cleaner. */
  /* Already uses flex-wrap, just shrink the buttons */

  /* ── Drag handles: kanban cards don't really drag well on touch ── */
  /* So make tap-to-edit the primary mode: increase tap area */
  [draggable="true"] {
    min-height: 64px;
  }

  /* ── Settings tabs: comfortable horizontal scroll ──────────────── */
  /* The Settings sub-tabs use overflowX:auto already, just keep scrolling smooth */

  /* ── Buttons in card actions: full-width when stacked ──────────── */
  /* Pricing tier rows etc. — the [Remove] buttons get tight; allow wrap */
  /* Handled by the grid stacking rule above */

  /* ── Topbar stats (Sales/Jobs counts): hide on mobile if shown ─── */
  .desktop-topbar { display: none !important; }

  /* ── Sticky positioning that doesn't make sense on mobile ──────── */
  /* The estimate Price Summary uses position:sticky;top:20 — fine on mobile too,
     just ensure it's not overlapping bottom nav */
  [style*="position: sticky"] {
    position: static !important;
  }

  /* ── KPI / Stat cards: ensure readable typography ─────────────── */
  /* Big number 28px on dashboard — keep it but check spacing */

  /* ── Image-heavy elements: scale down logos ───────────────────── */

  /* ── Pricing tier table on Settings: stack rows nicely ──────────── */
  /* The pricing tier rows use a basic <table>. With table → block conversion above,
     they'll horizontally scroll. That's acceptable for an admin-only screen. */

  /* ── Bottom-nav safe-area on iPhone notch screens ──────────────── */
  .bottom-nav {
    padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Bottom clearance for ALL mobile scroll containers ──────────
     The bottom nav (~64px) plus iPhone home indicator (~34px) covers
     up to ~100px from the bottom. We need page content to scroll past
     that so the LAST item is reachable above the nav. */
  .main-scroll {
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Pages where .pg IS the scroll container (Estimates wizard inner pane) */
  .pg[style*="overflow-y: auto"],
  .pg[style*="overflowY"] {
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Generic catch-all: any flex:1 + overflow:auto element that's a page-level scroller */
  [style*="overflow-y: auto"][style*="flex: 1"]:not(.main-scroll) {
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Inner scroll inside kanban stage cards (Leads Pipeline) — push last card above nav */
  [style*="grid-template-columns: repeat(4, 1fr)"] > * > [style*="overflow-y: auto"],
  [style*="grid-template-columns: repeat(4, 1fr)"] > * > [style*="overflowY"] {
    padding-bottom: 110px !important;
  }

  /* ── Auth screen: comfortable padding on mobile ─────────────────── */
  /* AuthScreen uses inline styles with maxWidth: 420 — it adapts naturally */

  /* ── Toast / floating elements: position above bottom nav ───────── */
  /* Accept toast in app uses fixed top — fine */

  /* ── Inputs in forms: full width by default ─────────────────────── */
  /* Already mostly width:100%, no change needed */

  /* ── Print layout: no change needed (only for actual printing) ─── */
}

/* ---------------------------------------------------------------------
 * TABLETS — 769-1024px
 * --------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 4-column KPI rows → 2 columns on tablet */
  [style*="grid-template-columns: repeat(4, 1fr)"]:not([data-keep-row]) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---------------------------------------------------------------------
 * iPhone-specific safe-area awareness for floating UI
 * --------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    body {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
  }
}