/* ============================================================
   Home8 — Shared responsive styles
   Include on every user-facing page after the page's own styles.
   ============================================================ */

/* ── Hamburger menu button ─────────────────────────────── */
.nav-hamburger {
  display: none;
  background: none; border: none; color: #6b7280;
  font-size: 1.4rem; cursor: pointer; padding: 4px 8px;
  line-height: 1; border-radius: 6px; transition: all .15s;
}
.nav-hamburger:hover { background: #f4f5f7; color: #1e2530; }

/* Prevent horizontal overflow on body */
html, body { overflow-x: hidden; }

/* ── Mobile nav ────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Show hamburger */
  .nav-hamburger { display: block; }

  /* Stack nav items */
  nav { flex-wrap: wrap; height: auto; min-height: 56px; padding: 10px 16px; gap: 8px; }
  .nav-logo-name { font-size: .95rem; }

  /* Hide nav links by default, show when toggled */
  .nav-links {
    display: none; flex-direction: column; width: 100%;
    gap: 2px; order: 10; padding-top: 8px;
    border-top: 1px solid #e4e3dd;
  }
  .nav-links.open { display: flex; }
  .nav-link { width: 100%; padding: 10px 14px; }

  /* Right section: wrap below */
  .nav-right {
    width: 100%; justify-content: flex-end;
    gap: 8px; order: 5; font-size: .8rem;
  }
  .nav-right .lang-sw { margin-right: auto; }

  /* Impersonation bar */
  .impersonation-bar { flex-direction: column; gap: 8px; text-align: center; padding: 10px 16px; }

  /* ── Page wraps ────────────────────────────────────── */
  .wrap { padding: 24px 16px; }
  .page-header { flex-direction: column; gap: 12px; align-items: flex-start; }

  /* ── Screen type picker ─────────────────────────────── */
  .screen-picker { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .screen-option { padding: 10px; }
  .screen-option-thumb { height: 48px; }

  /* ── Template card grid ─────────────────────────────── */
  .tpl-grid { grid-template-columns: 1fr; }

  /* ── Forms ───────────────────────────────────────────── */
  .card { padding: 20px 16px; }
  .form-grid, .settings-grid { grid-template-columns: 1fr; gap: 12px; }

  /* ── Buttons ─────────────────────────────────────────── */
  .btn-row { flex-direction: column; gap: 10px; }
  .btn-row .btn-primary, .btn-row .btn-ghost { width: 100%; text-align: center; justify-content: center; }
  form .btn-primary, .auth-card .btn-primary { width: 100%; justify-content: center; }

  /* ── Screen detail ───────────────────────────────────── */
  .header-actions { flex-wrap: wrap; gap: 8px; }

  /* ── Stats grid (user dashboard) ─────────────────────── */
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  nav { padding: 8px 12px; }
  .nav-logo svg { width: 22px; height: 22px; }
  .nav-logo-name { font-size: .85rem; }
  .nav-right { font-size: .75rem; }

  .wrap { padding: 20px 12px; }
  .page-title { font-size: 1.1rem; }

  .screen-picker { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr; }

  .tpl-preview { height: 120px; }
}

/* ── Auth pages (already narrow, just refine) ──────────── */
@media (max-width: 480px) {
  .auth-wrapper { padding: 16px; }
  .auth-card { padding: 24px 18px; max-width: 100%; }
  .auth-title { font-size: 1.2rem; }
}