/* =============================================================
KPI Reports — design system v3 (light + dark) — May 2026 redesign
Brand: deep wine accent on warm-bone surfaces.
Typography: Geist (UI) + Geist Mono (tabular numbers).
Variable names preserved from v2 for compatibility.
============================================================= */
/* ===== Self-hosted fonts =====
Variable-weight Geist subsets served from /fonts/ — the strict CSP
(default-src 'self') blocks Google Fonts, so the files live locally. */
@font-face {
font-family: "Geist";
src: url("/fonts/geist-latin.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Geist";
src: url("/fonts/geist-latin-ext.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Geist Mono";
src: url("/fonts/geist-mono-latin.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Geist Mono";
src: url("/fonts/geist-mono-latin-ext.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ===== Tokens — Light (default) ===== */
:root {
/* Brand — deep wine */
--brand-h: 18;
--brand-2-h: 155; /* forest green */
--accent: oklch(0.42 0.13 var(--brand-h)); /* deep wine */
--accent-strong: oklch(0.36 0.13 var(--brand-h));
--accent-soft: oklch(0.94 0.04 var(--brand-h));
--accent-ink: oklch(0.42 0.13 var(--brand-h));
--accent-softer: oklch(0.97 0.02 var(--brand-h));
--accent-2: oklch(0.55 0.12 var(--brand-2-h)); /* forest green for positive states */
--accent-2-soft: oklch(0.94 0.04 var(--brand-2-h));
--accent-2-ink: oklch(0.42 0.13 var(--brand-2-h));
/* Surfaces — warm bone */
--bg: oklch(0.985 0.004 70);
--surface: oklch(0.995 0.003 70);
--surface-2: oklch(0.97 0.005 70);
--surface-3: oklch(0.955 0.005 70);
--surface-muted: oklch(0.965 0.005 70); /* legacy alias */
/* Ink scale */
--ink: oklch(0.18 0.005 60);
--ink-2: oklch(0.36 0.005 60);
--ink-3: oklch(0.46 0.005 60);
--ink-4: oklch(0.72 0.005 60);
--muted: oklch(0.46 0.005 60);
--muted-2: oklch(0.46 0.005 60);
/* Lines */
--line: oklch(0.92 0.005 70);
--line-2: oklch(0.95 0.004 70);
--border: var(--line);
--border-strong: oklch(0.86 0.006 70);
/* Semantic */
--success: oklch(0.60 0.14 150);
--success-soft: oklch(0.94 0.07 150);
--success-ink: oklch(0.40 0.14 150);
--warn: oklch(0.66 0.16 70);
--warn-soft: oklch(0.94 0.08 80);
--warn-ink: oklch(0.46 0.14 70);
--danger: oklch(0.58 0.20 25);
--danger-soft: oklch(0.95 0.05 25);
--danger-ink: oklch(0.42 0.18 25);
--info: oklch(0.60 0.14 240);
--info-soft: oklch(0.95 0.06 240);
--info-ink: oklch(0.40 0.16 240);
/* Legacy aliases referenced elsewhere */
--pos: var(--success);
--neg: var(--danger);
/* Chart palette */
--chart-in: oklch(0.66 0.14 230);
--chart-out: oklch(0.66 0.14 160);
--chart-3: oklch(0.66 0.14 310);
/* Radii */
--radius: 16px;
--radius-sm: 10px;
--radius-xs: 6px;
--radius-pill: 999px;
/* Type */
--font-ui: "Geist", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
/* Density */
--density-y: 18px;
--density-x: 22px;
/* Shadows */
--shadow-sm: 0 1px 2px oklch(0.2 0.02 60 / 0.05), 0 1px 1px oklch(0.2 0.02 60 / 0.04);
--shadow: 0 2px 4px oklch(0.2 0.02 60 / 0.05), 0 8px 24px oklch(0.2 0.02 60 / 0.06);
--shadow-lg: 0 12px 32px oklch(0.2 0.02 60 / 0.10), 0 4px 8px oklch(0.2 0.02 60 / 0.05);
--ring: 0 0 0 3px oklch(0.494 0.148 var(--brand-h) / 0.18);
}
/* ===== Tokens — Dark ===== */
:root[data-theme="dark"] {
color-scheme: dark;
--bg: oklch(0.155 0.008 60);
--surface: oklch(0.195 0.008 60);
--surface-2: oklch(0.225 0.008 60);
--surface-3: oklch(0.265 0.009 55);
--surface-muted: oklch(0.235 0.009 60);
--ink: oklch(0.94 0.006 80);
--ink-2: oklch(0.82 0.008 75);
--muted: oklch(0.65 0.010 70);
--muted-2: oklch(0.65 0.010 70);
--line: oklch(0.32 0.010 60);
--line-2: oklch(0.27 0.009 60);
/* Brighter brand for dark contrast */
--accent: oklch(0.62 0.15 var(--brand-h));
--accent-strong: oklch(0.70 0.16 var(--brand-h));
--accent-soft: oklch(0.30 0.10 var(--brand-h) / 0.55);
--accent-ink: oklch(0.78 0.13 var(--brand-h));
--accent-softer: oklch(0.26 0.08 var(--brand-h) / 0.40);
--accent-2: oklch(0.72 0.14 var(--brand-2-h));
--accent-2-soft: oklch(0.36 0.10 var(--brand-2-h) / 0.45);
--accent-2-ink: oklch(0.82 0.13 var(--brand-2-h));
--ink-3: oklch(0.65 0.010 70);
--ink-4: oklch(0.48 0.010 70);
--border-strong: oklch(0.42 0.010 60);
--success: oklch(0.74 0.16 150);
--success-soft: oklch(0.34 0.09 150 / 0.5);
--success-ink: oklch(0.82 0.16 150);
--warn: oklch(0.76 0.16 80);
--warn-soft: oklch(0.36 0.09 80 / 0.5);
--warn-ink: oklch(0.85 0.15 80);
--danger: oklch(0.72 0.18 25);
--danger-soft: oklch(0.36 0.10 25 / 0.55);
--danger-ink: oklch(0.84 0.17 25);
--info: oklch(0.74 0.14 240);
--info-soft: oklch(0.34 0.10 240 / 0.5);
--info-ink: oklch(0.84 0.13 240);
--pos: var(--success);
--neg: var(--danger);
--chart-in: oklch(0.78 0.13 230);
--chart-out: oklch(0.78 0.13 160);
--chart-3: oklch(0.78 0.13 310);
--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.5), 0 0 0 1px oklch(1 0 0 / 0.025) inset;
--shadow: 0 8px 24px oklch(0 0 0 / 0.45), 0 0 0 1px oklch(1 0 0 / 0.03) inset;
--shadow-lg: 0 16px 40px oklch(0 0 0 / 0.55), 0 0 0 1px oklch(1 0 0 / 0.04) inset;
--ring: 0 0 0 3px oklch(0.62 0.17 var(--brand-h) / 0.30);
}
/* Auto dark mode without an explicit choice is handled by the inline
pre-paint script in index.html / login.html, which sets
data-theme="dark" when prefers-color-scheme: dark and no saved value.
The :root[data-theme="dark"] block above is the single source of
truth for dark tokens — do not duplicate it inside @media. */
/* ===== Reset & base ===== */
* { box-sizing: border-box; }
html, body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-ui);
font-feature-settings: "cv11", "ss01";
-webkit-font-smoothing: antialiased;
font-size: 15px;
line-height: 1.5;
transition: background-color 0.18s ease, color 0.18s ease;
}
body { min-height: 100vh; }
button { font-family: inherit; color: inherit; }
.hidden { display: none !important; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.num,
.tabular { font-family: var(--font-mono); font-feature-settings: "tnum"; letter-spacing: -0.005em; }
.muted { color: var(--muted); }
/* Period select that's styled like a ghost button (used in recordings) */
select.btn.ghost {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 10px 10px;
padding-right: 24px !important;
}
:root[data-theme="dark"] select.btn.ghost { color: var(--ink); }
/* ===== App shell ===== */
.app {
max-width: 1480px;
margin: 0 auto;
padding: 16px clamp(14px, 4vw, 28px) 80px;
}
/* ===== Topbar — sticky, subtle backdrop ===== */
.topbar {
position: sticky;
top: 0;
z-index: 30;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 16px;
margin: -16px clamp(-14px, -4vw, -28px) 18px;
padding-left: clamp(14px, 4vw, 28px);
padding-right: clamp(14px, 4vw, 28px);
background: color-mix(in oklab, var(--bg) 78%, transparent);
backdrop-filter: saturate(160%) blur(12px);
-webkit-backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
}
.topbar-left {
display: flex;
align-items: center;
gap: clamp(16px, 3vw, 28px);
min-width: 0;
}
.brand {
display: flex; align-items: center; gap: 12px;
font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
color: inherit; text-decoration: none;
flex-shrink: 0;
}
.brand-logo {
height: 60px;
width: auto;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.top-right { display: flex; align-items: center; gap: 8px; }
/* Theme toggle button (sun/moon) */
.theme-toggle {
width: 36px; height: 36px;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: var(--surface);
display: grid; place-items: center;
cursor: pointer;
color: var(--muted);
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
position: relative;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); background: var(--surface-2); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
.icon-btn {
width: 36px; height: 36px;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: var(--surface);
display: grid; place-items: center;
cursor: pointer;
color: var(--muted);
transition: all 0.15s;
position: relative;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-2); }
.icon-btn .dot {
position: absolute; top: 8px; right: 8px;
width: 7px; height: 7px;
background: var(--accent); border-radius: 50%;
border: 2px solid var(--surface);
}
.user-chip {
display: flex; align-items: center; gap: 10px;
padding: 4px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
}
.user-chip .avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-ink);
display: grid; place-items: center;
font-size: 12px; font-weight: 700;
}
.user-chip .u-meta { display: flex; flex-direction: column; line-height: 1.1; padding-right: 4px; }
.user-chip .u-name { font-size: 13px; font-weight: 600; }
.user-chip .u-role { font-size: 11px; color: var(--muted); }
.user-chip button.signout {
border: 0; background: transparent; cursor: pointer;
color: var(--muted); font-size: 12px;
padding: 6px 12px;
border-left: 1px solid var(--line);
border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
transition: color 0.15s ease, background 0.15s ease;
}
.user-chip button.signout:hover { color: var(--danger); background: var(--danger-soft); }
/* ===== Page header ===== */
.page-head {
display: flex; align-items: flex-end; justify-content: space-between;
margin: 4px 0 22px;
gap: 20px;
}
.page-title h1 {
margin: 0 0 4px;
font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
color: var(--ink);
}
.page-title p { margin: 0; color: var(--muted); font-size: 13px; }
.controls { display: flex; gap: 8px; align-items: center; }
.controls:empty { display: none; }
/* ===== Segmented control ===== */
.seg {
display: flex;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 3px; gap: 2px;
}
.seg button {
border: 0; background: transparent;
padding: 6px 12px;
font-size: 12px; font-weight: 500;
color: var(--muted);
border-radius: calc(var(--radius-sm) - 4px);
cursor: pointer;
transition: color 0.12s ease, background 0.12s ease;
}
.seg button:hover { color: var(--ink); }
.seg button.active {
background: var(--surface-3);
color: var(--ink);
box-shadow: var(--shadow-sm);
}
/* ===== Buttons ===== */
.btn {
border: 1px solid var(--line);
background: var(--surface);
padding: 8px 14px;
border-radius: var(--radius-sm);
font-size: 13px; font-weight: 500;
color: var(--ink);
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
transition: all 0.15s ease;
}
.btn:hover { border-color: var(--ink-2); background: var(--surface-2); }
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
box-shadow: 0 4px 12px oklch(0.494 0.148 var(--brand-h) / 0.25);
}
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.ghost {
background: transparent;
border-color: transparent;
color: var(--muted);
}
.btn.ghost:hover { color: var(--ink); background: var(--surface-2); border-color: transparent; }
.btn.danger {
color: var(--danger);
border-color: color-mix(in oklab, var(--danger) 35%, var(--line));
}
.btn.danger:hover { background: var(--danger-soft); }
.btn.full { width: 100%; justify-content: center; padding: 10px 14px; }
/* ===== Layout grids ===== */
.kpi-strip {
display: grid;
grid-template-columns: 1.6fr repeat(5, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.row-2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; }
.row-3 { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; }
/* ===== Card ===== */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--density-y) var(--density-x);
box-shadow: var(--shadow-sm);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card.tight { padding: 16px 18px; }
.card.flush { padding: 0; overflow: hidden; }
.card-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px; gap: 16px;
}
.card-title {
font-size: 14px; font-weight: 600;
color: var(--ink);
display: flex; align-items: center; gap: 8px;
letter-spacing: -0.005em;
}
.card-sub { font-size: 12px; color: var(--muted); font-weight: 500; }
/* ===== Chip ===== */
.chip {
background: var(--surface-2);
color: var(--muted);
padding: 3px 9px;
border-radius: var(--radius-pill);
font-size: 11px; font-weight: 500;
border: 1px solid var(--line-2);
}
.chip.warm { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
/* ===== KPI cards ===== */
/* Default: single-column flex (used by the campaign sub-views).
Gauge variant kicks in via :has(.kpi-arc) below. */
.kpi {
display: flex; flex-direction: column;
padding: 16px 18px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
gap: 6px;
min-height: 124px;
position: relative;
overflow: hidden;
}
/* Gauge variant: 2-col grid (meta + arc). Scoped via :has() so only
tiles that opt in get the new layout — preserves the older campaign
dashboards' flat-tile rendering. */
.kpi:has(.kpi-arc) {
display: grid;
grid-template-columns: minmax(0, 1fr) 58px;
gap: 14px;
align-items: center;
}
.kpi-meta {
display: flex; flex-direction: column;
gap: 6px;
min-width: 0;
height: 100%;
}
/* Arc gauge slot — sized for the densest desktop layout (6 cols).
Grows at the 3-col breakpoint where each tile has more room. */
.kpi-arc {
display: flex;
align-items: center;
justify-content: center;
width: 58px;
align-self: stretch;
}
.kpi-arc-svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.kpi-arc-track {
fill: none;
stroke: var(--surface-3);
stroke-width: 8;
stroke-linecap: round;
}
.kpi-arc-prog {
fill: none;
stroke-width: 8;
stroke-linecap: round;
transition: d 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kpi-arc-cap {
fill: var(--surface);
stroke-width: 2.4;
}
/* Hero variant: white-on-translucent so it reads on the wine gradient */
.kpi.hero .kpi-arc-track { stroke: rgba(255,255,255,0.22); }
.kpi.hero .kpi-arc-prog { stroke: rgba(255,255,255,0.95) !important; }
.kpi.hero .kpi-arc-cap { fill: #fff; stroke: #fff !important; }
.kpi.hero {
background: linear-gradient(140deg,
var(--accent) 0%,
oklch(0.42 0.16 var(--brand-h)) 100%);
color: white;
border-color: transparent;
padding: 18px 20px;
}
.kpi.hero::after {
content: ""; position: absolute; inset: auto -24px -40px auto;
width: 180px; height: 180px;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 70%);
pointer-events: none;
}
.kpi.hero .k-label,
.kpi.hero .k-foot { color: rgba(255,255,255,0.8); }
.kpi.hero .k-val { color: white; }
.kpi.hero .k-info { color: rgba(255,255,255,0.6); }
.kpi.hero .k-info:hover,
.kpi.hero .k-info.active { background: rgba(255,255,255,0.16); color: #fff; }
.kpi.k-warn {
border-color: color-mix(in oklab, var(--warn) 50%, var(--line));
background: color-mix(in oklab, var(--warn-soft) 60%, var(--surface));
}
.kpi.k-alert {
border-color: color-mix(in oklab, var(--danger) 50%, var(--line));
background: color-mix(in oklab, var(--danger-soft) 60%, var(--surface));
}
.k-head {
display: flex; align-items: center; gap: 6px;
justify-content: space-between;
}
.k-title {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
}
.k-label {
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 11px; font-weight: 600;
color: var(--muted);
}
.k-role {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
padding: 2px 6px;
border: 1px solid var(--line-2);
border-radius: var(--radius-xs);
color: var(--muted);
background: var(--surface-2);
font-size: 10px;
font-weight: 650;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.k-info {
border: 0; background: transparent;
width: 20px; height: 20px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
color: var(--muted-2);
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
flex-shrink: 0;
}
.k-info:hover,
.k-info.active { background: var(--surface-2); color: var(--ink); }
.k-val {
font-size: 30px; font-weight: 700;
letter-spacing: -0.025em;
font-family: var(--font-mono);
font-feature-settings: "tnum";
line-height: 1.05;
color: var(--ink);
}
.kpi.hero .k-val { font-size: 42px; }
/* Foot layout: 2-column grid so the pill is always anchored at the right
edge regardless of how the text wraps. Flex's `justify-content:
space-between` was being defeated by something in the cascade and
leaving visible empty space; grid gives a deterministic anchor. */
.k-foot {
font-size: 12px; color: var(--muted);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 6px;
}
.k-foot > .k-delta { white-space: nowrap; justify-self: end; }
.k-delta {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 7px;
font-size: 11px; font-weight: 600;
border-radius: var(--radius-pill);
background: var(--success-soft);
color: var(--success-ink);
}
.k-delta.pos { background: var(--success-soft); color: var(--success-ink); }
.k-delta.neg { background: var(--danger-soft); color: var(--danger-ink); }
.k-delta.up { background: var(--danger-soft); color: var(--danger-ink); }
.k-delta.down { background: var(--success-soft); color: var(--success-ink); }
.k-delta.neutral { background: var(--surface-2); color: var(--muted); }
.kpi.hero .k-delta,
.kpi.hero .k-delta.up,
.kpi.hero .k-delta.down,
.kpi.hero .k-delta.pos,
.kpi.hero .k-delta.neg { background: rgba(255,255,255,0.18); color: #fff; }
/* flex: 1 so the sparkline absorbs any free vertical space when the grid
stretches a card to match a taller neighbour — keeps the foot at the
bottom (it has margin-top: auto) without leaving a visible gap above. */
.sparkline { display: block; width: 100%; flex: 1 0 32px; min-height: 32px; margin-top: 4px; }
/* ===== Chart ===== */
.chart-wrap { padding: 8px 6px 4px; position: relative; }
.chart-wrap svg { width: 100%; height: 260px; display: block; }
.chart-legend { display: flex; gap: 14px; align-items: center; }
.chart-legend .lg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.chart-legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.chart-legend .sw.sw-line { height: 3px; border-radius: 2px; }
.chart-totals {
display: flex;
gap: 18px;
align-items: center;
font-size: 12px;
color: var(--muted);
padding: 6px 10px 0;
flex-wrap: wrap;
}
.chart-totals .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.chart-totals .sw.sw-line { height: 3px; border-radius: 2px; }
.chart-totals b { color: var(--ink); font-weight: 700; }
.chart-hit { cursor: pointer; }
.chart-highlight {
fill: var(--ink);
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease, x 0.08s ease;
}
.chart-highlight.on { opacity: 0.06; }
.chart-tooltip {
position: absolute;
z-index: 4;
background: var(--ink);
color: var(--bg);
font-size: 12px;
padding: 10px 12px;
border-radius: var(--radius-xs);
box-shadow: var(--shadow-lg);
pointer-events: none;
transform: translate(-50%, -100%);
min-width: 180px;
line-height: 1.4;
}
.chart-tooltip[hidden] { display: none; }
.chart-tooltip .tt-time {
font-family: var(--font-mono);
font-size: 11px;
color: color-mix(in oklab, var(--bg) 80%, transparent);
margin-bottom: 6px;
letter-spacing: 0.01em;
text-transform: capitalize;
}
.chart-tooltip .tt-row {
display: flex; align-items: center; gap: 8px;
padding: 2px 0;
font-size: 12px;
}
.chart-tooltip .tt-row .tt-val { margin-left: auto; font-weight: 700; }
.chart-tooltip .tt-sw { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.chart-tooltip .tt-total {
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid color-mix(in oklab, var(--bg) 30%, var(--ink));
color: color-mix(in oklab, var(--bg) 90%, transparent);
}
/* ===== Live feed ===== */
.live-list { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.live-item {
display: grid;
grid-template-columns: 32px 1fr auto;
align-items: center;
gap: 12px;
padding: 10px;
border-radius: var(--radius-sm);
transition: background 0.15s;
}
.live-item:hover { background: var(--surface-2); }
.live-item .av {
width: 32px; height: 32px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 11px; font-weight: 700;
flex-shrink: 0;
}
.live-item .li-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.live-item .li-msg {
font-size: 13px; color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live-item .li-meta { font-size: 11px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.live-item .li-time { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--success);
position: relative;
display: inline-block;
}
.pulse::after {
content: "";
position: absolute; inset: -2px;
border-radius: 50%;
background: var(--success);
opacity: 0.3;
animation: pulse 1.6s infinite;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.4; }
100% { transform: scale(2.2); opacity: 0; }
}
/* ===== Inbox list ===== */
.inbox-list { display: flex; flex-direction: column; }
.inbox-row {
display: grid;
grid-template-columns: 1fr auto auto auto;
align-items: center;
gap: 14px;
padding: 12px 0;
border-top: 1px solid var(--line-2);
}
.inbox-row:first-child { border-top: 0; }
.inbox-main { display: flex; align-items: center; gap: 12px; }
.channel-ic {
width: 30px; height: 30px;
border-radius: 9px;
display: grid; place-items: center;
flex-shrink: 0;
}
.channel-ic.wa { background: color-mix(in oklab, var(--accent-2) 18%, var(--surface)); color: var(--accent-2-ink); }
.channel-ic.api { background: var(--info-soft); color: var(--info-ink); }
.channel-ic.other { background: var(--surface-2); color: var(--muted); }
.inbox-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.inbox-sub { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.distribution { display: flex; align-items: center; gap: 8px; min-width: 200px; }
.dist-bar {
flex: 1;
height: 6px;
border-radius: 3px;
background: var(--surface-3);
display: flex;
overflow: hidden;
}
.dist-bar span { height: 100%; }
.dist-legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted); }
.dist-num { font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-weight: 600; min-width: 52px; text-align: right; }
/* ===== Agent leaderboard ===== */
.agent-head {
display: grid;
grid-template-columns: 32px 1fr 70px 80px 90px;
gap: 12px;
padding: 0 14px 10px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
font-weight: 600;
border-bottom: 1px solid var(--line);
}
.agent-head > div { cursor: pointer; transition: color 0.12s ease; }
.agent-head > div:hover { color: var(--ink-2); }
.agent-head > div.sort-active { color: var(--accent); }
.agent-body { max-height: 620px; overflow-y: auto; margin-top: 4px; }
.agent-row {
display: grid;
grid-template-columns: 32px 1fr 70px 80px 90px;
gap: 12px;
align-items: center;
padding: 10px 14px;
border-radius: var(--radius-sm);
transition: background 0.15s;
}
.agent-row:hover { background: var(--surface-2); }
.agent-row .rk {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-align: center;
}
.agent-row .rk.top { color: var(--accent); font-size: 16px; }
.agent-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.agent-main .av-wrap { position: relative; flex-shrink: 0; }
.agent-main .av {
width: 32px; height: 32px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 11px; font-weight: 700;
flex-shrink: 0;
}
.agent-meta { min-width: 0; flex: 1; }
.agent-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.agent-email { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-align: right; color: var(--ink); }
.agent-num.muted { color: var(--muted); font-weight: 500; }
.mini-bar {
height: 4px; border-radius: 2px;
background: var(--surface-3);
overflow: hidden;
margin-top: 4px;
position: relative;
}
.mini-bar span {
position: absolute; inset: 0;
border-radius: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-strong));
transform-origin: left;
}
.status-dot {
width: 10px; height: 10px; border-radius: 50%;
position: absolute; bottom: 0; right: 0;
border: 2px solid var(--surface);
}
.status-dot.online { background: var(--success); }
.status-dot.idle { background: var(--warn); }
.status-dot.off { background: var(--muted-2); }
/* ===== Search input ===== */
.search-input {
display: flex; align-items: center; gap: 8px;
padding: 7px 12px;
background: var(--surface-2);
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-size: 12px;
color: var(--muted);
min-width: 180px;
transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.search-input input {
border: 0; background: transparent; outline: none;
font: inherit; color: var(--ink);
flex: 1; min-width: 0;
}
.search-input:focus-within {
border-color: var(--accent);
background: var(--surface);
box-shadow: var(--ring);
}
/* ===== Data tables ===== */
table.data {
width: 100%;
border-collapse: collapse;
font-size: 13px;
color: var(--ink);
}
table.data th, table.data td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--line-2);
}
table.data th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
font-weight: 600;
background: transparent;
border-bottom: 1px solid var(--line);
}
table.data tbody tr { transition: background 0.12s ease; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td .num { font-family: var(--font-mono); }
.data-wrap { overflow-x: auto; margin: 0 -2px; }
/* ===== Status pills ===== */
.status-pill {
display: inline-flex; align-items: center;
padding: 2px 9px;
font-size: 11px; font-weight: 600;
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--muted);
}
.status-pill.open { background: var(--info-soft); color: var(--info-ink); }
.status-pill.pending { background: var(--warn-soft); color: var(--warn-ink); }
.status-pill.resolved { background: var(--success-soft); color: var(--success-ink); }
.status-pill.snoozed { background: color-mix(in oklab, var(--info) 12%, var(--surface-2)); color: var(--muted); }
.status-pill.waiting_client { background: color-mix(in oklab, var(--warn) 18%, var(--surface-2)); color: var(--warn-ink); }
.status-pill.waiting_local_team { background: color-mix(in oklab, oklch(0.65 0.18 280) 16%, var(--surface-2)); color: oklch(0.40 0.18 280); }
.status-pill.escalated { background: color-mix(in oklab, var(--neg) 18%, var(--surface-2)); color: var(--neg); }
.status-pill.transferred { background: color-mix(in oklab, var(--info) 14%, var(--surface-2)); color: var(--info-ink); }
.filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
select {
font: inherit;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 7px 10px;
color: var(--ink);
outline: none;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
select:focus { border-color: var(--accent); box-shadow: var(--ring); }
.view { display: block; }
.view.hidden { display: none !important; }
/* Vertical rhythm inside views */
.view > * + *,
.sup-subview > * + * { margin-top: 16px; }
/* ===== Modal ===== */
dialog.modal {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 24px;
min-width: 380px;
background: var(--surface);
color: var(--ink);
box-shadow: var(--shadow-lg);
}
dialog.modal::backdrop { background: oklch(0.15 0.01 60 / 0.55); backdrop-filter: blur(4px); }
dialog.modal h3 { margin: 0 0 14px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
dialog.modal form { display: flex; flex-direction: column; gap: 12px; }
dialog.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 500; }
dialog.modal label.row { flex-direction: row; align-items: center; gap: 8px; }
dialog.modal input[type=text],
dialog.modal input[type=email],
dialog.modal input[type=password],
dialog.modal select {
font: inherit;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 8px 12px;
color: var(--ink);
outline: none;
transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
dialog.modal input:focus,
dialog.modal select:focus { border-color: var(--accent); background: var(--surface); box-shadow: var(--ring); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.error { color: var(--danger); font-size: 12px; min-height: 1em; }
.ok-msg { color: var(--success); font-size: 12px; min-height: 1em; }
.panel-error { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--danger); font-size: 13px; }
.panel-error-cell { padding: 16px; color: var(--danger); display: flex; gap: 12px; align-items: center; justify-content: center; }
.panel-error-msg { flex: 1; }
.panel-error-retry {
font: inherit; font-size: 12px;
padding: 4px 12px; border-radius: var(--radius-xs);
border: 1px solid var(--danger);
background: transparent; color: var(--danger);
cursor: pointer;
transition: background 0.12s ease;
}
.panel-error-retry:hover { background: var(--danger-soft); }
.panel-error-retry:disabled { opacity: 0.5; cursor: wait; }
/* ===== Permissions board ===== */
.perms-card .card-head { align-items: flex-start; gap: 16px; }
.perms-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.perms-board {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 4px;
}
.perms-board[aria-busy="true"] { opacity: 0.5; pointer-events: none; }
.perms-header {
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(var(--perms-roles, 2), minmax(120px, 160px));
gap: 0;
align-items: end;
padding: 0 14px 8px;
border-bottom: 1px solid var(--line);
}
.perms-header .perms-h-page {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--muted);
font-weight: 700;
}
.perms-header .perms-h-role {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
font-size: 12px;
}
.perms-header .perms-h-role b { font-weight: 700; color: var(--ink); letter-spacing: 0.01em; }
.perms-header .perms-h-role .perms-locked-pill {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
background: var(--line-2);
padding: 2px 8px;
border-radius: 999px;
}
.perms-section {
border: 1px solid var(--line-2);
border-radius: var(--radius);
background: var(--surface);
overflow: hidden;
}
.perms-section-head {
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(var(--perms-roles, 2), minmax(120px, 160px));
align-items: center;
padding: 10px 14px;
background: var(--surface-2);
border-bottom: 1px solid var(--line-2);
}
.perms-section-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.perms-section-title b {
font-size: 13px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.perms-section-title .perms-section-count { font-size: 11px; color: var(--muted); }
.perms-section-toggle { display: flex; justify-content: center; }
.perms-section-toggle button {
font: inherit;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--line);
background: transparent;
color: var(--ink-2);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.perms-section-toggle button:hover { border-color: var(--accent); color: var(--accent); }
.perms-section-toggle button:disabled { cursor: default; opacity: 0.45; }
.perms-section-toggle .perms-locked-cell { font-size: 11px; color: var(--muted); }
.perms-row {
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(var(--perms-roles, 2), minmax(120px, 160px));
align-items: center;
padding: 10px 14px;
font-size: 13px;
border-top: 1px solid var(--line-2);
}
.perms-section-head + .perms-row { border-top: 0; }
.perms-row:hover { background: var(--surface-2); }
.perms-page { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perms-page-label {
font-weight: 600;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.perms-page-id {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
}
.perms-cell { display: flex; justify-content: center; align-items: center; }
.perms-cell input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.perms-cell input[type=checkbox]:disabled { cursor: not-allowed; opacity: 0.45; }
.perms-cell .perms-locked-tick {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; color: var(--muted);
}
.perms-cell .perms-locked-tick svg { width: 14px; height: 14px; }
.perms-row.perms-row-dirty { background: color-mix(in oklab, var(--warn) 10%, var(--surface)); }
.perms-row.perms-row-dirty:hover { background: color-mix(in oklab, var(--warn) 16%, var(--surface)); }
.perms-board .ok-msg { color: var(--success); }
@media (max-width: 720px) {
.perms-header,
.perms-section-head,
.perms-row {
grid-template-columns: minmax(0, 1fr) repeat(var(--perms-roles, 2), 64px);
}
.perms-page-id { display: none; }
}
/* ===== Per-user permissions in user dialog ===== */
.user-perms {
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px 14px 14px;
margin-top: 8px;
}
.user-perms legend {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
font-weight: 700;
padding: 0 6px;
}
.user-perms .row { font-size: 13px; }
.user-perms-board {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 8px;
max-height: 50vh;
overflow-y: auto;
}
.user-perms-section {
border: 1px solid var(--line-2);
border-radius: var(--radius-xs);
overflow: hidden;
}
.user-perms-section > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
background: var(--surface-2);
border-bottom: 1px solid var(--line-2);
font-size: 12px;
}
.user-perms-section > header b {
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ink);
}
.user-perms-section > header button {
font: inherit;
font-size: 11px;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid var(--line);
background: transparent;
color: var(--ink-2);
cursor: pointer;
}
.user-perms-section > header button:hover { border-color: var(--accent); color: var(--accent); }
.user-perms-section ul { list-style: none; margin: 0; padding: 4px 0; }
.user-perms-section li {
display: flex; align-items: center; gap: 10px;
padding: 6px 12px;
font-size: 13px;
transition: background 0.12s ease;
}
.user-perms-section li:hover { background: var(--surface-2); }
.user-perms-section li input[type=checkbox] {
width: 16px; height: 16px;
accent-color: var(--accent);
}
.user-perms-section li label {
display: flex; flex-direction: column; gap: 1px;
flex: 1; cursor: pointer;
}
.user-perms-section li label .pp-label { font-weight: 500; color: var(--ink); }
.user-perms-section li label .pp-id {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
}
/* ===== Login page ===== */
body.login-body {
min-height: 100vh;
margin: 0;
background: var(--surface);
display: block; /* override the dashboard shell's body{display:grid} */
grid-template-columns: none;
}
.login-split {
min-height: 100vh;
display: grid;
grid-template-columns: 1.05fr 1fr;
}
.login-hero {
position: relative;
overflow: hidden;
background: oklch(0.32 0.10 var(--brand-h));
}
.login-hero-art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.login-form-side {
display: grid;
place-items: center;
padding: 40px;
background: var(--surface);
}
.login-card {
width: min(400px, 100%);
background: var(--surface);
border: 0;
border-radius: var(--radius);
padding: 8px;
box-shadow: none;
}
.login-card-head { margin-bottom: 28px; display: flex; justify-content: center; }
.login-card-logo { height: 120px; width: auto; display: block; }
.login-card form { display: flex; flex-direction: column; gap: 16px; }
.login-card label {
display: flex; flex-direction: column; gap: 6px;
font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.login-card input {
font: inherit;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px 14px;
color: var(--ink);
outline: none;
transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.login-card input:focus {
border-color: var(--accent);
background: var(--surface);
box-shadow: var(--ring);
}
.login-card .btn.primary.full {
margin-top: 6px;
padding: 12px 16px;
font-size: 14px; font-weight: 600;
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 6px 16px oklch(0.494 0.148 var(--brand-h) / 0.30);
}
.login-card .btn.primary.full:hover {
background: var(--accent-strong);
border-color: var(--accent-strong);
}
@media (max-width: 880px) {
.login-split { grid-template-columns: 1fr; }
.login-hero { display: none; }
.login-form-side { padding: 32px 22px 56px; min-height: 100vh; }
}
/* ===== Heatmap ===== */
.heatmap-wrap { padding: 4px 2px 2px; overflow-x: auto; }
.heatmap-grid {
display: grid;
grid-template-columns: 46px repeat(24, 1fr);
gap: 3px;
min-width: 720px;
}
.heatmap-axis-x, .heatmap-axis-y {
font-size: 10px;
color: var(--muted);
font-family: var(--font-mono);
font-feature-settings: "tnum";
}
.heatmap-axis-y { display: flex; align-items: center; padding-right: 10px; justify-content: flex-end; }
.heatmap-axis-x { text-align: center; padding: 0 0 4px; letter-spacing: 0.02em; }
.heatmap-axis-x.pad { visibility: hidden; }
.heatmap-cell {
aspect-ratio: 1 / 1;
min-height: 22px;
border-radius: 4px;
background: var(--surface-3);
position: relative;
cursor: default;
transition: transform 0.1s ease, outline-color 0.1s ease;
outline: 1px solid transparent;
}
.heatmap-cell.has-val {
background: color-mix(in oklab, var(--accent) calc(var(--t) * 100%), var(--surface-3));
}
.heatmap-cell:hover {
outline-color: var(--ink);
transform: scale(1.08);
z-index: 2;
}
.heatmap-cell[data-val] .tip {
position: absolute;
bottom: calc(100% + 6px); left: 50%;
transform: translateX(-50%);
background: var(--ink);
color: var(--bg);
padding: 4px 8px;
border-radius: var(--radius-xs);
font-size: 11px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.1s ease;
font-family: var(--font-mono);
box-shadow: var(--shadow-sm);
z-index: 3;
}
.heatmap-cell:hover .tip { opacity: 1; }
.heatmap-scale {
display: flex; align-items: center; gap: 8px;
font-size: 11px; color: var(--muted);
}
.heatmap-scale .bar {
width: 120px; height: 6px; border-radius: 3px;
background: linear-gradient(90deg, var(--surface-3), var(--accent));
}
.fade-in { animation: fadeIn 0.4s ease both; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
/* ===== Supervision ===== */
.breach-chip {
display: inline-flex; align-items: center;
padding: 2px 8px; margin: 2px 4px 2px 0;
border-radius: 999px;
font-size: 10.5px; font-weight: 600;
letter-spacing: 0.01em;
background: var(--surface-2); color: var(--ink);
white-space: nowrap;
border: 1px solid var(--line-2);
}
.breach-chip.b-first_reply,
.breach-chip.b-awaiting_agent { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.breach-chip.b-no_agent_reply { background: var(--danger-soft); color: var(--danger-ink); border-color: transparent; }
.breach-chip.b-stale { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.breach-chip.b-unassigned { background: color-mix(in oklab, var(--info) 12%, var(--surface)); color: var(--info-ink); border-color: transparent; }
.breach-chip.b-awaiting_customer { background: var(--info-soft); color: var(--info-ink); border-color: transparent; }
.breach-chip.b-ok { background: var(--success-soft); color: var(--success-ink); border-color: transparent; }
.breach-chip.b-muted { background: var(--surface-2); color: var(--muted); }
.breach-chip.state-no_first_reply { background: var(--danger-soft); color: var(--danger-ink); border-color: transparent; }
.breach-chip.state-awaiting_agent { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.breach-chip.state-awaiting_customer { background: var(--info-soft); color: var(--info-ink); border-color: transparent; }
.sup-subnav {
display: flex; gap: 4px;
background: var(--surface);
border: 1px solid var(--line);
padding: 4px;
border-radius: var(--radius-pill);
margin-bottom: 16px;
width: fit-content;
}
.sup-subnav .sup-sub {
border: 0; background: transparent;
padding: 8px 16px;
border-radius: var(--radius-pill);
font-size: 13px; font-weight: 500;
color: var(--muted);
cursor: pointer;
transition: all 0.15s ease;
}
.sup-subnav .sup-sub:hover { color: var(--ink); }
.sup-subnav .sup-sub.active { background: var(--accent); color: #fff; }
.sup-subview { display: none; }
.sup-subview.active { display: block; }
.agent-board {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
padding: 4px 2px 2px;
}
.agent-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px 14px;
display: flex; flex-direction: column; gap: 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.agent-card:hover { border-color: var(--ink-2); box-shadow: var(--shadow-sm); }
.agent-card.idle {
border-color: color-mix(in oklab, var(--warn) 50%, var(--line));
background: color-mix(in oklab, var(--warn-soft) 60%, var(--surface));
}
.agent-card .ag-head { display: flex; align-items: center; gap: 10px; }
.agent-card .ag-id { flex: 1; min-width: 0; }
.agent-card .ag-name {
font-weight: 600; font-size: 13px;
color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-card .ag-email {
font-size: 11px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-card .ag-metrics {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.agent-card .ag-metrics > div { text-align: center; }
.agent-card .ag-metrics span {
display: block;
font-family: var(--font-mono);
font-size: 17px; font-weight: 700;
font-feature-settings: "tnum";
color: var(--ink);
}
.agent-card .ag-metrics label {
font-size: 10px; color: var(--muted);
text-transform: lowercase;
}
.agent-card .ag-foot {
display: flex; justify-content: space-between;
font-size: 11px; color: var(--muted);
border-top: 1px solid var(--line-2);
padding-top: 8px;
}
.agent-card .ag-foot b { color: var(--ink); font-weight: 600; }
/* ===== Top nav ===== */
.topnav {
display: flex;
align-items: center;
gap: 2px;
background: var(--surface);
border: 1px solid var(--line);
padding: 4px;
border-radius: var(--radius-pill);
flex-wrap: nowrap;
box-shadow: var(--shadow-sm);
}
.topnav-item { position: relative; }
.topnav-button {
display: inline-flex; align-items: center; gap: 6px;
border: 0; background: transparent;
padding: 8px 14px;
border-radius: var(--radius-pill);
font-size: 13px; font-weight: 600;
letter-spacing: 0.01em;
color: var(--muted);
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.topnav-button:hover { color: var(--ink); background: var(--surface-2); }
.topnav-button .chev { opacity: 0.6; transition: transform 0.18s ease; }
.topnav-item.open .topnav-button { background: var(--accent); color: #fff; }
.topnav-item.open .topnav-button .chev { transform: rotate(180deg); opacity: 1; }
.topnav-item.active .topnav-button { background: var(--accent-soft); color: var(--accent-ink); }
.topnav-item.active.open .topnav-button { background: var(--accent); color: #fff; }
.topnav-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 260px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
padding: 8px;
z-index: 40;
display: none;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.12s ease, transform 0.12s ease;
}
.topnav-item.open .topnav-menu {
display: block;
opacity: 1;
transform: translateY(0);
}
.topnav-group { padding: 6px 4px; }
.topnav-group + .topnav-group { border-top: 1px solid var(--line-2); }
.topnav-group-title {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
padding: 6px 10px 4px;
}
.topnav-link {
display: block;
text-decoration: none;
color: var(--ink);
font-size: 13px;
font-weight: 500;
padding: 8px 10px;
border-radius: var(--radius-xs);
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.topnav-link:hover { background: var(--surface-2); }
.topnav-link.active { background: var(--accent-soft); color: var(--accent-ink); }
.topnav-admin {
display: flex;
gap: 2px;
margin-left: 8px;
padding-left: 8px;
border-left: 1px solid var(--line);
}
.topnav-tab {
border: 0; background: transparent;
padding: 8px 14px;
border-radius: var(--radius-pill);
font-size: 13px; font-weight: 500;
color: var(--muted);
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
text-align: left;
font-family: inherit;
}
.topnav-tab:hover { color: var(--ink); background: var(--surface-2); }
.topnav-tab.active { background: var(--ink); color: var(--bg); }
/* Settings dropdown — gear button + items styled like .topnav-link */
.topnav-item-settings .topnav-button .gear { opacity: 0.85; }
.topnav-item-settings .topnav-menu { right: 0; left: auto; min-width: 220px; }
.topnav-menu .topnav-tab {
display: block;
width: 100%;
padding: 8px 10px;
border-radius: var(--radius-xs);
color: var(--ink);
font-weight: 500;
}
.topnav-menu .topnav-tab:hover { background: var(--surface-2); color: var(--ink); }
.topnav-menu .topnav-tab.active {
background: var(--accent-soft);
color: var(--accent-ink);
}
/* ===== Placeholder view ===== */
.placeholder-card { padding-bottom: 28px; }
.path-chip {
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent-ink);
background: var(--accent-soft);
padding: 6px 12px;
border-radius: var(--radius-pill);
letter-spacing: 0.01em;
}
.placeholder-body {
display: flex; align-items: center; gap: 18px;
padding: 20px 4px 4px;
color: var(--ink-2);
}
.placeholder-icon {
width: 56px; height: 56px;
display: grid; place-items: center;
border-radius: var(--radius-sm);
background: var(--accent-soft);
color: var(--accent-ink);
flex-shrink: 0;
}
.placeholder-head { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.placeholder-sub { font-size: 13px; color: var(--muted); max-width: 540px; }
/* ===== Activation tile section ===== */
.activation-card { padding-bottom: 20px; }
.activation-grid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 10px;
margin-top: 6px;
}
.act-tile {
background: var(--surface-2);
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
padding: 14px 16px;
display: flex; flex-direction: column;
gap: 6px;
min-height: 92px;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.act-tile:hover { border-color: var(--ink-2); }
/* Hero treatment — solid soft-accent fill + strong left bar so the tile
reads as a hero without fading into the page background.
The fade-to-white gradient previously made this tile look "empty". */
.act-tile.hero {
background: color-mix(in oklab, var(--accent-soft) 70%, var(--surface));
border-color: color-mix(in oklab, var(--accent) 28%, var(--line));
position: relative;
overflow: hidden;
padding-left: 18px;
}
.act-tile.hero::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--accent);
opacity: 0.85;
}
.act-tile.hero .act-label { color: var(--accent-ink); font-weight: 700; }
/* Warn variant gets the same architectural treatment for consistency */
.act-tile.warn {
background: color-mix(in oklab, var(--warn-soft) 70%, var(--surface));
border-color: color-mix(in oklab, var(--warn) 32%, var(--line));
position: relative;
overflow: hidden;
padding-left: 18px;
}
.act-tile.warn::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--warn);
opacity: 0.85;
}
.act-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.act-val {
font-size: 24px;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1.05;
font-family: var(--font-mono);
font-feature-settings: "tnum";
}
.act-tile.hero .act-val { font-size: 30px; color: var(--accent-ink); }
.act-tile.warn .act-val { color: var(--warn-ink); }
.act-sub {
font-size: 12px;
color: var(--muted);
margin-top: auto;
}
/* ===== CSAT card ===== */
.csat-card { padding-bottom: 20px; }
.csat-body {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 16px;
margin-top: 8px;
}
.csat-hero-inner {
display: flex; flex-direction: column; gap: 12px;
padding: 18px 18px 16px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 70%);
border: 1px solid color-mix(in oklab, var(--accent) 14%, var(--line));
position: relative;
min-height: 150px;
}
.csat-hero-badge {
position: absolute; top: 14px; right: 16px;
width: 36px; height: 36px;
display: grid; place-items: center;
border-radius: 999px;
background: color-mix(in oklab, var(--accent) 14%, var(--surface));
color: var(--accent);
}
.csat-hero-badge svg { width: 18px; height: 18px; }
.csat-hero-agent { display: flex; align-items: center; gap: 14px; }
.csat-hero-meta { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.csat-hero-name { font-weight: 700; font-size: 16px; color: var(--ink); }
.csat-hero-email { font-size: 12px; color: var(--muted); }
.csat-hero-day { font-size: 11px; color: var(--accent-ink); margin-top: 4px; letter-spacing: 0.02em; text-transform: capitalize; }
.csat-hero-score {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
border-top: 1px solid var(--line-2);
padding-top: 10px;
}
.csat-hero-score .csat-val {
font-family: var(--font-mono);
font-size: 28px; font-weight: 700; color: var(--ink);
}
.csat-hero-score .csat-val-sub { font-size: 12px; color: var(--muted); }
.csat-stars {
color: var(--warn);
font-size: 18px; letter-spacing: 1px;
}
.csat-stars.sm { font-size: 13px; letter-spacing: 0.5px; }
.csat-list {
display: flex; flex-direction: column; gap: 2px;
overflow-y: auto;
max-height: 220px;
}
.csat-row {
display: grid;
grid-template-columns: 80px 1fr auto;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: var(--radius-xs);
transition: background 0.12s;
}
.csat-row:hover { background: var(--surface-2); }
.csat-row-day {
font-size: 11px;
font-weight: 600;
color: var(--muted);
text-transform: capitalize;
}
.csat-row-agent { display: flex; align-items: center; gap: 10px; min-width: 0; }
.csat-row-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.csat-row-email { font-size: 11px; color: var(--muted); }
.csat-row-score {
display: flex; flex-direction: column; align-items: flex-end;
gap: 2px; font-size: 12px; line-height: 1.2;
}
.csat-row-val { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.csat-row-sub { color: var(--muted); font-size: 11px; }
.csat-row-day-avg { color: var(--muted); font-size: 10px; }
/* ===== Labels breakdown table ===== */
.labels-table { margin-top: 6px; }
.labels-table th:first-child,
.labels-table td:first-child { text-align: left; }
.label-pill {
display: inline-block;
font-family: var(--font-mono);
font-size: 11.5px;
padding: 3px 9px;
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--ink-2);
border: 1px solid var(--line-2);
letter-spacing: 0.01em;
}
.labels-table tr.priority td:first-child::before {
content: '⚑'; margin-right: 6px; color: var(--danger);
}
.labels-table tr.unlabeled td:first-child {
color: var(--muted); font-style: italic;
}
.labels-table th[data-sort] { cursor: pointer; user-select: none; transition: color 0.12s ease; }
.labels-table th[data-sort]:hover { color: var(--ink-2); }
.labels-table th[data-sort].sort-active { color: var(--accent); }
/* ===== Info popover ===== */
.info-popover {
position: absolute;
z-index: 60;
width: 300px;
background: var(--ink);
color: var(--bg);
font-size: 12.5px;
line-height: 1.5;
padding: 12px 14px;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.15s ease, transform 0.15s ease;
pointer-events: auto;
}
.info-popover.visible { opacity: 1; transform: translateY(0); }
.info-popover-body { color: color-mix(in oklab, var(--bg) 95%, transparent); }
.info-popover-arrow {
position: absolute;
top: -6px; left: 50%;
width: 12px; height: 12px;
background: var(--ink);
transform: translateX(-50%) rotate(45deg);
border-radius: 2px;
}
/* ===== Réclamation labels bars ===== */
.recl-labels-bars {
display: grid;
grid-template-columns: minmax(160px, 220px) 1fr 60px;
gap: 6px 12px;
margin: 14px 0 6px;
align-items: center;
}
.recl-bar-label {
font-size: 12px; color: var(--ink); font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recl-bar-track {
background: var(--surface-2);
border: 1px solid var(--line-2);
border-radius: 999px;
height: 14px; overflow: hidden;
}
.recl-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 50%, var(--warn)));
border-radius: 999px;
}
.recl-bar-fill.priority { background: linear-gradient(90deg, var(--danger), color-mix(in oklab, var(--danger) 60%, var(--warn))); }
.recl-bar-fill.unlabeled { background: linear-gradient(90deg, var(--muted), var(--muted-2)); }
.recl-bar-val {
font-family: var(--font-mono);
font-size: 11px; color: var(--muted); text-align: right;
}
/* ===== Donut card ===== */
.recl-donut-wrap {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
align-items: center;
margin-top: 8px;
}
@media (max-width: 760px) {
.recl-donut-wrap { grid-template-columns: 1fr; }
}
.recl-donut {
position: relative;
aspect-ratio: 1;
max-width: 280px;
}
.recl-donut svg { width: 100%; height: 100%; display: block; }
.recl-donut-center {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
pointer-events: none;
text-align: center;
}
.recl-donut-center .v {
font-family: var(--font-mono);
font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em;
}
.recl-donut-center .l {
font-size: 11px; color: var(--muted); letter-spacing: 0.04em;
text-transform: uppercase; margin-top: 2px;
}
.recl-donut-slice { transition: opacity 0.15s ease, transform 0.15s ease; transform-origin: center; }
.recl-donut-slice.dim { opacity: 0.25; }
.recl-donut-legend {
display: grid;
grid-template-columns: 18px 1fr auto auto;
gap: 8px 14px;
align-items: center;
font-size: 13px;
}
.recl-donut-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.recl-donut-legend .ll { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recl-donut-legend .lv { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }
.recl-donut-legend .lp { color: var(--muted); font-family: var(--font-mono); }
.recl-donut-legend .row { display: contents; cursor: default; }
.recl-donut-legend .row:hover .ll,
.recl-donut-legend .row:hover .lv { color: var(--accent-ink); }
/* ===== ATC bars / dispositions ===== */
.atc-bars {
display: flex;
align-items: flex-end;
gap: 6px;
padding: 12px 4px 4px;
height: 220px;
overflow-x: auto;
}
.atc-bar {
flex: 1 1 0;
min-width: 28px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
}
.atc-bar-track {
position: relative;
width: 18px;
height: 160px;
background: var(--surface-3);
border-radius: 4px;
overflow: hidden;
}
.atc-bar-calls {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(180deg,
color-mix(in oklab, var(--accent) 50%, var(--warn)) 0%,
var(--accent) 100%);
transition: height 0.35s ease;
}
.atc-bar-conn {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(180deg, var(--accent-strong) 0%, var(--accent) 100%);
transition: height 0.35s ease;
}
.atc-bar-val { font-size: 11px; color: var(--ink); font-weight: 600; }
.atc-bar-label { font-size: 11px; color: var(--muted); }
.atc-disp-groups {
display: flex;
flex-direction: column;
gap: 14px;
padding: 4px 2px;
}
.atc-disp-cat {
border: 1px solid var(--line);
border-radius: 14px;
padding: 12px 14px;
background: var(--surface);
}
.atc-disp-cat-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.atc-disp-cat-title {
display: flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 700; color: var(--ink);
}
.atc-disp-cat-meta {
display: flex;
align-items: baseline;
gap: 6px;
font-family: var(--font-mono);
font-size: 13px;
}
.atc-disp-cat-pct {
background: var(--surface-2);
color: var(--ink-2);
border-radius: 999px;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
}
.atc-disp-cat-swatch { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.atc-disp-cat-total { font-size: 18px; font-weight: 700; color: var(--ink); }
.atc-disp-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.atc-disp-item {
position: relative;
display: grid;
grid-template-columns: 12px 1fr 90px auto auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
font-size: 13.5px;
overflow: hidden;
}
.atc-disp-bar {
position: absolute;
inset: 0 auto 0 0;
width: var(--w, 0%);
background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 100%);
border-radius: 8px;
z-index: 0;
}
.atc-disp-item > * { position: relative; z-index: 1; }
.atc-disp-name { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atc-disp-talk { font-size: 12px; color: var(--muted); }
.atc-disp-n { min-width: 56px; text-align: right; font-weight: 700; font-family: var(--font-mono); color: var(--ink); }
.atc-disp-pct { min-width: 56px; text-align: right; font-size: 12px; font-family: var(--font-mono); color: var(--muted); }
.atc-disp-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.atc-disp-bar2 {
display: block;
height: 6px;
background: var(--surface-2);
border-radius: 999px;
overflow: hidden;
}
.atc-disp-bar2-fill {
display: block;
height: 100%;
border-radius: 999px;
transition: width 0.35s ease;
}
/* Stacked category mix bar */
.atc-mix { margin: 4px 4px 14px; }
.atc-mix-bar {
display: flex;
height: 14px;
border-radius: 999px;
overflow: hidden;
background: var(--surface-2);
}
.atc-mix-seg { display: block; height: 100%; transition: filter 0.15s; }
.atc-mix-seg:hover { filter: brightness(0.95); }
.atc-mix-legend {
display: flex; flex-wrap: wrap; gap: 14px;
margin-top: 10px;
}
.atc-mix-leg {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px;
}
.atc-mix-leg .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.atc-mix-leg .ll { color: var(--ink); font-weight: 500; }
.atc-mix-leg .lv { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.atc-mix-leg .lp { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
/* Donut + list two-column layout per category */
.atc-disp-body {
display: grid;
grid-template-columns: 140px 1fr;
gap: 18px;
align-items: center;
}
.atc-disp-donut {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 120px; height: 120px;
}
.atc-disp-donut svg { display: block; }
.atc-disp-donut-center {
position: absolute;
inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
pointer-events: none;
}
.atc-disp-donut-center .v {
font-family: var(--font-mono);
font-weight: 700;
font-size: 18px;
color: var(--cat-color, var(--ink));
line-height: 1;
}
.atc-disp-donut-center .l {
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 2px;
}
@media (max-width: 720px) {
.atc-disp-body { grid-template-columns: 1fr; }
.atc-disp-donut { margin: 0 auto; }
.atc-disp-list .atc-disp-item { grid-template-columns: 12px 1fr auto auto; }
.atc-disp-bar2 { display: none; }
}
/* ===== Recordings ===== */
.rec-form {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding: 12px 0 0;
}
.rec-form input[type="search"] {
flex: 1 1 280px; min-width: 220px;
padding: 9px 12px; border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: var(--surface); color: var(--ink);
font: inherit;
outline: none;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.rec-form input[type="search"]:focus {
border-color: var(--accent);
box-shadow: var(--ring);
}
.rec-form .rec-date {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--muted);
}
.rec-form .rec-date input[type="date"] {
padding: 7px 10px; border-radius: var(--radius-xs);
border: 1px solid var(--line);
font: inherit; color: var(--ink); background: var(--surface);
outline: none;
}
.rec-form .rec-date input[type="date"]:focus { border-color: var(--accent); box-shadow: var(--ring); }
.rec-pager {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 12px 0 0;
}
.rec-pager span { font-size: 13px; color: var(--muted); }
.rec-samples {
display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 12px; padding: 12px 0 0;
}
.rec-samples-cat {
border: 1px solid var(--line);
border-radius: var(--radius-sm); background: var(--surface);
display: flex; flex-direction: column;
}
.rec-samples-cat-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px; padding: 10px 12px;
border-bottom: 1px solid var(--line);
background: var(--surface-2);
}
.rec-samples-cat-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.rec-samples-cat-total { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.rec-samples-list { display: flex; flex-direction: column; }
.rec-sample-row {
display: grid; grid-template-columns: 1fr auto;
gap: 8px; align-items: center;
padding: 8px 12px; border-top: 1px solid var(--line-2);
font-size: 13px;
transition: background 0.12s ease;
}
.rec-sample-row:hover { background: var(--surface-2); }
.rec-sample-row:first-child { border-top: 0; }
.rec-sample-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rec-sample-line1 { font-variant-numeric: tabular-nums; color: var(--ink); font-family: var(--font-mono); font-size: 12px; }
.rec-sample-line2 {
color: var(--muted); font-size: 12px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-samples-empty { color: var(--muted); padding: 12px; font-size: 13px; }
.rec-section-title {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--muted);
margin: 0 0 12px; padding: 0 4px;
}
.rec-section-title:not(:first-child) { margin-top: 8px; }
/* ===== Funnel ===== */
.funnel-body { display: grid; grid-template-columns: 2fr 1fr; gap: 24px;
padding: 16px 0; align-items: start; }
@media (max-width: 720px) { .funnel-body { grid-template-columns: 1fr; } }
.funnel-stages { display: flex; flex-direction: column; gap: 14px; }
.funnel-stage { display: flex; flex-direction: column; gap: 4px; }
.funnel-stage.highlight .funnel-stage-bar {
box-shadow: 0 0 0 2px color-mix(in oklab, var(--danger) 35%, transparent);
}
.funnel-stage-bar {
position: relative; height: 38px; border-radius: 8px; overflow: hidden;
background: var(--surface-2);
}
.funnel-stage-fill {
position: absolute; left: 0; top: 0; bottom: 0;
display: flex; align-items: center; justify-content: space-between;
padding: 0 12px; color: white; font-weight: 600; font-size: 14px;
border-radius: 8px;
background: linear-gradient(90deg,
var(--funnel-c, var(--info)),
color-mix(in oklab, var(--funnel-c, var(--info)) 70%, black));
transition: width 0.4s ease;
}
.funnel-stage-name { font-variant-numeric: tabular-nums; }
.funnel-stage-val { font-variant-numeric: tabular-nums; }
.funnel-stage-meta {
display: flex; gap: 12px; font-size: 12px; color: var(--muted);
font-variant-numeric: tabular-nums;
}
.funnel-stage-meta b { color: var(--ink); font-weight: 600; }
.funnel-drop { color: var(--danger); }
.funnel-ratios { display: flex; flex-direction: column; gap: 10px; }
.funnel-ratio {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
.funnel-ratio.alert {
border-color: color-mix(in oklab, var(--danger) 50%, var(--line));
background: color-mix(in oklab, var(--danger-soft) 60%, var(--surface));
}
.funnel-ratio.warm {
border-color: color-mix(in oklab, var(--warn) 50%, var(--line));
background: color-mix(in oklab, var(--warn-soft) 60%, var(--surface));
}
.funnel-ratio-label {
font-size: 11px; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--muted);
}
.funnel-ratio-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.funnel-ratio-foot { font-size: 12px; color: var(--muted); }
/* ===== Decisional ===== */
.decisional-body {
display: grid; grid-template-columns: 1.4fr 1fr;
gap: 24px;
padding: 16px 0;
align-items: start;
}
@media (max-width: 900px) { .decisional-body { grid-template-columns: 1fr; } }
.decisional-col { display: flex; flex-direction: column; gap: 10px; }
.decisional-col-title {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--muted); padding: 0 4px; font-weight: 700;
}
.reasons-list { display: flex; flex-direction: column; gap: 6px; }
.reasons-row {
display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(80px, 1fr) auto auto;
gap: 10px; align-items: center;
padding: 6px 8px;
border-radius: 8px;
transition: background 0.12s ease;
}
.reasons-row:hover { background: var(--surface-2); }
.reasons-label { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink); }
.reasons-cat { width: 8px; height: 24px; border-radius: 3px; flex-shrink: 0; }
.reasons-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reasons-cat-name { font-size: 11px; white-space: nowrap; color: var(--muted); }
.reasons-bar {
position: relative; height: 8px; border-radius: 999px;
background: var(--surface-2); overflow: hidden;
}
.reasons-bar-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; }
.reasons-n { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 36px; text-align: right; color: var(--ink); }
.reasons-delta {
font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
font-variant-numeric: tabular-nums; min-width: 56px; text-align: center;
}
.reasons-delta.up { color: var(--danger-ink); background: var(--danger-soft); }
.reasons-delta.down { color: var(--success-ink); background: var(--success-soft); }
.reasons-delta.flat,
.reasons-delta.neutral { color: var(--muted); background: var(--surface-2); }
/* ===== Inbound ===== */
.inbound-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px; padding: 12px 0 0;
}
.inbound-card {
border: 1px solid var(--line);
border-radius: var(--radius-sm); background: var(--surface);
display: flex; flex-direction: column; overflow: hidden;
transition: border-color 0.15s ease;
}
.inbound-card:hover { border-color: var(--ink-2); }
.inbound-card.empty { opacity: 0.6; }
.inbound-card-head {
padding: 10px 12px;
border-bottom: 1px solid var(--line);
background: color-mix(in oklab, var(--accent-soft) 45%, var(--surface));
}
.inbound-card-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.inbound-card-id { color: var(--muted); font-size: 11px; margin-top: 2px; font-family: var(--font-mono); }
.inbound-stats {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line-2);
}
.inbound-stat { display: flex; flex-direction: column; gap: 2px; }
.inbound-stat-v { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 16px; color: var(--ink); font-family: var(--font-mono); }
.inbound-stat-l { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.inbound-items { display: flex; flex-direction: column; padding: 6px 0; }
.inbound-item {
display: grid; grid-template-columns: 1fr auto auto;
gap: 8px; padding: 4px 12px; align-items: center; font-size: 12px;
}
.inbound-item-name { color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbound-item-bar {
position: relative; height: 6px; width: 80px; max-width: 30vw;
background: var(--surface-2); border-radius: 999px; overflow: hidden;
}
.inbound-item-bar-fill { position: absolute; top: 0; left: 0; height: 100%;
background: var(--accent); border-radius: 999px; }
.inbound-item-n {
font-variant-numeric: tabular-nums; font-weight: 500; min-width: 28px;
text-align: right; color: var(--ink);
}
.inbound-empty { color: var(--muted); padding: 10px 12px; font-size: 12px; font-style: italic; }
/* ===== Responsive layout =====
Breakpoint at 1280 (not 1180) because the 248px sidebar eats real
estate from the right column — at 1280-1180 the 6-col KPI strip
gets <160px per tile, which is too tight for the gauge variant. */
@media (max-width: 1280px) {
.kpi-strip { grid-template-columns: repeat(3, 1fr); }
.kpi-strip > .kpi.hero { grid-column: 1 / -1; }
.activation-grid { grid-template-columns: repeat(3, 1fr); }
.activation-grid > .act-tile.hero { grid-column: 1 / -1; }
.row-2,
.row-3 { grid-template-columns: 1fr; }
.csat-body { grid-template-columns: 1fr; }
/* 3-col strip — each tile has more breathing room, give the arc more presence */
.kpi:has(.kpi-arc) { grid-template-columns: minmax(0, 1fr) 90px; gap: 16px; }
.kpi-arc { width: 90px; }
}
@media (max-width: 920px) {
.topbar { flex-wrap: wrap; gap: 12px; }
.topnav { order: 3; flex-basis: 100%; overflow-x: auto; max-width: 100%; }
}
@media (max-width: 720px) {
.kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.activation-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.page-head { flex-direction: column; align-items: stretch; }
.card { padding: 14px 16px; }
.kpi { padding: 12px 14px; min-height: 108px; }
.kpi:has(.kpi-arc) { grid-template-columns: minmax(0, 1fr) 64px; gap: 10px; }
.kpi-arc { width: 64px; }
.k-val { font-size: 26px; }
.kpi.hero .k-val { font-size: 32px; }
.act-val { font-size: 20px; }
.act-tile.hero .act-val { font-size: 24px; }
table.data { font-size: 12.5px; }
table.data th, table.data td { padding: 8px 10px; }
.topbar { padding: 8px 0 12px; }
.brand-logo { height: 44px; }
}
@media (max-width: 480px) {
.kpi-strip,
.activation-grid { grid-template-columns: 1fr; }
.agent-head { display: none; }
.agent-row {
grid-template-columns: 24px 1fr 70px;
grid-template-areas: "rk main total";
}
.agent-row .rk { grid-area: rk; }
.agent-row .agent-main { grid-area: main; }
.agent-row > :nth-child(3),
.agent-row > :nth-child(4) { display: none; }
.agent-row > :last-child { grid-area: total; }
.user-chip .u-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
POLISH PASS v2 — refined micro-interactions, loading states,
page-head treatment, scrollbars, table sheen.
These rules are intentionally additive.
============================================================ */
/* ----- Page-head: stronger heading, accent rule under it ----- */
.page-head {
position: relative;
padding-bottom: 14px;
border-bottom: 1px solid var(--line-2);
}
.page-head::after {
content: "";
position: absolute;
left: 0; bottom: -1px;
width: 56px; height: 2px;
background: var(--accent);
border-radius: 2px;
}
.page-title h1 {
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 700;
letter-spacing: -0.025em;
}
.page-title p { font-size: 13px; line-height: 1.5; }
/* ----- View transition — subtle fade-in when switching pages ----- */
.view:not(.hidden) {
animation: viewIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes viewIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* ----- Card refinement: subtle border-color shift on hover ----- */
.card { transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.card:hover { border-color: color-mix(in oklab, var(--ink) 12%, var(--line)); }
/* ----- Loading / empty state on .muted placeholder cells -----
The app uses td.muted and div.muted for both "Chargement…" and
empty-state messages, so we keep the text readable and add a
gentle pulse + tinted background that reads as "in flight" without
masking the actual message. */
@keyframes softPulse {
0%, 100% { background-color: color-mix(in oklab, var(--surface-2) 70%, var(--surface)); }
50% { background-color: color-mix(in oklab, var(--surface-3) 50%, var(--surface-2)); }
}
td.muted {
font-style: italic;
color: var(--muted);
text-align: center;
padding: 18px 12px;
animation: softPulse 1.8s ease-in-out infinite;
border-radius: var(--radius-xs);
}
.atc-disp-groups > div.muted,
.inbound-grid > div.muted,
.rec-samples > div.muted,
#atacadaoFunnelBody > div.muted,
#rclLbvTopReasons > div.muted,
#rclLbvFunnel > div.muted {
font-style: italic;
text-align: center;
border-radius: var(--radius-sm);
animation: softPulse 1.8s ease-in-out infinite;
}
/* Reset for inline muted labels that should never animate. */
.search-input .muted,
.k-foot .muted,
.card-sub.muted,
.placeholder-sub.muted,
.muted code { animation: none !important; background: none !important; font-style: normal; }
/* ----- Subtle zebra striping on long tables ----- */
table.data tbody tr:nth-child(even) {
background: color-mix(in oklab, var(--surface-2) 35%, var(--surface));
}
table.data tbody tr:hover { background: var(--surface-2); }
/* ----- Custom scrollbars (Webkit + Firefox) ----- */
* {
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: color-mix(in oklab, var(--ink) 18%, transparent);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background: color-mix(in oklab, var(--ink) 30%, transparent);
background-clip: padding-box;
border: 2px solid transparent;
}
/* ----- Scroll-fade on horizontal overflow (data-wrap) ----- */
.data-wrap {
--fade: 24px;
mask-image: linear-gradient(
to right,
transparent 0,
#000 var(--fade),
#000 calc(100% - var(--fade)),
transparent 100%);
-webkit-mask-image: linear-gradient(
to right,
transparent 0,
#000 var(--fade),
#000 calc(100% - var(--fade)),
transparent 100%);
}
@media (max-width: 720px) { .data-wrap { --fade: 12px; } }
/* ----- Sticky thead inside scrollable wrappers ----- */
.data-wrap table.data thead th,
.agent-board[data-scroll] thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--surface);
backdrop-filter: blur(2px);
}
/* ----- Segmented control: smooth color transition + clearer active ----- */
.seg button {
position: relative;
transition: color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}
.seg button.active {
background: var(--surface);
color: var(--ink);
box-shadow: 0 1px 2px oklch(0 0 0 / 0.08), 0 0 0 1px var(--line) inset;
}
:root[data-theme="dark"] .seg button.active {
background: var(--surface-3);
box-shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 0 0 1px color-mix(in oklab, var(--ink) 10%, transparent) inset;
}
/* ----- Buttons: subtle press feedback ----- */
.btn:active:not(:disabled) { transform: translateY(0.5px); }
.btn.primary { letter-spacing: 0.005em; }
.btn.primary:active:not(:disabled) {
box-shadow: 0 2px 6px oklch(0.494 0.148 var(--brand-h) / 0.28);
}
/* ----- Topnav-button hover refinement ----- */
.topnav-button { transition: background-color 0.16s ease, color 0.16s ease; }
.topnav-button:active:not(:disabled) { transform: translateY(0.5px); }
/* ----- KPI cards: hover micro-lift on non-hero ----- */
.kpi:not(.hero) { transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
.kpi:not(.hero):hover {
border-color: color-mix(in oklab, var(--ink) 14%, var(--line));
transform: translateY(-1px);
box-shadow: var(--shadow);
}
/* Activation tiles same lift */
.act-tile { transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
.act-tile:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
/* ----- Disabled state clarity (everywhere) ----- */
button:disabled, .btn:disabled, .topnav-tab:disabled {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
/* ----- Focus ring: more visible on dark backgrounds ----- */
:focus-visible {
outline-color: var(--accent);
outline-offset: 3px;
}
.btn.primary:focus-visible {
outline-color: oklch(0.85 0.10 var(--brand-h));
}
/* ----- Topbar: better tactile feel for theme toggle / icon-btn ----- */
.theme-toggle:active:not(:disabled),
.icon-btn:active { transform: scale(0.96); }
.theme-toggle, .icon-btn { transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; }
/* ----- Live status pulse: more refined ----- */
.icon-btn .pulse {
width: 10px; height: 10px;
}
/* ----- Data tables: nicer th hover (sortable) ----- */
table.data th[role="button"], table.data th.sortable {
cursor: pointer;
user-select: none;
transition: color 0.12s ease;
}
table.data th[role="button"]:hover, table.data th.sortable:hover { color: var(--ink-2); }
/* ----- Dialog modal: scale-in animation ----- */
dialog.modal[open] {
animation: dialogIn 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes dialogIn {
from { opacity: 0; transform: translateY(8px) scale(0.97); }
to { opacity: 1; transform: none; }
}
dialog.modal::backdrop {
animation: backdropIn 200ms ease-out both;
}
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
/* ----- Status pills: small icon dot in front for stronger semantics ----- */
.status-pill::before {
content: "";
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
margin-right: 6px;
opacity: 0.9;
}
/* ----- Search input: animated focus border ----- */
.search-input { transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; }
/* ----- Topnav: brand button active gets a small bottom indicator instead of pill ----- */
.topnav-item.active .topnav-button {
background: var(--accent-soft);
color: var(--accent-ink);
position: relative;
}
.topnav-item.active .topnav-button::after {
content: "";
position: absolute;
left: 14px; right: 14px; bottom: -10px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}
.topbar { overflow: visible; }
/* ----- Live feed: subtle slide-in for new items ----- */
.live-item { animation: feedIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes feedIn {
from { opacity: 0; transform: translateX(-6px); }
to { opacity: 1; transform: none; }
}
/* ----- Heatmap cell: tighter focus shadow ----- */
.heatmap-cell:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
z-index: 3;
}
/* ----- Improved chip readability ----- */
.chip { line-height: 1.4; }
/* ----- Card-head: tighter title spacing on small screens ----- */
@media (max-width: 720px) {
.card-head { flex-wrap: wrap; gap: 8px; }
.card-head .seg { order: 2; }
.page-head::after { width: 40px; }
}
/* ----- Inputs: nicer placeholder color ----- */
input::placeholder, textarea::placeholder {
color: var(--muted);
opacity: 0.85;
}
/* ----- File input ----- */
input[type=file] {
font: inherit; color: var(--ink);
background: var(--surface-2);
border: 1px dashed var(--line);
border-radius: var(--radius-sm);
padding: 10px 12px;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
input[type=file]:hover { border-color: var(--accent); background: var(--surface); }
input[type=file]::file-selector-button {
font: inherit;
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
padding: 5px 10px;
border-radius: var(--radius-xs);
margin-right: 10px;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
input[type=file]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }
/* ----- Date inputs: themed ----- */
input[type=date] { color-scheme: light; }
:root[data-theme="dark"] input[type=date] { color-scheme: dark; }
/* ----- Ag-card metric numbers — slightly bigger for legibility ----- */
.agent-card .ag-metrics span { font-size: 18px; }
/* ----- Recordings audio player: themed ----- */
audio { width: 100%; outline: none; }
audio::-webkit-media-controls-panel {
background: var(--surface-2);
}
/* ----- Section title in recordings: refined ----- */
.rec-section-title {
display: flex; align-items: center; gap: 10px;
margin-top: 24px;
}
.rec-section-title::before {
content: "";
display: inline-block;
width: 4px; height: 16px;
background: var(--accent);
border-radius: 2px;
}
.view > .rec-section-title:first-child { margin-top: 0; }
/* ----- Better card.flush with no padding to fit special widgets ----- */
.card.flush > .card-head { padding: var(--density-y) var(--density-x) 14px; margin-bottom: 0; }
.card.flush > .card-head + * { padding-left: var(--density-x); padding-right: var(--density-x); padding-bottom: var(--density-y); }
/* ----- AI Pulse alerts: refined surface ----- */
#aiPulseAlerts > * { border-radius: var(--radius-sm); }
/* ----- Topbar separator bottom line: hide when sticky shadow takes over ----- */
.topbar { box-shadow: 0 1px 0 0 transparent; transition: box-shadow 0.18s ease; }
.topbar.scrolled { box-shadow: 0 1px 0 0 var(--line), 0 4px 16px oklch(0 0 0 / 0.04); border-bottom-color: transparent; }
:root[data-theme="dark"] .topbar.scrolled { box-shadow: 0 1px 0 0 var(--line), 0 4px 16px oklch(0 0 0 / 0.3); }
/* ===== KPI gauge row (above .kpi-strip) ===== */
.kpi-gauges {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-bottom: 14px;
}
@media (max-width: 760px) {
/* minmax(0, …) so the ECharts host's inline width (set at the
previous viewport) can't lock the column open — resize() needs
the track to shrink first to measure the smaller width. */
.kpi-gauges { grid-template-columns: minmax(0, 1fr); }
}
.kpi-gauge {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 20px;
padding: 14px 16px 10px;
display: flex;
flex-direction: column;
gap: 4px;
min-height: 168px;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.kpi-gauge:hover { border-color: var(--ink-2); box-shadow: 0 6px 18px rgba(0,0,0,0.05); }
.kpi-gauge-title {
font-size: 12px;
color: var(--muted);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.kpi-gauge-host {
width: 100%;
height: 110px;
min-width: 0;
overflow: hidden;
}
.kpi-gauge-sub {
font-size: 11px;
color: var(--muted);
text-align: center;
margin-top: -4px;
}
/* ===== Subtle 3D live-orb in topbar ===== */
.live-orb {
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-block;
position: relative;
flex: 0 0 30px;
background: radial-gradient(circle at 35% 30%, var(--accent-soft), transparent 70%);
overflow: hidden;
transition: transform 0.25s ease, filter 0.25s ease;
}
.live-orb canvas { width: 100% !important; height: 100% !important; display: block; }
.live-orb:hover { transform: scale(1.08); filter: brightness(1.1); }
/* Lightweight reveal hooks driven by JS — keep CSS-only fallback if GSAP fails */
.fx-reveal { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) {
.fx-reveal { opacity: 1 !important; transform: none !important; }
.live-orb canvas { display: none; }
}
/* =============================================================
v3 refresh — May 2026
Sidebar shell, date bar, info tooltips, hero gauges, featured KPI
============================================================= */
/* ===== Shell: sidebar + main column ===== */
body {
display: grid;
grid-template-columns: 248px minmax(0, 1fr);
min-height: 100vh;
}
.sidebar {
position: sticky;
top: 0;
height: 100vh;
background: var(--surface);
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 40;
}
.app {
min-width: 0;
max-width: 1640px;
margin: 0 auto;
padding: 16px clamp(14px, 3vw, 28px) 80px;
width: 100%;
}
/* Hamburger that only shows when the sidebar collapses to a drawer */
.sb-mobile-toggle {
display: none;
width: 36px; height: 36px;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink-2);
align-items: center; justify-content: center;
cursor: pointer;
}
.sb-mobile-toggle:hover { color: var(--ink); border-color: var(--ink-2); }
/* Backdrop scrim under the mobile drawer */
.sb-scrim {
position: fixed; inset: 0;
background: rgba(20, 12, 8, 0.45);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 35;
animation: sb-fade 0.18s ease-out;
}
@keyframes sb-fade { from { opacity: 0; } to { opacity: 1; } }
/* Restore topbar negative-margin sweep to the new column width */
.topbar {
margin-left: clamp(-14px, -3vw, -28px);
margin-right: clamp(-14px, -3vw, -28px);
padding-left: clamp(14px, 3vw, 28px);
padding-right: clamp(14px, 3vw, 28px);
}
/* Hide the legacy in-topbar nav + brand logo when sidebar is active */
.topbar .topnav,
.topbar .brand { display: none; }
.topbar { justify-content: flex-end; }
.topbar .topbar-left { flex: 1; min-width: 0; }
/* ===== Sidebar internals ===== */
.sb-brand {
display: flex; align-items: center; gap: 10px;
padding: 16px 18px 14px;
border-bottom: 1px solid var(--line);
}
.sb-brand .mark {
width: 32px; height: 32px;
border-radius: var(--radius-xs);
background: var(--accent);
color: #fff;
display: grid; place-items: center;
font-weight: 700; font-size: 13px;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.sb-brand .wordmark {
display: flex; flex-direction: column; line-height: 1.15; min-width: 0;
}
.sb-brand .wordmark b {
font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
color: var(--ink);
}
.sb-brand .wordmark span {
font: 500 10px var(--font-mono);
color: var(--ink-3);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sb-brand .menu-btn {
margin-left: auto;
color: var(--ink-3);
padding: 4px;
border: 0;
border-radius: 6px;
background: transparent;
display: grid; place-items: center;
cursor: pointer;
}
.sb-brand .menu-btn:hover { background: var(--surface-2); color: var(--ink); }
.sb-scroll {
flex: 1;
overflow-y: auto;
padding: 12px 0 8px;
}
.sb-scroll::-webkit-scrollbar { width: 6px; }
.sb-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.sb-section { margin-bottom: 10px; }
.sb-section .sb-label {
font: 600 10px var(--font-mono);
letter-spacing: 0.1em;
color: var(--ink-4);
text-transform: uppercase;
padding: 8px 18px 6px;
}
.sb-item {
display: grid;
grid-template-columns: 18px 1fr auto;
align-items: center;
gap: 12px;
width: calc(100% - 16px);
margin: 1px 8px;
padding: 7px 10px;
border: 0;
background: transparent;
border-radius: var(--radius-xs);
color: var(--ink-2);
font: 500 13px var(--font-ui);
text-align: left;
cursor: pointer;
position: relative;
transition: background 0.12s, color 0.12s;
}
.sb-item:hover { background: var(--surface-2); color: var(--ink); }
.sb-item.active {
background: var(--accent-softer);
color: var(--accent);
font-weight: 600;
}
.sb-item.active::before {
content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px;
width: 2px; background: var(--accent); border-radius: 0 2px 2px 0;
}
.sb-item .ico { width: 17px; height: 17px; color: currentColor; opacity: 0.85; }
.sb-item .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item .right { display: flex; align-items: center; gap: 6px; }
.sb-item.restricted { color: var(--ink-4); cursor: not-allowed; }
.sb-item.restricted:hover { background: transparent; color: var(--ink-3); }
.sb-item.restricted .ico { opacity: 0.55; }
.sb-item.restricted .lock { width: 12px; height: 12px; color: var(--ink-4); }
/* Brand row: stronger weight + slightly more breathing room */
.sb-item.sb-brand-row {
margin-top: 6px;
padding-top: 9px;
padding-bottom: 7px;
color: var(--ink);
font-weight: 600;
letter-spacing: -0.005em;
}
.sb-section .sb-brand-row:first-child,
.sb-section .sb-label + .sb-brand-row { margin-top: 0; }
/* Channel sub-header (between brand and leaves) */
.sb-item.sb-channel {
grid-template-columns: 14px 1fr auto;
padding: 4px 10px 4px 22px;
margin: 1px 8px;
color: var(--ink-3);
font: 500 11px var(--font-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.sb-item.sb-channel .ico { width: 13px; height: 13px; opacity: 0.7; }
.sb-item.sb-channel:hover { background: transparent; color: var(--ink-3); }
/* Leaf nested under channel: extra indent + softer treatment */
.sb-item.sb-item--deep {
padding-left: 32px;
font-size: 12.5px;
}
.sb-item.sb-item--deep .ico {
width: 15px; height: 15px;
opacity: 0.75;
}
.sb-item.sb-item--deep.active {
font-weight: 600;
}
.sb-item.sb-item--deep.active::before { left: -8px; }
.sb-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 17px; padding: 0 5px;
border-radius: 9px;
background: var(--accent); color: #fff;
font: 600 10px var(--font-mono);
letter-spacing: 0.02em;
}
.sb-badge.muted { background: var(--surface-3); color: var(--ink-3); }
.sb-access-hint {
font-size: 10.5px; color: var(--ink-3);
padding: 4px 18px 10px; line-height: 1.4;
}
.sb-access-hint .legend {
display: flex; gap: 14px; flex-wrap: wrap;
font: 500 10px var(--font-mono);
}
.sb-access-hint .legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.sb-access-hint .legend .sw { width: 8px; height: 8px; border-radius: 50%; }
.sb-access-hint .legend .sw.ok { background: var(--accent-2); }
.sb-access-hint .legend .sw.no { background: var(--ink-4); }
.sb-access-hint .legend .sw.pro { background: oklch(0.62 0.13 60); }
.sb-user {
margin: 8px 10px 10px;
padding: 10px;
border-radius: 9px;
border: 1px solid var(--line);
background: var(--surface-2);
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
align-items: center;
}
.sb-user .avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--accent-soft); color: var(--accent-ink);
display: grid; place-items: center;
font: 600 11px var(--font-mono);
}
.sb-user .who { min-width: 0; line-height: 1.2; }
.sb-user .who b {
display: block;
font-size: 12.5px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--ink);
}
.sb-user .who .role {
display: inline-flex; align-items: center; gap: 4px;
font: 500 10px var(--font-mono);
color: var(--accent);
background: var(--accent-softer);
padding: 1px 6px;
border-radius: 999px;
margin-top: 3px;
letter-spacing: 0.04em;
}
.sb-user .who .role .dot {
width: 4px; height: 4px; border-radius: 50%;
background: var(--accent-2);
}
/* User-card kebab popover (logout) */
.sb-user-menu-wrap {
position: relative;
display: inline-flex;
}
.sb-user-pop {
position: absolute;
bottom: calc(100% + 6px);
right: 0;
min-width: 180px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 10px;
padding: 4px;
box-shadow: var(--shadow);
z-index: 60;
animation: sbUserPopIn 140ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.sb-user-pop[hidden] { display: none; }
@keyframes sbUserPopIn {
from { opacity: 0; transform: translateY(4px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.sb-user-pop-item {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 8px 10px;
border: 0;
background: transparent;
border-radius: 7px;
font: 500 13px var(--font-ui);
color: var(--ink);
text-align: left;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.sb-user-pop-item:hover,
.sb-user-pop-item:focus-visible {
background: var(--surface-2);
outline: none;
}
.sb-user-pop-ico {
width: 16px; height: 16px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink-3);
flex-shrink: 0;
}
.sb-user-pop-item:hover .sb-user-pop-ico,
.sb-user-pop-item:focus-visible .sb-user-pop-ico { color: currentColor; }
.sb-user-pop-item--danger:hover,
.sb-user-pop-item--danger:focus-visible {
background: var(--danger-soft);
color: var(--danger-ink);
}
@media (prefers-reduced-motion: reduce) {
.sb-user-pop { animation: none; }
}
/* ===== Date range bar ===== */
.date-bar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 18px;
padding: 14px 18px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
margin-bottom: 18px;
}
.date-bar .nav { display: flex; gap: 4px; }
.date-bar .nav button {
width: 32px; height: 32px;
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink-3);
background: var(--surface);
display: grid; place-items: center;
cursor: pointer;
}
.date-bar .nav button:hover { background: var(--surface-2); color: var(--ink); }
.date-bar .display { display: flex; align-items: center; gap: 18px; min-width: 0; }
.date-bar .icon-wrap {
width: 38px; height: 38px;
border-radius: 10px;
background: var(--accent-softer);
color: var(--accent);
display: grid; place-items: center;
flex-shrink: 0;
}
.date-bar .text { min-width: 0; line-height: 1.25; }
.date-bar .text .lbl {
font: 500 10px var(--font-mono); letter-spacing: 0.1em;
color: var(--ink-3); text-transform: uppercase;
margin-bottom: 2px;
}
.date-bar .text .range {
font-size: 15px; font-weight: 600;
letter-spacing: -0.005em;
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
color: var(--ink);
}
.date-bar .text .range .arrow { color: var(--ink-3); font-weight: 400; }
.date-bar .text .range .dt {
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
.date-bar .text .range .time { font: 500 13px var(--font-mono); color: var(--ink-2); }
.date-bar .text .sub {
font-size: 11.5px; color: var(--ink-3);
margin-top: 4px;
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.date-bar .text .sub .chip {
display: inline-flex; align-items: center; gap: 5px;
font: 500 11px var(--font-mono);
}
.date-bar .text .sub .chip .dot {
width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2);
}
.date-bar .presets {
display: flex; gap: 4px;
background: var(--surface-2);
padding: 3px;
border-radius: 9px;
}
.date-bar .presets button {
padding: 6px 11px;
font-size: 12px; font-weight: 500;
color: var(--ink-3);
border: 0;
background: transparent;
border-radius: 6px;
cursor: pointer;
}
.date-bar .presets button:hover { color: var(--ink); }
.date-bar .presets button.active {
background: var(--surface); color: var(--accent);
box-shadow: 0 1px 2px rgba(20,12,8,0.06), 0 0 0 1px var(--line);
}
@media (max-width: 1100px) {
.date-bar { grid-template-columns: 1fr; gap: 14px; }
.date-bar .presets { overflow-x: auto; }
}
/* ===== Info tooltip on KPI labels ===== */
.info-icon {
display: inline-flex;
align-items: center; justify-content: center;
width: 14px; height: 14px;
margin-left: 6px;
border-radius: 50%;
border: 1px solid var(--ink-4);
color: var(--ink-3);
font: 600 9px var(--font-ui);
cursor: help;
vertical-align: 1px;
position: relative;
background: transparent;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.info-icon:hover { background: var(--ink-2); color: #fff; border-color: var(--ink-2); }
.info-icon:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.info-icon .tip {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: 320px;
padding: 14px 16px 13px;
background: oklch(0.18 0.005 60);
color: oklch(0.92 0.005 60);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(20,12,8,0.18);
text-align: left;
font: 400 12px/1.5 var(--font-ui);
letter-spacing: 0;
opacity: 0; visibility: hidden;
pointer-events: none;
transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
z-index: 50;
}
.info-icon:hover .tip,
.info-icon:focus .tip {
opacity: 1; visibility: visible;
transform: translateX(-50%) translateY(0);
transition: opacity 0.15s, transform 0.15s, visibility 0s;
}
.info-icon .tip::after {
content: "";
position: absolute;
top: 100%; left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: oklch(0.18 0.005 60);
}
.info-icon .tip h5 {
margin: 0 0 4px;
font: 600 12px var(--font-ui);
color: #fff;
letter-spacing: -0.005em;
}
.info-icon .tip p {
margin: 0 0 10px;
color: oklch(0.85 0.005 60);
}
.info-icon .tip .row {
display: flex; gap: 8px;
font: 500 10.5px var(--font-mono);
color: oklch(0.78 0.005 60);
margin-bottom: 5px;
letter-spacing: 0.02em;
}
.info-icon .tip .row b {
color: oklch(0.65 0.07 80);
font-weight: 600;
flex-shrink: 0; width: 70px;
}
.info-icon .tip .row span {
color: oklch(0.92 0.005 60);
font-weight: 400;
}
.info-icon .tip .row.formula span {
color: oklch(0.78 0.06 165);
font-weight: 500;
}
.info-icon .tip .row:last-child { margin-bottom: 0; }
.info-icon[data-align="start"] .tip {
left: 0; transform: translate(0, 4px);
}
.info-icon[data-align="start"]:hover .tip,
.info-icon[data-align="start"]:focus .tip {
transform: translate(0, 0);
}
.info-icon[data-align="start"] .tip::after { left: 14px; transform: none; }
/* ===== Hero gauges row ===== */
.hero {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 18px;
}
.gauge-card {
display: flex; align-items: center; gap: 18px;
padding: 18px 22px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
}
.gauge-card .meta { flex: 1; min-width: 0; }
.gauge-card .label {
font: 500 11px var(--font-mono); letter-spacing: 0.06em;
color: var(--ink-3); text-transform: uppercase;
}
.gauge-card .value {
font: 600 32px/1.05 var(--font-ui);
letter-spacing: -0.02em;
margin: 6px 0 4px;
color: var(--ink);
}
.gauge-card .value .unit {
font-size: 18px; color: var(--ink-3); margin-left: 4px; font-weight: 500;
}
.gauge-card .delta {
font: 500 11.5px var(--font-mono); color: var(--ink-3);
display: flex; align-items: center; gap: 6px;
}
.gauge-card .delta.good { color: var(--accent-2); }
.gauge-card .delta.bad { color: var(--danger); }
.gauge-card .gauge-svg { flex-shrink: 0; }
/* ===== KPI featured tile (wine gradient) + sparkline ===== */
.kpi.featured {
background: linear-gradient(180deg, var(--accent) 0%, oklch(0.36 0.12 var(--brand-h)) 100%);
color: #fff;
border-color: transparent;
}
.kpi.featured .kpi-label,
.kpi.featured .label,
.kpi.featured .kpi-sub,
.kpi.featured .muted { color: rgba(255,255,255,0.78) !important; }
.kpi.featured .kpi-value,
.kpi.featured .value,
.kpi.featured strong { color: #fff !important; }
.kpi.featured .delta-pill,
.kpi.featured .chip { background: rgba(255,255,255,0.16); color: #fff; }
.kpi-spark { height: 32px; margin: 4px -4px -4px; }
.kpi-spark svg { display: block; width: 100%; height: 100%; }
/* ===== Status pill (open/resolved/awaiting) ===== */
.pill-status {
display: inline-flex; align-items: center; gap: 6px;
font: 500 11px var(--font-mono);
padding: 2px 9px;
border-radius: 999px;
background: var(--surface-2); color: var(--ink-2);
}
.pill-status .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); }
.pill-status.ouvert,
.pill-status.open { background: var(--accent-2-soft); color: var(--accent-2-ink); }
.pill-status.ouvert .dot,
.pill-status.open .dot { background: var(--accent-2); }
.pill-status.résolu,
.pill-status.resolved { background: oklch(0.95 0.02 240); color: oklch(0.42 0.10 240); }
.pill-status.résolu .dot,
.pill-status.resolved .dot { background: oklch(0.55 0.13 240); }
.pill-status.attente,
.pill-status.pending { background: var(--warn-soft); color: var(--warn-ink); }
.pill-status.attente .dot,
.pill-status.pending .dot { background: var(--warn); }
/* ===== Sticky-headered data table (legacy .data + new .tbl share) ===== */
.tbl-card { padding: 0; overflow: hidden; }
.tbl { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.tbl thead th {
position: sticky; top: 0;
background: var(--surface);
text-align: left;
font: 500 10.5px var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
padding: 14px 18px 10px;
border-bottom: 1px solid var(--line);
z-index: 1;
}
.tbl tbody td {
padding: 11px 18px;
border-bottom: 1px solid var(--line-2);
vertical-align: middle;
color: var(--ink);
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl .right { text-align: right; }
.tbl .lbl-cell { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.tbl .pct {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 12px;
}
.tbl .pct .bar {
width: 60px; height: 4px; border-radius: 2px;
background: var(--surface-2); overflow: hidden;
}
.tbl .pct .bar > i { display: block; height: 100%; background: var(--accent-2); }
.tbl .pct.zero { color: var(--ink-4); }
.tbl .pct.zero .bar > i { background: var(--ink-4); }
.tbl .pct.low { color: var(--warn); }
.tbl .pct.low .bar > i { background: var(--warn); }
/* Mini progress bar inside existing labels table (% column) */
.labels-table td .pct {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
}
.labels-table td .pct .bar {
width: 56px; height: 4px; border-radius: 2px;
background: var(--surface-2); overflow: hidden;
}
.labels-table td .pct .bar > i {
display: block; height: 100%; background: var(--accent-2);
}
.labels-table td .pct.zero { color: var(--ink-4); }
.labels-table td .pct.zero .bar > i { background: var(--ink-4); }
.labels-table td .pct.low { color: var(--warn); }
.labels-table td .pct.low .bar > i { background: var(--warn); }
/* ===== Mobile / narrow viewport collapse ===== */
@media (max-width: 900px) {
body { grid-template-columns: 1fr; }
.sidebar {
position: fixed; left: 0; top: 0; width: 280px;
transform: translateX(-100%);
transition: transform 0.22s ease-out;
box-shadow: 0 12px 32px rgba(20,12,8,0.18);
z-index: 50;
}
.sidebar.open { transform: translateX(0); }
.sb-mobile-toggle { display: inline-flex; }
.hero { grid-template-columns: 1fr; }
/* Sidebar becomes a drawer, so restore the brand in the topbar.
Without this, the LabelVie logo doesn't appear until the drawer
is opened. The topnav stays hidden — drawer covers navigation. */
.topbar .brand { display: flex; }
.brand-logo { height: 44px; }
/* Bump touch targets to ≥44px on mobile (HIG / MD) */
.sb-item { min-height: 44px; padding: 10px 12px; }
.date-bar .nav button { width: 44px; height: 44px; }
.date-bar .presets button { min-height: 36px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
.sidebar { transition: none; }
.sb-scrim { animation: none; }
}
/* ============================================================
POLISH PASS v3 — May 2026
Additive only. Targets: mobile tap baseline, leaderboard
medal treatment, sortable-header chevron, live-orb halo,
CSAT row affordance, KPI hero highlight, search hover,
safe-area + dvh shell on iOS.
============================================================ */
/* ----- Mobile tap baseline -----
Removes the iOS default blue tap flash, kills the 300ms tap
delay on buttons/links/inputs, and respects iOS safe-area
insets so the bottom of the dashboard doesn't get clipped
under the home indicator. */
html { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"], input, select, textarea, summary,
.sb-item, .seg button, .topnav-button, .icon-btn, .theme-toggle,
.csat-row, .agent-row, .heatmap-cell {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* Use dynamic viewport units where address-bar collapse matters */
@supports (height: 100dvh) {
body { min-height: 100dvh; }
@media (max-width: 900px) {
.sidebar { height: 100dvh; }
}
}
/* iOS safe-area: don't let the home indicator clip the dashboard */
.app {
padding-bottom: max(80px, calc(56px + env(safe-area-inset-bottom)));
}
@media (max-width: 900px) {
.sidebar { padding-bottom: env(safe-area-inset-bottom); }
}
/* Drawer width: scale to small screens instead of fixed 280px */
@media (max-width: 900px) {
.sidebar { width: min(82vw, 304px); }
}
/* ----- Agent leaderboard: gold / silver / bronze for ranks 1-3 -----
The existing .rk.top selector flattens 1-3 into a single accent
color. Differentiate them so the podium reads at a glance. */
.agent-row .rk.top { font-size: 15px; letter-spacing: -0.01em; }
.agent-row .rk.top.r1 {
color: oklch(0.62 0.16 75); /* gold */
text-shadow: 0 0 12px oklch(0.78 0.18 75 / 0.35);
}
.agent-row .rk.top.r2 { color: oklch(0.66 0.02 60); } /* silver */
.agent-row .rk.top.r3 { color: oklch(0.55 0.10 35); } /* bronze */
:root[data-theme="dark"] .agent-row .rk.top.r1 { color: oklch(0.82 0.16 80); }
:root[data-theme="dark"] .agent-row .rk.top.r2 { color: oklch(0.82 0.01 70); }
:root[data-theme="dark"] .agent-row .rk.top.r3 { color: oklch(0.72 0.12 40); }
/* Subtle row-tint on the podium so the top-3 read as a group */
.agent-row.podium-1 {
background: linear-gradient(
90deg,
color-mix(in oklab, oklch(0.78 0.18 75) 9%, transparent) 0%,
transparent 35%);
}
.agent-row.podium-2 {
background: linear-gradient(
90deg,
color-mix(in oklab, oklch(0.78 0.02 70) 8%, transparent) 0%,
transparent 30%);
}
.agent-row.podium-3 {
background: linear-gradient(
90deg,
color-mix(in oklab, oklch(0.62 0.10 35) 8%, transparent) 0%,
transparent 28%);
}
/* ----- Sortable header: visible chevron on the active sort key -----
Both .agent-head children and .labels-table th[data-sort] participate.
Adds a subtle ▾ to .sort-active, with rotation hook for ascending. */
.agent-head > div.sort-active,
table.data thead th[data-sort].sort-active,
.labels-table th[data-sort].sort-active {
position: relative;
}
.agent-head > div.sort-active::after,
table.data thead th[data-sort].sort-active::after,
.labels-table th[data-sort].sort-active::after {
content: "";
display: inline-block;
width: 8px; height: 8px;
margin-left: 6px;
vertical-align: -1px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.agent-head > div.sort-active.asc::after,
table.data thead th[data-sort].sort-active.asc::after,
.labels-table th[data-sort].sort-active.asc::after {
transform: rotate(180deg);
}
/* ----- CSAT row hover: left-accent rail (matches sidebar convention) -----
Establishes consistent "interactive row" language across the app. */
.csat-row {
position: relative;
transition: background 0.14s ease, padding-left 0.14s ease;
}
.csat-row::before {
content: "";
position: absolute;
left: 0; top: 6px; bottom: 6px;
width: 2px;
background: var(--accent);
border-radius: 0 2px 2px 0;
opacity: 0;
transform: scaleY(0.4);
transform-origin: center;
transition: opacity 0.16s ease, transform 0.16s ease;
}
.csat-row:hover::before { opacity: 1; transform: scaleY(1); }
.csat-row:hover { padding-left: 14px; }
/* ----- KPI hero: inner highlight ring + refined corner glow -----
The hero card already uses a wine gradient + radial corner.
Add a 1px inner highlight to fake light hitting the top edge,
plus a tightened second corner glow for depth. */
.kpi.hero {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 0 0 1px rgba(255, 255, 255, 0.05),
0 8px 24px oklch(0.42 0.13 var(--brand-h) / 0.22),
0 1px 2px oklch(0.42 0.13 var(--brand-h) / 0.14);
}
.kpi.hero::before {
content: "";
position: absolute;
top: -30%; left: -10%;
width: 60%; height: 80%;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.08), transparent 60%);
pointer-events: none;
filter: blur(8px);
}
.kpi.hero .k-val {
text-shadow: none;
}
/* ----- Search input: subtle hover affordance before focus ----- */
.search-input:hover:not(:focus-within) {
background: var(--surface);
border-color: var(--line);
color: var(--ink-2);
}
/* ----- Date-bar icon-wrap: subtle gradient for dimensionality ----- */
.date-bar .icon-wrap {
background: linear-gradient(
140deg,
color-mix(in oklab, var(--accent) 14%, var(--surface)) 0%,
var(--accent-softer) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
:root[data-theme="dark"] .date-bar .icon-wrap {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* ----- Date-bar preset active: stronger affordance ----- */
.date-bar .presets button.active {
background: var(--accent-softer);
color: var(--accent-ink);
border-radius: 999px;
padding: 4px 10px;
font-weight: 600;
}
/* ----- Page-head accent rule: subtle width-in on first paint ----- */
@keyframes accentRuleIn {
from { width: 0; opacity: 0.4; }
to { width: 56px; opacity: 1; }
}
.page-head::after {
animation: accentRuleIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@media (max-width: 720px) {
.page-head::after { animation-name: none; width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.page-head::after { animation: none; }
}
/* ----- Topnav active underline: smoother slide-in ----- */
.topnav-item.active .topnav-button::after {
animation: navUnderlineIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes navUnderlineIn {
from { transform: scaleX(0.4); opacity: 0; }
to { transform: scaleX(1); opacity: 1; }
}
/* ----- Chip: slightly more refined typography + transition ----- */
.chip { transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease; }
/* ----- Card-head card-title: small accent dot for visual anchor -----
Only inside .activation-card / .csat-card to avoid noise everywhere. */
.activation-card > .card-head .card-title::before,
.csat-card > .card-head .card-title::before {
content: "";
display: inline-block;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--accent);
margin-right: 2px;
vertical-align: 3px;
}
/* ----- Mobile: tighten kpi-strip / activation gaps + value clamps -----
The 720 breakpoint already drops sizes, but on the smallest phones
the values still feel cramped. clamp() lets them breathe. */
@media (max-width: 720px) {
.k-val { font-size: clamp(22px, 6.4vw, 26px); }
.kpi.hero .k-val { font-size: clamp(28px, 8.4vw, 34px); }
.act-val { font-size: clamp(18px, 5.6vw, 22px); }
.act-tile.hero .act-val { font-size: clamp(22px, 6.6vw, 26px); }
}
/* Tiny phones: hide the legend on heatmap to reclaim space */
@media (max-width: 380px) {
.heatmap-scale { display: none; }
}
/* ----- Chart tooltip: refined arrow + subtle border ----- */
.chart-tooltip {
border: 1px solid color-mix(in oklab, var(--ink) 30%, transparent);
}
.chart-tooltip::after {
content: "";
position: absolute;
bottom: -6px; left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 10px; height: 10px;
background: var(--ink);
border-right: 1px solid color-mix(in oklab, var(--ink) 30%, transparent);
border-bottom: 1px solid color-mix(in oklab, var(--ink) 30%, transparent);
}
/* ----- Sidebar item active: refined left-rail (full-height accent) -----
Existing rule uses left:-8px which sits outside the item's padding.
Give it a touch more presence. */
.sb-item.active::before {
top: 6px; bottom: 6px;
width: 3px;
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
border-radius: 0 3px 3px 0;
box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 40%, transparent);
}
/* ----- Status pills: tiny lift on hover for clickable rows ----- */
tr:hover .status-pill,
.csat-row:hover .status-pill {
filter: brightness(1.04);
}
/* ============================================================
Architecture / sitemap visualization (interactive flow)
Vanilla SVG — Campagne → Canal → Rapport
============================================================ */
.arch-card {
/* Card already has its own padding; the SVG host handles its own layout */
padding-bottom: 12px;
}
.arch-stats {
display: flex; flex-wrap: wrap; gap: 18px;
font-size: 12px; color: var(--muted);
}
.arch-stat b {
font-family: var(--font-mono);
font-size: 13px; font-weight: 700;
color: var(--ink);
margin-right: 1px;
}
.arch-canvas {
width: 100%;
margin-top: 10px;
overflow-x: auto;
/* SVG decides its own aspect; cap height for very tall sets */
max-height: 78vh;
overflow-y: auto;
}
.arch-svg {
display: block;
width: 100%;
min-width: 760px;
height: auto;
font-family: var(--font-ui);
}
/* Column headers */
.arch-col-head {
font: 600 11px var(--font-mono);
letter-spacing: 0.12em;
text-transform: uppercase;
fill: var(--ink-3);
}
/* ----- Paths ----- */
.arch-paths {
fill: none;
stroke: var(--line);
stroke-width: 1.5;
}
.arch-path {
stroke: color-mix(in oklab, var(--ink) 22%, transparent);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
transition: stroke 0.18s ease, stroke-width 0.18s ease, opacity 0.18s ease;
}
/* ----- Nodes ----- */
.arch-node { cursor: default; }
.arch-node--out { cursor: pointer; }
.arch-node--out.arch-node--locked { cursor: not-allowed; }
.arch-node-rect {
fill: var(--surface);
stroke: var(--line);
stroke-width: 1;
transition: fill 0.18s ease, stroke 0.18s ease, filter 0.18s ease;
}
.arch-node-label {
fill: var(--ink);
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
pointer-events: none;
user-select: none;
}
/* Kind-specific surfaces */
.arch-node--camp .arch-node-rect {
fill: color-mix(in oklab, var(--accent) 10%, var(--surface));
stroke: color-mix(in oklab, var(--accent) 35%, var(--line));
}
.arch-node--camp .arch-node-label {
fill: var(--accent-ink);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 12px;
}
.arch-node--chan .arch-node-rect {
fill: color-mix(in oklab, var(--accent-2) 8%, var(--surface));
stroke: color-mix(in oklab, var(--accent-2) 32%, var(--line));
}
.arch-node--chan .arch-node-label {
fill: var(--accent-2-ink);
font-size: 12.5px;
}
.arch-node--out .arch-node-rect {
fill: var(--surface-2);
stroke: var(--line);
}
.arch-node--out:hover .arch-node-rect,
.arch-node--out:focus-visible .arch-node-rect {
fill: var(--surface);
stroke: var(--accent);
filter: drop-shadow(0 4px 12px color-mix(in oklab, var(--accent) 22%, transparent));
}
.arch-node--out:focus-visible {
outline: none;
}
.arch-node--out:focus-visible .arch-node-rect {
stroke-width: 2;
}
.arch-node--locked .arch-node-rect {
fill: var(--surface-3);
stroke: var(--line-2);
stroke-dasharray: 4 3;
}
.arch-node--locked .arch-node-label {
fill: var(--ink-4);
}
.arch-node-lock {
fill: var(--ink-4);
pointer-events: none;
}
/* ----- Highlight / dim states ----- */
.arch-svg.hl .arch-path { opacity: 0.18; }
.arch-svg.hl .arch-path.is-active {
opacity: 1;
stroke: var(--accent);
stroke-width: 2.25;
}
.arch-svg.hl .arch-node { opacity: 0.32; }
.arch-svg.hl .arch-node.is-active {
opacity: 1;
}
.arch-svg.hl .arch-node.is-active .arch-node-rect {
filter: drop-shadow(0 6px 16px color-mix(in oklab, var(--accent) 26%, transparent));
}
.arch-svg.hl .arch-node--out.is-active .arch-node-rect {
stroke: var(--accent);
stroke-width: 1.75;
}
/* Legend below canvas */
.arch-legend {
display: flex; flex-wrap: wrap; gap: 14px;
padding: 10px 4px 0;
font-size: 12px; color: var(--muted);
}
.arch-leg {
display: inline-flex; align-items: center; gap: 6px;
}
.arch-leg-sw {
display: inline-block;
width: 18px; height: 10px;
border-radius: 4px;
border: 1px solid var(--line);
}
.arch-leg-camp { background: color-mix(in oklab, var(--accent) 14%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); }
.arch-leg-chan { background: color-mix(in oklab, var(--accent-2) 12%, var(--surface)); border-color: color-mix(in oklab, var(--accent-2) 32%, var(--line)); }
.arch-leg-out { background: var(--surface-2); }
.arch-leg-hint { margin-left: auto; color: var(--ink-4); font-style: italic; }
/* Mobile: drop legend hint, allow horizontal scroll */
@media (max-width: 720px) {
.arch-canvas { margin-top: 6px; }
.arch-svg { min-width: 680px; }
.arch-leg-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.arch-path, .arch-node, .arch-node-rect { transition: none; }
}
/* =============================================================
Editorial flat + crisp — Card refinement pass (May 2026)
Goal: Bloomberg/Stripe-grade information density and hierarchy.
Hairline borders, accent edge details, refined typography rhythm.
All changes are layered on top of existing rules so they are
safe to revert by removing this block.
============================================================= */
/* ---------- Shared hairline + edge accent system ---------- */
:root {
--hairline: color-mix(in oklab, var(--ink) 8%, transparent);
--hairline-strong: color-mix(in oklab, var(--ink) 14%, transparent);
--edge-accent: linear-gradient(90deg,
transparent 0%,
color-mix(in oklab, var(--accent) 65%, transparent) 18%,
color-mix(in oklab, var(--accent) 65%, transparent) 82%,
transparent 100%);
/* AA-compliant muted text: oklch 0.45 yields ~5.2:1 on white — passes WCAG 1.4.3 */
--text-muted: oklch(0.45 0.005 60);
}
:root[data-theme="dark"] {
--hairline: color-mix(in oklab, var(--ink) 12%, transparent);
--hairline-strong: color-mix(in oklab, var(--ink) 22%, transparent);
/* In dark mode, ink scale inverts — muted text needs to be light enough to pass AA on dark surface */
--text-muted: oklch(0.74 0.008 70);
}
/* ---------- Base .card: hairline borders, refined hover ---------- */
.card {
border-color: var(--hairline);
box-shadow:
0 1px 0 color-mix(in oklab, var(--ink) 3%, transparent),
0 0 0 0.5px color-mix(in oklab, var(--ink) 4%, transparent);
position: relative;
}
.card:hover {
border-color: var(--hairline-strong);
box-shadow:
0 1px 0 color-mix(in oklab, var(--ink) 4%, transparent),
0 0 0 0.5px color-mix(in oklab, var(--ink) 6%, transparent);
transform: none; /* editorial = no lift */
}
/* Card head — refined typography and optional separator */
.card-head { margin-bottom: 16px; padding-bottom: 0; }
.card-title {
font-size: 13px;
letter-spacing: 0.005em;
font-weight: 650;
text-transform: none;
}
.card-sub {
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--muted);
}
/* ---------- KPI tile: hairline, accent eyebrow dot, tighter rhythm ---------- */
.kpi:not(.hero):not(.k-warn):not(.k-alert) {
border-color: var(--hairline);
box-shadow:
0 1px 0 color-mix(in oklab, var(--ink) 3%, transparent),
0 0 0 0.5px color-mix(in oklab, var(--ink) 4%, transparent);
}
.kpi:not(.hero) {
padding: 16px 20px;
gap: 8px;
}
.kpi:not(.hero):not(.k-warn):not(.k-alert):hover {
border-color: var(--hairline-strong);
transform: none; /* editorial: no lift */
box-shadow:
0 1px 0 color-mix(in oklab, var(--ink) 4%, transparent),
0 0 0 0.5px color-mix(in oklab, var(--ink) 6%, transparent);
}
.kpi:not(.hero):hover { transform: none; }
/* Eyebrow label gets a tiny accent dot prefix and tighter caps.
Tracking kept modest (0.06em) so long French labels like
"DÉLAI DE PRISE EN CHARGE" fit on one line in narrow tiles. */
.kpi .k-label {
font-size: 11px;
letter-spacing: 0.06em;
font-weight: 600;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1.3;
}
/* Reserve consistent label slot so values align vertically across tiles
even when one label wraps to 2 lines. */
.kpi:not(.hero) .k-head {
min-height: 46px;
align-items: flex-start;
}
.kpi:not(.hero) .k-label::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
opacity: 0.85;
}
.kpi.k-warn:not(.hero) .k-label::before { background: var(--warn); }
.kpi.k-alert:not(.hero) .k-label::before { background: var(--danger); }
/* Bigger value, tighter tracking */
.k-val {
font-size: 32px;
letter-spacing: -0.03em;
line-height: 1.02;
font-weight: 600;
}
.kpi.hero .k-val { font-size: 44px; letter-spacing: -0.03em; }
/* Foot: hairline divider + refined typography */
.k-foot {
font-size: 12px;
padding-top: 12px;
border-top: 1px solid var(--hairline);
color: var(--text-muted);
font-weight: 500;
}
.kpi:not(.hero) .k-foot { margin-top: auto; }
.kpi.hero .k-foot {
border-top-color: rgba(255,255,255,0.16);
color: rgba(255,255,255,0.85);
}
/* Delta pill: thinner, mono, tighter */
.k-delta {
font-family: var(--font-mono);
font-feature-settings: "tnum";
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
letter-spacing: -0.005em;
border-radius: var(--radius-xs);
background: transparent;
border: 1px solid var(--hairline);
color: var(--ink-2);
}
.k-delta.pos, .k-delta.down {
background: color-mix(in oklab, var(--success-soft) 50%, transparent);
color: var(--success-ink);
border-color: color-mix(in oklab, var(--success) 22%, transparent);
}
.k-delta.neg, .k-delta.up {
background: color-mix(in oklab, var(--danger-soft) 50%, transparent);
color: var(--danger-ink);
border-color: color-mix(in oklab, var(--danger) 22%, transparent);
}
.k-delta.neutral {
background: color-mix(in oklab, var(--surface-2) 65%, transparent);
color: var(--text-muted);
border-color: var(--hairline);
}
/* ---------- KPI hero: flat accent, no gradient, no pseudos ----------
Earlier polish passes layered a 140deg gradient + a bottom-right radial
highlight + a top-edge white line, which together read as "a darker
rectangle inside the card" rather than as depth. Flat color reads
cleaner against the surrounding white tiles. */
.kpi.hero {
background: var(--accent);
padding: 16px 20px; /* match .kpi:not(.hero) padding */
gap: 8px; /* match .kpi:not(.hero) gap */
box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 30%, transparent);
overflow: hidden;
height: 100%; /* explicit stretch to grid row */
}
.kpi.hero::before { display: none; }
.kpi.hero::after { display: none; }
/* Match non-hero value size so the hero card has the same natural
content height as its neighbours. The hero is still differentiated
by its wider column (1.6fr) and accent background. */
.kpi.hero .k-val { font-size: 32px; }
.kpi.hero .k-label {
color: rgba(255,255,255,0.78);
font-weight: 600;
}
.kpi.hero .k-label::before { display: none; }
.kpi.hero .k-delta {
background: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.22);
color: #fff;
}
/* ---------- Standard cards: accent top-edge stripe via modifier ---------- */
.card[data-accent],
.card.accent-edge {
border-top: 0;
background-clip: padding-box;
}
.card[data-accent]::before,
.card.accent-edge::before {
content: "";
position: absolute;
top: -1px; left: 16px; right: 16px;
height: 2px;
background: var(--edge-accent);
border-radius: 0 0 2px 2px;
pointer-events: none;
}
/* ---------- Agent cards: hairline, status indicator rail ---------- */
.agent-card {
border-color: var(--hairline);
padding: 12px 16px;
gap: 12px;
position: relative;
box-shadow: none;
overflow: hidden;
}
/* Left rail indicates activity status — non-hue signal: SOLID = active, STRIPED = idle.
This passes WCAG SC 1.4.1 (Use of Color) because the pattern shape, not just hue,
distinguishes the two states. */
.agent-card::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--success);
opacity: 0.85;
}
.agent-card.idle::before {
background: repeating-linear-gradient(
180deg,
var(--warn) 0,
var(--warn) 4px,
transparent 4px,
transparent 8px
);
opacity: 1;
}
.agent-card:hover {
border-color: var(--hairline-strong);
box-shadow: none;
}
.agent-card .ag-name {
font-size: 13.5px;
font-weight: 600;
letter-spacing: -0.005em;
}
.agent-card .ag-email {
font-size: 11px;
font-family: var(--font-mono);
letter-spacing: -0.005em;
color: var(--text-muted);
}
/* Metrics row with thin vertical dividers */
.agent-card .ag-metrics {
gap: 0;
padding: 8px 0;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.agent-card .ag-metrics > div {
padding: 4px 8px;
border-right: 1px solid var(--hairline);
}
.agent-card .ag-metrics > div:last-child { border-right: 0; }
.agent-card .ag-metrics span {
font-size: 17px;
letter-spacing: -0.02em;
font-weight: 600;
}
.agent-card .ag-metrics label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
color: var(--text-muted);
}
.agent-card .ag-foot {
border-top: 0;
padding-top: 0;
font-size: 11px;
color: var(--text-muted);
}
/* ---------- Inbound cards: accent left bar instead of tinted head ---------- */
.inbound-card {
border-color: var(--hairline);
position: relative;
}
.inbound-card::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--accent);
opacity: 0.55;
}
.inbound-card:hover { border-color: var(--hairline-strong); }
.inbound-card:hover::before { opacity: 0.9; }
.inbound-card-head {
background: transparent;
border-bottom: 1px solid var(--hairline);
padding: 12px 16px;
}
.inbound-card-name {
font-size: 13.5px;
font-weight: 600;
letter-spacing: -0.005em;
}
.inbound-card-id {
font-size: 11px;
letter-spacing: -0.005em;
color: var(--text-muted);
}
.inbound-stats {
border-bottom-color: var(--hairline);
padding: 12px 16px;
gap: 8px;
}
.inbound-stat-v {
font-size: 18px;
letter-spacing: -0.02em;
font-weight: 600;
}
.inbound-stat-l {
font-size: 11px;
letter-spacing: 0.06em;
font-weight: 600;
color: var(--text-muted);
}
/* ---------- Login card: editorial polish ---------- */
.login-form-side {
position: relative;
}
.login-card {
width: min(380px, 100%);
padding: 0;
}
.login-card-head {
margin-bottom: 36px;
position: relative;
}
.login-card-head::after {
content: "";
position: absolute;
left: 50%; bottom: -20px;
transform: translateX(-50%);
width: 36px;
height: 2px;
background: var(--accent);
border-radius: 2px;
opacity: 0.85;
}
.login-card-logo {
height: 96px;
}
.login-card form { gap: 16px; }
.login-card label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
gap: 8px;
}
.login-card input {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--radius-xs);
padding: 12px 16px;
font-size: 14px;
letter-spacing: -0.005em;
transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.login-card input:hover {
border-color: var(--hairline-strong);
}
.login-card input:focus {
border-color: var(--accent);
box-shadow:
0 0 0 1px var(--accent),
0 0 0 4px color-mix(in oklab, var(--accent) 12%, transparent);
}
.login-card .btn.primary.full {
margin-top: 12px;
padding: 12px 16px;
font-size: 13.5px;
letter-spacing: 0.02em;
border-radius: var(--radius-xs);
box-shadow:
0 1px 0 color-mix(in oklab, var(--accent) 40%, var(--ink)),
0 4px 12px color-mix(in oklab, var(--accent) 28%, transparent);
}
.login-card .btn.primary.full:hover {
box-shadow:
0 1px 0 color-mix(in oklab, var(--accent) 50%, var(--ink)),
0 6px 16px color-mix(in oklab, var(--accent) 36%, transparent);
}
/* Eyebrow above logo (added via HTML tweak) */
.login-card-eyebrow {
text-align: center;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 12px;
}
/* ---------- Card hover shadow — replace the legacy stronger lift ---------- */
.card:hover { transform: none; }
/* ---------- Dark-mode refinements ---------- */
:root[data-theme="dark"] .kpi.hero {
box-shadow:
0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent),
0 8px 24px color-mix(in oklab, var(--accent) 20%, transparent);
}
:root[data-theme="dark"] .login-card input {
background: var(--surface-2);
}
:root[data-theme="dark"] .login-card input:focus {
background: var(--surface);
}
/* ---------- Mobile: keep editorial proportions ---------- */
@media (max-width: 720px) {
.kpi:not(.hero) { padding: 14px 16px; }
.kpi.hero { padding: 18px 18px; }
.k-val { font-size: 26px; }
.kpi.hero .k-val { font-size: 32px; }
.agent-card { padding: 12px 14px 10px; }
}
/* ============================================================
FINAL HERO KPI OVERRIDE — clean from scratch
Replaces every layered polish-pass rule on .kpi.hero with a
single deterministic layout. Higher specificity than .kpi.hero
alone, so this wins regardless of source order.
============================================================ */
.kpi-strip > .kpi.hero {
display: flex;
flex-direction: column;
background: var(--accent);
color: white;
padding: 16px 20px;
gap: 8px;
border: 0;
border-radius: var(--radius);
box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 30%, transparent);
overflow: hidden;
position: relative;
min-height: 124px;
}
.kpi-strip > .kpi.fade-in {
animation: none;
opacity: 1;
transform: none;
}
.kpi-strip > .kpi.hero::before,
.kpi-strip > .kpi.hero::after { display: none; content: none; }
.kpi-strip > .kpi.hero .k-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
flex: 0 0 auto;
}
.kpi-strip > .kpi.hero .k-label {
color: rgba(255,255,255,0.85);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 6px;
}
.kpi-strip > .kpi.hero .k-label::before { display: none; }
.kpi-strip > .kpi.hero .k-role {
color: rgba(255,255,255,0.78);
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.18);
}
.kpi-strip > .kpi.hero .k-info { color: rgba(255,255,255,0.7); flex: 0 0 auto; }
.kpi-strip > .kpi.hero .k-val {
font-size: 32px;
font-weight: 700;
color: white;
line-height: 1.05;
flex: 0 0 auto;
text-shadow: none;
}
.kpi-strip > .kpi.hero .sparkline {
flex: 1 1 32px;
min-height: 32px;
width: 100%;
margin: 0;
display: block;
}
.kpi-strip > .kpi.hero .k-foot {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.16);
color: rgba(255,255,255,0.85);
font-size: 12px;
font-weight: 500;
flex: 0 0 auto;
width: 100%;
margin: 0;
}
.kpi-strip > .kpi.hero .k-foot > span:first-child {
min-width: 0;
overflow-wrap: anywhere;
}
.kpi-strip > .kpi.hero .k-foot > .k-delta {
white-space: nowrap;
justify-self: end;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.22);
color: white;
}
/* With the persistent sidebar, a 1440px laptop leaves roughly 1130px for
content; six KPI tiles become too narrow for French labels and footnotes. */
@media (max-width: 1500px) {
.kpi-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kpi-strip > .kpi.hero {
grid-column: 1 / -1;
}
}
@media (max-width: 560px) {
.kpi-strip {
grid-template-columns: 1fr;
}
}
/* ============================================================
FINAL ACT-TILE HERO OVERRIDE — match non-hero height
The colored activation hero tile was visibly taller than its
neighbours because of a bigger value font (30 vs 24) plus the
3px left accent bar pushing padding. This block equalizes the
content sizing so the grid row stretches uniformly.
============================================================ */
.activation-grid > .act-tile {
height: 100%; /* force grid row stretch */
}
.activation-grid > .act-tile.hero {
padding: 14px 16px 14px 18px; /* keep the 3px accent bar room */
}
.activation-grid > .act-tile.hero .act-val {
font-size: 24px; /* match non-hero value size */
}
.activation-grid > .act-tile.hero .act-sub {
margin-top: auto; /* sub stays at bottom edge */
white-space: nowrap; /* keep on one line; the wider */
overflow: hidden; /* hero column has room — and */
text-overflow: ellipsis; /* matches the non-hero subs. */
}
/* ============================================================
Mobile reflow ≤720px — rows with fixed-width meters.
.inbox-row ("Par boîte") needs 508px min (200px distribution
bar + legend + total); .agent-row needs ~400px. Both overflowed
the 375px viewport and dragged the whole page sideways. Stack
the meter under the name instead of scrolling the page.
============================================================ */
@media (max-width: 720px) {
.inbox-row {
grid-template-columns: minmax(0, 1fr) auto;
row-gap: 8px;
}
.inbox-row .distribution {
grid-column: 1 / -1;
min-width: 0;
}
.inbox-row .dist-legend {
grid-column: 1 / -1;
flex-wrap: wrap;
}
.agent-head,
.agent-row {
grid-template-columns: 24px minmax(0, 1fr) 52px 56px 64px;
gap: 8px;
padding-left: 8px;
padding-right: 8px;
}
.agent-row .rk.top { font-size: 13px; }
}
/* ============================================================
Touch ergonomics — coarse pointers (phones/tablets).
The compact 30–32px chips and icon buttons are fine for a
mouse but below the 44px touch guideline; grow only the hit
area on touch devices so the desktop density is unchanged.
============================================================ */
@media (pointer: coarse) {
.seg button { padding: 11px 14px; }
.date-bar .presets button { padding: 11px 14px; }
.date-bar .nav button { width: 42px; height: 42px; }
.menu-btn { padding: 10px; }
.theme-toggle { width: 42px; height: 42px; }
}
/* ============================================================
Loading placeholders — CSS-only.
The KPI grids are empty until their fetch resolves, which
reads as a broken page on slow connections. An :empty shimmer
reserves the space (no layout shift) and signals activity.
============================================================ */
.kpi-strip:empty,
.activation-grid:empty {
min-height: 110px;
border-radius: var(--radius);
background: linear-gradient(100deg,
var(--surface-2) 40%, var(--surface-3) 50%, var(--surface-2) 60%);
background-size: 200% 100%;
animation: cwr-shimmer 1.4s linear infinite;
}
@keyframes cwr-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
.kpi-strip:empty,
.activation-grid:empty { animation: none; }
}
/* ============================================================
Home — vue d'ensemble (cross-source landing page)
============================================================ */
.topnav-item-flat .topnav-button { text-decoration: none; }
.home-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.home-section { margin-bottom: 26px; }
.home-section.hidden { display: none; }
.home-sec-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.home-sec-title {
font-size: 13px; font-weight: 650;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
margin: 0;
}
.home-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 14px;
}
.home-card {
display: flex; flex-direction: column; gap: 12px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 20px;
box-shadow: var(--shadow-sm);
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
min-width: 0;
}
.home-card[data-path] { cursor: pointer; }
.home-card[data-path]:hover,
.home-card[data-path]:focus-visible {
border-color: var(--accent);
box-shadow: var(--shadow-md, var(--shadow-sm));
transform: translateY(-1px);
outline: none;
}
.home-card[data-path]:hover .hc-arrow { transform: translateX(3px); }
.home-card-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.hc-brand { font-size: 15px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.hc-sub {
font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px;
}
.hc-hero { display: flex; align-items: baseline; gap: 8px; }
.hc-hero-val {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 34px; font-weight: 650; line-height: 1;
color: var(--ink); font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.hc-hero-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.home-metrics {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
padding-top: 12px; border-top: 1px solid var(--line-2, var(--line));
}
.home-metric { min-width: 0; }
.hm-val {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 15px; font-weight: 600; color: var(--ink);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.home-metric.warn .hm-val { color: var(--danger, #b3261e); }
.hm-label {
font-size: 10.5px; color: var(--muted); font-weight: 500; margin-top: 2px;
line-height: 1.25;
}
.hc-link {
margin-top: auto;
font-size: 12px; font-weight: 600; color: var(--accent-ink);
display: flex; align-items: center; gap: 4px;
}
.hc-arrow { transition: transform 0.16s ease; }
.hc-empty {
font-size: 12.5px; color: var(--muted); font-weight: 500;
padding: 10px 0;
}
.home-card.hc-off { opacity: 0.75; }
.home-grid:empty {
min-height: 168px;
border-radius: var(--radius);
background: linear-gradient(100deg,
var(--surface-2) 40%, var(--surface-3) 50%, var(--surface-2) 60%);
background-size: 200% 100%;
animation: cwr-shimmer 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.home-grid:empty { animation: none; }
}
@media (max-width: 720px) {
.home-grid { grid-template-columns: 1fr; }
.hc-hero-val { font-size: 30px; }
}
/* ============================================================
Service quality row — percentiles / CSAT / backlog
============================================================ */
.svc-row {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.svc-card { display: flex; flex-direction: column; min-width: 0; }
.svc-tiles {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.svc-tile {
background: var(--surface-2);
border: 1px solid var(--line-2, var(--line));
border-radius: calc(var(--radius) - 6px);
padding: 12px 14px;
min-width: 0;
}
.st-label { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.st-val {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 24px; font-weight: 650; color: var(--ink);
font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 2px;
}
.st-foot { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.svc-foot {
margin-top: 12px;
font-size: 12px; color: var(--muted); line-height: 1.45;
}
.svc-foot:empty { display: none; }
.svc-foot b { color: var(--ink); font-weight: 650; }
.svc-empty { font-size: 12.5px; color: var(--muted); padding: 8px 0; }
/* CSAT */
.svc-csat-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.sc-score {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 38px; font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums;
}
.sc-score span { font-size: 20px; font-weight: 600; }
.sc-score.good { color: var(--accent-2-ink); }
.sc-score.mid { color: oklch(0.55 0.13 80); }
.sc-score.bad { color: var(--danger-ink, var(--danger)); }
.sc-meta { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.sc-bars { display: flex; flex-direction: column; gap: 6px; }
.sc-row { display: grid; grid-template-columns: 28px 1fr 44px; align-items: center; gap: 8px; }
.sc-star { font-size: 11px; font-weight: 600; color: var(--muted); }
.sc-track { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.sc-fill { height: 100%; border-radius: 4px; }
.sc-fill.pos { background: var(--accent-2); }
.sc-fill.neu { background: oklch(0.72 0.12 80); }
.sc-fill.neg { background: var(--danger); }
.sc-n {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 11.5px; color: var(--ink); text-align: right;
font-variant-numeric: tabular-nums;
}
/* Backlog buckets */
.svc-backlog { display: flex; flex-direction: column; gap: 8px; }
.sb-row { display: grid; grid-template-columns: 52px 1fr 56px; align-items: center; gap: 8px; }
.sb-label { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sb-track { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.sb-fill { height: 100%; border-radius: 5px; background: var(--accent); opacity: 0.85; }
.sb-fill.old { background: var(--danger); }
.sb-n {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 12px; color: var(--ink); text-align: right;
font-variant-numeric: tabular-nums;
}
/* Data quality strip */
.data-quality-card { margin-bottom: 16px; }
.data-quality-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--line-2, var(--line));
}
.dq-source {
min-width: 0;
padding: 14px 16px;
border-right: 1px solid var(--line-2, var(--line));
}
.dq-source:last-child { border-right: 0; }
.dq-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.dq-title {
font-size: 12px;
font-weight: 700;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dq-status {
flex: 0 0 auto;
border-radius: 999px;
padding: 3px 8px;
font-size: 10px;
font-weight: 700;
border: 1px solid var(--line-2, var(--line));
}
.dq-status.ok { color: var(--accent-2-ink); background: color-mix(in oklch, var(--accent-2) 12%, transparent); }
.dq-status.warn { color: oklch(0.48 0.13 80); background: oklch(0.96 0.04 85); }
.dq-status.bad { color: var(--danger-ink, var(--danger)); background: color-mix(in oklch, var(--danger) 10%, transparent); }
.dq-metrics {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
}
.dq-metric {
min-width: 88px;
}
.dq-val {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 15px;
font-weight: 650;
color: var(--ink);
font-variant-numeric: tabular-nums;
line-height: 1.15;
}
.dq-label {
margin-top: 2px;
font-size: 10.5px;
color: var(--muted);
line-height: 1.25;
}
.dq-note {
margin-top: 8px;
font-size: 11px;
color: var(--muted);
line-height: 1.35;
}
@media (max-width: 1100px) {
.svc-row { grid-template-columns: 1fr 1fr; }
.svc-row .svc-card:first-child { grid-column: 1 / -1; }
.data-quality-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dq-source:nth-child(2n) { border-right: 0; }
}
@media (max-width: 720px) {
.svc-row { grid-template-columns: 1fr; }
.svc-tiles { grid-template-columns: repeat(2, 1fr); }
.data-quality-grid { grid-template-columns: 1fr; }
.dq-source { border-right: 0; }
.dq-source + .dq-source { border-top: 1px solid var(--line-2, var(--line)); }
}
/* ===== Custom range popover (date bar "Personnalisé…") ===== */
.range-popover {
position: absolute;
z-index: 1000;
background: var(--surface);
border: 1px solid var(--line);
border-radius: calc(var(--radius) - 4px);
box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.12));
padding: 14px;
display: flex; flex-direction: column; gap: 10px;
min-width: 230px;
}
.range-popover .rp-row {
display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px;
}
.range-popover label { font-size: 12px; font-weight: 600; color: var(--muted); }
.range-popover input[type="date"] {
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface-2);
color: var(--ink);
padding: 7px 9px;
font-size: 13px;
font-family: inherit;
}
.range-popover .rp-actions {
display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px;
}
.range-popover .rp-actions button {
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--ink);
border-radius: var(--radius-pill);
padding: 6px 14px;
font-size: 12.5px; font-weight: 600;
cursor: pointer;
}
.range-popover .rp-apply {
background: var(--accent) !important;
color: #fff !important;
border-color: transparent !important;
}
/* Info buttons inside card titles align with the text */
.card-title .k-info { margin-left: 2px; }
/* ===== Autres libellés — interactive pie ===== */
.labels-pie-layout {
display: grid;
grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1.1fr);
gap: 20px;
align-items: start;
}
.labels-donut-wrap {
position: relative;
height: 280px;
min-width: 0;
overflow: hidden;
}
.labels-donut { position: absolute; inset: 0; }
.labels-donut-center {
position: absolute; inset: 0;
display: grid; place-content: center; text-align: center;
pointer-events: none;
}
.labels-donut-center .v {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 26px; font-weight: 650; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.labels-donut-center .l { font-size: 11px; color: var(--muted); font-weight: 500; }
.labels-legend {
display: flex; flex-direction: column; gap: 2px;
max-height: 280px; overflow-y: auto;
padding-right: 4px;
}
.lp-item {
display: grid;
grid-template-columns: 10px minmax(0, 1fr) auto auto;
align-items: center; gap: 8px;
border: 0; background: transparent;
padding: 6px 8px;
border-radius: 8px;
cursor: pointer;
font: inherit; color: var(--ink);
text-align: left;
transition: background 0.12s ease;
}
.lp-item:hover { background: var(--surface-2); }
.lp-item.active { background: var(--accent-soft); }
.lp-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lp-name {
font-size: 12px; font-weight: 550;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-n {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 12px; font-variant-numeric: tabular-nums;
}
.lp-pct {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 11px; color: var(--muted);
font-variant-numeric: tabular-nums;
min-width: 34px; text-align: right;
}
.labels-detail {
background: var(--surface-2);
border: 1px solid var(--line-2, var(--line));
border-radius: calc(var(--radius) - 6px);
padding: 16px 18px;
min-height: 248px;
}
.lpd-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-bottom: 8px;
}
.lpd-share { font-size: 12px; color: var(--muted); font-weight: 600; }
.lpd-info { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; }
.lpd-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.lpd-tile { min-width: 0; }
.lpd-val {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 17px; font-weight: 650; color: var(--ink);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lpd-tile.pos .lpd-val { color: var(--accent-2-ink); }
.lpd-tile.neg .lpd-val { color: var(--danger-ink, var(--danger)); }
.lpd-label { font-size: 10.5px; color: var(--muted); font-weight: 550; margin-top: 2px; }
.lpd-note { font-size: 11px; color: var(--muted); font-style: italic; margin: 10px 0 0; }
@media (max-width: 1100px) {
.labels-pie-layout { grid-template-columns: 260px minmax(0, 1fr); }
.labels-detail { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
.labels-pie-layout { grid-template-columns: 1fr; }
.labels-legend { max-height: 220px; }
.lpd-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ===== Dashboard simplification (June 2026) ===== */
.dash-sec { margin-top: 30px; }
.dash-sec .home-sec-title { margin: 0; }
/* First section header sits right under the date bar */
.date-bar + .dash-sec { margin-top: 18px; }
.duo-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: start;
}
.duo-row .activation-grid {
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
@media (max-width: 1100px) {
.duo-row { grid-template-columns: 1fr; }
}
/* ===== BARO — quotas / base injectée ===== */
.baro-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 12px;
}
.baro-cat {
display: flex; flex-direction: column; gap: 6px;
text-align: left;
background: var(--surface-2);
border: 1px solid var(--line-2, var(--line));
border-radius: calc(var(--radius) - 6px);
padding: 14px 16px;
cursor: pointer;
font: inherit; color: var(--ink);
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
min-width: 0;
}
.baro-cat:hover { border-color: var(--accent); transform: translateY(-1px); }
.baro-cat.active {
background: var(--accent-soft);
border-color: var(--accent);
}
.bc-name {
font-size: 12px; font-weight: 650; letter-spacing: 0.03em;
text-transform: uppercase; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.baro-cat.active .bc-name { color: var(--accent-ink); }
.bc-main {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 24px; font-weight: 650; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.bc-main span { font-size: 12px; font-weight: 500; color: var(--muted); font-family: var(--font-ui, inherit); }
.bc-bar { height: 6px; background: var(--surface-3, var(--line)); border-radius: 3px; overflow: hidden; }
.bc-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.bc-meta { font-size: 11px; color: var(--muted); }
.baro-chart-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
gap: 14px;
padding: 0 18px 16px;
}
.baro-chart-title {
margin: 2px 0 8px;
color: var(--muted);
font-size: 12px;
font-weight: 650;
letter-spacing: .03em;
text-transform: uppercase;
}
.baro-chart {
width: 100%;
min-height: 300px;
border: 1px solid var(--line-2, var(--line));
border-radius: calc(var(--radius) - 8px);
background: var(--surface);
}
.baro-store-rank-chart {
margin: 0 18px 14px;
min-height: 380px;
}
.baro-chart-empty {
display: grid;
place-items: center;
min-height: inherit;
padding: 24px;
color: var(--muted);
text-align: center;
}
#baroStoreHead th { cursor: pointer; user-select: none; white-space: nowrap; }
#baroStoreHead th.sort-active { color: var(--accent-ink); }
/* BARO quotas — range controls */
.baro-range-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* « Par magasin » : zone défilante à hauteur d'écran, entête collant */
.baro-store-scroll {
max-height: 62vh;
overflow-y: auto;
border: 1px solid var(--line-2, var(--line));
border-radius: calc(var(--radius) - 8px);
}
.baro-store-scroll thead th {
position: sticky;
top: 0;
z-index: 2;
background: var(--surface);
box-shadow: 0 1px 0 var(--line);
}
/* ===== Journal d'accès — refonte ===== */
.alog-stats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .alog-stats { grid-template-columns: repeat(2, 1fr); } }
.alog-tile-hot .st-val,
.alog-tile-hot .st-foot { color: var(--danger-ink, var(--danger)); }
.alog-tile-warn .st-foot { color: var(--accent-ink); }
.alog-scroll { max-height: 64vh; overflow-y: auto; }
.alog-scroll thead th {
position: sticky; top: 0; z-index: 2;
background: var(--surface);
box-shadow: 0 1px 0 var(--line);
}
tr.alog-day td {
font-size: 11px; font-weight: 650;
letter-spacing: 0.05em; text-transform: uppercase;
color: var(--muted);
background: var(--surface-2);
padding: 6px 12px;
}
tr.alog-fail td { background: oklch(0.97 0.03 25 / 0.5); }
[data-theme="dark"] tr.alog-fail td { background: oklch(0.25 0.05 25 / 0.45); }
.status-pill.alog-pill-fail {
background: var(--danger-soft, oklch(0.95 0.04 25));
color: var(--danger-ink, var(--danger));
}
.alog-scroll th:first-child,
.alog-scroll td:first-child { padding-left: 16px; }
.alog-chart-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
gap: 14px;
padding: 0 18px 18px;
}
.alog-chart {
width: 100%;
min-height: 300px;
border: 1px solid var(--line-2, var(--line));
border-radius: calc(var(--radius) - 8px);
background: var(--surface);
}
.alog-trend-chart { min-height: 320px; }
@media (max-width: 980px) {
.baro-chart-grid,
.alog-chart-grid { grid-template-columns: 1fr; }
.baro-store-rank-chart { margin-inline: 12px; }
}
/* ============================================================
KPI dashboard design pass — June 2026
Scope: .kpi-dashboard-view + shell touchups only. Keeps data logic intact.
============================================================ */
:root {
--dash-bg: oklch(0.975 0.006 78);
--dash-surface: oklch(0.998 0.002 78);
--dash-surface-soft: oklch(0.962 0.008 78);
--dash-line: color-mix(in oklab, var(--ink) 10%, transparent);
--dash-line-strong: color-mix(in oklab, var(--ink) 17%, transparent);
--dash-shadow: 0 1px 0 color-mix(in oklab, var(--ink) 4%, transparent),
0 10px 28px color-mix(in oklab, var(--ink) 5%, transparent);
--dash-blue: oklch(0.55 0.14 238);
--dash-teal: oklch(0.56 0.12 178);
--dash-violet: oklch(0.54 0.13 305);
--dash-gold: oklch(0.66 0.14 76);
--chart-in: var(--dash-blue);
--chart-out: var(--dash-teal);
--chart-3: var(--dash-violet);
}
:root[data-theme="dark"] {
--dash-bg: oklch(0.145 0.008 64);
--dash-surface: oklch(0.19 0.008 64);
--dash-surface-soft: oklch(0.235 0.01 64);
--dash-line: color-mix(in oklab, var(--ink) 13%, transparent);
--dash-line-strong: color-mix(in oklab, var(--ink) 24%, transparent);
--dash-shadow: 0 1px 0 color-mix(in oklab, white 5%, transparent),
0 14px 34px oklch(0 0 0 / 0.34);
--dash-blue: oklch(0.73 0.13 238);
--dash-teal: oklch(0.72 0.12 178);
--dash-violet: oklch(0.74 0.13 305);
--dash-gold: oklch(0.78 0.14 76);
}
body {
background:
linear-gradient(180deg, var(--dash-bg) 0, var(--bg) 360px);
}
.sidebar {
background:
linear-gradient(180deg,
color-mix(in oklab, var(--surface) 92%, var(--accent-softer)) 0,
var(--surface) 36%);
border-right-color: var(--dash-line);
}
.sb-brand,
.sb-user {
border-color: var(--dash-line);
}
.sb-item {
border-radius: 8px;
}
.sb-item.active {
background: color-mix(in oklab, var(--accent-softer) 82%, var(--surface));
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 12%, transparent);
}
.topbar {
background: color-mix(in oklab, var(--dash-bg) 82%, transparent);
border-bottom-color: color-mix(in oklab, var(--dash-line) 75%, transparent);
}
:root[data-theme="dark"] .topbar {
background: color-mix(in oklab, var(--bg) 78%, transparent);
}
#pageHead {
margin-top: 0;
padding: 4px 0 18px;
border-bottom-color: var(--dash-line);
}
#pageHead::after {
width: 72px;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--dash-teal));
}
#pageHeading {
font-size: clamp(24px, 2vw, 32px);
letter-spacing: -0.035em;
}
#pageSub {
max-width: 760px;
color: var(--ink-2);
}
.kpi-dashboard-view {
--radius: 8px;
}
.kpi-dashboard-view > * + * {
margin-top: 18px;
}
.kpi-dashboard-view .date-bar {
margin-top: -2px;
}
.kpi-dashboard-view .dash-sec {
display: flex;
align-items: center;
gap: 12px;
margin: 34px 0 12px;
}
.kpi-dashboard-view .dash-sec::after {
content: "";
height: 1px;
flex: 1;
background: linear-gradient(90deg, var(--dash-line), transparent);
}
.kpi-dashboard-view .dash-sec .home-sec-title {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--ink);
font-size: 12px;
letter-spacing: 0.09em;
}
.kpi-dashboard-view .dash-sec .home-sec-title::before {
content: "";
width: 31px;
height: 7px;
border-radius: 3px;
background:
linear-gradient(90deg,
var(--accent) 0 7px,
transparent 7px 12px,
var(--dash-teal) 12px 19px,
transparent 19px 24px,
var(--dash-blue) 24px 31px);
flex: 0 0 31px;
}
.kpi-dashboard-view .date-bar + .dash-sec {
margin-top: 24px;
}
.kpi-dashboard-view .date-bar {
border-color: var(--dash-line);
border-radius: 8px;
background:
linear-gradient(180deg,
color-mix(in oklab, var(--dash-surface) 96%, var(--accent-softer)),
var(--dash-surface));
box-shadow: var(--dash-shadow);
padding: 16px 18px;
}
.kpi-dashboard-view .date-bar .icon-wrap {
border-radius: 8px;
background: color-mix(in oklab, var(--accent) 10%, var(--surface));
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 13%, transparent);
}
.kpi-dashboard-view .date-bar .presets,
.kpi-dashboard-view .date-bar .nav button {
border-radius: 8px;
}
.kpi-dashboard-view .date-bar .presets button.active {
color: var(--accent-ink);
box-shadow: 0 1px 2px color-mix(in oklab, var(--ink) 9%, transparent),
inset 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent);
}
.kpi-dashboard-view .legacy-period-seg[hidden] {
display: none !important;
}
.kpi-dashboard-view .card,
.kpi-dashboard-view .kpi {
border-color: var(--dash-line);
border-radius: 8px;
background: var(--dash-surface);
box-shadow: 0 1px 0 color-mix(in oklab, var(--ink) 4%, transparent);
}
.kpi-dashboard-view .card:hover,
.kpi-dashboard-view .kpi:not(.hero):hover {
border-color: var(--dash-line-strong);
box-shadow: var(--dash-shadow);
transform: translateY(-1px);
}
.kpi-dashboard-view .card-head {
align-items: flex-start;
margin-bottom: 18px;
}
.kpi-dashboard-view .card-title {
font-size: 14px;
line-height: 1.25;
letter-spacing: -0.01em;
}
.kpi-dashboard-view .card-sub {
margin-top: 3px;
color: var(--text-muted, var(--muted));
}
.kpi-dashboard-view .chip {
border-radius: 7px;
border-color: var(--dash-line);
background: color-mix(in oklab, var(--dash-surface-soft) 66%, var(--surface));
color: var(--ink-2);
}
.kpi-dashboard-view .kpi-strip {
grid-template-columns: 1.45fr repeat(5, minmax(0, 1fr));
gap: 12px;
align-items: stretch;
margin-bottom: 20px;
}
.kpi-dashboard-view .kpi-strip > .kpi.hero {
grid-column: auto;
min-height: 142px;
border: 0;
background:
linear-gradient(135deg,
color-mix(in oklab, var(--accent) 88%, black) 0%,
var(--accent) 54%,
color-mix(in oklab, var(--accent) 74%, var(--dash-violet)) 100%);
box-shadow: 0 16px 34px color-mix(in oklab, var(--accent) 22%, transparent);
}
.kpi-dashboard-view .kpi:not(.hero) {
min-height: 142px;
padding: 17px 18px;
}
.kpi-dashboard-view .kpi:not(.hero)::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--kpi-accent, var(--dash-blue));
opacity: 0.78;
}
.kpi-dashboard-view .kpi-strip > .kpi:nth-child(2) { --kpi-accent: var(--dash-teal); }
.kpi-dashboard-view .kpi-strip > .kpi:nth-child(3) { --kpi-accent: var(--accent-2); }
.kpi-dashboard-view .kpi-strip > .kpi:nth-child(4) { --kpi-accent: var(--dash-gold); }
.kpi-dashboard-view .kpi-strip > .kpi:nth-child(5) { --kpi-accent: var(--dash-blue); }
.kpi-dashboard-view .kpi-strip > .kpi:nth-child(6) { --kpi-accent: var(--danger); }
.kpi-dashboard-view .kpi.k-alert::after { background: var(--danger); }
.kpi-dashboard-view .kpi.k-warn::after { background: var(--warn); }
.kpi-dashboard-view .kpi:not(.hero) .k-head {
min-height: 43px;
}
.kpi-dashboard-view .kpi .k-label {
color: var(--ink-2);
letter-spacing: 0.055em;
}
.kpi-dashboard-view .kpi-strip > .kpi.hero .k-label {
color: rgba(255,255,255,0.84);
}
.kpi-dashboard-view .kpi-strip > .kpi.hero .k-role {
color: rgba(255,255,255,0.82);
background: rgba(255,255,255,0.16);
border-color: rgba(255,255,255,0.24);
}
.kpi-dashboard-view .kpi:not(.hero) .k-label::before {
background: var(--kpi-accent, var(--accent));
}
.kpi-dashboard-view .k-role {
border-radius: 5px;
font-size: 9.5px;
background: color-mix(in oklab, var(--surface-2) 80%, transparent);
}
.kpi-dashboard-view .k-val {
font-size: clamp(27px, 2vw, 34px);
letter-spacing: -0.04em;
}
.kpi-dashboard-view .kpi.hero .k-val {
font-size: clamp(34px, 3vw, 46px);
}
.kpi-dashboard-view .k-foot {
grid-template-columns: minmax(0, 1fr);
line-height: 1.35;
color: var(--text-muted, var(--muted));
}
.kpi-dashboard-view .k-foot > .k-delta {
justify-self: start;
}
.kpi-dashboard-view .kpi-strip > .kpi.hero .k-foot {
grid-template-columns: minmax(0, 1fr) auto;
color: rgba(255,255,255,0.86);
}
.kpi-dashboard-view .kpi-strip > .kpi.hero .k-foot > .k-delta {
justify-self: end;
color: #fff;
}
.kpi-dashboard-view .k-delta {
border-radius: 6px;
}
.kpi-dashboard-view .svc-row {
grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr) minmax(280px, 0.9fr);
gap: 14px;
}
.kpi-dashboard-view .svc-card {
overflow: hidden;
}
.kpi-dashboard-view .svc-card::before,
.kpi-dashboard-view > .card::before,
.kpi-dashboard-view .activation-card::before,
.kpi-dashboard-view .csat-card::before {
content: "";
position: absolute;
left: 16px;
right: 16px;
top: -1px;
height: 3px;
border-radius: 0 0 3px 3px;
background: linear-gradient(90deg, var(--card-accent, var(--dash-blue)), transparent 72%);
}
.kpi-dashboard-view .svc-row .svc-card:nth-child(1) { --card-accent: var(--dash-blue); }
.kpi-dashboard-view .svc-row .svc-card:nth-child(2) { --card-accent: var(--accent-2); }
.kpi-dashboard-view .svc-row .svc-card:nth-child(3) { --card-accent: var(--danger); }
.kpi-dashboard-view .svc-tiles,
.kpi-dashboard-view .activation-grid {
gap: 9px;
}
.kpi-dashboard-view .svc-tile,
.kpi-dashboard-view .act-tile,
.kpi-dashboard-view .labels-detail {
border-radius: 8px;
border-color: var(--dash-line);
background: color-mix(in oklab, var(--dash-surface-soft) 54%, var(--dash-surface));
}
.kpi-dashboard-view .svc-tile:hover,
.kpi-dashboard-view .act-tile:hover {
border-color: var(--dash-line-strong);
}
.kpi-dashboard-view .st-label,
.kpi-dashboard-view .act-label,
.kpi-dashboard-view .lpd-label {
color: var(--ink-2);
}
.kpi-dashboard-view .st-val,
.kpi-dashboard-view .act-val,
.kpi-dashboard-view .lpd-val,
.kpi-dashboard-view .sc-score {
letter-spacing: -0.035em;
}
.kpi-dashboard-view > .card:nth-of-type(1) { --card-accent: var(--dash-blue); }
.kpi-dashboard-view > .card:nth-of-type(2) { --card-accent: var(--dash-violet); }
.kpi-dashboard-view > .card:nth-of-type(3) { --card-accent: var(--dash-teal); }
.kpi-dashboard-view > .card:nth-of-type(4) { --card-accent: var(--dash-gold); }
.kpi-dashboard-view > .card:nth-of-type(5) { --card-accent: var(--dash-blue); }
.kpi-dashboard-view .labels-pie-layout {
grid-template-columns: minmax(240px, 300px) minmax(240px, 1fr) minmax(280px, 1.05fr);
gap: 22px;
}
.kpi-dashboard-view .labels-donut-wrap {
height: 300px;
}
.kpi-dashboard-view .labels-legend {
padding: 4px;
border: 1px solid var(--dash-line);
border-radius: 8px;
background: color-mix(in oklab, var(--dash-surface-soft) 42%, transparent);
}
.kpi-dashboard-view .lp-item {
border-radius: 6px;
min-height: 34px;
}
.kpi-dashboard-view .lp-item.active {
background: color-mix(in oklab, var(--accent-soft) 78%, var(--surface));
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 10%, transparent);
}
.kpi-dashboard-view .chart-wrap {
padding: 6px 2px 0;
}
.kpi-dashboard-view .chart-host {
height: 300px !important;
}
.kpi-dashboard-view .chart-totals {
margin: 10px 4px 0;
padding: 10px 12px 0;
border-top: 1px solid var(--dash-line);
}
.kpi-dashboard-view .chart-legend {
flex-wrap: wrap;
}
.kpi-dashboard-view .chart-legend .sw,
.kpi-dashboard-view .chart-totals .sw {
border-radius: 2px;
}
.kpi-dashboard-view .heatmap-wrap {
padding: 10px 0 0;
}
.kpi-dashboard-view .heatmap-scale .bar {
background: linear-gradient(90deg, var(--dash-surface-soft), var(--accent), var(--dash-violet));
}
.kpi-dashboard-view .row-3 {
grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.25fr);
align-items: start;
}
.kpi-dashboard-view .inbox-row {
border-top-color: var(--dash-line);
}
.kpi-dashboard-view .dist-bar,
.kpi-dashboard-view .mini-bar,
.kpi-dashboard-view .sc-track,
.kpi-dashboard-view .sb-track {
background: color-mix(in oklab, var(--ink) 8%, transparent);
}
.kpi-dashboard-view .agent-head {
border-bottom-color: var(--dash-line);
color: var(--ink-2);
}
.kpi-dashboard-view .agent-row {
border-radius: 7px;
}
.kpi-dashboard-view .agent-row:hover {
background: color-mix(in oklab, var(--dash-surface-soft) 64%, transparent);
}
.kpi-dashboard-view .search-input {
border-color: var(--dash-line);
background: color-mix(in oklab, var(--dash-surface-soft) 68%, var(--surface));
border-radius: 8px;
}
.kpi-dashboard-view .data-wrap {
border: 1px solid var(--dash-line);
border-radius: 8px;
overflow: auto;
margin: 0;
mask-image: none;
-webkit-mask-image: none;
}
.kpi-dashboard-view table.data th {
background: color-mix(in oklab, var(--dash-surface-soft) 72%, var(--surface));
color: var(--ink-2);
border-bottom-color: var(--dash-line);
}
.kpi-dashboard-view table.data td {
border-bottom-color: color-mix(in oklab, var(--dash-line) 70%, transparent);
}
.kpi-dashboard-view table.data tbody tr:nth-child(even) {
background: color-mix(in oklab, var(--dash-surface-soft) 42%, transparent);
}
.kpi-dashboard-view table.data tbody tr:hover {
background: color-mix(in oklab, var(--accent-soft) 40%, var(--surface));
}
.kpi-dashboard-view .panel-error,
.kpi-dashboard-view .panel-error-cell {
border: 1px solid color-mix(in oklab, var(--danger) 24%, transparent);
border-radius: 8px;
background: color-mix(in oklab, var(--danger-soft) 58%, var(--surface));
}
.kpi-dashboard-view .kpi-strip:empty,
.kpi-dashboard-view .activation-grid:empty {
border: 1px solid var(--dash-line);
background: linear-gradient(100deg,
color-mix(in oklab, var(--dash-surface-soft) 88%, var(--surface)) 40%,
color-mix(in oklab, var(--surface-3) 86%, var(--surface)) 50%,
color-mix(in oklab, var(--dash-surface-soft) 88%, var(--surface)) 60%);
}
@media (max-width: 1320px) {
.kpi-dashboard-view .kpi-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kpi-dashboard-view .kpi-strip > .kpi.hero {
grid-column: 1 / -1;
}
.kpi-dashboard-view .row-3 {
grid-template-columns: 1fr;
}
}
@media (max-width: 1100px) {
.kpi-dashboard-view .svc-row {
grid-template-columns: 1fr 1fr;
}
.kpi-dashboard-view .svc-row .svc-card:first-child {
grid-column: 1 / -1;
}
.kpi-dashboard-view .labels-pie-layout {
grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
}
.kpi-dashboard-view .labels-detail {
grid-column: 1 / -1;
}
}
@media (max-width: 720px) {
body {
background: var(--bg);
}
#pageHead {
padding-bottom: 14px;
}
#pageHead::after {
width: 48px;
}
.kpi-dashboard-view .date-bar {
padding: 14px;
}
.kpi-dashboard-view .date-bar .display {
align-items: flex-start;
gap: 12px;
}
.kpi-dashboard-view .date-bar .presets {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
width: 100%;
overflow: visible;
padding: 6px;
}
.kpi-dashboard-view .date-bar .presets button {
min-width: 0;
min-height: 42px;
padding: 9px 8px;
white-space: normal;
line-height: 1.15;
}
.kpi-dashboard-view .dash-sec {
margin-top: 28px;
}
.kpi-dashboard-view .kpi-strip,
.kpi-dashboard-view .svc-row,
.kpi-dashboard-view .labels-pie-layout {
grid-template-columns: 1fr;
}
.kpi-dashboard-view .kpi:not(.hero),
.kpi-dashboard-view .kpi-strip > .kpi.hero {
min-height: 126px;
padding: 15px 16px;
}
.kpi-dashboard-view .kpi:not(.hero) .k-head {
min-height: 0;
}
.kpi-dashboard-view .card-head {
gap: 10px;
}
.kpi-dashboard-view .labels-donut-wrap {
height: 260px;
}
.kpi-dashboard-view .chart-host {
height: 260px !important;
}
.kpi-dashboard-view .svc-tiles {
grid-template-columns: 1fr;
}
}
/* ===== Excel export button (top bar) + toast ===== */
.export-excel-btn {
display: inline-flex;
align-items: center;
gap: 7px;
height: 36px;
padding: 0 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: var(--surface);
color: var(--muted);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.export-excel-btn:hover { color: var(--ink); border-color: var(--ink-2); background: var(--surface-2); }
.export-excel-btn:active:not(:disabled) { transform: translateY(1px); }
.export-excel-btn:disabled { opacity: 0.5; cursor: default; }
.export-excel-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.export-excel-btn.is-busy { opacity: 0.6; pointer-events: none; }
@media (max-width: 720px) {
.export-excel-btn span { display: none; }
.export-excel-btn { padding: 0; width: 36px; justify-content: center; }
}
.export-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(8px);
z-index: 9999;
max-width: min(90vw, 420px);
background: var(--surface, #1f2430);
color: var(--ink, #fff);
border: 1px solid var(--line, rgba(255,255,255,.15));
padding: 10px 16px;
border-radius: var(--radius-sm, 10px);
font-size: 13px;
font-weight: 500;
box-shadow: 0 8px 28px rgba(0,0,0,.28);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.export-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }