/* ============================================================================ Affiliate-only page styling. The shared app shell (sidebar, top bar, brand, nav, mobile drawer, rail-collapse) now lives in /static/css/shell.css and is used by both the affiliate and advertiser bases. This file keeps ONLY the transitional token-based overrides for the affiliate Bootstrap page bodies so they stay legible in both themes (full per-page repolish comes in later PRs). References ONLY the tokens from /static/css/tokens.css — no hardcoded colors. ============================================================================ */ .nx-content a { color: var(--brand-blue); } .nx-content .card { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .nx-content .card-title { color: var(--text); } .nx-content .text-muted { color: var(--text-dim) !important; } .nx-content .table { color: var(--text); } .nx-content .table > :not(caption) > * > * { background: transparent; } .nx-content .btn-primary { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--on-accent); } .nx-content .btn-primary:hover { filter: brightness(1.06); } .nx-content hr { border-color: var(--line); } /* ============================================================================ DS layer (Surface 2) — fills the Bootstrap gaps the native overrides above don't cover (card headers, form controls, .bg-light, table heads, badges, status columns), sourced from the CloudTrade DS semantic tokens (ds/styles.css) plus the native token contract. data-brand="nexora" on activates the blue->teal brand mapping. No hardcoded colors; advertiser per-tenant accent is untouched (different shell). All scoped to .nx-content. ============================================================================ */ /* Card chrome */ .nx-content .card-header { background: var(--surface-sunken); color: var(--text-strong); border-bottom: 1px solid var(--border-default); } /* Form controls (Bootstrap inputs default to light — theme them) */ .nx-content .form-control, .nx-content .form-select { background: var(--surface-sunken); color: var(--text-body); border: 1px solid var(--border-default); } .nx-content .form-control::placeholder { color: var(--text-faint); } .nx-content .form-control:focus, .nx-content .form-select:focus { background: var(--surface-sunken); color: var(--text-body); border-color: var(--brand-primary); box-shadow: 0 0 0 2px var(--brand-tint); } .nx-content .form-label { color: var(--text-muted); } /* Bootstrap helper backgrounds that otherwise stay light on the dark shell */ .nx-content .bg-light { background: var(--surface-sunken) !important; color: var(--text-body) !important; } /* Report tables */ .nx-content .table thead th { background: var(--surface-sunken); color: var(--text-muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; border-bottom: 1px solid var(--border-default); } .nx-content .table td, .nx-content .table th { border-color: var(--divider); } /* Numeric / money figures: tabular alignment per DS money convention */ .nx-content .ds-num { font-variant-numeric: tabular-nums; } .nx-content .ds-money { color: var(--brand-teal); font-variant-numeric: tabular-nums; } /* Status-column semantics — DS status tokens (light + dark aware via data-theme) */ .nx-content .ds-approved { color: var(--status-positive-fg); } .nx-content .ds-hold { color: var(--status-warning-fg); } .nx-content .ds-rejected { color: var(--status-danger-fg); } /* Dashboard stat tiles */ .nx-content .ds-stat-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } /* Offer + payout status badges -> DS status tints (beat Bootstrap's !important) */ .nx-content .badge.bg-secondary { background: var(--status-neutral-bg) !important; color: var(--status-neutral-fg) !important; } .nx-content .badge.bg-info { background: var(--status-info-bg) !important; color: var(--status-info-fg) !important; } .nx-content .badge.bg-success { background: var(--status-positive-bg) !important; color: var(--status-positive-fg) !important; } .nx-content .badge.bg-warning { background: var(--status-warning-bg) !important; color: var(--status-warning-fg) !important; } .nx-content .badge.bg-danger { background: var(--status-danger-bg) !important; color: var(--status-danger-fg) !important; } /* Semantic text utilities (payout earnings figure, live address validation) */ .nx-content .text-success { color: var(--status-positive-fg) !important; } .nx-content .text-warning { color: var(--status-warning-fg) !important; } .nx-content .text-danger { color: var(--status-danger-fg) !important; }