/* ============================================================
DROOLS SALES DASHBOARD — design system
------------------------------------------------------------
Dark analytics theme. Chart surfaces and the categorical series
palette are the validated dataviz reference set (dark mode) — do
not re-tint series colors by eye; they were chosen as an ordered,
CVD-safe set against --card (#1a1a19).
Legacy variable names (--gold, --sale-col, …) are kept and
re-pointed so inline references and JS keep working unchanged.
============================================================ */
:root{
/* surfaces */
--bg: #0d0d0d; /* page plane */
--surface: #131312; /* panel strips */
--surface2: #1f1f1e; /* controls, inputs */
--card: #1a1a19; /* chart surface (validated) */
--card-hover: #1e1e1d;
--border: rgba(255,255,255,.09);
--border-soft: rgba(255,255,255,.05);
--border-strong: rgba(255,255,255,.16);
/* ink */
--label: #ffffff; /* primary */
--ink-2: #c3c2b7; /* secondary */
--muted: #c3c2b7;
--muted-soft: #898781; /* axis / captions */
/* Drools brand */
--brand-blue: #1d4f9e; /* wordmark blue */
--brand-blue-2: #3b76dd; /* lifted for dark surfaces */
--brand-blue-3: #5c8fe6;
--brand-pink: #ec1c7c; /* wordmark magenta */
--brand-pink-2: #f4569d;
/* accent = brand blue family */
--accent: var(--brand-blue-2);
--accent-2: var(--brand-blue-3);
--accent-deep: var(--brand-blue);
--gold: var(--brand-blue-2); /* legacy alias */
--gold-soft: rgba(59,118,221,.13); /* legacy alias */
/* validated categorical series (dark) — fixed order, never cycled */
--chart-1: #3987e5; /* blue */
--chart-2: #d95926; /* orange */
--chart-3: #199e70; /* aqua */
--chart-4: #c98500; /* yellow */
--chart-5: #d55181; /* magenta */
--chart-6: #008300; /* green */
--chart-7: #9085e9; /* violet */
--chart-8: #e66767; /* red */
/* measures: sale = series 1, gross = series 2, everywhere */
--sale-col: var(--chart-1);
--gross-col: var(--chart-2);
/* status — reserved, never used as series */
--pos: #0ca30c;
--neg: #e66767;
--danger: #d03b3b;
/* chrome */
--grid-line: #2c2c2a;
--axis-line: #383835; /* baseline / axis */
--tint-weak: rgba(255,255,255,.035); /* table row hover */
--tint: rgba(255,255,255,.06); /* control hover */
--tint-mid: rgba(255,255,255,.08); /* spinner track */
--tint-strong:rgba(255,255,255,.14); /* progress track */
--dash-line: rgba(255,255,255,.16); /* dropzone border */
--scrim: rgba(0,0,0,.66); /* modal backdrop */
--modal-bg: #1d1d1c;
--scroll-thumb: #2e2e2c;
--scroll-thumb-hover: #3d3d3a;
--glass-bar: rgba(13,13,13,.82); /* sticky topbar */
--glass-card: rgba(26,26,25,.86); /* auth / sidebar panel */
--title-grad-a: #fff; /* headline gradient stops */
--title-grad-b: #8db8ef;
--logo-mini-ink: #fff;
--chip-stream-ink: #ffc2dd;
--chip-fail-ink: #f0a49e;
--tooltip-bg: #232322;
--tooltip-border: rgba(255,255,255,.12);
--tooltip-title: #ffffff;
--radius: 12px;
--radius-sm: 8px;
--radius-xs: 6px;
--shadow-1: 0 1px 2px rgba(0,0,0,.4);
--shadow-2: 0 8px 24px rgba(0,0,0,.45);
--shadow-3: 0 24px 64px rgba(0,0,0,.55);
--ring: 0 0 0 3px rgba(59,118,221,.32);
--font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
--ease: cubic-bezier(.22,.8,.32,1);
}
/* ============================================================
DAY THEME — :root[data-theme="light"]
------------------------------------------------------------
Selected, not flipped. The eight series hues are the light-surface
steps of the same validated set the dark theme uses, re-validated
against this theme's chart surface (#fcfcfb): lightness band, chroma
floor, adjacent-pair CVD separation and normal-vision floor all pass.
Three slots (aqua, yellow, magenta) sit under 3:1 on the light
surface. That is the documented relief case and is only legal because
every chart here ships beside its own data table — do not use these
hues as the sole carrier of meaning anywhere a table is absent.
============================================================ */
:root[data-theme="light"]{
color-scheme: light;
/* surfaces */
--bg: #f9f9f7;
--surface: #ffffff;
--surface2: #f2f1ed;
--card: #fcfcfb;
--card-hover: #f4f3ef;
--border: rgba(11,11,11,.12);
--border-soft: rgba(11,11,11,.07);
--border-strong: rgba(11,11,11,.20);
/* ink */
--label: #0b0b0b;
--ink-2: #52514e;
--muted: #52514e;
--muted-soft: #898781;
/* accent — the deeper brand blue reads on a light plane */
--brand-blue-2: #2a78d6;
--brand-blue-3: #1d4f9e;
--accent: #2a78d6;
--accent-2: #1d4f9e;
--accent-deep: #163d7a;
--gold: #2a78d6;
--gold-soft: rgba(42,120,214,.10);
/* validated categorical series (light) — same eight hues, light steps */
--chart-1: #2a78d6; /* blue */
--chart-2: #eb6834; /* orange */
--chart-3: #1baf7a; /* aqua */
--chart-4: #eda100; /* yellow */
--chart-5: #e87ba4; /* magenta */
--chart-6: #008300; /* green */
--chart-7: #4a3aa7; /* violet */
--chart-8: #e34948; /* red */
/* status — success drops to the light-surface text step */
--pos: #006300;
--neg: #d03b3b;
--danger: #d03b3b;
/* chrome */
--grid-line: #e1e0d9;
--axis-line: #c3c2b7;
--shadow-1: 0 1px 2px rgba(11,11,11,.06);
--shadow-2: 0 8px 24px rgba(11,11,11,.10);
--shadow-3: 0 24px 64px rgba(11,11,11,.16);
--ring: 0 0 0 3px rgba(42,120,214,.30);
--tint-weak: rgba(11,11,11,.04);
--tint: rgba(11,11,11,.06);
--tint-mid: rgba(11,11,11,.09);
--tint-strong:rgba(11,11,11,.13);
--dash-line: rgba(11,11,11,.20);
--scrim: rgba(11,11,11,.42);
--modal-bg: #ffffff;
--scroll-thumb: #d9d8d1;
--scroll-thumb-hover: #c3c2b7;
--glass-bar: rgba(249,249,247,.86);
--glass-card: rgba(255,255,255,.90);
--title-grad-a: #0b0b0b;
--title-grad-b: #2a78d6;
--logo-mini-ink: #ffffff;
--chip-stream-ink: #a3145c;
--chip-fail-ink: #a32a2a;
--tooltip-bg: #ffffff;
--tooltip-border: rgba(11,11,11,.14);
--tooltip-title: #0b0b0b;
}
/* The ambient blur blobs behind the auth/boot screens are sized for a
near-black plane; at that opacity they muddy a light one. */
:root[data-theme="light"] .screen::before{ background:rgba(42,120,214,.16); opacity:.42; }
:root[data-theme="light"] .screen::after{ background:rgba(236,28,124,.10); opacity:.42; }
/* On the pale pink chip a white wordmark disappears — give it the ink
the rest of the chip uses. */
:root[data-theme="light"] .stream-chip .drools-logo.mini span{ color:var(--chip-stream-ink); }
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{
background:var(--bg); color:var(--label);
font-family:var(--font-ui); font-size:14px;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:rgba(57,135,229,.35); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--scroll-thumb); border-radius:8px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--scroll-thumb-hover); }
:is(button,input,select,textarea){ font-family:inherit; }
:is(button,input,select,a):focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popIn{ from{ opacity:0; transform:scale(.96) translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes drift{
0%{ transform:translate(0,0) scale(1); }
50%{ transform:translate(4%, -6%) scale(1.08); }
100%{ transform:translate(0,0) scale(1); }
}
/* ============ FULL-PAGE SCREENS (auth / boot) ============ */
.screen{
min-height:100vh; min-height:100dvh; position:relative; overflow:hidden;
display:flex; align-items:center; justify-content:center; flex-direction:column;
background:var(--bg); padding:24px; text-align:center; isolation:isolate;
}
.screen::before, .screen::after{
content:''; position:absolute; z-index:-1; border-radius:50%; filter:blur(110px); opacity:.55;
animation:drift 18s ease-in-out infinite;
}
.screen::before{ width:520px; height:520px; top:-160px; left:50%; margin-left:-420px; background:rgba(59,118,221,.22); }
.screen::after{ width:420px; height:420px; bottom:-140px; left:50%; margin-left:60px; background:rgba(236,28,124,.12); animation-delay:-9s; }
.upload-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:4px; color:var(--accent-2); text-transform:uppercase; margin-bottom:18px; }
.upload-title{
font-weight:700; font-size:clamp(30px,5vw,46px); letter-spacing:-1.2px; margin-bottom:14px;
background:linear-gradient(135deg,var(--title-grad-a) 20%,var(--title-grad-b) 90%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.upload-sub{ color:var(--muted); font-size:14px; max-width:560px; margin:0 auto 30px; line-height:1.65; }
.status-line{ margin-top:22px; font-family:var(--font-mono); font-size:12px; color:var(--accent-2); min-height:20px; }
.progress-track{ width:min(420px,80vw); height:5px; background:var(--surface2); border-radius:99px; margin:14px auto 0; overflow:hidden; display:none; }
.progress-fill{ height:100%; background:linear-gradient(90deg,var(--brand-blue-2),var(--brand-pink)); width:0%; border-radius:99px; transition:width .35s var(--ease); }
.boot-ring{ width:42px; height:42px; border:3px solid var(--tint-mid); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin-bottom:22px; }
/* ============ DROOLS LOGO ============
CSS rendition of the wordmark: rounded white letters with a thick
brand-blue outline and a magenta offset — built from text so it
animates per-letter and costs no image request. */
.drools-logo{
display:flex; align-items:baseline; justify-content:center; gap:1px;
font-family:'Baloo 2', var(--font-ui); font-weight:800; line-height:1;
user-select:none; margin-bottom:14px;
}
.drools-logo span{
display:inline-block; color:#fff; letter-spacing:-1px;
text-shadow:
2px 0 0 var(--brand-blue), -2px 0 0 var(--brand-blue),
0 2px 0 var(--brand-blue), 0 -2px 0 var(--brand-blue),
2px 2px 0 var(--brand-blue), -2px -2px 0 var(--brand-blue),
2px -2px 0 var(--brand-blue), -2px 2px 0 var(--brand-blue),
5px 5px 0 var(--brand-pink);
}
/* the two o's carry the pink counters, echoing the mark */
.drools-logo span:nth-child(3),
.drools-logo span:nth-child(4){
text-shadow:
2px 0 0 var(--brand-blue), -2px 0 0 var(--brand-blue),
0 2px 0 var(--brand-blue), 0 -2px 0 var(--brand-blue),
2px 2px 0 var(--brand-blue), -2px -2px 0 var(--brand-blue),
2px -2px 0 var(--brand-blue), -2px 2px 0 var(--brand-blue),
5px 5px 0 var(--brand-pink), 0 0 14px rgba(236,28,124,.45);
}
.drools-logo.lg{ font-size:clamp(56px,9vw,84px); }
.drools-logo.sm{ font-size:40px; margin-bottom:6px; }
/* Inline mark for the streaming chip: the outline/offset shadows are too
heavy at this size, so it keeps the two brand colours and drops them. */
.drools-logo.mini{
font-size:15px; margin:0; gap:0; display:inline-flex; vertical-align:middle;
}
.drools-logo.mini span{ text-shadow:none; color:var(--logo-mini-ink); }
.drools-logo.mini span:nth-child(3),
.drools-logo.mini span:nth-child(4){ color:var(--brand-pink); text-shadow:none; }
/* ============ STREAMING CHIP ============ */
.stream-chip{
/* overflow is visible, not hidden: the area dropdown below hangs outside
the pill and would otherwise be clipped away to nothing. */
display:flex; align-items:center; gap:9px; position:relative; overflow:visible;
background:rgba(236,28,124,.12); border:1px solid rgba(236,28,124,.42);
color:var(--chip-stream-ink); font-family:var(--font-mono); font-size:11px;
padding:6px 12px; border-radius:99px; animation:popIn .25s var(--ease) both;
}
.stream-chip.failed{
background:rgba(208,59,59,.12); border-color:rgba(208,59,59,.45); color:var(--chip-fail-ink);
}
.stream-chip.failed .drools-logo.mini span{ animation:none; }
.stream-track{ width:54px; height:3px; background:var(--tint-strong); border-radius:99px; overflow:hidden; flex-shrink:0; }
.stream-bar{
display:block; height:100%; width:0%; border-radius:99px;
background:linear-gradient(90deg,var(--brand-blue-2),var(--brand-pink));
transition:width .4s var(--ease);
}
/* ============ AREA PROGRESS ============
One row per area of the dashboard, on the boot screen while it fills and
in a dropdown under the streaming chip afterwards. The three states have
to be told apart at a glance: green means the number is FINAL, not that
something merely happened. */
.area-list{
list-style:none; margin:22px auto 0; padding:0;
width:min(400px,86vw); text-align:left;
}
.area-row{
display:flex; align-items:center; gap:10px;
padding:6px 10px; border-radius:8px;
font-family:var(--font-mono); font-size:11px; letter-spacing:.2px;
color:var(--muted-soft); transition:color .2s var(--ease), background .2s var(--ease);
}
.area-ico{ width:13px; flex-shrink:0; text-align:center; font-size:11px; }
.area-nm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.area-note{ color:var(--muted-soft); opacity:.75; flex-shrink:0; font-size:10px; }
.area-row.ready { color:var(--pos); background:rgba(12,163,12,.07); }
.area-row.ready .area-note{ color:var(--pos); }
.area-row.loading{ color:var(--accent-2); background:var(--tint-weak); }
.area-row.loading .area-ico{ display:inline-block; animation:spin 1s linear infinite; }
.area-row.queued { opacity:.5; }
.area-row.absent { opacity:.55; }
.area-row.failed { color:var(--neg); }
.area-row.failed .area-note{ color:var(--neg); }
/* Dropdown form, hanging under the streaming chip. */
.area-list.drop{
position:absolute; top:calc(100% + 8px); right:0; z-index:40;
width:270px; margin:0; padding:7px;
background:var(--modal-bg); border:1px solid var(--border);
border-radius:var(--radius-sm,10px); box-shadow:0 12px 34px rgba(0,0,0,.45);
display:none; cursor:default;
}
.stream-chip:hover .area-list.drop,
.stream-chip:focus-within .area-list.drop,
.stream-chip:focus .area-list.drop{ display:block; }
/* A tab whose data has not landed yet. Deliberately quiet -- the tab is
still clickable, and the panel itself explains what is happening. */
.tab-btn.area-waiting > span:first-of-type::after{
content:''; display:inline-block; width:5px; height:5px; margin-left:7px;
border-radius:50%; background:var(--accent-2); vertical-align:middle;
animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
/* Covers a tab that is still being prepared. Distinct from the "dimension
unavailable" message, which means the column does not exist at all --
this one clears itself in a second or two. */
.tab-panel{ position:relative; }
.area-pending{
position:absolute; inset:0; z-index:6;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:13px; padding:40px 24px; text-align:center; background:var(--bg);
animation:fadeUp .25s var(--ease) both;
}
.area-pending-t{ font-size:15px; font-weight:600; color:var(--label); }
.area-pending-s{
font-size:12.5px; color:var(--muted); max-width:400px; line-height:1.6;
}
/* loading state: letters drool downward one after another */
@keyframes droolBounce{
0%, 60%, 100%{ transform:translateY(0); }
30%{ transform:translateY(-14px) scale(1.04); }
45%{ transform:translateY(3px) scaleY(.94); }
}
.drools-logo.loading span{ animation:droolBounce 1.5s var(--ease) infinite; }
.drools-logo.loading span:nth-child(1){ animation-delay:0s; }
.drools-logo.loading span:nth-child(2){ animation-delay:.09s; }
.drools-logo.loading span:nth-child(3){ animation-delay:.18s; }
.drools-logo.loading span:nth-child(4){ animation-delay:.27s; }
.drools-logo.loading span:nth-child(5){ animation-delay:.36s; }
.drools-logo.loading span:nth-child(6){ animation-delay:.45s; }
/* static contexts get one settle-in wave, then rest */
.drools-logo:not(.loading) span{ animation:droolBounce .9s var(--ease) 1 both; }
.drools-logo:not(.loading) span:nth-child(2){ animation-delay:.06s; }
.drools-logo:not(.loading) span:nth-child(3){ animation-delay:.12s; }
.drools-logo:not(.loading) span:nth-child(4){ animation-delay:.18s; }
.drools-logo:not(.loading) span:nth-child(5){ animation-delay:.24s; }
.drools-logo:not(.loading) span:nth-child(6){ animation-delay:.30s; }
/* ============ AUTH CARD ============ */
.auth-card{
width:min(420px,92vw); background:var(--glass-card); backdrop-filter:blur(18px);
border:1px solid var(--border); border-radius:18px; padding:34px 30px;
text-align:left; box-shadow:var(--shadow-3);
animation:popIn .45s var(--ease) both;
}
.auth-card .upload-eyebrow{ margin-bottom:10px; }
.auth-title{
font-weight:700; font-size:26px; letter-spacing:-.6px; margin-bottom:8px;
background:linear-gradient(135deg,var(--title-grad-a) 30%,var(--title-grad-b)); -webkit-background-clip:text;
background-clip:text; -webkit-text-fill-color:transparent;
}
.auth-sub{ color:var(--muted); font-size:13px; line-height:1.6; margin-bottom:22px; }
.auth-submit{ width:100%; justify-content:center; min-height:44px; margin-top:8px; font-size:13.5px; }
.auth-foot{ color:var(--muted-soft); font-size:11.5px; line-height:1.6; margin-top:18px; text-align:center; }
.auth-foot a{ color:var(--accent-2); text-decoration:none; }
.auth-foot a:hover{ text-decoration:underline; }
.scope-chip{ border-color:rgba(57,135,229,.35); color:var(--accent-2); background:var(--gold-soft); }
/* ============ APP SHELL ============ */
#app{ display:none; min-height:100vh; min-height:100dvh; }
#admin-app{ display:none; min-height:100vh; min-height:100dvh; }
.topbar{
position:sticky; top:0; z-index:60; background:var(--glass-bar); backdrop-filter:blur(16px) saturate(1.4);
border-bottom:1px solid var(--border-soft); padding:12px 28px;
display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{
width:32px; height:32px; border-radius:10px; color:#fff;
background:linear-gradient(135deg,var(--brand-blue-2) 55%,var(--brand-pink));
display:flex; align-items:center; justify-content:center;
font-family:'Baloo 2',var(--font-ui); font-weight:800; font-size:19px; line-height:1; padding-bottom:3px;
box-shadow:0 4px 14px rgba(59,118,221,.4);
}
.brand-txt{ font-weight:700; font-size:15px; letter-spacing:-.3px; }
.brand-sub{ font-family:var(--font-mono); font-size:9.5px; color:var(--muted-soft); letter-spacing:1.4px; margin-top:1px; }
.topbar-right{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.file-chip{
font-family:var(--font-mono); font-size:11px; color:var(--muted);
border:1px solid var(--border); background:var(--surface2);
padding:6px 12px; border-radius:99px; display:flex; align-items:center; gap:8px;
}
.file-chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--pos); box-shadow:0 0 6px var(--pos); }
/* ============ BUTTONS ============ */
.btn{
font-weight:600; font-size:12.5px; border:1px solid var(--border);
background:var(--surface2); color:var(--label);
padding:8px 14px; border-radius:9px; cursor:pointer;
display:inline-flex; align-items:center; gap:6px;
transition:border-color .15s, background .15s, color .15s, transform .08s, box-shadow .15s;
}
.btn:hover{ border-color:var(--border-strong); background:#262624; }
.btn:active{ transform:scale(.97); }
.btn.primary{
background:linear-gradient(180deg,var(--accent-2),var(--accent-deep));
color:#fff; border:none; box-shadow:0 2px 10px rgba(57,135,229,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn.primary:hover{ filter:brightness(1.08); color:#fff; box-shadow:0 4px 16px rgba(57,135,229,.45), inset 0 1px 0 rgba(255,255,255,.18); }
.btn.ghost{ background:transparent; }
.btn.ghost:hover{ background:var(--surface2); }
.btn.sm{ padding:6px 11px; font-size:11.5px; }
.btn.danger{ border-color:rgba(208,59,59,.4); color:#f08a8a; }
.btn.danger:hover{ border-color:var(--danger); background:rgba(208,59,59,.12); color:#f08a8a; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.btn:disabled:hover{ border-color:var(--border); background:var(--surface2); color:var(--label); filter:none; }
/* ============ PANEL SWITCH ============ */
.panel-switch{ display:flex; background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:3px; gap:2px; }
.panel-switch button{
background:none; border:none; color:var(--muted); padding:6px 14px; border-radius:6px;
font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; cursor:pointer;
transition:background .15s, color .15s;
}
.panel-switch button.on{ background:var(--accent); color:#fff; box-shadow:0 1px 6px rgba(57,135,229,.4); }
/* ============ FILTER PANEL ============ */
.filter-panel{ background:var(--surface); border-bottom:1px solid var(--border-soft); padding:14px 28px; }
.filter-grid{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.fbox{ position:relative; }
.fbox-lbl{ display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:1.2px; color:var(--muted-soft); text-transform:uppercase; margin-bottom:5px; }
.ms-btn{
min-width:132px; max-width:180px; background:var(--surface2); border:1px solid var(--border); color:var(--label);
padding:8px 30px 8px 11px; border-radius:8px; font-size:12.5px; cursor:pointer;
text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative;
transition:border-color .15s, background .15s;
}
.ms-btn:hover{ border-color:var(--border-strong); background:#262624; }
.ms-btn.active{ border-color:rgba(57,135,229,.6); color:var(--accent-2); background:rgba(57,135,229,.08); }
.ms-btn::after{ content:'▾'; position:absolute; right:11px; top:50%; transform:translateY(-50%); font-size:9px; color:var(--muted-soft); transition:transform .15s; }
.ms-count{ background:var(--brand-pink); color:#fff; font-size:9px; font-weight:700; padding:1px 5px; border-radius:8px; margin-left:6px; }
.ms-panel{
display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:100; width:252px;
background:#232322; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-3);
overflow:hidden;
}
.ms-panel.open{ display:block; animation:popIn .18s var(--ease) both; }
.ms-search{ padding:9px; border-bottom:1px solid var(--border-soft); }
.ms-search input{ width:100%; background:var(--surface2); border:1px solid var(--border); color:var(--label); padding:7px 10px; border-radius:7px; font-size:12.5px; }
.ms-search input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.ms-list{ max-height:230px; overflow-y:auto; padding:5px; }
.ms-item{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px; cursor:pointer; font-size:12.5px; transition:background .1s; }
.ms-item:hover{ background:var(--tint); }
.ms-item input{ accent-color:var(--accent); cursor:pointer; }
.ms-item span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.ms-foot{ display:flex; justify-content:space-between; padding:8px 10px; border-top:1px solid var(--border-soft); }
.ms-foot button{ background:none; border:none; color:var(--muted); font-size:10px; font-family:var(--font-mono); cursor:pointer; letter-spacing:.5px; padding:2px 4px; border-radius:5px; }
.ms-foot button:hover{ color:var(--accent-2); }
.txt-search{ background:var(--surface2); border:1px solid var(--border); color:var(--label); padding:8px 11px; border-radius:8px; font-size:12.5px; width:150px; transition:border-color .15s; }
.txt-search:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.txt-search.active{ border-color:rgba(57,135,229,.6); }
.range-pair{ display:flex; align-items:center; gap:5px; }
.range-pair select{ background:var(--surface2); border:1px solid var(--border); color:var(--label); padding:8px; border-radius:8px; font-size:11.5px; font-family:var(--font-mono); width:92px; }
.range-pair select:focus{ outline:none; border-color:var(--accent); }
.range-arrow{ color:var(--muted-soft); font-size:11px; }
.filter-actions{ display:flex; gap:8px; margin-left:auto; }
.active-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chip{
display:flex; align-items:center; gap:6px; background:var(--gold-soft); border:1px solid rgba(57,135,229,.35);
color:var(--accent-2); font-size:11px; padding:4px 8px 4px 10px; border-radius:99px; font-family:var(--font-mono);
animation:popIn .2s var(--ease) both;
}
.chip button{ background:none; border:none; color:var(--accent-2); cursor:pointer; font-size:13px; line-height:1; opacity:.7; }
.chip button:hover{ opacity:1; }
/* ============ METRIC TOGGLE ============ */
.metric-bar{ display:flex; align-items:center; gap:10px; padding:10px 28px; background:var(--surface); border-bottom:1px solid var(--border-soft); }
.metric-lbl{ font-family:var(--font-mono); font-size:9px; letter-spacing:1.5px; color:var(--muted-soft); text-transform:uppercase; }
.metric-toggle{ display:flex; background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:3px; gap:2px; }
.metric-toggle button{
background:none; border:none; color:var(--muted); padding:5px 14px; border-radius:6px;
font-size:11.5px; font-weight:600; cursor:pointer; transition:background .15s, color .15s;
}
.metric-toggle button.on{ background:var(--accent); color:#fff; }
/* ============ KPI STRIP ============ */
.kpi-strip{
display:grid; grid-template-columns:repeat(7,1fr); gap:12px;
padding:16px 28px 4px; background:var(--bg);
}
.kpi{
background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius);
padding:15px 16px; position:relative; cursor:help;
transition:border-color .2s, transform .2s var(--ease), box-shadow .2s;
animation:fadeUp .45s var(--ease) both;
}
.kpi:nth-child(1){ animation-delay:.02s } .kpi:nth-child(2){ animation-delay:.06s }
.kpi:nth-child(3){ animation-delay:.10s } .kpi:nth-child(4){ animation-delay:.14s }
.kpi:nth-child(5){ animation-delay:.18s } .kpi:nth-child(6){ animation-delay:.22s }
.kpi:nth-child(7){ animation-delay:.26s }
.kpi:hover{ border-color:var(--border-strong); transform:translateY(-2px); box-shadow:var(--shadow-2); }
.kpi-lbl{ font-family:var(--font-mono); font-size:9px; letter-spacing:1px; color:var(--muted-soft); text-transform:uppercase; margin-bottom:9px; }
.kpi-val{ font-size:23px; font-weight:700; letter-spacing:-.5px; color:var(--label); line-height:1; font-variant-numeric:tabular-nums; }
.kpi-sub{ font-size:10px; color:var(--muted-soft); margin-top:6px; }
.kpi-trend{ position:absolute; top:13px; right:14px; font-size:10px; font-weight:700; font-family:var(--font-mono); padding:2px 7px; border-radius:99px; }
.kpi-trend.up{ color:#3ecf5e; background:rgba(12,163,12,.14); }
.kpi-trend.dn{ color:var(--neg); background:rgba(230,103,103,.12); }
/* ---------- drill-through ----------
A tile that opens the rows behind its number. The base .kpi carries
cursor:help for its tooltip, which is the wrong promise once the tile
is a button — these say "there is somewhere to go" instead, with an
arrow that only appears on approach so the resting card stays quiet. */
.kpi.drill, .bsum-cell.drill{ cursor:pointer; }
.kpi.drill::after, .bsum-cell.drill::after{
content:'→'; position:absolute; right:13px; bottom:11px;
font-size:12px; color:var(--muted-soft); opacity:0;
transform:translateX(-3px); transition:opacity .2s, transform .2s var(--ease);
}
.kpi.drill:hover::after, .kpi.drill:focus-visible::after,
.bsum-cell.drill:hover::after, .bsum-cell.drill:focus-visible::after{
opacity:.85; transform:translateX(0);
}
.kpi.drill:focus-visible, .bsum-cell.drill:focus-visible{
outline:2px solid var(--accent, #c8a24a); outline-offset:2px;
}
.bsum-cell.drill{ position:relative; border-radius:10px; padding:2px 4px; margin:-2px -4px;
transition:background .2s; }
.bsum-cell.drill:hover{ background:var(--hover, rgba(127,127,127,.08)); }
/* Touch devices have no hover to reveal the arrow, so it simply stays. */
@media (hover:none){
.kpi.drill::after, .bsum-cell.drill::after{ opacity:.6; transform:none; }
}
/* ---------- grouped market-gap list ----------
Sections collapsed to their counts by default; grouped by city that is
300-odd headers, and the count is usually the whole answer. */
.gap-grp-hd{ cursor:pointer; user-select:none; }
.gap-grp-hd td{
background:var(--bg-soft, rgba(127,127,127,.06));
border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
padding:9px 12px !important; font-weight:600; text-align:left !important;
}
.gap-grp-hd:hover td{ background:var(--hover, rgba(127,127,127,.11)); }
.gap-grp-hd:focus-visible td{ outline:2px solid var(--accent, #c8a24a); outline-offset:-2px; }
.gap-caret{
display:inline-block; width:14px; color:var(--muted-soft); font-size:10px;
transition:transform .18s var(--ease);
}
.gap-grp.open .gap-caret{ transform:rotate(90deg); }
.gap-grp-name{ color:var(--label); }
.gap-grp-n{
float:right; font-family:var(--font-mono); font-size:11px; font-weight:700;
color:var(--muted-soft); background:var(--card); border:1px solid var(--border-soft);
border-radius:99px; padding:1px 9px; font-variant-numeric:tabular-nums;
}
/* The rows themselves — hidden until the header is opened. Stated as a
negative so an open row simply keeps whatever display the responsive
rules gave it: table-row on desktop, block once the table becomes cards. */
.gap-grp:not(.open) tr:not(.gap-grp-hd){ display:none; }
/* ---------- visit-frequency chips ---------- */
.chip-row{ display:flex; gap:6px; flex-wrap:wrap; }
/* The count riding on a chip: quieter than its label, and legible whether
the chip is selected (light on accent) or not. */
.chip-n{
display:inline-block; margin-left:5px; padding:0 5px; border-radius:99px;
font-family:var(--font-mono); font-size:10px; font-weight:700;
background:rgba(127,127,127,.18); color:inherit; opacity:.85;
font-variant-numeric:tabular-nums;
}
.btn.primary .chip-n{ background:rgba(255,255,255,.22); }
/* ---------- advisor / RC detail panel ---------- */
.detail-box{
max-width:880px; width:min(880px, 94vw);
max-height:88vh; overflow-y:auto;
}
.detail-hd{
display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
padding-right:34px; margin-bottom:16px;
}
.detail-sub{ font-size:12px; color:var(--muted-soft); }
.detail-sec{ margin-top:22px; }
.detail-sec-hd{
font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase;
color:var(--muted-soft); margin-bottom:10px; padding-bottom:7px;
border-bottom:1px solid var(--border-soft);
}
.detail-note{ text-transform:none; letter-spacing:0; opacity:.85; }
.dstats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:10px; }
.dstat{
border:1px solid var(--border-soft); border-radius:10px; padding:11px 12px;
background:var(--bg-soft, rgba(127,127,127,.04));
}
.dstat-lbl{
font-family:var(--font-mono); font-size:9px; letter-spacing:.8px; text-transform:uppercase;
color:var(--muted-soft); margin-bottom:7px;
}
.dstat-val{ font-size:20px; font-weight:700; color:var(--label); line-height:1; font-variant-numeric:tabular-nums; }
.dstat-sub{ font-size:10px; color:var(--muted-soft); margin-top:5px; }
/* A period sparkline built from divs — six bars needs no charting library. */
.dbars{ display:flex; gap:10px; align-items:flex-end; }
.dbar{ flex:1 1 0; min-width:0; text-align:center; }
.dbar-track{
height:84px; display:flex; align-items:flex-end;
background:var(--bg-soft, rgba(127,127,127,.05)); border-radius:6px; overflow:hidden;
}
.dbar-fill{ width:100%; background:var(--sale-col, #3987e5); border-radius:6px 6px 0 0; min-height:2px; }
.dbar-v{ font-size:12px; font-weight:700; margin-top:6px; font-variant-numeric:tabular-nums; color:var(--label); }
.dbar-x{ font-family:var(--font-mono); font-size:10px; color:var(--muted-soft); }
.dbar-r{ font-size:9px; color:var(--muted-soft); margin-top:2px; }
/* A table row that opens something. */
.drill-row{ cursor:pointer; }
.drill-row:hover > td{ background:var(--hover, rgba(127,127,127,.07)); }
.drill-row:focus-visible{ outline:2px solid var(--accent, #c8a24a); outline-offset:-2px; }
/* ---------- remarks ---------- */
.remark-list{ display:flex; flex-direction:column; gap:10px; }
.remark{
border:1px solid var(--border-soft); border-left:3px solid var(--accent, #c8a24a);
border-radius:9px; padding:11px 13px; background:var(--bg-soft, rgba(127,127,127,.04));
}
.remark-hd{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.remark-scope{
font-family:var(--font-mono); font-size:9px; letter-spacing:.6px; text-transform:uppercase;
color:var(--muted-soft); border:1px solid var(--border-soft); border-radius:99px; padding:2px 7px;
}
.remark-who{ font-weight:600; color:var(--label); }
.remark-period{
font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--accent-2);
background:var(--gold-soft); border-radius:99px; padding:1px 7px;
}
.remark-body{ font-size:13px; line-height:1.55; color:var(--label); white-space:pre-wrap; }
.remark-foot{ margin-top:7px; font-size:10px; color:var(--muted-soft); }
/* The inline marker on a table row that carries a remark. */
.remark-chip{
display:inline-block; cursor:pointer; white-space:nowrap;
font-family:var(--font-mono); font-size:9px; letter-spacing:.4px;
padding:2px 7px; border-radius:99px; margin-left:5px;
border:1px solid rgba(200,162,74,.45); color:var(--accent-2); background:var(--gold-soft);
}
.remark-chip:hover{ border-color:var(--accent, #c8a24a); }
.remark-chip:focus-visible{ outline:2px solid var(--accent, #c8a24a); outline-offset:2px; }
textarea.admin-select{ resize:vertical; min-height:88px; font-family:inherit; line-height:1.5; }
/* Subtotal and grand-total rows in the RC → advisor gap table. */
.gap-sub td{
background:var(--bg-soft, rgba(127,127,127,.05));
border-top:1px solid var(--border-soft); font-weight:600;
}
.gap-total td{
background:var(--bg-soft, rgba(127,127,127,.09));
border-top:2px solid var(--border-strong); font-weight:700;
}
/* A breakdown-table key that jumps to its section in the list below. */
.gap-jump{
color:inherit; cursor:pointer; text-decoration:underline;
text-decoration-color:var(--border-strong); text-underline-offset:3px;
}
.gap-jump:hover{ color:var(--accent, #c8a24a); text-decoration-color:currentColor; }
.gap-jump:focus-visible{ outline:2px solid var(--accent, #c8a24a); outline-offset:2px; border-radius:3px; }
/* ============ SECTION NAV (inside the sidebar) ============
The tabs used to be a horizontal strip. As a vertical rail they get
room for grouping, which is what makes eight sections navigable: the
group label states the question, the item answers it.
========================================================== */
.sb-nav{ padding:14px 12px 6px; flex-shrink:0; }
.sb-nav-group{ margin-bottom:14px; }
.sb-nav-group:last-child{ margin-bottom:6px; }
.sb-nav-lbl{
display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
font-family:var(--font-mono); font-size:9px; letter-spacing:1.8px;
color:var(--muted-soft); text-transform:uppercase;
padding:0 8px; margin-bottom:5px;
}
/* The parenthetical ("what sells") — present for scanning, never competing
with the group name itself. */
.sb-nav-lbl em{
font-style:normal; text-transform:none; letter-spacing:.2px;
font-size:9.5px; opacity:.62;
}
.tab-btn{
display:flex; align-items:center; gap:10px; width:100%;
background:none; border:none; cursor:pointer; color:var(--muted);
font-family:inherit; font-size:13px; font-weight:550; letter-spacing:-.1px;
padding:8px 10px; border-radius:9px; text-align:left; position:relative;
transition:color .15s, background .15s;
}
.tab-btn svg{ width:16px; height:16px; flex-shrink:0; opacity:.62; transition:opacity .15s; }
.tab-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tab-btn:hover{ color:var(--label); background:var(--tint-weak); }
.tab-btn:hover svg{ opacity:.9; }
.tab-btn.active{
color:var(--label); font-weight:650;
background:var(--gold-soft); box-shadow:inset 0 0 0 1px rgba(57,135,229,.22);
}
.tab-btn.active svg{ opacity:1; color:var(--accent-2); }
/* Active marker on the rail edge, mirroring the underline the strip had. */
.tab-btn.active::before{
content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--accent);
}
.tab-btn:focus-visible{ outline:none; box-shadow:var(--ring); }
.tab-panel{ display:none; padding:20px 28px 48px; }
.tab-panel.active{ display:block; animation:fadeUp .35s var(--ease) both; }
/* ============ CARDS / GRID ============ */
.grid2{ display:grid; grid-template-columns:1.3fr 1fr; gap:14px; margin-bottom:14px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px; }
.stack{ display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
.card{
background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius);
overflow:hidden; transition:border-color .2s;
}
.card:hover{ border-color:var(--border); }
.card-hd{ padding:15px 18px 0; }
.card-body{ padding:16px 18px 18px; }
.sec-hd{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-bottom:12px; border-bottom:1px solid var(--border-soft); margin-bottom:2px; }
.sec-title{ font-weight:600; font-size:13.5px; letter-spacing:-.1px; display:flex; align-items:center; gap:9px; }
.sec-badge{ font-family:var(--font-mono); font-size:9px; color:var(--accent-2); background:var(--gold-soft); padding:2px 8px; border-radius:99px; letter-spacing:.5px; }
.chart-box canvas{ max-height:320px; }
.chart-title{ font-weight:600; font-size:13px; margin-bottom:14px; display:flex; align-items:center; gap:8px; letter-spacing:-.1px; }
.chart-title .dot{ width:8px; height:8px; border-radius:3px; }
.section-divider{ display:flex; align-items:center; gap:12px; padding:16px 0 10px; }
.section-divider .line{ height:1px; flex:1; background:linear-gradient(90deg,var(--border-strong),transparent); }
.section-divider span{ font-size:11px; font-weight:700; letter-spacing:2.5px; color:var(--muted-soft); text-transform:uppercase; }
/* ============ TABLES ============ */
.tbl-wrap{ overflow-x:auto; max-height:460px; overflow-y:auto; border-radius:9px; }
table{ width:100%; border-collapse:collapse; font-size:12px; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
thead th{
position:sticky; top:0; background:#212120; color:var(--muted-soft);
font-size:9.5px; letter-spacing:.7px; text-transform:uppercase;
padding:9px 12px; text-align:right; border-bottom:1px solid var(--border);
white-space:nowrap; cursor:pointer; user-select:none; z-index:5;
}
thead th.lft{ text-align:left; }
thead th:hover{ color:var(--accent-2); }
thead th .sort-ic{ font-size:8px; margin-left:3px; opacity:.5; }
tbody td{ padding:8px 12px; text-align:right; border-bottom:1px solid var(--border-soft); white-space:nowrap; color:var(--ink-2); }
tbody td.nc{ text-align:left; font-family:var(--font-ui); color:var(--label); max-width:220px; overflow:hidden; text-overflow:ellipsis; }
tbody tr{ transition:background .1s; }
tbody tr:hover{ background:var(--tint-weak); }
tbody tr.grand{ background:rgba(57,135,229,.06); font-weight:700; }
tbody tr.grand td{ border-top:1px solid rgba(57,135,229,.3); color:var(--accent-2); }
td.sale{ color:#6da7ec; } td.gross-val{ color:#e8845c; }
td.pos{ color:#3ecf5e; } td.neg{ color:var(--neg); }
td.tot{ font-weight:700; color:var(--label); }
.no-data{ text-align:center; color:var(--muted-soft); padding:30px; font-family:var(--font-ui); }
.insight-note{ padding:30px 18px; text-align:center; color:var(--muted); font-size:12.5px; font-family:var(--font-ui); line-height:1.7; }
.rank-badge{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:7px; background:var(--surface2); color:var(--muted); font-size:10px; font-weight:700; }
.rank-badge.top3{ background:linear-gradient(135deg,var(--accent-2),var(--accent-deep)); color:#fff; }
.scroll-hint{ display:none; }
/* ============ DRILL-DOWN ============ */
.breadcrumb{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:16px; font-family:var(--font-mono); font-size:11px; }
.crumb{
background:var(--surface2); border:1px solid var(--border); padding:6px 12px; border-radius:99px;
cursor:pointer; color:var(--muted); transition:all .15s;
}
.crumb:hover{ border-color:var(--accent); color:var(--accent-2); }
.crumb.active{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700; }
.crumb-sep{ color:var(--muted-soft); }
.drill-hint{ font-size:11.5px; color:var(--muted-soft); margin-bottom:14px; }
.drill-bar{ cursor:pointer; }
/* ============ TOOLTIP ============ */
.tt{ position:relative; }
.tt:hover .tt-box{ opacity:1; visibility:visible; transform:translate(-50%,-6px); }
.tt-box{
position:absolute; bottom:100%; left:50%; transform:translate(-50%,0); opacity:0; visibility:hidden;
transition:all .18s var(--ease);
background:#262625; border:1px solid var(--border); color:var(--label); font-size:11px;
font-family:var(--font-ui); padding:8px 11px; border-radius:9px;
white-space:nowrap; z-index:50; box-shadow:var(--shadow-2); pointer-events:none;
}
/* ============ MISC ============ */
.growth-badge{ display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; font-family:var(--font-mono); }
.growth-badge.pos{ background:rgba(12,163,12,.14); color:#3ecf5e; }
.growth-badge.neg{ background:rgba(230,103,103,.12); color:var(--neg); }
.dl-menu-wrap{ position:relative; }
.dl-menu{
display:none; position:absolute; top:calc(100% + 6px); right:0; background:#232322;
border:1px solid var(--border); border-radius:12px; min-width:216px; box-shadow:var(--shadow-3); z-index:100; overflow:hidden;
}
.dl-menu.open{ display:block; animation:popIn .18s var(--ease) both; }
.dl-menu button{
width:100%; text-align:left; background:none; border:none; color:var(--label);
padding:10px 14px; font-size:12.5px; cursor:pointer; display:flex; align-items:center; gap:9px;
border-bottom:1px solid var(--border-soft); transition:background .1s;
}
.dl-menu button:last-child{ border-bottom:none; }
.dl-menu button:hover{ background:var(--tint); color:var(--accent-2); }
.loader-overlay{ position:fixed; inset:0; background:rgba(13,13,13,.92); backdrop-filter:blur(6px); z-index:9999; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; }
.loader-ring{ width:42px; height:42px; border:3px solid var(--tint-mid); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.loader-txt{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.top-perf-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
/* ============ LOCAL FILTER BARS ============ */
.local-filters{ background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius); padding:14px 16px; margin-bottom:14px; }
.filters-heading{
font-weight:700; font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
color:var(--muted-soft); display:flex; align-items:center; gap:7px; margin-bottom:11px;
}
/* Local bars mix multi-select .fbox boxes, "Show: Top N" .lf-box selects and
the Clear button, all of different heights — bottom-align so their controls
sit on one line regardless of whether a label sits above them. */
.local-filter-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.lf-box{ display:flex; flex-direction:column; gap:5px; min-width:130px; }
.lf-box label{ font-family:var(--font-mono); font-size:9px; letter-spacing:1px; color:var(--muted-soft); text-transform:uppercase; }
.lf-box select{
background:var(--surface2); border:1px solid var(--border); color:var(--label); padding:7px 26px 7px 10px;
border-radius:8px; font-size:12.5px; cursor:pointer; min-width:140px;
appearance:none; -webkit-appearance:none; transition:border-color .15s;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 10px center;
}
.lf-box select:focus{ outline:none; border-color:var(--accent); }
.lf-box select.active{ border-color:rgba(57,135,229,.6); color:var(--accent-2); }
.lf-clear-btn{ align-self:flex-end; }
/* ============ MODAL ============ */
.modal-overlay{
position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(6px);
z-index:9998; display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{ display:flex; animation:fadeIn .18s both; }
.modal-box{
background:var(--modal-bg); border:1px solid var(--border); border-radius:18px;
max-width:520px; width:100%; padding:28px; box-shadow:var(--shadow-3);
animation:popIn .28s var(--ease) both;
}
.modal-title{ font-weight:700; font-size:18px; letter-spacing:-.4px; margin-bottom:8px; }
.modal-sub{ color:var(--muted); font-size:12.5px; line-height:1.6; margin-bottom:18px; }
.modal-opt{ background:var(--surface2); border:1px solid var(--border-soft); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.modal-opt-title{ font-weight:600; font-size:13px; margin-bottom:5px; display:flex; align-items:center; gap:8px; }
.modal-opt-sub{ font-size:11.5px; color:var(--muted-soft); line-height:1.6; margin-bottom:11px; }
.modal-close{ position:absolute; top:16px; right:16px; background:none; border:none; color:var(--muted); font-size:17px; cursor:pointer; padding:4px 8px; border-radius:7px; }
.modal-close:hover{ background:var(--tint); color:var(--label); }
.share-link-box{ display:flex; gap:8px; margin-top:8px; }
.share-link-box input{ flex:1; background:var(--bg); border:1px solid var(--border); color:var(--muted); padding:8px 10px; border-radius:8px; font-size:11px; font-family:var(--font-mono); }
.size-warn{ font-size:11px; color:var(--chart-4); margin-top:8px; font-family:var(--font-mono); }
/* ============ ADMIN PANEL ============ */
.admin-wrap{ max-width:1180px; margin:0 auto; padding:28px 28px 64px; }
.admin-hero{ margin-bottom:26px; animation:fadeUp .4s var(--ease) both; }
.admin-hero h1{ font-weight:700; font-size:27px; letter-spacing:-.8px; margin-bottom:8px; }
.admin-hero p{ color:var(--muted); font-size:13.5px; line-height:1.65; max-width:720px; }
.admin-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:16px; align-items:start; }
.admin-card{
background:var(--card); border:1px solid var(--border-soft); border-radius:14px; padding:22px;
transition:border-color .2s; animation:fadeUp .45s var(--ease) both;
}
.admin-card:hover{ border-color:var(--border); }
.admin-card h2{ font-weight:600; font-size:14px; letter-spacing:-.1px; margin-bottom:5px; display:flex; align-items:center; gap:8px; }
.admin-card .hint{ color:var(--muted-soft); font-size:11.5px; line-height:1.6; margin-bottom:16px; }
.admin-drop{
border:1.5px dashed var(--dash-line); border-radius:13px; padding:36px 24px; text-align:center;
background:var(--tint-weak); cursor:pointer; transition:all .2s var(--ease);
}
.admin-drop:hover, .admin-drop.drag{ border-color:var(--accent); background:rgba(57,135,229,.07); transform:scale(1.005); }
.admin-drop svg{ width:34px; height:34px; margin-bottom:12px; stroke:var(--accent-2); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.drop-zone-txt{ font-weight:600; font-size:14px; margin-bottom:6px; }
.drop-zone-sub{ font-size:12px; color:var(--muted-soft); font-family:var(--font-mono); }
.admin-field{ margin-top:16px; }
.admin-field label{ display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:1.2px; color:var(--muted-soft); text-transform:uppercase; margin-bottom:6px; }
.admin-field input{
width:100%; background:var(--surface2); border:1px solid var(--border); color:var(--label);
padding:10px 12px; border-radius:9px; font-size:13px; transition:border-color .15s, box-shadow .15s;
}
.admin-field input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.stage-list{ display:flex; flex-direction:column; gap:9px; margin-top:16px; }
.stage{ display:flex; align-items:center; gap:11px; font-size:12.5px; color:var(--muted-soft); }
.stage-dot{
width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border);
display:flex; align-items:center; justify-content:center; font-size:9px;
font-family:var(--font-mono); flex-shrink:0; transition:all .2s;
}
.stage.run .stage-dot{ border-color:var(--accent); color:var(--accent-2); animation:pulse 1.2s ease-in-out infinite; }
.stage.run{ color:var(--label); }
.stage.done .stage-dot{ border-color:var(--pos); background:var(--pos); color:#fff; }
.stage.done{ color:var(--muted); }
.stage.fail .stage-dot{ border-color:var(--danger); color:#f08a8a; }
.stage.fail{ color:#f08a8a; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }
.admin-stat-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:6px; }
.admin-stat{ background:var(--surface2); border:1px solid var(--border-soft); border-radius:10px; padding:13px 15px; }
.admin-stat .k{ font-family:var(--font-mono); font-size:9px; letter-spacing:1px; color:var(--muted-soft); text-transform:uppercase; margin-bottom:6px; }
.admin-stat .v{ font-size:18px; font-weight:700; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
.live-badge{
display:inline-flex; align-items:center; gap:6px; background:rgba(12,163,12,.13); border:1px solid rgba(12,163,12,.4);
color:#3ecf5e; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:1px;
padding:3px 9px; border-radius:99px; text-transform:uppercase;
}
.admin-alert{ border-radius:10px; padding:12px 14px; font-size:12.5px; line-height:1.6; margin-top:14px; display:none; }
.admin-alert.err{ display:block; background:rgba(208,59,59,.1); border:1px solid rgba(208,59,59,.35); color:#f0a49e; animation:popIn .2s var(--ease) both; }
.admin-alert.ok{ display:block; background:rgba(12,163,12,.09); border:1px solid rgba(12,163,12,.32); color:#8fe0a5; animation:popIn .2s var(--ease) both; }
.ds-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border-soft); }
.ds-row:last-child{ border-bottom:none; }
.ds-meta{ flex:1; min-width:0; }
.ds-name{ font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-sub{ font-family:var(--font-mono); font-size:10px; color:var(--muted-soft); margin-top:3px; }
.ds-actions{ display:flex; gap:6px; flex-shrink:0; }
.col-preview{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px 12px; margin-top:14px; }
/* One row per dashboard field: the tick tells you at a glance what was
auto-detected, the select lets you correct it. */
.col-map{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.col-map-lbl{ font-family:var(--font-mono); font-size:10px; letter-spacing:.4px; color:var(--muted-soft); }
.col-map.hit .col-map-lbl{ color:var(--pos); }
.col-map.miss .col-map-lbl{ color:var(--muted-soft); }
.col-map select{
width:100%; background:var(--surface2); color:var(--label);
border:1px solid var(--border); border-radius:var(--radius-xs);
font-family:var(--font-ui); font-size:11.5px; padding:6px 8px; cursor:pointer;
}
.col-map.miss select{ border-style:dashed; color:var(--muted-soft); }
.col-map select:hover{ border-color:var(--border-strong); }
/* ============ USER REGISTRY ============ */
.admin-select{
width:100%; background:var(--surface2); border:1px solid var(--border); color:var(--label);
padding:10px 30px 10px 12px; border-radius:9px; font-size:13px; cursor:pointer;
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 11px center;
}
.admin-select:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.scope-values{
max-height:190px; overflow-y:auto; margin-top:8px; border:1px solid var(--border);
border-radius:10px; padding:5px; background:var(--bg);
}
.scope-values label{
display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:7px;
cursor:pointer; font-size:12.5px; text-transform:none; letter-spacing:0; color:var(--label); margin:0;
}
.scope-values label:hover{ background:var(--tint); }
.scope-values input{ accent-color:var(--accent); cursor:pointer; }
.scope-warn{ font-size:11px; line-height:1.55; color:var(--chart-4); margin-top:7px; }
.scope-warn:empty{ display:none; }
.u-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-soft); }
.u-row:last-child{ border-bottom:none; }
.u-main{ flex:1; min-width:0; }
.u-email{ font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-sub{ font-family:var(--font-mono); font-size:10px; color:var(--muted-soft); margin-top:3px; }
.u-tags{ display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; }
.u-tag{
font-family:var(--font-mono); font-size:9px; letter-spacing:.5px; text-transform:uppercase;
padding:3px 8px; border-radius:99px; border:1px solid var(--border); color:var(--muted);
}
.u-tag.admin{ border-color:rgba(57,135,229,.45); color:var(--accent-2); background:var(--gold-soft); }
.u-tag.scoped{ border-color:rgba(144,133,233,.4); color:#b0a8f0; background:rgba(144,133,233,.1); }
.u-tag.off{ border-color:rgba(208,59,59,.35); color:#f08a8a; background:rgba(208,59,59,.08); }
.u-actions{ display:flex; gap:6px; flex-shrink:0; }
/* ============ MOBILE FILTER DRAWER ============ */
.filter-bar-mobile{ display:none; }
.filter-sheet-hd{ display:none; }
/* ============================================================
RESPONSIVE — 1100 / 860 / 720
============================================================ */
@media (max-width: 1100px){
.kpi-strip{ grid-template-columns:repeat(4,1fr); }
.grid2, .grid3, .top-perf-row, .admin-grid{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
.kpi-strip{ grid-template-columns:repeat(3,1fr); padding:14px 18px 4px; }
.topbar{ padding:11px 18px; }
.filter-panel{ padding:12px 18px; }
.metric-bar{ padding:9px 18px; }
.tab-panel{ padding:16px 18px 44px; }
.admin-wrap{ padding:22px 18px 48px; }
}
@media (max-width: 720px){
/* shell */
.topbar{ padding:10px 14px; gap:10px; }
.brand-sub{ display:none; }
.brand-txt{ font-size:14px; }
.brand-mark{ width:28px; height:28px; font-size:12px; }
.topbar-right{ gap:7px; }
.topbar-right .btn{ min-height:38px; }
.file-chip{ max-width:118px; padding:6px 10px; }
.file-chip span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* filters -> full-screen sheet */
.filter-panel{ padding:10px 14px; }
.filter-bar-mobile{ display:flex; gap:8px; align-items:center; }
.filter-toggle{ flex:1; justify-content:space-between; min-height:42px; font-size:13px; }
.filter-count{ background:var(--brand-pink); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:99px; }
.filter-count:empty{ display:none; }
.filter-shell{
position:fixed; inset:0; z-index:200; background:var(--bg);
display:none; flex-direction:column;
}
.filter-shell.open{ display:flex; animation:fadeIn .2s both; }
.filter-sheet-hd{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:14px 16px; border-bottom:1px solid var(--border);
font-weight:700; font-size:15px; letter-spacing:-.2px;
position:sticky; top:0; background:var(--bg); z-index:2;
}
.filter-sheet-hd .btn{ min-height:38px; }
.filter-grid{
flex-direction:column; align-items:stretch; gap:15px; flex:1;
overflow-y:auto; -webkit-overflow-scrolling:touch;
padding:15px 16px calc(28px + env(safe-area-inset-bottom));
}
.fbox{ width:100%; }
.fbox-lbl{ font-size:10px; }
.ms-btn{ width:100%; max-width:none; min-height:44px; font-size:14px; padding:11px 30px 11px 13px; }
.ms-panel{ position:static; width:100%; margin-top:8px; box-shadow:none; }
.ms-list{ max-height:250px; }
.ms-item{ padding:10px 9px; font-size:14px; }
.ms-item input{ width:18px; height:18px; }
.ms-foot button{ font-size:11px; padding:4px 2px; }
.range-pair{ gap:8px; }
.range-pair select{ flex:1; width:auto; min-height:44px; font-size:14px; }
.filter-actions{ margin-left:0; }
.filter-actions .btn{ width:100%; min-height:44px; justify-content:center; }
/* 16px keeps iOS Safari from zooming the viewport on focus. */
.txt-search{ width:100%; min-height:44px; font-size:16px; }
.ms-search input{ font-size:16px; padding:10px 12px; }
.active-chips{ margin-top:9px; }
.chip{ font-size:10.5px; }
/* metric toggle */
.metric-bar{ padding:9px 14px; flex-wrap:wrap; gap:8px; }
.metric-toggle{ flex:1; }
.metric-toggle button{ flex:1; padding:9px 8px; font-size:11px; }
#row-count-lbl{ width:100%; margin-left:0 !important; text-align:right; }
/* KPIs */
.kpi-strip{ grid-template-columns:repeat(2,1fr); gap:9px; padding:12px 14px 2px; }
.kpi{ padding:13px 14px; }
.kpi-lbl{ font-size:9px; margin-bottom:6px; }
.kpi-val{ font-size:19px; }
.kpi-sub{ font-size:9.5px; }
.kpi-trend{ top:11px; right:12px; font-size:9px; }
/* tabs — the nav itself lives in the sidebar drawer at this width */
.tab-btn{ padding:10px 10px; font-size:13.5px; }
.tab-panel{ padding:14px 14px calc(40px + env(safe-area-inset-bottom)); }
/* cards & charts */
.card-body{ padding:14px 14px 16px; }
.card-hd{ padding:14px 14px 0; }
.chart-title{ font-size:12px; margin-bottom:12px; flex-wrap:wrap; }
.chart-box canvas{ max-height:none; }
.sec-title{ font-size:12.5px; }
.sec-badge{ font-size:8.5px; }
/* tables */
.tbl-wrap{ max-height:60vh; -webkit-overflow-scrolling:touch; }
table{ font-size:11px; }
thead th{ padding:8px 9px; font-size:9px; }
tbody td{ padding:7px 9px; }
tbody td.nc{ max-width:150px; }
.scroll-hint{
display:block; font-family:var(--font-mono); font-size:9.5px;
color:var(--muted-soft); letter-spacing:.5px; padding:0 0 7px;
}
/* misc */
.local-filter-row{ flex-direction:column; }
.lf-box{ width:100%; }
.lf-box select{ width:100%; min-height:44px; font-size:14px; }
.lf-clear-btn{ align-self:stretch; min-height:44px; justify-content:center; }
.breadcrumb{ font-size:10.5px; }
.crumb{ padding:7px 12px; }
.dl-menu{ max-width:calc(100vw - 28px); }
.dl-menu button{ padding:13px 14px; }
.modal-box{ padding:20px; max-height:88vh; overflow-y:auto; }
.modal-title{ font-size:16px; }
.section-divider span{ font-size:10px; letter-spacing:2px; }
.admin-wrap{ padding:16px 14px calc(40px + env(safe-area-inset-bottom)); }
.admin-hero h1{ font-size:22px; }
.admin-drop{ padding:28px 18px; }
.upload-title{ font-size:clamp(26px,7vw,36px); }
/* auth + registry on phones */
.auth-card{ padding:26px 20px; }
.auth-title{ font-size:22px; }
.admin-field input, .admin-select{ font-size:16px; min-height:44px; }
.u-row{ flex-wrap:wrap; gap:9px; }
.u-main{ flex-basis:100%; }
.u-actions .btn{ min-height:38px; }
.scope-values label{ padding:10px 8px; font-size:14px; }
}
/* Hover tooltips are unreachable on touch — tap toggles instead. */
@media (hover: none){
.tt:hover .tt-box{ opacity:0; visibility:hidden; transform:translate(-50%,0); }
.tt.show .tt-box{ opacity:1; visibility:visible; transform:translate(-50%,-6px); }
}
/* Respect the OS motion setting: keep state changes, drop the theatre. */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
/* ============================================================
SIDEBAR — profile, appearance, dataset, actions
------------------------------------------------------------
A left drawer rather than a permanent rail: the dashboard grid
is already wide and a persistent column would cost the charts
~300px on every screen to hold controls used a few times a
session. Closed it costs nothing; open it overlays.
============================================================ */
.sb-trigger{
display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
width:34px; height:34px; margin-right:2px;
background:var(--surface2); border:1px solid var(--border); border-radius:10px;
color:var(--muted); cursor:pointer; transition:all .18s var(--ease);
}
.sb-trigger:hover{ background:var(--card-hover); color:var(--label); border-color:var(--border-strong); }
.sb-trigger svg{ width:17px; height:17px; }
.sb-scrim{
position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(4px);
z-index:9000; opacity:0; pointer-events:none; transition:opacity .24s var(--ease);
}
.sb-scrim.open{ opacity:1; pointer-events:auto; }
.sidebar{
position:fixed; top:0; left:0; bottom:0; width:min(320px,86vw); z-index:9001;
background:var(--surface); border-right:1px solid var(--border);
box-shadow:var(--shadow-3);
display:flex; flex-direction:column;
transform:translateX(-100%); transition:transform .28s var(--ease);
overflow-y:auto; overscroll-behavior:contain;
}
.sidebar.open{ transform:none; }
@media (prefers-reduced-motion:reduce){
.sidebar{ transition:none; }
.sb-scrim{ transition:none; }
}
.sb-head{
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:16px 18px; border-bottom:1px solid var(--border-soft); flex-shrink:0;
}
.sb-head-title{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:2.4px; color:var(--muted-soft); text-transform:uppercase; }
.sb-close{
background:none; border:none; color:var(--muted); font-size:17px; line-height:1;
cursor:pointer; padding:5px 8px; border-radius:7px;
}
.sb-close:hover{ background:var(--tint); color:var(--label); }
.sb-sect{ padding:16px 18px; border-bottom:1px solid var(--border-soft); }
.sb-sect:last-child{ border-bottom:none; }
.sb-sect-lbl{
font-family:var(--font-mono); font-size:9.5px; letter-spacing:2.2px;
color:var(--muted-soft); text-transform:uppercase; margin-bottom:11px;
}
/* profile */
.sb-user{ display:flex; align-items:center; gap:12px; }
.sb-avatar{
width:42px; height:42px; border-radius:13px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,var(--brand-blue-2),var(--brand-pink));
color:#fff; font-weight:800; font-size:17px; text-transform:uppercase;
}
.sb-user-meta{ min-width:0; }
.sb-name{ font-weight:650; font-size:13.5px; letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-email{ font-size:11px; color:var(--muted-soft); font-family:var(--font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.sb-pill{
font-family:var(--font-mono); font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase;
padding:3px 9px; border-radius:99px; border:1px solid var(--border); color:var(--muted);
}
.sb-pill.role-admin{ border-color:rgba(236,28,124,.42); color:var(--brand-pink-2); background:rgba(236,28,124,.10); }
.sb-pill.role-viewer{ border-color:var(--border-strong); }
.sb-pill.scope{ border-color:rgba(57,135,229,.38); color:var(--accent-2); background:var(--gold-soft); }
/* appearance — segmented day/night control */
.sb-seg{ display:flex; gap:4px; background:var(--surface2); border:1px solid var(--border); border-radius:11px; padding:4px; }
.sb-seg button{
flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
background:none; border:none; border-radius:8px; cursor:pointer;
color:var(--muted); font-size:11.5px; font-weight:600; padding:7px 6px;
transition:all .16s var(--ease);
}
.sb-seg button:hover{ color:var(--label); }
.sb-seg button.on{ background:var(--accent); color:#fff; box-shadow:0 1px 6px rgba(57,135,229,.34); }
.sb-seg svg{ width:14px; height:14px; }
.sb-hint{ font-size:10.5px; color:var(--muted-soft); line-height:1.55; margin-top:9px; }
/* dataset facts */
.sb-kv{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:11.5px; }
.sb-kv dt{ color:var(--muted-soft); flex-shrink:0; }
.sb-kv dd{ color:var(--ink-2); font-family:var(--font-mono); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* actions */
.sb-act{
display:flex; align-items:center; gap:10px; width:100%;
background:none; border:1px solid transparent; border-radius:9px;
color:var(--ink-2); font-size:12.5px; font-weight:550; text-align:left;
padding:9px 10px; cursor:pointer; transition:all .16s var(--ease);
}
.sb-act:hover{ background:var(--tint); color:var(--label); border-color:var(--border-soft); }
.sb-act svg{ width:15px; height:15px; flex-shrink:0; opacity:.75; }
.sb-act.danger{ color:var(--neg); }
.sb-act.danger:hover{ background:rgba(208,59,59,.10); border-color:rgba(208,59,59,.30); color:var(--neg); }
@media (max-width:720px){
.sb-trigger{ width:32px; height:32px; }
}
/* ============================================================
PERSISTENT RAIL
Wide enough and the drawer stops being a drawer: it parks open as a
column and the content sits beside it. Below the breakpoint it stays
the overlay it already was, because a 300px column on a laptop is
300px the charts do not get.
Gated on body.has-rail rather than the media query alone — the
sidebar is fixed-position, so on the sign-in and boot screens an
always-on rail would float over them. JS sets the class only while a
dashboard or admin panel is actually on screen.
============================================================ */
:root{ --rail-w: 292px; }
@media (min-width: 1100px){
body.has-rail .sidebar{
transform:none;
width:var(--rail-w);
box-shadow:none;
/* Above the sticky topbar (60), far below modals and the loader (9998+). */
z-index:61;
}
body.has-rail .sb-scrim{ display:none; }
/* The close button stays: it is what collapses the column. Only the
hamburger hides, and only while the column is actually on screen --
collapsed, it is the sole way back. */
body.has-rail .sb-trigger{ display:none; }
body.has-rail #app,
body.has-rail #admin-app,
body.has-rail #breeder-app{ padding-left:var(--rail-w); }
/* Collapsed: the column slides out and the dashboard takes the width.
Transform rather than display:none so it animates, and so nothing
inside it is torn out from under a focused element. */
body.has-rail.rail-collapsed .sidebar{ transform:translateX(-100%); box-shadow:var(--shadow-3); }
body.has-rail.rail-collapsed #app,
body.has-rail.rail-collapsed #admin-app,
body.has-rail.rail-collapsed #breeder-app{ padding-left:0; }
body.has-rail.rail-collapsed .sb-trigger{ display:inline-flex; }
/* The padding shift is what the charts inside are sized against, so it
moves with the sidebar instead of snapping ahead of it. */
body.has-rail #app,
body.has-rail #admin-app,
body.has-rail #breeder-app{ transition:padding-left .28s var(--ease); }
}
@media (prefers-reduced-motion:reduce){
body.has-rail #app,
body.has-rail #admin-app,
body.has-rail #breeder-app{ transition:none; }
}
/* Inline path/identifier inside an explanatory note. */
.insight-note code, .no-data code{
font-family:var(--font-mono); font-size:.92em;
background:var(--tint); border:1px solid var(--border-soft);
border-radius:5px; padding:1px 5px;
}
.no-data b, .insight-note b{ color:var(--label); }
/* ============ BREEDER NAV BUTTONS ============
These live inside the shared #sidebar alongside .tab-btn, so they only
need what .sb-nav does not already provide: the active state and the
"not ready yet" marker. Layout, spacing, and the whole open/close
behaviour come from the sidebar itself. */
.bnav-btn{
display:flex; align-items:center; gap:10px; width:100%;
padding:9px 11px; border:1px solid transparent; border-radius:9px;
background:transparent; color:var(--muted); cursor:pointer; text-align:left;
font-family:var(--font-ui); font-size:13px; font-weight:500;
transition:background .15s, color .15s, border-color .15s;
}
.bnav-btn svg{ width:17px; height:17px; flex-shrink:0; }
.bnav-btn:hover{ background:var(--tint); color:var(--label); }
.bnav-btn.on{
background:var(--accent); color:#fff; border-color:var(--accent);
box-shadow:0 1px 8px rgba(57,135,229,.32);
}
.bnav-btn.on svg{ color:#fff; }
/* Marks a section deliberately not built yet, so the nav stays honest. */
.bnav-tag{
margin-left:auto; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.6px;
text-transform:uppercase; padding:2px 6px; border-radius:99px;
background:var(--tint-mid); color:var(--muted-soft); border:1px solid var(--border-soft);
}
.bnav-btn.on .bnav-tag{ background:rgba(255,255,255,.2); color:#fff; border-color:transparent; }
.breeder-main{ padding:16px 20px 34px; }
@media (max-width: 720px){ .breeder-main{ padding:14px 14px 28px; } }
/* ---- Breeder overview: assigned = visited + not visited ----
Laid out as an equation rather than four independent tiles, because the
relationship between the numbers is the point. */
.bsum{ display:flex; align-items:stretch; gap:6px; flex-wrap:wrap; }
.bsum-cell{ flex:1 1 150px; min-width:130px; }
.bsum-lbl{
font-family:var(--font-mono); font-size:9px; letter-spacing:1px;
color:var(--muted-soft); text-transform:uppercase; margin-bottom:8px;
}
.bsum-val{ font-size:27px; font-weight:700; letter-spacing:-.6px; color:var(--label); line-height:1; font-variant-numeric:tabular-nums; }
.bsum-sub{ font-size:10.5px; color:var(--muted-soft); margin-top:6px; line-height:1.5; }
.bsum-op{
flex:0 0 auto; align-self:center; padding:0 4px;
font-size:19px; font-weight:600; color:var(--muted-soft); user-select:none;
}
.bsum-bar{
margin-top:16px; height:6px; border-radius:99px; overflow:hidden;
background:rgba(230,103,103,.22);
}
.bsum-bar span{ display:block; height:100%; border-radius:99px; background:#199e70; transition:width .4s var(--ease); }
@media (max-width: 720px){
.bsum-op{ display:none; }
.bsum-cell{ flex:1 1 45%; }
.bsum-val{ font-size:22px; }
}
/* ============ BREEDER PANEL — MOBILE ============
Most people open this dashboard on a phone, so the wide tables cannot
just be left to scroll sideways: a 10-column row is unreadable through a
360px viewport, and horizontal scrolling hides the very columns the page
exists to show. Below 720px each row becomes a card, with the header text
carried down per cell via data-label. */
@media (max-width: 720px){
.rtbl{ max-height:none; overflow:visible; border-radius:0; }
.rtbl table{ display:block; width:100%; }
.rtbl thead{
/* Hidden visually, kept for screen readers — the labels now live on
each cell, so a visible header row would just repeat them. */
position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap;
}
.rtbl tbody, .rtbl tr, .rtbl td{ display:block; width:100%; }
.rtbl tr{
border:1px solid var(--border-soft); border-radius:11px;
padding:12px 14px; margin-bottom:10px; background:var(--card);
}
.rtbl tr:last-child{ margin-bottom:0; }
/* A group header is a heading, not one of the cards it introduces. */
.rtbl tr.gap-grp-hd{ border:none; background:none; padding:0; margin:0 0 8px; }
/* A status tag rides after a name, in the card title and in the Advisor
cell alike. "(Promoted as RC)" is wide enough to push the row past the
viewport, because .lft holds its cell to nowrap — so inside a card the
tag is allowed to wrap and shrink instead of stretching the row. */
/* .lft pins a cell to nowrap so columns stay aligned on a wide table. Once
the table is a stack of cards there are no columns left to align, and the
nowrap only pushes long values — "BISHAL DEBSHARMA (Promoted as RC)" —
off the side of the screen. */
.rtbl td.lft{ white-space:normal; }
.rtbl td .u-tag{
display:inline-block; white-space:normal; max-width:100%; min-width:0;
overflow-wrap:anywhere; text-align:center;
}
.rtbl td.rt-key .u-tag{ margin-top:4px; }
.rtbl td{
display:flex; align-items:baseline; justify-content:space-between; gap:14px;
padding:6px 0; border:none; text-align:right; font-size:13px;
}
.rtbl td::before{
content:attr(data-label);
flex:0 0 auto; text-align:left;
font-family:var(--font-mono); font-size:10px; letter-spacing:.6px;
color:var(--muted-soft); text-transform:uppercase;
}
/* First cell is the row's identity: full width, no label, acts as a title. */
.rtbl td.rt-key, .rtbl tr td:first-child{
text-align:left; font-size:14px; font-weight:600; color:var(--label);
padding:0 0 9px; margin-bottom:7px; border-bottom:1px solid var(--border-soft);
}
.rtbl td.rt-key::before, .rtbl tr td:first-child::before{ display:none; }
/* Columns whose information is already summarised elsewhere on the card. */
.rtbl td.sm-hide, .rtbl th.sm-hide{ display:none; }
/* A repeated group key (the RC on every vacant row) is redundant on a wide
table but IS the card title on mobile, so it flips the other way. */
.rtbl td.rt-dup{ display:block; }
/* "Showing the worst N of M" footers span the row; keep them centred. */
.rtbl td[colspan]{ text-align:center; border:none; padding:6px 0; }
.rtbl td[colspan]::before{ display:none; }
/* ...but a group header also spans the row and is not a footer: it stays
left-aligned with its rule above, because it titles the cards below it. */
.rtbl .gap-grp-hd td[colspan]{
text-align:left; border-top:1px solid var(--border-soft);
border-bottom:1px solid var(--border-soft); padding:10px 12px;
margin:0 0 8px; border-radius:8px;
}
/* Filters: stack, and give every control a real touch target. */
#breeder-filter-grid .local-filter-row{ flex-direction:column; align-items:stretch; gap:12px; }
#breeder-filter-grid .fbox{ width:100%; }
#breeder-filter-grid select,
#breeder-filter-grid input[type=text]{ width:100%; min-height:44px; font-size:16px; }
#breeder-filter-grid .btn{ min-height:42px; }
/* Chip groups wrap into an even grid instead of one long scrolling line. */
#breeder-filter-grid .fbox > div[style*="flex"]{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:7px; }
#breeder-filter-grid .fbox > div[style*="flex"] .btn{ width:100%; justify-content:center; }
.breeder-main{ padding:12px 12px 26px; }
.bsum-bar{ margin-top:12px; }
}
/* iOS zooms the page in when a focused input is under 16px, which then leaves
the layout scrolled sideways. */
@media (max-width: 720px){
.breeder-main input, .breeder-main select{ font-size:16px; }
}
/* Breeder topbar on a phone: the label text costs more room than it earns,
so actions shrink to their glyphs and the dataset chip is dropped — the
same information already sits in the nav footer. */
@media (max-width: 720px){
#breeder-app .topbar{ flex-wrap:wrap; row-gap:9px; padding:9px 12px; }
#breeder-app .topbar-right{ width:100%; justify-content:space-between; gap:6px; }
#breeder-app .file-chip{ display:none; }
#breeder-app .panel-switch{ flex:1 1 auto; }
#breeder-app .panel-switch button{ flex:1; padding:9px 6px; font-size:11px; }
#breeder-app .topbar-right .btn{ min-height:40px; padding:0 11px; }
}
/* Very narrow phones: keep the three section tabs on one line by dropping the
nav's icons rather than letting the labels wrap or overflow. */
@media (max-width: 420px){
.bnav-btn{ padding:10px 10px; font-size:13px; }
.bnav-tag{ font-size:8px; padding:2px 5px; }
.bsum-cell{ flex:1 1 100%; }
.bsum-val{ font-size:24px; }
.kpi-strip{ grid-template-columns:repeat(2,1fr) !important; }
}
/* ---- Highlights: computed findings, ranked by what needs a decision ----
Severity carries a colour AND a glyph, never colour alone, so the ranking
survives a colour-blind reader and a greyscale print. */
.hl-list{ display:flex; flex-direction:column; gap:9px; }
.hl{
display:flex; align-items:flex-start; gap:12px;
padding:12px 14px; border-radius:11px;
border:1px solid var(--border-soft); background:var(--surface);
border-left-width:3px;
}
.hl-ico{
flex:0 0 auto; width:20px; height:20px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:700; margin-top:1px;
}
.hl-body{ flex:1; min-width:0; }
.hl-title{ font-size:13.5px; font-weight:600; color:var(--label); margin-bottom:3px; line-height:1.4; }
.hl-detail{ font-size:12px; color:var(--muted); line-height:1.6; }
.hl-detail b{ color:var(--label); }
.hl-act{ flex:0 0 auto; align-self:center; white-space:nowrap; }
.hl.crit{ border-left-color:var(--neg); }
.hl.crit .hl-ico{ background:rgba(230,103,103,.16); color:var(--neg); }
.hl.warn{ border-left-color:var(--gold); }
.hl.warn .hl-ico{ background:var(--gold-soft); color:var(--gold); }
.hl.good{ border-left-color:#199e70; }
.hl.good .hl-ico{ background:rgba(25,158,112,.14); color:#199e70; }
.hl.info{ border-left-color:var(--border-strong); }
.hl.info .hl-ico{ background:var(--tint-mid); color:var(--muted-soft); }
@media (max-width: 720px){
.hl{ flex-wrap:wrap; padding:11px 12px; }
.hl-act{ width:100%; margin-top:9px; justify-content:center; min-height:38px; }
}
/* Outlets reached that carry no coverage target — shown as bare counts, set
apart from the equation above so they read as context, not as a score. */
.bsum-also{
display:flex; align-items:center; gap:16px; flex-wrap:wrap;
margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft);
}
.bsum-also-lbl{
font-family:var(--font-mono); font-size:9px; letter-spacing:1px;
color:var(--muted-soft); text-transform:uppercase;
}
.bsum-also-item{ font-size:12.5px; color:var(--muted); }
.bsum-also-item b{ color:var(--label); font-weight:700; font-variant-numeric:tabular-nums; }
.bsum-also-item em{ font-style:normal; color:var(--muted-soft); font-size:11px; margin-left:5px; }
@media (max-width: 720px){
.bsum-also{ flex-direction:column; align-items:flex-start; gap:7px; }
}
/* ============ BREEDER FILTERS — PHONE ============
The full control set is ~770px tall, so on a phone it pushed every number
a screen and a half down the page. Same markup, two presentations: an
inline panel on a wide screen, and a summary bar plus a bottom sheet on a
narrow one. Chips keep the active filters visible even while the controls
are hidden — a dashboard quietly showing a subset is the worst state it
can be in. */
.bf-bar, .bf-chips, .bf-scrim, .bf-sheet-hd{ display:none; }
@media (max-width: 860px){
.bf-bar{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.bf-open{
flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
min-height:44px; font-size:14px; font-weight:600;
}
.bf-open svg{ width:16px; height:16px; }
.bf-count{
display:inline-flex; align-items:center; justify-content:center;
min-width:19px; height:19px; padding:0 5px; border-radius:99px;
background:var(--brand-pink); color:#fff; font-size:11px; font-weight:700;
}
.bf-bar .btn.ghost{ min-height:44px; }
.bf-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.bf-chip{
display:inline-flex; align-items:center; gap:5px;
padding:6px 9px; border-radius:99px; cursor:pointer;
background:var(--tint-mid); border:1px solid var(--border-soft);
color:var(--label); font-family:var(--font-ui); font-size:11.5px;
}
.bf-chip-k{ color:var(--muted-soft); font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; }
.bf-chip-x{ color:var(--muted-soft); font-size:10px; margin-left:1px; }
/* The sheet itself: off-screen until asked for. */
.bf-sheet{
position:fixed; left:0; right:0; bottom:0; z-index:9100;
max-height:82vh; overflow-y:auto; overscroll-behavior:contain;
background:var(--surface); border-top:1px solid var(--border);
border-radius:18px 18px 0 0; box-shadow:var(--shadow-3);
padding:0 14px 20px; transform:translateY(100%);
transition:transform .26s var(--ease); visibility:hidden;
}
.sheet-open .bf-sheet{ transform:none; visibility:visible; }
.bf-sheet-hd{
display:flex; align-items:center; justify-content:space-between; gap:10px;
position:sticky; top:0; background:var(--surface); z-index:1;
padding:15px 0 12px; margin-bottom:4px; border-bottom:1px solid var(--border-soft);
font-family:var(--font-mono); font-size:11px; letter-spacing:2px;
text-transform:uppercase; color:var(--muted-soft);
}
.bf-sheet-hd .btn{ min-height:38px; }
.bf-sheet .local-filters{ background:transparent; border:none; padding:0; margin:0; }
.bf-scrim{
display:block; position:fixed; inset:0; z-index:9099;
background:var(--scrim); backdrop-filter:blur(3px);
opacity:0; pointer-events:none; transition:opacity .22s var(--ease);
}
.sheet-open .bf-scrim{ opacity:1; pointer-events:auto; }
/* Chip groups inside the sheet get room to be tapped. */
.bf-chiprow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:7px; }
.bf-chiprow .btn{ width:100%; justify-content:center; min-height:42px; }
}
@media (prefers-reduced-motion:reduce){
.bf-sheet, .bf-scrim{ transition:none; }
}
/* ============ BREEDER PANEL — PHONE DENSITY ============ */
@media (max-width: 720px){
/* A card row of ten label/value pairs stacked one per line runs to ~320px.
Two columns halves that without shrinking the text: the values are short
(counts and percentages), it is the labels that need the room. */
.rtbl tr{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; padding:12px 13px; }
.rtbl td{ padding:5px 0; font-size:12.5px; }
.rtbl td.rt-key, .rtbl tr td:first-child{ grid-column:1 / -1; }
.rtbl td::before{ font-size:9.5px; }
/* Footers and empty-states must not be squeezed into one grid column. */
.rtbl td[colspan]{ grid-column:1 / -1; }
/* The visually-hidden header is still laid out at full table width, which
turned every row into its own horizontal scroll container. */
.rtbl thead{ overflow:hidden; max-width:1px; }
/* Touch targets. 29px buttons are below every platform guideline, and
these sit inside scrollable cards where a mis-tap scrolls instead. */
#breeder-app .btn.sm{ min-height:38px; padding:0 12px; }
#breeder-app .card-hd .btn.sm{ min-height:40px; }
#breeder-app .hl-act{ min-height:44px; }
#breeder-app .sb-trigger{ width:40px; height:40px; }
/* The KPI strip is a supporting detail on a phone; the summary above it
already carries the headline. Two columns rather than a tall stack. */
#breeder-kpi-strip{ grid-template-columns:repeat(2,1fr) !important; gap:9px; }
.kpi{ padding:12px 13px; }
.kpi-val{ font-size:19px; }
.kpi-lbl{ margin-bottom:6px; }
.kpi-sub{ font-size:9.5px; }
/* Section dividers eat vertical space on a page that is already long. */
#breeder-app .section-divider{ padding:10px 0 6px; }
#breeder-app .card-hd{ padding:13px 13px 0; }
#breeder-app .card-body{ padding:12px 13px 14px; }
}
/* Long values (advisor names, city names) were widening the grid rows past
the card, so each row became its own sideways scroller. Grid children need
min-width:0 explicitly — their default is min-content, which refuses to
shrink below the longest unbroken word. */
@media (max-width: 720px){
.rtbl td{ min-width:0; overflow-wrap:anywhere; }
.rtbl td::before{ flex-shrink:0; max-width:52%; overflow-wrap:anywhere; }
.rtbl table, .rtbl tbody, .rtbl tr{ max-width:100%; }
/* clip:rect keeps it reachable by screen readers while removing it from
layout entirely, so its full-width row cannot create a scroll container. */
.rtbl thead{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
/* Nudge the remaining sub-40px controls over the line. */
#breeder-app .topbar-right .btn{ min-height:42px; }
#breeder-app .btn.sm{ min-height:40px; }
.bf-sheet-hd .btn{ min-height:40px; }
.bf-chiprow .btn{ min-height:44px; }
}
/* The search box borrows .admin-select for its shape, but it is a text field,
not a dropdown — the chevron promised a menu that never appears. */
.bf-search{
background-image:none; padding-right:12px; cursor:text;
}