/* ============================================================================
   10 · MOBILE & TABLET

   Below 900px the fixed sidebar collapses into a slide-in drawer driven by a
   fixed top bar (injected by setupMobileNav), plus phone-specific tightening.

   Part of the dashboard stylesheet, split out of the former single style.css.
   LOAD ORDER IS LOAD-BEARING (later parts intentionally override earlier
   ones) — the canonical order is dashboard/views/partials/_app_styles.ejs.
   ========================================================================== */

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE / TABLET RESPONSIVENESS
   The dashboard ships a fixed 240px sidebar. Below 900px it collapses into a
   slide-in drawer driven by a fixed top bar (injected by setupMobileNav).
   ════════════════════════════════════════════════════════════════════════════ */

/* Mobile top bar + drawer backdrop — hidden on desktop, shown ≤ 900px */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

.mobile-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
  text-decoration: none;
}
.mobile-topbar-logo {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  object-fit: cover;
  flex-shrink: 0;
}
.mobile-topbar-logo--admin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #E74C3C, #C0392B);
  color: #fff;
  font-size: 1.05rem;
}
.mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.35rem;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.mobile-nav-toggle:hover { background: var(--surface-hover); border-color: #3E5170; }

@media (max-width: 900px) {
  /* ── Top bar ──────────────────────────────────────────────────────────── */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    padding: 0 0.875rem;
    background: rgba(17, 24, 39, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    z-index: 1200;
  }

  /* ── Sidebar → off-canvas drawer ──────────────────────────────────────── */
  .app-sidebar,
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: 264px;
    max-width: 84vw;
    z-index: 1300;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }
  .app-sidebar.mobile-open,
  .admin-sidebar.mobile-open { transform: translateX(0); }

  /* The user-shell desktop rule pins the sidebar static inside .app-body with a
     higher specificity than the drawer rule above; restore fixed drawer
     positioning at matching specificity so the slide-in still works. */
  .app-shell[data-shell="user"] .app-sidebar {
    position: fixed;
    top: 0;
    height: 100vh;
    height: 100dvh;
  }

  /* ── Backdrop ─────────────────────────────────────────────────────────── */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(7, 11, 20, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1250;
  }
  .sidebar-backdrop.show { opacity: 1; visibility: visible; }

  /* ── User shell top navbar (mobile) ───────────────────────────────────── */
  /* The user shell's .app-topbar stays in normal flow, so .app-main needs no
     top offset. Collapse the global links to icons, drop the search box, and
     reveal the hamburger that opens the guild drawer. */
  .app-topbar { gap: 0.5rem; padding: 0 0.75rem; }
  .topbar-nav-toggle { display: inline-flex; }
  .topbar-nav { margin-left: 0.25rem; }
  .topbar-nav-link { padding: 0.4375rem 0.5rem; }
  .topbar-nav-link span:not(.nav-icon) { display: none; }
  .topbar-search-wrap { display: none; }
  .topbar-username { display: none; }

  /* ── Main content offset for the fixed top bar ────────────────────────── */
  /* overflow-x:hidden is critical: .app-main has overflow-y:auto, which per
     spec makes overflow-x compute to `auto`, so any child a few px too wide
     turns the whole column into a horizontal scroller and stretches every
     section to that width (uniform right-edge clipping). The sidebar is
     position:fixed here (not sticky), so clamping x-overflow is safe.
     Genuinely wide content (tables, heatmaps, tab bars) has its own
     overflow-x:auto wrapper and is unaffected. */
  .admin-main {
    padding-top: 52px;
  }
  .app-main,
  .admin-main {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Lock background scroll while the drawer is open */
  body.nav-open { overflow: hidden; }

  /* The permission banner is sticky on desktop; let it scroll under the bar */
  .perm-warning-banner { position: static; }

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  .page-content,
  .p-page,
  .page-inner { padding: 1.25rem 1rem; }
  .page-header { margin-bottom: 1.25rem; padding-bottom: 1rem; }
  .page-title { font-size: 1.25rem; }
  .content-section { margin-bottom: 1.25rem; }

  /* ── Horizontal-scroll wrappers for wide content ──────────────────────── */
  .tab-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }

  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Welcome two-column already collapses at 1100px (see above) ───────── */
}

/* Phone-specific tightening */
@media (max-width: 640px) {
  .page-content,
  .p-page,
  .page-inner { padding: 1rem 0.75rem; }

  .card { padding: 1.125rem 1rem; }

  /* Modals: never wider/taller than the viewport */
  .modal-overlay { padding: 0.75rem; }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 1.5rem);
    display: flex;
    flex-direction: column;
  }
  .modal-body { flex: 1 1 auto; }

  /* Tables can get cramped — shrink type a touch and stop cells wrapping wildly */
  table { font-size: 0.8125rem; }
  th, td { padding: 0.625rem 0.75rem; }

  /* Pagination centers instead of right-aligning */
  .pagination { justify-content: center; flex-wrap: wrap; }

  /* Filter pill rows scroll horizontally rather than stacking tall */
  .filter-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .filter-pills::-webkit-scrollbar { display: none; }

  /* Collapse inline two-column grids declared on pages to a single column.
     Targets the inline styles used across giveaways/social/subscription. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  /* Wide auto-fill cards (e.g. leveling's 340px min) would otherwise force a
     single track wider than a phone and overflow horizontally. */
  [style*="minmax(340px"],
  [style*="minmax(360px"],
  [style*="minmax(380px"],
  [style*="minmax(400px"] {
    grid-template-columns: 1fr !important;
  }

  /* Dense fixed multi-column inline grids (landing discount table, etc.)
     drop to two columns rather than four cramped ones. */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Feature hero stacks vertically */
  .feature-hero { flex-direction: column; text-align: center; }

  /* Section / page header action rows wrap cleanly */
  .section-header { align-items: flex-start; }

  /* Sticky-message card meta wraps */
  .sticky-msg-header { flex-wrap: wrap; }
}