@media (max-width: 1023px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: -320px;
    width: 320px;
    height: 100vh;
    z-index: 20;
    transition: transform var(--transition);
    box-shadow: 24px 0 80px rgba(0,0,0,0.35);
  }
  .sidebar.open {
    transform: translateX(320px);
  }
  .sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 15;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
  }
  .sidebar.open + .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
  }
  .main-header {
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

@media (max-width: 768px) {
  .main-header {
    padding: 1rem;
  }
  .sidebar {
    width: 100%;
    max-width: 320px;
  }
  .content {
    padding: 1rem;
  }
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .card-row {
    flex-direction: column;
  }
  .table {
    min-width: 100%;
  }
  .tab-button {
    flex: 1 1 48%;
  }
}

@media (max-width: 640px) {
  .sidebar {
    padding-top: 3.5rem;
  }
  .form-grid,
  .section-group {
    gap: 0.75rem;
  }
  .page-title {
    gap: 1rem;
  }
  .page-title h2 {
    font-size: 1.25rem;
  }
}