/* ============================================================
   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));
}

/* 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;
}

/* ---------- 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; }

/* ---------- 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); }