/* ============================================================
TVLG Portal shared theme
Served from tvlg-id, proxied same-origin at /shell/v1/tvlg-theme.css
============================================================
Loaded by all three apps so Calls, Conflict, and Contracts share one
palette. Two jobs:
1. Define the canonical design tokens. These are lifted verbatim from Call
Analytics (app/static/css/app.css:5-54), which was chosen as the standard
because it is the most recently designed of the three.
2. Alias ConflictCheck's OWN token names onto those values. That is what
makes the migration cheap: every rule in ConflictCheck's 13 pages already
says var(--accent), var(--panel), var(--line) and so on, so deleting each
page's local :root block converges its palette without touching a single
layout rule. The union of tokens used across those 13 pages is aliased
below -- all 16 of them. Removing any alias will silently break whichever
page still uses it, so add, never subtract.
This file must stay a plain , never injected by JavaScript. If the
identity service is down, nginx 502s the shell script, the tab bar is absent,
and every page still renders with its own styles intact. */
:root {
/* ---- Canvas + surfaces ---- */
--bg-base: #f4f6fb;
--bg-surface: #f7f9fd;
--bg-card: #ffffff;
--bg-hover: #eef1f9;
--border: #e5e8f1;
--border-light: #d6dbe9;
/* ---- Ink ---- */
--text-primary: #1b2039;
--text-muted: #5a6280;
--text-dim: #969db6;
/* ---- Brand (TVLG orange) ---- */
--brand-orange: #ff7e00;
--accent: #ef6d00; /* deepened so white text on it passes contrast */
--accent-hover: #d96200;
--accent-active:#c25800;
--accent-soft: #fff3e8;
--accent-ink: #c25e00;
/* ---- Status ---- */
--green: #1f9d57; --green-bg: #e7f5ed; --green-solid: #22a55c;
--amber: #a5750c; --amber-bg: #fbf1d6; --amber-solid: #e0a12b;
--red: #d24141; --red-bg: #fcebeb; --red-solid: #de524d;
--blue: #2f7dcc; --blue-bg: #e8f1fb; --blue-solid: #3f8ede;
/* ---- Navy rail (sidebar + portal tab bar) ---- */
--sidebar-bg: #172441;
--sidebar-surface: #1e2d4f;
--sidebar-border: rgba(255, 255, 255, .14);
--sidebar-text: rgba(255, 255, 255, .98);
--sidebar-dim: rgba(255, 255, 255, .68);
--sidebar-active-bg:rgba(255, 255, 255, .10);
--sidebar-active: #ffffff;
--sidebar-hover: rgba(255, 255, 255, .06);
--sidebar-ink: #ffffff;
/* ---- Metrics ---- */
--sidebar-w: 240px;
--tvlg-bar-h: 44px;
--radius: 8px;
--radius-lg: 12px;
--shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
--shadow-md: 0 2px 4px rgba(16, 24, 40, .05), 0 6px 16px rgba(16, 24, 40, .08);
--shadow-lg: 0 8px 24px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .06);
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* ---- Semantic aliases used by the login page and shell ---- */
--danger: var(--red);
--danger-bg: var(--red-bg);
/* ============================================================
ConflictCheck compatibility aliases
Its pages hardcoded a warm-cream palette (--bg:#f4f1ea, --ink:#1f2b2d,
--accent:#d36d38). Mapping the old names onto the new values is what lets
each page drop its :root block and inherit the shared look for free.
============================================================ */
--bg: var(--bg-base);
--ink: var(--text-primary);
--ink-soft: var(--text-muted);
--panel: var(--bg-card);
--line: var(--border);
--accent-strong: var(--accent-active);
--ok: var(--green);
--warn: var(--amber);
--danger-strong: #a52d2d;
--radius-md: var(--radius);
--radius-sm: 6px;
/* NOTE: --accent-soft is intentionally NOT re-aliased. ConflictCheck's admin
pages set it to #dfe5dd (a grey-green), but it is only ever used as a soft
tint background, so the shared warm tint above reads correctly in the same
slots. --radius-lg and --shadow are likewise already defined above with
values that suit both. */
}
/* ============================================================
Portal tab bar
Rendered by tvlg-shell.js. Scoped under .tvlg- so it cannot collide with
any host app's rules.
============================================================ */
.tvlg-bar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 2147483000; /* above app chrome, below native browser UI */
height: var(--tvlg-bar-h);
display: flex;
align-items: center;
gap: 4px;
padding: 0 12px;
background: var(--sidebar-bg);
color: var(--sidebar-text);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1;
box-shadow: 0 1px 0 var(--sidebar-border);
box-sizing: border-box;
}
.tvlg-bar * { box-sizing: border-box; }
.tvlg-bar__brand {
display: flex;
align-items: center;
gap: 8px;
padding-right: 12px;
margin-right: 4px;
border-right: 1px solid var(--sidebar-border);
flex: none;
}
.tvlg-bar__brand img { height: 20px; width: auto; display: block; }
.tvlg-bar__brand span {
font-weight: 600;
color: var(--sidebar-ink);
white-space: nowrap;
}
.tvlg-bar__tabs {
display: flex;
align-items: center;
gap: 2px;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.tvlg-bar__tabs::-webkit-scrollbar { display: none; }
.tvlg-bar__tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
border-radius: var(--radius);
color: var(--sidebar-dim);
text-decoration: none;
font-weight: 500;
white-space: nowrap;
transition: background-color .12s ease, color .12s ease;
}
.tvlg-bar__tab:hover { background: var(--sidebar-hover); color: var(--sidebar-active); }
.tvlg-bar__tab:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: -2px; }
.tvlg-bar__tab svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.tvlg-bar__tab--current {
background: var(--sidebar-active-bg);
color: var(--sidebar-active);
font-weight: 600;
box-shadow: inset 0 -2px 0 var(--brand-orange);
}
.tvlg-bar__tab--current svg { opacity: 1; }
.tvlg-bar__user {
display: flex;
align-items: center;
gap: 10px;
flex: none;
padding-left: 12px;
margin-left: 4px;
border-left: 1px solid var(--sidebar-border);
}
.tvlg-bar__name {
color: var(--sidebar-dim);
font-size: 13px;
max-width: 22ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tvlg-bar__signout {
color: var(--sidebar-dim);
text-decoration: none;
font-size: 13px;
padding: 6px 10px;
border-radius: var(--radius);
}
.tvlg-bar__signout:hover { background: var(--sidebar-hover); color: var(--sidebar-active); }
/* The bar is position:fixed so it cannot be pushed around by app layout, which
means the host page needs top padding. tvlg-shell.js sets .tvlg-has-bar on
rather than writing an inline style, so an app can override it if its
own layout needs something different.
Every rule below is scoped to .tvlg-has-bar, so when the shell renders
nothing -- IdP unreachable, kill switch off, or running inside the GHL
iframe -- the class is absent and NONE of this applies. An app's layout is
never touched by a bar that is not there. */
.tvlg-has-bar body { padding-top: var(--tvlg-bar-h); }
/* Viewport-height layouts have to give the bar its 44px back, or they overflow
by exactly that much and produce a phantom scrollbar. These selectors are
deliberately app-specific: there are three apps, they are named here, and a
generic `[class*=100vh]` rule does not exist. Adding a fourth app means
adding its shell selector here.
Call Analytics -- app/templates/base.html: .app-shell is a flex row and
.sidebar is position:sticky;top:0;height:100vh. */
.tvlg-has-bar .app-shell { min-height: calc(100vh - var(--tvlg-bar-h)); }
.tvlg-has-bar .sidebar {
top: var(--tvlg-bar-h);
height: calc(100vh - var(--tvlg-bar-h));
}
/* Contracts -- MUI. Its Layout uses 100vh on the root box and a fixed AppBar. */
.tvlg-has-bar .MuiAppBar-root { top: var(--tvlg-bar-h); }
.tvlg-has-bar .MuiDrawer-paper { top: var(--tvlg-bar-h); height: calc(100vh - var(--tvlg-bar-h)); }
/* ConflictCheck -- renderAccountChrome() in intake-shared.js injects a
position:fixed "signed in as..." pill at top:16px;right:16px, which the bar
would sit on top of. Nudge it below rather than deleting it: it still carries
Logout and the admin links (Users / Queue / Diagnostics) that the bar does
not replace until the ConflictCheck cutover.
Two classes beats the injected rule's one, so this wins whatever the order
the runtime