:root {
  /* breakpoint tokens */
  --bp-mobile: 640px;
}

/* Hide nav toggle by default (desktop / wider screens) */
.nav-toggle { display:none; }

/* Generic responsive table pattern */
@media (max-width: 700px) {
  .responsive-table { width: 100%; border-collapse: collapse; }
  .responsive-table thead { display: none; }
  .responsive-table tr { display: block; border: 1px solid var(--color-border); border-radius: 8px; padding: .6rem .7rem; margin-bottom: .75rem; background: var(--color-surface); }
  .responsive-table td { display: grid; grid-template-columns: 110px 1fr; gap: 6px; padding: .15rem 0; font-size: .8rem; border: 0; }
  .responsive-table td::before { content: attr(data-label); font-weight: 600; text-transform: uppercase; font-size: .55rem; letter-spacing: .05em; opacity: .75; align-self: center; }
  .responsive-table .row-actions { margin-top: .25rem; }
  .responsive-table input[type="text"].w-230 { width: 100%; }
  .table-wrap { overflow: visible !important; }
}

/* Generic horizontal scroll fallback for complex tables (multiple numeric columns) */
@media (max-width: 700px){
  .table-wrap:not(.stackable) { -webkit-overflow-scrolling: touch; }
  .table-wrap:not(.stackable) table { min-width:560px; }
}

/* Touch target reinforcement for small buttons inside tables */
@media (max-width:700px){
  button.small, .button.small { min-height:38px; display:inline-flex; align-items:center; }
  .manage-trigger { min-height:40px; }
}

/* Manage pop positioning tweak on mobile */
@media (max-width: 700px) {
  .manage-pop { position: fixed; top: auto !important; left: 50% !important; bottom: 18px; transform: translateX(-50%); max-width: 92vw; width: 340px; }
}

/* Narrow topbar nav collapse (future enhancement placeholder) */
@media (max-width: 760px) {
  .nav-toggle { display:inline-flex; align-items:center; background:var(--color-surface); border:1px solid var(--color-border); border-radius:6px; padding:6px 10px; font:500 13px/1 var(--font-sans); cursor:pointer; }
  .nav-toggle:focus { outline:2px solid var(--color-accent-faint); outline-offset:2px; }
  .topbar { flex-wrap:wrap; }
  .topbar .nav-links { width:100%; order:2; }
  .topbar .nav-links.collapsed { display:none !important; }
  .topbar .nav-links.expanded { display:flex !important; flex-direction:column; gap:4px; background:var(--color-surface-alt); padding:8px 6px 10px; border:1px solid var(--color-border); border-radius:8px; margin-top:8px; animation:fadeIn .15s ease; }
  .topbar .nav-links.expanded a { padding:6px 4px; border-radius:4px; font-size:.8rem; }
}

/* Account table specific tweaks */
@media (max-width: 900px) {
  table.account-table colgroup col.account-users-col { width: auto !important; }
}

/* Utility for hiding on mobile */
@media (max-width: 700px) { .hide-mobile { display: none !important; } }
/* Utility for showing only on mobile */
@media (min-width: 701px) { .show-mobile { display: none !important; } }