/* ==========================================================================
   Finance (Депозиты + Выплаты) — bento-visual language.
   Mirrors the Users/Domains bento: a compact hero sized to ONE stat tile,
   stacked above an equal-width strip of .dtile stat cards. Column count is
   driven by --fin-cols (set inline per page: 3 for deposits, 4/5 for payouts);
   the hero always occupies the first column so its width == one stat tile.
   Scoped to .admin-main .fin-page; values resolve to tokens; both themes ride
   the shared .dtile chrome (bento.css). NB: inside .admin-main, --text is
   remapped to --text-strong (core.css bridge), so we name colours explicitly.
   ========================================================================== */

.admin-main .fin-page {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* bento.css ties .dtile radius to --dash-radius (only defined inside .dash) —
   restore it here so hero + stat tiles are rounded, not square. */
.admin-main .fin-page .dtile { border-radius: 18px; }

/* ---- Top strip: header + stat cards in ONE full-width row ----------------
   Хиро (шире, слева, 1.5fr) и N стат-карт (по 1fr, N=--fin-cols) лежат в одном
   grid-ряду. Высоту ряда задают карты, шапка тянется по ней (align:stretch).
   Обёртки fin-hero-row / fin-summary схлопнуты через display:contents. */
.admin-main .fin-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(var(--fin-cols, 3), minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.admin-main .fin-hero-row { display: contents; }
.admin-main .fin-hero {
  grid-column: 1 / span 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 16px;
  min-height: 92px;
}
.admin-main .fin-hero__text {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 64%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-main .fin-hero__titlerow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-main .fin-hero__title {
  margin: 0;
  font: 700 clamp(20px, 1.9cqw, 27px)/1.05 var(--font-ui);
  letter-spacing: -.02em;
  color: var(--text-strong);
}
.admin-main .fin-hero__sub {
  margin: 0;
  /* smaller type so the full description fits — never truncate it */
  font: 500 11px/1.32 var(--font-ui);
  color: var(--text-muted);
  letter-spacing: -.005em;
}
.admin-main .fin-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: var(--text-strong);
  color: var(--card-bg);
  font: 600 12px var(--font-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .15s ease, transform .15s cubic-bezier(.4, 0, .2, 1);
}
.admin-main .fin-hero__badge:hover { transform: translateY(-1px); opacity: .9; }
.admin-main .fin-hero__badge:active { transform: translateY(0) scale(.98); }
.admin-main .fin-hero__badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-main .fin-hero__sticker {
  position: absolute;
  right: -4px;
  bottom: -6px;
  width: clamp(74px, 7cqw, 96px);
  height: clamp(74px, 7cqw, 96px);
  z-index: 1;
  pointer-events: none;
}
.admin-main .fin-hero__sticker svg { display: block; width: 100% !important; height: 100% !important; }

/* ---- Summary strip: equal-width .dtile stat cards — flow inside .fin-top - */
.admin-main .fin-summary { display: contents; }
.admin-main .fin-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  min-height: 92px;
}
.admin-main .fin-stat__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  flex: 0 0 auto;
}
.admin-main .fin-stat__ic svg { width: 20px; height: 20px; }
.admin-main .fin-stat__body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.admin-main .fin-stat__title {
  font: 500 12.5px/1.2 var(--font-ui);
  color: var(--text-muted);
  letter-spacing: -.005em;
}
.admin-main .fin-stat__value {
  font: 700 clamp(20px, 1.9cqw, 26px)/1.15 var(--font-ui);
  color: var(--text-strong);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.admin-main .fin-stat__hint {
  max-width: 100%;
  font: 500 11.5px/1.3 var(--font-ui);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Responsive — collapse the column count; the hero always fills the first
   remaining cell, so it keeps matching one stat tile at every breakpoint.
   ========================================================================== */
@container (max-width: 1100px) {
  .admin-main .fin-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-main .fin-hero { grid-column: 1 / -1; }
  .admin-main .fin-hero__text { max-width: 70%; }
  /* odd stat count → the last card is alone on its row; stretch it full-width
     instead of leaving an empty cell (nth-child(odd) keeps even counts intact). */
  .admin-main .fin-summary > .fin-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container (max-width: 640px) {
  .admin-main .fin-top { grid-template-columns: 1fr; }
  .admin-main .fin-hero { grid-column: auto; }
  .admin-main .fin-hero__text { max-width: 74%; }
}

/* ==========================================================================
   Finance table panel — Users-parity bottom block. The panel chrome, filters,
   combos, sortable table and pager all reuse the `us-*` classes from
   css/pages/users.css (rendered inside a `.us-page.fin-panel-scope` wrapper, so
   `.admin-main .us-page …` selectors resolve). This block only adds the
   finance-specific cells: crypto token marks, amount notes, mono addr/hash.
   ========================================================================== */

/* Scope wrapper is just a positioning context for the shared us-panel; it must
   not add its own vertical rhythm (the fin-page flex-gap already spaces it). */
.admin-main .fin-page .fin-panel-scope { gap: 0; }

/* ---- Crypto token brand marks (GLOBAL: rendered in table cells AND in the
   portalled `body > .us-popover` combos, which live outside .fin-page) -------- */
.coin-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.coin-ic svg { width: 100%; height: 100%; display: block; }
.coin-ic--generic { color: var(--text-muted); }
.us-option__ic { display: inline-flex; align-items: center; flex: 0 0 auto; }
.us-option__ic .coin-ic { width: 18px; height: 18px; }
.us-combo__ic { display: inline-flex; align-items: center; flex: 0 0 auto; }
.us-combo__ic .coin-ic { width: 18px; height: 18px; }

/* ---- Token cell: mark + symbol + network label -------------------------- */
.admin-main .fin-page .fin-token {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.admin-main .fin-page .fin-token__txt {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.admin-main .fin-page .fin-token__sym {
  font: 600 13.5px/1.2 var(--font-ui);
  color: var(--text-strong);
  letter-spacing: -0.005em;
}
.admin-main .fin-page .fin-token__net {
  font: 500 12px/1.2 var(--font-ui);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-main .fin-page .fin-token__net::before { content: '· '; }

/* ---- Amount cell: headline + optional credited/withheld note ------------- */
.admin-main .fin-page .fin-amount-cell { white-space: nowrap; }
.admin-main .fin-page .fin-amount__note {
  display: block;
  margin-top: 2px;
  max-width: 280px;
  font: 500 11.5px/1.3 var(--font-ui);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Mono cells: deposit address + tx hash ------------------------------ */
.admin-main .fin-page .fin-mono {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  font: 500 12.5px/1.2 var(--font-ui);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.admin-main .fin-page .fin-mono--link { color: var(--text-strong); }
.admin-main .fin-page .fin-mono--link:hover { color: var(--accent); }
.admin-main .fin-page .fin-mono--link svg { width: 13px; height: 13px; color: var(--text-muted); flex: 0 0 auto; }
.admin-main .fin-page .fin-mono--link:hover svg { color: var(--accent); }

/* ---- Actions cell: inline icon links (open user / open tx) --------------- */
.admin-main .fin-page .fin-actions {
  display: inline-flex;
  gap: 4px;
  justify-content: flex-end;
}
.admin-main .fin-page .fin-actions .us-iconbtn { text-decoration: none; }

/* ==========================================================================
   Fixed-layout column shares — the deposit/payout tables always fit the
   wrapper (no horizontal scroll, no clipped trailing column). Widths are
   scoped per variant because the two tables share the fin-col-- classes but
   have different column counts. table-layout:fixed comes from
   .us-table--fixed (users.css). Flexible text columns truncate via ellipsis;
   token / amount / country / date keep their full value.
   ========================================================================== */
.admin-main .fin-table--deposits .fin-col--user    { width: 20%; }
.admin-main .fin-table--deposits .fin-col--token   { width: 14%; }
.admin-main .fin-table--deposits .fin-col--amount  { width: 15%; }
.admin-main .fin-table--deposits .fin-col--domain  { width: 11%; }
.admin-main .fin-table--deposits .fin-col--promo   { width: 11%; }
.admin-main .fin-table--deposits .fin-col--country { width:  8%; }
.admin-main .fin-table--deposits .fin-col--date    { width: 12%; }
.admin-main .fin-table--deposits .fin-col--actions { width:  9%; }

.admin-main .fin-table--payouts .fin-col--user    { width: 11%; }
.admin-main .fin-table--payouts .fin-col--token   { width: 12%; }
.admin-main .fin-table--payouts .fin-col--amount  { width: 15%; }
.admin-main .fin-table--payouts .fin-col--domain  { width:  8%; }
.admin-main .fin-table--payouts .fin-col--promo   { width:  7%; }
.admin-main .fin-table--payouts .fin-col--country { width:  6%; }
.admin-main .fin-table--payouts .fin-col--worker  { width:  8%; }
.admin-main .fin-table--payouts .fin-col--mono    { width: 11%; }
.admin-main .fin-table--payouts .fin-col--date    { width: 11%; }

/* Fixed-layout cell guards: flexible cells stay inside their column instead of
   spilling into the neighbour. Token network label + mono addr/hash + worker
   login + amount note all truncate with ellipsis (title tooltip preserves the
   full value); the long crypto amount uses a slightly smaller type so the whole
   number stays visible. */
.admin-main .us-table--fixed .fin-token { max-width: 100%; }
.admin-main .us-table--fixed .fin-mono {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.admin-main .us-table--fixed .fin-mono--link svg { display: none; }
.admin-main .us-table--fixed .fin-amount-cell .us-money { font-size: 12.5px; }
.admin-main .us-table--fixed .fin-table--payouts .fin-amount-cell .us-money,
.admin-main .us-table--fixed.fin-table--payouts .fin-amount-cell .us-money { font-size: 12px; }
.admin-main .us-table--fixed .fin-amount__note {
  max-width: 100%;
  white-space: nowrap;
}