/* Energy's EMIS modules: Demand and tariff, Performance, Cost and carbon. Linked after emis.css (Components\App.razor); only the theme's tokens and emis.css's. */


/* ---- Demand: the demand against the peak (a meter with the warning mark) ---- */
.em-meter { position: relative; height: 14px; margin: 10px 0 4px; background: var(--chip); border-radius: 4px; overflow: visible; }
.em-meter-fill { display: block; height: 100%; border-radius: 4px; background: var(--good); }
.em-meter-fill.em-watch { background: var(--warn); }
.em-meter-fill.em-bad { background: var(--bad); }
.em-meter-mark { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--text); }
.em-meter-key { height: 10px; width: 0; border-left: 2px dashed var(--text); border-radius: 0; }

/* A two-part share bar: on-peak / off-peak, scope 1 / scope 2 (a 2 px surface gap between the parts) */
.em-split { display: flex; gap: 2px; height: 14px; margin: 8px 0 4px; }
.em-split > span { display: block; height: 100%; border-radius: 4px; min-width: 2px; }
.em-split-on, .em-split-key-on, .em-split-a, .em-split-key-a { background: var(--em-s2); }
.em-split-off, .em-split-key-off, .em-split-b, .em-split-key-b { background: var(--em-s1); }
.en-legend .em-split-key-on, .en-legend .em-split-key-off, .en-legend .em-split-key-a, .en-legend .em-split-key-b { height: 10px; }

/* ---- Performance: benchmarks (bullet bars) ---- */
.em-bench-list { display: grid; gap: 10px; }
.em-bench-row { display: grid; grid-template-columns: minmax(180px, 260px) minmax(160px, 1fr) minmax(130px, auto) minmax(150px, auto); gap: 6px 16px; align-items: center; }
.em-bench-name { font-size: 0.88rem; }
.em-bench-name .hint { font-size: 0.74rem; }
.em-bench-figures { font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.em-bench { position: relative; height: 20px; background: var(--chip); border-radius: 4px; }
.em-bench-band { position: absolute; top: 4px; bottom: 4px; background: var(--em-s1); opacity: 0.35; border-radius: 3px; }
.em-bench-median { position: absolute; top: 1px; bottom: 1px; width: 2px; margin-left: -1px; background: var(--text); }
.em-bench-target { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed var(--accent-strong); }
.em-bench-current { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--panel); background: var(--good); }
.em-bench-current.em-bad { background: var(--bad); }
.em-bench-key-band { height: 10px; background: var(--em-s1); opacity: 0.35; }
.em-bench-key-median { height: 10px; width: 2px; background: var(--text); }
.em-bench-key-target { height: 10px; width: 0; border-left: 2px dashed var(--accent-strong); border-radius: 0; }
.em-total { margin: 10px 0 0; font-weight: 700; }
@media (max-width: 900px) {
  .em-bench-row { grid-template-columns: 1fr 1fr; }
}

/* The indicators' sparklines */
.em-spark { display: block; width: 120px; height: 28px; overflow: visible; }
.em-spark-budget { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.em-spark-dot { fill: var(--em-s1); }
.em-table tr[style*="cursor"]:hover td { background: var(--panel-2); }