/* responsive.css — mobile & tablet behaviour */

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

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 0 48px rgba(0, 0, 0, 0.5);
  }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .content { padding: 16px; }
  .topbar { padding: 0 16px; }
  .menu-toggle { display: grid !important; }
  .charts-row { grid-template-columns: 1fr; }
  .pdf-page-grid { grid-template-columns: 1fr; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .meta-list { grid-template-columns: 1fr; gap: 2px; }
  .meta-list dt { margin-top: 8px; }
  .queue-mini { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 35;
    display: none;
  }
  .sidebar-backdrop.show { display: block; }
}

@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi .kpi-value { font-size: 22px; }
  .topbar .page-title { font-size: 15px; }
  .toasts { left: 16px; max-width: none; }
  .login-card { padding: 28px 22px; }
  table.data { font-size: 12px; }
  table.data th, table.data td { padding: 9px 10px; }
}

.menu-toggle { display: none; }