:root {
  --bp-tablet: 768px;
  --bp-mobile: 480px;
}

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text);
  padding: 8px;
  line-height: 1;
}

@media (max-width: 768px) {
  .nav-hamburger { display: flex; align-items: center; justify-content: center; }
  .page-nav {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    box-shadow: var(--tds-shadow-2, 0 4px 12px rgba(25,31,40,0.08));
    z-index: 150;
    border-bottom: 1px solid var(--border);
    margin-left: 0 !important;
  }
  .page-nav.open { display: flex; }
  .page-nav-item { padding: 10px 14px; }

  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  header { padding: 0 14px; }
  .header-right { gap: 4px; }
  .filter-select, .controls, .filter-bar { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  header { padding: 0 10px; }
  .modal-content, .modal .card { width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; }
}