/* Shared mobile responsiveness — scoped to avoid breaking specific components */

html, body {
  overflow-x: hidden;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

.table-wrap,
.table-container,
.table-responsive,
.card table,
.table-card,
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  /* Stat grids → 2 columns on mobile */
  .stats-grid,
  .quick-stats,
  .stat-cards,
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Feature/pricing grids → single column */
  .features-grid,
  .cards-grid,
  .pricing-grid,
  .plans-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Tables: scrollable */
  table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
  }

  /* Form inputs: full width */
  .form-control,
  .input,
  .field {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Modals: fit screen */
  .modal-content,
  .dialog-content,
  [role="dialog"] {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 0 auto !important;
  }

  /* Login/auth cards */
  .login-card,
  .auth-card,
  .reset-card,
  .forgot-card {
    width: min(100%, 420px) !important;
    max-width: 100% !important;
    padding: 20px !important;
  }

  /* Pricing cards stack */
  .pricing-card,
  .plan-card,
  .price-card,
  .tier-card {
    width: 100% !important;
    margin: 0 0 12px 0 !important;
  }

  /* Main content area — no sidebar margin */
  .main,
  .main-content,
  .dashboard-content {
    margin-left: 0 !important;
  }
}