/* Energy's EMIS modules (Client\Apps\Energy: EnLine, EnHeat, EnSankey, EnHBars, EnergyHeader's second row of tabs, the hero
   figures and status cards). Linked by Components\App.razor after energy.css; each group of pages has its own file after
   this one (emis-flow.css, emis-performance.css, emis-operations.css).
   The series colours are the data-viz reference palette's categorical slots, in a fixed order (validated light and dark:
   adjacent CVD dE >= 8.4, normal-vision dE >= 19.3), stepped for the dark theme; a series never takes a status colour.
   Status (good, watch, bad) stays the app's tokens and always comes with its word. */

:root {
  --em-s1: #2a78d6; --em-s2: #eb6834; --em-s3: #1baf7a; --em-s4: #eda100;
  --em-s5: #e87ba4; --em-s6: #008300; --em-s7: #6250d6; --em-s8: #898781;
  --em-heat-1: #cde2fb; --em-heat-2: #9ec5f4; --em-heat-3: #6da7ec; --em-heat-4: #3987e5; --em-heat-5: #256abf; --em-heat-6: #184f95;
  --em-grid: var(--rule);
  --em-axis: var(--muted);
}
:root[data-theme="dark"] {
  --em-s1: #3987e5; --em-s2: #d95926; --em-s3: #199e70; --em-s4: #c98500;
  --em-s5: #d55181; --em-s6: #008300; --em-s7: #9085e9; --em-s8: #898781;
  --em-heat-1: #104281; --em-heat-2: #184f95; --em-heat-3: #1c5cab; --em-heat-4: #2a78d6; --em-heat-5: #5598e7; --em-heat-6: #86b6ef;
}

/* ---- The second row of tabs (a module with several pages) ---- */
.en-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 6px 4px;
  padding: 0 4px;
}
.en-subtab {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
}
.en-subtab:hover { background: var(--chip); color: var(--text); }
.en-subtab.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--border); font-weight: 700; }

/* ---- Layout helpers ---- */
.em-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.em-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.em-grid-2 > .panel, .em-grid-3 > .panel { margin: 0; }
.em-span-2 { grid-column: span 2; }
@media (max-width: 1000px) {
  .em-grid-2, .em-grid-3 { grid-template-columns: 1fr; }
  .em-span-2 { grid-column: auto; }
}

/* A hero figure: the one number a section is about */
.em-hero {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.em-hero .em-hero-value { font-size: 2.4rem; font-weight: 800; line-height: 1.1; color: var(--text); }
.em-hero .em-hero-unit { font-size: 1rem; font-weight: 700; color: var(--muted); }
.em-hero .em-hero-sub { color: var(--muted); font-size: 0.88rem; }

/* Status words and dots: a colour never alone */
.em-good { color: var(--good-text); }
.em-watch { color: var(--warn); }
.em-bad { color: var(--bad); }
.em-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.82rem; }
.em-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }

/* ---- EnLine ---- */
.em-chart { position: relative; }
.em-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.em-grid { stroke: var(--em-grid); stroke-width: 1; }
.em-axis { fill: var(--em-axis); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.em-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.em-dashed { stroke-dasharray: 6 4; }
.em-band { fill: var(--em-s1); opacity: 0.12; pointer-events: none; }
.em-threshold { stroke: var(--text); stroke-width: 1.4; stroke-dasharray: 6 4; pointer-events: none; }
.em-cross { stroke: var(--muted); stroke-width: 1; pointer-events: none; }
.em-dot { stroke: var(--panel); stroke-width: 2; pointer-events: none; }
.em-hit { fill: transparent; }
.em-tip {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 6px 10px;
  font-size: 0.78rem;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
.em-tip-time { font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.em-tip i { margin-right: 6px; }
.em-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; }
.em-key-dashed { background: none !important; border-top: 2px dashed currentColor; height: 0; }
.em-key-band { height: 10px; background: var(--em-s1); opacity: 0.25; }

/* The slots: lines and dots use stroke/fill, keys and bars the background */
.em-line.em-s1 { stroke: var(--em-s1); } .em-line.em-s2 { stroke: var(--em-s2); } .em-line.em-s3 { stroke: var(--em-s3); } .em-line.em-s4 { stroke: var(--em-s4); }
.em-line.em-s5 { stroke: var(--em-s5); } .em-line.em-s6 { stroke: var(--em-s6); } .em-line.em-s7 { stroke: var(--em-s7); } .em-line.em-s8 { stroke: var(--em-s8); }
.em-dot.em-s1, .em-node.em-s1 { fill: var(--em-s1); } .em-dot.em-s2, .em-node.em-s2 { fill: var(--em-s2); } .em-dot.em-s3, .em-node.em-s3 { fill: var(--em-s3); }
.em-dot.em-s4, .em-node.em-s4 { fill: var(--em-s4); } .em-dot.em-s5, .em-node.em-s5 { fill: var(--em-s5); } .em-dot.em-s6, .em-node.em-s6 { fill: var(--em-s6); }
.em-dot.em-s7, .em-node.em-s7 { fill: var(--em-s7); } .em-dot.em-s8, .em-node.em-s8 { fill: var(--em-s8); } .em-node.em-s0 { fill: var(--text); }
i.em-s1, .em-hbar-fill.em-s1 { background: var(--em-s1); color: var(--em-s1); } i.em-s2, .em-hbar-fill.em-s2 { background: var(--em-s2); color: var(--em-s2); }
i.em-s3, .em-hbar-fill.em-s3 { background: var(--em-s3); color: var(--em-s3); } i.em-s4, .em-hbar-fill.em-s4 { background: var(--em-s4); color: var(--em-s4); }
i.em-s5, .em-hbar-fill.em-s5 { background: var(--em-s5); color: var(--em-s5); } i.em-s6, .em-hbar-fill.em-s6 { background: var(--em-s6); color: var(--em-s6); }
i.em-s7, .em-hbar-fill.em-s7 { background: var(--em-s7); color: var(--em-s7); } i.em-s8, .em-hbar-fill.em-s8 { background: var(--em-s8); color: var(--em-s8); }

/* ---- EnHeat ---- */
.em-heat { display: grid; gap: 2px; font-size: 0.72rem; }
.em-heat-row { display: grid; grid-template-columns: 64px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.em-heat-day { color: var(--muted); white-space: nowrap; }
.em-heat-hour { color: var(--muted); text-align: left; font-variant-numeric: tabular-nums; }
.em-heat-cell { height: 18px; border-radius: 3px; }
.em-heat-1 { background: var(--em-heat-1); } .em-heat-2 { background: var(--em-heat-2); } .em-heat-3 { background: var(--em-heat-3); }
.em-heat-4 { background: var(--em-heat-4); } .em-heat-5 { background: var(--em-heat-5); } .em-heat-6 { background: var(--em-heat-6); }
.em-heat-none { background: repeating-linear-gradient(45deg, var(--chip), var(--chip) 3px, transparent 3px, transparent 6px); }
.em-heat .en-legend .em-key { width: 18px; height: 10px; }

/* ---- EnSankey ---- */
.em-sankey svg { display: block; width: 100%; height: auto; }
.em-flow { fill: none; opacity: 0.35; stroke-linecap: butt; }
.em-flow:hover { opacity: 0.6; }
.em-flow.em-s1 { stroke: var(--em-s1); } .em-flow.em-s2 { stroke: var(--em-s2); } .em-flow.em-s3 { stroke: var(--em-s3); } .em-flow.em-s4 { stroke: var(--em-s4); }
.em-flow.em-s5 { stroke: var(--em-s5); } .em-flow.em-s6 { stroke: var(--em-s6); } .em-flow.em-s7 { stroke: var(--em-s7); } .em-flow.em-s8 { stroke: var(--em-s8); }
.em-node-label { fill: var(--text); font-size: 12px; font-weight: 600; }
.em-node-value { fill: var(--muted); font-weight: 400; }

/* ---- EnHBars ---- */
.em-hbars { display: grid; gap: 8px; }
.em-hbar { display: grid; grid-template-columns: minmax(140px, 220px) 1fr minmax(90px, auto); gap: 4px 12px; align-items: center; }
.em-hbar-label { font-size: 0.86rem; font-weight: 600; display: flex; gap: 6px; align-items: center; min-width: 0; }
.em-hbar-label a { color: inherit; }
.em-hbar-track { height: 12px; background: var(--chip); border-radius: 4px; overflow: hidden; }
.em-hbar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.em-hbar-fill.em-good { background: var(--good); } .em-hbar-fill.em-watch { background: var(--warn); } .em-hbar-fill.em-bad { background: var(--bad); }
.em-hbar-value { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; font-size: 0.86rem; }
.em-hbar-sub { grid-column: 2 / -1; margin-top: -4px; font-size: 0.76rem; }
.em-hbar-none { font-size: 0.7rem; }

/* ---- Alerts ---- */
.em-alerts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.em-alert { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); text-decoration: none; color: inherit; }
.em-alert:hover { border-color: var(--accent); }
.em-alert.em-bad { border-left: 4px solid var(--bad); }
.em-alert.em-watch { border-left: 4px solid var(--warn); }
.em-alert .em-alert-text { flex: 1; color: var(--text); }
.em-alert .em-alert-kind { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; }

/* ---- Tables ---- */
.em-table td.num, .em-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.em-table tr.em-row-strong td { font-weight: 800; }
.em-table tr.em-row-best td { background: var(--good-soft); }

/* ---- The app bar: eleven modules fit (a little tighter, and they wrap rather than widen the page) ---- */
/* (wave 0.7: on a phone they scroll sideways in the app bar as every app's tabs) */
@media (min-width: 600px) {
  .appbar:has(.os-appname__app[href="energy"]) { height: auto; min-height: var(--os-appbar-h); }
  .appbar:has(.os-appname__app[href="energy"]) .apptabs { flex-wrap: wrap; min-width: 0; max-width: 100%; row-gap: 0; overflow: visible; mask-image: none; }
  .appbar:has(.os-appname__app[href="energy"]) .apptab { padding: 0 8px; min-height: 30px; font-size: 0.83rem; }
}