/* ============================================================
   Pacific Images — Mobile styles
   Every rule lives inside an @media (max-width) query, so the
   desktop experience (> 1024px) renders byte-for-byte unchanged.
   Loaded LAST on each page so it can override per-page inline grids.
   ============================================================ */

/* Elements injected by api.js — hidden until a mobile breakpoint */
.mobile-tabbar { display: none; }
.mobile-account-signout { display: none; }

/* ---------- Bottom tab bar nav (replaces hamburger under 1024px) ---------- */
@media (max-width: 1024px) {
  .menu-toggle { display: none !important; }

  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: var(--mobile-nav-overlay);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-default);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px 7px;
    min-height: 54px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-tab svg { width: 21px; height: 21px; opacity: 0.65; }
  .mobile-tab span { white-space: nowrap; }
  .mobile-tab.active { color: var(--accent); }
  .mobile-tab.active svg { opacity: 1; }
  .mobile-tab:active { background: var(--bg-elevated); }

  /* Clear space so content never hides behind the bar */
  .main-content,
  .app-shell { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important; }

  .main-content { max-width: 100%; }

  /* Sign out on the Account page (header hides it on mobile) */
  .mobile-account-signout {
    display: block;
    width: 100%;
    margin-top: var(--sp-6);
    padding: 13px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--error, #dc2626);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .mobile-account-signout:active { background: var(--bg-elevated); }
}

@media (max-width: 768px) {
  /* ---------- Top nav / header declutter ---------- */
  .nav { padding: 0 var(--sp-3); }
  .nav-inner, .nav-logo, .nav-actions { min-width: 0; }
  .nav-logo-sub { display: none; }
  .nav-logo-name { font-size: 0.95rem; white-space: nowrap; }
  .nav-logo-mark { flex-shrink: 0; }
  .nav-actions { gap: var(--sp-2); }
  .nav-actions [data-onboarding-open],
  .nav-actions button[onclick*="logout"] { display: none; }
  .credits-pill { padding: 4px 9px; font-size: 0.72rem; }
  .credits-pill > span:last-child { display: none; } /* drop the word "credits" */

  /* ---------- No accidental horizontal scroll ---------- */
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }

  /* ---------- iOS: 16px inputs prevent auto-zoom on focus ---------- */
  input, select, textarea, .form-input { font-size: 16px; }

  /* ---------- Comfortable tap targets ---------- */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .sidebar-nav a { padding-top: 11px; padding-bottom: 11px; }

  /* Smooth momentum scrolling for scroll regions */
  .main-content { -webkit-overflow-scrolling: touch; padding: var(--sp-6) var(--sp-4) !important; }

  /* ---------- Stack two-column content grids ---------- */
  .dash-main-grid,
  .dash-secondary-grid { grid-template-columns: 1fr !important; gap: var(--sp-5); }
  .dash-output-grid { grid-template-columns: 1fr 1fr !important; }

  /* Library */
  .gen-grid { grid-template-columns: 1fr !important; }
  .img-grid,
  .garments-grid { grid-template-columns: 1fr 1fr !important; }

  /* ---------- Modals / lightbox full-width ---------- */
  .modal { width: calc(100vw - 24px) !important; max-width: none !important; }

  /* ---------- Page headers stack ---------- */
  .page-header { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

  /* Studio progress reads clearly without six tiny labels competing for space. */
  .studio-wrap { padding: var(--sp-6) 0 var(--sp-12) !important; }
  .studio-header { margin-bottom: var(--sp-5) !important; }
  .studio-title { font-size: 1.55rem !important; }
  .stepper { margin-bottom: var(--sp-2) !important; padding: var(--sp-3) !important; }
  .stepper-label { display: none; }
  .stepper-line { top: 0 !important; margin: 0 3px !important; }
  .stepper-dot { width: 30px !important; height: 30px !important; }
  .stepper-current { display:flex !important; align-items:center; justify-content:space-between; color:var(--text-muted); font-size:.78rem; margin-bottom:var(--sp-8); padding:0 2px; }
  .stepper-current strong { color:var(--accent); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }
  .studio-setup-panel .card { padding: var(--sp-5); }
  .studio-setup-panel .btn { width:100%; }

  /* Library has one clear empty state: the upload workspace itself. */
  .library-header { margin-bottom: var(--sp-5) !important; }
  .library-header > div:last-child { width:100%; }
  .library-header .btn { width:100%; }
  .lib-tabs { margin-bottom:var(--sp-5) !important; }
  .lib-tab { padding:9px 8px !important; }
  .upload-zone { padding:var(--sp-8) var(--sp-5) !important; }
  .upload-zone-icon { width:52px !important; height:52px !important; }

  /* Reference library keeps controls together and uses the empty area. */
  .asset-header { margin-bottom:var(--sp-5) !important; }
  .asset-header h1 { font-size:1.45rem !important; }
  .asset-controls { align-items:stretch !important; flex-direction:column; gap:var(--sp-3) !important; }
  .asset-tabs { width:100% !important; margin:0 !important; }
  .asset-toolbar { display:grid !important; grid-template-columns:1fr 1fr; }
  .asset-toolbar .btn { width:100%; min-width:0; padding-left:10px; padding-right:10px; }
  .asset-empty { min-height:220px !important; }

  /* Account content uses the full phone width without card-on-card spacing. */
  .account-content > .grid { gap:var(--sp-5) !important; }
  .account-content .card { padding:var(--sp-5); }
  .account-content > .card { max-width:none !important; margin-top:var(--sp-5) !important; }

  /* Admin has a compact app header; admin sections remain in-page controls. */
  .admin-page .nav-logo-text,
  .admin-page .nav-logo > span,
  .admin-page .nav-actions .avatar { display:none !important; }
  .admin-page .menu-toggle { display:flex !important; }
  .admin-page .nav-actions a { font-size:0; min-height:38px; padding:0 10px; }
  .admin-page .nav-actions a::after { content:'Back'; font-size:.8rem; }
  .admin-page .main-content { padding-top:var(--sp-5) !important; }
  .admin-page .page-header { margin-bottom:var(--sp-5); }
  .admin-page .grid-4 { grid-template-columns:1fr 1fr !important; gap:var(--sp-3); }
  .admin-page .stat-card { min-height:118px; padding:var(--sp-4); }
  .admin-page .grid-2 { gap:var(--sp-4); }
}

@media (max-width: 480px) {
  .nav-logo-mark { width:124px; height:20px; }
  .theme-toggle { width:34px; height:34px; }
  .avatar { width:36px; height:36px; }
  .admin-page .grid-4 { grid-template-columns:1fr 1fr !important; }

  /* Garment cards (with action buttons) go single-column on the tightest phones */
  .garments-grid { grid-template-columns: 1fr !important; }
}