/* Aturan per lebar layar. Diuji di 360, 390, 430, 768, 1024, 1440, 1920 px. */

/* Tablet & HP: sidebar disembunyikan, bar bawah mengapung tampil. */
@media (max-width: 991.98px) {
  .content { padding: var(--space-4) var(--space-4) calc(var(--bottomnav-height) + 40px); }
  .page-head { margin-bottom: var(--space-4); }
  .card.filter-panel { padding: var(--space-4); }
  .filter-panel .form-select, .filter-panel .form-control { max-width: none; }
}

/* HP */
@media (max-width: 575.98px) {
  :root { --fs-xl: 1.25rem; --fs-2xl: 1.45rem; }
  .content { padding-left: var(--space-3); padding-right: var(--space-3); }
  .stat { padding: var(--space-4); }
  .stat .stat-icon { width: 36px; height: 36px; font-size: 1rem; }
  .table > :not(caption) > * > * { padding: 0.65rem 0.6rem; }
  .table { font-size: var(--fs-sm); }
  .thumb { width: 44px; height: 44px; }
  .filter-panel .col-auto { flex: 1 1 calc(50% - 8px); }
  .filter-panel .col-auto.ms-auto { flex-basis: 100%; }
  .filter-panel .col-auto .btn { width: 100%; }
  .card-header { font-size: var(--fs-md); }
  .sheet-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) {
  .bottom-nav { left: 8px; right: 8px; }
  .bottom-nav span { font-size: 0.62rem; }
}

/* Halaman masuk: satu kolom di bawah 900 px, foto menjadi pita di atas. */
@media (max-width: 899.98px) {
  .login-split { grid-template-columns: 1fr; grid-template-rows: 34vh auto; }
  .login-visual::after { background: linear-gradient(0deg, var(--color-background) 0%, rgba(11, 6, 3, 0.3) 60%, rgba(11, 6, 3, 0.2) 100%); }
  .login-quote { left: var(--space-5); right: var(--space-5); bottom: var(--space-4); }
  .login-quote h2 { font-size: 1.5rem; }
  .login-quote p { display: none; }
  .login-pane { align-items: flex-start; padding: var(--space-6) var(--space-5) var(--space-8); }
  .login-brand { margin-bottom: var(--space-6); }
}

/* Layar sangat lebar: isi tetap nyaman dibaca. */
@media (min-width: 1800px) {
  .content { max-width: 1600px; }
}

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

@media print {
  .sidebar, .bottom-nav { display: none !important; }
  .app-main { margin: 0 !important; }
  body.app { background: #fff; color: #000; }
}

/* Tablet potret: bar bawah tidak melebar penuh (pil aktif jadi terlalu besar). */
@media (min-width: 576px) and (max-width: 991.98px) {
  .bottom-nav { left: 50%; right: auto; width: min(520px, calc(100% - 24px)); transform: translateX(-50%); }
}