/* ==========================================================================
   Responsive breakpoints: 1440 / 1200 / 992 / 768 / 576 / 375
   ========================================================================== */

@media (max-width: 1440px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-grid, .dash-grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
  :root { --sidebar-w: 240px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .topbar-search { width: 220px; }
  .form-grid { grid-template-columns: 1fr; }

  /* Sidebar becomes an off-canvas drawer */
  .sidebar { transform: translateX(-100%); }
  .app-shell.mobile-open .sidebar { transform: translateX(0); }
  .app-shell.collapsed .sidebar { width: var(--sidebar-w); }
  .main-area, .app-shell.collapsed .main-area { margin-left: 0; }
  .mobile-menu-btn { display: flex; }
  .sidebar-collapse-btn { display: none; }
  #sidebarToggleBtn { display: none; }
}

@media (max-width: 768px) {
  .page-content { padding: var(--sp-4); }
  .cal-week-list { grid-template-columns: 1fr; }
  .cal-grid-header, .cal-grid-body { grid-template-columns: repeat(7, minmax(80px, 1fr)); }
  .cal-toolbar { flex-direction: column; align-items: stretch; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .grid-3, .grid-2-even { grid-template-columns: 1fr; }
  .topbar-search { display: none; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header-actions { width: 100%; }
  .page-header-actions .btn { flex: 1; }
  .user-menu-name, .user-menu-role { display: none; }
  .user-menu-trigger .chevron { display: none; }
  .modal { width: 100%; margin: 0 var(--sp-3); }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .search-box { min-width: 0; }
  .totals-box { width: 100%; }
  .donut-wrap { flex-direction: column; }
}

@media (max-width: 576px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .topbar { padding: 0 var(--sp-3); }
  .topbar-page-title { font-size: var(--fs-md); }
  .auth-visual { display: none; }
  .toast-stack { top: var(--sp-3); right: var(--sp-3); left: var(--sp-3); width: auto; }
  .mini-stat-row { flex-direction: column; gap: var(--sp-2); }
  .stepper { flex-wrap: wrap; }
  .step-line { width: 20px; }
  .dropdown-panel.notif-panel, .dropdown-panel.search-panel { width: 92vw; right: -60px; }
}

@media (max-width: 375px) {
  .page-header h1 { font-size: var(--fs-lg); }
  .kpi-value { font-size: var(--fs-xl); }
  .bar-chart { height: 160px; }
}