/* ── Centralized UI components ──────────────────────────────
 * Companion to main/templates/_components/ui.html.
 * RULES: tokens only via var(--*) from palette.css — no hardcoded
 * colors here. No style="" in templates except JS-toggled display
 * or computed values (e.g. width:{{ pct }}%). */

/* Uppercase section heading inside modal bodies
 * (replaces inline font-size/weight/spacing on <p class="text-muted">). */
.ui-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

/* Material Symbols icon at button scale
 * (replaces style="font-size:16px; vertical-align:middle;"). */
.ui-icon {
  font-size: 16px;
  vertical-align: middle;
}

.ui-icon-lg {
  font-size: 20px;
  vertical-align: middle;
}

/* Inline form error text inside modals (JS toggles display). */
.ui-form-error {
  font-size: 12px;
  color: var(--status-danger);
  margin-top: 0.25rem;
}

/* Muted description paragraph under modal section titles. */
.ui-form-hint {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ── Mode selector (shared: Energy Home + Optimizer Plan) ────
 * One rule for both pages so a change lands once. Energy Home renders its
 * modes as divs (`.mode`) in a wrapping flex row; the Optimizer Plan page
 * renders them as buttons (`.epl-mode`) in a column. Only the layout differs,
 * and that stays in each page's own sheet — the skin (border, padding, type,
 * colour, the active state, and the focus ring) is here.
 *
 * Text colour is `--color-text`, per design.md Rule 1. Both pages' items
 * used to hardcode #475569 for that ink (Energy Home literally, the plan page
 * via a `--epl-ink-soft` token holding the same value); sharing this rule
 * moves them onto the token (#364153), which is the one intentional visual
 * change of the split. Nothing else about either page's mode items changed. */
.energy-home .mode,
.energy-plan .epl-mode {
  border: 1.5px solid var(--card-border); border-radius: 7px;
  padding: 8px 12px; font-size: 12.5px; font-weight: 700;
  color: var(--color-text); background: var(--card-bg); line-height: 1.25;
}
.energy-home .mode.on,
.energy-plan .epl-mode.on {
  border-color: var(--color-primary); background: var(--color-primary);
  color: var(--card-bg);
}
.energy-home .mode small,
.energy-plan .epl-mode small {
  display: block; font-weight: 400; font-size: 10.5px;
  opacity: .75; margin-top: 1px;
}
.energy-home .mode:focus-visible,
.energy-plan .epl-mode:focus-visible {
  outline: 2px solid var(--link); outline-offset: 2px;
}

/* Energy-role category badges (Tag Roles page). Colours are palette tokens --
   solar for a source, load for a consumption, the neutral status pair for
   'other' (the battery nameplate/state readings -- Battery Capacity, Battery
   Capacity Percentage -- which are values rather than flows) -- so the
   categories read the same here as on the energy pages. Text uses the token
   itself on its own tint for contrast on both light backgrounds. */
.ui-badge-source {
  background: var(--energy-solar-tint);
  color: var(--energy-solar);
}

.ui-badge-consumption {
  background: var(--energy-load-tint);
  color: var(--energy-load);
}

.ui-badge-other {
  background: var(--status-track);
  color: var(--status-muted);
}

/* Tag Roles: the row's role editor. Kept as a page class rather than Bootstrap's
   .d-flex, whose "display: flex !important" would beat the inline display:none
   the script toggles -- which would leave the dropdown visible in read mode. */
.tr-role-edit {
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* Tag Roles: Device / Tag cells need room for their (hidden) select twin, so the
   read-only text and the editor do not resize the row when Edit is clicked. */
.tr-cell {
  min-width: 200px;
}