/* ══════════════════════════════════════════
   MOBILE TOGGLE (default hidden)
══════════════════════════════════════════ */
.topbar-mobile-toggle {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: var(--r-md);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  cursor: pointer;
  transition: all var(--t-fast);
}
.topbar-mobile-toggle:hover { color: var(--text-primary); border-color: var(--border-default); }
.topbar-mobile-toggle svg { width: 16px; height: 16px; }

/* ══════════════════════════════════════════
   LARGE DESKTOP
══════════════════════════════════════════ */
@media (max-width: 1180px) {
  :root { --content-padding: 20px; }

  .global-nav-links { gap: 1px; }
  .global-nav-link  { padding: 0 10px; }

  .stats-grid,
  .profile-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .dashboard-row,
  .bot-grid { grid-template-columns: 1fr; }

  .edge-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════
   TABLET
══════════════════════════════════════════ */
@media (max-width: 920px) {
  :root { --content-padding: 16px; --nav-height: 60px; }

  .global-nav-side .global-user-copy,
  .global-logout span { display: none; }

  .global-user-chip { padding-right: 5px; }

  .login-split { grid-template-columns: 1fr; }

  .form-grid,
  .form-grid-3,
  .contact-grid,
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  .form-col-2,
  .form-col-3 { grid-column: span 1; }

  .dashboard-card-filters,
  .dashboard-top-row,
  .dashboard-top-actions {
    width: 100%;
  }

  .dashboard-top-row {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-top-actions {
    justify-content: flex-start;
  }
}

/* ══════════════════════════════════════════
   MOBILE NAV
══════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --content-padding: 16px; }

  /* Revert grid to flex on mobile — nav links become fixed overlay */
  .global-nav-inner {
    display: flex;
    justify-content: space-between;
  }

  .global-nav { overflow: visible; }

  .global-nav-links {
    position: fixed;
    left: var(--content-padding);
    right: var(--content-padding);
    top: calc(var(--nav-height) + 8px);
    z-index: 130;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: var(--sp-2);
    border: 1px solid var(--border-default);
    border-radius: var(--r-xl);
    background: var(--bg-elevated);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--t-base), transform var(--t-base);
  }
  .global-nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .global-nav-link {
    min-height: 44px;
    justify-content: flex-start;
    border-radius: var(--r-lg);
  }

  .topbar-mobile-toggle { display: inline-flex !important; }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--sp-5);
  }

  .page-actions,
  .filters-actions { width: 100%; justify-content: flex-start; }

  .filters-bar { flex-direction: column; align-items: stretch; }
  .filters-section { width: 100%; }
  .email-table-header { align-items: stretch; }
  .email-bulk-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }

  .profile-hero-inner { flex-direction: column; }
  .profile-actions,
  .profile-stats-row { width: 100%; }
  .platform-sync-hero { flex-direction: column; }
  .platform-sync-grid { grid-template-columns: 1fr; }

  .status-overview,
  .edge-case-grid,
  .grid-auto { grid-template-columns: 1fr; }

  .table-container { overflow-x: auto; }
  .data-table { min-width: 720px; }

  .modal {
    max-width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    margin-top: auto;
  }
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
}

/* ══════════════════════════════════════════
   SMALL MOBILE
══════════════════════════════════════════ */
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }

  .topbar { min-height: 56px; }

  .page-content { padding-bottom: var(--sp-12); }

  .login-card { padding: var(--sp-6); }

  .toast-container {
    left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3);
    max-width: none; width: auto;
  }

  .dashboard-row { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr; }
  .page-title { font-size: 1.18rem; }
}