/* ==========================================================================
   COMPANY LOOKS. Each company wears the look of the live portal it replaces:
     ai_prime  (GlobalFX)       black sidebar, gold accent
     aura      (Aura Prime FX)  forest-green sidebar, olive-green accent
     eprimex   (EprimeX)        white sidebar with a mint wash, emerald accent, Poppins
   Loads after vivid.css. It applies while the palette is "Company look" (the default for a company page);
   choosing another palette from the top-bar menu gives the neutral Liqdity look. Light and dark both work.
   Only classes and tokens: no inline styles anywhere (strict CSP).
   ========================================================================== */

/* ── Shared: flat, calm, no background glow ───────────────────────────────── */
:root[data-palette="brand"][data-co] body { background: var(--bg); }
:root[data-palette="brand"][data-co] .menu a { border-radius: 10px; --tc: var(--ink-3); }
:root[data-palette="brand"][data-co] .menu a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
:root[data-palette="brand"][data-co] .menu a[aria-current="page"] { box-shadow: none; }
:root[data-palette="brand"][data-co] .menu a[aria-current="page"] .ico { color: currentColor; }
:root[data-palette="brand"][data-co] .menu__title { color: var(--ink-3); }
:root[data-palette="brand"][data-co] .top { backdrop-filter: none; }
:root[data-palette="brand"][data-co] .btn { box-shadow: none; }
:root[data-palette="brand"][data-co] .btn:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--b1) 28%, transparent); }
:root[data-palette="brand"][data-co] .wordmark b { background: none; color: var(--accent); -webkit-text-fill-color: currentColor; }
:root[data-palette="brand"][data-co] .badge { background: var(--accent); }
:root[data-palette="brand"][data-co] .tabs a[aria-current="page"] { background: var(--accent); box-shadow: none; }
/* decorative colour variants follow the company accent so every page stays on-brand; red / green / amber keep their meaning */
:root[data-palette="brand"][data-co] .btn--violet, :root[data-palette="brand"][data-co] .btn--pink, :root[data-palette="brand"][data-co] .btn--info { --b1: var(--accent); --b2: var(--accent-b); }

/* ══════════════ GlobalFX · company "ai_prime" ══════════════════════════════ */
:root[data-palette="brand"][data-co="ai_prime"] { --accent: #b88418; --accent-b: #a07014; --accent-2: #946a0f; --accent-bg: rgba(184,132,24,.11); }
:root[data-palette="brand"][data-co="ai_prime"][data-theme="light"] {
  --bg: #f6f6f4; --card: #ffffff; --card-2: #f7f7f5; --line: #e6e6e2; --line-2: #eeeeea;
  --ink: #141414; --ink-2: #4a4a47; --ink-3: #85857f;
  --c1: #4472f6; --c2: #16a06a; --c3: #d99a1f; --c4: #8b5cf6; --c5: #0891b2; --c6: #e0524f;
}
:root[data-palette="brand"][data-co="ai_prime"][data-theme="dark"] {
  --accent: #d4a02a; --accent-b: #b88418; --accent-2: #e5bb55; --accent-bg: rgba(212,160,42,.15);
  --bg: #0c0c0c; --card: #171717; --card-2: #1f1f1f; --line: #2a2a2a; --line-2: #202020;
  --ink: #f3f1ea; --ink-2: #c9c6bc; --ink-3: #8b887f;
}
/* the sidebar is black in both modes; its own tokens keep the text readable */
:root[data-palette="brand"][data-co="ai_prime"] .side {
  --side: #1a1a1a; --card: #262626; --card-2: #2b2b2b; --line: #2c2c2c; --line-2: #242424;
  --ink: #f2f2f0; --ink-2: #d3d3cf; --ink-3: #8f8f8a; --accent-2: #e5bb55;
  background: #1a1a1a; border-right-color: #1a1a1a;
}
:root[data-palette="brand"][data-co="ai_prime"] .side__foot { background: #151515; }
:root[data-palette="brand"][data-co="ai_prime"] .side .find input { background: #151515; border-color: #333; }
:root[data-palette="brand"][data-co="ai_prime"] .menu a:hover { background: #242424; }
:root[data-palette="brand"][data-co="ai_prime"] .menu a[aria-current="page"] { background: #2b2b2b; color: #fff; box-shadow: inset 3px 0 0 #d4a02a; }
:root[data-palette="brand"][data-co="ai_prime"] .menu a[aria-current="page"] .ico { color: #d4a02a; }
:root[data-palette="brand"][data-co="ai_prime"] .side .wordmark b { color: #d4a02a; }
:root[data-palette="brand"][data-co="ai_prime"] .side .avatar { background: #d4a02a; color: #1a1a1a; }
/* members get the black top bar the live member area has; staff keep a white one */
:root[data-palette="brand"][data-co="ai_prime"] body.area-client .top {
  background: #1a1a1a; border-bottom-color: #1a1a1a;
  --card: #262626; --card-2: #2e2e2e; --line: #343434; --ink: #f2f2f0; --ink-2: #d3d3cf; --ink-3: #9a9a94;
}
:root[data-palette="brand"][data-co="ai_prime"] body.area-client .top .brandtag { background: rgba(212,160,42,.18); color: #e5bb55; }
:root[data-palette="brand"][data-co="ai_prime"] body.area-client .top .avatar { background: #d4a02a; color: #1a1a1a; }
:root[data-palette="brand"][data-co="ai_prime"][data-theme="light"] body.area-admin .top { background: #ffffff; }
:root[data-palette="brand"][data-co="ai_prime"][data-theme="dark"] body.area-admin .top { background: #101010; }
:root[data-palette="brand"][data-co="ai_prime"] .ledger th { background: color-mix(in srgb, var(--accent) 7%, var(--card-2)); }

/* ══════════════ Aura Prime FX · company "aura" ═════════════════════════════ */
:root[data-palette="brand"][data-co="aura"] { --accent: #6a8f32; --accent-b: #55782a; --accent-2: #4f7324; --accent-bg: rgba(106,143,50,.12); }
:root[data-palette="brand"][data-co="aura"][data-theme="light"] {
  --bg: #f3f4f6; --card: #ffffff; --card-2: #f8f9fa; --line: #e3e6ea; --line-2: #eceef1;
  --ink: #111827; --ink-2: #4b5563; --ink-3: #7b8493;
  --c1: #4f7324; --c2: #16a06a; --c3: #d99a1f; --c4: #8b5cf6; --c5: #0891b2; --c6: #e0524f;
}
:root[data-palette="brand"][data-co="aura"][data-theme="dark"] {
  --accent: #7da63b; --accent-b: #5f8a2a; --accent-2: #a3c866; --accent-bg: rgba(125,166,59,.16);
  --bg: #0a120a; --card: #111b10; --card-2: #172418; --line: #243322; --line-2: #1a271a;
  --ink: #eef4ea; --ink-2: #bccab5; --ink-3: #829179;
}
:root[data-palette="brand"][data-co="aura"] .side {
  --side: #2c4f1a; --card: rgba(255,255,255,.10); --card-2: rgba(255,255,255,.14); --line: rgba(255,255,255,.18); --line-2: rgba(255,255,255,.12);
  --ink: #ffffff; --ink-2: rgba(255,255,255,.88); --ink-3: rgba(255,255,255,.66); --accent-2: #cfe6a3;
  background: linear-gradient(180deg, #204514 0%, #33581b 45%, #63882f 100%); border-right-color: transparent;
}
:root[data-palette="brand"][data-co="aura"][data-theme="dark"] .side { background: linear-gradient(180deg, #0f2a0b 0%, #1b3a10 50%, #3d5f1c 100%); }
:root[data-palette="brand"][data-co="aura"] .side .find input { background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.22); }
:root[data-palette="brand"][data-co="aura"] .side__foot { background: rgba(0,0,0,.12); }
:root[data-palette="brand"][data-co="aura"] .menu a:hover { background: rgba(255,255,255,.10); }
:root[data-palette="brand"][data-co="aura"] .menu a[aria-current="page"] { background: rgba(255,255,255,.18); color: #fff; }
:root[data-palette="brand"][data-co="aura"] .side .wordmark b { color: #cfe6a3; }
:root[data-palette="brand"][data-co="aura"] .side .avatar { background: rgba(255,255,255,.22); color: #fff; }
:root[data-palette="brand"][data-co="aura"] .side .badge { background: #ef4444; color: #fff; }
:root[data-palette="brand"][data-co="aura"] body.area-client .top {
  background: linear-gradient(90deg, #0e330c 0%, #3a5f1e 55%, #6a8f32 100%); border-bottom-color: transparent;
  --card: #2f5119; --card-2: #386021; --line: rgba(255,255,255,.28); --ink: #ffffff; --ink-2: rgba(255,255,255,.9); --ink-3: rgba(255,255,255,.72);
}
:root[data-palette="brand"][data-co="aura"] body.area-client .top .brandtag { background: rgba(255,255,255,.18); color: #fff; }
:root[data-palette="brand"][data-co="aura"] body.area-client .top .avatar { background: rgba(255,255,255,.24); color: #fff; }
:root[data-palette="brand"][data-co="aura"][data-theme="light"] body.area-admin .top { background: #f9fafb; }
:root[data-palette="brand"][data-co="aura"][data-theme="dark"] body.area-admin .top { background: #0d160c; }
:root[data-palette="brand"][data-co="aura"] .ledger th { background: color-mix(in srgb, var(--accent) 8%, var(--card-2)); }

/* ══════════════ EprimeX · company "eprimex" ════════════════════════════════ */
:root[data-palette="brand"][data-co="eprimex"] { --accent: #10b981; --accent-b: #0d9488; --accent-2: #047857; --accent-bg: rgba(16,185,129,.12); --f-body: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
:root[data-palette="brand"][data-co="eprimex"][data-theme="light"] {
  --bg: #f5f4f0; --side: #ffffff; --card: #ffffff; --card-2: #f7faf8; --line: #e6ebe8; --line-2: #eef2f0;
  --ink: #101828; --ink-2: #475467; --ink-3: #7c8794;
  --c1: #4f6bed; --c2: #10b981; --c3: #f59e0b; --c4: #8b5cf6; --c5: #0d9488; --c6: #ef4444;
}
:root[data-palette="brand"][data-co="eprimex"][data-theme="dark"] {
  --accent: #34d399; --accent-b: #14b8a6; --accent-2: #6ee7b7; --accent-bg: rgba(52,211,153,.15);
  --bg: #07100d; --side: #0a1612; --card: #0e1b16; --card-2: #132520; --line: #1d3029; --line-2: #15251f;
  --ink: #e8f5ef; --ink-2: #b6cdc3; --ink-3: #7c978b;
}
:root[data-palette="brand"][data-co="eprimex"][data-theme="light"] .side { background: linear-gradient(180deg, #effaf6 0%, #ffffff 280px); border-right-color: #e6ebe8; }
:root[data-palette="brand"][data-co="eprimex"][data-theme="dark"] .side { background: linear-gradient(180deg, #0d201a 0%, #0a1612 280px); }
:root[data-palette="brand"][data-co="eprimex"] .menu a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-2); box-shadow: inset 3px 0 0 var(--accent); }
:root[data-palette="brand"][data-co="eprimex"] .menu a[aria-current="page"] .ico { color: var(--accent); }
:root[data-palette="brand"][data-co="eprimex"] .side .wordmark b { color: var(--accent); }
:root[data-palette="brand"][data-co="eprimex"] .top { background: var(--card); }
:root[data-palette="brand"][data-co="eprimex"][data-theme="dark"] .top { background: #0a1612; }
:root[data-palette="brand"][data-co="eprimex"] .stat, :root[data-palette="brand"][data-co="eprimex"] .kpi { background: linear-gradient(135deg, color-mix(in srgb, var(--tc, var(--accent)) 7%, var(--card)), var(--card) 60%); }
:root[data-palette="brand"][data-co="eprimex"] .ledger th { background: color-mix(in srgb, var(--accent) 7%, var(--card-2)); }
:root[data-palette="brand"][data-co="eprimex"] .btn--solid, :root[data-palette="brand"][data-co="eprimex"][data-btn="solid"] .btn:not(.btn--ghost):not(.btn--outline):not(.btn--soft) { border-radius: 10px; }

/* ── Company tags and the "Company look" swatch ───────────────────────────── */
.brand-aura     { background: rgba(106,143,50,.16);  color: #4f7324; }
.brand-aiprime  { background: rgba(184,132,24,.16);  color: #946a0f; }
.brand-eprimex  { background: rgba(16,185,129,.14);  color: #047857; }
:root[data-theme="dark"] .brand-aura    { color: #a3c866; }
:root[data-theme="dark"] .brand-aiprime { color: #e5bb55; }
:root[data-theme="dark"] .brand-eprimex { color: #6ee7b7; }
.sw--brand { background: linear-gradient(135deg, #6d4aff, #2563eb); }
:root[data-co="ai_prime"] .sw--brand { background: linear-gradient(135deg, #1a1a1a 50%, #b88418 50%); }
:root[data-co="aura"]     .sw--brand { background: linear-gradient(135deg, #204514 50%, #6a8f32 50%); }
:root[data-co="eprimex"]  .sw--brand { background: linear-gradient(135deg, #effaf6 50%, #10b981 50%); border-color: var(--line); }
:root[data-palette="brand"] .sw[data-palette-set="brand"] { border-color: var(--ink); outline: 2px solid var(--card); outline-offset: -4px; }

/* ── Cards: match each live portal ────────────────────────────────────────────
   GlobalFX and Aura: flat white card, 1px border, soft shadow; only a highlighted card (accent / good / warn / bad) has a 3px bar, on the LEFT.
   EprimeX: tinted card, small uppercase label at top-left, icon at top-right, short coloured line along the bottom-left. */
:root[data-palette="brand"][data-co="ai_prime"] .stat, :root[data-palette="brand"][data-co="aura"] .stat { box-shadow: 0 1px 2px rgba(16,24,40,.05); border-radius: 12px; }
:root[data-palette="brand"][data-co="ai_prime"] .stat::before, :root[data-palette="brand"][data-co="aura"] .stat::before { display: none; }
:root[data-palette="brand"][data-co="ai_prime"] .stat:hover, :root[data-palette="brand"][data-co="aura"] .stat:hover { transform: none; box-shadow: 0 4px 14px rgba(16,24,40,.08); }
:root[data-palette="brand"][data-co="ai_prime"] .stat--accent, :root[data-palette="brand"][data-co="aura"] .stat--accent { border-left: 3px solid var(--accent); }
:root[data-palette="brand"][data-co="ai_prime"] .stat--pos, :root[data-palette="brand"][data-co="aura"] .stat--pos { border-left: 3px solid var(--pos); }
:root[data-palette="brand"][data-co="ai_prime"] .stat--warn, :root[data-palette="brand"][data-co="aura"] .stat--warn { border-left: 3px solid var(--warn); }
:root[data-palette="brand"][data-co="ai_prime"] .stat--neg, :root[data-palette="brand"][data-co="aura"] .stat--neg { border-left: 3px solid var(--neg); }
:root[data-palette="brand"][data-co="ai_prime"] .sheet, :root[data-palette="brand"][data-co="aura"] .sheet { border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }

:root[data-palette="brand"][data-co="eprimex"] .stat { border-radius: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
:root[data-palette="brand"][data-co="eprimex"] .stat__top { flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; font: 600 11px/1.3 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
:root[data-palette="brand"][data-co="eprimex"] .stat__val { margin-top: 14px; }
:root[data-palette="brand"][data-co="eprimex"] .stat::before { inset: auto auto 0 0; width: 64px; height: 2px; }
:root[data-palette="brand"][data-co="eprimex"] .stat:hover { transform: none; }
:root[data-palette="brand"][data-co="eprimex"] .sheet { border-radius: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }