/*--------------------------------------------------------------
# BetTrackr HTMLTable styles v2 (token-driven dark theme)
#
# Requires tokens_v1.css AND theme_v1.css to be loaded first
# (theme_v1.css owns the Bootstrap --bs-* remap, buttons, dropdown
# menus, form-control recipe and the .bt-* component classes; this
# file only styles the server-rendered HTMLTable scaffold).
#
# Class names are load-bearing: htmltable_v1.7.js references
# .bettrackr-table-wrap, .htmltable-*, .data-row and .data-body.
# Restyle only, never rename.
#
# Colors come exclusively from tokens_v1.css custom properties.
--------------------------------------------------------------*/

/* -- Table head: surface-alt bg + section-title typography -- */
/* Replaces the Java-emitted bg-bettrackr-blue on the header row. */
.bettrackr-table-wrap thead tr,
.bettrackr-table-wrap thead th {
  background-color: var(--bettrackr-surface-alt);
}

.bettrackr-table-wrap thead th {
  color: var(--bettrackr-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  border-bottom: 1px solid var(--bettrackr-border);
}

/* Neutralize the legacy Java class until it is removed from the
   server render (keeps the header on-theme in the meantime). */
.bettrackr-table-wrap .bg-bettrackr-blue {
  background-color: var(--bettrackr-surface-alt) !important;
  color: var(--bettrackr-text-muted) !important;
}

/* -- Body rows: hairline borders + hover -- */
.bettrackr-table-wrap tbody.data-body tr,
.bettrackr-table-wrap tbody tr.data-row,
.bettrackr-table-wrap tbody tr {
  border-bottom: 1px solid var(--bettrackr-border);
}

/* Subtle hover: a faint lift, and neutralize Bootstrap's bright
   per-variant --bs-table-hover-bg tints on dark surfaces. */
.bettrackr-table-wrap tbody tr:hover > * {
  --bs-table-hover-bg: transparent;
  --bs-table-hover-color: var(--bettrackr-text);
}
.bettrackr-table-wrap tbody tr:hover > * {
  /* gradient overlay so the lift shows over solid cell tints too
     (e.g. the pending rows, whose cells paint over the row bg) */
  background-image: linear-gradient(
    color-mix(in srgb, var(--bettrackr-text) 5%, transparent),
    color-mix(in srgb, var(--bettrackr-text) 5%, transparent)
  );
}

/* -- Numeric / money cells: tabular figures -- */
.bettrackr-table-wrap td.text-end,
.bettrackr-table-wrap th.text-end,
.bettrackr-table-wrap td.bt-money,
.bettrackr-table-wrap td[data-htmltable-total],
.bettrackr-table-wrap .htmltable-total-row td {
  font-variant-numeric: tabular-nums;
}

/* In tables, money reads at normal weight; bold is reserved for the
   totals row so it stands out against the data. */
.bettrackr-table-wrap td.bt-money {
  font-weight: 400;
}
.bettrackr-table-wrap .htmltable-total-row td {
  font-weight: 600;
}

/* -- Row status washes (translucent tints, never saturated fills) -- */
.bettrackr-table-wrap tr.table-success > * {
  background-color: var(--bettrackr-positive-wash);
}
.bettrackr-table-wrap tr.table-danger > * {
  background-color: var(--bettrackr-negative-wash);
}
.bettrackr-table-wrap tr.table-warning > * {
  background-color: var(--bettrackr-pending-bg);
}
.bettrackr-table-wrap tr.table-warning > *:first-child {
  box-shadow: inset 4px 0 0 var(--bettrackr-secondary);
}
/* Bonus/cash refund rows: same blue wash as the bet cards (Bootstrap's
   table-primary default is a bright light blue that glares on dark). */
.bettrackr-table-wrap tr.table-primary > * {
  background-color: var(--bettrackr-bonus-wash);
}
/* Cashed out / void: muted, matching the bet cards. */
.bettrackr-table-wrap tr.table-info > *,
.bettrackr-table-wrap tr.table-secondary > * {
  background-color: var(--bettrackr-surface-alt);
}
/* Variant rows keep the normal light text (Bootstrap sets #000 on them). */
.bettrackr-table-wrap tr.table-success > *,
.bettrackr-table-wrap tr.table-danger > *,
.bettrackr-table-wrap tr.table-warning > *,
.bettrackr-table-wrap tr.table-primary > *,
.bettrackr-table-wrap tr.table-info > *,
.bettrackr-table-wrap tr.table-secondary > * {
  --bs-table-color: var(--bettrackr-text);
  color: var(--bettrackr-text);
}

/* -- Active filter chips (above table) -- */

.htmltable-active-filters {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}
.htmltable-active-filters.active {
  display: flex;
}
.htmltable-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--bettrackr-text);
  background: var(--bettrackr-surface-alt);
  border: 1px solid var(--bettrackr-border);
  border-radius: var(--bettrackr-r-pill);
  line-height: 1.4;
}
.htmltable-filter-chip-label {
  font-weight: 600;
  color: var(--bettrackr-text-muted);
  font-size: .68rem;
  letter-spacing: .03em;
}
.htmltable-filter-chip-remove {
  cursor: pointer;
  font-size: .72rem;
  color: var(--bettrackr-text-muted);
  transition: color .15s;
  margin-left: 2px;
}
.htmltable-filter-chip-remove:hover {
  color: var(--bettrackr-text);
}
.htmltable-filter-chips-clear {
  border: none;
  background: none;
  color: var(--bettrackr-negative);
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background .15s;
}
.htmltable-filter-chips-clear:hover {
  background: var(--bettrackr-negative-wash);
}

/* -- Pagination -- */

.htmltable-pagination {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.htmltable-pagination .btn {
  padding: 0.2rem 0.45rem;
  font-size: .8rem;
  line-height: 1.4;
}

/* -- Inline filter dropdown -- */

.htmltable-filter-menu {
  min-width: 280px;
}
@media (max-width: 767.98px) {
  .htmltable-filter-menu {
    min-width: 100%;
  }
}
.htmltable-filter-badge {
  display: none;
  font-size: .65rem;
  font-weight: 700;
  background: var(--bettrackr-negative);
  color: var(--bettrackr-text);
  width: 18px;
  height: 18px;
  border-radius: var(--bettrackr-r-pill);
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  line-height: 1;
}
.htmltable-filter-badge:not(:empty) {
  display: inline-flex;
}

/* -- HTMLTableFilter controls (input recipe) -- */

/* Shared field wrapper */
.htmltablefilter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.htmltablefilter-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--bettrackr-text-muted);
  letter-spacing: .02em;
}

/* Select */
.htmltablefilter-select {
  font-size: .9rem;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--bettrackr-r-input);
  background: var(--bettrackr-input-bg);
  color: var(--bettrackr-text);
  transition: border-color .15s, box-shadow .15s;
  appearance: auto;
  width: 100%;
}
.htmltablefilter-select:focus {
  border-color: var(--bettrackr-primary);
  box-shadow: 0 0 0 0.25rem var(--bettrackr-focus-ring);
  outline: none;
}

/* Date */
.htmltablefilter-date {
  font-size: .9rem;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--bettrackr-r-input);
  background: var(--bettrackr-input-bg);
  color: var(--bettrackr-text);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.htmltablefilter-date:focus {
  border-color: var(--bettrackr-primary);
  box-shadow: 0 0 0 0.25rem var(--bettrackr-focus-ring);
  outline: none;
}

/* Radio group - pill chips */
.htmltablefilter-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.htmltablefilter-radios input[type="radio"] {
  position: absolute;
  clip: rect(0,0,0,0);
  pointer-events: none;
}
.htmltablefilter-radios label {
  display: inline-block;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--bettrackr-text);
  background: var(--bettrackr-surface-alt);
  border: 1px solid var(--bettrackr-border);
  border-radius: var(--bettrackr-r-pill);
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
  line-height: 1.4;
}
.htmltablefilter-radios label:hover {
  background: var(--bettrackr-surface-hover);
  border-color: var(--bettrackr-primary);
}
.htmltablefilter-radios input[type="radio"]:checked + label {
  background: var(--bettrackr-surface-alt);
  color: var(--bettrackr-primary);
  border-color: var(--bettrackr-primary);
  font-weight: 700;
}


/* -- HTMLTable Search (input recipe focus) -- */
.htmltable-controls input[type="text"]:focus {
  border-color: var(--bettrackr-primary);
  box-shadow: 0 0 0 0.25rem var(--bettrackr-focus-ring);
}

th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

th.sortable:hover {
    opacity: 0.9;
}

th.sortable:after {
    content: "\F698"; /* bi-arrow-down-up */
    font-family: "bootstrap-icons";
    font-size: 0.75rem;
    margin-left: 0.35rem;
    opacity: 0.4;
}

th.sortable.sort-asc:after {
    content: "\F148"; /* bi-arrow-up */
    opacity: 1;
}

th.sortable.sort-desc:after {
    content: "\F128"; /* bi-arrow-down */
    opacity: 1;
}

/* Tone colors inside tables: Bootstrap's .table cell color rule (and the
   variant-row white-text rule above) out-rank a bare .bt-tone-* class,
   so re-assert the tones at cell scope. Order matters: keep these last. */
.bettrackr-table-wrap td.bt-tone-positive,
.bettrackr-table-wrap td .bt-tone-positive {
  color: var(--bettrackr-positive);
}
.bettrackr-table-wrap td.bt-tone-negative,
.bettrackr-table-wrap td .bt-tone-negative {
  color: var(--bettrackr-negative);
}
.bettrackr-table-wrap td.bt-tone-warning,
.bettrackr-table-wrap td .bt-tone-warning {
  color: var(--bettrackr-secondary);
}
.bettrackr-table-wrap td.bt-tone-bonus,
.bettrackr-table-wrap td .bt-tone-bonus {
  color: var(--bettrackr-bonus-ink);
}
.bettrackr-table-wrap td.bt-tone-neutral,
.bettrackr-table-wrap td .bt-tone-neutral {
  color: var(--bettrackr-text-muted);
}

/* Tones in tables carry color only - the 700/600 weights the tone
   classes ship with are for cards/list rows, not data columns. */
.bettrackr-table-wrap td[class*="bt-tone-"],
.bettrackr-table-wrap td [class*="bt-tone-"] {
  font-weight: 400;
}