/* Klados sim — dendrimer Monte Carlo live monitor — 16:9 no-scroll shell
Auto-loaded by Dash from monitor/assets/. */
:root {
--bg: #f0f4fa;
--card: #ffffff;
--panel: #f5f8fd; /* left-panel background */
--input-bg: #ffffff;
--ink: #0f172a;
--muted: #64748b;
--line: #e2e8f0;
--accent: #4f46e5;
--green: #16a34a;
--red: #dc2626;
--sky: #0ea5e9;
--amber: #d97706;
--radius: 10px;
--rsm: 7px;
--pill: 999px;
--left-w: 345px;
--log-h: 112px;
--tog-h: 28px;
/* Tell the browser which palette this page is using so it paints native
form-control chrome (input text/caret, select text, autofill) to match
-- without this, some browsers keep rendering light-scheme (dark) text
by default even though --ink/--input-bg say otherwise, which is what
made dark-mode field/dropdown values unreadable. */
color-scheme: light;
}
/* Dark theme — set on by the nav toggle. Only the
surface tokens flip; the accent/status/semantic colours are shared. */
html[data-theme="dark"] {
--bg: #0b1120;
--card: #131a2a;
--panel: #0e1626;
--input-bg: #1a2336;
--ink: #e2e8f0;
--muted: #94a3b8;
--line: #283449;
color-scheme: dark;
}
* { box-sizing: border-box; }
html, body {
height: 100%;
margin: 0;
overflow: hidden;
background: var(--bg);
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 13px;
}
/* ── full-viewport shell ──────────────────────────────────────── */
/* .root = persistent top nav + the active page; each page fills the rest. */
.root {
display: flex; flex-direction: column;
height: 100vh; overflow: hidden;
}
.page-content { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.app {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
}
/* ── persistent top nav (links + theme toggle) ────────────────── */
.topnav {
display: flex; align-items: center; gap: 16px; flex-shrink: 0;
background: linear-gradient(135deg, #0b1f3f 0%, #123166 55%, #1d4ed8 100%);
color: #fff; padding: 7px 18px;
box-shadow: 0 2px 10px rgba(11,31,63,.45);
}
.topnav .nav-logo {
height: 26px; width: 26px; border-radius: 50%; object-fit: cover;
background: #f5f7fb; margin-right: -8px;
}
.topnav .nav-title { font-size: 15px; font-weight: 750; letter-spacing: .1px; }
.topnav .nav-links { display: flex; gap: 6px; }
.topnav a {
color: #fff; text-decoration: none; font-size: 12px; font-weight: 650;
padding: 4px 12px; border-radius: var(--pill);
background: rgba(255,255,255,.10); transition: background .12s;
}
.topnav a:hover { background: rgba(255,255,255,.24); }
.topnav .nav-spacer { flex: 1; }
#theme-toggle {
background: rgba(255,255,255,.16); color: #fff; height: 26px;
font-size: 11.5px; font-weight: 650; box-shadow: none;
}
#theme-toggle:hover { background: rgba(255,255,255,.30); filter: none; }
/* ── main: left + right ───────────────────────────────────────── */
.main-layout {
display: flex;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* ── left panel ──────────────────────────────────────────────── */
.left-panel {
width: var(--left-w);
min-width: 260px; /* clamp used by the drag resizer (resizer.js) */
max-width: 640px;
flex-shrink: 0;
overflow-y: scroll; /* always visible scrollbar, never layout-shift */
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
background: var(--panel);
}
/* ── Run tab: stacked top (parameters) / bottom (console) ────────
Its form has far more rows than fit comfortably beside anything else
(target/driver/seed/topology/potential/eff-method/cycles/sampling/...),
so it gets its own top/bottom layout instead of the shared left/right
.main-layout the other three pages use. Equal halves, each scrolling
independently so a tall form or a long console never squeezes the
other out. */
.run-layout {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
gap: 8px;
}
.run-top-panel {
flex: 1;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 6px;
background: var(--panel);
padding: 8px;
}
.run-bottom-panel {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 8px;
}
.run-bottom-panel .card {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.run-bottom-panel .run-console-box {
flex: 1;
height: auto; /* override the fixed 420px default -- fill the card instead */
min-height: 0;
}
/* ── draggable splitter between the parameter panel and the graphs ─ */
.resizer {
flex: 0 0 6px;
cursor: col-resize;
background: var(--line);
position: relative;
transition: background .12s;
}
.resizer:hover, .resizer.dragging { background: var(--accent); }
/* a subtle grip in the middle of the bar */
.resizer::before {
content: "";
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 2px; height: 26px; border-radius: 2px;
background: var(--muted); opacity: .55;
}
.resizer:hover::before, .resizer.dragging::before { background: #fff; opacity: .9; }
/* ── right panel ──────────────────────────────────────────────── */
.right-panel {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
padding: 8px 8px 0 8px;
gap: 7px;
}
/* toolbar to pick which graph panels are shown (dynamic) */
.graphs-toolbar {
display: flex; align-items: center; gap: 12px;
flex-shrink: 0;
padding: 2px 4px;
}
.graphs-toolbar-label {
font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em;
color: var(--muted); font-weight: 750;
}
.graphs-row {
flex: 1;
display: flex;
flex-direction: row; /* side by side; never stacks */
min-height: 0;
gap: 8px;
}
/* prevent any card from going so narrow the graph disappears */
.obs-card { min-width: 280px; }
.acf-card { min-width: 220px; }
.effpot-card { min-width: 280px; }
.topology-card { min-width: 280px; }
/* ── cards ────────────────────────────────────────────────────── */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 10px 12px;
box-shadow: 0 1px 4px rgba(15,23,42,.06);
}
.card h3 {
margin: 0 0 9px; font-size: 9.5px; text-transform: uppercase;
letter-spacing: .08em; color: var(--muted); font-weight: 750;
}
/* graph cards fill the flex row */
.obs-card, .acf-card, .effpot-card, .topology-card {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
min-width: 0;
}
.card-header-row {
display: flex; align-items: center; flex-shrink: 0;
gap: 10px; margin-bottom: 6px;
}
.card-header-row h3 { margin: 0; flex-shrink: 0; }
/* graph container stretches to remaining height */
.graph-wrap {
flex: 1;
min-height: 0;
overflow: hidden;
position: relative;
}
/* force every Plotly div inside to fill the wrapper */
.graph-wrap > div,
.graph-wrap .js-plotly-plot,
.graph-wrap .plot-container,
.graph-wrap .plotly {
height: 100% !important;
}
/* ── stat strip (mean / variance under multigraph) ────────────── */
.stat-strip {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 5px 0 2px;
flex-shrink: 0;
border-top: 1px solid var(--line);
min-height: 30px;
}
.stat-chip {
display: flex; align-items: center; gap: 7px;
background: var(--bg); border: 1px solid var(--line);
border-radius: var(--rsm); padding: 3px 9px; font-size: 11.5px;
}
.stat-chip-name { font-weight: 750; color: var(--accent); min-width: 34px; }
.stat-chip-val { color: var(--ink); }
.stat-chip-n { color: var(--muted); font-size: 10.5px; }
/* ── ACF info strip ───────────────────────────────────────────── */
.acf-info {
font-size: 11.5px; line-height: 1.5; flex-shrink: 0;
border-top: 1px solid var(--line);
padding-top: 5px; margin-top: 2px;
max-height: 82px; overflow-y: auto;
}
.acf-info p { margin: 0; }
.acf-info ul { margin: 2px 0 0 14px; padding: 0; }
.acf-info li { margin: 0; }
/* ── field rows ──────────────────────────────────────────────── */
.row { display: flex; flex-wrap: wrap; gap: 7px; align-items: flex-end; }
.row + .row { margin-top: 7px; }
.field { display: flex; flex-direction: column; gap: 3px; }
/* Trajectory force-width sliders: rc-slider marks + tooltip are positioned
below the 14px track and overflow their auto-height .field, colliding with
the viewer below. Reserve enough vertical room so the box fully contains the
slider (track + marks + bottom tooltip). */
.an-traj-slider-row { align-items: flex-start; margin-bottom: 10px; }
.an-traj-slider-row .field { min-height: 62px; }
.an-traj-slider-row .rc-slider { margin: 6px 6px 0; }
.field > label {
font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
color: var(--muted); font-weight: 750;
}
.btn-row { display: flex; gap: 8px; align-items: center; }
/* Let a button's own label wrap onto a second line instead of forcing the
button (and its card) wider or overflowing -- long labels like "＋ Add
to queue" otherwise fight the shared `button { white-space: nowrap }`
rule. Scoped to .btn-row (grouped action buttons like Run tab's Launch
box) rather than every button, so unrelated single-button spots keep
the default no-wrap sizing. */
.btn-row button {
white-space: normal;
text-align: center;
flex: 1 1 0;
min-width: 0;
}
/* ── titled sub-panel ("box") that groups related controls ─────── */
.field-group {
border: 1px solid var(--line);
border-radius: 9px;
padding: 9px 11px 11px;
background: var(--panel);
display: flex;
flex-direction: column;
gap: 7px;
box-shadow: inset 0 1px 2px rgba(15,23,42,.03);
}
.field-group + .field-group { margin-top: 8px; }
/* Run tab: the boxes (Target — with the Cloud-server fields folded in,
Physical parameters, Driver & run, Equilibration/dense/production,
Launch, Batch queue) flow next to each other and wrap based on window
width, the same "let it flow, don't force one per line" idea already
used for the fields inside each box's own .row. The parent's flex gap
replaces .field-group's own stacked margin-top (would double up with
the gap and misalign wrapped rows). Each box shares a common
flex-basis and grows/shrinks from there (rather than sizing purely to
its own content) so a row of boxes fills evenly instead of packing
raggedly with an odd gap at the end; min/max-width keep a tiny box
(Target) from going unreadably narrow or a wide one (Batch queue) from
stretching arbitrarily far on a huge monitor. align-items: stretch
makes every box on the SAME wrapped line match that line's tallest
box's height -- Target and Physical parameters are listed first so
they land on one line together on a typical window width and come out
the same height, and every other line of boxes gets the same even
treatment rather than sitting at ragged, ad-hoc heights. */
#run-params-view {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 10px;
}
#run-params-view > .field-group,
#run-params-view > .field-group + .field-group {
margin-top: 0;
flex: 1 1 260px;
min-width: 220px;
max-width: 640px;
}
.field-group-title {
display: flex; align-items: center; gap: 7px;
font-size: 9px; text-transform: uppercase; letter-spacing: .09em;
color: var(--muted); font-weight: 800;
margin-bottom: 1px;
}
/* small accent tick before the caption */
.field-group-title::before {
content: ""; width: 13px; height: 2.5px; border-radius: 2px;
background: linear-gradient(90deg, var(--accent), #7c3aed);
flex-shrink: 0;
}
/* ── inputs ──────────────────────────────────────────────────── */
input {
height: 30px; padding: 4px 8px; border: 1px solid var(--line);
border-radius: var(--rsm); font-size: 13px; color: var(--ink);
background: var(--input-bg); outline: none;
transition: border-color .15s, box-shadow .15s;
width: 100%;
}
input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(79,70,229,.14);
}
/* Dash wraps every dcc.Input's native in its own
`.dash-input-element` class, which sets `background: inherit` — a class
selector, so it out-specifies the plain `input` rule above and silently
falls back to whatever's behind it (effectively white), leaving text
unreadable in dark mode. Pin it back to the theme explicitly. */
input.dash-input-element {
background: var(--input-bg) !important;
color: var(--ink) !important;
}
/* Hide the native number-input spinner (+/- steppers) on all number fields. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none; margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* dcc.Dropdown (Dash 4's Radix-based rewrite -- NOT react-select; class
names below are what the component actually renders, verified against
the live DOM). The closed trigger is a