/* ==========================================================================
   GMB Consult — Responsive / mobile overrides (mobile.css)
   Loaded after main.css. Breakpoint: 768px (desktop >= 768px, mobile < 768px)
   ========================================================================== */

/* ---- Small-screen layout: hide desktop sidebar/topbar, show mobile chrome ---- */

@media (max-width: 767px) {

  .layout {
    display: block;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-lg);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main {
    width: 100%;
  }

  /* Desktop topbar is redundant on mobile — the wa-topbar replaces it */
  .topbar {
    display: none;
  }

  #hamburger {
    display: flex;
  }

  .page-body {
    padding: 16px;
    padding-bottom: 76px; /* clear room above the fixed bottom tab bar */
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .page-title {
    font-size: 19px;
  }

  /* ---- Mobile top bar + bottom tab bar ---- */

  #wa-topbar {
    display: flex;
  }

  #wa-bottomnav {
    display: flex;
  }

  /* ---- Stat / content grids collapse to one column ---- */

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }

  .stat-card {
    padding: 14px 16px;
  }

  .stat-value {
    font-size: 22px;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .form-row {
    flex-direction: column;
    gap: 0;
  }

  .card-body {
    padding: 16px;
  }

  .card-header {
    padding: 14px 16px;
  }

  /* ---- Modals go near-fullscreen on small viewports ---- */

  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal-content {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  /* ---- Tables scroll horizontally instead of squeezing ---- */

  .card-body {
    overflow-x: auto;
  }

  table {
    min-width: 480px;
  }

  /* ---- User pill: trim the text on very small widths ---- */

  .user-name,
  .user-email {
    max-width: 96px;
  }

  #toast-container {
    bottom: 72px; /* clear the bottom tab bar */
  }

  /* ---- Overflow safety net ----
   * Most of the app's rows are built as `display:flex` with an input and a
   * button. A flex item will not shrink below its intrinsic content width
   * unless told to, so on a 390px phone those rows pushed the whole page wider
   * than the screen and the content ran off the right edge. These rules make
   * every such row wrap and every field shrink, without touching the desktop
   * layout. Individual rows still set their own flex:1/min-width:0 where the
   * order matters; this catches the ones that do not. */

  body {
    overflow-x: hidden;
  }

  input,
  select,
  textarea,
  .form-input,
  .form-select {
    max-width: 100%;
  }

  /* Long unbroken strings - review URLs, place IDs, email addresses - would
   * otherwise force a minimum width of their own. */
  .card-body,
  .audit-section-card,
  .gbp-review-card {
    overflow-wrap: anywhere;
  }

  .audit-section-card {
    padding: 16px 14px;
  }
}

/* ---- Desktop: force-hide the mobile-only chrome regardless of inline state ---- */

@media (min-width: 768px) {
  #wa-topbar,
  #wa-bottomnav,
  .sidebar-overlay {
    display: none !important;
  }
}