/* Thunder Energy: the original black and gold identity. Series and live state
   colours remain independent of the brand palette. Loaded after layout CSS. */
:root {
  color-scheme: dark;
  --brand-gold: #e09902;
  --brand-gold-light: #f4bd48;
  --brand-gold-dark: #b47b02;
  --brand-surface: #151515;
  --brand-inset: #1d1c19;
  --brand-border: var(--brand-gold);
  --chart-paper: #282828;
  --chart-ink: #d4cec3;
  --chart-grid: #464646;
  --chart-blue: color-mix(in srgb, #2563eb 80%, white);
  --chart-red: color-mix(in srgb, #dc2626 80%, white);
  --chart-health: color-mix(in srgb, #1e3a8a 60%, white);
  --chart-voltage: color-mix(in srgb, #800020 50%, white);
  --ink: #f5f0e6;
  --muted: #b9b1a2;
  --paper: #090909;
  --line: var(--brand-border);
}
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--brand-gold); color: #151008; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline-color: var(--brand-gold-light);
}
input, select, textarea { color-scheme: dark; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand-gold); }

/* Full wordmark for the named brand, symbol alone for the browser icon. */
.brand { color: var(--brand-gold); }
.brand-logo { display: block; width: 228px; height: 68px; object-fit: contain; }
.brand-footer .brand-logo { width: 132px; height: 42px; }
.topbar { border-color: var(--brand-border); }
.date, .eyebrow, .page-footer, .page-footer p { color: var(--muted); }
h1 { color: var(--ink); }

/* Shared surfaces; dimensions continue to come from each panel's layout. */
.summary, .energy-panel, .consumer-card, .history-panel,
.energy-counter-card, .mixergy-panel, .skoda-panel, .maintenance-panel {
  background: var(--brand-surface);
  border-color: var(--brand-border);
  box-shadow: 0 5px 24px #00000024;
}
.tariff-panel {
  background: linear-gradient(125deg, #201b10, #151515 65%);
  border-color: var(--brand-border);
}
.supply-mix-card { background: var(--brand-surface); }
.panel-footer, .summary-item + .summary-item,
.summary > .summary-item:not(:first-child),
.summary > .supply-mix-card, .summary > .summary-item:nth-child(even),
.history-controls, .history-summary, .history-summary > * + *,
.history-summary > :nth-child(n), .history-table-details,
.mixergy-history, .mixergy-details, .mixergy-controls, .mixergy-installer,
.mixergy-schedule-row, .skoda-general, .skoda-details, .skoda-data-group,
.skoda-section-observation, .skoda-location, .skoda-controls,
.skoda-profile-advanced, .skoda-profile-preview, .skoda-history,
.skoda-history-table-details, .maintenance-section,
.maintenance-storage > div + div, .chart-day-navigation {
  border-color: var(--brand-border);
}
.history-summary > :nth-child(5n + 1) { border-left: 0; }
.section-title > span, .summary-item p, .summary-item small,
.consumer-name, .consumer-description, .consumer-card small,
.summary-note, .power-share, .supply-mix-label, .supply-mix-caption,
.supply-mix-card .consumer-name, .legend span, .scene-status,
.live-reading-label, .solar-control output, .range-labels, .ev-setting,
.history-eyebrow, .history-source-label, .counter-period,
.history-control-label, .history-field > span, .history-summary-label,
.history-summary p, .history-summary small, .history-summary-share,
.history-supply-mix .history-summary-label, .history-supply-mix-estimate,
.history-supply-mix-label, .history-summary .history-supply-mix-caption,
.energy-counter-name, .energy-counter-value small,
.tariff-panel-heading p, .tariff-field > span:first-child,
.tariff-field small, .tariff-input-unit, .tariff-discount,
.tariff-discount small, .tariff-market-note, .tariff-market-status,
.mixergy-state, .mixergy-tank-charge small, .mixergy-tank-caption,
.mixergy-metric > span, .mixergy-metric strong small,
.mixergy-metric small[data-mixergy-note], .mixergy-status,
.mixergy-observation, .mixergy-details, .mixergy-details dt,
.mixergy-form p, .mixergy-field, .mixergy-disconnect-confirm,
.mixergy-controls-heading > span, .mixergy-control-note,
.mixergy-command-form > p, .mixergy-command-limits,
.mixergy-installer > summary span,
.skoda-state, .skoda-battery-card > strong small, .skoda-battery-status,
.skoda-metric-label, .skoda-metric strong small, .skoda-status,
.skoda-observation, .skoda-field, .skoda-values dt, .skoda-details,
.skoda-empty, .skoda-section-observation, .skoda-location > summary > span,
.skoda-location-caption, .skoda-location-message, .skoda-location-observation,
.skoda-map-legend, .skoda-controls > summary > span, .skoda-profile-id,
.skoda-profile-days, .skoda-profile-advanced, .skoda-profile-preview,
.skoda-health-scale, .skoda-health-card > small,
.skoda-health-information > .skoda-health-explanation,
.skoda-health-reference-fields label, .skoda-health-reference-note,
.skoda-history-field, .skoda-history-tooltip-row span,
.skoda-history-tooltip > small,
.maintenance-heading p, .maintenance-storage span, .maintenance-audit > p,
.maintenance-status, .maintenance-field > span, .maintenance-check,
.maintenance-note, .maintenance-user-meta, .maintenance-collector-list li {
  color: var(--muted);
}
.history-control-label, .tariff-field > span:first-child,
.maintenance-section > summary, .maintenance-panel h3,
.mixergy-controls > summary, .mixergy-installer > summary,
.skoda-general > summary, .skoda-data-group > summary,
.skoda-location > summary, .skoda-controls > summary,
.skoda-health-reference > summary, .chart-series-selection > summary,
.history-table-details summary, .mixergy-history-table-details,
.skoda-history-table-details { color: var(--brand-gold-light); }
.mixergy-details dd, .skoda-values dd, .skoda-location-address,
.skoda-group h3, .skoda-command-card h3, .skoda-profile-fields h4,
.skoda-health-information > p, .skoda-history-heading h3,
.maintenance-user-identity strong {
  color: var(--ink);
}
.mixergy-command-current { color: var(--muted) !important; }
.tariff-effective, .maintenance-section-icon { color: var(--brand-gold-light); }
.history-status, .tariff-status, .history-chart-pagination,
.mixergy-history-status, .mixergy-history-pagination,
.skoda-history-status { color: var(--muted); }

/* Controls use gold for the selected or primary action. */
.view-switch, .history-toggle-group, .skoda-quick-tabs {
  background: var(--brand-inset); border-color: var(--brand-border);
}
.view-button, .history-toggle-button { color: var(--muted); }
.view-button.selected, .history-toggle-button.selected,
.history-toggle-button[aria-pressed=true] {
  background: var(--brand-gold); color: #171108; box-shadow: none;
}
.logout-button, .pause-button, .history-period-button,
.mixergy-button, .mixergy-history-button, .skoda-button,
.skoda-history-button, .maintenance-button, .history-chart-pagination button {
  background: var(--brand-inset); color: var(--ink);
  border-color: var(--brand-border);
}
.history-period-button.selected, .history-period-button[aria-pressed=true],
.mixergy-history-button.selected, .skoda-history-button.selected {
  background: #332709; border-color: var(--brand-gold-dark);
  color: var(--brand-gold-light);
}
.history-period-button:enabled:hover, .mixergy-history-button:enabled:hover,
.skoda-history-button:enabled:hover, .logout-button:enabled:hover,
.pause-button:enabled:hover, .mixergy-button:enabled:hover,
.skoda-button:enabled:hover, .maintenance-button:enabled:hover {
  background: #292319; border-color: var(--brand-gold-dark);
}
.tariff-save, .mixergy-button.primary, .skoda-button.primary,
.mixergy-installer .mixergy-command-form .mixergy-button.primary,
.maintenance-button.primary {
  background: var(--brand-gold); border-color: var(--brand-gold);
  color: #171108;
}
.tariff-save:enabled:hover, .mixergy-button.primary:enabled:hover,
.skoda-button.primary:enabled:hover, .maintenance-button.primary:enabled:hover {
  background: var(--brand-gold-light); border-color: var(--brand-gold-light);
  color: #171108;
}
.history-field input, .history-field select,
.mixergy-field input, .mixergy-field select,
.mixergy-history-field input, .mixergy-history-field select,
.skoda-field input, .skoda-command-card select, .skoda-command-card textarea,
.skoda-history-field input, .skoda-history-field select,
.skoda-health-reference-fields input,
.maintenance-field input, .maintenance-field select, .tariff-input-wrap {
  background: #0f0f0f; border-color: #4c4435; color: var(--ink);
}
.tariff-input-wrap input { color: var(--ink); }
.tariff-input-wrap:focus-within { border-color: var(--brand-gold); }
.tariff-input-wrap input::placeholder, .maintenance-field input::placeholder {
  color: #a79d8c;
}
.maintenance-field input:disabled, .maintenance-field select:disabled {
  color: #9e9586; background: #191816;
}
.history-series-option, .history-series-filters label,
.mixergy-history-option, .skoda-history-option,
.mixergy-metric, .mixergy-form, .mixergy-command-form,
.mixergy-installer .mixergy-command-form, .mixergy-schedule-day,
.skoda-metric, .skoda-form, .skoda-group, .skoda-command-card,
.skoda-profile-review-group, .skoda-profile-row, .skoda-profile-preview pre,
.skoda-health-reference form, .maintenance-storage, .maintenance-source,
.maintenance-user-list > li, .maintenance-user-edit {
  background: var(--brand-inset); border-color: var(--brand-border);
  color: var(--muted);
}
.mixergy-disconnect-confirm, .maintenance-collector-list li {
  border-color: var(--brand-border);
}
.maintenance-icon { color: var(--brand-gold); background: #332709; }
.skoda-battery-card, .skoda-health-card {
  background: linear-gradient(145deg, #211d14, #191919);
  border-color: var(--brand-border);
}
.skoda-vehicle-icon { color: var(--brand-gold-light); }
.skoda-vehicle-icon svg { fill: var(--brand-inset); }
.skoda-vehicle-icon circle { fill: #393428; }
.skoda-battery-track, .skoda-health-track, .consumer-track,
.supply-mix-track, .history-supply-mix-track { background: #333027; }
.mixergy-tank-charge strong {
  color: #6d28d9;
  font-weight: 750;
  text-shadow: 0 1px 0 #ffffffb3;
}
.skoda-health-card > strong { color: var(--ink); }
.skoda-health-card > span { color: var(--muted); }
.skoda-health-estimate, .skoda-history-estimate {
  background: #332709; border-color: #574222; color: var(--brand-gold-light);
}
.skoda-location-link, .skoda-form-note a { color: var(--brand-gold-light); }
.skoda-map-wrap, .skoda-location-map { background: var(--brand-inset); }
.skoda-map-wrap { border-color: var(--brand-border); }
.ev-control { border-color: var(--brand-border); }

/* Coloured icons still identify each energy series, on a dark tinted base. */
.summary-icon, .summary-icon.consumption, .summary-icon.grid,
.summary-icon.car, .consumer-icon, .history-summary-icon {
  background: color-mix(in srgb, currentColor 16%, #151515);
}
.summary-icon.solar { background: #14302c; }
.skoda-group-icon { background: color-mix(in srgb, var(--group-color) 18%, #151515); }
.garage-voltage[data-status=available], .garage-voltage-value,
.garage-voltage-status[data-state=available],
.heat-pump-voltage-value { color: #f788a4; }

/* The photograph and all native vehicle/charger effects remain untouched. */
.house-scene .scene-node, .house-scene[data-sky=night] .scene-node,
.house-scene .board-label, .house-scene[data-sky=night] .board-label {
  background: #151515df; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--brand-border), 0 2px 10px #00000024;
}
.house-scene .scene-node:not(.node-grid) strong { color: inherit; }
.house-scene .scene-node small, .house-scene .meter-label,
.house-scene .main-board-voltage,
.house-scene .main-board-voltage [data-main-board-voltage] { color: var(--muted); }
.house-scene .node-garage .garage-voltage,
.house-scene .node-garage .garage-voltage-value { color: #f788a4; }
.house-scene .scene-node .dot { box-shadow: none; }
.skoda-quick-controls, .mixergy-quick-controls {
  background: #151515f0; border-color: var(--brand-border); color: var(--ink);
  box-shadow: 0 5px 24px #00000024;
}
.skoda-quick-icon { background: #332709; border-color: #574222; color: var(--brand-gold-light); }
.skoda-quick-controls[data-charging=active] .skoda-quick-icon {
  background: #163523; color: #6ce49e;
}
.mixergy-quick-controls .skoda-quick-icon { background: #2d1e43; border-color: #50346e; color: #ae88fa; }
.skoda-quick-heading > span, .skoda-quick-section-state,
.skoda-quick-metrics dt, .skoda-quick-form label,
.skoda-quick-input-unit > span, .skoda-quick-blocked,
.skoda-quick-status, .skoda-quick-link { color: var(--muted); }
.skoda-quick-battery, .skoda-quick-form label > span { color: var(--brand-gold-light); }
.skoda-quick-chevron { stroke: var(--muted); }
.skoda-quick-controls button { background: var(--brand-inset); border-color: #4c4435; color: var(--ink); }
.skoda-quick-tabs button { background: transparent; color: var(--muted); }
.skoda-quick-tabs button.selected {
  background: var(--brand-gold); color: #171108; box-shadow: none;
}
.skoda-quick-controls input, .skoda-quick-controls select {
  background: #0f0f0f; border-color: #4c4435; color: var(--ink);
}
.skoda-quick-metrics > div { background: var(--brand-inset); }
.skoda-quick-controls .skoda-quick-start,
.mixergy-quick-controls .mixergy-quick-apply {
  background: var(--brand-gold); border-color: var(--brand-gold); color: #171108;
}
.skoda-quick-start .skoda-quick-action-icon { background: #17110816; }
.skoda-quick-controls .skoda-quick-stop {
  background: #301b1c; border-color: #814046; color: #ff9da5;
}
.skoda-quick-stop .skoda-quick-action-icon { color: inherit; background: #ff9da514; }
.skoda-quick-controls button:enabled:hover { background: #292319; border-color: var(--brand-gold-dark); }
.skoda-quick-controls .skoda-quick-start:enabled:hover,
.mixergy-quick-controls .mixergy-quick-apply:enabled:hover {
  background: var(--brand-gold-light); border-color: var(--brand-gold-light); color: #171108;
}
.skoda-quick-controls .skoda-quick-stop:enabled:hover { background: #472528; border-color: #b4525c; }
.skoda-quick-link { border-color: var(--brand-border); }
.skoda-quick-link:hover { color: var(--brand-gold-light); }
.mixergy-quick-water { background: #281d37; }
.mixergy-quick-water > span { color: #c5b5da; }
.mixergy-quick-water > strong { color: #ae88fa; }
.mixergy-quick-charge-track { background: #473358; }

/* Dark grey plots with lighter axes and matching blue/burgundy series tones. */
.history-chart, .history-chart-svg, .mixergy-history-svg, .skoda-history-svg {
  background: var(--chart-paper); border-radius: 9px; color-scheme: dark;
  box-shadow: inset 0 0 0 1px var(--brand-border);
}
.history-axis-label, .mixergy-history-axis-title, .mixergy-history-axis-label,
.skoda-history-svg text { fill: var(--chart-ink); }
.history-grid-line, .history-heat-pump-grid, .mixergy-history-grid,
.skoda-history-svg > line[stroke="#e8eee3"] { stroke: var(--chart-grid); }
.history-zero-line { stroke: #77736b; }
.history-bucket-focus { fill: #ffffff0d; }
.history-bucket-guide, .mixergy-history-guide,
.skoda-history-svg > line[stroke="#b4c7aa"] { stroke: #b9b1a280; }
.history-chart .history-bucket-hit:focus-visible,
.mixergy-history-hit:focus-visible { stroke: var(--brand-gold-light); }
.history-bar[data-chart-series="garage"] { fill: var(--chart-blue); }
.history-bar[data-chart-series="imported"] { fill: var(--chart-red); }
.mixergy-history-line[data-mixergy-history-line="bottom_temperature_c"] {
  stroke: var(--chart-blue);
}
.mixergy-history-point[data-mixergy-history-point="bottom_temperature_c"] {
  fill: var(--chart-blue);
}
.mixergy-history-option:has([data-mixergy-history-series="bottom_temperature_c"]) .mixergy-history-key,
.mixergy-history-option:has([data-mixergy-history-series="bottom_temperature_c"]) .mixergy-history-key::after,
.mixergy-history-tooltip-row[data-mixergy-tooltip-series="bottom_temperature_c"] .mixergy-history-tooltip-dot {
  background: var(--chart-blue);
}
.history-voltage-line, .history-voltage-axis,
.mixergy-history-line[data-mixergy-history-line="controller_voltage_v"] {
  stroke: var(--chart-voltage);
}
.history-voltage-point, .history-voltage-axis-label,
.mixergy-history-point[data-mixergy-history-point="controller_voltage_v"] {
  fill: var(--chart-voltage);
}
.history-panel .history-voltage-key,
.history-panel .history-voltage-key::after,
.mixergy-history-option:has([data-mixergy-history-series="controller_voltage_v"]) .mixergy-history-key,
.mixergy-history-option:has([data-mixergy-history-series="controller_voltage_v"]) .mixergy-history-key::after,
.mixergy-history-tooltip-row[data-mixergy-tooltip-series="controller_voltage_v"] .mixergy-history-tooltip-dot,
.history-tooltip-row[data-tooltip-series="voltage"] .history-tooltip-dot {
  background: var(--chart-voltage);
}
.skoda-history-svg [data-skoda-history-series="health_percent"] > path {
  stroke: var(--chart-health);
}
.skoda-history-svg [data-skoda-history-series="health_percent"] > circle {
  fill: var(--chart-health);
}
.skoda-history-option:has([data-skoda-history-series="health_percent"]) .skoda-history-key,
.skoda-history-option:has([data-skoda-history-series="health_percent"]) .skoda-history-key::after,
.skoda-history-tooltip-row[style*="#1e3a8a"] > i {
  background: var(--chart-health);
}
.history-tooltip, .mixergy-history-tooltip, .skoda-history-tooltip {
  background: #191919; border-color: var(--brand-border); color: var(--muted);
  box-shadow: 0 5px 22px #00000055;
}
.history-empty, .mixergy-history-empty, .skoda-history-empty {
  background: var(--brand-inset); border-color: var(--brand-border); color: var(--muted);
}
.history-table-scroll th, .mixergy-history-table-scroll th,
.skoda-history-table-scroll th { background: var(--brand-inset); color: var(--brand-gold-light); }
.history-table-scroll td, .mixergy-history-table-scroll td,
.skoda-history-table-scroll td, .skoda-history-table-scroll table { color: var(--muted); }
.history-table-scroll th, .history-table-scroll td,
.mixergy-history-table-scroll th, .mixergy-history-table-scroll td,
.skoda-history-table-scroll th, .skoda-history-table-scroll td { border-color: var(--brand-border); }
.diagram-scene { background: #141414; }
.diagram-node-box { fill: #201e19; stroke: var(--brand-border); }
.diagram-node-label, .diagram-node-value { fill: var(--ink); }
.diagram-node-detail, .diagram-note, .diagram-node-share { fill: var(--muted); }

/* Warnings, errors and successful operations keep distinct feedback colours. */
.history-status[data-state=error], .tariff-status[data-state=error],
.maintenance-status[data-error=true], .mixergy-form-error,
.skoda-form-error { color: #ff9da5; }
.tariff-status[data-state=success], .mixergy-command-status,
.skoda-command-status, .skoda-quick-status[data-error=false] { color: #9bdfb2; }
.mixergy-command-status[data-error=true], .skoda-command-status[data-error=true],
.mixergy-history-status[data-error=true], .skoda-history-status[data-error=true],
.skoda-quick-status[data-error=true], .mixergy-quick-controls .skoda-quick-status[data-error=true],
.maintenance-note[data-error=true], .maintenance-source[data-stored=false],
.maintenance-collector-list li[data-warning=true],
.energy-counter-partial, .history-summary-item[data-partial=true] > small,
.tariff-market-status[data-state=partial], .tariff-market-status[data-state=unavailable] {
  color: #efbc67;
}
.scene-node [data-status=stale], .consumer-card [data-status=stale],
.summary-item strong[data-status=stale], .power-share[data-state=stale],
.skoda-quick-controls[data-stale=true] .skoda-quick-battery,
.mixergy-quick-controls[data-stale=true] .skoda-quick-battery {
  color: #efbc67;
}

/* Panel and card titles share the logo's gold, including dynamic headings. */
.app-shell h2, .app-shell h3, .app-shell h4,
.app-shell details > summary,
.app-shell .summary-item > div > p,
.app-shell .consumer-name,
.app-shell .energy-counter-name,
.app-shell .history-summary-label,
.app-shell .mixergy-metric > span,
.app-shell .skoda-metric-label,
.app-shell .skoda-health-card > span,
.app-shell .skoda-quick-heading > strong,
.house-scene .node-label, .house-scene .board-title,
#scene-heading {
  color: var(--brand-gold);
}
.diagram-node-label { fill: var(--brand-gold); }

/* Authentication uses the same assets and identity, keeping the form intact. */
body.brand-auth-page {
  background: var(--paper); color: var(--ink); min-height: 100svh;
}
.brand-auth-page main {
  background: var(--brand-surface); border-color: var(--brand-border);
  box-shadow: 0 12px 60px #00000050;
}
.brand-auth-page .brand { display: flex; justify-content: center; margin: 0 0 12px; }
.brand-auth-page .brand-logo { width: 270px; max-width: 100%; height: 100px; }
.brand-auth-page p, .brand-auth-page .foot { color: var(--muted); }
.brand-auth-page label { color: var(--ink); }
.brand-auth-page input {
  background: #0f0f0f; border-color: #4c4435; color: var(--ink);
}
.brand-auth-page input:focus { outline-color: var(--brand-gold-light); }
.brand-auth-page button { background: var(--brand-gold); color: #171108; }
.brand-auth-page button:enabled:hover { background: var(--brand-gold-light); }
.brand-auth-page a { color: var(--brand-gold-light); }
.brand-auth-page #error { color: #ff9da5; }
@media (max-width: 760px) {
  .brand-logo { width: 185px; height: 55px; }
  .brand-footer .brand-logo { width: 112px; height: 36px; }
  .history-summary > :nth-child(n) { border-left: 1px solid var(--brand-border); }
  .history-summary > :nth-child(2n + 1) { border-left: 0; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .history-summary > :nth-child(n) { border-left: 1px solid var(--brand-border); }
  .history-summary > :nth-child(3n + 1) { border-left: 0; }
}
@media (max-width: 370px) {
  .brand-logo { width: 155px; height: 49px; }
}