@media (max-width: 1100px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 780px) {
  .app-shell {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }

  .sidebar-brand {
    min-width: max-content;
  }

  .sidebar-brand .brand-logo {
    width: 92px;
  }

  .sidebar-nav {
    flex-direction: row;
  }

  .topbar,
  .content {
    padding-left: 16px;
    padding-right: 16px;
  }

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

  .modal-overlay {
    padding: 10px;
  }

  .modal-floating-panel {
    width: 100%;
    max-height: calc(100vh - 20px);
    border-radius: 12px;
  }

  .modal-floating-body {
    padding: 12px;
  }
}