/* ============================================================
   Atlas — Admin cabinet scoped styles
   Loaded AFTER app.css + merchant.css; only Admin pages use these.
   Aesthetic direction: operational fintech, dark-first, neon-lime
   accents on glass surfaces. Tabular numerals everywhere, no
   editorial serifs, no cream backgrounds — this is a control panel.
   ============================================================ */

/* ---------- 1. Page entrance + table row stagger ---------- */
.pro .pg-stats { animation: admPageFadeUp 380ms cubic-bezier(.16,1,.3,1) both; }
.pro .pg-toolbar { animation: admPageFadeUp 380ms cubic-bezier(.16,1,.3,1) 60ms both; }
.pro .act-tabs-wrap { animation: admPageFadeUp 380ms cubic-bezier(.16,1,.3,1) 90ms both; }
.pro .pg-table-wrap,
.pro .act-table-wrap { animation: admPageFadeUp 380ms cubic-bezier(.16,1,.3,1) 120ms both; }
/* The "both" fill-mode pins translateY(0) on each row above, which silently
   creates a stacking context. That clamped the dropdown/date-picker popovers
   (which open out of the toolbar) under the table's sticky thead (z=1 in
   that own stacking context). Lifting .pg-toolbar's stacking context above
   .pg-table-wrap restores the expected paint order. */
.pro .pg-toolbar { position: relative; z-index: 20; }
.pro .pg-table-wrap,
.pro .act-table-wrap { position: relative; z-index: 1; }

.pro .pg-table tbody tr { animation: admRowIn 320ms cubic-bezier(.16,1,.3,1) both; }
.pro .pg-table tbody tr:nth-child(1) { animation-delay: 140ms; }
.pro .pg-table tbody tr:nth-child(2) { animation-delay: 165ms; }
.pro .pg-table tbody tr:nth-child(3) { animation-delay: 190ms; }
.pro .pg-table tbody tr:nth-child(4) { animation-delay: 215ms; }
.pro .pg-table tbody tr:nth-child(5) { animation-delay: 240ms; }
.pro .pg-table tbody tr:nth-child(6) { animation-delay: 260ms; }
.pro .pg-table tbody tr:nth-child(7) { animation-delay: 280ms; }
.pro .pg-table tbody tr:nth-child(8) { animation-delay: 295ms; }
.pro .pg-table tbody tr:nth-child(9) { animation-delay: 310ms; }
.pro .pg-table tbody tr:nth-child(n+10) { animation-delay: 320ms; }

@keyframes admPageFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes admRowIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .pro .pg-stats,
    .pro .pg-toolbar,
    .pro .act-tabs-wrap,
    .pro .pg-table-wrap,
    .pro .act-table-wrap,
    .pro .pg-table tbody tr { animation: none !important; }
}

/* ---------- 2. Stat cards: tabular nums + lift ---------- */
.pro .pg-stat-num { font-variant-numeric: tabular-nums; }
.pro .pg-stat { transition: background 180ms ease, transform 180ms ease; }
.pro .pg-stat:hover {
    background: rgba(255, 255, 255, 0.02);
}
[data-theme="light"] .pro .pg-stat:hover { background: rgba(15,23,42,0.025); }

/* The Create-button stat card is decorative — neutralise the
   accent number style so the button itself reads as primary CTA. */
.pro .pg-stat--accent .pg-stat-num button {
    align-self: flex-start;
}

/* ---------- 3. Table density polish ---------- */
.pro .pg-table tbody td { font-variant-numeric: tabular-nums; }
.pro .pg-table tbody tr { transition: background 140ms ease; }
.pro .pg-table tbody tr:hover { background: rgba(143,255,0,0.025); }
[data-theme="light"] .pro .pg-table tbody tr:hover { background: rgba(15,23,42,0.035); }

.pro .pg-table-action { transition: background 160ms ease, color 160ms ease, transform 160ms ease; }
.pro .pg-table-action:hover { transform: translateY(-1px); }
.pro .pg-table-action:active { transform: translateY(0) scale(0.96); }

/* ---------- 4. Large centered Admin modal
   Built on .glass-modal so it inherits theming + animation.
   Overrides max-width to 1100px, locks header/footer sticky. ---------- */
.admin-modal {
    max-width: min(1120px, calc(100vw - 48px));
    width: 100%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-modal .admin-modal-head {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 2;
    background: var(--color-bg-surface);
    flex-shrink: 0;
}
.admin-modal .admin-modal-avatar {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(143,255,0,0.18), rgba(143,255,0,0.06));
    color: var(--color-accent);
    font-size: 18px;
    border: 1px solid rgba(143,255,0,0.18);
    flex-shrink: 0;
}
[data-theme="light"] .admin-modal .admin-modal-avatar {
    background: linear-gradient(135deg, rgba(143,255,0,0.22), rgba(143,255,0,0.08));
    border-color: rgba(143,255,0,0.28);
}
.admin-modal .admin-modal-titlewrap {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0; flex: 1;
}
.admin-modal .admin-modal-title {
    font-size: 20px; font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.admin-modal .admin-modal-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.02em;
}
.admin-modal .admin-modal-status { margin-left: auto; flex-shrink: 0; }
.admin-modal .admin-modal-close {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    display: grid; place-items: center;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
    flex-shrink: 0;
}
[data-theme="light"] .admin-modal .admin-modal-close { background: rgba(15,23,42,0.04); }
.admin-modal .admin-modal-close:hover {
    background: rgba(255,255,255,0.08);
    color: var(--color-text-primary);
}
[data-theme="light"] .admin-modal .admin-modal-close:hover { background: rgba(15,23,42,0.08); }
.admin-modal .admin-modal-close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.admin-modal .admin-modal-body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: var(--space-5) var(--space-6);
    background:
        radial-gradient(900px 320px at 100% -10%, rgba(143,255,0,0.05), transparent 60%),
        var(--color-bg-surface);
}
[data-theme="light"] .admin-modal .admin-modal-body {
    background:
        radial-gradient(900px 320px at 100% -10%, rgba(143,255,0,0.08), transparent 60%),
        #FFFFFF;
}

.admin-modal .admin-modal-foot {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    position: sticky; bottom: 0; z-index: 2;
    flex-shrink: 0;
}
.admin-modal .admin-modal-foot-spacer { flex: 1; }

/* ---------- 5. Section grid inside admin modal ---------- */
.admin-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (max-width: 900px) {
    .admin-modal-grid { grid-template-columns: 1fr; }
    .admin-modal { max-width: calc(100vw - 24px); max-height: 92vh; }
}

.admin-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 14px;
    transition: border-color 200ms ease, background 200ms ease;
}
[data-theme="light"] .admin-card {
    background: #FFFFFF;
    border-color: #E5E7EB;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.admin-card:hover { border-color: rgba(143,255,0,0.18); }
[data-theme="light"] .admin-card:hover { border-color: rgba(143,255,0,0.35); }

.admin-card-head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
[data-theme="light"] .admin-card-head { border-color: #F1F5F9; }

.admin-card-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: grid; place-items: center;
    background: rgba(143,255,0,0.08);
    color: var(--color-accent);
    font-size: 13px;
    flex-shrink: 0;
}
/* Light theme: the dark #8FFF00 accent chip reads as a harsh green
   tile on white. Use the light indigo palette (#4F46E5) consistent
   with other [data-theme="light"] accent usage. Shared by Cascade,
   User and Merchant detail drawers — fixes all three consistently. */
[data-theme="light"] .admin-card-icon {
    background: #EEF2FF;
    color: #4F46E5;
}
.admin-card-title {
    font-size: 13px; font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.005em;
    flex: 1;
}
.admin-card-eyebrow {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.admin-card-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
}
.admin-card-row + .admin-card-row {
    border-top: 1px dashed rgba(255,255,255,0.04);
}
[data-theme="light"] .admin-card-row + .admin-card-row { border-color: #EEF2F7; }
.admin-card-row > span:first-child {
    color: var(--color-text-muted);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.01em;
}
.admin-card-row > span:last-child {
    color: var(--color-text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}
.admin-card-row .admin-mono {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* Key-reveal row */
.admin-key {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 6px 10px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--color-text-primary);
    max-width: 100%;
}
[data-theme="light"] .admin-key {
    background: #F8FAFC; border-color: #E2E8F0;
}
.admin-key-value {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 220px;
}
.admin-key-btn {
    width: 24px; height: 24px;
    border: none; border-radius: 6px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    display: grid; place-items: center;
    transition: background 140ms ease, color 140ms ease;
    flex-shrink: 0;
}
.admin-key-btn:hover { background: rgba(255,255,255,0.08); color: var(--color-text-primary); }
[data-theme="light"] .admin-key-btn:hover { background: rgba(15,23,42,0.06); }
.admin-key-btn:focus-visible {
    outline: 2px solid var(--color-accent); outline-offset: 1px;
}

.admin-card-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding-top: 6px;
}
/* Stack actions vertically (used in user detail action card) */
.admin-card-actions-stacked {
    flex-direction: column;
    align-items: stretch;
}
/* Compact action button placed at the right edge of an admin-card-head row */
.admin-card-head-action {
    margin-left: auto;
    padding: 6px 12px !important;
    font-size: 12px !important;
}
/* Card spanning the full width of admin-modal-grid (2-col grid) */
.admin-card-wide { grid-column: 1 / -1; }

/* Horizontal divider inside a card, separating sub-sections */
.admin-card-divider {
    height: 1px;
    margin: 10px 0;
    background: var(--color-border, rgba(148,163,184,0.18));
}

/* ── Method spreads section (MerchantDetailDrawer) ─────────────────────
   Each contracted method is its own bordered card so its spread and
   Currency-Exchange controls stay grouped and never blend together. */
.ms-subhead {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 4px 0 8px;
}
.ms-empty {
    display: flex; align-items: center; gap: 8px;
    padding: 14px; border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted); font-size: 13px;
}
.ms-empty i { opacity: 0.7; }
.ms-methods { display: flex; flex-direction: column; gap: 10px; }
.ms-method {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-overlay, rgba(255,255,255,0.02));
    padding: 12px 14px;
    transition: border-color var(--transition, 0.15s ease);
}
.ms-method:hover { border-color: var(--color-border-strong, rgba(148,163,184,0.35)); }
.ms-method-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.ms-method-id { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.ms-method-code { font-size: 12px; color: var(--color-text-secondary); }
.ms-method-name { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.ms-method-spread { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-method-spread--edit .form-input-sm { width: 92px; }
.ms-spread-field { display: inline-flex; align-items: center; gap: 6px; }
.ms-spread-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px 3px 4px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: 12px; font-weight: 700; color: var(--color-text-primary);
}
.ms-spread-tag {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1px 6px; border-radius: var(--radius-sm, 4px);
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em;
    color: #06270A;
}
.ms-spread-tag--in { background: var(--color-accent, #8FFF00); }
.ms-spread-tag--out { background: #38BDF8; color: #04222E; }
.ms-method-ce {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--color-border);
}
.ms-ce-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--color-text-muted);
}
.ms-ce-controls { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Section hint line under an .ms-subhead */
.ms-hint {
    font-size: 12px; color: var(--color-text-muted);
    line-height: 1.45; margin: -2px 0 10px;
}

/* Trader default-spread tiles (UserDetail commission card) */
.ts-default-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.ts-default-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ts-stat {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-overlay, rgba(255,255,255,0.02));
}
.ts-stat-val {
    font-size: 20px; font-weight: 800; color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) { .ts-default-edit { grid-template-columns: 1fr; } }

/* Amount / numeric typography shared by the detail cards */
.admin-amount-strong { font-weight: 700; color: var(--color-accent); }
.admin-amount-positive { font-weight: 700; color: #16A34A; }
.admin-text-positive { color: #16A34A; }

/* Action zone (success/confirm path) — sits beneath the cards grid */
.admin-action-zone {
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(52,211,153,0.18);
    background: rgba(52,211,153,0.04);
}
.admin-action-zone-head {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; color: #6EE7B7;
    margin-bottom: 6px;
}
.admin-action-zone-hint {
    color: var(--color-text-muted);
    font-size: var(--font-sm);
    margin: 0 0 12px;
}

/* Danger zone (destructive path) */
.admin-danger-zone {
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(248,113,113,0.22);
    background: rgba(248,113,113,0.05);
}
.admin-danger-zone-head {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; color: #FCA5A5;
    margin-bottom: 6px;
}
.admin-danger-zone-hint {
    color: var(--color-text-muted);
    font-size: var(--font-sm);
    margin: 0 0 12px;
}

/* Solid danger button — used in danger zones and Revoke & Ban */
.bal-btn-danger {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--color-danger);
    background: var(--color-danger);
    color: #FFFFFF;
    font-family: var(--font-family);
    font-weight: 600; font-size: 14px;
    cursor: pointer;
    transition: filter 160ms ease, transform 100ms ease;
}
.bal-btn-danger:hover:not(:disabled) { filter: brightness(1.05); }
.bal-btn-danger:active:not(:disabled) { transform: translateY(1px); }
.bal-btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* Admin detail PAGE — same look as admin-modal but rendered inline.
   Re-applies the admin-modal-* visuals via a parent selector so we don't
   have to wrap the page in .admin-modal (which has fixed-positioning rules). */
.admin-detail-page .admin-modal-head {
    display: flex; align-items: center; gap: var(--space-4);
    padding: 18px 20px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-bg-surface);
    margin-bottom: 16px;
}
.admin-detail-page .admin-modal-avatar {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(143,255,0,0.18), rgba(143,255,0,0.06));
    color: var(--color-accent);
    font-size: 18px;
    border: 1px solid rgba(143,255,0,0.18);
    flex-shrink: 0;
}
.admin-detail-page .admin-modal-titlewrap {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0; flex: 1;
}
.admin-detail-page .admin-modal-title {
    font-size: 20px; font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.admin-detail-page .admin-modal-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.02em;
}
.admin-detail-page .admin-modal-status { margin-left: auto; flex-shrink: 0; }
.admin-detail-back {
    padding: 6px 12px !important;
    font-size: 12px !important;
    margin-right: 4px;
}
.admin-detail-grid { margin-bottom: 16px; }

/* /admin/rate-providers — compact single-card layout */
.rates-card { max-width: 920px; }
.admin-card-head-meta {
    margin-left: auto;
    font-size: var(--font-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.rates-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    align-items: flex-end;
}
.rates-form-cell { margin-bottom: 0; min-width: 0; }
/* Dropdown should fill the cell so its menu anchors locally, not at the page edge */
.rates-form-cell .pro-geo-dropdown,
.rates-form-cell .rates-dropdown { display: block; width: 100%; }
.rates-form-cell .rates-dropdown .pro-geo-btn { width: 100%; justify-content: space-between; }
.rates-form-cell .rates-dropdown .pro-geo-menu {
    left: 0;
    right: 0;
    min-width: 0;
    transform-origin: top left;
}

.rates-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
[data-theme="light"] .rates-actions { border-color: #F1F5F9; }
.rates-current { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.rates-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
}
.rates-chip i { font-size: 10px; color: var(--color-text-muted); }
.rates-chip strong { color: var(--color-text-primary); font-weight: 600; }
.rates-chip--primary {
    color: var(--color-accent);
    border-color: rgba(143,255,0,0.25);
    background: rgba(143,255,0,0.06);
}
.rates-chip--primary i { color: var(--color-accent); }
.rates-chip--primary strong { color: var(--color-accent); }

/* Cascade drawer: assign-merchant control row (select grows, button fixed) */
.cascade-assign-row {
    display: flex; align-items: center; gap: 8px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px dashed rgba(255,255,255,0.06);
}
[data-theme="light"] .cascade-assign-row { border-color: #EEF2F7; }
.cascade-assign-row .pg-select { flex: 1; min-width: 0; }
.cascade-assign-row .bal-btn-primary { flex-shrink: 0; }

/* Accumulation card bar */
.admin-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
[data-theme="light"] .admin-bar { background: #EEF2F7; }
.admin-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), rgba(143,255,0,0.6));
    border-radius: 999px;
    transition: width 480ms cubic-bezier(.16,1,.3,1);
}
.admin-bar-fill--warn { background: linear-gradient(90deg, var(--color-warning), #FBBF24); }
.admin-bar-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11px; color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
}
.admin-bar-meta strong {
    color: var(--color-accent);
    font-weight: 700; font-size: 12px;
}

/* Webhook card status pill */
.admin-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.02em;
}
.admin-pill--ok { background: rgba(16,185,129,0.12); color: var(--color-success); }
.admin-pill--warn { background: rgba(245,158,11,0.12); color: var(--color-warning); }
.admin-pill--muted { background: rgba(255,255,255,0.05); color: var(--color-text-muted); }
[data-theme="light"] .admin-pill--muted { background: rgba(15,23,42,0.05); }
.admin-pill--err { background: rgba(239,68,68,0.12); color: var(--color-danger); }
.admin-pill-dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: currentColor;
}

/* New-secret reveal banner inside modal */
.admin-secret-banner {
    background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.04));
    border: 1px solid rgba(245,158,11,0.32);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    color: var(--color-warning);
}
.admin-secret-banner i { font-size: 14px; flex-shrink: 0; }
.admin-secret-banner strong {
    font-family: 'Courier New', monospace;
    color: var(--color-text-primary);
    word-break: break-all;
}

/* Inline edit grid (commission, accumulation) */
.admin-edit-grid {
    display: grid; gap: 10px;
    grid-template-columns: 1fr 1fr;
}
.admin-edit-grid .form-group { margin: 0; }
.admin-edit-grid label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

/* ---------- 6. Pill toolbar tweaks for native filter dropdowns
   we keep — give them a clearer hover-ring so users perceive
   them as actionable filters (vs. labels). ---------- */
.pro .pg-toolbar .pg-select {
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.pro .pg-toolbar .pg-select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}
/* In light theme the native option highlight is the OS blue; nudge
   the closed-state look so it doesn't clash. */
[data-theme="light"] .pro .pg-toolbar .pg-select {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
    color: #0F172A;
}
[data-theme="light"] .pro .pg-toolbar .pg-select:hover {
    background-color: #F8FAFC;
    border-color: #CBD5E1;
}

/* StyledDropdown used as filter — match pg-select pill metrics. */
.adm-filter-dd .pro-geo-btn {
    padding: 8px 16px;
    font-size: 13px; font-weight: 600;
}
.adm-filter-dd .pro-geo-btn i:first-child {
    color: var(--color-text-muted);
    font-size: 12px;
}

/* Native date filter (audit log) — match the filter pill metrics. */
.adm-date-input {
    padding: 7px 12px;
    font-size: 13px; font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface-2, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: 10px;
    outline: none;
    color-scheme: dark;
}
[data-theme="light"] .adm-date-input { background: #fff; border-color: #CBD5E1; color-scheme: light; }
.adm-date-input:hover { border-color: var(--color-border-strong, rgba(255,255,255,0.18)); }

/* Read-only info banner (permissions matrix). */
.adm-note {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    margin: 4px 0 16px;
    font-size: 13px;
    color: var(--color-text-muted);
    background: var(--color-surface-2, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: 10px;
}
.adm-note i { color: var(--color-accent, #8FFF00); font-size: 13px; }
[data-theme="light"] .adm-note { background: #F8FAFC; border-color: #E2E8F0; }

/* ---------- Per-user permission editor (UserPermissionsEditor) ---------- */
.perm-count {
    margin-left: auto;
    font-size: 12px; font-weight: 600;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.perm-hint { margin: 0 0 14px 0; }
.perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 8px 14px;
}
.perm-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    background: var(--color-surface-2, rgba(255,255,255,0.03));
    transition: border-color 160ms ease, background 160ms ease;
}
.perm-item--on {
    border-color: rgba(143,255,0,0.35);
    background: var(--color-accent-dim, rgba(143,255,0,0.06));
}
.perm-item--locked { opacity: 0.6; }
.perm-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.perm-item-name {
    font-size: 13px; font-weight: 600; color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.perm-item-code {
    font-size: 11px; color: var(--color-text-muted);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.perm-item-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.perm-lock { color: var(--color-text-muted); }
.perm-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 14px;
    margin-top: 16px;
}
.perm-msg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.perm-msg--ok { color: var(--color-success, #22C55E); }
.perm-msg--err { color: var(--color-danger, #EF4444); }

/* System-error log detail (message / stack trace). */
.logs-pre {
    margin: 0;
    padding: 10px 12px;
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-surface-2, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: 8px;
}
[data-theme="light"] .logs-pre { background: #F8FAFC; border-color: #E2E8F0; }

/* Signed financial-correction amounts. */
.amt-pos { color: var(--color-success, #22C55E); font-weight: 600; }
.amt-neg { color: var(--color-danger, #EF4444); font-weight: 600; }

/* ---------- 7. Empty state polish ---------- */
.pro .act-empty {
    padding: 56px 20px;
    text-align: center;
    color: var(--color-text-muted);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.pro .act-empty i { font-size: 28px; opacity: 0.55; }

/* ── Routing page (Admin/Routing) ──────────────────────────────────────
   App-styled dropdowns fill their cell / picker; native <select> open
   lists can't be themed so the page uses StyledDropdown instead. */
.routing-dd { display: block; width: 100%; }
.routing-dd .pro-geo-btn { width: 100%; justify-content: space-between; }
.pg-table td .routing-dd { min-width: 160px; }

/* The Type / Cascade cells hold StyledDropdowns that open downward out of the row.
   By default the shared table wrap clips overflow (rounded corners) and trapped the
   open menu inside the table box, forcing an inner scroll. Three page-scoped overrides
   let the menu overlay instead:
     • wrap overflow visible — the menu is no longer clipped to the table box;
     • rows shed their settled entry-transform (admRowIn ends on translateY(0), which
       makes each row a stacking context + clip boundary) so an open menu's z-index
       applies in the wrap and paints above lower rows;
     • the bottom actions bar carries no dropdowns of its own, so it drops the toolbar's
       z:20 stacking context and lets the wrap (z:1) — and the open menu — paint over it. */
.pro .pg-table-wrap.routing-table-wrap { overflow: visible; }
.pro .routing-table-wrap .pg-table tbody tr { animation-fill-mode: backwards; }
.pro .pg-toolbar.routing-actions { z-index: auto; }

/* Polished empty state — circular accent glyph, title, body, primary CTA,
   consistent with the rest of the app's surfaces. */
.routing-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-align: center;
    padding: 48px 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl, 18px);
    background: var(--color-bg-surface);
}
.routing-empty-art {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-accent-dim);
    color: var(--color-accent);
    font-size: 22px; margin-bottom: 4px;
}
.routing-empty-title { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.routing-empty-body {
    font-size: 13px; color: var(--color-text-muted);
    max-width: 460px; line-height: 1.55;
}
.routing-empty .bal-btn-primary { margin-top: 8px; }

/* ---------- 8. Toggle (switch) for boolean fields in modal ---------- */
.admin-switch {
    position: relative;
    width: 38px; height: 22px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
    flex-shrink: 0;
}
[data-theme="light"] .admin-switch { background: #E2E8F0; border-color: #CBD5E1; }
.admin-switch::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 999px;
    background: #fff;
    transition: transform 200ms cubic-bezier(.16,1,.3,1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.admin-switch--on { background: var(--color-accent); border-color: rgba(143,255,0,0.4); }
.admin-switch--on::after { transform: translateX(16px); background: #0B0E12; }
[data-theme="light"] .admin-switch--on::after { background: #FFFFFF; }
.admin-switch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---------- 9. Reduce visual weight of "Welcome admin"-style
   AI-slop generic centered placeholders. (Currently none in code;
   kept defensive for future additions.) ---------- */
.admin-generic-greet { display: none !important; }

/* Geo flag badges (topbar + tables) */
.topbar__geo-flag,
.geo-badge-flag {
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
    display: inline-block;
    vertical-align: middle;
}
/* Topbar geo chip: an auto-width pill (NOT the fixed circular icon-btn) so the
   flag + ISO3 label fit without clipping. */
.topbar__geo-wrap { position: relative; display: inline-flex; }
.topbar__geo-flag { margin-right: 7px; width: 22px; height: 15px; }
.topbar__geo-btn {
    width: auto;
    min-width: 0;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0;
    overflow: visible;
}
.topbar__geo-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
}
.geo-badge { display: inline-flex; align-items: center; gap: 6px; }
.geo-badge-flag { width: 16px; height: 12px; max-width: 16px; }

/* Notifications popover — constrain height + scroll */
.notif-pop-body {
    max-height: min(60vh, 480px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.notif-pop-body::-webkit-scrollbar { width: 8px; }
.notif-pop-body::-webkit-scrollbar-track { background: transparent; }
.notif-pop-body::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 999px; }
.notif-pop-body::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ============================================================
   ROLE COCKPITS — Infrastructure (Lead) "Methods by geo" grouping
   + rate-provider chips row. Reuses .admin-rates-section* + .pg-table.
   ============================================================ */
.infra-geo-group { margin-bottom: var(--space-4); }
.infra-geo-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-2);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.infra-geo-head i { color: var(--color-accent); font-size: 12px; }
.infra-geo-count {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-size: var(--font-xs);
}
.infra-rate-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}