/* Global responsive helpers for PC / Tablet / Mobile */

/* Fluid media */
img, video, canvas { max-width: 100%; height: auto; }

/* Common containers */
.container { width: 100%; }
.main-content { width: 100%; }

/* Table horizontal scroll on small screens */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive > table { width: 100%; border-collapse: collapse; }

/* Breakpoints */
@media (max-width: 1024px) {
  .header { padding: 16px; }
  .layout { flex-direction: column; }
  .sidebar { width: 100%; }
  .main-content { padding: 20px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .login-box { width: 100%; max-width: 420px; margin: 0 16px; }
}

@media (max-width: 767px) {
  .header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .user-info { margin-top: 8px; }
  .sidebar { display: none; }
  .main-content { padding: 16px; }
  .stats-grid, .cards-grid { grid-template-columns: 1fr; }
  .filters, .filter-bar { position: static !important; width: 100% !important; left: 0 !important; }
  .btn-row, .btn-group { display: flex; flex-wrap: wrap; gap: 8px; }
  .info-row { flex-direction: column; align-items: flex-start; }
  .login-box { padding: 24px; }
}