/* ===== OmadaPay brand theme ===== Master palette per the Omada Brand Guide (Colors & Logo Standards, 2026-07-08): Deep Navy #06152E (primary bg) · Gunmetal #2D343C (secondary) · Silver #D1D5DB (support) · Soft White #F8FAFC (primary text) · Blaze Orange #F97316 (accent/CTA). Note: this restores the full Blaze Orange the brand guide mandates, superseding the 2026-07-02 muted rev (Slate Navy #0B1524 / Ember Orange #D97706). Surface roles are taken verbatim from the guide: Deep Navy #06152E = primary background; Gunmetal #2D343C = secondary/base (all chrome — sidebar, topbar, cards, panels). The --navy-800/700/panel tokens keep their historical names but now hold Gunmetal + one lighter elevation, so consumers stay unchanged while the palette is exactly the five guide colors. */ :root { --navy-900: #06152E; /* Deep Navy — primary background */ --navy-800: #2D343C; /* Gunmetal — secondary/base chrome */ --navy-700: #363F49; /* Gunmetal, +1 elevation (hover / nested) */ --panel: #2D343C; /* Gunmetal — cards & panels */ --panel-2: #363F49; /* Gunmetal elevated */ --orange: #F97316; --orange-600: #EA580C; --soft-white: #F8FAFC; --silver: #D1D5DB; --gunmetal: #2D343C; --muted: #93A3B8; --green: #22C55E; --red: #EF4444; --border: rgba(255, 255, 255, 0.07); /* Form fields read as interactive surfaces: a darker recessed fill (below the Gunmetal panel) plus a border stronger than the hairline --border on panels. */ --field-bg: #1F252B; --field-border: rgba(255, 255, 255, 0.16); --field-border-hover: rgba(255, 255, 255, 0.28); --focus-ring: rgba(249, 115, 22, 0.25); --sidebar-w: 240px; --topbar-h: 64px; } * { box-sizing: border-box; } html, body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--navy-900); color: var(--soft-white); font-size: 14px; } a, .btn-link { color: var(--orange); text-decoration: none; } h1, h2, h3 { color: var(--soft-white); margin: 0; } .text-muted2 { color: var(--muted) !important; } .text-up { color: var(--green); } .text-down { color: var(--red); } .accent { color: var(--orange); } /* ── Tier theming ───────────────────────────────────────────────────────────── Each console re-scopes the accent so staff can tell the tier apart at a glance: Merchant = orange, Global = violet, ISV = teal, ISO = blue. Anything keyed off var(--orange) (links, .accent, .btn-omada, avatar, active nav) adopts the tier hue automatically, and a 3px rail is pinned to the top of every shell. A single knob per tier keeps every downstream accent in sync. */ .tier-merchant { --orange: #F97316; --orange-600: #EA580C; --tier-name: "Merchant"; } .tier-global { --orange: #8B5CF6; --orange-600: #7C3AED; --tier-name: "Global"; } .tier-isv { --orange: #14B8A6; --orange-600: #0D9488; --tier-name: "ISV"; } .tier-iso { --orange: #3B82F6; --orange-600: #2563EB; --tier-name: "ISO"; } .tier-merchant, .tier-global, .tier-isv, .tier-iso { position: relative; } .tier-merchant::before, .tier-global::before, .tier-isv::before, .tier-iso::before { content: ""; position: fixed; inset: 0 0 auto 0; /* top rail, full width */ height: 3px; background: var(--orange); z-index: 200; pointer-events: none; } /* Tier badge — a small pill naming the current console, tinted with the tier accent. */ .tier-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: var(--orange); background: color-mix(in srgb, var(--orange) 16%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); } /* Page header — title/subtitle on the left, primary action on the right. Shared by every page's `
`; keep it global so action buttons don't collapse onto the subtitle when a page has no isolated CSS. */ .dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; } .dash-head h1 { font-size: 26px; } /* Buttons — used as both