/* ── Mobile-first overrides (375px–768px) ────────────────────── */
@media (max-width: 768px) {

  /* Typography scaling */
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }

  /* Page content */
  .page-content { padding: var(--space-4); }
  .page-header { margin-bottom: var(--space-4); }
  .page-header h2 { font-size: var(--text-xl); }

  /* Cards */
  .card { padding: var(--space-4); border-radius: var(--radius-md); }

  /* Stats grid */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .stat-card-value { font-size: var(--text-2xl); }

  /* Table */
  .table-wrapper { border-radius: var(--radius-md); }
  .table th, .table td { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }

  /* Buttons */
  .btn { font-size: var(--text-xs); padding: 9px 14px; }
  .btn-lg { font-size: var(--text-sm); padding: 12px var(--space-5); }

  /* Modal */
  .modal-overlay { padding: var(--space-3); align-items: flex-end; }
  .modal-container { border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 85vh; max-width: 100%; }
  .modal-body { padding: var(--space-4); }
  .modal-footer { padding: var(--space-3) var(--space-4); }

  /* Toast */
  .toast-container { bottom: var(--space-4); right: var(--space-4); left: var(--space-4); width: auto; }

  /* Tabs */
  .tabs { padding: 3px; }
  .tab { padding: 7px 12px; font-size: var(--text-xs); }

  /* Campaigns */
  .campaigns-header { flex-direction: column; align-items: flex-start; }
  .campaign-card-stats { grid-template-columns: repeat(3, 1fr); }
  .campaign-card-actions { flex-wrap: wrap; }

  /* Analytics */
  .analytics-charts-grid { grid-template-columns: 1fr; }
  .analytics-header { flex-direction: column; align-items: flex-start; }

  /* Settings */
  .settings-layout { flex-direction: column; }
  .settings-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }

  /* Empty state */
  .empty-state { padding: var(--space-10) var(--space-4); }

  /* Topbar: keep actions from overflowing with theme toggle present */
  .topbar-right { gap: var(--space-2); }
  .theme-toggle { width: 40px; height: 40px; }   /* >= 40px touch target */
  .connection-status .status-text { display: none; }

  /* Wizard */
  .wizard-card { padding: var(--space-4); }
  .wizard-card-title { font-size: var(--text-xl); }
  .wizard-steps { padding: var(--space-1); gap: var(--space-1); }

  /* Dashboard */
  .dashboard-body { grid-template-columns: 1fr; }
  .recent-campaign-stats { display: none; }

  /* Leads page */
  .leads-header { flex-direction: column; align-items: flex-start; }
  .leads-filters { flex-direction: column; }
  .leads-filters .input, .leads-filters .select { width: 100%; }

  /* Hide non-essential table columns on mobile */
  .hide-mobile { display: none !important; }
}

/* ── Small phones (375px) ────────────────────────────────────── */
@media (max-width: 390px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { flex-direction: row; align-items: center; padding: var(--space-3); }
  .stat-card-top { flex-direction: row; }
  .campaign-card-stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .campaign-stat-value { font-size: var(--text-base); }
  .auth-card-header { margin-bottom: var(--space-5); }
  .auth-title { font-size: var(--text-xl); }
  .auth-card { padding: var(--space-6) var(--space-4); }

  /* Tighten topbar on very small screens */
  .topbar { padding: 0 var(--space-3); }
  .connection-status { padding: 5px 8px; }

  /* Wizard step labels hidden */
  .wizard-step span:not(.wizard-step-num) { display: none; }
}

/* ── Landscape phone ─────────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .auth-page { align-items: flex-start; padding-top: var(--space-4); }
  .auth-card { margin: 0 auto; }
  .inbox-shell { height: calc(100vh - 120px); }
}