/**
 * @module dashboard-responsive
 * @description All @media breakpoint overrides for the dashboard: tab nav wrapping,
 * stats grid column collapsing, table horizontal scroll, welcome/verifying card
 * adjustments, and 480px tap-target and text-size enforcement.
 */

/* ── 768px: tablet and below ─────────────────────── */
@media (max-width: 768px) {
  /* Tab nav scrolls horizontally instead of wrapping */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding: 0 1rem;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }

  .tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.75rem 1rem;
  }

  /* Stats grid: 2 columns at tablet */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tables scroll inside their wrapper */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Content padding reduction */
  .content { padding: 1rem; }

  /* Topbar: tighten up */
  .topbar { padding: 0 1rem; }

  /* Welcome/verifying cards */
  .demo-welcome-card,
  .verifying-card {
    padding: 1.25rem;
  }

  .demo-welcome-meta {
    flex-direction: column;
  }

  .demo-meta-block {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .verifying-phone-number {
    white-space: normal;
    word-break: break-all;
    font-size: 1.25rem;
  }

  /* Charts and wizard form grids */
  .charts-grid,
  .wizard-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 480px: mobile phones ────────────────────────── */
@media (max-width: 480px) {
  /* Prevent horizontal overflow on body */
  body { overflow-x: hidden; }

  /* Minimum font size 14px across all text */
  body, input, textarea, select, button {
    font-size: max(14px, 1em);
  }

  /* Stats grid: 1 column */
  .stats-grid { grid-template-columns: 1fr; }

  /* Buttons: minimum 44px tap target height */
  .login-btn,
  .settings-save-btn,
  .modal-confirm-btn,
  .modal-cancel-btn,
  .doc-sign-submit-btn,
  .payment-complete-btn,
  .demo-onboard-btn,
  .wizard-btn,
  .wizard-btn-secondary,
  .perm-save-row button {
    min-height: 44px;
  }

  /* Tab buttons: 44px tap target */
  .tab {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 0.85rem;
  }

  /* Welcome/verifying cards */
  .demo-welcome-card,
  .verifying-card {
    padding: 1rem;
  }

  .demo-welcome-title,
  .verifying-card-title {
    font-size: 1rem;
  }

  .verifying-phone-number {
    font-size: 1.1rem;
  }

  /* Topbar: hide user label on very small screens */
  .topbar-user { display: none; }

  /* Modals: full width on mobile */
  .modal-box { margin: 0.5rem; }

  /* Settings form: full width */
  .settings-form { max-width: 100%; }

  /* Wizard form: single column already handled by 768px query */
  .wizard-form-grid { grid-template-columns: 1fr; }
}