/* ============ SCROLL FIX (all tables, all pages) ============
   Loaded AFTER premium-theme.css so it wins. Makes every wide table
   scroll sideways on phones instead of being cut off. */

/* 1) Every known table wrapper scrolls sideways and never grows past the screen */
.body .table-wr,
.body .table-responsive,
.body .table-responsive-classic,
.body .table-responsive-sm,
.body .table-responsive-md,
.body .table-responsive-lg,
.sf-scroll {
  display: block;
  width: 100%;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y;
}

/* 2) Parents must be allowed to shrink (a common reason scroll never appears) */
.body .card,
.body .row > *,
.body [class*="col-"],
.body .container,
.body .component-content,
.body .content {
  min-width: 0;
}

/* 3) On phones/tablets: tables with 4+ columns get a minimum width so the
   extra columns are reachable by swiping. (JS sets --sf-cols and .sf-wide) */
@media (max-width: 991px) {
  .body table.sf-wide {
    width: auto !important;
    min-width: calc(var(--sf-cols, 6) * 115px) !important;
    table-layout: auto !important;
  }
  .body table.sf-wide th,
  .body table.sf-wide td {
    white-space: normal;
  }
}

/* thin, visible scrollbar so users can see the table moves */
.body .table-wr::-webkit-scrollbar,
.sf-scroll::-webkit-scrollbar { height: 6px; }
.body .table-wr::-webkit-scrollbar-thumb,
.sf-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 6px; }