/* ==========================================================================
   responsive.css — Constitution §1.6: mobile 375px, tablet 768px, desktop 1280+
   Sidebar collapses to a hamburger-triggered drawer below 768px.
   ========================================================================== */

/* Tablet and below: sidebar becomes an off-canvas drawer */
@media (max-width: 991px) {
  .sidebar {
    transform: translateX(100%);
  }
  body[dir="ltr"] .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }

  .main-area { margin-inline-start: 0; }
  .hamburger-btn { display: inline-flex; align-items: center; justify-content: center; }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,10,18,.5);
    z-index: 35;
  }
  .sidebar-overlay.open { display: block; }
}

/* Tablet: tighten spacing, 2-col stat grid */
@media (max-width: 768px) {
  .content-area { padding: 1rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar { padding: 0 1rem; }
  .notif-panel { width: 90vw; inset-inline-end: 5vw; }
  .page-header { gap: .75rem; }
  .page-header .btn, .page-header .form-control { max-width: 100%; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 640px; }
}

/* Mobile: 375px baseline — single column everything */
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .login-card { padding: 1.75rem 1.25rem; }
  .page-header { flex-direction: column; align-items: stretch; }
  .data-table th, .data-table td { padding: .6rem .7rem; font-size: .82rem; }
  .topbar .page-title { font-size: .95rem; }
  .user-chip .u-role { display: none; }
  .content-area { overflow-x: hidden; }
  .card { padding: 1rem; }
  .modal-card, .login-modal-card { width: calc(100vw - 2rem); max-width: none; }
  .form-grid { grid-template-columns: 1fr !important; }
}

/* Desktop 1280+: comfortable max width for content */
@media (min-width: 1280px) {
  .content-area { max-width: 1400px; margin: 0 auto; width: 100%; }
}