/* ===========================================================================
   responsive.css - breakpoints. Load last so it can override.
   Breakpoints: 1280 / 1080 / 900 / 720 / 520
   =========================================================================== */

@media (max-width: 1400px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
  .dash-grid > .span-3 { grid-column: span 6; }
  .dash-grid > .span-4 { grid-column: span 6; }
  .dash-grid > .span-5 { grid-column: span 12; }
  .dash-grid > .span-7 { grid-column: span 12; }
  .dash-grid > .span-8 { grid-column: span 12; }
}

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-card .mobile-brand { display: flex; align-items: center; gap: 11px; }

  /* form grid collapses to halves */
  .col-1, .col-2, .col-3, .col-4 { grid-column: span 6; }
  .col-5, .col-7, .col-8, .col-9, .col-10, .col-11 { grid-column: span 12; }
}

@media (max-width: 900px) {
  /* sidebar becomes an off-canvas drawer */
  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }
  .app.is-drawer-open .sidebar { transform: translateX(0); width: var(--sidebar-w); }
  .app.is-drawer-open .sidebar .brand-text,
  .app.is-drawer-open .sidebar .nav-text,
  .app.is-drawer-open .sidebar .nav-label { display: block; }
  .app.is-drawer-open .sidebar .nav-link { justify-content: flex-start; padding: 9px 12px; }

  .main, .app.is-collapsed .main { margin-left: 0; }

  .content { padding: 16px; }
  .topbar { padding: 0 14px; }
  .topbar-search { display: none; }
  .footer { padding: 14px 16px 20px; }
}

@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; }
  .dash-grid > * { grid-column: span 12 !important; }

  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .titles { flex: 0 0 auto; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1 1 auto; }

  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: span 12; }

  .kv { grid-template-columns: 1fr; gap: 3px 0; }
  .kv dd { margin-bottom: 10px; }

  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .spacer { display: none; }
  .form-actions .btn { width: 100%; }

  .filter-bar { grid-template-columns: 1fr; }
  .filter-bar > * { grid-column: span 1 !important; }
  .filter-actions .btn { flex: 1 1 auto; }

  .pagination { flex-direction: column; align-items: stretch; }
  .pagination .pages { margin-left: 0; justify-content: center; flex-wrap: wrap; }

  .view-hero { flex-direction: column; }
  .view-hero .hero-actions { width: 100%; }
  .view-hero .hero-actions .btn { flex: 1 1 auto; }

  .dropdown-menu { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h) + 8px); min-width: 0; }
}

@media (max-width: 520px) {
  h1 { font-size: 19px; }
  .content { padding: 12px; }
  .card-body { padding: 14px; }
  .card-head { padding: 12px 14px; }
  .stat { padding: 14px; }
  .stat-value { font-size: 20px; }
  .auth-main { padding: 24px 14px; }
  .table-toolbar { padding: 10px 14px; }
  .pagination { padding: 10px 14px; }
}

/* --------------------------------------------------------------- printing */

@media print {
  .sidebar, .topbar, .footer, .form-actions, .row-actions,
  .pagination, .table-toolbar, .filter-bar, .page-head .actions { display: none !important; }
  .main { margin-left: 0; }
  .content { padding: 0; max-width: none; }
  .card { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
  .table { white-space: normal; font-size: 11px; }
  body { background: #fff; }
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}