/* VIP IB Dashboard — visual system lifted verbatim from report_ui.py (REPORT_TOKENS,
REPORT_BACKDROP_CSS, topbar/.bkopt, .card/.tbl, the query-box .ring/.anlzform).
Tokens and component classes are copied, not reinvented, so this reads as the same
product as the daily report. Dark is the default theme, same as the report. */
/* ---- tokens (verbatim from REPORT_TOKENS) --------------------------------------------- */
:root{
--bg:#f2f2f0;--fog:#f8f8f7;--mist:#e9e9e6;--line:#e2e2de;--line2:#d6d6d1;
--tx:#22242a;--mut:#5a5e68;--ash:#6b6f78;--smoke:#8a8e97;
--pos:#1a7f4b;--neg:#c0271b;--neg-soft:#f7eceb;--neg-ink:#8c2c22;--neg-line:#e8d4d1;
--warn:#9a6208;
--chip:#f2f2f3;
--accent:#B22333;--accent2:#3362ff;--c4:#b98a2c;
--serif:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
--sans:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
--shadow:rgba(4,23,43,.05) 0 0 0 1px,rgba(0,0,0,.1) 0 20px 25px -5px,rgba(0,0,0,.1) 0 8px 10px -6px;
--shadow-pop:oklab(0 0 0 / .05) 0 0 0 1px,rgba(0,0,0,.1) 0 8px 40px 0;
}
[data-theme="dark"]{
--bg:#141518;--fog:#191b1e;--mist:#1e2024;--line:#292c31;--line2:#32363c;
--tx:#f4f4f5;--mut:#9ba0aa;--ash:#8b8f98;--smoke:#787c85;
--pos:#5fc48d;--neg:#f0705c;--neg-soft:#2a2020;--neg-ink:#d99483;--neg-line:#3d2c29;
--warn:#e0a339;
--chip:#22252a;
--accent2:#7d95ff;--c4:#e0b25a;
--shadow:rgba(0,0,0,.5) 0 0 0 1px,rgba(0,0,0,.45) 0 20px 25px -5px;
--shadow-pop:rgba(0,0,0,.6) 0 0 0 1px,rgba(0,0,0,.5) 0 8px 40px 0;
}
/* Default dark backdrop the report hardcodes: graphite-raised, panels lifted a step above
the base. Set statically via data-backdrop on — there is no picker here, same as
the report since 2026-08-17. */
[data-theme="dark"][data-backdrop="graphite-raised"]{
--bg:#101114; --fog:#1d1f24; --mist:#23262c;
--line:#2f333a; --line2:#3a3f47; --chip:#26292f;}
/* ---- base ------------------------------------------------------------------------------ */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
body{font-family:var(--sans);color:var(--tx);-webkit-font-smoothing:antialiased;
font-size:14px;min-height:100vh}
a{color:var(--tx);text-decoration:none}
button{font-family:var(--sans);color:inherit}
table{border-collapse:collapse}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9999px}
.tabular{font-variant-numeric:tabular-nums}
/* Author `display` rules (e.g. .errbox{display:flex}) sit in the same origin as this and
win on source order, not specificity, so the UA's own [hidden]{display:none} loses to
any class also setting display — .addIbErr rendered as a visible empty bar with
`hidden` set until this was added. */
[hidden]{display:none!important}
/* ---- top bar (copies .topbar / .obrandc / .bkswitch / .bkopt / .tbtn) ------------------ */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding:12px 22px;background:var(--fog);border-bottom:1px solid var(--line);
position:sticky;top:0;z-index:40}
.topbar .grp{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.topbar .grp.end{justify-content:flex-end}
.obrandc{display:flex;align-items:center;gap:9px;min-width:0}
.obrandc .oword{font-family:var(--sans);font-size:15px;font-weight:700;
letter-spacing:.14em;color:var(--tx);white-space:nowrap}
.obrandc .oword em{font-style:normal;color:var(--accent)}
.bkswitch{display:flex;gap:4px;padding:4px;background:var(--chip);border-radius:9999px}
.bkopt{display:inline-flex;align-items:center;justify-content:center;min-width:64px;
padding:7px 18px;border-radius:9999px;border:0;background:transparent;cursor:pointer;
font:500 14px var(--sans);color:var(--mut);line-height:1.2;
transition:background .12s,color .12s}
.bkopt:hover{color:var(--tx);background:var(--mist)}
.bkopt[aria-current="true"]{background:var(--accent);color:#fff}
.bkopt[aria-current="true"]:hover{background:var(--accent);color:#fff}
.tbtn{display:inline-flex;align-items:center;gap:7px;background:transparent;
border:1px solid var(--line2);border-radius:9999px;padding:6px 14px;
font:400 14px var(--sans);color:var(--tx);cursor:pointer;white-space:nowrap}
.tbtn:hover{background:var(--mist)}
.tbtn .g{font-size:13px;line-height:1;display:inline-flex}
.tbtn:disabled{opacity:.5;cursor:default}
.tbtn:disabled:hover{background:transparent}
/* ---- layout ----------------------------------------------------------------------------- */
.main{max-width:1180px;margin:0 auto;padding:26px 22px 60px;display:flex;
flex-direction:column;gap:20px;min-width:0}
/* ---- card / table (verbatim from .card / .tbl) ------------------------------------------ */
.card{border:1px solid var(--line);border-radius:20px;background:var(--fog);
padding:20px 22px;overflow-x:auto;overflow-y:hidden;max-width:100%}
.card h2{margin:0 0 4px;font-family:var(--serif);font-weight:400;font-size:19px;
letter-spacing:-.2px}
.card .sub{font-size:13px;color:var(--mut);margin:0 0 16px}
.tbl{border:1px solid var(--line);border-radius:20px;overflow-x:auto;overflow-y:hidden}
.tbl table{width:100%;font-size:14.5px;min-width:640px}
.tbl thead tr{background:var(--fog);text-align:left;color:var(--ash);font-size:13px}
.tbl th{padding:11px 12px;font-weight:400;white-space:nowrap}
.tbl th:first-child{padding-left:20px}
.tbl th:last-child{padding-right:20px}
.tbl td{padding:11px 12px;border-top:1px solid var(--line);vertical-align:middle}
.tbl td:first-child{padding-left:20px}
.tbl td:last-child{padding-right:20px}
.tbl .r{text-align:right}
.tbl th.srt{cursor:pointer;user-select:none}
.tbl th.srt:hover{color:var(--tx)}
.tbl th.srt.on{color:var(--tx)}
.tbl th.srt .car{display:inline-block;width:9px;margin-left:2px;color:var(--mut)}
.tbl th.srt.on .car{color:var(--tx)}
.pos{color:var(--pos)}
.neg{color:var(--neg)}
.muted{color:var(--mut)}
.ser{font-family:var(--serif);font-weight:400}
/* ---- metric column alignment (Aki 2026-09-10, round 2: "not aligned these columns, make it left
aligned" — the first pass right-aligned them, which put the header text and the numbers over
DIFFERENT parts of the column since `.tbl thead tr` is left-aligned by default; that mismatch
was the actual complaint). Both header and cell for these three columns are now plain
left-aligned (no `.r` — see rowHtml()/th() in app.js), sharing the SAME left padding
(`.tbl th`/`.tbl td` above), so a header's left edge and its own cells' left edges coincide
regardless of digit count. `.tabular` (tabular-nums, set above) still keeps digits the same
width row to row. A width FLOOR per column still guards against a short value ($0) and a long
one ($361,267,291) reflowing the column as sort/data changes, and `white-space:nowrap` still
stops a wide number wrapping at narrow widths. nth-child counts | / | in the table's own
column order (Broker column removed 2026-09-10): 2 Net deposit, 3 FTD, 4 Volume. */
.tbl td.r,.tbl th.srt{white-space:nowrap}
.tbl th:nth-child(2),.tbl td:nth-child(2){min-width:112px}
.tbl th:nth-child(3),.tbl td:nth-child(3){min-width:56px}
.tbl th:nth-child(4),.tbl td:nth-child(4){min-width:112px}
.chip{display:inline-block;border:1px solid var(--line2);border-radius:8px;
padding:2px 9px;font:400 13px var(--sans);color:var(--tx);background:transparent}
.chip.warn{color:var(--warn);border-color:var(--warn)}
.pillbtn{background:var(--tx);color:var(--bg);border:none;border-radius:9999px;
padding:9px 20px;font:500 14px var(--sans);cursor:pointer;white-space:nowrap}
.pillbtn:hover{opacity:.9}
.pillbtn:disabled{opacity:.4;cursor:default}
.pillbtn:disabled:hover{opacity:.4}
.ghostbtn{background:transparent;border:1px solid var(--line2);border-radius:9999px;
padding:7px 15px;font:400 13.5px var(--sans);color:var(--tx);cursor:pointer;white-space:nowrap}
.ghostbtn:hover{background:var(--mist)}
.ghostbtn.small{padding:5px 12px;font-size:12.5px}
.ghostbtn.danger{color:var(--neg-ink);border-color:var(--neg-line)}
.ghostbtn.danger:hover{background:var(--neg-soft)}
/* the em-dash / empty panel (verbatim .gap) */
.gap{border:1px dashed var(--line2);border-radius:20px;padding:40px 24px;text-align:center;
color:var(--mut);font-size:14.5px;line-height:1.6}
.gap .why{font-size:13px;display:block;margin-top:6px}
/* error banner (same tokens as REPORT_ANALYSER_CSS .anlzerr) */
.errbox{font-size:13.5px;color:var(--neg-ink);background:var(--neg-soft);
border:1px solid var(--neg-line);border-radius:12px;padding:14px 16px;
display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* ---- Add-an-IB card --------------------------------------------------------------------- */
.addib-row{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.addib-row .ringwrap{flex:1 1 300px;min-width:0}
/* position:relative on the label, not just its hidden input: a visually-hidden
position:absolute input with no positioned ancestor takes the INITIAL containing
block (the viewport) for its containing block, so nested overflow:auto ancestors
(.card, .tbl) stop clipping it for document.scrollWidth purposes even though it
never paints visibly — a table row far down a horizontally-scrollable table then
drags the whole document's scrollable width out with it (measured: 643px at a
390px viewport before this fix, same bug on the per-row upload label below). */
.addib-row .filelabel{position:relative;cursor:pointer;flex:none}
.addib-row .filelabel input{position:absolute;width:1px;height:1px;opacity:0;
overflow:hidden;clip:rect(0 0 0 0)}
.addib-row .filelabel.has-file{color:var(--tx);border-color:var(--tx)}
.addib-note{font-size:12.5px;color:var(--mut);margin-top:9px}
.addib-err{margin-top:10px}
/* ---- query-box ring, verbatim from REPORT_ANALYSER_CSS ---------------------------------- */
@property --ring-angle{syntax:'';initial-value:0deg;inherits:false}
.ring{position:relative;border-radius:16px;
--ring-dur:8s;--glow-op:.6;--glow-blur:16px;--glow-inset:-5px}
.ring::before{content:'';position:absolute;inset:var(--glow-inset);border-radius:inherit;z-index:0;
pointer-events:none;
background:conic-gradient(from var(--ring-angle),
transparent 0 55%,var(--accent2) 70%,var(--accent) 82%,var(--c4) 90%,transparent 100%);
filter:blur(var(--glow-blur));opacity:var(--glow-op);
animation:ring-spin var(--ring-dur) linear infinite,ring-breathe 6s ease-in-out infinite}
.ring .anlzform::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
pointer-events:none;z-index:1;background:var(--line2);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude}
.ring .anlzform::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
pointer-events:none;z-index:2;opacity:.95;
background:conic-gradient(from var(--ring-angle),
transparent 0 55%,var(--accent2) 70%,var(--accent) 82%,var(--c4) 90%,transparent 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:ring-spin var(--ring-dur) linear infinite}
@keyframes ring-spin{to{--ring-angle:360deg}}
@keyframes ring-breathe{0%,100%{opacity:calc(var(--glow-op) * .78)}50%{opacity:var(--glow-op)}}
@media (prefers-reduced-motion:reduce){.ring::before,.ring .anlzform::after{animation:none}}
.anlzform{position:relative;border-radius:16px;background:var(--fog);
border:1px solid var(--line2);height:52px;z-index:1}
.anlzform input{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;
background:transparent;border:0;border-radius:16px;padding:0 18px;
color:var(--tx);font:400 14.5px/1.3 var(--sans);z-index:2}
.anlzform input::placeholder{color:var(--mut)}
.anlzform input:focus{outline:none}
.anlzform input:disabled{opacity:.6}
/* ---- list card --------------------------------------------------------------------------- */
.listhd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
flex-wrap:wrap;margin-bottom:14px}
.listhd .monthlbl{font-size:13px;color:var(--mut)}
/* Update button + "figures from …" line (snapshot model, 2026-09-10). Own row-within-a-row so it
wraps under the month label at narrow widths instead of forcing .listhd itself to overflow. */
.listhd-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.listhd-right .snaplbl{font-size:12.5px;color:var(--mut);white-space:nowrap}
.listhd-right #updateBtn{display:inline-flex;align-items:center;gap:7px}
.listhd-right #updateBtn:disabled{cursor:default;opacity:.6}
.listhd-right #updateBtn:disabled:hover{background:transparent}
.listhd-right #updateBtn .anlzorb{width:14px;height:14px}
.updateerr{font-size:12.5px;color:var(--neg-ink);margin:-6px 0 12px}
.confirmwrap{display:inline-flex;gap:6px}
.flagrow td{background:color-mix(in srgb,var(--warn) 7%,transparent)}
.rowname{display:flex;flex-direction:column;gap:2px;min-width:0}
.rowname .n{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
max-width:260px}
.rowname .since{font-size:12px;color:var(--mut)}
/* position:relative here for the same reason as .filelabel above — without it this
row's hidden file input escaped the .tbl/.card overflow clip entirely and dragged
document.scrollWidth out to the table's full unscrolled width. */
.agr-missing{position:relative}
.agr-missing input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;
clip:rect(0 0 0 0)}
/* ---- states ------------------------------------------------------------------------------ */
.loadrow{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:14px;
padding:26px 4px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--mut);flex:none;
animation:pulseop 1.1s ease-in-out infinite}
@keyframes pulseop{0%,100%{opacity:.25}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none;opacity:.6}}
/* ---- per-row metric loading orb (Aki 2026-09-10: no $0/0/0 while /api/metrics is still in
flight) — ported from report_ui.py's .anlzorb/.orbw/.orbscan (originally npm thinking-orbs,
state="searching"), scaled from the report's 64px box down to fit a table cell; the dot
lattice itself is generated in app.js's orbHtml() at the smaller radius, not CSS-scaled. */
.metricorb{display:inline-flex;align-items:center;justify-content:center;height:20px;
vertical-align:middle}
.anlzorb{width:20px;height:20px;flex:none;perspective:80px}
.orbw{position:relative;width:100%;height:100%;transform-style:preserve-3d;
animation:orbspin 7s linear infinite}
.orbw>i{position:absolute;top:50%;left:50%;border-radius:50%;background:var(--tx)}
.orbscan{position:absolute;inset:0;transform-style:preserve-3d;animation:orbscan 1.8s linear infinite}
.orbscan>i{position:absolute;top:50%;left:50%;border-radius:50%;background:var(--tx);
box-shadow:0 0 3px var(--tx)}
@keyframes orbspin{to{transform:rotateY(360deg)}}
@keyframes orbscan{to{transform:rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.orbw,.orbscan{animation:none}}
.metricerr{color:var(--mut);font-size:12.5px;font-weight:400;font-variant-numeric:normal}
/* ---- responsive: no horizontal scroll at 390px ------------------------------------------- */
@media (max-width:820px){
.obrandc .oword{letter-spacing:.06em}
}
@media (max-width:480px){
.topbar{padding:10px 14px}
.main{padding:18px 12px 44px;gap:16px}
.card{padding:16px 14px;border-radius:16px}
/* Stack by wrapping onto new flex lines, NOT flex-direction:column — .ringwrap's
`flex:1 1 300px` sets its flex-basis on the MAIN axis, and swapping to column would
turn that 300px into a forced min-HEIGHT, blowing the ring's glow layer out to
300px+ tall (seen on the first 390px pass: a full-height colour blob under the
input). Forcing ringwrap's own basis to 100% keeps flex-basis meaning width and
just pushes the buttons onto their own line beneath it. */
.addib-row .ringwrap{flex:1 1 100%}
.addib-row .filelabel,.addib-row .pillbtn{flex:1 1 auto;justify-content:center}
.rowname .n{max-width:130px}
}
|