/* ==========================================================================
   CAMMUS & XUANSU - wide table navigation - 2026-10-07 (v2)
   Additive sheet, loaded last (after xuansu.mobile-20261007-3.css).
   Front site and admin both load it, so wide admin tables get the same
   treatment as the public ones.

   1) Every scroll container gets a visible, themed horizontal scrollbar.
      The 2026-09-22 sheet set scrollbar-width:none + display:none, so on
      desktop there was no visible handle at all - only trackpad gestures.
   2) A sticky horizontal scrollbar sits above each overflowing table
      (built by xuansu.tableux-20261007-1.js) so the handle is reachable
      without scrolling to the bottom of a 150-row list.
   3) Drag-to-pan (from the header or a short cell, or with the middle
      mouse button anywhere) plus Shift + wheel.
   4) Over-long plain-text cells are clamped with an ellipsis, and the
      full value stays available through the native title tooltip, so one
      free-text column can no longer stretch a table by thousands of px.
   5) A very wide table keeps its first column pinned while it is scrolled
      sideways, so the row label never leaves the screen (>= 768px only).
   Phones (<= 767.98px) keep the card layout of xuansu.mobile-20261007-2.*.
   ========================================================================== */

/* ---------- 1. visible horizontal scrollbar ----------------------------- */

.fp-mobile-scroll,
.fp-mobile-scroll.fp-ranking-scroll,
.table-responsive,
.fp-hscroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.78) rgba(148, 163, 184, 0.16);
  -ms-overflow-style: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.fp-mobile-scroll::-webkit-scrollbar,
.fp-mobile-scroll.fp-ranking-scroll::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.fp-hscroll::-webkit-scrollbar {
  display: block;
  width: 11px;
  height: 11px;
}

.fp-mobile-scroll::-webkit-scrollbar-track,
.fp-mobile-scroll.fp-ranking-scroll::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.fp-hscroll::-webkit-scrollbar-track {
  background-color: rgba(148, 163, 184, 0.16);
  border-radius: 999px;
}

.fp-mobile-scroll::-webkit-scrollbar-thumb,
.fp-mobile-scroll.fp-ranking-scroll::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.fp-hscroll::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, 0.78);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

.fp-mobile-scroll::-webkit-scrollbar-thumb:hover,
.fp-mobile-scroll.fp-ranking-scroll::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.fp-hscroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(71, 85, 105, 0.92);
}

.fp-mobile-scroll::-webkit-scrollbar-corner,
.table-responsive::-webkit-scrollbar-corner,
.fp-hscroll::-webkit-scrollbar-corner {
  background-color: transparent;
}

body.dark-mode .fp-mobile-scroll,
body.dark-mode .fp-mobile-scroll.fp-ranking-scroll,
body.dark-mode .table-responsive,
body.dark-mode .fp-hscroll {
  scrollbar-color: rgba(148, 163, 184, 0.62) rgba(148, 163, 184, 0.10);
}

body.dark-mode .fp-mobile-scroll::-webkit-scrollbar-track,
body.dark-mode .fp-mobile-scroll.fp-ranking-scroll::-webkit-scrollbar-track,
body.dark-mode .table-responsive::-webkit-scrollbar-track,
body.dark-mode .fp-hscroll::-webkit-scrollbar-track {
  background-color: rgba(148, 163, 184, 0.10);
}

body.dark-mode .fp-mobile-scroll::-webkit-scrollbar-thumb,
body.dark-mode .fp-mobile-scroll.fp-ranking-scroll::-webkit-scrollbar-thumb,
body.dark-mode .table-responsive::-webkit-scrollbar-thumb,
body.dark-mode .fp-hscroll::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.62);
}

body.dark-mode .fp-mobile-scroll::-webkit-scrollbar-thumb:hover,
body.dark-mode .fp-mobile-scroll.fp-ranking-scroll::-webkit-scrollbar-thumb:hover,
body.dark-mode .table-responsive::-webkit-scrollbar-thumb:hover,
body.dark-mode .fp-hscroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.88);
}

/* ---------- 2. sticky horizontal scrollbar (built by the script) -------- */

.fp-hscroll {
  display: none;
  height: 13px;
  margin: 0 0 1px;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: var(--fp-surface, #ffffff);
  background-image: var(--fp-gradient-surface, none);
  box-shadow: 0 8px 12px -10px rgba(15, 23, 42, 0.55);
}

.fp-hscroll.is-on {
  display: block;
}

/* Kept sticky only when the script confirmed a usable viewport offset. */
.fp-hscroll.fp-hscroll-sticky {
  position: sticky;
  top: var(--fp-tableux-top, 0px);
  z-index: 4;
}

.fp-hscroll-track {
  width: 1px;
  height: 1px;
}

/* When the handle is parked on top of the table header, hairline it so the
   stuck state is obvious. */
.fp-hscroll.fp-hscroll-stuck {
  border-bottom: 1px solid var(--fp-border);
}

/* ---------- 3. drag to pan --------------------------------------------- */

.fp-grab {
  cursor: grab;
}

.fp-pannable.fp-panning,
.fp-pannable.fp-panning .fp-grab {
  cursor: grabbing !important;
}

.fp-pannable.fp-panning {
  user-select: none;
  -webkit-user-select: none;
}

.fp-pannable.fp-panning a,
.fp-pannable.fp-panning button {
  pointer-events: none;
}

/* ---------- 4. over-long plain-text cells ------------------------------ */

.fp-clamp {
  display: inline-block;
  max-width: var(--fp-clamp-width, 22em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

td[data-fp-clamp="1"] {
  cursor: help;
}

/* Phones rebuild wide tables as cards - never clamp there, the card layout
   wants the full value to wrap. */
@media (max-width: 767.98px) {
  .fp-clamp {
    display: inline;
    max-width: none;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }

  td[data-fp-clamp="1"],
  .fp-grab,
  .fp-pannable {
    cursor: auto;
  }
}

/* ---------- 5. sticky first column (very wide tables) ------------------ */

/* Switched on by xuansu.tableux-*.js, and only for a table that overflows
   its .fp-mobile-scroll wrapper by at least ~100px and whose first column is
   narrow enough to be worth keeping on screen. Desktop/tablet only: below
   768px the card layout takes over and the script drops every trace. */

@media (min-width: 768px) {
  th.fp-sticky-col,
  td.fp-sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--fp-surface);
  }

  /* the design-system head is tinted, so the pinned head cell keeps the same
     tint but paints it over an opaque surface - otherwise the rows show
     through while scrolling */
  .fp-table > thead > tr > th.fp-sticky-col {
    z-index: 3;
    background-color: var(--fp-surface);
    background-image: linear-gradient(rgba(15, 23, 42, 0.035), rgba(15, 23, 42, 0.035));
  }

  body.dark-mode .fp-table > thead > tr > th.fp-sticky-col {
    background-color: var(--fp-surface);
    background-image: linear-gradient(rgba(148, 163, 184, 0.07), rgba(148, 163, 184, 0.07));
  }

  /* row tints are repeated on the pinned copy - its opaque background would
     otherwise hide them. Bootstrap .table-hover covers the legacy admin
     tables (they are not .fp-table), and dark mode uses a solid colour. */
  .table-hover > tbody > tr:hover > td.fp-sticky-col,
  .table-hover > tbody > tr:hover > th.fp-sticky-col {
    background-image: linear-gradient(rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0.075));
  }

  body.dark-mode .table-hover > tbody > tr:hover > td.fp-sticky-col,
  body.dark-mode .table-hover > tbody > tr:hover > th.fp-sticky-col {
    background-image: none;
    background-color: #3a4047;
  }

  .fp-table > tbody > tr.fp-rank-extra > td.fp-sticky-col,
  .fp-table > tbody > tr.fp-rank-extra > th.fp-sticky-col {
    background-image: linear-gradient(rgba(16, 185, 129, 0.04), rgba(16, 185, 129, 0.04));
  }

  .fp-table.table-hover > tbody > tr:hover > td.fp-sticky-col,
  .fp-table.table-hover > tbody > tr:hover > th.fp-sticky-col {
    background-image: linear-gradient(rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0.06));
  }

  body.dark-mode .fp-table.table-hover > tbody > tr:hover > td.fp-sticky-col,
  body.dark-mode .fp-table.table-hover > tbody > tr:hover > th.fp-sticky-col {
    background-image: linear-gradient(rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0.10));
  }

  /* the separator only shows up once the column really overlaps content */
  .fp-col-stuck th.fp-sticky-col,
  .fp-col-stuck td.fp-sticky-col {
    box-shadow: 1px 0 0 0 var(--fp-border), 12px 0 16px -14px rgba(15, 23, 42, 0.55);
  }

  body.dark-mode .fp-col-stuck th.fp-sticky-col,
  body.dark-mode .fp-col-stuck td.fp-sticky-col {
    box-shadow: 1px 0 0 0 var(--fp-border), 12px 0 16px -14px rgba(0, 0, 0, 0.85);
  }
}

/* Phones rebuild wide tables as cards: never pin a column there. */
@media (max-width: 767.98px) {
  th.fp-sticky-col,
  td.fp-sticky-col {
    position: static;
    left: auto;
    z-index: auto;
    background-image: none;
    box-shadow: none;
  }
}