/* ============================================================================
 * tables.css - FAUCETRIX modern tables (plan SEC, slab 3)
 * ----------------------------------------------------------------------------
 * Shared skin for ALL data tables: cards-on-hover, sticky-friendly headers,
 * tabular-num amounts, sort arrows driven by aria-sort, client-side pager
 * < 1 2 3 . 4 5 27 >, and filter chips. Token-driven (theme-tokens.css).
 * Wired by tables.js. Purely presentation - no server behavior changes.
 * ========================================================================== */

/* ---- base table skin ---- */
table[data-fx-table] {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.865rem;
  line-height: 1.45;
  /* auto (not fixed) so the browser can shrink columns to fit the viewport
     instead of overflowing. Combined with min-width:0 on cells, long hashes
     and mono amounts wrap instead of pushing the page sideways. */
  table-layout: auto;
}
table[data-fx-table] thead th {
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--text-2);
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--surface-border);
  white-space: nowrap;
  background: var(--surface);
  -webkit-user-select: none;
  user-select: none;
}
table[data-fx-table] tbody td {
  padding: 0.65rem 0.85rem;
  color: var(--text-1);
  border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 55%, transparent);
  vertical-align: middle;
  /* The two rules that actually remove horizontal scroll: a cell is allowed
     to be narrower than its longest word, and that word may break. */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
table[data-fx-table] tbody tr { transition: background var(--fade); }
table[data-fx-table] tbody tr:last-child td { border-bottom: none; }
@media (hover: hover) {
table[data-fx-table] tbody tr:hover { background: color-mix(in srgb, var(--ct-primary) 6%, transparent); }
}
table[data-fx-table] tbody tr.group-end td { border-bottom: 1px solid var(--surface-border); }

/* numbers: monotabular throughout */
table[data-fx-table] td.num,
table[data-fx-table] th.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
table[data-fx-table] td.muted { color: var(--text-2); }
table[data-fx-table] td.positive { color: var(--mint); }
table[data-fx-table] td.negative { color: var(--magenta); }
table[data-fx-table] .nowrap { white-space: nowrap; }

/* status pills inside table cells */
table[data-fx-table] .fx-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: capitalize;
  white-space: nowrap;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border: 1px solid var(--surface-border);
  color: var(--text-2);
}
table[data-fx-table] .fx-pill.ok   { color: var(--lime);   border-color: color-mix(in srgb, var(--lime) 35%, transparent); background: color-mix(in srgb, var(--lime) 10%, transparent); }
table[data-fx-table] .fx-pill.good { color: var(--mint);   border-color: color-mix(in srgb, var(--mint) 35%, transparent); background: color-mix(in srgb, var(--mint) 10%, transparent); }
table[data-fx-table] .fx-pill.warn { color: var(--gold);   border-color: color-mix(in srgb, var(--gold) 35%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
table[data-fx-table] .fx-pill.bad  { color: var(--magenta); border-color: color-mix(in srgb, var(--magenta) 35%, transparent); background: color-mix(in srgb, var(--magenta) 10%, transparent); }

/* ---- sortable headers (aria-sort driven arrows) ---- */
table[data-fx-table] th[data-sort] { cursor: pointer; position: relative; padding-right: 1.4rem; }
table[data-fx-table] th[data-sort]::after {
  content: "\2195";
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  opacity: 0.35;
  color: var(--text-2);
}
table[data-fx-table] th[aria-sort='ascending']::after {
  content: "\2191";
  opacity: 1;
  color: var(--lime);
}
table[data-fx-table] th[aria-sort='descending']::after {
  content: "\2193";
  opacity: 1;
  color: var(--lime);
}
@media (hover: hover) {
table[data-fx-table] th[data-sort]:hover::after { opacity: 0.9; }
}

/* ---- client-side pager ---- */
.fx-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.85rem;
}
.fx-pager .fx-pg {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background var(--fade), color var(--fade), border-color var(--fade);
}
@media (hover: hover) {
.fx-pager .fx-pg:hover:not(:disabled):not(.cur):not(.dots) {
          border-color: var(--lime);
          color: var(--lime);
    }
}
.fx-pager .fx-pg.cur {
  background: var(--ct-primary);
  border-color: var(--ct-primary);
  color: var(--bg);
  font-weight: 600;
}
.fx-pager .fx-pg.dots { border: none; background: transparent; color: var(--text-3); cursor: default; }
.fx-pager .fx-pg:disabled { opacity: 0.35; cursor: not-allowed; }
.fx-pager-info {
  margin-right: auto;
  font-size: 0.72rem;
  color: var(--text-3);
  font-family: var(--font-mono);
}
.fx-pager.flat { margin-top: 0; }

/* ---- filter chips ---- */
.fx-chipbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.fx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  /* This was the blanket `all` keyword: only these three properties actually
     change here (:hover sets border-color/color, .active and .clear set
     background), and `all` also animates any future layout property off-GPU. */
  transition: color var(--fade), border-color var(--fade), background-color var(--fade);
}
@media (hover: hover) {
.fx-chip:hover { border-color: var(--lime); color: var(--lime); }
}
.fx-chip.active {
  background: color-mix(in srgb, var(--lime) 16%, transparent);
  border-color: color-mix(in srgb, var(--lime) 55%, transparent);
  color: var(--lime);
}
.fx-chip .x { font-size: 0.62rem; opacity: 0.7; }
.fx-chip.clear { border-color: transparent; background: transparent; color: var(--text-3); }
@media (hover: hover) {
.fx-chip.clear:hover { color: var(--magenta); }
}

/* ---- responsive: FIT the viewport, never scroll ----
   The old rule was `overflow-x: auto` on .table-wrap, which pushed wide
   tables into a horizontal scroller nobody used on a phone. The table now
   shrinks instead: tighter padding, smaller type, and secondary columns
   dropped via .fx-col-hide-sm (marked in the view on th AND td so the
   columns stay aligned). .table-wrap survives only as a last-resort net. */
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Phone: drop the optional columns. */
@media (max-width: 639px) {
  table[data-fx-table] .fx-col-hide-sm { display: none; }
}

/* Tablet and below: tighter cells. */
@media (max-width: 900px) {
  table[data-fx-table] { font-size: 0.8rem; }
  table[data-fx-table] thead th,
  table[data-fx-table] tbody td { padding: 0.55rem 0.5rem; }
  table[data-fx-table] thead th { font-size: 0.64rem; letter-spacing: 0.02em; }
  /* Sort arrows sit inside the cell on narrow screens, so the arrow padding
     that reserves 1.4rem on desktop would eat a whole column. */
  table[data-fx-table] th[data-sort] { padding-right: 0.9rem; }
  table[data-fx-table] th[data-sort]::after { right: 0.15rem; font-size: 0.62rem; }
}

@media (max-width: 639px) {
  table[data-fx-table] { font-size: 0.75rem; }
  table[data-fx-table] thead th,
  table[data-fx-table] tbody td { padding: 0.45rem 0.35rem; }
  table[data-fx-table] thead th { font-size: 0.58rem; letter-spacing: 0; }
  table[data-fx-table] thead th,
  table[data-fx-table] tbody td { white-space: normal; }
  /* Numeric cells must never be the reason a row is 2x taller than its
     neighbours. */
  table[data-fx-table] td.num,
  table[data-fx-table] th.num { font-size: 0.72rem; }
  .fx-pager { justify-content: center; }
  .fx-pager-info { margin-right: 0; width: 100%; text-align: center; }
}

/* Very narrow phones (320px): the last step before anything is dropped. */
@media (max-width: 380px) {
  table[data-fx-table] .fx-col-hide-xs { display: none; }
  table[data-fx-table] { font-size: 0.7rem; }
  table[data-fx-table] thead th,
  table[data-fx-table] tbody td { padding: 0.4rem 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  table[data-fx-table] tbody tr, .fx-chip, .fx-pg { transition: none !important; }
}