/**
 * mobile-fixes.css
 * Fixes horizontal scrolling and layout issues on mobile.
 * Loaded after style.css — only overrides what needs fixing.
 */

/* ── Root fix: prevent horizontal scroll on iOS/Android ─────────
   body overflow-x:hidden alone doesn't work on iOS Safari.
   Both html AND body need it.                                    */
html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ── Ensure all inputs/selects/textareas stay within viewport ── */
input, select, textarea, button {
  max-width: 100%;
}

/* ── Tables: allow horizontal scroll within cards ──────────────
   Prevents table columns from pushing past viewport edge        */
.card table, .page-content table {
  min-width: 0;
}

/* ── PWA Install Banner ─────────────────────────────────────── */
#pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8000;
  background: #fff;
  border-top: 1px solid #e8e8f0;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
#pwa-install-banner.visible {
  transform: translateY(0);
}
#pwa-install-banner .pwa-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}
#pwa-install-banner .pwa-text {
  flex: 1;
  min-width: 0;
}
#pwa-install-banner .pwa-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1e1e2e;
  margin-bottom: 2px;
}
#pwa-install-banner .pwa-text span {
  font-size: 12px;
  color: #8888aa;
}
#pwa-install-banner .pwa-btn-install {
  background: #FF4500;
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
#pwa-install-banner .pwa-btn-dismiss {
  background: none;
  border: none;
  color: #8888aa;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   TABLET (≤ 1024px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Profile page sidebar grid */
  div[style*="grid-template-columns:260px 1fr"],
  div[style*="grid-template-columns: 260px 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE (≤ 768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Page padding ────────────────────────────────────────── */
  .page-content,
  .container {
    padding: 0 16px;
    margin: 20px auto;
  }

  /* ── Cards ───────────────────────────────────────────────── */
  .card {
    padding: 18px 16px;
    border-radius: 14px;
  }
  .card-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* ── Dashboard: 2-col grid → single col ─────────────────── */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Edit-bookmark: 2fr 1fr → single col ────────────────── */
  div[style*="grid-template-columns:2fr 1fr"],
  div[style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Categories form: complex grid → single col ─────────── */
  form[style*="grid-template-columns:2fr 1fr 1fr auto"],
  form[style*="grid-template-columns: 2fr 1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
  }
  form[style*="grid-template-columns:2fr 1fr 1fr auto"] button,
  form[style*="grid-template-columns: 2fr 1fr 1fr auto"] button {
    width: 100%;
  }

  /* ── Bookmark table: tighter on small screens ────────────── */
  .bookmark-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .bookmark-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* ── Filter tabs: smaller text ───────────────────────────── */
  .btn-sm { font-size: 12px; padding: 6px 10px; }

  /* ── Stats grid ──────────────────────────────────────────── */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .stat-card { padding: 16px; }
  .stat-card .number { font-size: 1.8rem; }

  /* ── Auth box ────────────────────────────────────────────── */
  .auth-box { padding: 28px 20px; }

  /* ── Table overflow wrapper ──────────────────────────────── */
  .card > table,
  .page-content > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Buttons in flex rows: allow wrap ────────────────────── */
  .quick-actions, .bookmark-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Page header ─────────────────────────────────────────── */
  .page-header {
    gap: 14px;
  }
  .page-header h1 { font-size: 1.4rem; }

  /* ── Hero section ────────────────────────────────────────── */
  .hero h1 { font-size: clamp(1.8rem, 7vw, 3rem); }
  .hero-subtitle { font-size: 1rem; }

  /* ── Bulk action bar: ensure it doesn't overflow ─────────── */
  #bulkBar > div {
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  #bulkBar select, #bulkBar input {
    max-width: 140px;
  }

  /* ── Profile dropdown in mobile nav ──────────────────────── */
  .profile-dropdown-menu {
    min-width: 0 !important;
    width: 100%;
  }

  /* ── Collection analytics rows ───────────────────────────── */
  .card div[style*="display:flex"][style*="align-items:center"][style*="gap:14px"] {
    flex-wrap: wrap;
  }

  /* ── Form groups: full width inputs ─────────────────────── */
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* ── Trash page actions ──────────────────────────────────── */
  .trash-actions { flex-wrap: wrap; }
  .trash-row { flex-wrap: wrap; }

  /* ── Nav menu on mobile ──────────────────────────────────── */
  .nav-menu {
    background: var(--white, #fff);
  }
  html.dark .nav-menu {
    background: #1a1a24;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SMALL MOBILE (≤ 480px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Stats: single col on very small screens ─────────────── */
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* ── Page content tighter padding ───────────────────────── */
  .page-content, .container { padding: 0 12px; }

  /* ── Buttons full-width in action rows ───────────────────── */
  .page-header .quick-actions .btn {
    font-size: 13px;
    padding: 9px 14px;
  }

  /* ── Hide "Visit" button on very small screens, keep Edit ── */
  /* Uncomment if needed:
  .bookmark-actions a:first-child { display: none; }
  */

  /* ── Bulk bar: stack on tiny screens ─────────────────────── */
  #bulkBar > div > div {
    width: 100%;
  }

  /* ── Filter tabs: smaller ────────────────────────────────── */
  .btn-sm { font-size: 11px; padding: 5px 8px; }

  /* ── Reduce card padding further ────────────────────────── */
  .card { padding: 14px 12px; }

  /* ── Auth form: remove excess margin ────────────────────── */
  .auth-container { padding: 20px 12px; }
  .auth-box { padding: 24px 16px; }
}