/* ── Balance Gaming FL — Shared Mobile Styles ─────────────────────────── */

/* Old horizontal nav rules removed — sidebar navigation is now in sidebar.css */
/* Mobile nav overlay (#mobile-nav) is handled in sidebar.css */

/* ── 768px breakpoint ─────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Nav */
  nav { padding: 12px 16px !important; flex-wrap: wrap; }
  .nav-hamburger { display: flex !important; }
  .nav-links, .nav-center {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #0d1a2b !important;
    backdrop-filter: blur(12px);
    border-bottom: 2px solid #2dd4bf;
    padding: 12px 20px;
    gap: 4px;
    z-index: 250;
  }
  .nav-links.mobile-open, .nav-center.mobile-open { display: flex; }
  .nav-link { padding: 10px 14px !important; font-size: 12px !important; width: 100%; border-radius: 6px; }

  /* Page padding */
  .page, .page-wrap { padding: 16px !important; }
  .hero { padding: 24px 16px !important; }

  /* Grids → single column */
  .scraper-grid,
  .social-grid,
  .grid,
  .events-grid,
  .platform-grid,
  .stats-grid,
  .set-grid,
  [class*="-grid"] { grid-template-columns: 1fr !important; }

  /* Tables → horizontal scroll */
  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* Modals → fullscreen */
  .modal, .modal-box, .meetup-modal, .modal-overlay .modal,
  .dash-email-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal-backdrop, .meetup-backdrop, .modal-overlay {
    align-items: flex-start !important;
    padding: 0 !important;
  }

  /* Buttons — minimum tap target */
  .btn, .btn-primary, .btn-run-all, .btn-confirm,
  .btn-action, button[class*="btn"] {
    min-height: 44px !important;
  }

  /* Dashboard: 2-column stat cards → wrap */
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Checklist cards stack */
  .event-card { margin-bottom: 12px; }

  /* Calendar: inner panel stacks on mobile */
  .layout { grid-template-columns: 1fr !important; }
  .cal-panel { border-right: none !important; border-bottom: 1px solid var(--border, #1e2d45); }

  /* Gmail: panels stack */
  .inbox-layout { grid-template-columns: 1fr !important; }
  .email-list { border-right: none !important; border-bottom: 1px solid var(--border, #1e2d45); max-height: 40vh; }

  /* Social: panels stack */
  .social-layout { grid-template-columns: 1fr !important; }

  /* Accordion cards */
  .phase-card, .archive-panel { width: 100% !important; }

  /* Scraper grid → 2 cols on tablet, 1 on phone */
  .scraper-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 480px breakpoint ─────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Nav: tighten brand text */
  .nav-title { font-size: 14px !important; }
  .nav-sub   { display: none !important; }

  /* Typography */
  h1, .page-header h1 { font-size: 22px !important; }
  h2                  { font-size: 18px !important; }

  /* Cards full width */
  .scraper-card, .set-card, .phase-card,
  .cal-day, .revenue-card { width: 100% !important; }

  /* Scraper → 1 column */
  .scraper-grid { grid-template-columns: 1fr !important; }

  /* Dashboard stat cards → 2 wide */
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Inputs, selects — prevent iOS zoom (min 16px font) */
  input, select, textarea { font-size: 16px !important; }

  /* Buttons */
  .btn, .btn-primary, button { font-size: 14px !important; min-height: 44px !important; }

  /* Results panel table */
  .releases-table th, .releases-table td { padding: 8px 10px !important; font-size: 11px !important; }
}