/* ============================================================
   Energy Monitor — Fresh, light-first design
   ============================================================ */

/* --- Design Tokens --- */
:root {
  --font-ui: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-dim: #edf0f7;
  --text: #1a1d26;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --border: #e5e7eb;
  --shadow: 0 2px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --radius: 20px;
  --radius-sm: 12px;
  --radius-full: 9999px;

  /* Energy colors — shared vocabulary */
  --pv: #eab308;
  --pv-soft: #fef3c7;
  --load: #14b8a6;
  --load-soft: #ccfbf1;
  --battery: #8b5cf6;
  --battery-soft: #ede9fe;
  --grid-import: #ef4444;
  --grid-export: #3b82f6;
  --grid-soft: #fef2f2;

  --glow-pv: rgba(234,179,8,0.5);
  --glow-load: rgba(20,184,166,0.4);
  --glow-battery: rgba(139,92,246,0.4);
  --glow-grid: rgba(59,130,246,0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0f16;
    --surface: #1a1d28;
    --surface-dim: #12151e;
    --text: #f1f3f8;
    --text-secondary: #9ca3af;
    --text-tertiary: #6b7280;
    --border: #2a2d3a;
    --shadow: 0 2px 16px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
    --pv-soft: rgba(234,179,8,0.12);
    --load-soft: rgba(20,184,166,0.10);
    --battery-soft: rgba(139,92,246,0.10);
    --grid-soft: rgba(239,68,68,0.10);
  }
}

[data-theme="dark"] {
  --bg: #0c0f16;
  --surface: #1a1d28;
  --surface-dim: #12151e;
  --text: #f1f3f8;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;
  --border: #2a2d3a;
  --shadow: 0 2px 16px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --pv-soft: rgba(234,179,8,0.12);
  --load-soft: rgba(20,184,166,0.10);
  --battery-soft: rgba(139,92,246,0.10);
  --grid-soft: rgba(239,68,68,0.10);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overscroll-behavior: none;
}

/* --- Layout --- */
.mon-app {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px 16px env(safe-area-inset-bottom, 16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100dvh;
}

@media (min-width: 768px) {
  .mon-app { max-width: 540px; padding: 24px; gap: 20px; }
}

@media (min-width: 1200px) {
  .mon-app { max-width: 600px; }
}

/* --- Header --- */
.mon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.mon-header-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mon-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mon-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  transition: background 0.3s;
}
.mon-status-dot.stale { background: var(--grid-import); }
.mon-status-dot.offline { background: var(--text-tertiary); }

.mon-nav-link {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  transition: all 0.15s;
}
.mon-nav-link:hover { background: var(--surface); color: var(--text); }

.mon-theme-btn, .mon-toggle-btn {
  height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font-ui);
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.mon-theme-btn { width: 32px; font-size: 14px; }
.mon-toggle-btn { padding: 0 10px; white-space: nowrap; }
.mon-toggle-btn:hover, .mon-theme-btn:hover { background: var(--surface-dim); color: var(--text); }

/* --- Flow Diagram Card --- */
.mon-flow-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 16px 16px;
  position: relative;
  overflow: hidden;
}

.mon-flow-svg {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: block;
}

/* SVG Node circles */
.flow-node-bg {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 2;
  transition: fill 0.3s;
}
.flow-node-bg.pv { fill: var(--pv-soft); stroke: var(--pv); }
.flow-node-bg.grid { fill: var(--grid-soft); stroke: var(--grid-export); }
.flow-node-bg.grid.importing { stroke: var(--grid-import); }
.flow-node-bg.load { fill: var(--load-soft); stroke: var(--load); }
.flow-node-bg.battery { fill: var(--battery-soft); stroke: var(--battery); }

.flow-icon { font-size: 24px; text-anchor: middle; dominant-baseline: central; }
.flow-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  fill: var(--text);
  text-anchor: middle;
}
.flow-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  fill: var(--text-secondary);
  text-anchor: middle;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Flow paths */
.flow-path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke: var(--border);
  stroke-dasharray: 6 6;
  opacity: 0.5;
  transition: opacity 0.4s, stroke-width 0.4s, stroke-dasharray 0.4s;
}
.flow-path[data-active="true"] { opacity: 1; stroke-dasharray: none; }
.flow-path.pv { stroke: var(--pv); }
.flow-path.grid-in { stroke: var(--grid-import); }
.flow-path.grid-out { stroke: var(--grid-export); }
.flow-path.batt-in { stroke: var(--battery); }
.flow-path.batt-out { stroke: var(--battery); }

/* Animated dots overlay */
.flow-dots {
  fill: none;
  stroke-linecap: round;
  stroke-width: 6;
  opacity: 0;
  transition: opacity 0.4s;
  stroke-dasharray: 4 28;
}
.flow-dots[data-active="true"] {
  opacity: 0.9;
  animation: flowDots var(--flow-speed, 2s) linear infinite;
}
.flow-dots[data-direction="reverse"] {
  animation-direction: reverse;
}
.flow-dots.pv { stroke: var(--pv); filter: url(#glow-pv); }
.flow-dots.grid-in { stroke: var(--grid-import); filter: url(#glow-grid); }
.flow-dots.grid-out { stroke: var(--grid-export); filter: url(#glow-grid); }
.flow-dots.batt-in { stroke: var(--battery); filter: url(#glow-batt); }
.flow-dots.batt-out { stroke: var(--battery); filter: url(#glow-batt); }

@keyframes flowDots {
  to { stroke-dashoffset: -32; }
}

/* SoC arc around battery */
.soc-arc-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
}
.soc-arc {
  fill: none;
  stroke: var(--battery);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

/* --- KPI Cards --- */
.mon-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (min-width: 480px) {
  .mon-cards { grid-template-columns: 1fr 1fr 1fr; }
}

.mon-card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid var(--border);
  transition: border-color 0.3s;
}
.mon-card.pv { border-left-color: var(--pv); }
.mon-card.grid { border-left-color: var(--grid-export); }
.mon-card.grid.importing { border-left-color: var(--grid-import); }
.mon-card.load { border-left-color: var(--load); }
.mon-card.battery { border-left-color: var(--battery); }
.mon-card.price { border-left-color: var(--text-secondary); }
.mon-card.cost { border-left-color: var(--load); }

.mon-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mon-card-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.mon-card-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.mon-card-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

/* --- Daily Summary Strip --- */
.mon-daily {
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.mon-daily-item {
  text-align: center;
}

.mon-daily-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.mon-daily-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
}

.mon-daily-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
  color: var(--text-secondary);
}

/* --- Offline Banner --- */
.mon-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--grid-import);
  color: white;
  text-align: center;
  padding: 6px;
  font-size: 12px;
  font-weight: 600;
  z-index: 100;
  transform: translateY(-100%);
  transition: transform 0.3s;
}
.mon-banner.visible { transform: translateY(0); }