/* ==========================================================================
   Statistics — bento board in the home dashboard's visual language.
   Grid mirrors bento.css (310/588/316 fr, uniform 16px gap, 18px radii); tiles
   reuse the home .dtile chrome + home tile-content classes (--gauge/--chart/
   --heat/--hero/--finance). Only stats-specific tiles (devices, KPIs, online
   users, tops) add new classes below — all tokenised, both themes, no hardcode.
   Load order: after core.css / bento.css so these win on equal specificity.
   ========================================================================== */

/* The board's 1920-width cap + centring now lives in the GLOBAL admin content cap
   (core.css → "GLOBAL CONTENT-WIDTH CAP"), which caps every `.page` — statistics
   root is `.page sboard`, so it's covered there. Here we only need the container
   query context: cqw units drive the bento's pure-scale layout. */
.admin-main .sboard { container-type: inline-size; }

.admin-main .sgrid {
  --gap: 16px;
  --dash-radius: 18px;
  display: grid;
  grid-template-columns: 310fr 588fr 316fr;
  gap: var(--gap);
  align-items: start;
}
.admin-main .sgrid-col { display: flex; flex-direction: column; row-gap: var(--gap); min-width: 0; }
.admin-main .sgrid-col--left  { grid-column: 1; grid-row: 1; }
.admin-main .sgrid-col--mid   { grid-column: 2; grid-row: 1; }
.admin-main .sgrid-col--right { grid-column: 3; grid-row: 1; }
.admin-main .sgrid-wide, .admin-main .dash-wide2 { grid-column: 1 / -1; min-width: 0; }

/* All three stacks are stretched to the tallest one, and each names ONE elastic
   tile that swallows the leftover height, so the columns END ON THE SAME LINE
   (promo table left, heatmap mid, devices right) instead of leaving a ragged
   step under the shortest stack. The row height still comes from the tallest
   stack's natural size — the elastic tiles only take what's left over. */
@container (min-width: 1025px) {
  .admin-main .sgrid-col { align-self: stretch; }
  .admin-main .sou-tile { flex: 1 1 auto; min-height: 0; }
  /* basis 0 (like the promo tile) so the heatmap's own content can never feed
     back into the tile height — it just takes the leftover of the stack. */
  .admin-main .sgrid-col--mid .dtile--heat { flex: 1 1 0; min-height: 0; }
  .admin-main .sgrid-col--right .sdev-tile { flex: 1 1 auto; min-height: 0; }
  /* device rows sit centred in the taller tile — no void dumped at the bottom */
  .admin-main .sgrid-col--right .sdev__rows { flex: 1 1 auto; justify-content: center; }
}

/* ---- Shared tile bits ---------------------------------------------------- */
/* Title metrics 1:1 with the home chart/heatmap titles (.dchart__title). */
.admin-main .stile-title {
  margin: 0 0 1cqw;
  display: flex; align-items: center; gap: 8px;
  color: var(--text-strong);
  font-size: clamp(13px, 1.18cqw, 16px);
  font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
}
.admin-main .stile-title svg { width: 16px; height: 16px; color: var(--text-muted); flex: 0 0 auto; }
.admin-main .stile-empty { color: var(--text-muted); font: 500 12.5px var(--font-ui); padding: 8px 0; }
.admin-main .stile-empty--pad { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; }

/* Tiles that hold a title + body get comfortable padding like the home tiles. */
.admin-main .sdev-tile, .admin-main .sou-tile, .admin-main .skpi-tile, .admin-main .stops-tile {
  padding: 1.55cqw 1.6cqw 1.4cqw; display: flex; flex-direction: column; overflow: hidden;
}

/* ---- Hero tile — compact column: title+subtitle, then full-width controls
   (domain filter + global period picker). The sticker is ABSOLUTE top-right so
   it never inflates the flow height. overflow:visible lets the custom-period
   popover escape the tile; height follows the (short) content. ---- */
.admin-main .dtile--hero.shero-tile {
  position: relative;
  flex-direction: column; align-items: stretch; aspect-ratio: auto;
  overflow: visible; padding: 1.6cqw 1.9cqw 1.5cqw; gap: 1cqw;
}
.admin-main .shero__top { min-width: 0; }
.admin-main .shero__head { min-width: 0; max-width: 66%; }
.admin-main .shero-tile .hero-greet__title { margin: 0; font: 700 clamp(22px, 2.85cqw, 36px)/1.02 var(--font-ui); letter-spacing: -.02em; color: var(--text-strong); }
.admin-main .shero__sub {
  margin: .5cqw 0 0; max-width: 44ch;
  font: 500 clamp(12px, 1.05cqw, 14px)/1.38 var(--font-ui); color: var(--text-muted);
}
.admin-main .shero-tile .hero-sticker { position: absolute; top: .6cqw; right: 1cqw; width: clamp(130px, 18cqw, 250px); aspect-ratio: 1 / 1; margin: 0; }
/* Controls sit lower than the header (extra top margin) with a roomier rhythm
   between the domain filter and the period row — a calmer, more premium hero.
   Capped to the left region so the (wrapping) period pills never run under the
   enlarged corner sticker. */
.admin-main .shero__controls {
  display: flex; flex-direction: column; gap: 1.2cqw; align-items: flex-start; margin-top: 1.55cqw;
  /* End exactly ~18px before the sticker's left edge at every width: mirror the
     sticker's own clamp() so the reserve tracks it even where it clamps in px.
     (+0.9cqw offsets the tile's own horizontal padding baked into 100%.) */
  max-width: calc(100% - clamp(130px, 18cqw, 250px) + 0.9cqw - 18px);
}
.admin-main .shero__picker { width: 100%; }

/* Domain filter — a large, prominent chip: no dropdown caret (per spec), big
   globe icon + bold value. Native select, arrow suppressed via appearance:none. */
.admin-main .shero__filter { display: inline-flex; align-items: center; gap: 12px; margin-top: 0; max-width: 100%; }
.admin-main .shero__filter-ic { display: inline-flex; color: var(--text-muted); flex: 0 0 auto; }
.admin-main .shero__filter-ic svg { width: 28px; height: 28px; }
.admin-main .shero__select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 22px; margin: 0; max-width: 100%;
  font: 700 clamp(16px, 1.55cqw, 21px) var(--font-ui); letter-spacing: -.01em;
  color: var(--text-strong); cursor: pointer; text-overflow: ellipsis;
  transition: border-color .15s ease, background-color .15s ease;
}
.admin-main .shero__select:hover { border-color: var(--border-hover); background: color-mix(in srgb, var(--text-strong) 4%, var(--bg-surface)); }
.admin-main .shero__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Overflow button — a square that matches the select's height exactly
   (align-items: stretch + aspect-ratio), holding the board-wide switches. */
.admin-main .shero__row { display: flex; align-items: center; gap: 12px; max-width: 100%; min-width: 0; }
.admin-main .shero__row .shero__filter { min-width: 0; }
.admin-main .shero__more {
  /* A square of exactly the domain dropdown's height: dropdown.js swaps the
     native <select> for a .dd-trigger (34px tall, radius 10px), so the button
     copies THAT box — 8px padding + 16px glyph + 1px border on each side. */
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-muted); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.admin-main .shero__more svg { width: 16px; height: 16px; }
.admin-main .shero__more:hover { border-color: var(--border-hover); background: color-mix(in srgb, var(--text-strong) 4%, var(--bg-surface)); color: var(--text-strong); }
.admin-main .shero__more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.admin-main .shero__more[aria-expanded="true"] { border-color: var(--border-hover); color: var(--text-strong); }
/* Filter armed → the button carries the accent, so a filtered board is never
   mistaken for the full one after a reload. */
.admin-main .shero__more.is-on {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-surface));
}

/* Switch row inside the overflow popover (portalled to <body>). The panel
   itself gets the bento tiles' 18px radius — :has() targets just this popover,
   leaving the shared combo panels (users/finance filters) untouched. */
body > .us-popover:has(.stier) { border-radius: 18px; padding: 10px; }
/* …and follows the tiles down to 16px on the ≤1024px layout (the panel is
   portalled to <body>, out of reach of the board's --dash-radius). */
@media (max-width: 1024px) {
  body > .us-popover:has(.stier) { border-radius: 16px; }
}
body > .us-popover .stier { padding: 2px; }
body > .us-popover .stier__row {
  display: flex; align-items: flex-start; gap: 14px; padding: 8px 10px 10px;
  border-radius: 10px; cursor: pointer;
}
body > .us-popover .stier__row:hover { background: var(--bg-surface); }
body > .us-popover .stier__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body > .us-popover .stier__title { font: 600 14px/1.3 var(--font-ui); color: var(--text-strong); }
body > .us-popover .stier__hint { font: 400 12px/1.45 var(--font-ui); color: var(--text-muted); }
body > .us-popover .stier .pset-switch { flex: 0 0 auto; margin-top: 1px; }

/* ---- Global period picker (preset pills + custom-range popover) ----------- */
.admin-main .pkr {
  position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%;
  --pk-bg: #f0f1f3; --pk-fg: var(--text-muted);
  --pk-active-bg: #ffffff; --pk-active-fg: #101319;
  --pk-shadow: 0 1px 2px rgba(16, 19, 25, .14), 0 0 0 .5px rgba(16, 19, 25, .05);
}
[data-theme="dark"] .admin-main .pkr { --pk-bg: #2a323a; --pk-active-bg: #ffffff; --pk-active-fg: #12151a; --pk-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.admin-main .pkr__pills { display: inline-flex; gap: 2px; flex-wrap: wrap; flex: 0 1 auto; padding: 3px; border-radius: 999px; background: var(--pk-bg); }
.admin-main .pkr__pill {
  appearance: none; border: 0; background: transparent; color: var(--pk-fg);
  font: 600 11px var(--font-ui); padding: 6px 9px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; line-height: 1;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.admin-main .pkr__pill:hover { color: var(--text-strong); }
.admin-main .pkr__pill.is-active { background: var(--pk-active-bg); color: var(--pk-active-fg); box-shadow: var(--pk-shadow); }
.admin-main .pkr__pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-main .pkr__pill-ic { display: inline-flex; line-height: 0; }
.admin-main .pkr__pill-ic svg { width: 12px; height: 12px; }
.admin-main .pkr__pop {
  position: absolute; z-index: 30; top: 0; left: 0;   /* JS anchors it under the "Свой период" pill */
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 12px; display: flex; flex-direction: column; gap: 9px; min-width: 210px;
}
.admin-main .pkr__pop[hidden] { display: none; }
.admin-main .pkr__pop-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 13px var(--font-ui); color: var(--text); }
.admin-main .pkr__pop-row input {
  border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-strong);
  border-radius: 8px; padding: 6px 9px; font: 500 13px var(--font-ui);
  color-scheme: light;   /* pin the native calendar-glyph scheme to the app theme */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .admin-main .pkr__pop-row input { color-scheme: dark; } }
:root[data-theme="dark"] .admin-main .pkr__pop-row input { color-scheme: dark; }
:root[data-theme="light"] .admin-main .pkr__pop-row input { color-scheme: light; }
.admin-main .pkr__pop-row input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .8; }
.admin-main .pkr__pop-row input:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.admin-main .pkr__pop-apply {
  appearance: none; border: 0; background: var(--accent); color: #fff;
  font: 600 13px var(--font-ui); padding: 9px; border-radius: 8px; cursor: pointer; margin-top: 2px;
}
.admin-main .pkr__pop-apply:hover { filter: brightness(1.06); }

/* ---- Key metrics — KPI cards with period-over-period deltas --------------- */
.admin-main .kmetric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; margin-top: .3cqw; }
.admin-main .kmetric {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: color-mix(in srgb, var(--text-strong) 4%, var(--card-bg));
}
.admin-main .kmetric__label { font: 500 11.5px/1.25 var(--font-ui); color: var(--text-muted); min-height: 2.3em; }
.admin-main .kmetric__val { font: 700 clamp(18px, 1.85cqw, 26px) var(--font-ui); letter-spacing: -.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.admin-main .kmetric__delta { font: 600 12px var(--font-ui); font-variant-numeric: tabular-nums; min-height: 15px; }
.admin-main .kmetric__delta.is-up { color: var(--green); }
.admin-main .kmetric__delta.is-down { color: var(--red); }
.admin-main .kmetric__delta.is-zero { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .admin-main .pkr__pill { transition: none; }
}

/* ---- Total-deposits tile — reuses .dtile--finance; just a bigger amount ---- */
.admin-main .dtile--total .fin__amount { font-size: clamp(30px, 7.4cqw, 82px); }

/* ---- Devices tile -------------------------------------------------------- */
.admin-main .sdev__rows { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.admin-main .sdev__row {
  display: grid;
  grid-template-columns: 20px minmax(64px, auto) 1fr auto 40px;
  align-items: center; gap: 10px;
  font: 500 13px var(--font-ui);
}
.admin-main .sdev__ic { color: var(--text-muted); line-height: 0; }
.admin-main .sdev__ic svg { width: 16px; height: 16px; }
.admin-main .sdev__label { color: var(--text); white-space: nowrap; }
.admin-main .sdev__track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text-strong) 8%, transparent); overflow: hidden; }
.admin-main .sdev__fill {
  display: block; width: 0; height: 100%; border-radius: 999px;
  transition: width .7s cubic-bezier(.22,.61,.36,1);
}
.admin-main .sdev__fill--desktop { background: var(--blue); }
.admin-main .sdev__fill--mobile  { background: var(--green); }
.admin-main .sdev__fill--tablet  { background: var(--yellow); }
.admin-main .sdev__fill--other   { background: var(--text-muted); }
.admin-main .sdev__count { color: var(--text-strong); font-weight: 600; font-variant-numeric: tabular-nums; justify-self: end; }
.admin-main .sdev__pct { color: var(--text-muted); font-variant-numeric: tabular-nums; justify-self: end; }

/* ---- KPI tile (wide) — cards mirror home domain cards -------------------- */
.admin-main .skpi__grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1cqw;
  flex: 1 1 auto;
}
.admin-main .skpi__card {
  display: flex; flex-direction: column; gap: .2cqw; justify-content: center;
  padding: 1.15cqw 1.3cqw;
  border: 1px solid var(--border); border-radius: 12px;
  background: color-mix(in srgb, var(--text-strong) 4%, var(--card-bg));
}
.admin-main .skpi__num {
  font-size: clamp(20px, 2.15cqw, 30px); font-weight: 700; line-height: 1.05;
  letter-spacing: -.02em; color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.admin-main .skpi__label { font-size: clamp(11px, .96cqw, 13px); font-weight: 500; color: var(--text-muted); }

/* ---- Online-users tile — fintech list, like the home ledger -------------- */
.admin-main .sou__list {
  list-style: none; margin: .4cqw 0 0; padding: 0 2px 0 0;
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.admin-main .sou__list::-webkit-scrollbar { width: 6px; }
.admin-main .sou__list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.admin-main .sou__row {
  display: grid;
  grid-template-columns: 8px 20px minmax(0, 1fr) auto 18px auto;
  align-items: center; gap: 9px; padding: 8px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  text-decoration: none; color: inherit;
  transition: background-color .14s ease;
}
.admin-main .sou__row:last-child { border-bottom: 0; }
.admin-main .sou__row:hover { background: color-mix(in srgb, var(--text-strong) 5%, transparent); }
.admin-main .sou__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.admin-main .sou__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); }
.admin-main .sou__flag { line-height: 0; }
.admin-main .sou__flag img, .admin-main .sou__flag svg { width: 18px; height: auto; border-radius: 2px; }
.admin-main .sou__info { min-width: 0; display: flex; flex-direction: column; }
.admin-main .sou__login { color: var(--text-strong); font: 600 12.5px/1.3 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-main .sou__domain { color: var(--text-muted); font: 500 11px/1.3 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-main .sou__fin { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.admin-main .sou__bal { color: var(--text-strong); font: 600 12px var(--font-ui); }
.admin-main .sou__dep { color: var(--green); font: 500 11px var(--font-ui); }
.admin-main .sou__dev { color: var(--text-muted); line-height: 0; }
.admin-main .sou__dev svg { width: 15px; height: 15px; }
.admin-main .sou__ago { color: var(--text-muted); font: 500 11px var(--font-ui); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Traffic chart (columns: registrations + deposits, dual Y axis) -------
   Plot, hover and tooltip come from modules/bar-chart.js (.bchart in bento.css);
   the legend swatches reuse its colour tokens. */
.admin-main .tchart__head { align-items: center; }
.admin-main .tchart__titles { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.admin-main .tchart__legend { display: flex; gap: 12px; flex-wrap: wrap; }
.admin-main .tchart__lg { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--font-ui); color: var(--text-muted); white-space: nowrap; }
.admin-main .tchart__lg::before { content: ""; width: 9px; height: 9px; border-radius: 3px; }
.admin-main .tchart__lg--reg::before { background: var(--bc-on); }
.admin-main .tchart__lg--dep::before { background: var(--bc-green); }

/* ---- Tops tiles (now in the narrow left column) + bottom gauge/online row --
   Топ стран takes the old "Онлайн сейчас" gauge size (fixed aspect); Топ
   промокодов stretches to fill the column (old "Сейчас на сайте" slot). Tables
   scroll inside with a sticky header. The gauge + online list move to a
   full-width bottom row and fill it (gauge keeps its width, list fills). */
.admin-main .sgrid-col--left [data-tops-tile="country"] { aspect-ratio: 311 / 260; flex: 0 0 auto; min-height: 0; }
/* basis 0 so the (long) promo table never inflates the column past the mid one
   — it fills the leftover height and scrolls inside instead. */
.admin-main .sgrid-col--left [data-tops-tile="promo"] { flex: 1 1 0; min-height: 0; }
.admin-main .sgrid-col--left .stops-tile { min-height: 0; }
.admin-main .sgrid-col--left .stops-tile .stbl-wrap { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.admin-main .sgrid-col--left .stops-tile .stbl-wrap::-webkit-scrollbar { width: 6px; }
.admin-main .sgrid-col--left .stops-tile .stbl-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* compact table for the narrow column — fits all columns without side-cropping */
.admin-main .sgrid-col--left .stbl th { padding: 5px 4px; font-size: 10.5px; letter-spacing: 0; }
.admin-main .sgrid-col--left .stbl td { padding: 6px 4px; font-size: 11.5px; }
.admin-main .sgrid-col--left .stbl .num { font-size: 11.5px; }
.admin-main .sgrid-col--left .stbl__country { gap: 5px; }
.admin-main .sgrid-col--left .stbl__country img, .admin-main .sgrid-col--left .stbl__country svg { width: 16px; }
/* Show the full country name — no ellipsis. The name column sizes to content on
   one line; the table wrapper (overflow:auto) scrolls only for pathologically
   long names, so nothing is ever cut. */
.admin-main .sgrid-col--left .stbl__country span:last-child { white-space: nowrap; }
.admin-main .sgrid-col--left .stbl__code { font-size: 11.5px; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

.admin-main .sbottom-row { display: grid; grid-template-columns: 311fr 955fr; gap: var(--gap, 16px); align-items: stretch; }
.admin-main .sbottom-row .dtile--gauge { align-self: start; }
.admin-main .sbottom-row .sou-tile { min-height: 0; }

.admin-main .stbl-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* sticky header so column labels stay while the narrow table scrolls */
.admin-main .stbl thead th { position: sticky; top: 0; z-index: 1; background: var(--card-bg); }
.admin-main .stbl { width: 100%; border-collapse: collapse; font: 500 13px var(--font-ui); }
.admin-main .stbl th {
  text-align: left; padding: 7px 10px; color: var(--text-muted);
  font-weight: 600; font-size: 11.5px; letter-spacing: .02em;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.admin-main .stbl td {
  padding: 9px 10px; color: var(--text); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  white-space: nowrap;
}
.admin-main .stbl tbody tr:last-child td { border-bottom: 0; }
.admin-main .stbl tbody tr { transition: background-color .14s ease; }
.admin-main .stbl tbody tr:hover { background: color-mix(in srgb, var(--text-strong) 5%, transparent); }
.admin-main .stbl .num { text-align: right; color: var(--text-strong); font-variant-numeric: tabular-nums; }
/* sortable headers — click/keyboard, arrow indicator on the active column */
.admin-main .stbl-th { cursor: pointer; user-select: none; white-space: nowrap; transition: color .14s ease; }
.admin-main .stbl-th:hover { color: var(--text-strong); }
.admin-main .stbl-th.is-active { color: var(--text-strong); }
.admin-main .stbl-th:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.admin-main .stbl-th::after {
  content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px;
  vertical-align: middle; border: 4px solid transparent; opacity: 0;
}
.admin-main .stbl-th.is-asc::after  { border-bottom-color: currentColor; opacity: .85; }
.admin-main .stbl-th.is-desc::after { border-top-color: currentColor; opacity: .85; }
.admin-main .stbl__country { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); }
.admin-main .stbl__country img, .admin-main .stbl__country svg { width: 18px; height: auto; border-radius: 2px; }
.admin-main .stbl__code { font: 600 12.5px var(--font-mono, var(--font-ui)); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .admin-main .sdev__fill, .admin-main .sou__row, .admin-main .stbl tbody tr, .admin-main .shero__select, .admin-main .shero__more { transition: none; }
}

/* ---- Responsive collapse -------------------------------------------------
   Below the full 3-column board width we drop STRAIGHT to one clean column.
   The old 2-col auto-flow of a 3-col bento read as patchwork — uneven tile
   heights and forced-height gaps (a 4-row promo table stretched to 340px, the
   heatmap padded out beside the tall total). One column, semantic order, tiles
   sized to content. Cosmetics stay desktop-comfortable here; the ≤620 block
   layers phone tuning on top. --------------------------------------------- */
@container (max-width: 1024px) {
  /* Two equal tracks, but almost every tile spans both — the split is used only
     by the compact pair (total + devices) and by the bottom gauge/list row. */
  .admin-main .sgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .admin-main .sgrid-col { display: contents; }
  /* bento.css parks reused .dtile--gauge/--finance in home's columns — reset so
     every stack tile auto-flows by `order` in the single track. Scoped to .sgrid
     → home dashboard untouched (statistics.css loads AFTER bento.css). */
  .admin-main .sgrid .dtile { grid-column: 1 / -1; grid-row: auto; }
  .admin-main .sgrid > .sgrid-wide, .admin-main .sgrid > .dash-wide2 { grid-column: 1 / -1; }
  /* tops tables size to content — no fixed-height gaps */
  .admin-main .sgrid-col--left [data-tops-tile] { aspect-ratio: auto; height: auto; }
  /* reset bento aspect-ratios (else chart/heat/total/gauge paint as thin strips)
     + card-like min-heights */
  .admin-main .sgrid .dtile--chart[data-chart="traffic"],
  .admin-main .sgrid .dtile--heat,
  .admin-main .sgrid .dtile--total,
  .admin-main .sgrid .dtile--gauge,
  .admin-main .sgrid .sdev-tile,
  .admin-main .sgrid .sou-tile { aspect-ratio: auto; }
  .admin-main .sgrid .dtile--chart[data-chart="traffic"] { min-height: 240px; }
  .admin-main .sgrid .dtile--heat  { min-height: 180px; }
  .admin-main .sgrid .dtile--total { min-height: 0; }
  /* semantic order: filters → KPI → traffic → heatmap → total+devices (one row)
     → top-countries → top-promos → bottom row (list + gauge) */
  .admin-main .sgrid .shero-tile   { order: 1; }
  .admin-main .sgrid .skpi-tile    { order: 2; }
  .admin-main .sgrid .dtile--chart[data-chart="traffic"] { order: 3; }
  .admin-main .sgrid .dtile--heat  { order: 4; }
  .admin-main .sgrid .dtile--total { order: 5; }
  .admin-main .sgrid .sdev-tile    { order: 6; }
  .admin-main .sgrid .stops-tile[data-tops-tile="country"] { order: 7; }
  .admin-main .sgrid .stops-tile[data-tops-tile="promo"]   { order: 8; }
  .admin-main .sgrid .sbottom-row  { order: 9; }

  /* ---- Deposits total + devices share ONE row --------------------------
     Full-width, the finance tile turned monstrous here: fitAmount scaled the
     sum to the tile width (~96px) and the money-printer sticker took a 690px
     square. Half-width card instead — sum + caption on the left, sticker
     tucked bottom-right — so it reads at the same weight as the heatmap tile
     next to it. The clamp needs !important: fitAmount writes an inline size. */
  .admin-main .sgrid .dtile--total { grid-column: 1 / 2; align-self: stretch; }
  .admin-main .sgrid .sdev-tile    { grid-column: 2 / -1; align-self: stretch; }
  .admin-main .sgrid .dtile--total .fin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 10px;
    padding: 16px 16px 12px;
  }
  .admin-main .sgrid .dtile--total .fin__amount {
    grid-area: 1 / 1 / 2 / 2; align-self: end;
    font-size: clamp(24px, 4.4cqw, 38px) !important; line-height: 1.1;
  }
  .admin-main .sgrid .dtile--total .fin__cap { grid-area: 2 / 1 / 3 / 2; margin: 6px 0 0; font-size: 13px; }
  .admin-main .sgrid .dtile--total .fin__sticker {
    grid-area: 1 / 2 / 3 / 3; flex: 0 0 auto; align-self: end;
    height: 96px; min-height: 0; margin: 0;
  }

  /* ---- Bottom row: live list on the left, gauge on the right ------------
     `display: contents` used to drop both into the single track, where the
     311×260 gauge stretched to a 718×601 wall. Keep them side by side: the
     list takes the slack and scrolls inside a fixed 340px box (so an empty or
     one-user list holds the same shape), the gauge keeps its reference ratio
     in a narrow column and never grows past it. */
  .admin-main .sgrid .sbottom-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    gap: 16px;
    align-items: start;
  }
  .admin-main .sgrid .sbottom-row .sou-tile {
    order: 1; grid-column: 1; height: 340px; min-height: 0;
  }
  /* gauge keeps its reference 311×260 ratio → a fixed ~200px-tall card that
     tracks the column width instead of the 601px wall it grew into full-width */
  .admin-main .sgrid .sbottom-row .dtile--gauge {
    order: 2; grid-column: 2; aspect-ratio: 311 / 260; height: auto; min-height: 0; align-self: start;
  }
}
/* ---- Phone tuning (layers on the single-column structure above) ---------- */
@container (max-width: 620px) {
  .admin-main .kmetric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-main .sdev-tile, .admin-main .sou-tile, .admin-main .skpi-tile, .admin-main .stops-tile { padding: 16px; }
  .admin-main .stile-title { font-size: 15px; }
  .admin-main .dtile--hero.shero-tile { padding: 16px; gap: 14px; }
  .admin-main .kmetric__val { font-size: 22px; }
  .admin-main .shero__select { font-size: 17px; padding: 10px 18px; }
  .admin-main .shero__filter-ic svg { width: 24px; height: 24px; }
  .admin-main .shero-tile .hero-sticker { width: 92px; height: 92px; aspect-ratio: 1 / 1; }
  /* tuck the controls up; let the period row wrap (UTC chip drops below pills) */
  .admin-main .shero__controls { margin-top: 16px; gap: 14px; max-width: none; }
  .admin-main .shero__picker .pkr { flex-wrap: wrap; }
  /* the pairs stay side by side down here — just tighter */
  .admin-main .sgrid .dtile--total .fin { padding: 14px; column-gap: 8px; grid-template-columns: minmax(0, 1fr) 76px; }
  .admin-main .sgrid .dtile--total .fin__sticker { height: 76px; }
  .admin-main .sgrid .sbottom-row { grid-template-columns: minmax(0, 1fr) minmax(150px, 200px); }
}
/* ---- Phones: back to ONE column (the half-width pairs are tablet-only) ---- */
@container (max-width: 520px) {
  .admin-main .sgrid { grid-template-columns: minmax(0, 1fr); }
  .admin-main .sgrid .dtile--total, .admin-main .sgrid .sdev-tile { grid-column: 1 / -1; }
  .admin-main .sgrid .sbottom-row { grid-template-columns: minmax(0, 1fr); }
  .admin-main .sgrid .sbottom-row .dtile--gauge { order: 1; grid-column: 1; aspect-ratio: auto; height: 260px; }
  .admin-main .sgrid .sbottom-row .sou-tile { order: 2; grid-column: 1; height: 320px; }
  /* total: back to the stacked card + bigger number and sticker sized for
     phones (both override fitAmount's inline size and the tablet grid above) */
  .admin-main .sgrid .dtile--total { min-height: 230px; }
  .admin-main .sgrid .dtile--total .fin {
    display: flex; flex-direction: column; padding: 28px 16px 0;
  }
  /* drop the tablet grid placement — in a flex column `align-self: end` would
     shove the sum to the right edge and leave a hole on the left */
  .admin-main .sgrid .dtile--total .fin__amount,
  .admin-main .sgrid .dtile--total .fin__cap,
  .admin-main .sgrid .dtile--total .fin__sticker { grid-area: auto; align-self: stretch; }
  .admin-main .sgrid .dtile--total .fin__amount { font-size: clamp(44px, 16vw, 78px) !important; line-height: 1.04; }
  .admin-main .sgrid .dtile--total .fin__cap { font-size: 13px; margin-top: 8px; }
  .admin-main .sgrid .dtile--total .fin__sticker { flex: 0 0 auto !important; height: 122px; min-height: 0; margin-top: 8px; align-self: stretch; }
}