/* ==== Simulator (/simulator): live view and control of the TTech PI Data Simulator (sim-) ====
   Same look as the rest of OneStop (app.css: panels, kpis, toolbar, table, error, notice, grid-2). Loaded by
   Components\App.razor for every page, after app.css. The truck and drill states take the colours of the simulator's own
   status page (client Apps\Simulator\Sim.cs, StateColor, set inline). Classes built in the markup (grep the prefix):
   sim-chip on / paused / off / bad, sim-tag live / restart, sim-unit on / faded (SiteMap, LevelMap, WellField; Highlight),
   sim-level hidden (LevelMap), sim-flow-box on / idle / bad / lost (Plant), sim-mine on / warn / bad / off / chosen
   (All mines). */
:root {
  --sim-good: #2f7d32;
  --sim-good-soft: #e6f2e6;
  --sim-bad: #b23b2e;
  --sim-bad-soft: #fbe7e4;
  --sim-paused: #9a6a00;
  --sim-paused-soft: #fdf3dc;
  --sim-pit: #ece6d6;
  --sim-pit-line: #cfc4a6;
  --sim-road: #b9ae90;
  --sim-ramp: #8d7f56;
  --sim-mono: Consolas, "Cascadia Mono", "SFMono-Regular", Menlo, monospace;
}
/* Dark theme (html[data-theme="dark"]): the states lightened, the open pit and its roads darkened */
:root[data-theme="dark"] {
  --sim-good: #5cc260;
  --sim-good-soft: #1d3420;
  --sim-bad: #ee8a7e;
  --sim-bad-soft: #3e2220;
  --sim-paused: #e6b552;
  --sim-paused-soft: #3a3017;
  --sim-pit: #2c2820;
  --sim-pit-line: #4d4636;
  --sim-road: #6e6650;
  --sim-ramp: #a99a6c;
}

.sim-page { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* The simulator does not answer: the last values stay, greyed */
.sim-stale { opacity: 0.55; filter: grayscale(0.6); }
.sim-mono { font-family: var(--sim-mono); font-size: 0.82rem; }
.sim-good-text { color: var(--sim-good); font-weight: 700; }
.sim-bad-text { color: var(--sim-bad); font-weight: 700; }
.sim-back { display: inline-flex; align-items: center; color: var(--muted); font-size: 0.84rem; font-weight: 700; text-decoration: none; }
.sim-back:hover { color: var(--accent); }

/* ---- Toolbar badge, chips, pills ---- */
.sim-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  font-size: 0.84rem; font-weight: 800; white-space: nowrap;
}
.sim-badge.on { background: var(--sim-good-soft); color: var(--sim-good); }
.sim-badge.off { background: var(--sim-bad-soft); color: var(--sim-bad); }
.sim-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sim-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--chip);
  color: var(--muted); font-size: 0.8rem; font-weight: 700; white-space: nowrap;
}
.sim-chip strong { color: var(--text); }
.sim-chip.on { background: var(--sim-good-soft); color: var(--sim-good); }
.sim-chip.paused { background: var(--sim-paused-soft); color: var(--sim-paused); }
.sim-chip.bad { background: var(--sim-bad-soft); color: var(--sim-bad); }
.sim-chip .mud-icon-root { font-size: 1rem; }
.sim-pill {
  display: inline-block; padding: 1px 9px; border-radius: 999px; color: #ffffff; font-size: 0.76rem; font-weight: 700;
  white-space: nowrap;
}
.sim-fault { display: inline-flex; align-items: center; gap: 3px; color: var(--sim-bad); font-weight: 700; white-space: nowrap; }
.sim-fault .mud-icon-root { font-size: 1rem; }
.sim-fault small { color: var(--muted); font-weight: 600; }
.sim-developing { color: var(--sim-paused); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.sim-tag {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 0.7rem; font-weight: 800;
  vertical-align: 1px; white-space: nowrap;
}
.sim-tag.live { background: var(--sim-good-soft); color: var(--sim-good); }
.sim-tag.restart { background: var(--sim-paused-soft); color: var(--sim-paused); }

/* ---- Headline numbers and small statistics ---- */
.kpi .value.sim-kpi-text { font-size: 1.3rem; }
.kpi .value.sim-kpi-num { font-size: 1.5rem; }
.sim-page .kpi .value small { color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.sim-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px 16px; }
.sim-stats b { display: block; font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.sim-stats span { color: var(--muted); font-size: 0.76rem; font-weight: 700; }
.sim-stats .bad b { color: var(--sim-bad); }
.sim-list { margin: 10px 0 0; padding-left: 18px; font-size: 0.86rem; line-height: 1.6; }
.sim-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 0.86rem; }
.sim-dl dt { color: var(--muted); font-weight: 700; }
.sim-dl dd { margin: 0; overflow-wrap: anywhere; }
.sim-progress { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.sim-progress span { display: block; height: 100%; background: var(--accent); }

/* ---- Layout: the map and its side panels ---- */
.sim-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; align-items: start; }
.sim-stack { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
@media (max-width: 1100px) { .sim-grid { grid-template-columns: minmax(0, 1fr); } }
/* Live page (sim-live): the map panel and the side column share one height, the one the screen leaves once the bars,
   toolbar, numbers, modules and MQTT clients are drawn (--sim-live-chrome, about 450 px), between 320 and 820 px, so the
   whole page fits without scrolling when the browser shows about 1050 px of height or more. The drawing fills its panel
   (centred, in proportion); the side column scrolls by itself when a mine has many modules (Kalahari). In one column (a
   narrow screen) both take their natural height and the page scrolls. */
@media (min-width: 1101px) {
  .sim-live { --sim-live-chrome: 450px; --sim-live-h: clamp(320px, calc(100vh - var(--sim-live-chrome)), 820px); }
  .sim-live .sim-grid { align-items: stretch; }
  .sim-live .sim-live-map { display: flex; flex-direction: column; height: var(--sim-live-h); }
  .sim-live .sim-live-map .sim-map { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; }
  .sim-live .sim-live-side { height: var(--sim-live-h); overflow-y: auto; padding-right: 2px; }
}
.sim-live-modules, .sim-live-clients { padding: 8px 14px; }
/* The MQTT clients stay on one line (eleven adapter components on VMAVEVAPI): it scrolls sideways instead of growing */
.sim-live-clients .sim-chips { flex-wrap: nowrap; overflow-x: auto; }
.sim-chips-title { margin-right: 4px; font-size: 0.86rem; font-weight: 800; }
.table.sim-compact th, .table.sim-compact td { padding-top: 5px; padding-bottom: 5px; }
.sim-live .sim-list { margin-top: 6px; line-height: 1.5; }
.sim-live .panel p { margin: 6px 0 0; }

/* ---- Tables ---- */
.table td.sim-go { width: 28px; color: var(--muted); }
.table tr.sim-bad-row td { color: var(--muted); background: var(--sim-bad-soft); }
.table td.sim-actions { width: 1%; text-align: right; white-space: nowrap; }

/* ---- The site map (SiteMap.razor) ---- */
.sim-map { display: block; width: 100%; height: auto; }
/* The other pages (a fleet, a unit, Underground): the drawing keeps its proportions but never grows taller than about
   two thirds of the screen, so a full-width panel on a wide screen does not push the table and the units out of view */
.sim-page:not(.sim-live) .sim-map:not(.sim-wellfield) { max-height: min(640px, 66vh); }
.sim-map .sim-pit { fill: var(--sim-pit); stroke: var(--sim-pit-line); stroke-width: 2; }
.sim-map .sim-road { fill: none; stroke: var(--sim-road); stroke-linecap: round; stroke-linejoin: round; }
.sim-map .sim-road.ramp { stroke: var(--sim-ramp); }
.sim-map .sim-area { fill: none; stroke: var(--muted); stroke-dasharray: 4 3; stroke-width: 1.5; }
.sim-map .sim-place { fill: var(--muted); }
.sim-map .sim-place-name { fill: var(--muted); font-size: 13px; }
/* A unit glides between two reads (the refresh of the pages: 2.5 s) */
.sim-map .sim-unit { cursor: pointer; transition: transform 2.5s linear, opacity 0.3s; }
.sim-map .sim-unit .sim-shape { stroke: var(--panel); stroke-width: 1.2; }
.sim-map .sim-unit:hover .sim-shape { stroke: var(--text); stroke-width: 2; }
.sim-map .sim-unit-name { font-size: 14px; font-weight: 700; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.sim-map .sim-unit-fault { fill: var(--sim-bad); stroke: var(--panel); stroke-width: 1.2; }
.sim-map .sim-unit.faded { opacity: 0.3; }
.sim-map .sim-unit.on .sim-shape { stroke: var(--text); stroke-width: 2.5; }
@media (prefers-reduced-motion: reduce) { .sim-map .sim-unit { transition: none; } }
.sim-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; color: var(--muted); font-size: 0.76rem; font-weight: 600; }
.sim-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 50%; vertical-align: -1px; }
.sim-legend i.sim-legend-fault { background: var(--sim-bad); box-shadow: 0 0 0 1.5px var(--panel) inset; }
.sim-legend .sim-legend-note { color: var(--faint); }

/* ---- The level map (LevelMap.razor) and the well field (WellField.razor) ---- */
.sim-map .sim-ramp { fill: none; stroke: var(--sim-ramp); stroke-width: 4; }
.sim-map .sim-shaft { fill: var(--accent); }
.sim-map .sim-road.minor { opacity: 0.8; }
.sim-map .sim-level { transition: opacity 0.3s; }
.sim-map .sim-level:not(.production) { opacity: 0.6; }
.sim-map .sim-level.hidden { opacity: 0.08; }
/* The well field is taller than wide: at most 560 px high (centred), as on the simulator's own page */
.sim-map.sim-wellfield { max-height: 560px; }
/* Buttons of a choice inside a page (levels of the level map, views of the Live map, fleets of Underground) */
.sim-levels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.panel-head .sim-levels, .toolbar .sim-levels { margin-bottom: 0; }
/* A panel title with a long hint (Recent actions of Demo events): the hint goes under the title in a narrow panel */
.panel-head.sim-head-wrap { flex-wrap: wrap; }
.panel-head.sim-head-wrap h2 { white-space: nowrap; }
.sim-levels button, .sim-levels a {
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--muted);
  font: inherit; font-size: 0.78rem; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.sim-levels button:hover, .sim-levels a:hover { color: var(--text); border-color: var(--accent); }
.sim-levels .on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* ---- App bar: the simulated mine ---- */
/* The mine selector of the Simulator (SimulatorHeader): a button that looks like the other tabs, in the accent colour */
.apptab.sim-mine-tab { gap: 4px; margin-left: 8px; border-top: 0; border-right: 0; border-left: 0; background: none; color: var(--accent); font-family: inherit; cursor: pointer; }
.apptab.sim-mine-tab .mud-icon-root { font-size: 1rem; }
/* The app bar has many tabs (the fleets of the mine): they wrap on a narrow screen instead of widening the page */
.apptabs:has(.sim-mine-tab) { flex-wrap: wrap; max-width: 100%; }
.apptabs:has(.sim-mine-tab) .apptab { min-height: 34px; }

/* ---- Plant: hoists and the flowsheet of each area ---- */
.sim-hoists { margin-top: 10px; }
.sim-plant-chips { margin-top: 10px; }
.sim-shaft-bar { position: relative; width: 140px; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--chip); }
.sim-shaft-bar span { position: absolute; top: -3px; width: 4px; height: 12px; margin-left: -2px; border-radius: 2px; background: var(--accent); transition: left 2.5s linear; }
.panel h3.sim-flow-title { margin: 14px 0 8px; font-size: 0.9rem; }
.sim-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.sim-flow.side { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.sim-flow-label { flex-basis: 100%; color: var(--muted); font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.sim-flow-arrow { align-self: center; color: var(--accent); font-size: 1.4rem; font-weight: 900; }
.sim-flow-box {
  display: flex; flex: 1 1 170px; max-width: 260px; flex-direction: column; gap: 3px; padding: 9px 11px;
  border: 1px solid var(--border); border-left: 4px solid var(--sim-good); border-radius: 8px; background: var(--panel);
  color: var(--text); text-decoration: none;
}
.sim-flow-box:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.sim-flow-box.idle { border-left-color: var(--faint); }
.sim-flow-box.bad, .sim-flow-box.lost { border-left-color: var(--sim-bad); background: var(--sim-bad-soft); }
.sim-flow-name { font-size: 0.86rem; font-weight: 800; }
.sim-flow-text { color: var(--muted); font-size: 0.76rem; line-height: 1.35; }
.sim-flow-state { margin-top: auto; color: var(--muted); font-size: 0.74rem; font-weight: 700; }

/* ---- All mines: one card per mine ---- */
.sim-mines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.sim-mine {
  display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--sim-good); color: var(--text); text-decoration: none;
}
.sim-mine:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.sim-mine.warn { border-left-color: var(--sim-paused); }
.sim-mine.bad { border-left-color: var(--sim-bad); }
.sim-mine.off { border-left-color: var(--faint); opacity: 0.8; }
.sim-mine.chosen { outline: 2px solid var(--accent); outline-offset: -1px; }
.sim-mine-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 1rem; }
.sim-mine-head .spacer { flex: 1; }
.sim-mine-kind { color: var(--muted); font-size: 0.82rem; }
.sim-mine .hint, .sim-mine p { margin: 0; }
.sim-mine-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; }
.sim-mine-stats b small { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.sim-mine-modules { margin-top: auto; gap: 4px; }
.sim-mine-modules .sim-chip { padding: 2px 8px; font-size: 0.72rem; }

/* ---- Forms (Demo events, Settings) ---- */
.sim-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.sim-form { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.sim-form label { display: flex; min-width: 0; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 700; }
.sim-form label > span { color: var(--muted); }
.sim-form label.sim-check { flex-basis: 100%; }
.sim-check { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.sim-input {
  min-width: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 0.88rem;
}
.sim-input:focus { outline: 2px solid rgba(141, 127, 86, 0.35); outline-offset: 0; }
.sim-input.narrow { width: 120px; }
.sim-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }

.sim-settings { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .sim-settings { grid-template-columns: minmax(0, 1fr); } }
.sim-setting-list { display: flex; flex-direction: column; }
.sim-setting {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, auto); gap: 6px 16px; align-items: center;
  padding: 10px 4px; border-bottom: 1px solid var(--rule);
}
.sim-setting.changed { background: var(--accent-soft); }
.sim-setting-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.sim-setting-text small { color: var(--muted); font-size: 0.78rem; }
.sim-setting-text .sim-tag { align-self: flex-start; margin-left: 0; }
.sim-setting-value { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.sim-units { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; }
@media (max-width: 640px) {
  .sim-setting { grid-template-columns: minmax(0, 1fr); }
  .sim-setting-value { align-items: flex-start; text-align: left; }
}
.sim-restart-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ---- Not set up: how to set it up (every page, under the app bar) ---- */
.sim-setup { margin-bottom: 12px; border-left: 4px solid var(--sim-bad); }
.sim-setup h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--sim-bad); font-size: 1rem; font-weight: 900; }
/* The file paths are long words: they wrap on a phone instead of leaving the panel */
.sim-setup p { margin: 4px 0; font-size: 0.88rem; line-height: 1.5; overflow-wrap: anywhere; }
.sim-setup h3 { margin: 6px 0 2px; font-size: 0.86rem; font-weight: 900; }
.sim-setup-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 4px 18px; }
.sim-pre {
  overflow: auto; margin: 6px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2);
  color: var(--text); font-family: var(--sim-mono); font-size: 0.76rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}