/* ==================================================
   RESPONSIVE.CSS
   Breakpoints match Tailwind's defaults so custom CSS
   and Tailwind utility classes stay consistent:
     sm  640px   |  md  768px   |  lg  1024px
     xl  1280px  |  2xl 1536px
   Mobile-first is NOT used here since the base styles
   in dashboard.css assume desktop (sidebar visible);
   these overrides progressively simplify the layout
   as the viewport shrinks.
================================================== */

/* ---------- lg and below (1024px): sidebar becomes off-canvas ---------- */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow-xl);
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
  .main-wrapper {
    margin-left: 0;
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- md and below (768px): tighter spacing, stacked page header ---------- */
@media (max-width: 768px) {
  .main-content {
    padding: var(--space-4);
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .page-header-actions {
    width: 100%;
  }
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  .navbar-breadcrumb {
    display: none;
  }
}

/* ---------- sm and below (640px): single-column stats, compact cards ---------- */
@media (max-width: 640px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
  .card-header,
  .card-body,
  .card-footer {
    padding: var(--space-4);
  }
  .modal {
    max-width: 92vw;
  }
  .table thead th,
  .table tbody td {
    padding: var(--space-2) var(--space-3);
  }
}