/* ============================================================
   Admin tables — stop horizontal page overflow on mobile
   Append-only. Safe to load AFTER style.css.
   ============================================================ */

/* 1. Hard stop: no element on admin pages may push page width */
.admin-shell, .admin-main, .admin-content,
main, .container, .card, .panel, .content {
  max-width: 100%;
  min-width: 0;          /* critical: lets flex/grid children shrink */
  box-sizing: border-box;
}

/* 2. Wrap every table in its own horizontal scroller.
      Works without markup changes — we make the <table> itself the scroller. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}

/* Keep proper table semantics for layout inside the scroller */
table > thead,
table > tbody,
table > tfoot {
  display: table;
  width: 100%;
  min-width: 720px;      /* forces horizontal scroll instead of squishing */
  table-layout: auto;
}

/* 3. Cell hygiene — prevents long emails / IDs from blowing out width */
th, td {
  white-space: nowrap;
  vertical-align: middle;
}
td.wrap, th.wrap,
td .truncate, th .truncate {
  white-space: normal;
  word-break: break-word;
}

/* 4. Visual hint that the table scrolls sideways */
table {
  background:
    linear-gradient(to right, var(--card, #fff) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(0,0,0,0), var(--card, #fff) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* 5. Filter/search/action rows above tables — wrap instead of overflow */
.toolbar, .filters, .actions, .table-actions, .page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-width: 100%;
}
.toolbar > *, .filters > *, .actions > * { min-width: 0; flex: 0 1 auto; }

/* 6. Mobile-only: tighter cells + smaller font so more columns fit before scroll */
@media (max-width: 640px) {
  th, td { padding: .55rem .65rem; font-size: .9rem; }
  table > thead, table > tbody, table > tfoot { min-width: 560px; }

  /* Collapse low-priority columns on phones */
  .col-hide-sm { display: none !important; }
}

/* 7. Sticky header inside the scroller (nice on long lists) */
thead th {
  position: sticky;
  top: 0;
  background: var(--card, #fff);
  z-index: 1;
}