/* ── My Bet History submenu ───────────────────────────────────────────────── */
/* Column header + rows — the reference MY BET HISTORY grid: time is the widest column, money is squeezed, and a trailing
   34px column holds the per-row fairness-check (shield) button. Shared grid
   template so the header cells line up exactly over the row cells. */
.wf-hist-head, .wf-hist-row {
    display: grid;
    /* TIME and PAYOUT get equal flexible tracks so the BET/X column sits centred in
       the row. BET/X grows from 66 up to 96px when the (compacted) stake needs it —
       scaled currencies (IDR "15.0K IDR", code suffix, no glyph) overflowed the old
       fixed 66px even though the flexible 1fr columns had spare room. */
    grid-template-columns: minmax(0, 1fr) minmax(66px, 96px) minmax(0, 1fr) 34px;
    column-gap: 6px; align-items: center;
}
.wf-hist-head {
    /* Left padding = row margin-left (11px, the B-badge overhang) + row padding-left
       (8px) so the header labels line up exactly over the row cells. */
    /* Symmetric side gaps: left = row margin-left(6) + row padding-left(8) = 14px,
       right = row margin-right(6) + row padding-right(4) = 10px, so labels sit over
       the row cells while both screen-edge gaps read equal. */
    flex: none; padding: 0 10px 12px 14px; margin: 2px 2px 0;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.01em; color: var(--label);
}
.wf-hist-head .wf-hist-c-time {
    text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-hist-head .wf-hist-c-betx { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Клип ради ellipsis срезал точку снизу vi (CƯỢC, WebKit) — --ink-bleed, base.css. */
.wf-hist-head .wf-hist-c-time,
.wf-hist-head .wf-hist-c-betx { padding-block: var(--ink-bleed); margin-block: calc(-1 * var(--ink-bleed)); }
.wf-hist-head .wf-hist-c-result { text-align: right; white-space: nowrap; }
/* The list viewport scrolls; a thin brand scrollbar is the navigation affordance. */
.wf-hist-scroll { scrollbar-width: thin; scrollbar-color: #D2D2D7 transparent; }
.wf-hist-scroll::-webkit-scrollbar { width: 4px; }
.wf-hist-scroll::-webkit-scrollbar-thumb { background: #D2D2D7; border-radius: 8px; }
/* Rows as grey rounded cards spaced by a gap (reference look). */
.wf-hist-row {
    position: relative;
    /* Match rows that carry the 34px aim button (34px + 6px top/bottom padding,
       border-box) so bonus rows (no button) don't collapse shorter than the rest. */
    min-height: 46px;
    /* Left margin = exactly the bonus "B" badge's 11px left overhang (badge is
       centred on the row edge); everything else squeezed so the content gets the
       maximum usable width. */
    padding: 6px 4px 6px 8px; margin: 0 6px;
    background: var(--surface); border-radius: var(--r-chip);
    font-family: 'Inter', sans-serif; color: var(--ink);
}
/* All four data cells share the reference typography: 12px, semibold, dark ink.
   Scoped to rows so the header keeps its 11px grey label styling. */
.wf-hist-row .wf-hist-c-time, .wf-hist-row .wf-hist-c-betx,
.wf-hist-row .wf-hist-c-result {
    font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.wf-hist-row .wf-hist-c-result { text-align: right; }
/* BET (stake) stacked over X (mult) in a single centred column. */
.wf-hist-c-betx {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; min-width: 0; line-height: 1.2;
}
.wf-hist-row .wf-hist-c-stake { text-align: center; color: var(--label); font-size: 11px; }
/* One line, never wider than the column: fitColumn (ui/fitText.js) picks the ladder
   step that fits, and when even the shortest step does not, shrinks the cell's font
   (fitToWidth.pickFit rule 3). The ellipsis is only a guard for an unmeasured
   column (list hidden during fit); exact stake is in the title. */
.wf-hist-row .wf-hist-c-stake { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-hist-row .wf-hist-c-stake.wf-hist-bonus { color: #9a4ab8; font-weight: 800; }
.wf-hist-row .wf-hist-c-mult { text-align: center; color: var(--ink); font-weight: 700; }
/* Free bet rows (kind='free' / 'free_bonus'): the stake was paid by a grant, not by
   the player. A small "FREE BET" chip under the coefficient marks them, plus a teal
   left rail on the row. Purely presentational — money/outcome unchanged. */
.wf-hist-free-badge {
    margin-top: 2px; padding: 0 5px; border-radius: 6px;
    background: rgba(16, 163, 127, .14); color: var(--ok);
    font-size: 9px; font-weight: 800; letter-spacing: .04em; line-height: 14px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-hist-row.wf-hist-free-row { box-shadow: inset 3px 0 0 0 var(--ok); }
/* Bonus journal row (kind='bonus'/'free_bonus'): light green tint of the row + the
   game's bonus icon (mini ⚡ / big 💰, bonusIcons.js asset) in the shield slot. */
.wf-hist-row.wf-hist-bonus-row { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.wf-hist-bonus-icon {
    width: 26px; height: 26px; justify-self: end; margin-right: 4px;
    object-fit: contain; pointer-events: none; user-select: none;
}
/* BET TIME cell — two stacked lines: time on top (dark ink), smaller/dimmer date below. */
.wf-hist-row .wf-hist-c-time { white-space: normal; line-height: 1.25; }
.wf-hist-t-date, .wf-hist-t-clock {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-hist-t-date { font-size: 10px; font-weight: 500; color: var(--label); }
/* Bonus-trigger bet (bonus-trigger-cell): a normal bet that ALSO fired a bonus. Its
   field cell shows a green "B"; mirror that in the history list with a green coefficient
   + a green left rail on the row. Purely presentational (money/outcome unchanged). */
.wf-hist-c-mult.wf-hist-trigger { color: var(--ok-2); font-weight: 800; }
.wf-hist-row.wf-hist-trigger-row { box-shadow: inset 3px 0 0 0 var(--ok-2); }
/* Tappable "B" badge on a bonus-trigger row → opens the Bonus detail sub-page. Hangs
   half outside the row's left edge (before BET TIME) so it reads as a rail marker
   and never consumes a grid track. */
.wf-hist-bonus-btn {
    position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);
    width: 22px; height: 22px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: var(--ok-2); color: #FFFFFF;
    font-family: var(--ff-head); font-size: 13px; font-weight: 900;
    line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background .14s var(--ease), transform .1s var(--ease);
}
.wf-hist-bonus-btn:hover { background: #159257; }
.wf-hist-bonus-btn:active { transform: translate(-50%, -50%) scale(.9); }
.wf-hist-row .wf-hist-c-result.win  { color: var(--ok); }
.wf-hist-row .wf-hist-c-result.loss { color: #B0B0B8; }

.wf-hist-list { margin: 0; min-height: 8px; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.wf-hist-sentinel { height: 1px; }
.wf-hist-status {
    margin: 12px 8px; text-align: center;
    font-family: 'Inter', sans-serif; font-size: 12px; color: var(--label-2);
}
.wf-hist-status.error { color: var(--pink); }

/* Trailing per-row shield button (wf-rowaim slot): opens this bet's Fairness Check.
   The ONLY tappable element in a row (the row body itself is inert); it is the last
   grid cell, pinned to the right of its track. Ink = the modal title (var(--ink)). */
.wf-rowaim {
    width: 34px; height: 34px; padding: 0; justify-self: end;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--r-copy); background: none; color: var(--ink);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background .12s, color .2s, transform .1s;
}
.wf-rowaim svg { width: 18px; height: 18px; }
.wf-rowaim:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); }
.wf-rowaim:active { transform: scale(.9); }
.wf-rowaim.disabled { color: #D3D3D8; cursor: default; }
.wf-rowaim.disabled:hover { background: none; }
.wf-rowaim.disabled:active { transform: none; }