/* ===== Responsive Breakpoints ===== */

/* ≤768px — Tablet / Large phone landscape */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-close { display: flex; }
  .sidebar-overlay.active { display: block; }

  .main-content {
    margin-left: 0;
  }

  #sidebar-toggle { display: flex; }

  .page-container {
    padding: var(--sp-lg);
  }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ≤480px — Mobile portrait */
@media (max-width: 480px) {
  .page-container {
    padding: var(--sp-md);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .grid-auto {
    grid-template-columns: 1fr;
  }

  .topbar-title { font-size: var(--fs-md); }

  .form-row {
    flex-direction: column;
  }
  .form-row > * {
    min-width: unset;
  }

  .modal-content {
    width: 95%;
    max-height: 90vh;
  }

  .toast-container {
    bottom: var(--sp-md);
    right: var(--sp-md);
    left: var(--sp-md);
  }
  .toast { max-width: unset; }
}

/* ≥1024px — Desktop */
@media (min-width: 1024px) {
  .page-container {
    padding: var(--sp-xxl);
    max-width: 1400px;
  }
}

/* Landscape orientation utilities */
@media (orientation: landscape) and (max-height: 500px) {
  .topbar { height: 44px; }
  .page-container { padding: var(--sp-md); }
  .sidebar-header { min-height: 44px; padding: var(--sp-sm) var(--sp-lg); }
  .nav-item { padding: var(--sp-sm) var(--sp-lg); }
}