/* ============================================
   Punjab Roots Realty — Responsive
   Mobile + tablet optimisation.
   Breakpoints: 1024 (tablet/drawer) · 768 (phone) · 480 (small phone)
   ============================================ */

/* ---- Always-on overflow guards ----
   .main-content is a flex child; without min-width:0 a wide table (which has
   overflow-x:auto on .table-container) forces the whole layout wider than the
   viewport, which is what broke every small-screen view. */
html, body { max-width: 100%; overflow-x: hidden; }
.main-content { min-width: 0; }
.table-container { max-width: 100%; -webkit-overflow-scrolling: touch; }
img, video, canvas { max-width: 100%; }

/* Wide desktop: keep 2-up where 4-up is too tight */
@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .dashboard-charts { grid-template-columns: 1fr; }
  .dashboard-bottom { grid-template-columns: 1fr; }
}

/* ============================================================
   TABLET & below (<=1024): sidebar becomes a slide-in drawer
   ============================================================ */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: 1100;
    box-shadow: 0 0 40px rgba(0,0,0,0.18);
    transition: transform var(--transition-base);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.active { display: block; z-index: 1050; }
  .main-content { margin-left: 0; }
  .menu-toggle { display: flex; }

  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Page action headers (title + buttons) built with flex utilities — let them
     wrap instead of overflowing. flex-wrap only breaks when it must. */
  .main-content .flex.justify-between,
  .main-content .flex.items-center.justify-between { flex-wrap: wrap; gap: var(--sp-3); }
}

/* ============================================================
   PHONE (<=768)
   ============================================================ */
@media (max-width: 768px) {
  /* Collapse every grid to a single column whose track can shrink to 0.
     A bare 1fr keeps each card at its content's min-content width, which on
     phones makes cards (and the tables/forms inside) overflow off-screen. */
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-auto,
  .dashboard-charts, .dashboard-bottom,
  .account-details-grid, .performance-grid, .settings-grid, .jd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Grid/flex children must be allowed to shrink below their content size */
  .card, .stat-card, .settings-card, .table-container,
  .dashboard-charts > *, .dashboard-bottom > *,
  .settings-grid > *, .performance-grid > *, .jd-grid > * { min-width: 0; }

  /* Stat-card grids stay 2-up (2×2) on phones instead of one tall card per row */
  .grid:has(> .stat-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .grid:has(> .stat-card) .stat-card { padding: var(--sp-4); }

  .page-content { padding: var(--sp-3); }
  .header { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .header-search { display: none; }
  .header-title h1, .header-title .page-title { font-size: var(--text-lg); }

  /* Filters stack full-width */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar > *,
  .filter-bar .search-input,
  .filter-bar select { width: 100%; min-width: 0; }

  /* Horizontal-scroll strips */
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tab { flex-shrink: 0; }
  .quick-actions { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--sp-2); }
  .quick-action-btn { flex-shrink: 0; }

  /* Tables scroll horizontally inside their container (already overflow-x:auto) */
  .data-table th, .data-table td { padding: var(--sp-2) var(--sp-3); }

  /* Header action button groups (Import / Add Lead etc.) wrap + share width
     instead of overflowing off-screen. Scoped to gap-2/gap-3 groups so the
     gap-1 table-row action icons are untouched. */
  .main-content .flex.items-center.gap-2,
  .main-content .flex.items-center.gap-3 { flex-wrap: wrap; }
  .main-content .flex.items-center.gap-2 > .btn,
  .main-content .flex.items-center.gap-3 > .btn { flex: 1 1 auto; justify-content: center; }

  /* Modals fit the screen */
  .modal { max-width: calc(100% - 24px); margin: var(--sp-3) auto; max-height: 92vh; overflow-y: auto; }
  .form-row { grid-template-columns: 1fr; }

  .stat-card { padding: var(--sp-4); }
  .stat-info .stat-number { font-size: var(--text-2xl); }
  .login-card { padding: var(--sp-6); }
}

/* ============================================================
   PHONE (<=768): wide content scrolls instead of being clipped
   ============================================================ */
@media (max-width: 768px) {
  /* Any data table — wrapped in .table-container or not — becomes its own
     horizontal scroll area so wide columns scroll instead of being cut off
     by the body's overflow-x:hidden guard. */
  .data-table,
  .mini-table,
  .sheet-grid {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }
  .table-container { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Full-width empty-state / message cells wrap and center instead of forcing
     a wide horizontal scroll. */
  .data-table td[colspan] { white-space: normal; }

  /* Oversized empty-state icons inside cells/cards stay within the screen */
  .data-table .material-icons-round,
  .empty-state .material-icons-round { max-width: 100%; }

  /* Twilio / campaign grids and tab strips */
  .twilio-template-grid,
  .twilio-compose-grid { grid-template-columns: minmax(0, 1fr); }
  .twilio-template-grid > *,
  .twilio-compose-grid > *,
  .twilio-template-card,
  .twilio-template-card * { min-width: 0; }
  .twilio-source-tabs,
  .twilio-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .twilio-source-tabs > *,
  .twilio-tabs > * { flex-shrink: 0; }

  /* Cards never force the page wider than the viewport */
  .card, .settings-card, .stat-card { max-width: 100%; }
}

/* ============================================================
   SMALL PHONE (<=480)
   ============================================================ */
@media (max-width: 480px) {
  .header-right { gap: var(--sp-2); }

  /* Action buttons in page headers go full-width so they're tappable */
  .main-content .flex.justify-between > .btn,
  .main-content .flex.items-center.justify-between > .btn { flex: 1 1 auto; justify-content: center; }

  .stat-card { flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
  .card { padding: var(--sp-4); }

  .btn-lg { padding: var(--sp-3) var(--sp-5); font-size: var(--text-sm); }

  /* Full-screen modals on tiny screens */
  .modal { max-width: 100%; width: 100%; margin: 0; min-height: 100vh; border-radius: 0; max-height: 100vh; }
}