/* ESS page follows the same card and KPI language as the plant dashboard. */
.ess-module { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.ess-summary-card, .ess-detail-card, .ess-energy-card { padding: 18px 20px 20px; }
.ess-section-title { margin-bottom: 16px; font-size: 12px; }
.ess-dot { width: 7px; height: 7px; background: #f59e0b; }
.ess-dot-blue { background: #3b82f6; }
.ess-dot-green { background: #22c55e; }
.ess-dot-purple { background: #8b5cf6; }
.ess-hero { display: flex; align-items: center; gap: 22px; min-height: 130px; padding: 0 4px 14px; }
.ess-soc-ring { width: 116px; height: 116px; flex: 0 0 116px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#3b82f6 var(--ess-soc, 0%), #e5e7eb 0); position: relative; }
.ess-soc-ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--bg-card); }
.ess-soc-ring span { position: relative; z-index: 1; color: var(--text-primary); font-family: var(--font-mono); font-size: 27px; font-weight: 600; }
.ess-soc-ring small { font-family: var(--font-sans); font-size: 15px; margin-left: 1px; }
.ess-hero-title { color: var(--text-primary); font-size: 18px; font-weight: 600; }
.ess-co2 { margin-top: 10px; color: var(--text-secondary); font-size: 14px; }
.ess-co2 .mono { color: var(--text-primary); font-size: 14px; }
.ess-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ess-summary-box { min-height: 76px; padding: 12px 14px; }
.ess-summary-box .val, .ess-energy-box .val { display: flex; align-items: baseline; gap: 4px; margin-top: 7px; color: var(--text-primary); font-size: 20px; font-weight: 600; line-height: 1.05; }
.ess-summary-box .u, .ess-energy-box .u { color: var(--text-secondary); font-family: var(--font-sans); font-size: 11px; font-weight: 600; }
.ess-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ess-table-wrap { overflow-x: auto; }
.ess-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ess-table th, .ess-table td { padding: 10px 9px; border-bottom: 1px solid var(--border-default); text-align: right; font-size: 12px; white-space: nowrap; }
.ess-table th { color: var(--text-secondary); font-weight: 500; }
.ess-table th:first-child, .ess-table td:first-child { text-align: left; }
.ess-phase-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; }
.ess-total-row td { color: var(--text-primary); font-weight: 600; }
.ess-subtitle { margin: 20px 0 9px; padding-bottom: 8px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); font-size: 12px; font-weight: 600; }
.ess-controller-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ess-status-table th:nth-child(2), .ess-status-table td:nth-child(2) { width: 30%; }
.ess-status-table th:last-child, .ess-status-table td:last-child { width: 15%; }
.ess-energy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ess-energy-box { min-height: 76px; padding: 12px 14px; }
.ess-energy-box .lbl, .ess-summary-box .lbl { font-size: 11px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.25px; }
@media (max-width: 900px) { .ess-detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .ess-summary-grid, .ess-controller-summary { grid-template-columns: 1fr; }
  .ess-energy-grid { grid-template-columns: 1fr; }
  .ess-hero { align-items: flex-start; }
  .ess-soc-ring { width: 96px; height: 96px; flex-basis: 96px; }
}