:root {
    --ft-bg: #eef2f6;
    --ft-panel: #ffffff;
    --ft-ink: #0f172a;
    --ft-muted: #64748b;
    --ft-line: #e2e8f0;
    --ft-head: #0b1f33;
    --ft-accent: #0369a1;
    --ft-water: #2563eb;
    --ft-ok: #15803d;
    --ft-ok-bg: #dcfce7;
    --ft-warn: #b45309;
    --ft-warn-bg: #fef3c7;
    --ft-bad: #b91c1c;
    --ft-bad-bg: #fee2e2;
    --ft-radius: 10px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--ft-bg);
    color: var(--ft-ink);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
}

h1 { font-size: 1.35rem; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }
a { color: var(--ft-accent); }

/* ---- Shell ---- */
.ft-app { min-height: 100vh; display: flex; flex-direction: column; }
.ft-header {
    display: flex; align-items: center; gap: 1.5rem; padding: .55rem 1.25rem;
    background: var(--ft-head); color: #e2e8f0; flex-wrap: wrap;
}
.ft-brand { display: flex; align-items: center; gap: .75rem; color: #7dd3fc; text-decoration: none; font-size: 1.15rem; }
/* The logo is blue on transparent, so it sits on a white plate to read against the dark header. */
.ft-logo { height: 34px; background: #fff; padding: 3px 8px; border-radius: 6px; box-sizing: content-box; }
.ft-brand span { color: #f8fafc; }
.ft-nav { display: flex; gap: .25rem; }
.ft-nav a { color: #cbd5e1; text-decoration: none; padding: .4rem .75rem; border-radius: 6px; }
.ft-nav a:hover { background: rgba(255, 255, 255, .08); }
.ft-nav a.active { background: rgba(125, 211, 252, .16); color: #fff; }
.ft-header-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ft-sim-menu { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.ft-chip {
    background: rgba(255, 255, 255, .07); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px; padding: .2rem .6rem; font-size: .78rem; cursor: pointer;
}
.ft-chip:hover { background: rgba(255, 255, 255, .16); }
.ft-bench-name { color: #94a3b8; font-size: .85rem; }
.ft-main { flex: 1; padding: 1rem 1.25rem 2rem; max-width: 1720px; width: 100%; margin: 0 auto; }
.ft-popout { padding: .9rem; min-height: 100vh; }

/* ---- Building blocks ---- */
.ft-card { background: var(--ft-panel); border: 1px solid var(--ft-line); border-radius: var(--ft-radius); padding: 1rem; }
.ft-card + .ft-card { margin-top: 1rem; }
.ft-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.ft-sub { color: var(--ft-muted); margin: 0; }
.ft-muted { color: var(--ft-muted); }
.ft-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ft-spacer { flex: 1; }

.ft-badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .3px; }
.ft-badge-sim { background: #f59e0b; color: #1c1917; }
.ft-pass { background: var(--ft-ok-bg); color: var(--ft-ok); }
.ft-fail { background: var(--ft-bad-bg); color: var(--ft-bad); }
.ft-aborted { background: var(--ft-warn-bg); color: var(--ft-warn); }
.ft-idle { background: #e2e8f0; color: #334155; }
.ft-running { background: #dbeafe; color: #1d4ed8; }

.ft-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.ft-tile { background: var(--ft-panel); border: 1px solid var(--ft-line); border-radius: var(--ft-radius); padding: .6rem .8rem; }
.ft-tile .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--ft-muted); }
.ft-tile .v { font-size: 1.35rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.ft-tile .u { font-size: .8rem; color: var(--ft-muted); margin-left: .2rem; }

.ft-bench-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 1rem; align-items: start; }
@media (max-width: 1200px) { .ft-bench-layout { grid-template-columns: 1fr; } }

.ft-progress { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.ft-progress > div { height: 100%; background: var(--ft-water); transition: width .2s linear; }

.ft-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ft-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--ft-muted); padding: .35rem .4rem; border-bottom: 1px solid var(--ft-line); }
.ft-table td { padding: .4rem; border-bottom: 1px solid var(--ft-line); }
.ft-table td.num, .ft-table th.num { text-align: right; }

.ft-log { max-height: 220px; overflow: auto; font-size: .8rem; color: #334155; background: #f8fafc; border: 1px solid var(--ft-line); border-radius: 6px; padding: .4rem .6rem; }
.ft-log div { padding: .1rem 0; }
.ft-log time { color: var(--ft-muted); margin-right: .4rem; font-variant-numeric: tabular-nums; }

.ft-alarm { background: var(--ft-bad-bg); color: var(--ft-bad); border: 1px solid #fecaca; border-radius: 8px; padding: .5rem .75rem; margin-bottom: .75rem; font-weight: 600; }

/* ---- Pop-out panels ---- */
.ft-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.ft-panel-head h1 { font-size: 1.1rem; }
.ft-display {
    background: #052e16; color: #4ade80; border-radius: 8px; padding: .6rem .9rem; text-align: right;
    font: 600 2.4rem "Consolas", "Courier New", monospace; font-variant-numeric: tabular-nums; letter-spacing: 1px;
}
.ft-display small { font-size: .9rem; color: #86efac; margin-left: .35rem; }
.ft-display.amber { background: #1c1203; color: #fbbf24; }
.ft-kv { display: grid; grid-template-columns: 1fr auto; gap: .3rem .75rem; margin: .75rem 0; font-variant-numeric: tabular-nums; }
.ft-kv span:nth-child(odd) { color: var(--ft-muted); }
.ft-kv span:nth-child(even) { font-weight: 600; text-align: right; }
.ft-lamp { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; margin-right: .35rem; vertical-align: middle; }
.ft-lamp.ok { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.ft-lamp.warn { background: #f59e0b; }
.ft-lamp.bad { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.ft-section { border-top: 1px solid var(--ft-line); padding-top: .75rem; margin-top: .75rem; }
.ft-section h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .6px; color: var(--ft-muted); }
.ft-valve-card { border: 1px solid var(--ft-line); border-radius: 8px; padding: .6rem .7rem; margin-bottom: .6rem; }
.ft-valve-card.fault { border-color: #fca5a5; background: #fff5f5; }
.ft-bar { height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin: .35rem 0; }
.ft-bar > div { height: 100%; transition: width .15s linear; }
.ft-note { font-size: .8rem; color: var(--ft-muted); margin-top: .5rem; }

.ft-odo { display: inline-flex; gap: 3px; background: #111827; padding: 6px; border-radius: 8px; }
.ft-odo span { display: inline-block; width: 1.6rem; text-align: center; background: #1f2937; color: #f9fafb; font: 700 1.9rem "Consolas", monospace; border-radius: 3px; }
.ft-odo span.dec { background: #b91c1c; }

.ft-estop {
    width: 100%; padding: .9rem; border-radius: 50px; border: 4px solid #facc15; background: #dc2626; color: #fff;
    font-weight: 800; font-size: 1.1rem; letter-spacing: 1px; cursor: pointer;
}
.ft-estop.active { background: #7f1d1d; animation: ft-pulse 1s infinite; }
@keyframes ft-pulse { 50% { opacity: .6; } }

/* ---- Blazor defaults ---- */
#blazor-error-ui {
    background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); display: none;
    left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
h1:focus, h1:focus-visible { outline: none; }

/* ---- Wide tables ---- */
.ft-table-scroll { overflow-x: auto; }
.ft-meter-table td { padding: .2rem .3rem; vertical-align: middle; }
.ft-bad-text { color: var(--ft-bad); font-weight: 700; }
.ft-reading-list { display: grid; grid-template-columns: auto 1fr 150px auto; gap: .35rem .6rem; align-items: center; }

/* ---- Charts (TimeChart). Series colours: delivered #2a78d6, registered #eb6834, demand ink dashed. ---- */
.ft-chart { position: relative; }
.ft-chart svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.ft-chart .grid { stroke: #e2e8f0; stroke-width: 1; }
.ft-chart .axis { stroke: #94a3b8; stroke-width: 1; }
.ft-chart .tick { font-size: 11px; fill: var(--ft-muted); font-variant-numeric: tabular-nums; }
.ft-chart .end-label { font-size: 11px; fill: #334155; font-variant-numeric: tabular-nums; }
.ft-chart .lane-label { font-size: 11px; fill: #334155; }
.ft-chart .lane-bar { fill: #5b8fd6; }
.ft-chart .lane-bar:hover { fill: #1e5bb0; }
.ft-chart .cursor { stroke: #f59e0b; stroke-width: 2; }
.ft-chart .crosshair { stroke: #64748b; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.ft-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: #334155; margin-bottom: .25rem; }
.ft-legend i { display: inline-block; width: 18px; margin-right: .35rem; vertical-align: middle; }
.ft-chart-tip {
    position: absolute; pointer-events: none; background: #0f172a; color: #f8fafc; border-radius: 6px;
    padding: .4rem .55rem; font-size: .78rem; min-width: 160px; box-shadow: 0 4px 14px rgba(15, 23, 42, .25); z-index: 5;
}
.ft-chart-tip .t { font-weight: 700; margin-bottom: .2rem; font-variant-numeric: tabular-nums; }
.ft-chart-tip div:not(.t) { display: grid; grid-template-columns: 10px 1fr auto; gap: .4rem; align-items: center; }
.ft-chart-tip i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.ft-chart-tip b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Scenarios ---- */
.ft-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.ft-template { display: flex; flex-direction: column; gap: .5rem; }
.ft-template h3 { margin: 0; font-size: 1rem; }
.ft-template p { margin: 0; color: var(--ft-muted); font-size: .85rem; }
.ft-stats { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .82rem; color: #334155; font-variant-numeric: tabular-nums; }
.ft-stats b { color: var(--ft-ink); }
.ft-grow { flex: 1; }
.ft-edit-table td { padding: .2rem .25rem; vertical-align: middle; }
.ft-edit-table th { white-space: nowrap; }
.ft-warn-text { color: var(--ft-warn); font-weight: 600; }
.ft-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 1100px) { .ft-two { grid-template-columns: 1fr; } }