/* ============================================================================
OMNI ECHO DESIGN SYSTEM — CORE (omni-core.css, v2 2026-08-10)
----------------------------------------------------------------------------
The centralized LOOK & FEEL every Omni Echo project attaches to: brand tokens,
typography, spacing, and the shared report components (cards, stat tiles,
tables, buttons, inputs, status pills) in dark + light.
This file is deliberately ONLY the presentation core — no dashboard chrome.
Projects differ in features and buttons; they keep their OWN stylesheet for
those and load it AFTER this one:
<- your own things
Add omni-shell.css for the full dashboard chrome (left rail, header wordmark,
settings menu, drawer, footer) or link omni-dashboard.css to get core+shell
in one request. omni-login.css is the shared sign-in page.
BRANDING: set a class on . No class = Omni Echo orange (default on
purpose — a tool can never accidentally ship Mayfair's brand).
Omni orange + 'OMNI' wordmark
Mayfair green + 'MAYFAIR' wordmark
your client palette (template below)
============================================================================ */
/* ------------------------------- TOKENS ---------------------------------- */
:root{
/* geometry (shared; the shell uses it, core defines it so tokens live here) */
--rail-w:225px;
/* neutral surfaces + text (shared across brands) */
--bg-1:#0c0d0a; --bg-2:#101208;
--rail-bg:#0e100a; --surface:#14160f; --input-bg:#0f120a; --drawer-bg:#101208;
--border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.1);
--border-3:rgba(255,255,255,.2);
--text:#d7d9d0; --text-bright:#e4e6dd; --name:#eef0e8; --ctrl:#c3c6ba;
--dim:#9ea294; --label:#7d8276; --mute:#787c6f; --faint:#62665a; --soft:#8b8e84;
/* BRAND — dark (default = Omni orange) */
--accent:#ff9d57; --accent-hi:#ffb27a; --accent-hover:#ffb27a;
--accent-ink:#2a1505; --accent-ink-dim:#5a3a1f;
--accent-10:rgba(255,157,87,.10); --accent-15:rgba(255,157,87,.15);
--accent-18:rgba(255,157,87,.18); --accent-28:rgba(255,157,87,.28);
--accent-30:rgba(255,157,87,.30);
--glow:rgba(255,157,87,.16); --glow-2:rgba(255,157,87,.08);
--sweep:rgba(255,206,150,.8);
--wordmark:'OMNI';
/* BRAND — light */
--accent-l:#e88b3a; --accent-l-hover:#f0a15a; --accent-l-ink:#3a1e08;
--accent-l-strong:#b05f1a;
--glow-l:rgba(232,139,58,.16); --glow-l-2:rgba(232,139,58,.10);
/* semantic (status pills, notes — shared, not brand) */
--gold:#deb842; --gold-hover:#eccb5c; --gold-ink:#221a04;
--warn:#e5c96a; --warn-bg:rgba(222,184,66,.16); --warn-soft:rgba(222,184,66,.12);
--danger:#ff9d8f; --danger-bg:rgba(248,113,113,.16);
}
/* Mayfair — the one family of tools that carries Mayfair's own brand. */
.brand-mayfair{
--accent:#a8d64b; --accent-hi:#b9e360; --accent-hover:#b7e35c;
--accent-ink:#171c06; --accent-ink-dim:#3a4222;
--accent-10:rgba(168,214,75,.10); --accent-15:rgba(168,214,75,.15);
--accent-18:rgba(168,214,75,.18); --accent-28:rgba(168,214,75,.28);
--accent-30:rgba(168,214,75,.30);
--glow:rgba(168,214,75,.16); --glow-2:rgba(168,214,75,.08);
--sweep:rgba(214,255,150,.8);
--wordmark:'MAYFAIR';
--accent-l:#7cb02c; --accent-l-hover:#8fc23e; --accent-l-ink:#17230a;
--accent-l-strong:#5a831f;
--glow-l:rgba(124,176,44,.16); --glow-l-2:rgba(124,176,44,.10);
}
/* Client-brand TEMPLATE — copy, rename, set your palette + wordmark:
.brand-acme{
--accent:#3b82f6; --accent-hi:#60a5fa; --accent-hover:#60a5fa;
--accent-ink:#04122e; --accent-ink-dim:#1e3a5f;
--accent-10:rgba(59,130,246,.10); --accent-15:rgba(59,130,246,.15);
--accent-18:rgba(59,130,246,.18); --accent-28:rgba(59,130,246,.28);
--accent-30:rgba(59,130,246,.30);
--glow:rgba(59,130,246,.16); --glow-2:rgba(59,130,246,.08);
--sweep:rgba(150,200,255,.8); --wordmark:'ACME';
--accent-l:#2563eb; --accent-l-hover:#3b82f6; --accent-l-ink:#02122e;
--accent-l-strong:#1e40af;
--glow-l:rgba(37,99,235,.16); --glow-l-2:rgba(37,99,235,.10);
}
*/
/* --------------------------- TYPOGRAPHY + PAGE ---------------------------- */
body{font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
color:var(--text);background:
radial-gradient(65% 52% at 42% 0%,var(--glow) 0%,transparent 62%),
radial-gradient(55% 42% at 78% 8%,rgba(255,255,255,.07) 0%,transparent 60%),
radial-gradient(45% 42% at 92% 100%,var(--glow-2) 0%,transparent 60%),
linear-gradient(160deg,var(--bg-1) 0%,var(--bg-2) 100%);background-attachment:fixed}
input,button{font-family:inherit}
/* ------------------------- REPORT COMPONENTS (DARK) ------------------------ */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:16px;
box-shadow:0 12px 32px -14px rgba(0,0,0,.55)}
.stat b{color:var(--text-bright)}
.stat span{color:var(--label)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;
padding:20px;box-shadow:0 12px 32px -14px rgba(0,0,0,.55)}
.card h2,h2.h-new,h2.h-proc,h2.h-done,h2.h-hist{background:none;color:var(--dim);
margin:-20px -20px 14px;padding:16px 18px 12px;border-bottom:1px solid var(--border);
font-size:11.5px;letter-spacing:.14em;border-radius:0}
label{color:var(--soft)}
input{background:var(--input-bg);border:1px solid rgba(255,255,255,.16);color:var(--text-bright);
border-radius:8px}
input::placeholder{color:#5f6357}
button{background:var(--accent);color:var(--accent-ink);border-radius:8px;font-size:13px;
padding:8px 14px;font-weight:700}
button:hover{background:var(--accent-hover)}
button:disabled{background:var(--accent-28);color:var(--accent-ink-dim)}
button.sec{background:transparent;color:var(--ctrl);border:1px solid var(--border-3);font-weight:400}
button.sec:hover{background:rgba(255,255,255,.07);color:#fff}
button.scannow{background:var(--gold);color:var(--gold-ink)}
button.scannow:hover{background:var(--gold-hover)}
th{color:var(--mute);font-size:10.5px}
th,td{border-bottom:1px solid var(--border);padding:10px 8px}
.name{color:var(--name);font-size:13.5px}
.detail{color:var(--soft)} .detail.err{color:var(--danger)}
.muted{color:var(--mute)}
.timer{color:var(--accent)}
.pill{font-size:11px;padding:3px 9px;border-radius:6px}
.s-Ready{background:rgba(255,255,255,.08);color:var(--ctrl)}
.s-Queued{background:var(--warn-bg);color:var(--warn)}
.s-Running{background:var(--accent-18);color:var(--accent-hover)}
.s-Completed{background:var(--accent-15);color:var(--accent)}
.s-Needs{background:var(--danger-bg);color:var(--danger)}
.s-Suggested{background:rgba(255,255,255,.1);color:var(--text)}
.s-Cleanup{background:var(--warn-soft);color:var(--warn)}
.note{background:var(--warn-soft);color:var(--warn);border-color:rgba(222,184,66,.35)}
.src{background:rgba(255,255,255,.08);color:var(--ctrl)}
.hiredate{background:var(--accent-15);color:var(--accent);font-weight:700;
font-size:12.5px;border-radius:8px;padding:4px 10px}
/* ------------------------------ LIGHT THEME -------------------------------- */
html.light body{color:#1f2937;background:
radial-gradient(58% 48% at 10% 0%,var(--glow-l) 0%,transparent 60%),
radial-gradient(52% 44% at 95% 100%,var(--glow-l-2) 0%,transparent 60%),
linear-gradient(160deg,#f4f5f8 0%,#eceef3 100%);background-attachment:fixed}
html.light .card{background:#fff;border-color:#e6e9e1;box-shadow:0 10px 30px -18px rgba(20,24,15,.25)}
html.light .card h2,html.light h2.h-new,html.light h2.h-proc,
html.light h2.h-done,html.light h2.h-hist{color:#4b5563;border-bottom-color:#edf0e8}
html.light label{color:#6b7280}
html.light input{background:#fff;border-color:#d5dacd;color:#1f2937}
html.light input::placeholder{color:#9aa090}
html.light button{background:var(--accent-l);color:var(--accent-l-ink)}
html.light button:hover{background:var(--accent-l-hover)}
html.light button:disabled{background:#cfe0b3;color:#5a6b45}
html.light button.sec{background:#fff;color:#374151;border-color:#d5dacd}
html.light button.sec:hover{background:#f3f5ef;color:#111827}
html.light button.scannow{background:#e6b83c;color:#4a3a00}
html.light button.scannow:hover{background:#f0c95e}
html.light th{color:#6b7280}
html.light th,html.light td{border-bottom-color:#eef0eb}
html.light .name{color:#111827}
html.light .detail{color:#6b7280} html.light .detail.err{color:#a1352b}
html.light .muted{color:#8a9086}
html.light .stat{background:#fff;border-color:#e6e9e1;box-shadow:0 10px 30px -18px rgba(20,24,15,.25)}
html.light .stat b{color:#111827}
html.light .stat span{color:#6b7280}
html.light .timer{color:var(--accent-l-strong)}
html.light .s-Ready{background:#eef0f1;color:#4b5563}
html.light .s-Queued{background:#f5efdd;color:#7a6320}
html.light .s-Running{background:#e2ebf6;color:#2d4f79}
html.light .s-Completed{background:#e9f3d9;color:#3f5c14}
html.light .s-Needs{background:#f7e4e2;color:#8c2f27}
html.light .s-Suggested{background:#ebe8f4;color:#4a3f78}
html.light .s-Cleanup{background:#f5ead9;color:#7d5722}
html.light .note{background:#fdf6e3;color:#8a6d1a;border-color:#eadfae}
html.light .src{background:#eff3e8;color:#4b5563}
html.light .hiredate{background:#e9f3d9;color:#3f5c14}
/* ==== omni-shell.css ==== */
/* ============================================================================
OMNI ECHO DESIGN SYSTEM — DASHBOARD SHELL (omni-shell.css, v2 2026-08-10)
----------------------------------------------------------------------------
The dashboard CHROME layered on top of omni-core.css: fixed left rail, top
wordmark header, settings gear + dropdown, how-it-works drawer, account box,
page footer, and the responsive collapse. REQUIRES omni-core.css first (all
tokens live there) — or link omni-dashboard.css, which is core+shell in one.
Markup contract (same IDs SOAR uses — copy from SOAR to adopt):
#sidebar > logo img + .nav-label + nav > a.nav(.on/.off) + #railend
(#acctbox, a.nav#infobtn) · header > h1 (+ .controls > #settings) ·
#infopanel · #pagefoot · html.light for light mode.
============================================================================ */
/* Fixed left rail + padded body; flex column pins the footer to the bottom. */
body{display:flex;flex-direction:column;padding-left:var(--rail-w);box-sizing:border-box;
min-height:100vh}
/* --- the left workflow rail --- */
#sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);box-sizing:border-box;
display:flex;flex-direction:column;
background:var(--rail-bg);border-right:1px solid var(--border);padding:18px 12px 16px}
#sidebar>img{height:36px;align-self:flex-start;margin:2px 6px 24px}
#sidebar img.lt,#pagefoot img.lt{display:none}
.th-lt{display:none}
html.light .th-dk{display:none}
html.light .th-lt{display:inline}
#sidebar .nav-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
color:var(--label);margin:0 12px 6px;font-weight:600}
#sidebar nav{display:flex;flex-direction:column;gap:2px}
#sidebar a.nav{display:flex;align-items:center;gap:9px;height:30px;padding:0 10px;
box-sizing:border-box;border-radius:8px;font-size:13.5px;font-weight:500;
color:var(--dim);text-decoration:none}
#sidebar a.nav:hover{background:rgba(255,255,255,.05);color:var(--text)}
#sidebar a.nav svg{flex:none;width:15px;height:15px}
#sidebar a.nav.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
#sidebar a.nav.on:hover{background:var(--accent);color:var(--accent-ink)}
#sidebar a.nav.off{color:var(--faint);cursor:not-allowed}
#sidebar a.nav.off:hover{background:none;color:var(--faint)}
#sidebar a.nav.off .soon{margin-left:auto;font-size:9px;letter-spacing:.08em;
text-transform:uppercase;border:1px solid rgba(255,255,255,.14);
border-radius:999px;padding:2px 7px;color:var(--mute)}
#railend{margin-top:auto;display:flex;flex-direction:column}
#sidebar a.nav#infobtn{cursor:pointer;color:var(--accent)}
#sidebar a.nav#infobtn:hover{background:rgba(255,255,255,.05);color:var(--accent-hi)}
#sidebar .sidefoot{padding:12px 6px 0;font-size:11px;line-height:1.6;color:var(--mute)}
/* --- account box: avatar / name+email / Sign out --- */
#acctbox{display:flex;align-items:center;gap:9px;margin-top:12px;
border:1px solid var(--border-2);border-radius:10px;padding:9px 10px}
#acctbox .av{flex:none;width:30px;height:30px;border-radius:999px;
background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13px;
display:flex;align-items:center;justify-content:center}
#acctbox .who{min-width:0;display:flex;flex-direction:column;gap:1px}
#acctbox .who b{font-size:13px;font-weight:600;color:var(--text-bright);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#acctbox .who span{font-size:11px;color:var(--soft);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#acctbox a{margin-left:auto;flex:none;font-size:12px;color:var(--dim);
text-decoration:underline}
#acctbox a:hover{color:var(--text)}
/* --- rail scan controls (SOAR-specific slot; harmless if absent) --- */
#scanside{display:flex;flex-direction:column;gap:8px;padding:0 2px}
#scanside button{width:100%;box-sizing:border-box;height:30px;border-radius:8px;
font-size:12.5px;padding:0 10px}
#scanside .scanstate{font-size:11px;color:var(--mute);padding:0 10px}
#scanside .scanstate b.on{color:var(--accent)}
#scanside .scanstate b.off{color:var(--danger)}
#scanctl{display:none}
/* --- top-right settings gear + dropdown --- */
#settings{position:relative}
#gearbtn{display:flex;align-items:center;justify-content:center;
width:32px;height:32px;border:1px solid var(--border-3);
border-radius:999px;color:var(--ctrl);cursor:pointer}
#gearbtn:hover{background:rgba(255,255,255,.08);color:#fff}
#sgmenu{display:none;position:absolute;right:0;top:40px;min-width:198px;
background:var(--surface);border:1px solid var(--border-2);border-radius:12px;
box-shadow:0 18px 44px -12px rgba(0,0,0,.75);padding:6px;z-index:60;text-align:left}
#sgmenu.open{display:block}
#sgmenu .sg-label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
color:var(--label);font-weight:600;padding:7px 10px 5px}
#sgmenu .sg-item{display:flex;align-items:center;gap:9px;padding:8px 10px;
border-radius:8px;font-size:13px;color:var(--ctrl);cursor:pointer;
text-decoration:none;white-space:nowrap}
#sgmenu .sg-item:hover{background:rgba(255,255,255,.07);color:#fff}
/* --- how-it-works drawer --- */
#infopanel{position:fixed;z-index:50;top:0;bottom:0;left:var(--rail-w);width:390px;
box-sizing:border-box;display:none;overflow-y:auto;
background:var(--drawer-bg);border-right:1px solid var(--border-2);
box-shadow:28px 0 70px -30px rgba(0,0,0,.85);padding:24px 26px}
#infopanel.open{display:block}
#infopanel .close{position:absolute;top:16px;right:18px;cursor:pointer;
color:var(--dim);font-size:15px}
#infopanel .close:hover{color:#fff}
#infopanel h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--accent);margin:22px 0 8px;font-weight:700}
#infopanel h3:first-of-type{margin-top:2px}
#infopanel p{font-size:13px;line-height:1.7;color:#b9bcb0;margin:0}
#infopanel b{color:var(--text-bright)}
/* --- top bar: one line, PRODUCT centered, controls right --- */
header{background:transparent;border-bottom:1px solid var(--border);
padding:20px 24px;text-align:center;display:flex;align-items:center;
justify-content:center;min-height:0;height:auto}
header .controls{position:absolute;right:20px;top:50%;transform:translateY(-50%);
display:flex;align-items:center;gap:12px}
header #rolebadge,header a#signout{display:none!important}
header img.logo{display:none}
header h1{font-size:18px;font-weight:800;letter-spacing:.18em;text-indent:0;color:var(--accent)}
header h1::before{content:var(--wordmark);color:var(--dim);margin-right:9px}
/* --- content column --- */
main{margin:22px auto;padding:0 26px;width:100%;box-sizing:border-box;
flex:1 0 auto;display:flex;flex-direction:column}
main>*{flex:0 0 auto}
#histcard{display:none}
#scanresult{background:var(--accent-10)!important;border:1px solid var(--accent-30)!important;
color:var(--text-bright)}
#proccard::after{opacity:.05;filter:none}
#proccard.busy::before{background:linear-gradient(110deg,transparent 45%,
var(--sweep) 50%,transparent 55%);background-size:250% 100%;background-repeat:no-repeat}
/* --- page footer: text only, page bottom --- */
#pagefoot{display:flex;align-items:center;justify-content:space-between;gap:16px;
margin-top:auto;padding:20px 28px 24px;font-size:13px;color:var(--dim)}
#pagefoot .pf-left{display:flex;align-items:center;gap:12px}
#pagefoot .dot{margin:0 8px;color:var(--faint)}
/* ------------------------------ LIGHT THEME -------------------------------- */
html.light #sidebar{background:#fff;border-right-color:#e4e7e0}
html.light #sidebar .nav-label{color:#8a9086}
html.light #sidebar a.nav{color:#4b5563}
html.light #sidebar a.nav.on{background:var(--accent-l);color:var(--accent-l-ink)}
html.light #sidebar a.nav.off{color:#b3b8ac}
html.light #sidebar a.nav.off .soon{border-color:#dcdfd6;color:#9aa090}
html.light #sidebar .sidefoot{color:#8a9086}
html.light #sidebar img.dk,html.light #pagefoot img.dk{display:none}
html.light #sidebar img.lt,html.light #pagefoot img.lt{display:inline}
html.light header{border-bottom-color:#e4e7e0}
html.light header h1{color:var(--accent-l-strong)}
html.light header h1::before{color:#6b7280}
html.light #rolebadge{background:#eef4e2!important;color:#4f7118!important}
html.light a#signout{color:#6b7280!important}
html.light #scanresult{background:#f5f8ef!important;border-color:#d9e3c8!important;color:#1f2937}
html.light #proccard::after{filter:invert(.85);opacity:.07}
html.light #proccard.busy::before{background:linear-gradient(110deg,
transparent 45%,rgba(63,101,51,.5) 50%,transparent 55%);
background-size:250% 100%;background-repeat:no-repeat}
html.light #pagefoot{color:#6b7280}
html.light #infopanel{background:#fff;border-right-color:#e4e7e0;
box-shadow:28px 0 70px -40px rgba(0,0,0,.25)}
html.light #infopanel h3{color:var(--accent-l-strong)}
html.light #infopanel p{color:#4b5563}
html.light #infopanel b{color:#111827}
html.light #infopanel .close{color:#6b7280}
html.light #scanside .scanstate{color:#8a9086}
html.light #scanside .scanstate b.on{color:var(--accent-l-strong)}
html.light #scanside .scanstate b.off{color:#a1352b}
html.light #sidebar a.nav:hover{background:#f3f5ef;color:#111827}
html.light #sidebar a.nav.on:hover{background:var(--accent-l);color:var(--accent-l-ink)}
html.light #sidebar a.nav.off:hover{background:none;color:#b3b8ac}
html.light #sidebar a.nav#infobtn{color:var(--accent-l-strong)}
html.light #sidebar a.nav#infobtn:hover{background:#f3f5ef;color:#4f7118}
html.light #acctbox{border-color:#e4e7e0}
html.light #acctbox .av{background:var(--accent-l);color:var(--accent-l-ink)}
html.light #acctbox .who b{color:#111827}
html.light #acctbox .who span{color:#8a9086}
html.light #acctbox a{color:#6b7280}
html.light #acctbox a:hover{color:#111827}
html.light #gearbtn{border-color:#d5dacd;color:#4b5563}
html.light #gearbtn:hover{background:#f3f5ef;color:#111827}
html.light #sgmenu{background:#fff;border-color:#e4e7e0;box-shadow:0 18px 44px -18px rgba(20,24,15,.35)}
html.light #sgmenu .sg-label{color:#8a9086}
html.light #sgmenu .sg-item{color:#4b5563}
html.light #sgmenu .sg-item:hover{background:#f3f5ef;color:#111827}
/* ------------------------------- RESPONSIVE -------------------------------- */
@media(max-width:900px){
body{padding-left:0}
#sidebar{position:static;width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
gap:10px;border-right:0;border-bottom:1px solid var(--border);padding:12px 16px}
#sidebar .wordmark{margin:0 8px 0 0}
#sidebar .nav-label,#sidebar .sidefoot,#acctbox{display:none}
#sidebar nav{flex-direction:row;gap:6px}
#sidebar>img{height:20px;margin:0}
#railend{margin-top:0;flex-direction:row;align-items:center}
#scanside{flex-direction:row;align-items:center}
#scanside button{width:auto;height:auto}
#pagefoot{flex-direction:column;align-items:flex-start}
#infopanel{left:0;width:100%}
}