/* ============================================================
   STYLE C — page kit (Components/Ui). Tokens only (app.css).
   A converted page uses <div class="ui-page"> as its root instead of
   .pro, so the old pg-* / kpi-* / act-* styles of the other roles stay
   untouched. Loaded after shell.css.

   Layers: page content < filter popover backdrop (40) < popover (41)
   < StyledDropdown backdrop (99) / menu (100) inside it < sidebar (40,
   its own context, sits beside the content). No transforms on popovers
   or their ancestors: a transform would trap position:fixed children.
   ============================================================ */

.ui-page {
    display: flex; flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}
.ui-page[hidden] { display: none; } /* tab panels keep their state while hidden */

/* ---------- page header ---------- */
.ui-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
}
.ui-head__main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ui-head__crumb { font-size: var(--font-sm); color: var(--color-text-muted); }
.ui-head__title {
    margin: 0;
    font: 600 22px/1.2 var(--font-family);
    letter-spacing: -.01em;
    color: var(--color-text-primary);
}
.ui-head__title:focus { outline: none; } /* FocusOnNavigate focuses the h1 */
.ui-head__metrics {
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5);
    margin-top: var(--space-1);
    min-height: 1.5em; /* keeps the header still while the numbers load */
}
.ui-head__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

.ui-metric { font-size: var(--font-base); color: var(--color-text-muted); white-space: nowrap; }
.ui-metric__value {
    margin-left: var(--space-1);
    font-weight: 600; color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.ui-metric__value.is-accent { color: var(--color-accent); }
.ui-metric.has-hint { cursor: help; }
.ui-metric.has-hint .ui-metric__label { text-decoration: underline dotted; text-underline-offset: 3px; }
a.ui-metric, a.ui-metric.has-hint { cursor: pointer; text-decoration: none; }
a.ui-metric:hover .ui-metric__value { text-decoration: underline; text-underline-offset: 3px; }

/* Metrics shown inside a tab panel rather than the page header. */
.ui-metrics { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }

/* One line under the header that says what the page is for. */
.ui-lead { margin: calc(-1 * var(--space-2)) 0 0; color: var(--color-text-muted); font-size: var(--font-sm); }

/* A small neutral label (kind, direction, was → becomes); --warn / --accent tint it. */
.ui-tag {
    display: inline-flex; align-items: center; gap: var(--space-1);
    height: 22px; padding: 0 var(--space-2);
    border: 1px solid var(--color-border); border-radius: var(--radius-chip);
    background: var(--color-bg-subtle); color: var(--color-text-secondary);
    font: 500 var(--font-xs) var(--font-family); white-space: nowrap;
}
.ui-tag--warn { color: var(--color-warning); border-color: var(--color-warning-border); background: var(--color-warning-dim); }
.ui-tag--accent { color: var(--color-accent); border-color: var(--color-accent-border); background: var(--color-accent-dim); }

/* Text for screen readers only. */
.ui-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- buttons ---------- */
.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    height: 32px; padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
    background: var(--color-bg-surface); color: var(--color-text-primary);
    font: 600 var(--font-base) var(--font-family);
    white-space: nowrap; cursor: pointer;
    text-decoration: none;
}
.ui-btn:hover:not(:disabled) { background: var(--color-bg-hover); }
.ui-btn:disabled { opacity: .55; cursor: default; }
.ui-btn.is-pressed { background: var(--color-bg-hover); border-color: var(--color-accent-border); }
.ui-btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-on-accent); }
.ui-btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.ui-btn--ghost { background: transparent; border-color: transparent; color: var(--color-text-secondary); }
.ui-btn--ghost:hover:not(:disabled) { color: var(--color-text-primary); }
.ui-btn--danger { color: var(--color-danger); border-color: var(--color-danger-border); background: var(--color-danger-dim); }
.ui-btn--danger:hover:not(:disabled) { background: var(--color-danger-dim); border-color: var(--color-danger); }
.ui-btn--icon { width: 32px; padding: 0; }
.ui-btn--sm { height: 28px; padding: 0 var(--space-2); font-size: var(--font-sm); }
.ui-btn--sm.ui-btn--icon { width: 28px; padding: 0; }

.ui-link {
    border: 0; background: none; padding: 0 var(--space-1);
    color: var(--color-text-muted); font: 500 var(--font-sm) var(--font-family); cursor: pointer;
}
.ui-link:hover { color: var(--color-text-primary); }

/* ---------- filter row ---------- */
.ui-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); position: relative; z-index: 5; }

.ui-search {
    display: inline-flex; align-items: center; gap: var(--space-2);
    width: 280px; max-width: 100%; height: 32px; padding: 0 var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg-surface); color: var(--color-text-muted);
}
.ui-search:focus-within { border-color: var(--color-accent-border); }
.ui-search i { font-size: 12px; }
.ui-search input {
    flex: 1; min-width: 0; height: 100%;
    border: 0; outline: 0; background: transparent;
    color: var(--color-text-primary); font: 500 var(--font-base) var(--font-family);
}
.ui-search input::placeholder { color: var(--color-text-muted); }

.ui-filter { position: relative; }
.ui-filter__count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full);
    display: inline-grid; place-items: center;
    background: var(--color-accent-dim); color: var(--color-accent);
    font: 700 var(--font-xs) var(--font-family);
}
.ui-pop-backdrop { position: fixed; inset: 0; z-index: 40; }
.ui-pop {
    position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: 41;
    width: 280px; max-width: calc(100vw - 2 * var(--space-4));
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown);
}
.ui-pop:focus { outline: none; }
.ui-field { display: flex; flex-direction: column; gap: var(--space-1); }
.ui-field__label { font: 600 var(--font-xs) var(--font-family); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
/* Dropdowns inside the popover, a form grid or a field row take the field's width
   and the same 32px height as text inputs. */
.ui-pop .pro-geo-dropdown, .ui-form-grid .pro-geo-dropdown, .ui-fields .pro-geo-dropdown { width: 100%; }
.ui-pop .pro-geo-btn, .ui-form-grid .pro-geo-btn, .ui-fields .pro-geo-btn {
    width: 100%; justify-content: flex-start; height: 32px; border-radius: var(--radius-md);
}
.ui-pop .pro-geo-btn .pro-geo-chevron, .ui-form-grid .pro-geo-btn .pro-geo-chevron,
.ui-fields .pro-geo-btn .pro-geo-chevron { margin-left: auto; }
.ui-pop .pro-geo-menu, .ui-form-grid .pro-geo-menu, .ui-fields .pro-geo-menu { left: 0; right: 0; min-width: 0; }
/* A period field stacks its From and To pickers at full width; the popover widens
   so DateInput's 304px calendar fits inside it. */
.ui-pop:has(.date-picker) { width: calc(304px + 2 * var(--space-4)); }
.ui-pop .date-picker-popover { max-width: calc(100vw - 4 * var(--space-4)); }
.ui-pop .date-picker { display: flex; width: 100%; }
.ui-pop .date-picker + .date-picker { margin-top: var(--space-2); }
.ui-pop .date-picker-trigger { width: 100%; height: 32px; background: var(--color-bg-surface); }

.ui-chip {
    display: inline-flex; align-items: center; height: 28px;
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-chip);
    background: var(--color-bg-surface); font-size: var(--font-sm);
    overflow: hidden;
}
.ui-chip__label { padding: 0 var(--space-2); color: var(--color-text-muted); border-right: 1px solid var(--color-border); height: 100%; display: flex; align-items: center; }
.ui-chip__value { padding: 0 var(--space-2); font-weight: 600; color: var(--color-text-primary); }
.ui-chip__remove {
    height: 100%; padding: 0 var(--space-2);
    border: 0; border-left: 1px solid var(--color-border); background: transparent;
    color: var(--color-text-muted); cursor: pointer;
}
.ui-chip__remove:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }

/* ---------- settings panel and field rows ---------- */
/* A settings form (rate providers): title, a grid of fields, a foot. Flat (style A):
   no frame or surface of its own. */
.ui-panel {
    display: flex; flex-direction: column; gap: var(--space-4);
    min-width: 0;
}
.ui-panel__title { margin: 0; font: 600 var(--font-md) var(--font-family); color: var(--color-text-primary); }
.ui-panel__foot { display: flex; justify-content: flex-end; gap: var(--space-2); }
.ui-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.ui-form-grid .form-input, .ui-fields .form-input { height: 32px; }
.ui-hint { margin: 0; font-size: var(--font-sm); color: var(--color-text-muted); }
/* Context pickers above an editor (routing: merchant, geo). */
.ui-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); position: relative; z-index: 5; }
.ui-fields .ui-field { width: 300px; max-width: 100%; }

/* Routing editor: add target on the left, save on the right. */
.routing-bar { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.ui-table th.has-hint { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }

/* ---------- sections ---------- */
/* A titled block inside a page (monitoring queues, analytics drill-downs). Style A:
   no frame; consecutive sections are split by a line (--color-border-strong, since
   --color-border barely shows on the light background) and --space-6 of air. */
.ui-section { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ui-section + .ui-section { padding-top: var(--space-6); border-top: 1px solid var(--color-border-strong); }
.ui-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.ui-section__title {
    display: inline-flex; align-items: center; gap: var(--space-2); margin: 0;
    font: 600 var(--font-md)/1.3 var(--font-family); color: var(--color-text-primary);
}
.ui-section__title > i { color: var(--color-text-muted); font-size: 0.9em; }
.ui-more { font: 500 var(--font-sm) var(--font-family); color: var(--color-text-muted); text-decoration: none; white-space: nowrap; }
.ui-more:hover { color: var(--color-text-primary); }

/* ---------- segmented switch ---------- */
/* The profile menu's .mini-seg (shell.css), sized to sit beside 32px header buttons. */
.mini-seg--md { padding: 3px; border-radius: var(--radius-control); }
.mini-seg--md .mini-seg__btn { height: 26px; padding: 0 var(--space-3); font-size: var(--font-sm); }

/* ---------- tabs (underline) ---------- */
/* The base line is an inset shadow, not a border the tabs overlap with a negative
   margin: that 1px overhang made the scroll container grow a vertical scrollbar. */
.ui-tabs { display: flex; gap: 2px; box-shadow: inset 0 -1px 0 var(--color-border); overflow-x: auto; overflow-y: hidden; }
.ui-tab {
    position: relative; /* containing block for the error dot and sr-only text */
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    border: 0; border-bottom: 2px solid transparent;
    background: none; color: var(--color-text-secondary);
    font: 500 var(--font-base) var(--font-family); white-space: nowrap; cursor: pointer;
}
.ui-tab:hover { color: var(--color-text-primary); }
.ui-tab[aria-selected="true"], .ui-tab[aria-pressed="true"] { color: var(--color-text-primary); border-bottom-color: var(--color-accent); font-weight: 600; }
/* UiTabs: a count after the label, "Methods 12". */
.ui-tab__count { font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* Journal count: "…" loading and "50+" more than shown are plain muted text; only the
   failed state "!" is a red pill. */
.ui-tab__count.ui-tab__count--err {
    display: inline-block; padding: 0 6px; border-radius: var(--radius-full);
    font-size: 11px; line-height: 18px;
    background: var(--color-danger-dim); color: var(--color-danger);
}
/* UiTabList HasError: a save on that tab failed. */
.ui-tab__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-danger); }

/* ---------- two columns: summary + content ---------- */
/* Detail pages: the short part (profile, balance) on the left stays in view while the
   long part on the right scrolls; a long left column scrolls on its own. One column
   at 1100px and below. */
.ui-split {
    display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: var(--space-6); align-items: start;
}
.ui-split__aside {
    position: sticky; top: var(--space-4);
    max-height: calc(100vh - 2 * var(--space-4));
    max-height: calc(100dvh - 2 * var(--space-4));
    overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: var(--space-5);
    min-width: 0;
}
.ui-split__main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
@media (max-width: 1100px) {
    .ui-split { grid-template-columns: minmax(0, 1fr); }
    .ui-split__aside { position: static; max-height: none; overflow: visible; }
}

/* ---------- side panel ---------- */
/* UiDialog Side: a detail panel over the page's right edge, one layout at every width (Analytics
   drill-down): the page under it does not move. On .modal-backdrop: a lighter veil
   without blur, so the table stays readable beside the panel. */
.modal-backdrop.ui-sidepanel-backdrop {
    justify-content: flex-end; align-items: stretch; padding: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    animation: fade-in var(--transition) ease;
}
.ui-sidepanel {
    display: flex; flex-direction: column;
    width: min(640px, 100vw); height: 100%;
    background: var(--color-bg-surface);
    border-radius: var(--radius-overlay) 0 0 var(--radius-overlay);
    box-shadow: var(--shadow-modal);
    animation: ui-sidepanel-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ui-sidepanel:focus { outline: none; } /* focused by code on open; the controls inside keep their rings */
.ui-sidepanel__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-strong);
}
.ui-sidepanel__title {
    display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; min-width: 0;
    font: 600 var(--font-md)/1.3 var(--font-family); color: var(--color-text-primary); overflow-wrap: anywhere;
}
.ui-sidepanel__title > i { color: var(--color-text-muted); font-size: 0.9em; }
.ui-sidepanel__body {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: var(--space-5);
    padding: var(--space-5);
}
.ui-sidepanel__footer {
    position: sticky; bottom: 0;
    display: flex; justify-content: flex-end; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-strong);
    background: var(--color-bg-surface);
}
@keyframes ui-sidepanel-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ui-sidepanel { animation: none; } }

/* UiDialog Class="ui-dialog--640": a centered dialog with a table inside (card history). */
.glass-modal.ui-dialog--640 { max-width: min(640px, calc(100vw - 2 * var(--space-4))); }

/* UiDialog Class="ui-receipt": a receipt image, as large as the screen allows. */
.glass-modal.ui-receipt { width: auto; max-width: min(960px, calc(100vw - 2 * var(--space-4))); }
.ui-receipt > .gm-body { display: flex; flex-direction: column; align-items: center; }
.ui-receipt > .gm-body > img {
    display: block; max-width: 100%; max-height: calc(90vh - 120px); max-height: calc(90dvh - 120px);
    object-fit: contain; border-radius: var(--radius-control);
}
/* The receipt thumbnail in the payout window is a button (keyboard opens the viewer). */
button.receipt-preview { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; }
button.receipt-preview:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---------- detail dialog ---------- */
/* UiDialog Class="ui-detail" (a payment, a payout, a webhook, an API call): the head and
   the foot stay, the body scrolls. Body (style A): amount and status large on top, the
   rest one UiDl in two columns, then timeline / JSON / proofs / actions as .ui-section
   blocks split by a line. No cards. The foot's Close button carries data-autofocus, so
   opening does not scroll a long body down to its first control. */
.glass-modal.ui-detail {
    max-width: min(880px, calc(100vw - 2 * var(--space-4)));
    max-height: 90vh; max-height: 90dvh;
    display: flex; flex-direction: column;
}
.ui-detail > .gm-header {
    flex-shrink: 0; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-strong);
}
.ui-detail > .gm-header .gm-title { min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
.ui-detail > .gm-body {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: var(--space-5);
    padding: var(--space-5);
}
.ui-detail > .gm-footer {
    flex-shrink: 0; align-items: center;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border-strong);
}
.ui-detail__spacer { flex: 1; }
.ui-detail__head {
    display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
}
.ui-detail__amount {
    font: 600 26px/1.15 var(--font-family); letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums; color: var(--color-text-primary);
}
.ui-detail__sub { margin-top: var(--space-1); font-size: var(--font-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ui-detail__status { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); min-width: 0; }
.ui-detail__badges { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.ui-detail__meta { font-size: var(--font-sm); color: var(--color-text-muted); text-align: right; }
.ui-detail__flag {
    display: inline-block; width: 20px; height: 15px; margin-right: var(--space-2); vertical-align: -2px;
    border-radius: var(--radius-chip); object-fit: cover; border: 1px solid var(--color-border);
}
/* A labelled block inside a section (a JSON payload under the provider rows). */
.ui-detail__label { margin-bottom: var(--space-2); font-size: var(--font-sm); color: var(--color-text-muted); }
.ui-detail .admin-action-zone, .ui-detail .admin-danger-zone { margin-top: 0; }
.ui-detail__actions { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 640px) {
    .ui-detail__status { align-items: flex-start; }
    .ui-detail__badges { justify-content: flex-start; }
    .ui-detail__meta { text-align: left; }
}

/* ---------- term — value list (UiDl) ---------- */
.ui-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0; }
.ui-dl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-dl__row { display: grid; grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); gap: var(--space-3); align-items: baseline; min-width: 0; }
.ui-dl__row > dt { margin: 0; font-size: var(--font-sm); color: var(--color-text-muted); }
/* :where() keeps the colour at zero specificity, so a class on the dd (.ui-mono,
   .text-danger, .admin-amount-positive…) wins. */
:where(.ui-dl__row) > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ui-dl--2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- message thread ---------- */
/* Messages scroll inside the thread and the reply box stays at its bottom. The height
   follows the dynamic viewport (dvh: the iOS toolbar and keyboard shrink it); the
   container sets --ui-thread-offset to the space its own header and padding take. */
.ui-thread {
    display: flex; flex-direction: column; min-height: 0;
    max-height: calc(100vh - var(--ui-thread-offset, 16rem));
    max-height: calc(100dvh - var(--ui-thread-offset, 16rem));
}
.ui-thread__messages {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-3) 0;
}
.ui-thread__composer {
    flex: none; position: sticky; bottom: 0;
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-3) 0 max(var(--space-3), env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    background: var(--ui-thread-bg, var(--color-bg-surface));
}
.ui-thread__messages:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ui-thread__empty { margin: auto 0; text-align: center; font-size: var(--font-sm); color: var(--color-text-muted); }
/* The reply box: the text on top, attach on the left and send on the right under it. */
.ui-thread__composer > .mini-seg { align-self: flex-start; }
.ui-thread__composer > textarea { resize: vertical; min-height: 64px; max-height: 30vh; max-height: 30dvh; }
.ui-thread__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.ui-thread__attach { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }
.ui-thread__attach > label { margin: 0; cursor: pointer; }
.ui-thread__file { font-size: var(--font-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }

/* UiDialog takes focus itself when it has nothing better to focus (always in conversation
   windows); the container is not a control, so no ring around the whole window. */
[role="dialog"][tabindex="-1"]:focus { outline: none; }

/* UiDialog Class="ui-detail ui-detail--thread": a conversation window. Fixed height: the
   details (UiThreadInfo) sit on top with a scroll of their own, the action rows under them,
   and the thread (or the tab panel holding it) fills the rest, so on a normal screen the
   reply box sits at the window's bottom. The feed never shrinks below 150px: on a short
   screen (a phone in landscape) the thread box may get less room, the feed and the reply
   box then run past it, and the body scrolls to them (the thread is the body's last item,
   so nothing is covered). The reply box is not sticky there: it would cover the feed. The
   body's bottom padding moves into the reply box (safe area) or the read-only thread. */
.glass-modal.ui-detail--thread { height: 90vh; height: 90dvh; }
.ui-detail--thread > .gm-body { overflow-y: auto; gap: var(--space-4); padding-bottom: 0; }
.ui-detail--thread > .gm-body > :not(.ui-thread):not(.ui-thread-panel) { flex: none; }
.ui-detail--thread > .gm-body > .ui-thread,
.ui-detail--thread .ui-thread-panel > .ui-thread { flex: 1 1 auto; max-height: none; }
.ui-detail--thread .ui-thread-panel:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ui-detail--thread .ui-thread__messages { min-height: 150px; }
.ui-detail--thread .ui-thread__composer { position: static; }
.ui-detail--thread .ui-thread--readonly { padding-bottom: var(--space-5); }

.ui-thread-info { flex: none; min-height: 0; }
.ui-thread-info__toggle { display: none; }
.ui-thread-info__toggle > i { transition: transform .15s; }
.ui-thread-info.is-open .ui-thread-info__toggle > i { transform: rotate(180deg); }
.ui-thread-info__body {
    display: flex; flex-direction: column; gap: var(--space-4);
    max-height: max(8rem, min(40vh, 100vh - 420px));
    max-height: max(8rem, min(40dvh, 100dvh - 420px));
    overflow-y: auto; overscroll-behavior: contain;
}
.ui-thread-info__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-thread-info__shot { display: inline-block; align-self: flex-start; }
.ui-thread-info__shot > img {
    display: block; max-width: 100%; max-height: 160px;
    border-radius: var(--radius-control); border: 1px solid var(--color-border);
}
/* Action rows (status, claim, resolve, reassign) and the resolve note under them: outside
   UiThreadInfo, so they never fold away. */
.ui-thread-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ui-thread-actions .form-input { flex: 1 1 220px; max-width: 320px; }
.ui-thread-actions__label { font-size: var(--font-sm); color: var(--color-text-muted); }
.ui-thread-actions .pro-geo-dropdown { min-width: 180px; }
.ui-thread-resolve { display: flex; flex-direction: column; gap: var(--space-2); }
/* Narrow or short screens: the details fold behind the toggle, the thread gets the room. */
@media (max-width: 640px), (max-height: 560px) {
    .ui-thread-info__toggle { display: inline-flex; }
    .ui-thread-info:not(.is-open) > .ui-thread-info__body { display: none; }
    .ui-thread-info__body { margin-top: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) { .ui-thread-info__toggle > i { transition: none; } }

/* ---------- table (no frame) ---------- */
.ui-table-wrap { overflow-x: auto; min-width: 0; transition: opacity .15s; }
/* A reload is under way: the rows are about to change, dim them and block clicks. */
.ui-table-wrap.is-busy { opacity: .5; pointer-events: none; }
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--font-base); font-variant-numeric: tabular-nums; }
.ui-table th {
    text-align: left; white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font: 600 var(--font-xs) var(--font-family); text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-text-muted);
}
.ui-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
    vertical-align: middle;
}
.ui-table tbody tr.is-clickable { cursor: pointer; }
/* A sortable header (merchant reports): the whole label is a button. */
.ui-sort {
    display: inline-flex; align-items: center; gap: var(--space-1);
    border: 0; padding: 0; background: none; cursor: pointer;
    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.ui-sort > i { font-size: 10px; opacity: .45; }
.ui-sort:hover, .ui-sort.is-sorted { color: var(--color-text-primary); }
.ui-sort.is-sorted > i { opacity: 1; color: var(--color-accent); }
.ui-table tbody tr:hover > td { background: var(--color-bg-row-hover); }
.ui-table .num { text-align: right; white-space: nowrap; }
.ui-table .mono, .ui-mono { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: var(--font-sm); color: var(--color-text-secondary); }
.ui-table .muted { color: var(--color-text-muted); }
.ui-table .sub { display: block; margin-top: 2px; font-size: var(--font-sm); color: var(--color-text-muted); }
.ui-table .sub.is-warn { color: var(--color-warning); }
.ui-table .sub.is-bad { color: var(--color-danger); }
/* Signed amounts (admin.css .amt-pos / .amt-neg) keep their color over the cell's. */
.ui-table td.amt-pos { color: var(--color-success); }
.ui-table td.amt-neg { color: var(--color-danger); }
/* Row buttons (approve / reject / cancel) and a short note beside them. */
.ui-row-actions { display: inline-flex; align-items: center; gap: var(--space-1); }
.ui-table .ui-note { font-size: var(--font-xs); white-space: nowrap; }
.ui-table .actions { text-align: right; white-space: nowrap; }
.ui-table .nowrap { white-space: nowrap; }
.ui-table .is-break { word-break: break-all; }
/* Wide operation lists (pay-ins, pay-outs): tighter cells, long headers may wrap,
   short names stay on one line. */
.ui-table--dense th, .ui-table--dense th.num { white-space: normal; vertical-align: bottom; }
.ui-table--dense th, .ui-table--dense td { padding-left: var(--space-2); padding-right: var(--space-2); }
.ui-table--dense td { white-space: nowrap; }
.ui-table.ui-table--dense .form-input-sm { width: 72px; }
.ui-table td.actions > .d-flex { justify-content: flex-end; } /* AdminCardActions' flex root */
/* A totals row under the data. */
.ui-table tfoot td { font-weight: 600; border-top: 1px solid var(--color-border-strong); border-bottom: 0; }

/* An editable table: dropdown menus must not be clipped, inputs stay compact. */
.ui-table-wrap.is-editor { overflow: visible; }
.ui-table .pro-geo-dropdown { min-width: 150px; }
.ui-table .pro-geo-btn { width: 100%; height: 28px; justify-content: flex-start; border-radius: var(--radius-md); }
.ui-table .pro-geo-btn .pro-geo-chevron { margin-left: auto; }
.ui-table .form-input-sm { width: 96px; height: 28px; padding-top: 0; padding-bottom: 0; }
.ui-table .ui-input-name { width: 100%; min-width: 120px; }
/* The rail cell: an inline editor or a clickable value. */
.ui-inline-edit { display: inline-flex; align-items: center; gap: var(--space-1); }
.ui-cell-btn {
    border: 0; padding: 0; background: none; cursor: pointer;
    font: inherit; color: inherit; text-align: left;
}
.ui-cell-btn:hover .mono, .ui-cell-btn:hover { text-decoration: underline dotted; text-underline-offset: 3px; }

/* A nested table (expanded row) sits on a quiet band. */
.ui-table td.nested { padding: var(--space-3) var(--space-4); background: var(--color-bg-subtle); }
.ui-table tr:hover > td.nested { background: var(--color-bg-subtle); }

/* Trader pool (/admin/cards, Traders tab): nine columns must fit 1440, so the
   long "…, USDT" headers may wrap and the name is clipped. */
.tp-table th.num { white-space: normal; }
.tp-table .tp-name {
    display: inline-block; max-width: 160px; vertical-align: middle;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-table .tp-range { white-space: nowrap; }
.tp-table .tp-reasons { min-width: 140px; }
.tp-table .tp-release { margin-top: var(--space-1); }
/* The trader whose cards are open in the side panel. */
.tp-table tbody tr.is-selected > td { background: var(--color-bg-row-hover); }
/* Side panel: "shown N of M" and "more" under the trader's cards. */
.tp-more { flex-wrap: wrap; }

/* ---------- cascade moderation cards (CascadeActionCard) ---------- */
.mod-list { display: flex; flex-direction: column; gap: var(--space-3); transition: opacity .15s; }
.mod-list.is-busy { opacity: .5; pointer-events: none; }
.mod-card {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border); border-left-width: 3px; border-radius: var(--radius-md);
    background: var(--color-bg-surface);
}
.mod-card--pending { border-left-color: var(--color-warning); }
.mod-card--approved { border-left-color: var(--color-success); }
.mod-card--rejected { border-left-color: var(--color-danger); }
.mod-card__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mod-card__dispute { font-weight: 600; color: var(--color-text-primary); }
.mod-card__time { margin-left: auto; font-size: var(--font-xs); color: var(--color-text-muted); white-space: nowrap; }
.mod-card__transition { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.mod-card__summary { color: var(--color-text-primary); }
.mod-card__note { font-size: var(--font-sm); color: var(--color-text-muted); }
.mod-card__failure { font-size: var(--font-sm); color: var(--color-danger); }
.mod-card__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }
.mod-card__reason { flex: 1; min-width: 200px; }

/* ---------- admin dispute detail ---------- */
.dsp-timeline .alert { margin-bottom: var(--space-3); }
.dsp-timeline .ui-tag { margin-left: var(--space-2); }

/* ---------- alert strip ---------- */
.ui-alert {
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
}
.ui-alert--warn { background: var(--color-warning-dim); border: 1px solid var(--color-warning-border); }
.ui-alert--warn > i { color: var(--color-warning); }
.ui-alert b { font-weight: 600; color: var(--color-text-primary); }
.ui-alert span { color: var(--color-text-secondary); }
.ui-alert a { margin-left: auto; font-weight: 600; color: var(--color-text-primary); text-decoration: none; border-bottom: 1px solid var(--color-border-strong); }
.ui-alert a:hover { border-bottom-color: var(--color-text-primary); }

/* ---------- charts (UiBarChart, UiLineChart) ---------- */
.ui-chart { position: relative; }
.ui-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ui-chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.ui-chart__axis { font: 500 11px var(--font-family); fill: var(--color-text-muted); }
.ui-chart__bar { fill: var(--color-accent); }
.ui-chart__rest { fill: var(--chart-rest); }
.ui-chart__line { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; }
.ui-chart__dot { fill: var(--color-accent); stroke: var(--color-bg-base, var(--color-bg-surface)); stroke-width: 2; }
.ui-chart__hit { fill: transparent; }
.ui-chart__hit:hover { fill: var(--color-text-primary); fill-opacity: .04; }
.ui-chart__tip {
    position: absolute; top: 0; transform: translateX(8px); z-index: 3; pointer-events: none;
    display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3);
    background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-overlay);
    box-shadow: var(--shadow-dropdown); font-size: var(--font-sm); white-space: nowrap; color: var(--color-text-primary);
}
.ui-chart__tip.is-left { transform: translateX(calc(-100% - 8px)); }
.ui-chart__tip span { color: var(--color-text-secondary); }

/* ---------- change vs previous period (UiDelta) ---------- */
.ui-delta { font-size: var(--font-sm); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-delta--up { color: var(--color-success); }
.ui-delta--down { color: var(--color-danger); }
.ui-delta--flat { color: var(--color-text-muted); font-weight: 500; }
.ui-delta__suffix { margin-left: var(--space-1); font-weight: 400; color: var(--color-text-muted); }

/* ---------- admin dashboard (D2) ---------- */
.dash-period-line { font-size: var(--font-base); color: var(--color-text-muted); }
.dash-period .ui-pop { left: auto; right: 0; }
.dash-period__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.dash-body { display: flex; flex-direction: column; gap: var(--space-5); transition: opacity .15s; }
.dash-body.is-busy { opacity: .5; pointer-events: none; }
.dash-heroes {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.dash-hero { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-4) var(--space-5) var(--space-3); border-left: 1px solid var(--color-border); }
.dash-hero:first-child { border-left: 0; padding-left: 0; }
.dash-hero__label { font-size: var(--font-sm); color: var(--color-text-muted); }
.dash-hero__value { font: 600 26px/1.15 var(--font-family); font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.dash-hero__value small { margin-left: var(--space-1); font: 500 var(--font-sm) var(--font-family); color: var(--color-text-muted); }
.dash-hero__spark { height: 34px; margin-top: var(--space-1); }
.dash-hero__spark .sparkline-svg { height: 34px; vector-effect: non-scaling-stroke; }
.dash-hero__spark polyline { vector-effect: non-scaling-stroke; }
.dash-tab-badge {
    margin-left: var(--space-1); padding: 1px 7px; border-radius: var(--radius-full);
    background: var(--color-warning-dim); color: var(--color-warning); font: 600 var(--font-xs) var(--font-family);
}
.dash-panel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.dash-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-6); align-items: start; }
.dash-charts { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.dash-chart { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dash-chart figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.dash-chart figcaption b { font: 600 var(--font-base) var(--font-family); color: var(--color-text-primary); }
.dash-legend { display: inline-flex; gap: var(--space-3); font-size: var(--font-xs); color: var(--color-text-secondary); }
.dash-legend i { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-chip); margin-right: 6px; vertical-align: -1px; }
.dash-legend i.is-part { background: var(--color-accent); }
.dash-legend i.is-rest { background: var(--chart-rest); }
.dash-mt { width: 100%; border-collapse: collapse; font-size: var(--font-base); font-variant-numeric: tabular-nums; }
.dash-mt th {
    text-align: right; padding: 6px 0 8px var(--space-3); border-bottom: 1px solid var(--color-border);
    font: 600 var(--font-xs) var(--font-family); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); white-space: nowrap;
}
.dash-mt th:first-child, .dash-mt td:first-child { text-align: left; padding-left: 0; }
.dash-mt td { padding: var(--space-2) 0 var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-subtle); text-align: right; white-space: nowrap; }
.dash-mt td:first-child { color: var(--color-text-secondary); white-space: normal; }
.dash-mt td.cur { font-weight: 600; color: var(--color-text-primary); }
.dash-mt td.cur.is-warn { color: var(--color-warning); }
.dash-mt td.prev { color: var(--color-text-muted); }
.dash-mt tr.is-calc td { border-bottom: 0; padding-top: 4px; padding-bottom: 4px; }
.dash-mt tr.is-total td { border-top: 1px solid var(--color-border-strong); border-bottom: 0; font-weight: 600; color: var(--color-text-primary); padding-top: 9px; }
.dash-mt tr.is-gap td { padding-top: var(--space-4); }
.dash-op { display: inline-block; width: 1.2em; font-family: var(--font-mono, ui-monospace, Menlo, monospace); color: var(--color-text-muted); }
.dash-note { margin-top: var(--space-3); }
.dash-market {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr);
    border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-surface);
}
.dash-market > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: var(--space-3) var(--space-4); border-left: 1px solid var(--color-border); }
.dash-market > div:first-child { border-left: 0; }
.dash-market__label { font-size: var(--font-xs); color: var(--color-text-muted); }
.dash-market__value { font: 600 18px var(--font-family); font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.dash-depth { display: flex; flex-direction: column; gap: 3px; }
.dash-depth__row { display: grid; grid-template-columns: 64px 1fr 80px; align-items: center; gap: var(--space-2); font: 500 var(--font-xs) var(--font-mono, ui-monospace, Menlo, monospace); color: var(--color-text-secondary); }
.dash-depth__row .num { text-align: right; }
.dash-depth__bar { height: 8px; border-radius: 0 var(--radius-chip) var(--radius-chip) 0; opacity: .55; }
.dash-depth__bar.is-bid { background: var(--color-success); }
.dash-depth__bar.is-ask { background: var(--color-danger); }
/* "Hide sums": blur every money figure on the page (numbers, money charts, sparklines). */
.dash.is-hidden-sums .money { filter: blur(6px); user-select: none; }
@media (max-width: 1100px) {
    .dash-sec { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .dash-heroes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-hero:nth-child(3) { border-left: 0; padding-left: 0; }
    .dash-market { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dash-market__book { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--color-border); }
}

/* ---------- support dashboard ---------- */
/* "Needs attention" strip: warning tint with count pills, or one plain calm line (no frame) when all are zero. */
.sdash-attn {
    display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap;
    color: var(--color-text-secondary); font-size: var(--font-base);
}
.sdash-attn > i { color: var(--color-success); }
.sdash-attn > b { font-weight: 600; color: var(--color-text-primary); }
.sdash-attn.is-alert {
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-control);
    border: 1px solid var(--color-warning-border); background: var(--color-warning-dim);
}
.sdash-attn.is-alert > i { color: var(--color-warning); }
.sdash-attn__items { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sdash-pill {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 3px 10px; border-radius: var(--radius-full);
    border: 1px solid var(--color-warning-border); background: var(--color-bg-surface);
    font-size: var(--font-sm); color: var(--color-text-primary); text-decoration: none;
}
.sdash-pill b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-warning); }
.sdash-pill.is-bad { border-color: var(--color-danger-border); }
.sdash-pill.is-bad b { color: var(--color-danger); }
a.sdash-pill:hover { border-color: var(--color-text-muted); }
/* Queue cards: total, a bar split by status, a link row per status. */
/* Style A: the two queues sit side by side split by a vertical line, the chart below
   them is split off by a horizontal one (the panels themselves have no frame). */
.sdash-queues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.sdash-q { gap: var(--space-3); min-width: 0; }
.sdash-q + .sdash-q { padding-left: var(--space-6); border-left: 1px solid var(--color-border-strong); }
.sdash-queues + .sdash-chart { padding-top: var(--space-6); border-top: 1px solid var(--color-border-strong); }
.sdash-q__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.sdash-q__total { margin-top: var(--space-1); font: 600 26px/1.15 var(--font-family); font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.sdash-q__total small { margin-left: var(--space-2); font: 500 var(--font-sm) var(--font-family); color: var(--color-text-muted); }
.sdash-bar { display: flex; gap: 2px; height: 8px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-bg-muted); }
.sdash-bar > span { flex: 0 1 0; min-width: 4px; }
.sdash-rows { display: flex; flex-direction: column; }
.sdash-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2); margin: 0 calc(-1 * var(--space-2));
    border-top: 1px solid var(--color-border-subtle); border-radius: var(--radius-control);
    color: var(--color-text-secondary); text-decoration: none;
}
.sdash-row:first-child { border-top: 0; }
.sdash-row:hover { background: var(--color-bg-muted); color: var(--color-text-primary); }
.sdash-row.is-zero { color: var(--color-text-muted); }
.sdash-row__label { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.sdash-row__value { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.sdash-row.is-zero .sdash-row__value { font-weight: 500; color: var(--color-text-muted); }
.sdash-row__value > i { font-size: 10px; color: var(--color-text-muted); }
.sdash-sw { width: 10px; height: 10px; border-radius: var(--radius-chip); flex: none; }
.sdash .is-s1 { background: var(--color-accent); }
.sdash .is-s2 { background: var(--color-series-2); }
.sdash .is-s3 { background: var(--color-series-3); }
.sdash .is-s4 { background: var(--color-series-4); }
/* Chart card: title and period on the left, the period controls on the right. */
.sdash-chart { gap: var(--space-3); min-width: 0; }
/* UiBarChart is drawn for a ~560px column; stretched across a full-width card its axis
   text scales with it. Cap the chart so labels stay near their designed size. */
.sdash-chart .ui-chart { max-width: 720px; }
.sdash-chart__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.sdash-chart__title { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.sdash-chart__ctl { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; }
.sdash-chart__totals b { margin-left: var(--space-1); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
@media (max-width: 900px) {
    .sdash-queues { grid-template-columns: 1fr; }
    .sdash-q + .sdash-q { padding-left: 0; border-left: 0; padding-top: var(--space-6); border-top: 1px solid var(--color-border-strong); }
}

/* A link in the first cell of a clickable row: keyboard access to the same target. */
.ui-row-link { color: inherit; text-decoration: none; font-weight: 500; }
.ui-row-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Infrastructure: active / total methods per geo above the table. */
.infra-geo-counts .ui-metric { display: inline-flex; align-items: center; gap: var(--space-2); }

/* User detail page (sections are .admin-card). */
.admin-detail-page .ud-note { margin-top: var(--space-2); }
.admin-detail-page .ud-inline { margin-left: 6px; }
.admin-detail-page .ud-rate-input { width: 90px; }
.admin-detail-page .ud-banner { margin-bottom: var(--space-3); }
/* Profile: the masked key shrinks with the left column instead of overflowing it. */
.admin-detail-page .ui-dl .admin-key-value { min-width: 0; }
/* Balance per geo: the geo and its "active" badge over its rows. */
.admin-detail-page .ud-geo-balance { display: flex; flex-direction: column; gap: var(--space-2); }
.admin-detail-page .ud-geo-balance__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* Spreads tab: the default spread line on top, wrapping on narrow screens. */
.admin-detail-page .ud-spreads-head { flex-wrap: wrap; justify-content: flex-start; }
.admin-detail-page .ud-defaults { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.admin-detail-page .ud-defaults-field { display: inline-flex; align-items: center; gap: 6px; }
.admin-detail-page .ud-inherited { margin-left: 4px; font-size: var(--font-xs); }
/* Row edit under the edited method: fields wrap, the table keeps its width. */
.admin-detail-page .ud-edit-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.admin-detail-page .ud-edit-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-detail-page .ud-edit-field .form-label { margin: 0; }
.admin-detail-page .ud-edit-field select.form-input-sm { width: 170px; max-width: 100%; }
.admin-detail-page .ud-edit-ctl { display: inline-flex; align-items: center; gap: var(--space-1); }
.admin-detail-page .ud-edit-actions { display: inline-flex; gap: var(--space-2); margin-left: auto; }
.admin-detail-page .ud-stale { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- settings (SettingsPage, shared by admin / trader / support) ---------- */
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.set-col { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.set-row--plain { padding: 0; border-bottom: 0; }
.set-row:last-child { border-bottom: 0; padding-bottom: 0; }
.set-row__text { flex: 1; min-width: 0; }
.set-row__label { font-size: var(--font-base); color: var(--color-text-secondary); }
.set-row__hint { margin-top: 2px; font-size: var(--font-sm); color: var(--color-text-muted); }
.set-locked { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-base); color: var(--color-text-muted); }
.set-hint { margin-bottom: var(--space-3); font-size: var(--font-sm); color: var(--color-text-muted); }
.set-inline { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.set-input-narrow { width: 120px; }
.set-unit { font-size: var(--font-base); color: var(--color-text-secondary); }
@media (max-width: 900px) { .set-grid { grid-template-columns: 1fr; } }

/* System log detail: level, status, path and time on one line. */
.log-detail__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }

/* ---------- status dot ---------- */
.ui-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.ui-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ui-status--ok { color: var(--color-success); }
.ui-status--warn { color: var(--color-warning); }
.ui-status--bad { color: var(--color-danger); }
.ui-status--info { color: var(--color-info); }
.ui-status--accent { color: var(--color-accent); }
.ui-status--mute { color: var(--color-text-muted); }

/* ---------- empty / error ---------- */
.ui-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 160px; padding: var(--space-6);
    color: var(--color-text-muted); text-align: center;
}
.ui-empty > i { font-size: 22px; opacity: .6; }
.ui-empty.is-error > i { color: var(--color-danger); opacity: 1; }
.ui-empty.is-compact { min-height: 96px; padding: var(--space-4); }

/* ---------- pagination inside a converted page ---------- */
.ui-page .pg-pagination { padding: 0; border: 0; background: none; }

/* ---------- focus ---------- */
/* Every control on a converted page (the old .pro root carried this rule). */
.ui-page a:focus-visible, .ui-page button:focus-visible,
.ui-page input:focus-visible, .ui-page select:focus-visible,
.ui-btn:focus-visible, .ui-link:focus-visible, .ui-chip__remove:focus-visible,
.ui-tab:focus-visible, .ui-search:focus-within {
    outline: 2px solid var(--color-accent); outline-offset: 2px;
}
.ui-search:focus-within { outline-offset: 0; }
/* Inset: the strip scrolls (overflow hidden on the y axis), which would clip an outer ring;
   -4px keeps the 2px ring clear of the 2px active underline. Scoped to the strip so it
   outranks `.ui-page button:focus-visible` on pages. */
.ui-tabs > .ui-tab:focus-visible { outline-offset: -4px; }

@media (prefers-reduced-motion: reduce) { .ui-table-wrap, .mod-list, .dash-body { transition: none; } }

@media (max-width: 720px) {
    /* A phone cannot fit an editable table: scroll it inside its wrapper again. */
    .ui-table-wrap.is-editor { overflow-x: auto; }
    .ui-search { width: 100%; }
    .ui-head__actions { width: 100%; }
}

/* ---------- simulation (test circuit) ---------- */
/* Scenario buttons in the mockup's tones: payment green, other amount amber (danger is --danger). */
.ui-btn--ok { color: var(--color-success); border-color: var(--color-success-border); background: var(--color-success-dim); }
.ui-btn--ok:hover:not(:disabled) { border-color: var(--color-success); background: var(--color-success-dim); }
.ui-btn--warn { color: var(--color-warning); border-color: var(--color-warning-border); background: transparent; }
.ui-btn--warn:hover:not(:disabled) { border-color: var(--color-warning); background: var(--color-warning-dim); }
/* Queue (wide) beside the journal; one column at 1100px and below. */
.sim-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: var(--space-6); align-items: start; }
.sim-col { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
@media (max-width: 1100px) {
    .sim-cols { grid-template-columns: minmax(0, 1fr); }
    .sim-col + .sim-col { padding-top: var(--space-6); border-top: 1px solid var(--color-border-strong); }
}
.sim-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sim-subtitle { margin: 0; font: 600 var(--font-base) var(--font-family); color: var(--color-text-primary); }
.sim-delay { display: inline-flex; align-items: center; gap: var(--space-2); }
.sim-delay .form-input-sm { width: 72px; height: 28px; }
.sim-inline-form {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-subtle);
}
.sim-inline-form label { color: var(--color-text-secondary); font-size: var(--font-sm); }
.sim-inline-form .form-input-sm { width: 120px; height: 28px; }
.sim-inline-form .sim-inline-form__wide { width: 280px; max-width: 100%; }
.sim-journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sim-journal__row {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-2) 0; border-top: 1px solid var(--color-border-subtle);
}
.sim-journal__time { flex: none; padding-top: 1px; color: var(--color-text-muted); }
.sim-journal__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; word-break: break-word; }
.sim-journal__sub { font-size: var(--font-sm); color: var(--color-text-muted); }
.sim-journal__row > .badge { flex: none; }