/* Vencor brand: blue #01187e, green #6fbd16 (from vencorh.co.za), Montserrat headings */
:root { --brand-blue:#01187e; --brand-green:#6fbd16; --bg:#f6f7fb; --panel:#ffffff; --fg:#0f172a; --muted:#64748b; --line:#e2e8f0; --accent:#01187e; --accent-fg:#ffffff; --ok:#5aa512; --warn:#d97706; --bad:#dc2626; --soft:#eef0f8; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b1020; --panel:#141a30; --fg:#e2e8f0; --muted:#94a3b8; --line:#2a3352; --accent:#6f8dff; --accent-fg:#0b1020; --ok:#6fbd16; --soft:#0f1530; } }
* { box-sizing:border-box; }
body { margin:0; font-family: system-ui, "Segoe UI", Arial, sans-serif; background:var(--bg); color:var(--fg); }
h1, h2, h3, .brand { font-family: Montserrat, "Segoe UI", system-ui, sans-serif; }
header { display:flex; align-items:center; gap:24px; padding:8px 20px; background:#fff; border-bottom:3px solid var(--brand-green); position:sticky; top:0; z-index:5; color:#0f172a; }
header .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; color:var(--brand-blue); }
header .brand img { height:30px; width:auto; display:block; }
.brand .muted, header .muted, header .sub { color:#64748b; font-weight:400; }
header label { color:#64748b; } header select { background:#fff; color:#0f172a; border-color:#e2e8f0; }
header button.ghost { color:var(--brand-blue); border-color:#e2e8f0; }
.muted { color:var(--muted); font-weight:400; }
nav a { color:#475569; text-decoration:none; padding:8px 12px; border-radius:8px; font-weight:600; }
nav a.active { color:var(--brand-blue); background:#eef0f8; box-shadow: inset 0 -3px 0 var(--brand-green); }
header .right { margin-left:auto; display:flex; gap:12px; align-items:center; }
main { padding:20px; max-width:1400px; margin:0 auto; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap:16px; }
h2 { margin:0 0 12px; font-size:18px; } h3 { margin:0 0 8px; font-size:15px; color:var(--muted); font-weight:600; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { padding:6px 8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
th:first-child, td:first-child, th.l, td.l { text-align:left; }
th { color:var(--muted); font-weight:600; position:sticky; top:52px; background:var(--panel); }
tr.click { cursor:pointer; } tr.click:hover { background:var(--soft); }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; }
.pill.ok { background:#dcfce7; color:#166534; } .pill.bad { background:#fee2e2; color:#991b1b; } .pill.warn { background:#fef3c7; color:#92400e; } .pill.grey { background:var(--soft); color:var(--muted); }
.big { font-size:40px; font-weight:800; } .kv { display:flex; gap:18px; flex-wrap:wrap; color:var(--muted); font-size:13px; } .kv b { display:block; color:var(--fg); font-size:18px; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:12px; }
label { font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
input, select, button { font: inherit; } input, select { padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--fg); }
input.num { width:90px; text-align:right; } input.sm { width:70px; }
button { padding:8px 14px; border:0; border-radius:8px; background:var(--accent); color:var(--accent-fg); font-weight:700; cursor:pointer; }
button.ghost { background:transparent; color:var(--accent); border:1px solid var(--line); } button.danger { background:var(--bad); color:#fff; } button.small { padding:4px 10px; font-size:13px; }
.hidden { display:none !important; }
.login .card { border-top:4px solid var(--brand-green); align-items:stretch; } .login .logo { height:40px; width:auto; align-self:flex-start; margin-bottom:6px; }
.pill.ok { background:#e8f5d6; color:#2f6c00; }
/* Viewers see everything but cannot change it */
body.readonly button:not(.ghost):not(#bGo):not(#rpGo):not(#bCsv):not(#rpCsv):not(#pwSave), body.readonly .small { display:none !important; }
body.readonly input, body.readonly select { pointer-events:none; opacity:.8; }
body.readonly #siteSel, body.readonly #bFrom, body.readonly #bTo, body.readonly #bRecipe, body.readonly #bOp, body.readonly #bAb, body.readonly #rpType, body.readonly #rpFrom, body.readonly #rpTo, body.readonly #rpFeed, body.readonly #pwCur, body.readonly #pwNew { pointer-events:auto; opacity:1; }
code { background:var(--soft); padding:2px 6px; border-radius:6px; }
.login { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg); z-index:10; }
.login .card { width:340px; display:flex; flex-direction:column; gap:10px; }
.err { color:var(--bad); font-size:13px; min-height:1em; }
.toast { position:fixed; bottom:20px; right:20px; background:var(--fg); color:var(--bg); padding:10px 14px; border-radius:10px; font-weight:600; }
.two { display:grid; grid-template-columns: 1fr 1fr; gap:16px; } @media (max-width: 1000px) { .two { grid-template-columns: 1fr; } }
.lcd { font-family: ui-monospace, Consolas, monospace; background:#052e16; color:#86efac; padding:8px; border-radius:8px; white-space:pre; font-size:14px; }
.progress { height:8px; background:var(--soft); border-radius:4px; overflow:hidden; } .progress i { display:block; height:100%; background:var(--accent); }
.rowdone td { color:var(--muted); } .rowcur { background:var(--soft); font-weight:700; }
.sub { font-size:12px; color:var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size:13px; }
.card .card { background:var(--soft); }
.relaybtns { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; } .relaybtns button.on { background:var(--brand-green); color:#052e16; border-color:transparent; }
table.raw td { font-family: ui-monospace, Consolas, monospace; font-size:12px; text-align:left; white-space:pre; }
.pill.sim { background:#e0e7ff; color:#3730a3; }
input:disabled, select:disabled, button:disabled { opacity:.5; cursor:default; }