/* Energy (EMIS in OneStop, Client\Apps\Energy): the frame of every page, the figures and drill-down cards, the UNDER
   CONSTRUCTION tag, the bar charts and their legends, the tables and the settings' forms. The client's UI rules
   (2026-11-02): one frame for every page, a definition under every section title (.en-def), a legend for every colour,
   drill-down cards slightly lighter with a chevron, a visible tag on anything not fed yet. Only the theme's tokens (app.css
   :root and its dark values): light and dark alike. Linked by Components\App.razor after app.css and predictive.css (the
   pages reuse their panel, kpi, table, pdm-input, pdm-bar and pdm-toolbar rules). */

/* ---- The frame: the same width on every page (UI rule 2): the whole width of the window (the owner, 2026-11-04) ---- */
.en-frame {
  width: 100%;
  max-width: none;
  padding: 0 6px;
  box-sizing: border-box;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.en-frame > .panel { margin: 0; }

/* A definition under a section title (UI rule 3) */
.en-def {
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 0.86rem;
  max-width: 95ch;
}
.en-sub {
  margin: 14px 0 4px;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 700;
}
.en-group-title {
  margin: 10px 0 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* ---- Figures and cards ---- */
.en-figure { position: relative; }
.en-figure .value { font-size: 1.6rem; white-space: nowrap; }
.en-figure .value .en-unit {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
}
.en-figure .value.en-none { font-size: 1rem; }
.en-cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* A drill-down card: slightly lighter, a chevron (UI rule 1) */
.en-drill {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding-right: 28px;
}
.en-drill:hover,
.en-drill:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.en-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
}

/* Status of a value */
.en-good { color: var(--good-text); }
.en-watch { color: var(--warn); }
.en-bad { color: var(--bad); }
.en-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--chip);
  color: var(--chip-text);
}
.en-chip.en-good { background: var(--good-soft); }
.en-chip.en-bad { background: var(--bad-soft); }

/* ---- UNDER CONSTRUCTION (UI rule 6) ---- */
.en-construction {
  display: inline-block;
  padding: 1px 7px;
  border: 1px dashed var(--warn);
  border-radius: 4px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  white-space: nowrap;
  cursor: help;
}

/* ---- Running dots ---- */
.en-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.en-dot-on { background: var(--good); }
.en-dot-off { background: var(--bad); }

/* ---- Legends (UI rule 4) ---- */
.en-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--muted);
}
.en-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.en-key {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
}
.en-key-bar { background: var(--accent); }
.en-key-over { background: var(--bad); }
.en-key-target { height: 0; border-top: 2px dashed var(--text); }
.en-key-none { background: repeating-linear-gradient(45deg, var(--chip), var(--chip) 3px, transparent 3px, transparent 6px); border: 1px solid var(--border); }
.en-key-good { background: var(--good); }
.en-key-watch { background: var(--warn); }
.en-key-bad { background: var(--bad); }
.en-key-current { background: var(--note-soft); border: 1px solid var(--border); }

/* ---- Bar charts ---- */
.en-bars {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
}
.en-bar { fill: var(--accent); }
.en-bar-over { fill: var(--bad); }
.en-bar-none {
  fill: var(--chip);
  stroke: var(--border);
  stroke-dasharray: 3 2;
}
.en-grid { stroke: var(--rule); stroke-width: 1; }
.en-axis { fill: var(--muted); font-size: 10.5px; }
.en-target { stroke: var(--text); stroke-width: 1.6; stroke-dasharray: 6 4; }

/* ---- Tables ---- */
.en-table th, .en-table td { white-space: nowrap; }
.en-table td.hint { white-space: normal; }
.en-table .en-group { text-align: center; border-bottom: 1px solid var(--border); }
.en-table tr.strong td, .en-table tr.strong th { font-weight: 800; }
.en-table tr.en-current { background: var(--note-soft); }
.en-table tr.en-history td { background: var(--panel-2); font-size: 0.82rem; }
.en-table tr.en-edit td { background: var(--panel-2); }
.en-blank { background: var(--panel-2); }
.en-mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; }
.en-grid-input input { width: 7.5em; }

/* ---- Forms ---- */
.en-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
}
.en-form label {
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 700;
}
.en-form .en-wide { min-width: 280px; flex: 1; }

/* ---- Notes, rules, glossary ---- */
.en-notes ul { margin: 0; padding-left: 20px; }
.en-notes li { margin: 3px 0; font-size: 0.88rem; }
.en-note-missing::marker { color: var(--warn); }
.en-note-warn::marker { color: var(--bad); }
.en-rules li { margin: 4px 0; }
.en-glossary {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap: 8px 18px;
  margin: 0;
}
.en-glossary dt { font-weight: 800; }
.en-glossary dd { margin: 0; color: var(--text); }

@media (max-width: 700px) {
  .en-glossary { grid-template-columns: 1fr; }
  .en-glossary dd { margin-bottom: 6px; }
}