/* ──────────────────────────────────────────────────────────────────────────
   Horizontal scrolling for wide content (added 2026-11-04)

   Wide admin tables (the users list, wallets, registration attempts) were
   being clipped at the right edge with no way to reach the cut-off columns.
   These rules let any over-wide block scroll sideways inside its own
   container, so the page itself never scrolls horizontally.

   Loaded from index.html as a plain stylesheet, after the app's own CSS.
   ────────────────────────────────────────────────────────────────────────── */

/* Any table that outgrows its parent gets its own horizontal scrollbar. */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep table cells from collapsing once the table is display:block. */
table > thead,
table > tbody,
table > tfoot {
  display: table;
  width: 100%;
  min-width: max-content;
  table-layout: auto;
}

/* Don't let long cell values wrap into unreadable stacks while scrolling. */
table th,
table td {
  white-space: nowrap;
}

/* Allow deliberate wrapping where a cell opts in. */
table th.wrap,
table td.wrap,
table .allow-wrap {
  white-space: normal;
}

/* Generic escape hatch: add class="scroll-x" to any wide block. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Never let the page itself scroll sideways — containers handle it. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Visible, comfortable scrollbars on the dark admin UI. */
.scroll-x::-webkit-scrollbar,
table::-webkit-scrollbar,
[style*="overflow-x"]::-webkit-scrollbar,
[style*="overflow: auto"]::-webkit-scrollbar {
  height: 10px;
}

.scroll-x::-webkit-scrollbar-track,
table::-webkit-scrollbar-track,
[style*="overflow-x"]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}

.scroll-x::-webkit-scrollbar-thumb,
table::-webkit-scrollbar-thumb,
[style*="overflow-x"]::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.55);
  border-radius: 6px;
}

.scroll-x::-webkit-scrollbar-thumb:hover,
table::-webkit-scrollbar-thumb:hover,
[style*="overflow-x"]::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.8);
}

/* Firefox */
.scroll-x,
table {
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 185, 129, 0.55) rgba(255, 255, 255, 0.06);
}

/* On phones give wide blocks a little momentum and room to breathe. */
@media (max-width: 640px) {
  .scroll-x,
  table {
    overscroll-behavior-x: contain;
  }
}