/* ============================================================
   TRADER CABINET — Scoped polish layer
   ------------------------------------------------------------
   - Owns ONLY classes prefixed with `trd-` or descendants of
     `[data-trader-page]`. Never overrides global merchant.css
     or app.css selectors.
   - Adds per-page identity (sub-accent), entry motion, hover
     lift, modal scale-in, and a small set of trader-specific
     primitives that were previously inline-styled.
   - All animation respects `prefers-reduced-motion`.
   ============================================================ */

/* Hide the page hero (eyebrow + title + subtitle) per UX feedback —
   too redundant with the active NavMenu pill. */
.trd-header { display: none !important; }

/* ---- Page identity --------------------------------------------------
   Each trader route sets `data-trader-page` on its root wrapper.
   That seeds `--trader-accent` so headings, hovers, focused tabs and
   accent icons get a distinct hue per page — while badges, buttons
   and the global accent (lime) remain unified.
*/
[data-trader-page="profile"]   { --trader-accent: var(--color-accent);    --trader-accent-soft: rgba(143,255,0,0.10);  --trader-accent-text: var(--color-accent); }
[data-trader-page="payments"]  { --trader-accent: #60A5FA;                --trader-accent-soft: rgba(96,165,250,0.10); --trader-accent-text: #60A5FA; }
[data-trader-page="payouts"]   { --trader-accent: #FD7557;                --trader-accent-soft: rgba(253,117,87,0.10); --trader-accent-text: #FD7557; }
[data-trader-page="cards"]     { --trader-accent: #A78BFA;                --trader-accent-soft: rgba(167,139,250,0.10); --trader-accent-text: #A78BFA; }
[data-trader-page="disputes"]  { --trader-accent: #FBBF24;                --trader-accent-soft: rgba(251,191,36,0.10); --trader-accent-text: #FBBF24; }
[data-trader-page="tickets"]   { --trader-accent: #34D399;                --trader-accent-soft: rgba(52,211,153,0.10); --trader-accent-text: #34D399; }
[data-trader-page="appeals"]   { --trader-accent: #F87171;                --trader-accent-soft: rgba(248,113,113,0.10); --trader-accent-text: #F87171; }
[data-trader-page="docs"]      { --trader-accent: #818CF8;                --trader-accent-soft: rgba(129,140,248,0.10); --trader-accent-text: #818CF8; }
[data-trader-page="settings"]  { --trader-accent: #94A3B8;                --trader-accent-soft: rgba(148,163,184,0.12); --trader-accent-text: var(--color-text-primary); }

/* Light theme — keep saturated text colors readable on white */
[data-theme="light"] [data-trader-page="profile"]  { --trader-accent: #16A34A; --trader-accent-soft: #F0FDF4; --trader-accent-text: #16A34A; }
[data-theme="light"] [data-trader-page="payments"] { --trader-accent: #2563EB; --trader-accent-soft: #EFF6FF; --trader-accent-text: #2563EB; }
[data-theme="light"] [data-trader-page="payouts"]  { --trader-accent: #DC2626; --trader-accent-soft: #FEF2F2; --trader-accent-text: #DC2626; }
[data-theme="light"] [data-trader-page="cards"]    { --trader-accent: #7C3AED; --trader-accent-soft: #F5F3FF; --trader-accent-text: #7C3AED; }
[data-theme="light"] [data-trader-page="disputes"] { --trader-accent: #D97706; --trader-accent-soft: #FFFBEB; --trader-accent-text: #D97706; }
[data-theme="light"] [data-trader-page="tickets"]  { --trader-accent: #0D9488; --trader-accent-soft: #F0FDFA; --trader-accent-text: #0D9488; }
[data-theme="light"] [data-trader-page="appeals"]  { --trader-accent: #DC2626; --trader-accent-soft: #FEF2F2; --trader-accent-text: #DC2626; }
[data-theme="light"] [data-trader-page="docs"]     { --trader-accent: #4F46E5; --trader-accent-soft: #EEF2FF; --trader-accent-text: #4F46E5; }
[data-theme="light"] [data-trader-page="settings"] { --trader-accent: #475569; --trader-accent-soft: #F1F5F9; --trader-accent-text: #0F172A; }

/* ---- Page header ----------------------------------------------------
   A discreet, intentional header for every trader page. The accent
   bar on the left is the only thing that varies between pages, giving
   each route a recognizable spine without making the whole page tinted.
*/
.trd-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
    padding: 0 0 var(--space-5) 0;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}
.trd-header::before {
    content: "";
    position: absolute; left: 0; top: 4px; bottom: var(--space-5);
    width: 3px; border-radius: 2px;
    background: var(--trader-accent, var(--color-accent));
    opacity: 0.9;
}
.trd-header-text { padding-left: var(--space-4); min-width: 0; }
.trd-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--trader-accent-text, var(--color-accent));
    text-transform: uppercase;
    margin-bottom: 6px;
}
.trd-eyebrow i { font-size: 10px; }
.trd-title {
    font-family: var(--font-family);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}
.trd-subtitle {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 4px;
    font-weight: 400;
    max-width: 60ch;
}
.trd-header-actions {
    display: flex; align-items: center; gap: var(--space-2);
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .trd-header { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .trd-header-actions { justify-content: flex-end; }
    .trd-title { font-size: 19px; }
}

/* ---- Tabular numerics ----------------------------------------------- */
[data-trader-page] .pg-table td,
[data-trader-page] .pg-stat-num,
[data-trader-page] .bal-number,
[data-trader-page] .payin-countdown,
[data-trader-page] .trd-money,
[data-trader-page] .text-mono,
[data-trader-page] .pg-table-mono {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Long monospace IDs / CBU / wallet — truncate without breaking table layout.
   NEVER use display:inline-block here: .pg-table-mono is applied to <td> cells
   (balance columns); inline-block detaches the cell from the table grid and
   misaligns every header vs its data. Keep it a real table-cell. */
[data-trader-page] .pg-table-mono {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Stat tile — page-accent flavor --------------------------------
   The existing `.pg-stat--accent` uses the global lime. Within a trader
   page we re-paint the accent stat to use the page sub-accent so the
   page identity is reinforced without changing the global rule.
*/
[data-trader-page] .pg-stat--accent .pg-stat-num--accent { color: var(--trader-accent-text); }
[data-trader-page] .pg-stat--accent { border-color: color-mix(in srgb, var(--trader-accent) 28%, var(--color-border)); }
[data-trader-page] .pg-stat {
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}
[data-trader-page] .pg-stat:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--trader-accent) 32%, var(--color-border));
}

/* ---- Tabs — accent-aware ------------------------------------------- */
[data-trader-page] .act-tab.act-tab-active {
    color: var(--trader-accent-text);
    border-color: var(--trader-accent);
}
[data-trader-page] .act-tab:not(.act-tab-active):hover { color: var(--color-text-primary); }

/* ---- Page identity icon for header --------------------------------- */
.trd-header-glyph {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--trader-accent-soft);
    color: var(--trader-accent-text);
    flex-shrink: 0;
    font-size: 15px;
}
.trd-header-with-glyph { display: flex; align-items: center; gap: var(--space-3); padding-left: var(--space-4); min-width: 0; }
.trd-header-with-glyph .trd-header-text { padding-left: 0; }

/* ============================================================
   MOTION — page entry + row stagger + hover lift
   ============================================================ */

@keyframes trd-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes trd-scale-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes trd-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Page wrapper fades in once on mount. The .pro container already
   holds the trader page content. */
[data-trader-page] > .trd-header,
[data-trader-page] > .pg-stats,
[data-trader-page] > .dash-row,
[data-trader-page] > .act-tabs-wrap,
[data-trader-page] > .pg-toolbar,
[data-trader-page] > .pg-table-wrap,
[data-trader-page] > .pg-grid,
[data-trader-page] > .docs,
[data-trader-page] > .cd-grid-3,
[data-trader-page] > .cd-grid-2,
[data-trader-page] > .act-table-wrap {
    animation: trd-fade-up 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
[data-trader-page] > .trd-header   { animation-delay: 0ms; }
[data-trader-page] > .pg-stats     { animation-delay: 40ms; }
[data-trader-page] > .dash-row     { animation-delay: 60ms; }
[data-trader-page] > .act-tabs-wrap{ animation-delay: 100ms; }
[data-trader-page] > .pg-toolbar   { animation-delay: 140ms; }
[data-trader-page] > .pg-table-wrap,
[data-trader-page] > .pg-grid,
[data-trader-page] > .cd-grid-3    { animation-delay: 180ms; }
/* The fade-up animation pins translateY(0) on each row above, which silently
   creates a stacking context. Lift the toolbar above the table so dropdown
   and date-picker popovers paint over the sticky thead. */
[data-trader-page] > .pg-toolbar   { position: relative; z-index: 20; }
[data-trader-page] > .pg-table-wrap,
[data-trader-page] > .pg-grid      { position: relative; z-index: 1; }
[data-trader-page] > .cd-grid-2    { animation-delay: 220ms; }
[data-trader-page] > .docs         { animation-delay: 80ms; }

/* Table-row stagger fade-up. Capped to first 12 rows so very long
   tables don't add perceptible delay. */
[data-trader-page] .pg-table tbody tr {
    animation: trd-fade-up 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(40ms + var(--row-i, 0) * 22ms);
}
[data-trader-page] .pg-table tbody tr:nth-child(1)  { --row-i: 0; }
[data-trader-page] .pg-table tbody tr:nth-child(2)  { --row-i: 1; }
[data-trader-page] .pg-table tbody tr:nth-child(3)  { --row-i: 2; }
[data-trader-page] .pg-table tbody tr:nth-child(4)  { --row-i: 3; }
[data-trader-page] .pg-table tbody tr:nth-child(5)  { --row-i: 4; }
[data-trader-page] .pg-table tbody tr:nth-child(6)  { --row-i: 5; }
[data-trader-page] .pg-table tbody tr:nth-child(7)  { --row-i: 6; }
[data-trader-page] .pg-table tbody tr:nth-child(8)  { --row-i: 7; }
[data-trader-page] .pg-table tbody tr:nth-child(9)  { --row-i: 8; }
[data-trader-page] .pg-table tbody tr:nth-child(10) { --row-i: 9; }
[data-trader-page] .pg-table tbody tr:nth-child(11) { --row-i: 10; }
[data-trader-page] .pg-table tbody tr:nth-child(12) { --row-i: 11; }
[data-trader-page] .pg-table tbody tr:nth-child(n+13) { --row-i: 12; }

/* Grid card stagger */
[data-trader-page] .pg-grid > .pg-grid-card {
    animation: trd-fade-up 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(60ms + var(--card-i, 0) * 35ms);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
[data-trader-page] .pg-grid > .pg-grid-card:nth-child(1)  { --card-i: 0; }
[data-trader-page] .pg-grid > .pg-grid-card:nth-child(2)  { --card-i: 1; }
[data-trader-page] .pg-grid > .pg-grid-card:nth-child(3)  { --card-i: 2; }
[data-trader-page] .pg-grid > .pg-grid-card:nth-child(4)  { --card-i: 3; }
[data-trader-page] .pg-grid > .pg-grid-card:nth-child(5)  { --card-i: 4; }
[data-trader-page] .pg-grid > .pg-grid-card:nth-child(6)  { --card-i: 5; }
[data-trader-page] .pg-grid > .pg-grid-card:nth-child(7)  { --card-i: 6; }
[data-trader-page] .pg-grid > .pg-grid-card:nth-child(8)  { --card-i: 7; }
[data-trader-page] .pg-grid > .pg-grid-card:nth-child(n+9){ --card-i: 8; }
[data-trader-page] .pg-grid > .pg-grid-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--trader-accent) 26%, var(--color-border));
}

/* Subtle hover-lift on table rows that are clickable */
[data-trader-page] .pg-table tbody tr {
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
[data-trader-page] .pg-table tbody tr:hover {
    background: var(--color-bg-hover);
}
[data-theme="light"] [data-trader-page] .pg-table tbody tr:hover {
    background: var(--color-bg-white-hover);
}

/* Stat tile fade-up stagger */
[data-trader-page] > .pg-stats > .pg-stat {
    animation: trd-fade-up 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(80ms + var(--stat-i, 0) * 50ms);
}
[data-trader-page] > .pg-stats > .pg-stat:nth-child(1) { --stat-i: 0; }
[data-trader-page] > .pg-stats > .pg-stat:nth-child(2) { --stat-i: 1; }
[data-trader-page] > .pg-stats > .pg-stat:nth-child(3) { --stat-i: 2; }
[data-trader-page] > .pg-stats > .pg-stat:nth-child(4) { --stat-i: 3; }
[data-trader-page] > .pg-stats > .pg-stat:nth-child(5) { --stat-i: 4; }

/* Modal scale-in (scoped to trader pages so it doesn't override
   merchant/admin modals). The sibling selector (`~`) covers trader modals
   rendered OUTSIDE the .pro wrapper as page-root siblings — see the modal
   placement in Trader/Profile.razor + Payments.razor — so they keep the
   trader entrance choreography while their position:fixed backdrop stays
   clear of the toolbar/table-wrap stacking contexts (commit 7d7f9b0). */
[data-trader-page] .modal-backdrop,
[data-trader-page] ~ .modal-backdrop {
    animation: trd-fade-in 200ms ease both;
}
[data-trader-page] .modal-backdrop > .glass-modal,
[data-trader-page] ~ .modal-backdrop > .glass-modal {
    animation: trd-scale-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Receipt viewer entry */
[data-trader-page] .receipt-viewer {
    animation: trd-scale-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Reduced motion — kill all the entry choreography */
@media (prefers-reduced-motion: reduce) {
    [data-trader-page] *,
    [data-trader-page] *::before,
    [data-trader-page] *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============================================================
   PROFILE — balance card polish
   ============================================================ */

/* Inline the inline-style `style="margin-left:auto"` on the traffic
   toggle as a named class so the page markup is cleaner. */
.trd-traffic-toggle { margin-left: auto; }

/* Deposit-progress bar uses page accent, not always-lime */
[data-trader-page="profile"] .bal-deposit-fill {
    background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, white));
}

/* ============================================================
   EARN / MONEY cells — kill inline color/font-weight ----------- */
.trd-earn {
    color: var(--color-success);
    font-weight: 600;
    white-space: nowrap;
}
.trd-earn-sub {
    color: var(--color-text-secondary);
    font-size: 10px;
    font-weight: 500;
    display: block;
}
.trd-money { font-weight: 600; white-space: nowrap; }

/* ============================================================
   PAYOUTS — claim row affordance + proof upload chip
   ============================================================ */

/* Pulse the urgent countdown subtly to draw eye to soon-expiring
   pool items, but only on payouts page. */
@keyframes trd-pulse-urgent {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}
[data-trader-page="payouts"] .payin-countdown-urgent {
    animation: trd-pulse-urgent 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    [data-trader-page="payouts"] .payin-countdown-urgent { animation: none; }
}

/* Inline upload-receipt label looks like a button — give it consistent
   sizing without per-call inline styles in razor markup. */
.trd-upload-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 9999px;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    cursor: pointer;
    border: none;
    transition: var(--transition);
}
.trd-upload-chip:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
.trd-upload-chip:active { transform: translateY(0) scale(0.98); }

/* "Under review" inline state */
.trd-under-review {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 500;
}
.trd-under-review i { color: var(--trader-accent-text); }

/* ============================================================
   CARDS — list polish
   ============================================================ */

[data-trader-page="cards"] .pg-table tbody tr { cursor: pointer; }

/* Status indicator dot, used inline next to the status badge in
   the future detail row. Tiny but improves scannability. */
.trd-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; margin-right: 6px; vertical-align: middle;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 14%, transparent);
}
.trd-status-dot--active { background: var(--color-success); color: var(--color-success); }
.trd-status-dot--paused { background: var(--color-warning); color: var(--color-warning); }
.trd-status-dot--inactive { background: var(--color-text-muted); color: var(--color-text-muted); }
.trd-status-dot--archived { background: var(--color-danger); color: var(--color-danger); }

/* ============================================================
   DOCS — page identity for sidebar active item
   ============================================================ */
[data-trader-page="docs"] .docs-nav-item--active {
    border-left-color: var(--trader-accent) !important;
    color: var(--trader-accent-text);
}

/* ============================================================
   APPEALS — bring it onto the unified pg-* design system
   ============================================================
   Appeals.razor still references the legacy app.css classes
   `.table-wrapper / .table / .page-header / .ticket-summary-*`.
   We hard-translate those legacy classes into the modern pg-*
   look ONLY when they appear inside a trader-appeals page, so
   admin/support views are untouched.
*/
[data-trader-page="appeals"] .table-wrapper {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
[data-trader-page="appeals"] .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
[data-trader-page="appeals"] .table thead th {
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border);
}
[data-trader-page="appeals"] .table tbody td {
    padding: 14px 16px;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
}
[data-trader-page="appeals"] .table tbody tr:last-child td { border-bottom: none; }
[data-trader-page="appeals"] .table-row-clickable {
    cursor: pointer;
    transition: background var(--transition);
}
[data-trader-page="appeals"] .table-row-clickable:hover {
    background: var(--color-bg-hover);
}
[data-theme="light"] [data-trader-page="appeals"] .table-row-clickable:hover {
    background: var(--color-bg-white-hover);
}

/* Appeals legacy summary row → pg-stats look */
[data-trader-page="appeals"] .ticket-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
[data-trader-page="appeals"] .ticket-summary-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
[data-trader-page="appeals"] .ticket-summary-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--trader-accent) 30%, var(--color-border));
    box-shadow: var(--shadow-sm);
}
[data-trader-page="appeals"] .tsc-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--trader-accent-soft);
    color: var(--trader-accent-text);
    font-size: 15px;
    flex-shrink: 0;
}
[data-trader-page="appeals"] .tsc-info { display: flex; flex-direction: column; min-width: 0; }
[data-trader-page="appeals"] .tsc-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    color: var(--color-text-secondary); text-transform: uppercase;
}
[data-trader-page="appeals"] .tsc-count {
    font-size: 22px; font-weight: 700; color: var(--color-text-primary);
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
[data-trader-page="appeals"] .tsc-sub {
    font-size: 11px; color: var(--color-text-muted);
}

/* Appeals tabs — share the act-tab vocabulary */
[data-trader-page="appeals"] .ticket-tabs {
    display: flex; gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-4); flex-wrap: wrap;
}
[data-trader-page="appeals"] .ticket-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-size: 13px; font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: var(--transition);
}
[data-trader-page="appeals"] .ticket-tab:hover { color: var(--color-text-primary); }
[data-trader-page="appeals"] .ticket-tab-active {
    color: var(--trader-accent-text);
    border-bottom-color: var(--trader-accent);
}
[data-trader-page="appeals"] .ticket-tab-count {
    background: var(--color-bg-elevated);
    padding: 1px 8px;
    border-radius: 9999px;
    font-size: 10px;
    color: var(--color-text-secondary);
}
[data-trader-page="appeals"] .ticket-tab-active .ticket-tab-count {
    background: var(--trader-accent-soft);
    color: var(--trader-accent-text);
}

/* ============================================================
   D2: Profile transaction table — prevent 8-col squish.
   Time, Amount, and the three running-balance columns get
   nowrap so they never break mid-value. Description is
   clamped to a max-width and truncated with ellipsis.
   ============================================================ */
[data-trader-page="profile"] .pg-table th:nth-child(1),
[data-trader-page="profile"] .pg-table td:nth-child(1) { white-space: nowrap; }   /* Time */
[data-trader-page="profile"] .pg-table th:nth-child(4),
[data-trader-page="profile"] .pg-table td:nth-child(4) { white-space: nowrap; }   /* Amount */
[data-trader-page="profile"] .pg-table th:nth-child(5),
[data-trader-page="profile"] .pg-table td:nth-child(5),
[data-trader-page="profile"] .pg-table th:nth-child(6),
[data-trader-page="profile"] .pg-table td:nth-child(6),
[data-trader-page="profile"] .pg-table th:nth-child(7),
[data-trader-page="profile"] .pg-table td:nth-child(7) { white-space: nowrap; }   /* Main / Frozen / Deposit */
[data-trader-page="profile"] .pg-table th:nth-child(8),
[data-trader-page="profile"] .pg-table td:nth-child(8) {                          /* Description */
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   COMPACT STAT STRIP — replaces heavy pg-stats rows on trader
   and cascade-trader list pages. A single horizontal pill bar
   with dividers, substantially lower visual weight than the
   large card grid.
   ============================================================ */
.trd-stat-strip {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
    animation: trdStatStripIn 320ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes trdStatStripIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}
.trd-stat-chip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 10px 20px;
    flex: 1;
    border-right: 1px solid var(--color-border);
    transition: background var(--transition);
}
.trd-stat-chip:last-child { border-right: none; }
.trd-stat-chip:hover { background: var(--color-bg-overlay); }
.trd-stat-chip--accent {
    background: var(--color-accent-dim);
}
.trd-stat-chip--accent:hover { background: var(--color-accent-dim); filter: brightness(1.08); }
.trd-stat-chip-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.trd-stat-chip-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.trd-stat-chip-value--warn  { color: var(--color-warning); }
.trd-stat-chip-value--ok    { color: var(--color-success); }
.trd-stat-chip-value--accent { color: var(--color-accent); }
/* Within a trader page, accent value uses the per-page sub-accent */
[data-trader-page] .trd-stat-chip-value--accent { color: var(--trader-accent-text); }
[data-cascade-page] .trd-stat-chip-value--accent { color: var(--color-accent); }

/* Light theme overrides */
[data-theme="light"] .trd-stat-strip {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: var(--shadow-card);
}
[data-theme="light"] .trd-stat-chip { border-right-color: #F1F5F9; }
[data-theme="light"] .trd-stat-chip:hover { background: rgba(15,23,42,0.025); }
[data-theme="light"] .trd-stat-chip--accent { background: rgba(99,102,241,0.07); }

/* Responsive: collapse to 2-col grid on mobile */
@media (max-width: 640px) {
    .trd-stat-strip {
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow: visible;
        border-radius: var(--radius-md);
    }
    .trd-stat-chip {
        border-right: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        padding: 10px 14px;
    }
    .trd-stat-chip:nth-child(even) { border-right: none; }
    .trd-stat-chip:nth-last-child(-n+2) { border-bottom: none; }
}

/* ============================================================
   EMPTY STATE — use act-empty (already styled), normalize
   the icon color to the page accent so empty inboxes don't
   all look identical.
   ============================================================ */
[data-trader-page] .act-empty > i {
    color: color-mix(in srgb, var(--trader-accent) 55%, var(--color-text-muted));
    opacity: 0.85;
}
[data-trader-page] .empty-state-card .empty-state-art { color: var(--trader-accent-text); }

/* ============================================================
   ALIGNMENT FIXES — narrow, safe
   ============================================================ */
/* The earn cell template in PayIns/PayOuts mixes inline color + sub-line.
   Provide a clean container that pages can opt into incrementally. */
.trd-earn-cell {
    display: flex; flex-direction: column; align-items: flex-end;
    text-align: right;
    gap: 1px;
}
.trd-earn-cell .trd-earn { font-size: 13px; }
.trd-earn-cell .trd-earn-sub { font-size: 10px; text-align: right; }

/* Make 'cursor:pointer' table rows actually feel clickable on dark too */
[data-trader-page] .pg-table tbody tr[role="button"],
[data-trader-page="payments"] .pg-table tbody tr,
[data-trader-page="payouts"]  .pg-table tbody tr,
[data-trader-page="cards"]    .pg-table tbody tr,
[data-trader-page="disputes"] .pg-table tbody tr,
[data-trader-page="tickets"]  .pg-table tbody tr,
[data-trader-page="appeals"]  .table tbody tr {
    cursor: pointer;
}

/* ============================================================
   MOBILE — tighten header + tabs
   ============================================================ */
@media (max-width: 720px) {
    [data-trader-page] .pg-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    [data-trader-page] .pg-toolbar .pg-search { width: 100%; }
    [data-trader-page] .pg-table { font-size: 12px; }
    .trd-header-glyph { width: 32px; height: 32px; }
}

/* ============================================================
   CASCADE-TRADER PROFILE PAGE  (data-cascade-page="profile")
   csp-* classes are scoped to the Overview page only.
   ============================================================ */

/* ── Status hero ────────────────────────────────────────────── */
.csp-hero {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    margin-bottom: var(--space-4);
    transition: border-color 240ms ease, box-shadow 240ms ease;
    animation: trdStatStripIn 300ms cubic-bezier(.16,1,.3,1) both;
}
/* Variant: live (enabled + traffic) */
.csp-hero--live {
    border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 4%, var(--color-bg-surface));
}
/* Variant: integration on but traffic stopped */
.csp-hero--warn {
    border-color: color-mix(in srgb, var(--color-warning) 25%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning) 4%, var(--color-bg-surface));
}
/* Variant: disabled */
.csp-hero--off {
    border-color: var(--color-border);
    opacity: 0.88;
}
[data-theme="light"] .csp-hero {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: var(--shadow-card);
}
[data-theme="light"] .csp-hero--live {
    border-color: rgba(99,102,241,0.28);
    background: rgba(99,102,241,0.03);
}
[data-theme="light"] .csp-hero--warn {
    border-color: rgba(245,158,11,0.28);
    background: rgba(245,158,11,0.03);
}

/* Pulse icon */
.csp-hero-status {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}
.csp-hero-pulse {
    width: 52px; height: 52px;
    border-radius: var(--radius-xl);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    position: relative;
}
.csp-pulse--live {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 8%, transparent);
    animation: csp-pulse-ring 2.4s ease-in-out infinite;
}
.csp-pulse--warn {
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
    color: var(--color-warning);
}
.csp-pulse--off {
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
}
@keyframes csp-pulse-ring {
    0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 8%, transparent); }
    50%       { box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-accent) 3%, transparent); }
}

.csp-hero-label {
    display: flex; flex-direction: column; gap: 2px;
}
.csp-hero-state {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
}
.csp-hero-provider {
    font-size: var(--font-sm);
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Supporting facts */
.csp-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    margin-left: auto;
    align-items: flex-start;
}
.csp-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 100px;
}
.csp-fact--wide { min-width: 200px; max-width: 340px; }
.csp-fact-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.csp-fact-value {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    word-break: break-all;
}

/* Responsive collapse */
@media (max-width: 768px) {
    .csp-hero { flex-direction: column; gap: var(--space-4); }
    .csp-hero-facts { margin-left: 0; gap: var(--space-3) var(--space-5); }
}

/* ── Onboarding / not-configured panel ──────────────────────── */
.csp-onboarding {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--color-border-strong);
    background: var(--color-bg-overlay);
    margin-bottom: var(--space-4);
}
.csp-onboarding-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    color: var(--color-text-muted);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
}
.csp-onboarding-title {
    font-weight: 700;
    font-size: var(--font-md);
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.csp-onboarding-hint {
    font-size: var(--font-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    max-width: 520px;
}
[data-theme="light"] .csp-onboarding {
    border-color: #CBD5E1;
    background: #F8FAFC;
}

/* ── Details 2-col grid ─────────────────────────────────────── */
.csp-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 720px) {
    .csp-details-grid { grid-template-columns: 1fr; }
}

/* ── Accounting section title (cascade page) ────────────────── */
[data-cascade-page="profile"] .trd-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

/* ============================================================
   PRINT — strip motion + decoration
   ============================================================ */
@media print {
    [data-trader-page] * { animation: none !important; transition: none !important; }
    [data-trader-page] .trd-header::before { display: none; }
}