/* ══════════════════════════════════════════════════════════
   LAYOUT PATCH  v20260726
   Supplemental responsive fixes across all tenant pages.
   Loaded last in index.html — overrides page CSS where needed.
══════════════════════════════════════════════════════════ */

/* ── Global table overflow guard ──────────────────────── */
/* Ensure wide tables never cause horizontal body scroll */
.g-tbl-wrap,
.contacts-table-wrap,
.team-table-wrap,
.calls-table-wrap,
.analytics-table-wrap,
.billing-txn-table,
.tmpl-table-wrap,
.campaign-table-wrap,
.leads-table-wrap,
.settings-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Automations — missing 768px breakpoint ──────────── */
@media (max-width: 768px) and (min-width: 641px) {
  .automations-body { padding: 16px; gap: 14px; }
  .am-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .am-main-grid  { grid-template-columns: 1fr; }
  .am-test-card  { position: static; }
  .am-page-header { flex-wrap: wrap; gap: 10px; }
  .am-fields { grid-template-columns: 1fr; }
}

/* ── Analytics — export row overflow ─────────────────── */
@media (max-width: 768px) {
  .an-export-row { flex-wrap: wrap; gap: 8px; }
  .an-export-row .btn { flex: 1; min-width: 120px; justify-content: center; }
  .analytics-filter-bar { flex-wrap: wrap; gap: 8px; }
}

/* ── Campaign — drip card doesn't overflow ───────────── */
@media (max-width: 768px) {
  .drip-step { flex-wrap: wrap; }
  .drip-step-body { min-width: 0; }
  .campaign-detail-grid { grid-template-columns: 1fr !important; }
}

/* ── Contacts — filter bar ───────────────────────────── */
@media (max-width: 768px) {
  .contacts-filter-bar { flex-wrap: wrap; gap: 8px; }
  .contacts-filter-bar .search-wrap { flex: 1 1 100%; max-width: 100%; }
}

/* ── Team — invite form on mobile ────────────────────── */
@media (max-width: 768px) {
  .team-invite-form,
  .team-invite-grid { grid-template-columns: 1fr !important; }
}

/* ── Billing — plan toggle bar on small screen ─────── */
@media (max-width: 480px) {
  .billing-toggle-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .billing-plan-family-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .billing-plan-family-tab { white-space: nowrap; }
}

/* ── Settings — phone numbers tab responsive ─────────── */
@media (max-width: 768px) {
  .pn-available-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .pn-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pn-pagination { flex-wrap: wrap; justify-content: center; gap: 6px; }
}
@media (max-width: 480px) {
  .pn-available-grid { grid-template-columns: 1fr !important; }
}

/* ── Inbox — message composer stays above bottom nav ─── */
@media (max-width: 768px) {
  .chat-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Profile — topbar actions wrap on narrow ─────────── */
@media (max-width: 480px) {
  .profile-topbar-actions { flex-wrap: wrap; gap: 8px; }
  .profile-topbar-actions .btn { flex: 1; justify-content: center; }
}

/* ── Sidebar bottom nav safe area ────────────────────── */
@media (max-width: 768px) {
  #bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ── General page-body safe area on mobile ───────────── */
@media (max-width: 768px) {
  .page-body { padding-bottom: 80px !important; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE AUDIT — tenant & team member pages
   Appended: keeps desktop untouched, only adds mobile rules.
   ══════════════════════════════════════════════════════════ */

/* ── Two-column grids that had no mobile override ─────────
   Each of these pinned a fixed sidebar track (280–340px)
   alongside 1fr, so on a phone the fixed column forced the
   page wider than the viewport. Collapse to a single column. */
@media (max-width: 768px) {

  /* Analytics — chart area + side panel */
  .charts-row { grid-template-columns: 1fr !important; }

  /* Billing — plans + summary rail */
  .billing-body {
    grid-template-columns: 1fr !important;
    padding: 16px 14px 40px !important;
    gap: 16px 0 !important;
  }

  /* Calls — campaign cards were minmax(340px,1fr): a 340px
     floor overflows a 360px phone once padding is counted */
  .campaigns-grid { grid-template-columns: 1fr !important; }

  /* Profile — 300px left rail + content, with named areas */
  .profile-page {
    grid-template-columns: 1fr !important;
    grid-template-areas: "topbar" "left" "right" !important;
    padding: 16px 14px 40px !important;
    gap: 16px 0 !important;
  }

  /* Settings — working hours + setup guide side panels */
  .wh-layout,
  .sg-layout { grid-template-columns: 1fr !important; }
}


/* ── Small phones (<=480px) ───────────────────────────────
   The existing breakpoints stop at 768px, which covers
   tablets and large phones but leaves 360–430px devices
   with desktop-sized padding and non-wrapping toolbars. */
@media (max-width: 480px) {

  /* Reclaim horizontal space lost to page chrome */
  .page-body { padding-left: 12px !important; padding-right: 12px !important; }
  .page-header { padding-left: 12px !important; padding-right: 12px !important; }

  /* Header action rows: wrap and let buttons share the width
     instead of pushing the header past the viewport */
  .page-header,
  .team-header,
  .pn-header,
  .am-page-header,
  .profile-topbar-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .team-header .btn,
  .pn-header .btn,
  .am-page-header .btn { flex: 1 1 auto; justify-content: center; }

  /* Horizontal tab strips scroll rather than wrap into a
     ragged stack (keeps the active-tab underline intact) */
  .settings-tabs,
  .calls-tab-bar,
  .billing-plan-family-tabs,
  .contacts-filter-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .settings-tabs::-webkit-scrollbar,
  .calls-tab-bar::-webkit-scrollbar,
  .billing-plan-family-tabs::-webkit-scrollbar,
  .contacts-filter-bar::-webkit-scrollbar { display: none; }

  /* Stat/KPI tiles: single column so figures stay legible */
  .kpi-grid,
  .am-stats-grid { grid-template-columns: 1fr !important; }

  /* Dialogs built with inline styles: give back the padding
     so they are not edge-to-edge, and allow tall ones to scroll */
  .t2m-modal-card,
  .modal-card { max-width: 100% !important; }
}


/* ── Universal guard: no element may force sideways scroll ─ */
@media (max-width: 768px) {
  /* Media and embeds are the usual culprits */
  .page-body img,
  .page-body video,
  .page-body canvas,
  .page-body iframe { max-width: 100%; }

  /* Long unbroken strings (IDs, tokens, URLs, emails) */
  .contact-cell-email,
  .settings-value,
  .wh-url-input { overflow-wrap: anywhere; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE: collapse nested scroll containers
   ══════════════════════════════════════════════════════════
   Every list page nests three scrollers:

     #main-content        overflow-y:auto
       └ .<page>-layout   height:100%  overflow:hidden
           └ .<page>-body  overflow-y:auto      <- real scroller
               └ .card     overflow:hidden

   On a phone the layout is pinned to viewport height, so the
   inner body becomes a very short window — on Contacts it was
   about one row tall — and the card's `overflow:hidden` clips
   the rest with no way to reach it. Touch scrolling also gets
   captured by the wrong container.

   Fix: on mobile let these grow to their content height and
   hand scrolling to #main-content, which already reserves
   space for the top bar and bottom nav.

   Inbox is deliberately excluded — a chat view wants a fixed
   viewport with its own scrolling message list. The app shell
   (#app, #sidebar, .page-wrapper) is left fixed too.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* 1 — page shells stop capping height */
  .contacts-layout,
  .leads-layout,
  .campaign-layout,
  .analytics-layout,
  .automations-layout,
  .billing-layout,
  .settings-layout,
  .sources-layout,
  .team-layout {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* 2 — inner bodies stop being scroll containers */
  .contacts-main,
  .campaign-body,
  .analytics-body,
  .automations-body,
  .billing-body,
  .settings-body,
  .sources-body,
  .team-body,
  .profile-wrap,
  .page-body {
    overflow: visible !important;
    height: auto !important;
  }

  /* 3 — cards keep horizontal table scroll but must never
         clip vertically. overflow-y:visible computes to auto
         next to overflow-x:auto; because height is now
         content-based there is nothing to scroll, so no
         nested scrollbar appears. */
  .contacts-table-card,
  .leads-table-wrap,
  .team-table-wrap,
  .calls-table-wrap,
  .campaign-table-wrap,
  .analytics-table-wrap,
  .contacts-table-wrap,
  .g-tbl-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-height: none !important;
  }

  /* 4 — #main-content is now the single scroller for these
         pages; make momentum scrolling feel native on iOS */
  #main-content {
    -webkit-overflow-scrolling: touch;
  }
}