/* ============================================================================ app-dark.css — the dark "THE HOUSE ALWAYS SHIPS" front-page design language, applied to the BACKEND app surfaces (docs / dashboard / admin). Scoped to their body classes so it can never touch the marketing pages. This is the backend twin of marketing-theme.css: two layers — A) token + FONT override (#060606 / acid-lime #C9F31D, Anton + Chakra Petch) B) component restyle (lime-border gradient cards, glow hovers, acid eyebrows, Anton headings/numbers) + contrast fixes for the spots that used `var(--ink)` as a *background* or a fill-foreground (those went light-on-light once dark mode flipped --ink to #e8e8e8). It also neutralises three off-brand accent systems that only ever resolved to their hardcoded fallbacks on dark: admin amber (--admin-accent #d8632e), integration blue (--admin-accent #4a7eff fallback), hosting orange/brown (--am-accent #ff8c5e / --am-surface #1a0e0e). All collapse to acid-lime. tokens.css stays UNTOUCHED. Loaded LAST in each app page's . JetBrains Mono is kept (via --font-mono) for dense tabular/code legibility. ============================================================================ */ /* ════════════════════════════════════════════════════════════════════════ LAYER A — tokens + fonts (the canvas→dark, ink→light, type→Anton/Chakra flip) ════════════════════════════════════════════════════════════════════════ */ body.docs-body, body.dashboard-body, body.admin-body { --canvas: #0a0a0a; --canvas-deep: #0f0f0f; --canvas-paper: #141414; --ink: #e8e8e8; --ink-soft: #cfcfcf; --ink-mute: #9a9a9a; --ink-line: rgba(255, 255, 255, 0.12); --ink-glass: rgba(255, 255, 255, 0.04); --lime: #C9F31D; --lime-glow: #E4FF66; --lime-deep: #C9F31D; --lime-shadow: rgba(201, 243, 29, 0.45); /* links/icons/accents that used violet → acid-lime (matches marketing). The 2-3 data-viz / "banned" spots that genuinely need a distinct hue are re-pointed to a soft violet explicitly in Layer B. */ --violet: #C9F31D; --violet-deep: #9ED40F; --violet-soft: #E4FF66; --violet-glow: rgba(201, 243, 29, 0.30); --signal-info: #C9F31D; --surface-dark: #0c0c0c; --surface-dark-raised: #161616; --surface-dark-hi: #1e1e1e; --grain-opacity: 0; --shadow-1: 0 1px 2px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.5); --shadow-2: 0 10px 30px rgba(0,0,0,0.55), 0 0 30px rgba(201,243,29,0.06); --shadow-3: 0 24px 60px rgba(0,0,0,0.7); --shadow-lime-glow: 0 0 24px rgba(201,243,29,0.45); /* type — front-page families. Mono kept JetBrains for table/number density. */ --font-display: 'Anton', 'Bebas Neue', system-ui, sans-serif; --font-sans: 'Chakra Petch', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ── neutralise off-brand accent systems (admin amber / integration blue / hosting orange-brown) — every var() that fell back to them goes acid. ── */ --admin-accent: #C9F31D; /* was amber #d8632e / blue #4a7eff */ --admin-accent-2: #F4B740; /* keep a real WARN amber (pending/refund) */ --admin-tint: rgba(201,243,29,0.10); --am-border: rgba(255,255,255,0.12); /* was #d8d4c8 (light) */ --am-accent: #C9F31D; /* hosting tab — was #ff8c5e orange */ --am-surface: #161616; /* was #1a0e0e brown */ --am-surface-2: #1e1e1e; /* was #241313 brown */ --sb-surface: #161616; --signal-danger: #ff6b6b; background: #0a0a0a; color: #e8e8e8; } /* base.css paints body from --canvas; keep html/body dark too */ html:has(body.docs-body), html:has(body.dashboard-body), html:has(body.admin-body) { background: #0a0a0a; } body.docs-body ::selection, body.dashboard-body ::selection, body.admin-body ::selection { background: #C9F31D; color: #0c1000; } /* ════════════════════════════════════════════════════════════════════════ LAYER B — component restyle (the new look) + contrast fixes ════════════════════════════════════════════════════════════════════════ */ /* ── Topbar — dark glass (kills dashboard's hardcoded light glass + admin amber gradient) ──────────────────────────────────────────────────────── */ body.dashboard-body .db-topbar, body.admin-body .db-topbar { background: rgba(6, 6, 6, 0.78); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } body.admin-body .admin-topbar { background: rgba(6, 6, 6, 0.82) !important; } .admin-brand-section { color: var(--lime) !important; } /* ── Sidebar nav (dashboard) — dark, lime active inset, not a light block ── */ body.dashboard-body .db-sidebar { background: #0c0c0c; border-right-color: rgba(255,255,255,0.08); } body.dashboard-body .db-nav-item:hover { background: rgba(255,255,255,0.04); color: #fff; } body.dashboard-body .db-nav-item.active { background: rgba(201,243,29,0.12); color: #C9F31D; box-shadow: inset 2px 0 0 #C9F31D; } body.dashboard-body .db-nav-item.active .db-nav-glyph { color: #C9F31D; } body.dashboard-body .db-nav-badge { background: var(--lime); color: #0c1000; } /* ── Eyebrows — acid-lime, Chakra Petch, wide tracking, { } brackets kept ── */ body.dashboard-body .db-eyebrow, body.admin-body .db-eyebrow, body.dashboard-body .db-panel-eyebrow, body.admin-body :is(.am-panel-eyebrow, .am-detail h3, .am-cc-chart-title), body.dashboard-body :is(.db-fieldset-legend, .km-reveal-label, .dm-address-label, .db-nav-group-label) { font-family: 'Chakra Petch', var(--font-sans); color: var(--lime); letter-spacing: 0.18em; text-transform: uppercase; } /* ── Headings — Anton, uppercase, soft chrome shadow (page titles only) ──── */ body.dashboard-body .db-h1, body.admin-body .db-h1 { font-family: 'Anton', var(--font-sans); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; color: #f2f2f2; text-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.5); } /* ── Big numbers — Anton, for the hero-stat feel ───────────────────────── */ body.dashboard-body :is(.db-stat-value, .db-stat-value-big, .db-chart-total strong, .dm-pay-amount-big, .db-deposit-amount), body.admin-body :is(.am-kpi-value, .amh-wallet-bal strong, .am-cc-empty-mark, .hz-plan-price) { font-family: 'Anton', var(--font-sans); font-weight: 400; letter-spacing: 0.01em; } /* ── Panels / cards — dark gradient + subtle border (the marketing card) ── */ body.dashboard-body :is(.db-panel, .db-stat-card, .db-chart-card, .db-fieldset, .db-key-row, .db-deposit-row, .dm-status-card, .db-int-step, .db-int-sample, .db-int-tester-row, .db-topgame, .hz-plan, .db-range-tabs, .db-checklist-item, .db-ledger-row, .dm-currency-btn), body.admin-body :is(.db-panel, .am-panel, .am-kpi, .sgt-card, .am-cc-rail, .am-cc-detail, .am-cc-card, .am-cc-stat, .am-cc-kpi, .am-cc-curcard, .am-rtp-picker, .am-rtp-search-card, .am-rtp-variant-card, .amh-srv, .amh-tenant) { background: linear-gradient(160deg, #171717 0%, #0d0d0d 100%); border-color: #272727; } /* checklist/ledger/range surfaces want a flatter inner tone */ body.dashboard-body :is(.db-checklist-item, .db-ledger-row, .dm-currency-btn) { background: rgba(255,255,255,0.025); } /* hover → lime border + glow, on the genuinely-interactive cards */ body.dashboard-body :is(.db-stat-card, .db-key-row, .db-server-card, .hz-plan, .dm-currency-btn, .am-rtp-search-card, .am-rtp-variant-card):hover, body.admin-body :is(.am-kpi--clickable, .am-rtp-search-card, .am-rtp-variant-card, .amh-tenant):hover { border-color: rgba(201,243,29,0.5) !important; box-shadow: 0 16px 38px rgba(0,0,0,0.5), 0 0 26px rgba(201,243,29,0.08); } /* ── Buttons — lime-gradient primary + bracket/ghost (from marketing) ───── */ body.dashboard-body .btn-primary, body.admin-body .btn-primary { background: linear-gradient(160deg, #e3ff62 0%, #C9F31D 50%, #a3cc05 100%); color: #0c1000; font-family: 'Chakra Petch', var(--font-sans); font-weight: 700; border: none; box-shadow: 0 0 22px rgba(201,243,29,0.3), inset 0 1px 0 rgba(255,255,255,0.55); } body.dashboard-body .btn-primary:hover, body.admin-body .btn-primary:hover { background: linear-gradient(160deg, #e9ff7a 0%, #d4ff2e 50%, #b0db10 100%); box-shadow: 0 0 40px rgba(201,243,29,0.55), inset 0 1px 0 rgba(255,255,255,0.55); transform: translateY(-2px); } body.dashboard-body :is(.btn-bracket, .btn-ghost), body.admin-body :is(.btn-bracket, .btn-ghost) { background: rgba(255,255,255,0.03); color: #e8e8e8; border: 1px solid #333; } body.dashboard-body :is(.btn-bracket, .btn-ghost):hover, body.admin-body :is(.btn-bracket, .btn-ghost):hover { border-color: #C9F31D; color: #C9F31D; } /* admin's own lime-fill primary needs DARK text now (was #fff on amber) */ body.admin-body .am-btn-primary { background: linear-gradient(160deg, #e3ff62 0%, #C9F31D 55%, #a3cc05 100%); color: #0c1000 !important; border-color: transparent; } /* ── Dark-text-on-lime fixes — selected/active fills that were #fff or var(--ink) (light) text on the (now-lime) accent. ────────────────────── */ body.admin-body :is(.acc-subtab.active, .am-cc-chip.active, .am-cc-chart-range button.is-active, .am-cc-curdef) { color: #0c1000 !important; } body.admin-body .am-cc-chip-warn.active { background: var(--signal-error); color: #fff !important; } body.dashboard-body :is(.db-int-method, .db-int-run) { color: #0c1000 !important; } /* segmented "active" controls that used `background: var(--ink)` (light) → lime */ body.dashboard-body :is(.db-range-tab.active, .dm-quick-btn.active), body.admin-body .am-modal-tab.active { background: var(--lime); color: #0c1000; border-color: var(--lime); } /* key-reveal copy button (was light ink bg) → lime outline → lime fill */ body.dashboard-body .km-copy-btn { background: #1a1a1a; color: var(--lime); border-color: var(--lime); } body.dashboard-body .km-copy-btn:hover { background: var(--lime); color: #0c1000; } /* ledger / deposit glyphs (credit) — were lime-on-light, now lime-on-tint */ body.dashboard-body .db-ledger-row.credit .db-ledger-glyph, body.dashboard-body .db-deposit-icon { background: rgba(201,243,29,0.14); color: var(--lime); } body.dashboard-body .db-deposit-row.pending .db-deposit-icon { background: var(--signal-warn); color: #0c1000; } body.dashboard-body .db-deposit-row.failed .db-deposit-icon { background: var(--signal-error); color: #fff; } /* checklist "done" tick — dark check on lime dot */ body.dashboard-body .db-checklist-item.done .db-check::before { color: #0c1000; } /* ── Inputs — lime focus ring on the dark fields ───────────────────────── */ body.docs-body :is(input,textarea,select), body.dashboard-body :is(input,textarea,select), body.admin-body :is(input,textarea,select) { background: #14171f; color: #e8e8e8; border-color: rgba(255, 255, 255, 0.12); } body.docs-body :is(input,textarea,select)::placeholder, body.dashboard-body :is(input,textarea,select)::placeholder, body.admin-body :is(input,textarea,select)::placeholder { color: #6f7686; } body.docs-body :is(input,textarea,select):focus, body.dashboard-body :is(input,textarea,select):focus, body.admin-body :is(input,textarea,select):focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(201,243,29,0.15); } /* dividers + scrollbars */ body.docs-body :is(hr), body.dashboard-body :is(hr), body.admin-body :is(hr) { border-color: rgba(255,255,255,0.10); } body.docs-body ::-webkit-scrollbar-thumb, body.dashboard-body ::-webkit-scrollbar-thumb, body.admin-body ::-webkit-scrollbar-thumb { background: #2a2a2a; } body.docs-body ::-webkit-scrollbar-thumb:hover, body.dashboard-body ::-webkit-scrollbar-thumb:hover, body.admin-body ::-webkit-scrollbar-thumb:hover { background: #3a3a3a; } /* ── DASHBOARD: the transactions table + detail modal hardcoded navy rgba(11,15,31,…) text → invisible on dark. Re-skin to the dark palette. ─ */ body.dashboard-body .db-tx-table-wrap { background: rgba(255,255,255,0.015); border-color: rgba(255,255,255,0.08); } body.dashboard-body .db-tx-table thead th { color: var(--ink-mute); background: rgba(255,255,255,0.03); border-bottom-color: rgba(255,255,255,0.08); } body.dashboard-body .db-tx-table tbody td { color: var(--ink-soft); border-bottom-color: rgba(255,255,255,0.05); } body.dashboard-body .db-tx-table tbody tr:hover { background: rgba(201,243,29,0.05); } body.dashboard-body .db-tx-table :is(.ttime, .tplayer, .tgame, .tcur, .tarrow) { color: var(--ink-mute); } body.dashboard-body .db-tx-table tbody tr:hover .tarrow { color: var(--lime); } body.dashboard-body .db-tx-action-bet { background: rgba(255,255,255,0.06); color: var(--ink-soft); } body.dashboard-body .db-tx-status-committed { color: var(--ink-soft); background: rgba(255,255,255,0.05); } body.dashboard-body .db-tx-detail h3 { color: var(--lime); } body.dashboard-body :is(.db-tx-detail-currency, .db-tx-detail-usd, .db-tx-detail-sub) { color: var(--ink-mute); } body.dashboard-body .db-tx-detail-kv { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); } body.dashboard-body .db-tx-detail-kv .lbl { color: var(--ink-mute); } body.dashboard-body .db-tx-detail-kv .val { color: var(--ink-soft); } body.dashboard-body .db-tx-detail-kv .val.muted { color: var(--ink-mute); } body.dashboard-body .db-tx-detail pre { color: var(--ink-soft); border-color: rgba(255,255,255,0.06); } /* dashboard form feedback / warn — lighten the dark-on-light foregrounds */ body.dashboard-body .db-form-error { background: rgba(229,72,77,0.16); color: #ff8a8a; border-color: rgba(229,72,77,0.5); } body.dashboard-body .db-form-success { background: rgba(43,182,115,0.14); color: #7eea9c; border-color: rgba(43,182,115,0.45); } body.dashboard-body :is(.dm-warn, .km-warn) { color: #f4c976; } /* completed checklist cards (de-muddy the olive lime tint) */ body.dashboard-body .db-checklist-item.done { background: rgba(201,243,29,0.06); border-color: rgba(201,243,29,0.45); } /* ledger debit row stays visually distinct from credit (not lime) */ body.dashboard-body .db-ledger-row.debit .db-ledger-glyph { background: rgba(255,255,255,0.12); color: #e8e8e8; } body.dashboard-body .db-ledger-row.debit .db-ledger-amount { color: #e07a7a; } /* QR code MUST stay on white to scan — re-assert against any dark sweep */ body.dashboard-body .dm-qr { background: #fff; } /* ── ADMIN: tables/zebra + warn feedback ───────────────────────────────── */ body.admin-body :is(thead th) { background: #161616; color: #cfcfcf; } body.admin-body tr:nth-child(even) :is(td) { background: rgba(255,255,255,0.015); } body.admin-body .km-warn { color: #f4c976; } /* "banned" status + data-viz fee line need a distinct hue from acid GGR */ body.admin-body .am-status-banned { background: rgba(155,140,255,0.18); color: #b9a8ff; } body.admin-body .am-cc-chart-fee-line { stroke: #9b8cff; } body.admin-body .am-cc-leg-sw.fee { background: #9b8cff; } /* KPI delta neutral pill — lift off pure-black tint so it reads on dark */ body.admin-body .am-kpi-delta { background: rgba(255,255,255,0.06); color: var(--ink-mute); } body.admin-body .am-kpi-delta--neutral { background: rgba(255,255,255,0.06); } /* ── Status-pill legibility — many chips hardcode dark green/blue/amber/red foregrounds tuned for the old cream theme; lighten each so it pops on dark (mirrors the C8 fix already applied to .db-fs-status / .db-int). ─── */ body.admin-body :is(.cat-vrnt-flag, .am-fs-status--active), body.dashboard-body :is(.db-int-tester-status.is-ok, .db-topgame-cat--table) { color: #7eea9c !important; } body.admin-body .am-fs-status--consumed, body.dashboard-body .db-topgame-cat { color: #9cb3ff !important; } body.admin-body :is(.am-fs-status--expired, .am-cc-flag, .am-cc-chip-i--warn), body.dashboard-body .db-usage-table .is-warn { color: #f4c976 !important; } body.admin-body .am-fs-status--failed, body.dashboard-body :is(.db-int-tester-status.is-bad, .db-topgame-cat--live, .db-usage-table .is-bad) { color: #ff8a8a !important; } /* ── DOCS: the few light tints/borders → dark-correct ──────────────────── */ body.docs-body .docs-topbar-search input { background: rgba(255,255,255,.05); } body.docs-body .docs-topbar-search input:focus { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); } body.docs-body .docs-topbar-langs .docs-codetab:hover, body.docs-body .docs-nav-item:hover { background: rgba(255,255,255,.05); } body.docs-body .docs-method-row, body.docs-body .docs-endpoint-card { background: rgba(255,255,255,.03); } body.docs-body .docs-topbar, body.docs-body .docs-sidebar { border-color: rgba(255,255,255,.10); } body.docs-body .docs-topbar-langs .docs-codetab.active { background: rgba(201,243,29,.16); color: #C9F31D; } /* ── Kill stray white card/knob backgrounds the token flip can't reach ──── */ body.dashboard-body .dash-table-wrap, body.dashboard-body .modal-card, body.dashboard-body .sb-card-white { background: #141414; } body.dashboard-body [style*="background: white"], body.dashboard-body [style*="background:#fff"] { background: #141414 !important; } /* ── PNG brand logo (replaces the {SoftBet} bracket wordmark) ───────────── */ body.docs-body .docs-brand img, body.dashboard-body .db-brand img, body.admin-body .db-brand img { height: 22px; display: inline-block; vertical-align: middle; } /* ════════════════════════════════════════════════════════════════════════ Responsive polish — keep dense operator views usable down to phones. (Most page CSS already wraps; these fill the gaps + honour reduced motion.) ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { body.admin-body .am-kpi-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { body.admin-body .am-kpi-strip { grid-template-columns: 1fr; } body.admin-body .admin-main { padding: 24px 16px 60px; } } @media (prefers-reduced-motion: reduce) { body.dashboard-body *, body.admin-body * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }