/* =========================================================
   Responsive rules: laptop → tablet → mobile, and print
   ========================================================= */
@media (max-width: 1399.98px) {
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-value { font-size: 1.25rem; }
}
@media (max-width: 1199.98px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; }
  .exam-layout { grid-template-columns: minmax(0, 1fr) 240px; }
}

/* Tablet & mobile: sidebar becomes off-canvas */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); width: 272px; box-shadow: var(--shadow-lg); }
  .app-main, body.sidebar-collapsed .app-main { margin-left: 0; }
  body.sidebar-collapsed .sidebar { width: 272px; }
  body.sidebar-collapsed .brand-text, body.sidebar-collapsed .nav-item-link span, body.sidebar-collapsed .nav-group-label, body.sidebar-collapsed .sidebar-foot { display: initial; }
  body.sidebar-collapsed .nav-item-link { justify-content: flex-start; padding: .55rem .75rem; }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 18, 40, .45); z-index: 1035; }
  body.sidebar-open { overflow: hidden; }
  .content { padding: 1.25rem 1rem 1.75rem; }
  .topbar { padding: 0 .75rem; }
  .exam-layout { grid-template-columns: 1fr; }
  .exam-side { order: -1; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
}

/* Mobile: tables turn into stacked cards */
@media (max-width: 767.98px) {
  body { font-size: .9rem; }
  .page-title { font-size: 1.25rem; }
  .welcome h1 { font-size: 1.3rem; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .stat-grid { gap: .6rem; }
  .stat-card { padding: .8rem; gap: .6rem; }
  .stat-icon { width: 36px; height: 36px; font-size: 1rem; }
  .stat-value { font-size: 1.1rem; }
  .table-toolbar { padding: .75rem; }
  .search-box { max-width: none; flex-basis: 100%; }
  .filters { flex-basis: 100%; }
  .filters .form-select { flex: 1 1 140px; max-width: none; }
  .daterange { flex-basis: 100%; }
  .daterange .form-control { flex: 1; width: auto; }
  .toolbar-actions { margin-left: 0; }

  .table-responsive-cards .data-table thead { display: none; }
  .table-responsive-cards .data-table, .table-responsive-cards .data-table tbody { display: block; }
  .table-responsive-cards .data-table tr { display: block; border: 1px solid var(--border); border-radius: 12px; margin: .6rem .75rem; padding: .35rem 0; background: #fff; }
  .table-responsive-cards .data-table td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 0; padding: .4rem .85rem; text-align: right; }
  .table-responsive-cards .data-table td::before { content: attr(data-label); font-weight: 700; font-size: .72rem; color: var(--muted); text-align: left; flex-shrink: 0; }
  .table-responsive-cards .data-table td.cell-primary { justify-content: flex-start; text-align: left; border-bottom: 1px solid var(--border); padding-bottom: .6rem; margin-bottom: .2rem; }
  .table-responsive-cards .data-table td.cell-primary::before { display: none; }
  .table-responsive-cards .data-table td.hide-sm { display: none; }
  .table-responsive-cards .data-table td.actions-cell { width: auto; justify-content: flex-end; border-top: 1px solid var(--border); margin-top: .2rem; padding-top: .55rem; }
  .table-responsive-cards .data-table td.actions-cell::before { display: none; }
  .table-responsive-cards .data-table td.empty-cell { display: block; text-align: center; }
  .table-responsive-cards .data-table td.empty-cell::before { display: none; }
  .table-responsive-cards .data-table .cell-sub, .table-responsive-cards .data-table .cell-clip { max-width: 220px; }
  .table-foot { justify-content: center; }
  .att-row { flex-direction: column; align-items: flex-start; }
  .att-toggle { width: 100%; }
  .att-toggle label { flex: 1; text-align: center; padding: .55rem .3rem; }
  .kv { grid-template-columns: 1fr; gap: .1rem; }
  .kv dd { margin-bottom: .5rem; }
  .doc-sheet { padding: 1.25rem; }
  .chart-box { height: 240px; }
  .btn { padding: .6rem 1rem; }
  .row-actions .btn-icon { width: 38px; height: 38px; }
  .toast-stack { left: 1rem; right: 1rem; }
  .app-toast { min-width: 0; max-width: none; }
  .profile-hero { flex-direction: column; align-items: flex-start; }
  .app-footer { padding: 1rem; }
}
@media (max-width: 420px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-label { font-size: .72rem; }
  .q-palette { grid-template-columns: repeat(6, 1fr); }
}

/* Print */
@media print {
  .sidebar, .topbar, .app-footer, .no-print, .table-toolbar, .table-foot, .page-actions, .toast-stack, .btn, .tabs-bar, .row-actions, .actions-cell { display: none !important; }
  .app-main { margin: 0 !important; }
  body, .content { background: #fff !important; padding: 0 !important; }
  .card, .doc-sheet { border: 0 !important; box-shadow: none !important; }
  .print-page { padding: 0; }
  a { color: inherit; }
  .print-table tr, .doc-table tr { page-break-inside: avoid; }
}