/* ============================================================
   BATTERY DETAIL SPA
   Rack -> Module -> Cell hierarchy
   ============================================================ */

.battery-module {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  color: var(--text-primary);
}

.battery-module button {
  font: inherit;
}

.battery-spa-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 16px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-card);
}

.battery-spa-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}

.battery-spa-tab:hover:not(:disabled) {
  background: var(--bg-panel);
  color: var(--text-primary);
}

.battery-spa-tab.active {
  background: var(--text-primary);
  color: #fff;
}

.battery-spa-tab:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.battery-spa-tab span {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .18);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: center;
}

.battery-spa-tab:not(.active) span {
  background: var(--bg-panel);
}

.battery-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 26px;
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 12px;
}

.battery-back-button {
  padding: 4px 9px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
}

.battery-back-button:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.battery-card,
.battery-section {
  margin-bottom: 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.battery-card {
  padding: 16px;
}

.battery-summary-card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .03);
}

.battery-card-header,
.battery-section-heading,
.battery-rack-header,
.battery-module-card-header,
.battery-map-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.battery-card-header {
  margin-bottom: 14px;
}

.battery-card-title,
.battery-section-heading > span,
.battery-map-title > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.battery-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple);
}

.battery-dot.blue {
  background: var(--info);
}

.battery-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.battery-status-pill > span,
.battery-state-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.battery-status-pill.is-charging { color: var(--success); background: rgba(34, 197, 94, .1); }
.battery-status-pill.is-discharging { color: var(--purple); background: rgba(139, 92, 246, .1); }
.battery-status-pill.is-standby { color: var(--text-secondary); background: var(--bg-panel); }

.battery-progress-row {
  margin: 9px 0;
}

.battery-progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
}

.battery-progress-label strong {
  color: var(--text-primary);
  font-size: 12px;
}

.battery-progress-track,
.battery-mini-progress {
  overflow: hidden;
  height: 8px;
  border-radius: 5px;
  background: #e5e7eb;
}

.battery-progress-fill,
.battery-mini-progress > div {
  height: 100%;
  border-radius: inherit;
  transition: width .4s ease;
}

.battery-progress-fill.soc,
.battery-mini-progress > div { background: linear-gradient(90deg, #22c55e, #16a34a); }
.battery-progress-fill.soh { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }

.battery-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.battery-metric,
.battery-health-metric {
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
}

.battery-metric > span,
.battery-health-metric > span {
  display: block;
  margin-bottom: 3px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .25px;
  text-transform: uppercase;
}

.battery-metric strong,
.battery-health-metric strong {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
}

.battery-metric small,
.battery-health-metric strong small {
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
}

.battery-section {
  padding: 16px;
}

.battery-section-heading {
  padding-bottom: 9px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
}

.battery-section-heading > span {
  color: var(--text-primary);
}

.battery-section-heading small,
.battery-map-title small {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 400;
}

.battery-rack-grid,
.battery-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.battery-rack-card,
.battery-module-card {
  width: 100%;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.battery-rack-card:hover,
.battery-module-card:hover {
  border-color: rgba(139, 92, 246, .55);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}

.battery-rack-header,
.battery-module-card-header {
  padding: 11px 13px;
  border-bottom: 1px solid var(--border-default);
  background: #fafaf7;
}

.battery-rack-header strong,
.battery-module-card-header strong {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
}

.battery-rack-icon,
.battery-module-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(139, 92, 246, .12);
  color: var(--purple);
  font-size: 12px;
  font-weight: 700;
}

.battery-module-card-header > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.battery-module-card-header small {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 10px;
}

.battery-chevron {
  color: var(--text-tertiary);
  font-size: 16px;
}

.battery-rack-body,
.battery-module-values {
  padding: 12px 13px;
}

.battery-rack-status,
.battery-rack-stats,
.battery-module-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 11px;
}

.battery-rack-status {
  margin-bottom: 9px;
  font-weight: 600;
}

.battery-state-dot {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.battery-state-dot.is-charging { color: var(--success); }
.battery-state-dot.is-discharging { color: var(--purple); }
.battery-state-dot.is-idle { color: var(--text-tertiary); }

.battery-mini-progress {
  height: 7px;
  margin-bottom: 9px;
}

.battery-rack-stats + .battery-rack-stats {
  margin-top: 6px;
}

.battery-rack-stats b {
  color: var(--text-primary);
  font-weight: 600;
}

.battery-module-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.battery-module-values > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
}

.battery-module-values small {
  color: var(--text-secondary);
  font-size: 10px;
}

.battery-module-values b {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.battery-cell-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 13px 10px;
}

.battery-cell-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
}

.battery-module-footer {
  padding: 8px 13px;
  border-top: 1px solid var(--border-default);
  background: #fafaf7;
}

.battery-health-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.battery-health-metric > small {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.battery-map-card {
  padding: 14px 16px;
  margin-top: 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.battery-map-title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-default);
}

.battery-cell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 7px;
  padding-top: 12px;
}

.battery-cell-tile {
  display: flex;
  min-height: 56px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 10px;
  text-align: center;
  transition: border-color .15s ease, transform .15s ease;
}

.battery-cell-tile:hover,
.battery-cell-tile.selected {
  border-color: var(--purple);
  transform: translateY(-1px);
}

.battery-cell-tile strong {
  font-size: 11px;
  font-weight: 600;
}

.battery-cell-tile.is-balanced,
.battery-legend i.is-balanced { background: #dcfce7; color: #166534; }
.battery-cell-tile.is-drift,
.battery-legend i.is-drift { background: #fef3c7; color: #92400e; }
.battery-cell-tile.is-imbalanced,
.battery-legend i.is-imbalanced { background: #ffedd5; color: #9a3412; }
.battery-cell-tile.is-critical,
.battery-legend i.is-critical { background: #fee2e2; color: #991b1b; }
.battery-cell-tile.is-na,
.battery-legend i.is-na { background: #f1f5f9; color: #94a3b8; }
.battery-cell-tile.is-cool,
.battery-legend i.is-cool { background: #dbeafe; color: #1e3a8a; }
.battery-cell-tile.is-warm,
.battery-legend i.is-warm { background: #e0f2fe; color: #075985; }
.battery-cell-tile.is-hot,
.battery-legend i.is-hot { background: #fef3c7; color: #92400e; }
.battery-cell-tile.is-warning,
.battery-legend i.is-warning { background: #ffedd5; color: #9a3412; }

.battery-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  color: var(--text-secondary);
  font-size: 10px;
}

.battery-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.battery-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.battery-selected-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  margin-top: 12px;
  border: 1px solid rgba(139, 92, 246, .25);
  border-radius: var(--radius-md);
  background: rgba(139, 92, 246, .06);
  color: var(--text-secondary);
  font-size: 11px;
}

.battery-selected-cell strong {
  color: var(--purple);
  font-size: 15px;
}

.battery-selected-cell small {
  color: var(--text-tertiary);
  text-transform: capitalize;
}

.battery-empty-inline,
.battery-empty-state {
  color: var(--text-secondary);
  text-align: center;
}

.battery-empty-inline {
  padding: 28px 12px;
  font-size: 12px;
}

.battery-empty-state {
  padding: 60px 20px;
}

.battery-empty-icon {
  margin-bottom: 8px;
  color: var(--purple);
  font-size: 30px;
}

.battery-empty-state strong {
  color: var(--text-primary);
  font-size: 16px;
}

.battery-empty-state p {
  margin: 6px 0 0;
  font-size: 12px;
}

@media (max-width: 1000px) {
  .battery-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .battery-health-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .battery-spa-tabs { padding: 8px 10px; }
  .battery-spa-tab { flex: 1; justify-content: center; padding: 7px 8px; }
  .battery-card,
  .battery-section { padding: 12px; }
  .battery-summary-grid,
  .battery-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battery-section-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .battery-map-title { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* Clinics_4S batt visual language: pill tabs, white cards, KPI strips,
   compact tables and heatmap rows. */
.battery-old-ui { max-width: 1400px; margin: 0 auto; }
.battery-old-ui .battery-level-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.battery-old-ui .battery-level-tabs .tab-btn {
  appearance: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border: 1px solid var(--border-default); border-radius: 999px;
  background: var(--bg-card); color: var(--text-secondary); cursor: pointer;
  font: 600 13px var(--font-sans); transition: all .12s ease;
}
.battery-old-ui .battery-level-tabs .tab-btn:hover:not(:disabled) { border-color: #ccc; color: var(--text-primary); }
.battery-old-ui .battery-level-tabs .tab-btn.active { border-color: #1a1a1a; background: #1a1a1a; color: #fff; }
.battery-old-ui .battery-level-tabs .tab-btn:disabled { cursor: not-allowed; opacity: .45; }
.battery-old-ui .battery-level-tabs .sdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; }
.battery-old-ui .battery-tab-count { min-width: 18px; padding: 1px 5px; border-radius: 10px; background: rgba(139,92,246,.12); color: var(--purple); font: 500 10px var(--font-mono); text-align: center; }
.battery-old-ui .tab-btn.active .battery-tab-count { background: rgba(255,255,255,.18); color: #fff; }
.battery-old-ui .battery-rack-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 14px;
}
.battery-old-ui .battery-rack-nav-label {
  margin-right: 2px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.battery-old-ui .battery-rack-nav button {
  appearance: none;
  padding: 5px 12px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  font: 500 11px var(--font-sans);
}
.battery-old-ui .battery-rack-nav button:hover,
.battery-old-ui .battery-rack-nav button.active {
  border-color: var(--purple);
  background: rgba(139, 92, 246, .1);
  color: var(--purple);
}
.battery-old-ui .battery-old-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 1400px; margin: 0 auto; }
.battery-old-ui .card { margin: 0; padding: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-card); }
.battery-old-ui .card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; color: var(--text-secondary); font-size: 11px; font-weight: 500; letter-spacing: .3px; text-transform: uppercase; }
.battery-old-ui .card-title .lhs { display: inline-flex; align-items: center; gap: 8px; }
.battery-old-ui .card-title .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); }
.battery-old-ui .muted { color: var(--text-tertiary); font-size: 11px; text-transform: none; }
.battery-old-ui .battery-old-pills { display: inline-flex; gap: 6px; }
.battery-old-ui .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.battery-old-ui .pill .d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.battery-old-ui .pill.battery-status-pill.status-online { background: #dcfce7; color: #16a34a; }
.battery-old-ui .battery-status-caption.status-online { color: #16a34a; }
.battery-old-ui .pill.battery-status-pill.status-charging { background: #dcfce7; color: #16a34a; }
.battery-old-ui .battery-status-caption.status-charging { color: #16a34a; }
.battery-old-ui .pill.battery-status-pill.status-discharging { background: rgba(139, 92, 246, .14); color: #7c3aed; }
.battery-old-ui .battery-status-caption.status-discharging { color: #7c3aed; }
.battery-old-ui .pill.battery-status-pill.status-standby,
.battery-old-ui .pill.battery-status-pill.status-neutral { background: #f1f5f9; color: #64748b; }
.battery-old-ui .battery-status-caption.status-standby { color: #64748b; }
.battery-old-ui .pill.battery-status-pill.status-fault { background: #fee2e2; color: #dc2626; }
.battery-old-ui .battery-status-caption.status-fault { color: #dc2626; }
.battery-old-ui .pill.battery-status-pill.status-comm-error { background: #fef3c7; color: #d97706; }
.battery-old-ui .battery-status-caption.status-comm-error { color: #d97706; }
.battery-old-ui .battery-system-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.battery-old-ui .summary-box { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-panel); }
.battery-old-ui .summary-box .lbl, .battery-old-ui .kpi-label { color: var(--text-secondary); font-size: 10px; font-weight: 500; letter-spacing: .3px; text-transform: uppercase; }
.battery-old-ui .summary-box .val { margin-top: 2px; color: var(--text-primary); font: 600 16px var(--font-mono); }
.battery-old-ui .summary-box .u, .battery-old-ui .kpi-unit { margin-left: 2px; color: var(--text-secondary); font-size: 11px; }
.battery-old-ui .battery-old-soc { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.battery-old-ui .batt-shell { flex: 1; height: 26px; overflow: hidden; position: relative; padding: 3px; border: 2px solid var(--text-primary); border-radius: 6px; background: transparent; }
.battery-old-ui .batt-shell::after { content: ""; position: absolute; top: 7px; right: -6px; width: 4px; height: 12px; border-radius: 0 2px 2px 0; background: var(--text-primary); }
.battery-old-ui .batt-fill { height: 100%; border-radius: 3px; background: var(--purple); transition: width .6s ease, background .3s; }
.battery-old-ui .battery-old-soc-value { min-width: 56px; color: var(--purple); font-size: 18px; font-weight: 600; text-align: right; }
.battery-old-ui .battery-limit-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.battery-old-ui .battery-limit-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-panel); }
.battery-old-ui .battery-limit-chip > span { color: var(--text-secondary); font-size: 11px; }
.battery-old-ui .battery-limit-chip strong { color: var(--text-primary); font-size: 14px; }
.battery-old-ui .battery-limit-chip small { margin-left: 3px; color: var(--text-secondary); font-family: var(--font-sans); font-size: 11px; font-weight: 400; }
.battery-old-ui .battery-old-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.battery-old-ui .kpi-strip-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.battery-old-ui .kpi { min-width: 0; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-card); }
.battery-old-ui .battery-focus-kpi { cursor: pointer; transition: background-color .12s ease, border-color .12s ease; }
.battery-old-ui .battery-focus-kpi:hover { border-color: #f59e0b; background: rgba(245, 158, 11, .08); }
.battery-old-ui .battery-focus-kpi:hover * { background: transparent; }
.battery-old-ui .battery-focus-icon { float: right; color: var(--text-tertiary); font-size: 11px; }
.battery-old-ui .kpi-value { margin-top: 4px; color: var(--text-primary); font: 600 19px var(--font-mono); }
.battery-old-ui .kpi-sub { min-height: 17px; margin-top: 4px; color: var(--text-tertiary); font-size: 11px; }
.battery-old-ui .battery-table-card { padding: 0; overflow: hidden; }
.battery-old-ui .battery-table-card > .card-title { margin: 0; padding: 16px 16px 12px; }
.battery-old-ui .battery-table-scroll { width: 100%; overflow-x: auto; }
.battery-old-ui .battery-old-table { width: 100%; min-width: 1050px; border-collapse: collapse; }
.battery-old-ui .battery-old-table th, .battery-old-ui .battery-old-table td { padding: 12px 8px; border-bottom: 1px solid var(--border-default); text-align: center; white-space: nowrap; }
.battery-old-ui .battery-old-table th { color: var(--text-secondary); font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.battery-old-ui .battery-old-table td { color: var(--text-primary); font-size: 13px; }
.battery-old-ui .battery-old-table.battery-hide-cell-voltage :is(th, td):nth-child(8),
.battery-old-ui .battery-old-table.battery-hide-cell-voltage :is(th, td):nth-child(9),
.battery-old-ui .battery-old-table.battery-hide-cell-temperature :is(th, td):nth-child(10),
.battery-old-ui .battery-old-table.battery-hide-cell-temperature :is(th, td):nth-child(11) { display: none; }
.battery-old-ui .battery-old-table tbody tr:last-child td { border-bottom: 0; }
.battery-old-ui .battery-inline-meter { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.battery-old-ui .battery-inline-meter b { width: 38px; font-size: 12px; font-weight: 500; text-align: right; }
.battery-old-ui .battery-inline-meter > span { display: block; width: 50px; height: 8px; overflow: hidden; border-radius: 4px; background: #e5e7eb; }
.battery-old-ui .battery-inline-meter > span i { display: block; height: 100%; border-radius: 4px; background: #22c55e; }
.battery-old-ui .battery-status-text { display: inline-flex; align-items: center; gap: 6px; color: #16a34a; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.battery-old-ui .battery-status-text i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.battery-old-ui .battery-status-text.is-online { color: #16a34a; }
.battery-old-ui .battery-status-text.is-com-error { color: #eab308; }
.battery-old-ui .battery-status-text.is-warning { color: #eab308; }
.battery-old-ui .battery-status-text.is-fault, .battery-old-ui .battery-status-text.is-offline { color: #ef4444; }
.battery-old-ui .battery-empty-inline { padding: 16px; color: var(--text-tertiary); font-size: 12px; }
.battery-old-ui .battery-cell-old-view { display: flex; flex-direction: column; gap: 14px; }
.battery-old-ui .battery-health-old-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.battery-old-ui .battery-heatmap-card { overflow: hidden; }
.battery-old-ui {
  --battery-balanced-bg: #dcfce7;
  --battery-balanced-fg: #166534;
  --battery-drift-bg: #fef3c7;
  --battery-drift-fg: #92400e;
  --battery-imbalanced-bg: #ffedd5;
  --battery-imbalanced-fg: #9a3412;
  --battery-critical-bg: #fee2e2;
  --battery-critical-fg: #991b1b;
  --battery-no-data-bg: #f1f5f9;
  --battery-no-data-fg: #94a3b8;
}
.battery-old-ui .battery-old-legend { display: flex; align-items: center; flex-wrap: wrap; column-gap: 20px; row-gap: 10px; margin: 2px 0 16px; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.battery-old-ui .battery-old-legend span { display: inline-flex; align-items: center; gap: 7px; min-height: 20px; white-space: nowrap; }
.battery-old-ui .battery-old-legend .muted { margin-right: 4px; color: var(--text-secondary); font-weight: 500; }
.battery-old-ui .battery-old-legend i { display: inline-block; flex: 0 0 10px; width: 10px; height: 10px; border: 1px solid rgba(15, 23, 42, .08); border-radius: 3px; }
.battery-old-ui .battery-old-legend .cl-green { background: var(--battery-balanced-bg); } .battery-old-ui .battery-old-legend .cl-yellow { background: var(--battery-drift-bg); } .battery-old-ui .battery-old-legend .cl-orange { background: var(--battery-imbalanced-bg); } .battery-old-ui .battery-old-legend .cl-red { background: var(--battery-critical-bg); } .battery-old-ui .battery-old-legend .cl-na { background: var(--battery-no-data-bg); } .battery-old-ui .battery-old-legend .cl-tcool { background: #dbeafe; } .battery-old-ui .battery-old-legend .cl-twarm { background: #e0f2fe; } .battery-old-ui .battery-old-legend .cl-thot { background: #fef3c7; }
.battery-old-ui .battery-heatmap { display: flex; flex-direction: column; gap: 6px; width: 100%; overflow-x: auto; }
.battery-old-ui .battery-heatmap-row { display: flex; align-items: stretch; min-width: max-content; gap: 8px; }
.battery-old-ui .battery-heatmap-label { display: inline-flex; flex: 0 0 145px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; color: var(--text-secondary); font-size: 11px; }
.battery-old-ui .battery-heatmap-label > strong { display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); font-size: 13px; font-weight: 600; }
.battery-old-ui .battery-heatmap-label > small { color: var(--text-tertiary); font-size: 11px; }
.battery-old-ui .battery-heatmap-label > small b { color: var(--text-secondary); font-weight: 500; }
.battery-old-ui .battery-module-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; background: rgba(34,197,94,.12); color: #16a34a; font-size: 9px; font-style: normal; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.battery-old-ui .battery-module-status i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.battery-old-ui .battery-module-status.com-error,
.battery-old-ui .battery-module-status.warning { background: rgba(234,179,8,.15); color: #eab308; }
.battery-old-ui .battery-module-status.fault,
.battery-old-ui .battery-module-status.offline { background: rgba(239,68,68,.12); color: #ef4444; }
.battery-old-ui .battery-heatmap-cells { display: flex; gap: 4px; }
.battery-old-ui .hm-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; min-height: 42px; padding: 4px 5px; border: 1px solid transparent; border-radius: var(--radius-sm); color: inherit; cursor: pointer; }
.battery-old-ui div.hm-cell { cursor: default; }
.battery-old-ui .hm-cell small { font-size: 9px; opacity: .72; } .battery-old-ui .hm-cell b { margin-top: 2px; font-size: 11px; }
.battery-old-ui .hm-cell:hover, .battery-old-ui .hm-cell.selected { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(139,92,246,.12); }
.battery-old-ui .hm-cell[data-extreme="MIN"] { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.24); }
.battery-old-ui .hm-cell[data-extreme="MAX"] { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,.24); }
.battery-old-ui .hm-cell[data-extreme="MIN / MAX"] { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,.24); }
.battery-old-ui .hm-cell[data-extreme]::after { display: block; margin-top: 2px; font-size: 8px; font-weight: 800; line-height: 1; letter-spacing: .35px; }
.battery-old-ui .hm-cell[data-extreme="MIN"]::after { content: "MIN"; color: #2563eb; }
.battery-old-ui .hm-cell[data-extreme="MAX"]::after { content: "MAX"; color: #dc2626; }
.battery-old-ui .hm-cell[data-extreme="MIN / MAX"]::after { content: "MIN / MAX"; color: #7c3aed; }
.battery-old-ui .hm-cell.is-balanced { background: var(--battery-balanced-bg); color: var(--battery-balanced-fg); } .battery-old-ui .hm-cell.is-drift { background: var(--battery-drift-bg); color: var(--battery-drift-fg); } .battery-old-ui .hm-cell.is-imbalanced { background: var(--battery-imbalanced-bg); color: var(--battery-imbalanced-fg); } .battery-old-ui .hm-cell.is-critical { background: var(--battery-critical-bg); color: var(--battery-critical-fg); } .battery-old-ui .hm-cell.is-na { background: var(--battery-no-data-bg); color: var(--battery-no-data-fg); } .battery-old-ui .hm-cell.is-cool { background: #dbeafe; color: #1e3a8a; } .battery-old-ui .hm-cell.is-warm { background: #e0f2fe; color: #075985; } .battery-old-ui .hm-cell.is-hot { background: var(--battery-drift-bg); color: var(--battery-drift-fg); } .battery-old-ui .hm-cell.is-warning { background: var(--battery-imbalanced-bg); color: var(--battery-imbalanced-fg); }
.battery-old-ui .battery-selected-old { display: flex; align-items: center; gap: 12px; color: var(--text-secondary); }
.battery-old-ui .battery-selected-old strong { color: var(--purple); font-size: 18px; } .battery-old-ui .battery-selected-old small { color: var(--text-tertiary); text-transform: uppercase; }
.battery-old-ui .battery-empty-state { text-align: center; } .battery-old-ui .battery-empty-state strong { display: block; margin-bottom: 4px; font-size: 15px; } .battery-old-ui .battery-empty-state p { margin: 0; color: var(--text-tertiary); font-size: 12px; }
@media (max-width: 900px) { .battery-old-ui .battery-system-summary, .battery-old-ui .battery-old-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .battery-old-ui .battery-health-old-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .battery-old-ui .battery-system-summary, .battery-old-ui .battery-old-kpi-strip, .battery-old-ui .battery-health-old-grid, .battery-old-ui .battery-limit-row { grid-template-columns: 1fr; } .battery-old-ui .battery-old-title { align-items: flex-start; flex-direction: column; } .battery-old-ui .battery-old-soc { display: flex; } }