@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .layout.sidebar-collapsed { grid-template-columns: 1fr; }
  .sidebar { height: auto; max-height: none; overflow: visible; padding: 14px 18px; position: static; }
  .sidebar-collapse { display: none; }
  .layout.sidebar-collapsed .sidebar { align-items: stretch; padding: 14px 18px; }
  .layout.sidebar-collapsed .brand-label,
  .layout.sidebar-collapsed .nav-label,
  .layout.sidebar-collapsed .sidebar-user-meta,
  .layout.sidebar-collapsed .status-pill,
  .layout.sidebar-collapsed .utility-nav .nav-label {
    display: inline;
  }
  .nav-subsections { margin-left: 28px; }
  .nav-section.active .nav-subsections,
  .nav-section.subsections-open .nav-subsections { display: grid; }
  .nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav[data-collapsed="true"] { display: none; }
  .grid.two, .grid.three { grid-template-columns: 1fr; }
  .topbar { position: static; }
}

@media (max-width: 600px) {
  .content { padding: 16px; }
  .panel { border-radius: 14px; padding: 16px; }
  .topbar { align-items: flex-start; flex-direction: column; padding: 14px 16px; }
  .topbar .actions { justify-content: space-between; width: 100%; }
  .nav { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  th, td { padding: 10px 8px; }
}