/* Manrope, served from this app (public/fonts, SIL Open Font License): a
   Google Fonts @import here held up every page's styles until Google answered,
   and left pages blank when it was slow or unreachable. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'), url('/fonts/manrope-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations'), url('/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — Single source of truth
   Palette: Stone/Amber/Olive/Sky  |  Type: Manrope, tabular-nums
   Radius: 14px max  |  No gradients, no glow, no blue
   Dark: AMOLED black (#000000)  |  Light: Warm stone (#f5f5f0)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Neutral palette — warm stone (light mode) */
  --stone-50:  #f5f5f0;
  --stone-100: #f7f7f7;
  --stone-200: #d4d2cc;
  --stone-300: #d6d3cc;
  --stone-500: #555555;
  --stone-700: #333333;
  --stone-900: #111111;

  /* Accent palette — darkened for AA contrast on white (≥4.5:1) */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-400: #f59e0b;
  --amber-500: #b45309;
  --olive-500: #84a45a;
  --olive-600: #4a6a2e;
  --sky-500:  #87aec8;

  /* Semantic tokens (light mode) */
  --surface:         var(--stone-50);
  --surface-raised:  #f5f5f5;
  --text-primary:    var(--stone-900);
  --text-secondary:  var(--stone-500);
  --border:          var(--stone-200);
  --accent:          var(--amber-400);
  --accent-strong:   var(--amber-500);
  --accent-focus:    rgba(245,158,11,.12);

  /* Shape */
  --radius:   14px;
  --radius-sm: 10px;
  --radius-xs: 8px;

  /* Typography */
  --font: 'Manrope', system-ui, sans-serif;

  /* Shadow — physical, barely-there */
  --shadow-card: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-icon: 0 1px 2px rgba(0,0,0,.03);

  /* Semantic colors per domain (light mode — darkened for contrast) */
  --color-solar:   var(--amber-400);
  --color-solar-r: var(--amber-500);
  --color-battery: var(--olive-600);
  --color-battery-r: var(--olive-600);
  --color-home:    var(--stone-700);
  --color-grid:    #b33a2e;
  --color-export:     var(--amber-400);
  --color-discharge:  var(--amber-400);
  --color-negative:   #d94141;
  --color-cloud-heavy:  #7b84a0;
  --color-cloud-moderate: #9ca3af;
  --color-cloud-light: #ffe870;
  --color-cloud-clear: var(--amber-400);

  /* Chart/legend data-vis colors */
  --color-pv-generated: #FFEA00;
  --color-pv-predicted: #FFEA00;
  --color-pv-now: #d94141;
  --color-cloud-bg: #c8cada;

  /* Dark mode */
  --dark-bg:        #000000;
  --dark-surface:   #111111;
  --dark-raised:    #1a1a1a;
  --dark-text:      #f0f0f0;
  --dark-text-2:    #999999;
  --dark-border:    #2a2a2a;

  /* Keep legacy variable names for backward compatibility */
  --bg: var(--surface);
  --card-bg: var(--surface-raised);
  --text: var(--text-primary);
  --solar: var(--color-solar);
  --battery: var(--color-battery);
  --grid: var(--color-grid);
  --home: var(--color-home);
  --export: var(--color-export);
  --discharge: var(--color-discharge);
  --shadow: var(--shadow-card);
  --grid-color: var(--border);
  --fs-small: 0.85rem;
  --fs-medium: 1.1rem;
  --fs-large: 1.5rem;

  /* Toggle switch colors */
  --success:    #3a8c4f;
  --toggle-off: #c27a20;

  /* Semantic status colors — single source for all .status, .stg-status, etc. */
  --color-success:      #22c55e;
  --color-success-bg:   #22c55e18;
  --color-success-border:#22c55e30;
  --color-warning:      #d97706;
  --color-warning-bg:   #d9770618;
  --color-warning-border:#d9770630;
  --color-danger:       #dc6b4a;
  --color-danger-bg:    #dc6b4a18;
  --color-danger-border: #dc6b4a30;
  --color-info:         #f59e0b;
  --color-info-bg:      #f59e0b18;
  --color-info-border:  #f59e0b30;
  --color-neutral:      #94a3b8;
  --color-text-on-accent: #fff;
  /* Button hover variants */
  --color-success-hover: #16a34a;
  --color-danger-hover:  #c2410c;
  --color-warning-hover: #d97706;

  font-variant-numeric: tabular-nums;
}

[data-theme="dark"] {
  --surface:        var(--dark-bg);
  --surface-raised: var(--dark-surface);
  --text-primary:   var(--dark-text);
  --text-secondary: var(--dark-text-2);
  --border:         var(--dark-border);
  --shadow-card:    0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
  --shadow-icon:    none;
  /* Propagate to legacy vars */
  --bg: var(--surface);
  --card-bg: var(--surface-raised);
  --text: var(--text-primary);
  --shadow: var(--shadow-card);
  --grid-color: var(--border);
  --accent: var(--amber-400);
  --accent-strong: var(--amber-500);
  --solar: var(--color-solar);
  --battery: var(--color-battery);
  --grid: var(--color-grid);
  --home: var(--color-home);
  --export: var(--color-export);
  --discharge: var(--color-discharge);
  --color-grid: #e86255;
  /* Explicit home and battery colors for dark — light-mode values would be too dim on #000000 */
  --color-home: #a8a29e;
  --color-battery: #84a45a;

  /* Toggle switch dark overrides */
  --success:    #4da863;
  --toggle-off: #d48a28;

  /* Semantic status — dark mode overrides */
  --color-success:       #4da863;
  --color-success-bg:    #4da86318;
  --color-success-border: #4da86330;
  --color-danger:        #ef4444;
  --color-danger-bg:     #ef444418;
  --color-danger-border:  #ef444430;
  --color-info:          #fbbf24;
  --color-info-bg:       #fbbf2418;
  --color-info-border:   #fbbf2430;
  --color-neutral:       #6b7280;

  /* Cloud colors stay the same in dark (they're data-driven, not UI chrome) */
  --color-negative: #ef4444;
  --color-cloud-heavy:  #7b84a0;
  --color-cloud-moderate: #9ca3af;
  --color-cloud-light: #ffe870;
  --color-cloud-clear: var(--amber-400);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--text);
  padding: 1rem;
  min-height: 100vh;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
}

/* The dashboard's page header only; cards that use <header> elements set their own layout. */
.container > header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.header-left { display: flex; align-items: center; min-width: 0; }
.header-right { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; }
/* Phones: the signed-in links wrap onto their own row under the title instead
   of pushing the page wider than the screen. */
@media (max-width: 640px) {
  .header-right {
    width: 100%; justify-content: flex-start; gap: 0.5rem; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: -2px -2px 0;
  }
  .header-right::-webkit-scrollbar { display: none; }
  .header-right > * { flex: none; }
  .header-right .settings-link { padding: 0.45rem 0.75rem; }
}
#logo-img { height: 40px; margin-right: 1rem; border-radius: var(--radius-sm); }

h1, h2, h3, h4,
.pv-today-header h3,
.chart-header h3,
.daily-breakdown-header h3 {
  font-size: calc(var(--fs-large) * var(--card-font-scale, 1)); font-weight: 600; color: var(--text);
}
.chart-header h3 { font-weight: 500; }
.daily-breakdown-header h3 { margin: 0; }

.theme-toggle {
  background: var(--card-bg); border: 1px solid var(--border); color: var(--text);
  padding: 0.5rem; border-radius: var(--radius); cursor: pointer; font-size: calc(var(--fs-medium) * var(--card-font-scale, 1));
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s; box-shadow: var(--shadow);
}
.theme-toggle:hover { background: var(--accent); color: var(--color-text-on-accent); }

.skip-link:focus { left: 0; }

.settings-link {
  display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box; white-space: nowrap;
  color: var(--text); text-decoration: none; background: var(--card-bg); padding: 0.5rem 1rem;
  border-radius: var(--radius); font-size: calc(var(--fs-small) * var(--card-font-scale, 1)); border: 1px solid var(--border);
  box-shadow: var(--shadow); transition: background 0.2s;
}
.settings-link:hover { background: var(--accent); color: var(--color-text-on-accent); }

/* ── Tab bar ────────────────────────────────────────────────────────────── */
#tab-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem 0;
  border-bottom: 2px solid var(--border);
  flex-wrap: wrap;
}

.dashboard-tab {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius);
  font-size: calc(var(--fs-small) * var(--card-font-scale, 1));
  cursor: pointer;
  transition: background 0.2s;
  font-weight: 500;
}

.dashboard-tab.active {
  background: var(--accent);
  color: var(--color-text-on-accent);
  border-color: var(--accent);
}

.dashboard-tab:hover {
  background: var(--accent);
  color: var(--color-text-on-accent);
}

#dashboard-container {
  position: relative;
  width: 100%;
}

.dashboard-block {
  background: transparent;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.dashboard-block > * {
  width: 100%;
  box-sizing: border-box;
}

.dashboard-block.sortable-ghost {
  opacity: 0.4;
  background: var(--accent);
}

.dashboard-block.sortable-chosen {
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

/* Responsive: stack vertically on mobile */
@media (max-width: 768px) {
  #dashboard-container {
    position: static !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .dashboard-block {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
  }
}

/* Flow Card */
.flow-card {
  display: flex; align-items: center; justify-content: space-around; background: var(--card-bg);
  padding: 1rem; border-radius: var(--radius); flex-wrap: wrap;
  gap: 1rem; box-shadow: var(--shadow); border: 1px solid var(--border);
  height: 100%; box-sizing: border-box;
}
.flow-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; min-width: 130px; text-align: center; }
.flow-icon { font-size: calc(3.5rem * var(--card-font-scale, 1)); margin-bottom: 0.5rem; line-height: 1; }
.flow-icon i { font-size: inherit; color: var(--text); display: block; }
.flow-icon svg { width: 1em; height: 1em; color: var(--text); }
#icon-battery { transform: rotate(270deg); }
.flow-label { font-size: calc(var(--fs-small) * var(--card-font-scale, 1)); opacity: 0.8; color: var(--text-secondary); margin-bottom: 0.5rem; }
.flow-value { font-size: calc(var(--fs-large) * var(--card-font-scale, 1)); font-weight: 600; color: var(--text); margin-bottom: 0.1rem; }
.flow-sub { font-size: calc(var(--fs-small) * var(--card-font-scale, 1)); opacity: 0.7; margin-top: 0.15rem; }
.flow-arrow { font-size: calc(3.5rem * var(--card-font-scale, 1)); opacity: 0.7; transition: color 0.3s ease; min-width: 50px; text-align: center; color: var(--text-secondary); font-weight: bold; align-self: center; }
/* flow-arrow pulsing animation removed per design spec — no looping animations */

.solar-now-gauge { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.5rem; }
.solar-now-gauge .gauge-bar-bg { width: 80px; height: 8px; background: var(--border); border-radius: var(--radius-xs); overflow: hidden; }
.solar-now-gauge .gauge-bar-fill { height: 100%; width: 0%; background: var(--solar); border-radius: var(--radius-xs); transition: width 0.5s ease; }
.solar-now-gauge .gauge-percent { font-size: calc(var(--fs-small) * var(--card-font-scale, 1)); font-weight: 600; color: var(--text); min-width: 2rem; }

/* PV Today Card */
.pv-today-card {
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--border);
  padding: 0.3rem 0.5rem; height: 100%; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden; min-height: 0;
}
.pv-today-header { text-align: center; flex-shrink: 0; line-height: 1.1; }
.pv-today-title { font-weight: 600; font-size: calc(clamp(0.65rem, 1.8vw, 0.85rem) * var(--card-font-scale, 1)); color: var(--text); }
.pv-today-summary { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; margin-bottom: 10px; }
.pvt-metric { display: flex; flex-direction: column; flex-shrink: 0; min-width: 55px; }
.pvt-left { align-items: flex-end; text-align: right; }
.pvt-right { align-items: flex-start; text-align: left; }
.pvt-value { font-size: calc(clamp(0.7rem, 1.5vw, 0.95rem) * var(--card-font-scale, 1)); font-weight: 700; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pvt-label { font-size: calc(0.6rem * var(--card-font-scale, 1)); color: var(--text-secondary); }
.pvt-progress-wrap { flex: 1; display: flex; align-items: center; }
.pvt-progress-bar { width: 100%; height: 18px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.pvt-progress-fill { height: 100%; background: var(--amber-400); border-radius: 3px; transition: width 0.6s ease; }
.pv-today-timeline { flex-shrink: 0; display: flex; flex-direction: column; gap: 1px; padding: 0 0.25rem; }
.pvt-timeline-icon { font-size: calc(clamp(1rem, 2.5vw, 1.5rem) * var(--card-font-scale, 1)); cursor: default; }
.pvt-timeline-icons { display: flex; justify-content: space-around; padding: 0 0.1rem; margin-bottom: 0.5rem; }
.pvt-timeline-bar { display: flex; gap: 1px; }
.pvt-chart-container { flex: 1 1 0; min-height: 30px; min-width: 0; position: relative; }
.pvt-chart-container canvas { width: 100% !important; height: 100% !important; }
.pvt-legend { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; font-size: calc(0.7rem * var(--card-font-scale, 1)); color: var(--text-secondary); }
.pvt-legend-item { display: flex; align-items: center; gap: 0.15rem; white-space: nowrap; }
.pvt-legend-line { display: inline-block; width: 12px; height: 2px; border-radius: 1px; }
.pvt-legend-generated { background: var(--color-pv-generated); }
.pvt-legend-predicted { background: transparent; border-top: 2px dashed var(--color-pv-predicted); height: 0; width: 16px; }
.pvt-legend-now { background: transparent; border-top: 2px dashed var(--color-pv-now); height: 0; width: 16px; }
.pvt-legend-cloud { background: var(--color-cloud-bg); }
.pvt-no-data { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: calc(0.8rem * var(--card-font-scale, 1)); }
.forecast-source { font-size: calc(0.7rem * var(--card-font-scale, 1)); color: var(--text-secondary); opacity: 0.8; text-align: right; display: block; padding: 2px 8px 2px 0; flex-shrink: 0; font-style: italic; }

@media (max-width: 600px) {
  .pv-today-summary { flex-direction: column; gap: 0.2rem; }
  .pvt-left, .pvt-right { align-items: center; text-align: center; min-width: 0; }
  .pvt-progress-wrap { width: 100%; }
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
}
.stat-card {
  background: var(--card-bg);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.stat-label { font-size: calc(var(--fs-small) * var(--card-font-scale, 1)); opacity: 0.8; margin-bottom: 0.5rem; color: var(--text-secondary); }
.stat-value { font-size: calc(var(--fs-large) * var(--card-font-scale, 1)); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-sub { font-size: calc(var(--fs-small) * var(--card-font-scale, 1)); opacity: 0.7; margin-top: 0.25rem; }

/* Configurable gauge card — styles stay scoped to this component. */
.configurable-gauge-card {
  width: 100%;
  min-width: 0;
  min-height: 0;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  color: var(--text);
}
.configurable-gauge-title {
  width: 100%;
  overflow-wrap: anywhere;
  font-size: calc(var(--fs-small) * var(--card-font-scale, 1));
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-secondary);
}
.configurable-gauge-viz {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 1;
}
.configurable-gauge-card *, .configurable-gauge-card *::before, .configurable-gauge-card *::after { box-sizing: border-box; }
.configurable-gauge-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.configurable-gauge-fill,
.configurable-gauge-segment-fill {
  transition: stroke-dasharray 180ms ease, visibility 180ms ease;
}
.configurable-gauge-readout {
  pointer-events: none;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.configurable-gauge-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.configurable-gauge-unit {
  margin-left: 0.2em;
  font-size: 0.65em;
  color: var(--text-secondary);
}
.configurable-gauge-history {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-height: 3rem;
  overflow: visible;
}
.configurable-gauge-history-line {
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 480px) {
  .configurable-gauge-card { padding: 0.45rem 0.55rem; }
  .configurable-gauge-title { font-size: calc(0.75rem * var(--card-font-scale, 1)); }
  .configurable-gauge-history { max-height: 2.25rem; }
}

/* Bar Gauge Card */
.bar-gauge-card {
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--border);
  padding: 0.5rem 0.7rem; height: 100%; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 0.4rem; justify-content: center;
}
.bar-gauge-row { display: flex; align-items: center; gap: 0.5rem; width: 100%; }
.bar-gauge-label { font-size: calc(clamp(1.2rem, 3.6vw, 1.5rem) * var(--card-font-scale, 1)); color: var(--text-secondary); min-width: 60px; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-gauge-track { flex: 1; height: clamp(20px, 5vw, 32px); background: transparent; border-radius: var(--radius-xs); overflow: hidden; }
.bar-gauge-fill { height: 100%; border-radius: var(--radius-xs); transition: width 0.5s ease; min-width: 0; }
.bar-gauge-value { font-size: calc(clamp(1.3rem, 3.6vw, 1.6rem) * var(--card-font-scale, 1)); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; white-space: nowrap; }

/* Retro Bar Gauge (segmented LED) */
.bar-gauge-retro-card {
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--border);
  padding: 0.5rem 0.7rem; height: 100%; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 0.45rem; justify-content: center;
}
.bg-retro-row { display: flex; align-items: center; gap: 0.5rem; width: 100%; }
.bg-retro-label { font-size: calc(clamp(1.2rem, 3.6vw, 1.5rem) * var(--card-font-scale, 1)); color: var(--text-secondary); min-width: 60px; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-retro-segments { flex: 1; display: flex; gap: 2px; }
.bg-retro-seg { flex: 1; height: clamp(20px, 5vw, 36px); border-radius: 2px; transition: background 0.3s ease, box-shadow 0.3s ease; }
.bg-retro-value { font-size: calc(clamp(1.3rem, 3.6vw, 1.6rem) * var(--card-font-scale, 1)); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; white-space: nowrap; }

/* Chart Container */
.chart-container {
  background: var(--card-bg); padding: 1rem; border-radius: var(--radius);
  height: 100%; box-shadow: var(--shadow); border: 1px solid var(--border);
  width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column;
}
.chart-container canvas {
  flex: 1 1 0; min-height: 0; min-width: 0;
  width: 100% !important; height: 100% !important;
}
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-shrink: 0; }
.chart-controls { display: flex; gap: 0.5rem; }
.chart-controls button {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 0.4rem 0.8rem; border-radius: var(--radius); cursor: pointer; font-size: calc(var(--fs-small) * var(--card-font-scale, 1)); transition: background 0.2s;
}
.chart-controls button.active, .chart-controls button:hover { background: var(--accent); color: var(--color-text-on-accent); border-color: var(--accent); }
.chart-loading { flex: 1 1 0; display: flex; align-items: center; justify-content: center; color: var(--text); opacity: 0.5; font-size: calc(var(--fs-small) * var(--card-font-scale, 1)); min-height: 100px; }

/* Daily Breakdown Containers */
.daily-breakdown-container {
  background: var(--card-bg); border-radius: var(--radius); padding: 1rem;
  box-shadow: var(--shadow); border: 1px solid var(--border);
  width: 100%; height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column;
}
.daily-breakdown-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; flex-shrink: 0; }
.toggle-btn {
  background: transparent; border: none; color: var(--text); font-size: calc(var(--fs-medium) * var(--card-font-scale, 1));
  cursor: pointer; padding: 0.5rem; transition: transform 0.2s;
}
.daily-breakdown-content { flex: 1 1 0; min-height: 0; margin-top: 0.5rem; overflow: hidden; display: flex; flex-direction: column; }
.daily-breakdown-content.collapsed { flex: 0 0 0; min-height: 0; margin-top: 0; }
.daily-table-wrapper { overflow: auto; flex: 1 1 0; min-height: 0; }

/* Tables */
.energy-table { width: 100%; border-collapse: collapse; font-size: calc(var(--fs-small) * var(--card-font-scale, 1)); }
.energy-table th {
  position: sticky; top: 0; background: var(--card-bg); z-index: 1; padding: 0.75rem 0.5rem;
  text-align: right; border-bottom: 2px solid var(--border); color: var(--text-secondary); font-weight: 500;
}
.energy-table th:first-child { text-align: left; }
.energy-table td { padding: 0.5rem; text-align: right; border-bottom: 1px solid var(--border); color: var(--text); }
.energy-table td:first-child { text-align: left; font-weight: 500; color: var(--text-secondary); }
.energy-table tbody tr:hover { background: var(--bg); }

/* ───────── MERGED GRID CARD ───────── */
.grid-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 1rem;
  width: 100%; height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column;
}

.grid-date {
  font-size: calc(var(--fs-small) * var(--card-font-scale, 1));
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.8rem;
}

.grid-card .stat-card {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0.8rem 0.5rem;
}

.grid-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-around;
}
.grid-stats .stat-card {
  flex: 1 1 0;
  min-width: 100px;
}

/* ───────── NEW TIMELINE BAR ───────── */
#grid-timeline {
  position: relative;
}

.tl-tooltip {
  position: absolute;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: calc(0.7rem * var(--card-font-scale, 1));
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  box-shadow: var(--shadow);
}

.tl-bar {
  display: flex;
  height: 36px;
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 0.8rem;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}

.tl-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(0.7rem * var(--card-font-scale, 1));
  font-weight: 700;
  color: var(--color-text-on-accent);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.tl-segment.on  { background: var(--grid); color: var(--color-text-on-accent); }
.tl-segment.off { background: transparent; color: var(--text); }

[data-theme="dark"] .tl-bar { box-shadow: inset 0 1px 3px rgba(255,255,255,0.06); }
[data-theme="dark"] .tl-segment.off { background: #1e1e1e; color: var(--color-text-on-accent); }

.tl-labels {
  position: relative;
  height: 3rem;
}

.tl-tick {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}

.tl-time {
  font-size: calc(0.75rem * var(--card-font-scale, 1));
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.tl-date {
  font-size: calc(0.65rem * var(--card-font-scale, 1));
  color: var(--text-secondary);
  line-height: 1.2;
}

/* Mobile */
@media (max-width: 600px) {
  .flow-card { padding: 1rem; }
  .flow-icon { font-size: calc(2.5rem * var(--card-font-scale, 1)); }
  .flow-value { font-size: calc(var(--fs-large) * var(--card-font-scale, 1)); }
  .flow-arrow { font-size: calc(2.5rem * var(--card-font-scale, 1)); display: none; }
  .grid-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .grid-stats .stat-card { flex: none; min-width: 0; }
  .flow-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .flow-arrow { display: none; }
  .flow-item { min-height: auto; }
  .stat-value { font-size: calc(var(--fs-large) * var(--card-font-scale, 1)); }
  #signin-btn { display: none !important; }
  /* Signed out, the header row would be empty: drop it so it leaves no gap. */
  .container > header:not(.is-signed-in) .header-right { display: none; }
  .container > header { margin-bottom: 1rem; }
  .chart-container { height: auto; min-height: 300px; }
}


/* Config modal (already defined in editor.html but ensure global) */
.config-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.config-modal {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow: auto;
}
.config-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
}
.config-modal-header h2 {
  margin: 0;
  font-size: calc(1.3rem * var(--card-font-scale, 1));
}
.close-btn {
  background: none;
  border: none;
  font-size: calc(1.5rem * var(--card-font-scale, 1));
  cursor: pointer;
  color: var(--text);
}
.config-modal-body {
  padding: 1rem;
}
.form-group {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-group label {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: calc(0.9rem * var(--card-font-scale, 1));
}
.form-group input[type="text"],
.form-group input[type="number"] {
  padding: 0.5rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
}
.form-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* Toggle switches (shared across settings and editor) */
.toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--touch-target);
  flex-shrink: 0;
}
.toggle-wrap label {
  font-size: calc(0.85rem * var(--card-font-scale, 1));
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.toggle-switch {
  position: relative;
  width: 44px; height: 26px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0; width: 0; height: 0;
}
.toggle-switch .slider {
  position: absolute;
  inset: 0;
  background: var(--toggle-off);
  border-radius: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-switch .slider::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: var(--color-text-on-accent);
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.toggle-switch input:checked + .slider {
  background: var(--success);
}
.toggle-switch input:checked + .slider::before {
  transform: translateX(18px);
}

/* Switch Block */
.switch-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.switch-label { font-size: calc(var(--fs-base, 1rem) * var(--card-font-scale, 1)); font-weight: 500; color: var(--text); }
.switch-control { display: flex; align-items: center; gap: 0.75rem; }
.switch-state { font-size: calc(var(--fs-small) * var(--card-font-scale, 1)); color: var(--text-secondary); min-width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; }

/* Action toggle: the same 44x26 switch as Settings and the Controls safety
   switches (sizes from .toggle-switch; colours in cards.css). */
.toggle-switch.action-toggle { width: 44px; height: 26px; }
.switch-state:empty { display: none; }

/* Switch error state: red flash + shake */
.switch-block.switch-error .toggle-switch .slider { background: var(--color-danger, #dc2626); box-shadow: 0 0 0 2px var(--color-danger, #dc2626); }
.switch-block.switch-error { animation: switch-shake 0.4s ease; }
.switch-block.switch-error .switch-state { color: var(--color-danger, #dc2626); }
@keyframes switch-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* State Select Block */
.state-select-block {
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.state-select-label { font-size: calc(var(--fs-base, 1rem) * var(--card-font-scale, 1)); font-weight: 500; color: var(--text); margin-bottom: 0.5rem; }
.state-select-buttons { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.state-btn {
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: calc(var(--fs-small) * var(--card-font-scale, 1));
  cursor: pointer;
  transition: all 0.15s;
}
.state-btn:hover { background: var(--accent-focus); color: var(--text); }
.state-btn.active { background: var(--state-color, var(--accent)); color: var(--color-text-on-accent, #fff); border-color: var(--state-color, var(--accent)); }
.state-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.state-select-dropdown {
  width: 100%;
  padding: 0.45rem 0.6rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: calc(var(--fs-base, 1rem) * var(--card-font-scale, 1));
  min-height: 38px;
  cursor: pointer;
}
.state-select-dropdown:disabled { opacity: 0.55; cursor: not-allowed; }
.state-select-empty {
  padding: 0.6rem 0.75rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: calc(var(--fs-small) * var(--card-font-scale, 1));
  text-align: center;
}
.state-select-status { font-size: calc(var(--fs-tiny, 0.75rem) * var(--card-font-scale, 1)); color: var(--color-danger, #dc2626); margin-top: 0.25rem; min-height: 1rem; }

.config-modal-footer {
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}
.config-btn-cancel,
.config-btn-save {
  padding: 0.6rem 1.2rem;
  border-radius: 0.4rem;
  border: none;
  cursor: pointer;
  font-size: calc(0.95rem * var(--card-font-scale, 1));
}
.config-btn-cancel {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.config-btn-save {
  background: var(--accent);
  color: var(--color-text-on-accent);
}

/* ───────── Flow Card 2 ───────── */
.flow-card-2 {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 1rem;
  width: 100%; height: 100%; box-sizing: border-box;
}

.topo-grid {
  display: grid;
  grid-template-columns: 1fr 130px 1fr;
  grid-template-rows: 1fr 260px 1fr;
  gap: 0.25rem;
  align-items: center;
  justify-items: center;
  position: relative;
}

/* Node circles — icon + value inside */
.topo-node-circle {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 2px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
  padding: 0.25rem;
  box-sizing: border-box;
}
.topo-node-circle i {
  font-size: calc(2.2rem * var(--card-font-scale, 1));
  color: var(--text-secondary);
  transition: color 0.3s;
  line-height: 1;
}

.topo-node {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  z-index: 1;
}

.topo-label {
  font-size: calc(0.7rem * var(--card-font-scale, 1)); font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
}

.topo-value {
  font-size: calc(0.9rem * var(--card-font-scale, 1)); font-weight: 600; color: var(--text);
  line-height: 1;
}
.topo-pct {
  font-size: calc(1.4rem * var(--card-font-scale, 1)); font-weight: 700; color: var(--solar);
  line-height: 1;
}

.topo-sub {
  font-size: calc(0.9rem * var(--card-font-scale, 1)); color: var(--text-secondary);
  line-height: 1;
}

/* Center hub */
.topo-center {
  z-index: 1;
}
.topo-hub {
  width: 50px; height: 78px;
  border-radius: 8px;
  background: var(--accent);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-on-accent); font-size: calc(0.8rem * var(--card-font-scale, 1)); font-weight: 700;
  letter-spacing: 0.05em;
  transition: background 0.5s, background-color 0.5s;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
}
.topo-hub-img {
  display: none;
}

/* Grid positions: 3x3 */
.topo-solar   { grid-column: 2; grid-row: 1; }
.topo-grid-node { grid-column: 1; grid-row: 2; }
.topo-center  { grid-column: 2; grid-row: 2; }
.topo-home    { grid-column: 3; grid-row: 2; }
.topo-battery { grid-column: 2; grid-row: 3; }

/* ── Flow lines ── */
.topo-line {
  position: absolute; z-index: 0;
  background: var(--border);
  opacity: 0.15;
  transition: opacity 0.3s, background 0.3s;
}
.topo-line.active {
  opacity: 1;
}
.topo-line::before {
  content: '';
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
}
.topo-line.active::before {
  opacity: 1;
}

/* Vertical lines — dot travels along Y axis */
.topo-line-solar::before,
.topo-line-battery::before {
  left: 50%; top: 0; transform: translateX(-50%);
}
.topo-line-solar.active::before {
  animation: dot-v 1.4s linear infinite;
}
.topo-line-solar.reverse::before {
  animation: dot-v 1.4s linear infinite reverse;
}
.topo-line-battery.active::before {
  animation: dot-v 1.4s linear infinite;
}
.topo-line-battery.reverse::before {
  animation: dot-v 1.4s linear infinite reverse;
}
@keyframes dot-v {
  0%   { top: 0%; }
  100% { top: calc(100% - 7px); }
}

/* Horizontal lines — dot travels along X axis */
.topo-line-grid::before,
.topo-line-home::before {
  top: 50%; left: 0; transform: translateY(-50%);
}
.topo-line-grid.active::before {
  animation: dot-h 1.4s linear infinite;
}
.topo-line-grid.reverse::before {
  animation: dot-h 1.4s linear infinite reverse;
}
.topo-line-home.active::before {
  animation: dot-h 1.4s linear infinite;
}
.topo-line-home.reverse::before {
  animation: dot-h 1.4s linear infinite reverse;
}
@keyframes dot-h {
  0%   { left: 0%; }
  100% { left: calc(100% - 7px); }
}

/* Vertical line: solar circle → hub */
.topo-line-solar {
  left: 50%; top: 10%;
  width: 3px;
  height: calc(50% - 39px - 10%);
  transform: translateX(-50%);
}
/* Vertical line: hub → battery circle */
.topo-line-battery {
  left: 50%; top: calc(50% + 39px);
  width: 3px;
  height: calc(50% - 39px - 10%);
  transform: translateX(-50%);
}
/* Horizontal line: grid circle → hub */
.topo-line-grid {
  top: 50%; left: 14%;
  height: 3px;
  width: calc(50% - 25px - 14%);
  transform: translateY(-50%);
}
/* Horizontal line: hub → home circle */
.topo-line-home {
  top: 50%; left: calc(50% + 25px);
  height: 3px;
  width: calc(50% - 25px - 14%);
  transform: translateY(-50%);
}

@keyframes topo-flow {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

@media (max-width: 480px) {
  .topo-grid {
    grid-template-columns: 1fr 100px 1fr;
    grid-template-rows: 1fr 180px 1fr;
  }
  .topo-node-circle { width: 90px; height: 90px; }
  .topo-node-circle i { font-size: calc(1.8rem * var(--card-font-scale, 1)); }
  .topo-hub { width: 48px; height: 76px; font-size: calc(0.55rem * var(--card-font-scale, 1)); }
  .topo-line-solar  { top: 10%; height: calc(50% - 38px - 10%); }
  .topo-line-battery { top: calc(50% + 38px); height: calc(50% - 38px - 10%); }
  .topo-line-grid   { left: 14%; width: calc(50% - 24px - 14%); }
  .topo-line-home   { left: calc(50% + 24px); width: calc(50% - 24px - 14%); }
}

/* ───────── Flow Card Square ───────── */
.flow-card-square {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 0.5rem;
  width: 100%; height: 100%; box-sizing: border-box;
}
.fcs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.25rem;
}
.fcs-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 3rem;
}
.fcs-icon {
  font-size: calc(4rem * var(--card-font-scale, 1));
  color: var(--text-secondary);
  transition: color 0.3s;
  flex-shrink: 0;
  width: 4rem;
  text-align: center;
}
.fcs-inverter-icon {
  font-size: calc(0.75rem * var(--card-font-scale, 1));
  font-weight: 700;
  color: var(--color-text-on-accent);
  background: var(--accent);
  width: 3rem;
  height: 5rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fcs-cell[id*="fcs-solar"] { justify-content: flex-start; align-items: flex-start; }
.fcs-cell[id*="fcs-battery"] { justify-content: flex-end; align-items: flex-start; }
.fcs-cell[id*="fcs-grid"] { justify-content: flex-end; align-items: flex-end; }
.fcs-cell[id*="fcs-inverter"] { justify-content: flex-start; align-items: flex-end; }

.fcs-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.fcs-label {
  font-size: calc(0.7rem * var(--card-font-scale, 1));
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fcs-value {
  font-size: calc(var(--fs-small) * var(--card-font-scale, 1));
  font-weight: 600;
  color: var(--text);
}
.fcs-sub {
  font-size: calc(0.65rem * var(--card-font-scale, 1));
  color: var(--text-secondary);
}

/* ───────── Flow Card Square 2 ───────── */
.flow-card-square2 {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 0.5rem;
  width: 100%; height: 100%; box-sizing: border-box;
}
.fcs2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.25rem;
  position: relative;
}
.fcs2-cell {
  display: flex; align-items: center; gap: 0.5rem; padding: 3rem; z-index: 1;
}
.fcs2-icon { font-size: calc(4rem * var(--card-font-scale, 1)); color: var(--text-secondary); transition: color 0.3s; flex-shrink: 0; width: 4rem; text-align: center; }
.fcs2-inv { font-size: calc(0.75rem * var(--card-font-scale, 1)); font-weight: 700; color: var(--color-text-on-accent); background: var(--accent); width: 3rem; height: 5rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.fcs2-inv-img { width: 100%; height: 100%; object-fit: cover; }
.fcs-inv-img { width: 3rem; height: 5rem; object-fit: cover; border-radius: 6px; }
.fcs2-info { display: flex; flex-direction: column; gap: 0.1rem; }
.fcs2-label { font-size: calc(0.7rem * var(--card-font-scale, 1)); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.fcs2-value { font-size: calc(var(--fs-small) * var(--card-font-scale, 1)); font-weight: 600; color: var(--text); }
.fcs2-sub { font-size: calc(0.65rem * var(--card-font-scale, 1)); color: var(--text-secondary); }
.fcs2-cell[id*="fcs2-solar"] { justify-content: flex-start; align-items: flex-start; }
.fcs2-cell[id*="fcs2-battery"] { justify-content: flex-end; align-items: flex-start; }
.fcs2-cell[id*="fcs2-inverter"] { justify-content: flex-start; align-items: flex-end; }
.fcs2-cell[id*="fcs2-grid"] { justify-content: flex-end; align-items: flex-end; }
.fcs2-cell[id*="fcs2-grid"] .fcs2-icon { margin-right: -3.5rem; }

/* Flow lines: X axis (horizontal) and Y axis (vertical) between cells */
.fcs2-line { position: absolute; z-index: 0; background: transparent; transition: background 0.3s; pointer-events: none; }
.fcs2-line::before { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: inherit; opacity: 0; }
.fcs2-line.active::before { opacity: 1; }
/* Top horizontal: solar → battery */
/* Horizontal lines: between icon edges, auto-sizing */
.fcs2-line-top { top: calc(3rem + 2rem); left: calc(3rem + 4rem); right: calc(3rem + 4rem); height: 2px; }
.fcs2-line-top.active::before { animation: fcs2-dot-h 1.4s linear infinite; }
.fcs2-line-top.reverse::before { animation: fcs2-dot-h 1.4s linear infinite reverse; }
.fcs2-line-bottom { bottom: calc(3rem + 2rem); left: calc(3rem + 3rem); right: calc(3rem + 4rem); height: 2px; }
.fcs2-line-bottom.active::before { animation: fcs2-dot-h 1.4s linear infinite; }
.fcs2-line-bottom.reverse::before { animation: fcs2-dot-h 1.4s linear infinite reverse; }
/* Vertical lines: between icon edges, auto-sizing */
.fcs2-line-left { left: calc(3rem + 2rem); top: calc(3rem + 4rem); bottom: calc(3rem + 5rem); width: 2px; }
.fcs2-line-left.active::before { animation: fcs2-dot-v 1.4s linear infinite; }
.fcs2-line-left.reverse::before { animation: fcs2-dot-v 1.4s linear infinite reverse; }
.fcs2-line-right { right: calc(3rem + 2rem); top: calc(3rem + 4rem); bottom: calc(3rem + 4rem); width: 2px; }
.fcs2-line-right.active::before { animation: fcs2-dot-v 1.4s linear infinite; }
.fcs2-line-right.reverse::before { animation: fcs2-dot-v 1.4s linear infinite reverse; }
@keyframes fcs2-dot-v { 0% { top: 0%; } 100% { top: calc(100% - 6px); } }
@keyframes fcs2-dot-h { 0% { left: 0%; } 100% { left: calc(100% - 6px); } }

/* Settings – dashboard tabs */
.dash-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

/* Settings – dashboard editor block list */
.block-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.block-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.block-transparent-label { font-size: calc(0.7rem * var(--card-font-scale, 1)); color: var(--text-secondary); display: flex; align-items: center; gap: 0.15rem; cursor: pointer; }

/* Transparency toggle */
body.transparent-blocks .flow-card,
body.transparent-blocks .fc-card,
body.transparent-blocks .pv-today-card,
body.transparent-blocks .chart-container,
body.transparent-blocks .daily-breakdown-container,
body.transparent-blocks .grid-card,
body.transparent-blocks .flow-card-2,
body.transparent-blocks .battery-block,
body.transparent-blocks .weather-block,
body.transparent-blocks .stat-card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Square corners toggle: dashboard cards, and the tiles and boxes inside
   them, lose their rounding (most use --radius; a few set their own). The
   header, banners and controls such as range pickers keep theirs. */
body.square-corners #dashboard-container { --radius: 0px; }
body.square-corners #dashboard-container :is(.dashboard-block, .grid-stack-item-content, .fc-day, .topo-hub, .so-hub-box, .ep-tile, .so-tile, .stat-card) { border-radius: 0 !important; }

/* Screen-reader-only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Accessibility — keyboard focus indicators */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
button:focus-visible, .fetch-btn:focus-visible, .toggle-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Ensure interactive controls have minimum 44px touch target */
button, .fetch-btn, .toggle-btn, .sub-tab-btn, .main-tab-btn {
  min-height: 44px;
  min-width: 44px;
}

/* ═══════════════════════════════════════════════════════════
   Settings Page Styles (extracted from settings.html)
   ═══════════════════════════════════════════════════════════ */

/* ── Settings Layout ─────────────────────────────────────────── */
.stg-shell { display: flex; min-height: 100vh; }
.stg-sidebar { width: 200px; flex-shrink: 0; background: var(--card-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1rem 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 10; }
.stg-logo { padding: 0 1rem 1rem; font-weight: 700; font-size: calc(1.1rem * var(--card-font-scale, 1)); color: var(--accent); letter-spacing: -0.02em; }
.stg-nav { list-style: none; flex: 1; }
.stg-nav li { margin: 1px 0.5rem; }
.stg-nav-btn { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.75rem; border: none; background: transparent; color: var(--text-secondary); font-size: calc(0.85rem * var(--card-font-scale, 1)); cursor: pointer; border-radius: var(--radius-sm); transition: all 0.15s; text-align: left; font-weight: 500; }
.stg-nav-btn:hover { background: var(--bg); color: var(--text); }
.stg-nav-btn.active { background: var(--accent); color: var(--color-text-on-accent); }
.stg-nav-icon { font-size: calc(1.1rem * var(--card-font-scale, 1)); width: 1.3rem; text-align: center; flex-shrink: 0; }
.stg-nav-badge { margin-left: auto; background: var(--accent); color: var(--color-text-on-accent); font-size: calc(0.65rem * var(--card-font-scale, 1)); padding: 0.1rem 0.4rem; border-radius: 99px; font-weight: 600; min-width: 1.2rem; text-align: center; display: none; }
.stg-nav-badge.dirty { display: block; background: var(--accent); }
.stg-sidebar-footer { padding: 0.75rem 1rem; border-top: 1px solid var(--border); }
.stg-back-link { color: var(--text-secondary); text-decoration: none; font-size: calc(0.8rem * var(--card-font-scale, 1)); display: flex; align-items: center; gap: 0.35rem; }
.stg-back-link:hover { color: var(--accent); }

.stg-main { flex: 1; min-width: 0; padding: 1rem 1.25rem 5rem; }
.stg-section { display: none; }
.stg-section.active { display: block; animation: stgFadeIn 0.2s ease; }
.sub-tab-content { display: none; }
.sub-tab-content.active { display: block; }
@keyframes stgFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.stg-section-header { margin-bottom: 1.25rem; }
.stg-section-header h2 { font-size: calc(1.4rem * var(--card-font-scale, 1)); font-weight: 700; margin: 0 0 0.25rem; color: var(--text); }
.stg-section-header p { color: var(--text-secondary); font-size: calc(0.85rem * var(--card-font-scale, 1)); margin: 0; }

/* ── Cards ─────────────────────────────────────────── */
.stg-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.stg-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.stg-card-title { font-weight: 600; font-size: calc(0.95rem * var(--card-font-scale, 1)); color: var(--text); display: flex; align-items: center; gap: 0.5rem; }
.stg-card-title .stg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stg-card-title .stg-dot.ok   { background: var(--color-success); }
.stg-card-title .stg-dot.warn { background: var(--color-info); }
.stg-card-title .stg-dot.off  { background: var(--color-neutral); }

/* ── Sub-nav ───────────────────────────────────────── */
.stg-subnav { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.stg-subnav-btn { padding: 0.4rem 0.85rem; border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); border-radius: var(--radius); font-size: calc(0.8rem * var(--card-font-scale, 1)); cursor: pointer; transition: all 0.15s; white-space: nowrap; font-weight: 500; }
.stg-subnav-btn:hover { border-color: var(--accent); color: var(--text); }
.stg-subnav-btn.active { background: var(--accent); color: var(--color-text-on-accent); border-color: var(--accent); }

/* ── Section Dividers within Device Cards ─────────── */
.stg-section-divider { display: flex; align-items: center; gap: 0.5rem; margin: 0.85rem 0 0.75rem; font-size: calc(0.72rem * var(--card-font-scale, 1)); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.stg-section-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.stg-section-divider .stg-divider-icon { font-size: calc(0.85rem * var(--card-font-scale, 1)); flex-shrink: 0; }
.stg-section-divider:first-child { margin-top: 0; }

/* ── Device Cards ──────────────────────────────────── */
.stg-device-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
@media (max-width: 800px) { .stg-device-grid { grid-template-columns: 1fr; } }
/* Auto-grid for device containers inside sub-tabs */
[id$="-devices-container"], #external-sources-container, #bms-devices-container, #dongle-devices-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
@media (max-width: 800px) { [id$="-devices-container"], #external-sources-container, #bms-devices-container, #dongle-devices-container { grid-template-columns: 1fr; } }
.stg-device { background: var(--bg); border: 1px solid var(--border); border-radius: 0.6rem; overflow: hidden; }
.stg-device-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem; cursor: pointer; user-select: none; }
.stg-device-bar:hover { background: var(--card-bg); }
.stg-device-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stg-device-status.on  { background: var(--color-success); }
.stg-device-status.off { background: var(--color-neutral); }
.stg-device-name { font-weight: 600; font-size: calc(0.85rem * var(--card-font-scale, 1)); color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg-device-type { font-size: calc(0.7rem * var(--card-font-scale, 1)); padding: 0.15rem 0.45rem; border-radius: 99px; background: var(--border); color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
.stg-device-arrow { color: var(--text-secondary); font-size: calc(0.7rem * var(--card-font-scale, 1)); transition: transform 0.2s; }
.stg-device.open .stg-device-arrow { transform: rotate(180deg); }
.stg-device-body { display: none; padding: 0 0.85rem 0.85rem; }
.stg-device.open .stg-device-body { display: block; }

/* Narrow centered forms for simple sections */
.stg-section-narrow { max-width: 700px; }
/* Dashboard block cards 2-across */
.stg-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 900px) { .stg-dash-grid { grid-template-columns: 1fr; } }

/* ── Form elements ──────────────────────────────────── */
.stg-form-group { margin-bottom: 1.2rem; }
.stg-form-group label { display: block; margin-bottom: 0.4rem; font-weight: 600; font-size: calc(0.78rem * var(--card-font-scale, 1)); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.stg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .stg-form-row { grid-template-columns: 1fr; } }
.stg-input, .stg-select { width: 100%; padding: 0.7rem 0.85rem; background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: calc(0.9rem * var(--card-font-scale, 1)); transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit; }
.stg-input:focus, .stg-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,158,11,0.12); background: var(--card-bg); }
.stg-input::placeholder { color: var(--text-secondary); opacity: 0.4; }
.stg-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: calc(0.9rem * var(--card-font-scale, 1)); margin-bottom: 0.5rem; }
.stg-toggle input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); cursor: pointer; }

/* ── Buttons ────────────────────────────────────────── */
.stg-btn { padding: 0.6rem 1.2rem; border: 2px solid var(--border); border-radius: var(--radius-sm); font-size: calc(0.85rem * var(--card-font-scale, 1)); font-weight: 600; cursor: pointer; transition: all 0.15s; background: var(--bg); color: var(--text); white-space: nowrap; }
.stg-btn:hover { border-color: var(--accent); color: var(--accent); }
.stg-btn.primary { background: var(--accent); color: var(--color-text-on-accent); border-color: var(--accent); }
.stg-btn.primary:hover { opacity: 0.9; }
.stg-btn.add { background: var(--color-success); color: var(--color-text-on-accent); border-color: var(--color-success); }
.stg-btn.add:hover { background: var(--color-success-hover); border-color: var(--color-success-hover); }
.stg-btn.danger { background: var(--color-danger); color: var(--color-text-on-accent); border-color: var(--color-danger); }
.stg-btn.danger:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }
.stg-btn:active { transform: scale(0.97); }

/* Color-coded action buttons for device cards */
button.fetch-btn { padding: 0.55rem 1.15rem; border: none; border-radius: 0.45rem; cursor: pointer; font-size: calc(0.85rem * var(--card-font-scale, 1)); font-weight: 600; transition: all 0.15s; }
button.fetch-btn:hover { opacity: 0.9; }
button.fetch-btn:active { transform: scale(0.97); }
button.fetch-btn.add-btn, button[id^="add-"] { background: var(--color-success); color: var(--color-text-on-accent); }
button.fetch-btn.add-btn:hover, button[id^="add-"]:hover { background: var(--color-success-hover); }
button.remove-btn, button[data-action*="remove"] { background: var(--color-danger); color: var(--color-text-on-accent); border: none; padding: 0.45rem 0.85rem; border-radius: 0.4rem; cursor: pointer; font-weight: 600; font-size: calc(0.8rem * var(--card-font-scale, 1)); transition: background 0.15s; }
button.remove-btn:hover, button[data-action*="remove"]:hover { background: var(--color-danger-hover); }
button.test-dongle, button.test-mqtt-broker, button.test-mqtt-topic-btn, button.test-modbus, button[id*="test"] { background: var(--color-info); color: var(--color-text-on-accent); }
button.test-dongle:hover, button.test-mqtt-broker:hover, button.test-mqtt-topic-btn:hover, button.test-modbus:hover, button[id*="test"]:hover { background: var(--color-warning-hover); }

/* ── Card save bar (moved into Branding card) ─────── */
.stg-card-savebar { position: absolute; bottom: 0; left: 0; right: 0; background: var(--bg); border-top: 1px solid var(--border); padding: 0.65rem 1.25rem; display: flex; align-items: center; gap: 1rem; border-radius: 0 0 var(--radius) var(--radius); }
.stg-card-savebar .stg-dirty-count { font-size: calc(0.78rem * var(--card-font-scale, 1)); color: var(--accent); font-weight: 600; display: none; }
.stg-card-savebar .stg-dirty-count.show { display: block; }
.stg-card-savebar .stg-save-status { font-size: calc(0.78rem * var(--card-font-scale, 1)); flex: 1; }
.stg-card-savebar .stg-save-status.ok  { color: var(--color-success); }
.stg-card-savebar .stg-save-status.err { color: var(--color-danger); }
.stg-card-savebar button { margin-left: auto; }

/* ── Floating save bar (legacy, kept for compatibility) ── */
.stg-savebar { position: fixed; bottom: 0; left: 200px; right: 0; background: var(--card-bg); border-top: 1px solid var(--border); padding: 0.75rem 2rem; display: flex; align-items: center; gap: 1rem; z-index: 20; box-shadow: 0 -4px 12px rgba(0,0,0,0.08); }
.stg-savebar .stg-dirty-count { font-size: calc(0.8rem * var(--card-font-scale, 1)); color: var(--accent); font-weight: 600; display: none; }
.stg-savebar .stg-dirty-count.show { display: block; }
.stg-savebar .stg-save-status { font-size: calc(0.8rem * var(--card-font-scale, 1)); flex: 1; }
.stg-savebar .stg-save-status.ok  { color: var(--color-success); }
.stg-savebar .stg-save-status.err { color: var(--color-danger); }
.stg-savebar button { padding: 0.6rem 1.5rem; border-radius: 0.4rem; border: none; background: var(--accent); color: var(--color-text-on-accent); font-weight: 600; font-size: calc(0.85rem * var(--card-font-scale, 1)); cursor: pointer; }
.stg-savebar button:hover { opacity: 0.9; }

/* ── Metrics search ─────────────────────────────────── */
.stg-metrics-toolbar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.stg-search { flex: 1; max-width: 300px; padding: 0.5rem 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; color: var(--text); font-size: calc(0.85rem * var(--card-font-scale, 1)); }
.stg-search:focus { outline: none; border-color: var(--accent); }
.stg-table-wrap { overflow-x: auto; }
.stg-table { width: 100%; border-collapse: collapse; font-size: calc(0.85rem * var(--card-font-scale, 1)); }
.stg-table th { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 2px solid var(--border); color: var(--text-secondary); font-weight: 600; font-size: calc(0.7rem * var(--card-font-scale, 1)); text-transform: uppercase; letter-spacing: 0.04em; }
.stg-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); color: var(--text); }
.stg-table tr:hover td { background: var(--bg); }
.stg-row-hidden { display: none; }
.stg-table .stg-row-hidden { display: none; }

/* ── Status messages ────────────────────────────────── */
.stg-status { padding: 0.5rem 0.75rem; border-radius: 0.4rem; font-size: calc(0.8rem * var(--card-font-scale, 1)); margin-top: 0.5rem; }
.stg-status.info { background: var(--color-info-bg); color: var(--color-info); border: 1px solid var(--color-info-border); }
.stg-status.ok   { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.stg-status.err  { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger-border); }

/* ── Modal ──────────────────────────────────────────── */
.stg-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 100; padding: 1rem; }
.stg-modal.show { display: flex; }
.stg-modal-box { background: var(--card-bg); border-radius: 0.75rem; padding: 1rem; min-width: 300px; max-width: 450px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }

/* BMS scan modal — wider for device list */
.bms-scan-box { max-width: 560px !important; }
.bms-scan-device {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; transition: background 0.15s, border-color 0.15s;
  margin-bottom: 2px;
}
.bms-scan-device:hover { background: var(--hover-bg, rgba(255,255,255,0.05)); border-color: var(--border-color, #333); }
.bms-scan-device.selected { background: var(--color-info-bg); border-color: rgba(245,158,11,0.25); }
.bms-scan-rssi-bar {
  width: 48px; height: 6px; border-radius: 3px; flex-shrink: 0;
  background: var(--dark-border); overflow: hidden;
}
.bms-scan-rssi-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.bms-scan-rssi-fill.strong  { background: var(--color-success); }
.bms-scan-rssi-fill.medium  { background: #eab308; }
.bms-scan-rssi-fill.weak    { background: #ef4444; }
.bms-scan-mac    { font-family: monospace; font-size: calc(0.8rem * var(--card-font-scale, 1)); min-width: 130px; }
.bms-scan-name   { flex: 1; font-size: calc(0.85rem * var(--card-font-scale, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bms-scan-bms-tag { font-size: calc(0.7rem * var(--card-font-scale, 1)); padding: 0.15rem 0.4rem; border-radius: var(--radius-xs); white-space: nowrap; }
.bms-scan-bms-tag.match  { background: var(--color-success-bg); color: var(--color-success); }
.bms-scan-bms-tag.unknown { background: #eab30818; color: #eab308; }
.bms-scan-rssi-db { font-size: calc(0.75rem * var(--card-font-scale, 1)); min-width: 36px; text-align: right; color: var(--text-secondary); }
.bms-scan-spinner {
  display: inline-block; width: 14px; height: 14px; border: 2px solid var(--text-secondary);
  border-top-color: var(--color-info); border-radius: 50%; animation: bms-spin 0.6s linear infinite;
  vertical-align: middle; margin-right: 0.5rem;
}
@keyframes bms-spin { to { transform: rotate(360deg); } }
.bms-scan-empty { text-align: center; padding: 1.25rem 1rem; color: var(--text-secondary); font-size: calc(0.9rem * var(--card-font-scale, 1)); }

/* Preserve legacy status classes for settings.js compatibility */
.status { padding: 0.5rem 0.75rem; border-radius: 0.4rem; font-size: calc(0.8rem * var(--card-font-scale, 1)); margin-top: 0.5rem; }
.status.success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.status.error   { background: var(--color-danger-bg);  color: var(--color-danger);  border: 1px solid var(--color-danger-border); }
.status.info    { background: var(--color-info-bg);    color: var(--color-info);    border: 1px solid var(--color-info-border); }
.status.warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); }
.status.warn    { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); }

/* Narrow centered forms for read-only sections */
#stg-section-solar .stg-card, #stg-section-savings .stg-card,
#stg-section-backup .stg-card, #stg-section-branding .stg-card,
#stg-section-help .stg-card, #stg-section-metrics .stg-card,
#stg-section-solar .stg-section-header, #stg-section-savings .stg-section-header,
#stg-section-backup .stg-section-header, #stg-section-branding .stg-section-header,
#stg-section-help .stg-section-header, #stg-section-metrics .stg-section-header {
  max-width: 700px;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .stg-sidebar { width: 52px; padding: 0.75rem 0; }
  .stg-sidebar .stg-logo { display: none; }
  .stg-nav-btn { justify-content: center; padding: 0.6rem; }
  .stg-nav-btn span:not(.stg-nav-icon) { display: none; }
  .stg-nav-badge { display: none !important; }
  .stg-sidebar-footer { display: none; }
  .stg-main { padding: 1rem 1rem 5rem; }
  .stg-savebar { left: 52px; padding: 0.6rem 1rem; }
}
@media (max-width: 480px) {
  .stg-shell { flex-direction: column; }
  .stg-sidebar { width: 100%; height: auto; position: relative; flex-direction: row; padding: 0.5rem; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .stg-nav { display: flex; gap: 0.25rem; }
  .stg-nav li { margin: 0; }
  .stg-nav-btn { flex-direction: column; gap: 0.15rem; font-size: calc(0.65rem * var(--card-font-scale, 1)); padding: 0.4rem 0.5rem; white-space: nowrap; }
  .stg-nav-btn .stg-nav-icon { font-size: calc(1rem * var(--card-font-scale, 1)); }
  .stg-nav-btn span:not(.stg-nav-icon) { display: block !important; font-size: calc(0.6rem * var(--card-font-scale, 1)); }
  .stg-main { padding: 0.75rem 0.75rem 5rem; }
  .stg-savebar { left: 0; }
}

/* Settings.js generated form elements — high contrast */
.settings-form input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.settings-form select, .settings-form textarea { width: 100%; padding: 0.7rem 0.85rem; background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: calc(0.9rem * var(--card-font-scale, 1)); font-family: inherit; margin-bottom: 0.2rem; }
.settings-form input[type="checkbox"], .settings-form input[type="radio"] { width: auto; padding: 0; accent-color: var(--accent); }
.settings-form input[type="color"] { width: 100%; height: 38px; padding: 2px; border: 2px solid var(--border); border-radius: 0.4rem; cursor: pointer; }
.settings-form input:focus, .settings-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,158,11,0.12); background: var(--card-bg); }
.settings-form input::placeholder { color: var(--text-secondary); opacity: 0.4; }
.test-status { font-size: calc(0.8rem * var(--card-font-scale, 1)); font-weight: 500; }
.note { font-size: calc(0.8rem * var(--card-font-scale, 1)); color: var(--text-secondary); margin-top: 0.25rem; }

/* Mapping rows inside device cards */
.metric-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); }
.metric-row:last-child { border-bottom: none; margin-bottom: 0; }
.metric-row select, .metric-row input[type="text"] { width: auto; flex: 1; min-width: 100px; }
.metric-row select, .metric-row .metric-name, .metric-row .entity-select { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remove-metric { flex-shrink: 0; padding: 0.45rem 0.75rem; margin: 0; min-height: 34px; font-size: calc(0.8rem * var(--card-font-scale, 1)); font-weight: 600; }
.mappings-list { margin-top: 0.25rem; }
.mappings-filter-bar { margin-bottom: 0.5rem; }
.mappings-filter-input { width: 100%; padding: 0.45rem 0.65rem; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; color: var(--text); font-size: calc(0.8rem * var(--card-font-scale, 1)); transition: border-color 0.15s; }
.mappings-filter-input:focus { outline: none; border-color: var(--accent); }
.mappings-filter-input::placeholder { color: var(--text-secondary); opacity: 0.5; }
.mappings-pagination { text-align: center; margin: 0.25rem 0 0.5rem; }
button.fetch-btn { background: var(--text-secondary); color: var(--color-text-on-accent); border: none; padding: 0.5rem 1rem; border-radius: 0.4rem; cursor: pointer; font-size: calc(0.85rem * var(--card-font-scale, 1)); font-weight: 500; margin-top: 0.5rem; }
button.fetch-btn:hover { opacity: 0.9; }
.test-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }
.backup-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }

/* ── Help Section Accordions ─────────────────────────── */
.help-search-wrap { max-width: 500px; }
.help-search-wrap .help-search { width: 100%; padding: 0.6rem 0.9rem; font-size: calc(0.9rem * var(--card-font-scale, 1)); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.help-search-wrap .help-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-alpha, rgba(245,158,11,0.12)); }

details.help-accordion { margin-bottom: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
details.help-accordion[open] { border-color: var(--accent); }
.help-summary { padding: 0.75rem 1rem; cursor: pointer; font-weight: 600; font-size: calc(0.95rem * var(--card-font-scale, 1)); background: var(--surface); user-select: none; display: flex; align-items: center; gap: 0.5rem; }
.help-summary:hover { background: var(--border); }
details.help-accordion[open] > .help-summary { background: var(--accent); color: var(--color-text-on-accent); }
.help-summary::-webkit-details-marker { display: none; }
.help-summary::before { content: '▶'; font-size: 0.7em; transition: transform 0.2s; margin-right: 0.25rem; flex-shrink: 0; }
details.help-accordion[open] > .help-summary::before { transform: rotate(90deg); }
.help-icon { font-size: 1.1em; flex-shrink: 0; }

.help-body { padding: 0.75rem 1.25rem 1rem; background: var(--bg); }
.help-body h4 { margin: 1rem 0 0.4rem; font-size: calc(0.9rem * var(--card-font-scale, 1)); color: var(--accent); }
.help-body h4:first-child { margin-top: 0; }
.help-body p, .help-body ul, .help-body ol { margin: 0.3rem 0 0.6rem; font-size: 0.88em; line-height: 1.55; }
.help-body ul, .help-body ol { padding-left: 1.5rem; }
.help-body li { margin-bottom: 0.25rem; }

/* Sub-accordions inside help */
details.help-sub { margin: 0.4rem 0; border: 1px solid var(--border); border-radius: 0.4rem; overflow: hidden; }
.help-sub-summary { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.88em; background: var(--surface); font-weight: 500; }
.help-sub-summary:hover { background: var(--border); }
.help-sub-summary::-webkit-details-marker { display: none; }
.help-sub-summary::before { content: '▸'; margin-right: 0.4rem; font-size: 0.75em; }
details.help-sub[open] > .help-sub-summary::before { content: '▾'; }
.help-sub-body { padding: 0.5rem 0.75rem 0.6rem 1.5rem; background: var(--bg); font-size: 0.85em; }

/* Badges */
.help-badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: var(--radius-xs); font-size: 0.72em; font-weight: 600; margin-right: 0.4rem; vertical-align: middle; }
.help-badge.must { background: var(--color-danger-hover); color: var(--color-text-on-accent); }
.help-badge.opt  { background: var(--text-secondary); color: var(--color-text-on-accent); }
.help-badge.info { background: var(--accent); color: var(--color-text-on-accent); }

/* Checklist */
.help-checklist { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.5rem 0; }
.help-checklist-item { display: flex; align-items: flex-start; gap: 0.3rem; font-size: 0.85em; }

/* Steps */
.help-steps { display: flex; flex-direction: column; gap: 0.8rem; }
.help-step { display: flex; gap: 0.75rem; align-items: flex-start; }
.help-step-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--color-text-on-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85em; }
.tuya-guide-step { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.35rem; }

/* Tables */
.help-table { width: 100%; border-collapse: collapse; font-size: 0.85em; margin: 0.5rem 0 0.75rem; }
.help-table th { text-align: left; padding: 0.4rem 0.5rem; background: var(--surface); border-bottom: 2px solid var(--border); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; }
.help-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); }
.help-table tr:last-child td { border-bottom: none; }
.help-table code { font-size: 0.9em; background: var(--surface); padding: 0.1rem 0.3rem; border-radius: 0.2rem; }

/* Links */
.help-link { color: var(--accent); text-decoration: underline; cursor: pointer; }
.help-link:hover { opacity: 0.8; }

/* Filtered-out state */
.help-accordion.help-hidden { display: none; }
details.help-sub.help-hidden { display: none; }

/* ── Orientation: Landscape on phones ────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  .container {
    padding: 0.35rem;
  }

  header {
    padding: 0.4rem 0.5rem;
    min-height: auto;
  }

  header h1 {
    font-size: calc(1rem * var(--card-font-scale, 1));
  }

  #dashboard-container {
    gap: 0.35rem;
  }

  .dashboard-block {
    padding: 0.4rem;
    min-height: auto;
  }

  .dashboard-block .block-title {
    font-size: calc(0.7rem * var(--card-font-scale, 1));
    margin-bottom: 0.2rem;
  }

  .block-value {
    font-size: calc(1.2rem * var(--card-font-scale, 1));
  }

  .block-unit {
    font-size: calc(0.65rem * var(--card-font-scale, 1));
  }

  .flow-card {
    padding: 0.5rem;
    gap: 0.3rem;
  }

  .flow-card .flow-number {
    font-size: calc(1rem * var(--card-font-scale, 1));
  }

  .section-header h2 {
    font-size: calc(1.1rem * var(--card-font-scale, 1));
  }

  /* Use 2-column grid in landscape */
  #dashboard-container {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  /* Shorter chart canvases */
  canvas {
    max-height: 180px !important;
  }

  /* Compact the topo/flow diagrams */
  .topo-center .flow-number {
    font-size: calc(1.4rem * var(--card-font-scale, 1));
  }
}

/* ── Accessibility: prefers-reduced-motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* First-run setup banner + setup wizard entry */
.setup-banner {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin: 0.75rem 0; padding: 0.75rem 1rem;
  /* Own text colour: inheriting the page's light text in dark mode left it
     unreadable on the light background. */
  background: #fff4e6; color: #3d2a12;
  border: 1px solid #f3d9b8; border-radius: var(--radius, 12px);
  font-size: calc(0.95rem * var(--card-font-scale, 1));
}
.setup-banner-btn {
  margin-left: auto; padding: 0.4rem 0.9rem;
  background: var(--accent, #d65a00); color: #fff;
  border-radius: 8px; text-decoration: none; font-weight: 600;
}
.setup-banner-btn:hover { background: var(--accent-hover, #b84a00); }
.setup-banner-dismiss {
  background: transparent; border: 0; cursor: pointer;
  font-size: calc(1rem * var(--card-font-scale, 1)); line-height: 1; color: inherit; opacity: 0.7;
}
.setup-banner-dismiss:hover { opacity: 1; }
[data-theme="dark"] .setup-banner { background: #2a1f08; color: #fde7c7; border-color: #4a3410; }
/* Maintenance notices (js/maintenance.js): one line per notice, each with its link. */
.notice-banner-list { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }
.notice-banner-item { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.notice-banner-item span { flex: 1 1 16rem; }
.notice-banner-link { font-weight: 600; color: inherit; text-decoration: underline; white-space: nowrap; }
.notice-banner.is-critical { background: #fdecea; color: #5c1a12; border-color: #f2c4bd; }
[data-theme="dark"] .notice-banner.is-critical { background: #3a1410; color: #fbd9d3; border-color: #5c241c; }
.setup-wizard-entry {
  display: inline-block; margin-top: 0.5rem; padding: 0.4rem 0.9rem;
  border: 1px solid var(--border, #d4d2cc); border-radius: 8px;
  text-decoration: none; font-weight: 600; color: inherit;
}
.setup-wizard-entry:hover { background: var(--accent-light, #ffede0); }

/* ═══════════════════════════════════════════════════════════════════
   Weather card (.wx-card) — layout follows the card's own width via
   container queries, so it adapts to any grid size, not just the screen.
   ═══════════════════════════════════════════════════════════════════ */
.wx-ic { color: var(--text-secondary); line-height: 1; display: inline-block; }
.wx-ic[data-kind="clear"]  { color: #f59e0b; }
.wx-ic[data-kind="partly"] { color: #eab308; }
.wx-ic[data-kind="night"]  { color: #818cf8; }
.wx-ic[data-kind="cloudy"], .wx-ic[data-kind="fog"] { color: #94a3b8; }
.wx-ic[data-kind="rain"]   { color: #3b82f6; }
.wx-ic[data-kind="snow"]   { color: #7dd3fc; }
.wx-ic[data-kind="storm"]  { color: #8b5cf6; }

.wx-card {
  container: wx / inline-size;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); color: var(--text);
  padding: 0.75rem 0.9rem; height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 0.6rem; overflow: auto;
}
.wx-card.wx-stale .wx-now { opacity: 0.7; }
.wx-card [hidden] { display: none !important; }
.wx-card > * { flex-shrink: 0; }
.wx-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.1rem 0.5rem; min-width: 0; }
.wx-title { margin: 0; font-size: calc(var(--fs-medium, 1rem) * var(--card-font-scale, 1)); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.wx-meta { display: flex; gap: 0.5rem; font-size: calc(0.7rem * var(--card-font-scale, 1)); color: var(--text-secondary); white-space: nowrap; }
.wx-meta span:empty { display: none; }
.wx-error { font-size: calc(0.8rem * var(--card-font-scale, 1)); color: var(--color-negative, #ef4444); }
.wx-alerts { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.weather-alert-badge {
  font-size: calc(0.7rem * var(--card-font-scale, 1)); font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 9999px;
  background: var(--warn-bg, #fef3c7); color: var(--warn-fg, #92400e); border: 1px solid currentColor;
}

.wx-body { display: grid; grid-template-columns: 1fr; gap: 0.75rem; min-width: 0; }
.wx-now { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.wx-now-icon .wx-ic { font-size: calc(clamp(2.4rem, 16cqi, 4.2rem) * var(--card-font-scale, 1)); }
.wx-now-main { display: flex; flex-direction: column; min-width: 0; }
.wx-card .wx-now-temp { font-size: calc(clamp(1.8rem, 11cqi, 3rem) * var(--card-font-scale, 1)); font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.wx-card .wx-now-desc { font-size: calc(0.9rem * var(--card-font-scale, 1)); font-weight: 500; color: var(--text); opacity: 1; }
.wx-hilo, .wx-card .wx-extra { font-size: calc(0.78rem * var(--card-font-scale, 1)); color: var(--text-secondary); opacity: 1; }
/* The one-line summary is only for cards too narrow for the details grid. */
.wx-card.wx-has-details .wx-extra { display: none; }

.wx-details { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 0.75rem; }
.wx-detail { display: flex; flex-direction: column; min-width: 0; }
.wx-detail dt { font-size: calc(0.68rem * var(--card-font-scale, 1)); color: var(--text-secondary); display: flex; align-items: center; gap: 0.3rem; }
.wx-detail dt i { font-size: calc(0.75rem * var(--card-font-scale, 1)); line-height: 1; }
.wx-detail dd { margin: 0; font-size: calc(0.85rem * var(--card-font-scale, 1)); font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.wx-hourly {
  display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: thin;
  padding-bottom: 0.25rem; border-top: 1px solid var(--border); padding-top: 0.5rem;
  scroll-snap-type: x proximity;
}
.wx-hour {
  flex: 0 0 auto; min-width: 2.9rem; display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  font-size: calc(0.72rem * var(--card-font-scale, 1)); scroll-snap-align: start;
}
.wx-hour .wx-ic { font-size: calc(1.15rem * var(--card-font-scale, 1)); }
.wx-hour-time { color: var(--text-secondary); }
.wx-hour-temp { font-weight: 600; }
.wx-hour-rain { color: #3b82f6; min-height: 0.9em; font-size: calc(0.65rem * var(--card-font-scale, 1)); }

.wx-days { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.wx-day {
  display: grid; align-items: center; gap: 0.4rem; font-size: calc(0.8rem * var(--card-font-scale, 1));
  grid-template-columns: minmax(2.6rem, 1fr) 1.4rem 2.2rem 2.2rem minmax(2rem, 3fr) 2.2rem;
}
.wx-day .wx-ic { font-size: calc(1.1rem * var(--card-font-scale, 1)); justify-self: center; }
.wx-day-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-day-rain { color: #3b82f6; font-size: calc(0.7rem * var(--card-font-scale, 1)); text-align: right; }
.wx-day-lo { color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.wx-day-hi { font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-range { position: relative; height: 5px; border-radius: 3px; background: var(--border); }
.wx-range span { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #60a5fa, #f59e0b); }

.wx-charts { display: flex; flex-direction: column; gap: 0.5rem; }
.wx-chart { position: relative; height: 110px; min-height: 90px; }
.wx-chart canvas { width: 100% !important; height: 100% !important; }
.wx-chart .weather-chart-caption { font-size: calc(0.8rem * var(--card-font-scale, 1)); color: var(--text-secondary); }

/* Very narrow: drop the range bar and rain column so names/temps never clip. */
@container wx (max-width: 280px) {
  .wx-day { grid-template-columns: minmax(2.4rem, 1fr) 1.4rem 2rem 2rem; }
  .wx-day .wx-range, .wx-day .wx-day-rain { display: none; }
  .wx-details { grid-template-columns: minmax(0, 1fr); }
}
/* Medium: current conditions beside the details grid, days underneath. */
@container wx (min-width: 460px) {
  .wx-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
  .wx-days { grid-column: 1 / -1; }
  .wx-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Wide: three columns — now | details | days. */
@container wx (min-width: 760px) {
  .wx-card.wx-has-days .wx-body { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.3fr); }
  .wx-card.wx-has-days .wx-days { grid-column: auto; }
  .wx-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wx-hour { min-width: 3.3rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Solar forecast cards (.fc-card: banner / info / sparkline)
   Container queries: the layout follows the card's width, not the screen.
   ═══════════════════════════════════════════════════════════════════ */
.fc-card {
  container: fc / inline-size;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); color: var(--text);
  padding: 0.7rem 0.9rem 0.4rem; height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 0.5rem; overflow: auto;
}
.fc-card [hidden] { display: none !important; }
.fc-card > * { flex-shrink: 0; }
.fc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.1rem 0.5rem; min-width: 0; }
.fc-title { margin: 0; font-size: calc(var(--fs-medium, 1rem) * var(--card-font-scale, 1)); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.fc-when { display: flex; gap: 0.5rem; font-size: calc(0.75rem * var(--card-font-scale, 1)); color: var(--text-secondary); white-space: nowrap; }
.fc-clock { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.fc-error { font-size: calc(0.8rem * var(--card-font-scale, 1)); color: var(--color-negative, #ef4444); }
.fc-source { font-size: calc(0.68rem * var(--card-font-scale, 1)); color: var(--text-secondary); text-align: right; margin-top: auto; }
.fc-source:empty { display: none; }

/* Summary (today, weather, day tiles) at its natural height; the chart takes
   whatever height is left. A grid over all sections shared spare height
   between every row, which showed up as blank bands between them. */
.fc-body { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; flex: 1 1 auto; min-height: 0; }
.fc-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem 1.25rem; min-width: 0; flex: 0 0 auto; }

.fc-today { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.fc-today-label { font-size: calc(0.72rem * var(--card-font-scale, 1)); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.fc-today-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.45rem; min-width: 0; font-size: calc(clamp(1.4rem, 8cqi, 2.2rem) * var(--card-font-scale, 1)); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fc-today-remaining { font-size: calc(0.75rem * var(--card-font-scale, 1)); color: var(--text-secondary); font-weight: 400; }
.fc-today-sub { font-size: calc(0.75rem * var(--card-font-scale, 1)); color: var(--text-secondary); }
.fc-progress { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 0.3rem; }
.fc-progress span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.6s ease; }

.fc-now { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.fc-now-icon .wx-ic { font-size: calc(clamp(2rem, 11cqi, 3.2rem) * var(--card-font-scale, 1)); }
.fc-now-text { min-width: 0; }
.fc-now-temp { font-size: calc(1.35rem * var(--card-font-scale, 1)); font-weight: 700; line-height: 1.1; }
.fc-now-desc { font-size: calc(0.82rem * var(--card-font-scale, 1)); font-weight: 500; }
.fc-now-extra { font-size: calc(0.72rem * var(--card-font-scale, 1)); color: var(--text-secondary); }

.fc-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)); gap: 0.4rem; min-width: 0; }
.fc-day {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "name icon" "kwh kwh" "wx wx";
  align-items: center; gap: 0.1rem 0.3rem; padding: 0.4rem 0.5rem; border-radius: 8px;
  background: color-mix(in srgb, var(--border) 35%, transparent); min-width: 0;
}
.fc-day-name { grid-area: name; font-size: calc(0.75rem * var(--card-font-scale, 1)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-day-icon { grid-area: icon; justify-self: end; font-size: calc(1.1rem * var(--card-font-scale, 1)); }
.fc-day-kwh { grid-area: kwh; font-size: calc(0.95rem * var(--card-font-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-day-wx { grid-area: wx; display: flex; justify-content: space-between; gap: 0.3rem; font-size: calc(0.7rem * var(--card-font-scale, 1)); color: var(--text-secondary); white-space: nowrap; }
.fc-day-temp small { font-size: inherit; opacity: 0.8; }
.fc-day-rain { color: #3b82f6; }

.fc-chart { position: relative; flex: 1 1 auto; min-height: 120px; min-width: 0; width: 100%; }
.fc-chart canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.fc-chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(0.8rem * var(--card-font-scale, 1)); color: var(--text-secondary); }

/* ≥ 360px: today + weather side by side; days and chart full width below. */
@container fc (min-width: 360px) {
  .fc-summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .fc-days { grid-column: 1 / -1; }
}
/* ≥ 820px (banner/info): today | weather | days in one row, chart below. */
@container fc (min-width: 820px) {
  .fc-summary { grid-template-columns: minmax(9rem, 0.8fr) minmax(0, 0.9fr) minmax(0, 2fr); }
  .fc-days { grid-column: auto; }
  .fc-chart { min-height: 140px; }
}
/* Very wide banners: put the chart in the same row as well. */
@container fc (min-width: 1150px) {
  .fc-banner .fc-body { flex-direction: row; align-items: stretch; gap: 1.25rem; }
  .fc-banner .fc-summary { flex: 3.2 1 0; align-self: center; grid-template-columns: minmax(10.5rem, 0.7fr) minmax(0, 0.9fr) minmax(0, 1.6fr); }
  .fc-banner .fc-chart { flex: 2 1 0; }
}

/* PV Today timeline icons */
.pvt-timeline-icon .wx-ic { font-size: calc(clamp(0.9rem, 2.2vw, 1.3rem) * var(--card-font-scale, 1)); }

/* Phones: dashboard blocks become auto-height, so charts need a real height. */
@media (max-width: 768px) {
  .pvt-chart-container { flex: 0 0 auto; height: 170px; }
  .fc-chart { min-height: 160px; }
}

/* A card whose source failed before it ever rendered shows only the error. */
.fc-card.fc-failed .fc-body, .wx-card.wx-failed .wx-body,
.wx-card.wx-failed .wx-hourly, .wx-card.wx-failed .wx-charts { display: none; }

/* Metric Trend — keep the title band neutral and isolate user fill to the body. */
.metric-trend-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  gap: 0;
  padding: 0;
  overflow: hidden;
  color: var(--text-primary);
  background: var(--surface-raised, var(--card-bg));
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  box-shadow: none;
  text-align: left;
  font-family: var(--font, 'Manrope', system-ui, sans-serif);
}
.metric-trend-card *, .metric-trend-card *::before, .metric-trend-card *::after { box-sizing: border-box; }
.metric-trend-header {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  gap: .55rem;
  min-width: 0;
  padding: .7rem .85rem;
  color: var(--text-primary);
  background: var(--surface-raised, var(--card-bg));
  border-bottom: 1px solid var(--border);
}
.metric-trend-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; }
.metric-trend-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: inherit;
  font-size: calc(clamp(.85rem, 2.6vw, 1.1rem) * var(--card-font-scale, 1));
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-trend-body {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "readout" "context" "graph";
  align-items: center;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  padding: .5rem .75rem;
  overflow: hidden;
  background: transparent;
}
.metric-trend-readout {
  grid-area: readout;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .2em;
  align-self: center;
  max-width: 100%;
  min-width: 0;
  line-height: 1.05;
  white-space: nowrap;
}
.metric-trend-value {
  min-width: 0;
  font-size: calc(clamp(1.5rem, 6vw, 3rem) * var(--card-font-scale, 1));
  font-weight: 600;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.metric-trend-unit { flex: 0 1 auto; font-size: calc(clamp(.85rem, 3vw, 1.5rem) * var(--card-font-scale, 1)); font-weight: 500; }
.metric-trend-status { max-width: 100%; color: var(--text-secondary); font-size: calc(var(--fs-small, .85rem) * var(--card-font-scale, 1)); text-align: center; }
.metric-trend-context { grid-area: context; z-index: 1; max-width: 100%; color: var(--text-secondary); font-size: calc(var(--fs-small, .85rem) * var(--card-font-scale, 1)); line-height: 1.2; text-align: center; }
.metric-trend-graph-wrap {
  grid-area: graph;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.metric-trend-graph-wrap[hidden] { display: none; }
.metric-trend-graph {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 2.5rem;
  overflow: hidden;
}
.metric-trend-graph path { vector-effect: non-scaling-stroke; }
.metric-trend-line:not([stroke]) { stroke: var(--text-secondary); }

/* Dual Metric — shared neutral header, fixed two-column comparison body. */
.dual-metric-card.stat-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  gap: 0;
  padding: 0;
  overflow: hidden;
  color: var(--text-primary, var(--text));
  background: var(--surface-raised, var(--card-bg));
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  box-shadow: none;
  text-align: left;
  font-family: var(--font, 'Manrope', system-ui, sans-serif);
}
.dual-metric-card *, .dual-metric-card *::before, .dual-metric-card *::after { box-sizing: border-box; }
.dual-metric-header {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  gap: .55rem;
  margin: 0;
  padding: var(--dual-padding, 16px);
  color: var(--text-primary, var(--text));
  background: var(--surface-raised, var(--card-bg));
  border-bottom: 1px solid var(--border);
}
.dual-metric-title { min-width: 0; color: inherit; font-size: 1.25rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.dual-metric-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; }
.dual-metric-help {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: help;
}
.dual-metric-help:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.dual-metric-body {
  --dual-body-gap: calc(var(--dual-pane-gap, 0px) + var(--dual-divider-width, 0px));
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  gap: var(--dual-body-gap);
  padding: 0;
  background: var(--border);
}
.dual-metric-neutral .dual-metric-body { --dual-body-gap: var(--dual-pane-gap, 0px); background: transparent; }
.dual-metric-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: var(--dual-padding, 16px);
  overflow: visible;
  color: var(--text-primary, var(--text));
  background: var(--surface-raised, var(--card-bg));
}
.dual-metric-neutral .dual-metric-pane { background: transparent; }
.dual-metric-label {
  min-width: 0;
  margin: 0 0 .35em;
  color: inherit;
  font-size: var(--dual-label-size, 18px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.dual-metric-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .12em .18em;
  min-width: 0;
  max-width: 100%;
  color: inherit;
  line-height: 1.05;
}
.dual-metric-value {
  min-width: 0;
  max-width: 100%;
  color: inherit;
  font-size: clamp(12px, 25cqw, var(--dual-value-size, 40px));
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.dual-metric-unit {
  flex: 0 1 auto;
  max-width: 100%;
  color: inherit;
  font-size: var(--dual-unit-size, 16px);
  font-weight: 500;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.dual-metric-status {
  flex: 0 0 auto;
  max-width: 100%;
  color: var(--text-secondary, currentColor);
  font-size: .85rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.dual-metric-status:empty { display: none; }
.dual-metric-pane[data-side] { container-type: inline-size; }

.metric-trend-area:not([fill]) { fill: var(--text-secondary); }
.metric-trend-graph-unit { flex: 0 0 auto; align-self: flex-end; color: var(--text-secondary); font-size: calc(.7rem * var(--card-font-scale, 1)); line-height: 1.1; }
.metric-trend-card.metric-trend-subtle-area .metric-trend-body { background: transparent; }
.metric-trend-card.metric-trend-filled-body .metric-trend-body { background-color: transparent; }
@media (max-width: 480px) {
  .metric-trend-header { gap: .4rem; padding: .55rem .6rem; }
  .metric-trend-body { padding: .4rem .55rem; }
  .metric-trend-value { font-size: calc(clamp(1.2rem, 7vw, 2rem) * var(--card-font-scale, 1)); }
  .metric-trend-unit { font-size: calc(clamp(.75rem, 3.5vw, 1.1rem) * var(--card-font-scale, 1)); }
  .metric-trend-context { font-size: calc(.72rem * var(--card-font-scale, 1)); }
}

/* Power chart: fixed-height canvas wrapper; stats remain in normal flow below. */
.chart-container:has(.power-chart-canvas-wrap) { height: auto; min-height: 0; overflow: visible; }
.power-chart-canvas-wrap { position: relative; display: block; width: 100%; height: 240px; min-width: 0; min-height: 0; flex: 0 0 auto; overflow: hidden; }
.power-chart-canvas-wrap canvas { display: block; width: 100%; max-width: 100%; height: 100%; }
.power-stats { display: block; width: 100%; max-width: 100%; min-width: 0; margin: .35rem 0 0; padding: .45rem 0 0; color: var(--text, inherit); border-top: 1px solid var(--border, currentColor); }
.power-stats[hidden] { display: none; }
.power-stats h4 { margin: 0 0 .35rem; padding: 0; color: inherit; font-size: .95rem; font-weight: 600; line-height: 1.25; }
.power-stats-table { width: max-content; min-width: 100%; border-collapse: collapse; border-spacing: 0; color: inherit; font-size: 14px; text-align: start; }
.power-stats-table thead th, .power-stats-table tbody th, .power-stats-table td { padding: .35rem .5rem; vertical-align: baseline; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.power-stats-table thead th { font-weight: 600; text-align: var(--power-stats-header-align, start); }
.power-stats-table tbody th { min-width: 8rem; text-align: var(--power-stats-label-align, start); white-space: normal; overflow-wrap: break-word; word-break: normal; }
.power-stats-table tbody td { text-align: var(--power-stats-value-align, end); font-variant-numeric: tabular-nums; }
.power-stats-table time { display: inline; margin-left: .3em; color: var(--text-secondary, inherit); font-size: .78em; font-variant-numeric: tabular-nums; }
.power-stats { overflow-x: auto; overscroll-behavior-inline: contain; }
.power-stats-table th, .power-stats-table td { min-width: 0; }
.power-stats-table.density-compact { border-spacing: 0; }
.power-stats-table.density-compact thead th, .power-stats-table.density-compact tbody th, .power-stats-table.density-compact td { padding-block: .2rem; }
.power-stats[data-density="compact"] .power-stats-table { border-spacing: 0; }
.chart-container:has(.power-stats) { height: auto !important; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .power-stats *, .power-chart-canvas-wrap * { scroll-behavior: auto !important; transition-duration: 0s !important; } }
/* Breakdown: the parts behind a combined total (components/breakdown.js) */
.bd-list {
  list-style: none; margin: 0.3rem 0 0; padding: 0;
  display: grid; gap: 0.1rem; width: 100%; max-width: 15rem;
  font-size: calc(0.68rem * var(--card-font-scale, 1)); line-height: 1.3; color: var(--text-secondary);
}
.bd-list li { display: flex; justify-content: space-between; gap: 0.6rem; min-width: 0; }
.bd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bd-value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-host { cursor: pointer; border-radius: var(--radius-xs); }
.bd-host:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bd-pop {
  position: absolute; z-index: 1000; min-width: 10rem; max-width: min(18rem, calc(100vw - 16px));
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm);
  background: var(--card-bg); color: var(--text); border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.18); pointer-events: none;
}
.bd-pop[hidden] { display: none; }
.bd-pop-title { margin: 0 0 0.3rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.bd-pop .bd-list { margin: 0; max-width: none; font-size: 0.8rem; gap: 0.2rem; }
/* Cards with lines or sparklines behind the text: keep the parts readable above them. */
.so-tile .bd-list, .fcs2-info .bd-list { position: relative; z-index: 1; }
.so-tile .bd-list li, .fcs2-info .bd-list li { background: var(--card-bg); border-radius: 4px; padding: 0 3px; margin: 0 -3px; }
/* Gauges and stat cards */
.bar-gauge-row > .bd-list, .bg-retro-row > .bd-list { grid-column: 1 / -1; max-width: none; margin-top: 0; padding-left: min(28%, 6em); box-sizing: border-box; }
.ep-gauge > .bd-list, .configurable-gauge-card > .bd-list { margin: 0.2rem auto 0; padding: 0 0.6rem; box-sizing: border-box; }
.dual-metric-pane > .bd-list { margin-inline: auto; }
/* Metric trend: the parts get their own row between the value and the graph's label. */
.metric-trend-body:has(> .bd-list) { grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-areas: "readout" "parts" "context" "graph"; }
.metric-trend-body > .bd-list { grid-area: parts; z-index: 1; margin: 0.15rem 0 0.25rem; }
/* Configurable gauge: the dial shrinks to leave room for the listed parts. */
.configurable-gauge-card:has(> .bd-list) .configurable-gauge-viz {
  width: min(100cqw - 2 * var(--card-pad), var(--cg-size, 400px), 100cqh - 2 * var(--card-pad) - 1.6em - (var(--bd-rows, 0) * 1rem + 0.5rem));
}
.configurable-gauge-card > .bd-list { flex-shrink: 0; }
/* Daily / Monthly tables: the date is the row header; parts sit under a cell's kWh. */
.energy-table tbody th { position: static; z-index: auto; background: none; padding: 0.5rem; text-align: left; font-weight: 500; font-size: inherit; text-transform: none; letter-spacing: normal; color: var(--text-secondary); border-bottom: 1px solid var(--border); white-space: nowrap; }
.energy-table td .bd-list { margin-left: auto; max-width: 12rem; }
.energy-table td.bd-host { text-decoration: underline dotted var(--text-secondary); text-underline-offset: 3px; }
.energy-table-empty { text-align: center !important; color: var(--text-secondary); }
/* Phone layout: blocks take their content's height, so the tables can't fill
   a leftover space (there is none) — give them their own, capped, height. */
@media (max-width: 768px) {
  .daily-breakdown-content:not(.collapsed) { flex: none; }
  .daily-table-wrapper { flex: none; max-height: 60vh; }
}
.energy-table td { white-space: nowrap; }
.energy-table td .bd-list li { flex-wrap: wrap; justify-content: flex-end; column-gap: 0.4rem; }
.energy-table td .bd-label { flex: 0 1 auto; overflow: visible; }
/* System topology scales with its block: circles take a third of the height
   left after labels (56–120px) and their text follows. On phones blocks take
   their content's height, so fixed sizes apply there. */
.flow-card-2 { container-type: size; --topo-d: clamp(56px, calc((100cqh - 5.5rem) / 3), 120px); }
.flow-card-2 .topo-grid { height: 100%; grid-template-rows: auto minmax(calc(var(--topo-d) * 0.75), 1fr) auto; }
.flow-card-2 .topo-node-circle { width: var(--topo-d); height: var(--topo-d); }
.flow-card-2 .topo-node-circle i { font-size: calc(var(--topo-d) * 0.27 * var(--card-font-scale, 1)); }
.flow-card-2 .topo-value, .flow-card-2 .topo-sub { font-size: calc(max(0.68rem, var(--topo-d) * 0.115) * var(--card-font-scale, 1)); }
.flow-card-2 .topo-pct { font-size: calc(max(0.8rem, var(--topo-d) * 0.18) * var(--card-font-scale, 1)); }
.flow-card-2 .topo-hub { height: min(78px, calc(var(--topo-d) * 0.65)); width: min(50px, calc(var(--topo-d) * 0.42)); }
@media (max-width: 768px) {
  .flow-card-2 { container-type: normal; --topo-d: 90px; height: auto; }
  .flow-card-2 .topo-grid { height: auto; grid-template-rows: auto 110px auto; }
}
.flow-card-2 { --topo-d: clamp(44px, calc((100cqh - 5.5rem - var(--topo-extra, 0) * 0.95rem) / 3), 120px); }
.topo-node > .bd-list { width: max-content; max-width: 16rem; }
.flow-card-2 { --topo-d: clamp(64px, calc((100cqh - 5.5rem - var(--topo-extra, 0) * 0.95rem) / 3), 120px); }
.flow-card-2 .topo-value, .flow-card-2 .topo-sub { white-space: nowrap; }
.flow-card-2 .topo-hub { min-width: 34px; min-height: 40px; }
/* Label and today's energy as one tight caption, just outside each circle on
   the side away from the hub. Grid and Home hang theirs below the circle out
   of flow, so their circles stay level with the inverter. */
.flow-card-2 .topo-caption { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.flow-card-2 .topo-grid-node, .flow-card-2 .topo-home { position: relative; }
.flow-card-2 .topo-grid-node > .topo-caption, .flow-card-2 .topo-home > .topo-caption {
  position: absolute; top: calc(100% + 0.25rem); left: 50%; transform: translateX(-50%);
}
.flow-card-2 .topo-label { line-height: 1.1; }
.flow-card-2 .topo-energy {
  font-size: calc(max(0.64rem, var(--topo-d, 90px) * 0.1) * var(--card-font-scale, 1));
  font-weight: 500; color: var(--text-secondary); line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.flow-card-2 .topo-energy[hidden] { display: none; }
/* Flow card: one row down to ~420px wide (smaller icons, arrows and values);
   narrower than that, a 2×2 grid without the arrows. */
.flow-card { container-type: inline-size; }
@container (max-width: 820px) {
  .flow-card .flow-item { min-width: 0; min-height: 0; flex: 1 1 0; }
  .flow-card .flow-icon { font-size: calc(2.2rem * var(--card-font-scale, 1)); margin-bottom: 0.3rem; }
  .flow-card .flow-arrow { font-size: calc(2rem * var(--card-font-scale, 1)); min-width: 1.4em; flex: 0 0 auto; }
  .flow-card .flow-value { font-size: calc(1.25rem * var(--card-font-scale, 1)); }
}
@container (max-width: 420px) {
  .flow-card .flow-arrow { display: none; }
  .flow-card .flow-item { flex: 1 1 40%; }
}
@media (max-width: 768px) { .flow-card-2 { --topo-d: 84px; } }
/* Grid timeline: same meaning as the status text — on is good (green), an
   outage stands out in the grid colour. Each segment keeps its ON/OFF label. */
.tl-segment.on { background: var(--success); color: #fff; }
.tl-segment.off, [data-theme="dark"] .tl-segment.off { background: color-mix(in srgb, var(--color-grid) 16%, transparent); color: var(--color-grid); }
.ep-grid-state[data-state="on"] { color: var(--success); }
/* PV Today with nothing to show: the message over the empty chart, no legend. */
.pvt-no-data { position: absolute; inset: 0; padding: 0 1rem; text-align: center; line-height: 1.4; }
.pvt-is-empty .pvt-legend, .pvt-is-empty .pv-today-timeline { visibility: hidden; }
/* Grid timeline periods: reachable by keyboard; details also on tap. */
.tl-segment { cursor: pointer; }
.tl-segment:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; position: relative; z-index: 1; }
.tl-tooltip { white-space: nowrap; max-width: calc(100vw - 32px); transform: translateX(-50%); }