/* ============================================
   SOLFACIL Admin Portal — Page-Specific Styles
   ============================================ */

/* ---- P1: Fleet Overview ---- */
.fleet-uptime-chart {
  height: 320px;
}

.fleet-device-dist-chart {
  height: 280px;
}

/* Offline event cause column */
.cause-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.cause-wifi {
  background: var(--amber-bg);
  color: var(--amber);
}

.cause-power {
  background: var(--negative-bg);
  color: var(--negative);
}

.cause-unknown {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

/* Backfill icon */
.backfill-ok { color: var(--positive); }
.backfill-pending { color: var(--amber); }

/* ---- P2: Device Management ---- */

/* ---- P2-scoped design tokens (mock-aligned palette) ---- */
#page-devices {
  --p2-bg: #080e18;
  --p2-surface: #0c1622;
  --p2-surface-2: #101e30;
  --p2-surface-3: #152740;
  --p2-border: #1e344e;
  --p2-border-hi: #2e4e72;
  --p2-border-soft: rgba(255,255,255,0.05);
  --p2-text: #dce6f2;
  --p2-muted: #708bab;
  --p2-dim: #4a6585;
  --p2-green: #2bcc5a;
  --p2-green-bg: rgba(43,204,90,0.10);
  --p2-green-border: rgba(43,204,90,0.32);
  --p2-amber: #f0a820;
  --p2-amber-bg: rgba(240,168,32,0.10);
  --p2-amber-border: rgba(240,168,32,0.30);
  --p2-violet: #8b6cf5;
  --p2-violet-bg: rgba(139,108,245,0.10);
  --p2-violet-border: rgba(139,108,245,0.30);
  --p2-red: #f05068;
  --p2-red-bg: rgba(240,80,104,0.10);
  --p2-red-border: rgba(240,80,104,0.30);
  --p2-r: 12px;
  --p2-r-sm: 8px;
}

/* P2 keeps a slightly wider centered shell than other pages.
   This preserves high information density without going full-bleed. */
#page-devices .page-content {
  max-width: 1600px;
  margin: 0 auto;
}

/* Filter bar */
.p2-filter-bar {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.p2-filter-bar select,
.p2-filter-bar input[type="text"] {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 12px;
  font-size: 0.85rem;
  font-family: var(--font-ui);
  min-width: 160px;
}

.p2-filter-bar select:focus,
.p2-filter-bar input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.p2-filter-bar input[type="text"] {
  min-width: 220px;
}

.p2-filter-bar .filter-spacer {
  flex: 1;
}

.p2-btn-commission {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  min-height: 48px;
  transition: background 0.15s, transform 0.1s;
}

.p2-btn-commission:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

/* Device table clickable rows */
.p2-device-table tr[data-device-id] {
  cursor: pointer;
  transition: background 0.12s;
}

.p2-device-table tr[data-device-id]:hover {
  background: rgba(59, 130, 246, 0.06);
}

.p2-device-count {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

/* ---- Device Drill-Down Panel ---- */
.device-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.device-panel-overlay.open {
  opacity: 1;
  visibility: visible;
}

.device-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 90vw;
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 901;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.device-panel-overlay.open .device-panel {
  transform: translateX(0);
}

.device-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.device-panel-header h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.panel-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  line-height: 1;
}

.panel-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.device-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
}

.panel-device-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.panel-device-id {
  font-family: var(--font-data);
  font-size: 1.1rem;
  font-weight: 700;
}

.panel-device-type-icon {
  font-size: 1.2rem;
}

.panel-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.panel-info-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}

.panel-info-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.panel-info-value {
  font-family: var(--font-data);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.panel-section-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.panel-telemetry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.panel-telemetry-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
}

.panel-telemetry-value {
  font-family: var(--font-data);
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.panel-telemetry-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

/* ---- Commissioning Wizard Overlay ---- */
.wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}

.wizard-overlay.open {
  opacity: 1;
  visibility: visible;
}

.wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.wizard-header h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}

.wizard-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  line-height: 1;
}

.wizard-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

/* Step progress bar */
.wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--space-md) var(--space-lg);
  flex-shrink: 0;
}

.wizard-step-item {
  display: flex;
  align-items: center;
  gap: 0;
}

.wizard-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-data);
  border: 2px solid var(--border);
  background: transparent;
  color: var(--muted);
  transition: all 0.2s;
  flex-shrink: 0;
}

.wizard-step-circle.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.wizard-step-circle.completed {
  border-color: var(--positive);
  background: var(--positive);
  color: #fff;
}

.wizard-step-line {
  width: 60px;
  height: 2px;
  background: var(--border);
  transition: background 0.2s;
}

.wizard-step-line.completed {
  background: var(--positive);
}

.wizard-step-label {
  display: none;
}

@media (min-width: 769px) {
  .wizard-step-label {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 4px;
    text-align: center;
    max-width: 80px;
  }
  .wizard-step-item {
    flex-direction: column;
    align-items: center;
  }
  .wizard-step-item:not(:last-child) {
    flex-direction: row;
  }
  .wizard-step-item {
    flex-direction: row;
  }
}

/* Wizard body */
.wizard-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wizard-step-content {
  width: 100%;
  max-width: 560px;
}

.wizard-step-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.wizard-step-content p {
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: var(--space-md);
}

.wizard-input-group {
  margin-bottom: var(--space-md);
}

.wizard-input-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

.wizard-input-group input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px 14px;
  font-size: 0.92rem;
  font-family: var(--font-data);
}

.wizard-input-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.wizard-input-row {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
}

.wizard-input-row .wizard-input-group {
  flex: 1;
}

.wizard-btn-scan {
  min-height: 48px;
  padding: 0 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.85rem;
  cursor: not-allowed;
  white-space: nowrap;
  opacity: 0.6;
}

/* Discovered device list in wizard */
.wizard-device-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.wizard-device-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.wizard-device-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.wizard-device-info {
  flex: 1;
}

.wizard-device-info .dev-id {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 0.88rem;
}

.wizard-device-info .dev-detail {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Comm test results */
.wizard-test-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

.wizard-test-item:last-child {
  border-bottom: none;
}

.wizard-test-id {
  font-family: var(--font-data);
  font-weight: 600;
  min-width: 70px;
}

.wizard-test-status {
  margin-left: auto;
  font-weight: 600;
}

.wizard-test-status.pass { color: var(--positive); }
.wizard-test-status.fail { color: var(--negative); }
.wizard-test-status.pending { color: var(--muted); }

/* Wizard spinner */
.wizard-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl) 0;
}

.wizard-spinner-ring {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: wizard-spin 0.8s linear infinite;
}

@keyframes wizard-spin {
  to { transform: rotate(360deg); }
}

.wizard-spinner-text {
  color: var(--muted);
  font-size: 0.88rem;
}

/* Progress bar (Step 4) */
.wizard-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin: var(--space-md) 0;
}

.wizard-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Step 5 success block */
.wizard-success {
  background: rgba(34, 197, 94, 0.08);
  border: 2px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.wizard-success-icon {
  font-size: 3rem;
  margin-bottom: var(--space-sm);
}

.wizard-success h3 {
  color: var(--positive);
  font-size: 1.3rem;
  margin-bottom: var(--space-sm);
}

.wizard-success p {
  color: var(--muted);
  margin-bottom: var(--space-xs);
}

.wizard-result-list {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wizard-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
  padding: 6px 0;
}

.wizard-result-item .dev-id {
  font-family: var(--font-data);
  font-weight: 600;
}

/* Wizard footer buttons */
.wizard-footer {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.wizard-btn-back,
.wizard-btn-next,
.wizard-btn-done {
  min-height: 48px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.wizard-btn-back {
  padding: 0 24px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}

.wizard-btn-back:hover {
  background: rgba(255, 255, 255, 0.06);
}

.wizard-btn-next,
.wizard-btn-done {
  flex: 1;
  background: var(--accent);
  color: #fff;
}

.wizard-btn-next:hover,
.wizard-btn-done:hover {
  background: #2563eb;
}

.wizard-btn-next:disabled,
.wizard-btn-done:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wizard-btn-done {
  background: var(--positive);
}

.wizard-btn-done:hover {
  background: #16a34a;
}

/* Commissioning history duration */
.duration-ok { color: var(--positive); }
.duration-warn { color: var(--amber); }

/* ---- P3: Energy Behavior ---- */

/* Home Selector */
.p3-home-selector-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.p3-selector-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.p3-home-select {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 12px;
  font-size: 0.88rem;
  font-family: var(--font-ui);
  min-width: 240px;
}

.p3-home-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Main Energy Chart */
.p3-main-chart {
  height: 420px;
}

.p3-chart-legend-hint {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
}

/* Device Tabs */
.p3-device-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-md);
  background: var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.p3-device-tab {
  flex: 1;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.p3-device-tab:hover {
  color: var(--text);
}

.p3-device-tab.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.p3-device-chart {
  height: 300px;
}

.p3-tab-panel {
  min-height: 300px;
}

/* Before / After Comparison */
.p3-ba-header {
  display: flex;
  align-items: flex-end;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.p3-ba-date {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.p3-ba-date label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.p3-ba-date input[type="date"] {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  padding: 8px 12px;
  font-size: 0.85rem;
  font-family: var(--font-data);
}

.p3-ba-arrow {
  font-size: 1.4rem;
  color: var(--muted);
  padding-bottom: 4px;
}

.p3-ba-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
}

.p3-ba-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}

.p3-ba-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-sm);
}

.p3-ba-values {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.p3-ba-before,
.p3-ba-after {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.p3-ba-dim {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
}

.p3-ba-val {
  font-family: var(--font-data);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.p3-ba-delta {
  font-family: var(--font-data);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
}

.p3-ba-delta.positive {
  background: var(--positive-bg);
  color: var(--positive);
}

.p3-ba-delta.negative {
  background: var(--negative-bg);
  color: var(--negative);
}

/* Cross-Home Summary — mode badges */
.p3-mode-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.mode-self {
  background: var(--positive-bg);
  color: var(--positive);
}

.mode-arb {
  background: var(--accent-bg);
  color: var(--accent);
}

.mode-peak {
  background: var(--neutral-bg);
  color: var(--neutral);
}

/* ---- P4: HEMS Control ---- */

/* Step Indicator */
.p4-step-indicator {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1.5rem;
}
.p4-step-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  opacity: 0.6;
}
.p4-step-item.p4-step-active {
  color: var(--accent);
  opacity: 1;
  font-weight: 600;
}
.p4-step-item.p4-step-done {
  color: var(--success, #4caf50);
  opacity: 0.8;
}
.p4-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--bg-tertiary, #333);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.p4-step-active .p4-step-num {
  background: var(--accent);
  color: #fff;
}
.p4-step-done .p4-step-num {
  background: var(--success, #4caf50);
  color: #fff;
}
.p4-step-divider {
  width: 2rem;
  height: 2px;
  background: var(--border-color, #444);
  flex-shrink: 0;
}

/* ---- P4 v6.0: New Component Styles ---- */

/* Parameter Panels */
.p4-param-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-top: var(--space-md);
}
.p4-param-panel h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--text-primary, #e0e0e0);
}
.p4-param-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.p4-param-row label {
  min-width: 120px;
  font-size: 0.85rem;
  color: var(--text-secondary, #aaa);
}
.p4-param-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}
.p4-soc-min-val,
.p4-soc-max-val {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 0.9rem;
  min-width: 2.5rem;
  text-align: right;
  color: var(--accent);
}
.p4-grid-limit {
  margin-top: var(--space-sm);
}
.p4-grid-limit input[type="number"] {
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-primary, #e0e0e0);
  padding: 0.4rem 0.6rem;
  width: 120px;
  font-family: var(--font-data);
}

/* Arbitrage Grid — 24-tile horizontal layout */
.p4-arb-brush {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
  align-items: center;
}
.p4-arb-brush label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
}
.p4-arb-brush label:has(input:checked) {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--accent);
}
.p4-arb-brush label[data-brush="charge"],
.p4-arb-brush label:first-of-type {
  --brush-color: #22c55e;
}
.p4-arb-brush label[data-brush="discharge"],
.p4-arb-brush label:last-of-type {
  --brush-color: #f97316;
}
.p4-arb-brush label::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--brush-color, var(--border));
  flex-shrink: 0;
}
.p4-arb-brush input[type="radio"] {
  accent-color: var(--accent);
}
.p4-arb-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  margin-bottom: var(--space-md);
  user-select: none;
}
.p4-arb-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary, #1e1e1e);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.82rem;
  font-family: var(--font-data);
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  height: 40px;
}
.p4-arb-cell:hover {
  border-color: var(--accent);
  transform: scale(1.05);
  z-index: 1;
}
.p4-arb-cell.p4-arb-charge {
  background: rgba(34, 197, 94, 0.35);
  border-color: #22c55e;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.p4-arb-cell.p4-arb-discharge {
  background: rgba(249, 115, 22, 0.35);
  border-color: #f97316;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.p4-arb-cell {
  position: relative;
}
@media (max-width: 768px) {
  .p4-arb-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}
@media (max-width: 480px) {
  .p4-arb-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Arb Templates */
.p4-arb-templates {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.p4-arb-templates .btn {
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.p4-arb-templates .btn:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: var(--accent);
  color: var(--text-primary, #e0e0e0);
}

/* Navigation Buttons */
.p4-nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-lg);
  gap: var(--space-md);
}
.p4-btn-prev,
.p4-btn-next {
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  border: 1px solid var(--border);
}
.p4-btn-prev {
  background: var(--bg-secondary, #1e1e1e);
  color: var(--text-secondary, #aaa);
}
.p4-btn-prev:hover {
  background: var(--bg-tertiary, #333);
}
.p4-btn-next {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.p4-btn-next:hover:not(:disabled) {
  filter: brightness(1.15);
}
.p4-btn-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.p4-btn-dispatch {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.7rem 2rem;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.p4-btn-dispatch:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

/* Gateway Selection Table */
.p4-gw-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-md);
}
.p4-gw-table th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #888);
  border-bottom: 1px solid var(--border);
}
.p4-gw-table td {
  padding: 0.7rem 0.8rem;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: var(--text-primary, #e0e0e0);
}
.p4-gw-table tr:hover td {
  background: rgba(59, 130, 246, 0.06);
}
.p4-gw-table input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

/* Step 3: Confirmation Summary */
.p4-config-summary {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.p4-config-summary p {
  margin: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--text-primary, #e0e0e0);
}
.p4-gw-preview {
  margin-top: var(--space-md);
  max-height: 200px;
  overflow-y: auto;
}
.p4-gw-preview li {
  padding: 0.3rem 0;
  font-size: 0.82rem;
  color: var(--text-secondary, #aaa);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Confirm Modal */
.p4-confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.p4-confirm-modal > div {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl, 2rem);
  max-width: 420px;
  width: 90%;
  text-align: center;
}
.p4-confirm-modal h3 {
  margin-bottom: var(--space-md);
  font-size: 1.1rem;
}
.p4-confirm-modal p {
  margin-bottom: var(--space-lg);
  color: var(--text-secondary, #aaa);
  font-size: 0.9rem;
}
.p4-confirm-ok,
.p4-confirm-cancel {
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0 0.3rem;
  border: 1px solid var(--border);
}
.p4-confirm-ok {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.p4-confirm-cancel {
  background: var(--bg-secondary, #1e1e1e);
  color: var(--text-secondary, #aaa);
}

/* Mode Selection Cards */
.p4-mode-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .p4-mode-cards {
    grid-template-columns: 1fr;
  }
}

.p4-mode-card {
  position: relative;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.p4-mode-card:hover {
  border-color: var(--mode-border, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.p4-mode-card[selected] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 6px 20px rgba(0,0,0,0.3);
  background: rgba(59, 130, 246, 0.12);
  transform: translateY(-3px);
}
.p4-mode-card[selected] .p4-mode-title {
  color: var(--accent);
  font-size: 1.05rem;
}
.p4-mode-card[selected] .p4-mode-desc {
  color: var(--text-primary, #e0e0e0);
}
.p4-mode-card[selected] .p4-mode-icon {
  transform: scale(1.1);
  transition: transform 0.2s;
}
.p4-mode-card[selected] .p4-mode-check {
  transform: scale(1.15);
}

.p4-mode-card.p4-mode-disabled {
  cursor: default;
  opacity: 0.7;
}

.p4-mode-card.p4-mode-disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}

.p4-mode-icon {
  font-size: 2.2rem;
  margin-bottom: var(--space-sm);
}

.p4-mode-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.p4-mode-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: var(--space-md);
  min-height: 2.5em;
}

.p4-mode-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.p4-mode-num {
  font-family: var(--font-data);
  font-size: 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.p4-mode-pct {
  font-size: 0.82rem;
  color: var(--muted);
  font-family: var(--font-data);
}

.p4-mode-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.p4-mode-check {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mode-border, var(--accent));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p4-readonly-badge {
  font-size: 0.75rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 10px;
  border-radius: 4px;
}

/* Batch Dispatch */
.p4-filter-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.p4-filter-row select {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 12px;
  font-size: 0.85rem;
  font-family: var(--font-ui);
  min-width: 160px;
}

.p4-filter-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.p4-filter-row select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.p4-target-section {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.p4-target-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}

.p4-target-radios {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.p4-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.p4-radio-label:hover {
  background: rgba(255, 255, 255, 0.04);
}

.p4-radio-label input[type="radio"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

.p4-radio-label input[type="radio"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.p4-radio-label input[type="radio"]:disabled + .p4-radio-text {
  opacity: 0.5;
}

.p4-dispatch-actions {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.p4-btn-apply {
  background: var(--positive) !important;
  border-color: var(--positive) !important;
}

.p4-btn-apply:hover:not(:disabled) {
  background: #16a34a !important;
  border-color: #16a34a !important;
}

.p4-btn-apply:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Preview Result */
.p4-preview-result {
  min-height: 0;
}

.p4-preview-box {
  background: var(--accent-bg);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.p4-preview-summary {
  font-size: 0.92rem;
  margin-bottom: var(--space-sm);
}

.p4-preview-breakdown {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

.p4-preview-breakdown div {
  padding: 2px 0;
}

.p4-preview-warning {
  font-size: 0.82rem;
  color: var(--amber);
  background: var(--amber-bg);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-top: var(--space-sm);
}

/* Tarifa Branca Table */
.p4-tarifa-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p4-tarifa-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}

.p4-tarifa-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.04);
}

.p4-tarifa-label {
  font-size: 0.85rem;
  color: var(--muted);
}

.p4-tarifa-value {
  font-size: 0.92rem;
  font-weight: 600;
}

.p4-tarifa-peak .p4-tarifa-value {
  color: var(--negative);
}

.p4-tarifa-inter .p4-tarifa-value {
  color: var(--amber);
}

.p4-tarifa-offpeak .p4-tarifa-value {
  color: var(--positive);
}

/* ACK Status */
.p4-dispatch-summary {
  margin-bottom: var(--space-md);
}

.p4-dispatch-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.p4-dispatch-time {
  font-size: 0.88rem;
  font-weight: 600;
}

.p4-dispatch-detail {
  font-size: 0.82rem;
  color: var(--muted);
}

.p4-ack-ok {
  color: var(--positive);
  font-weight: 500;
}

.p4-ack-pending {
  color: var(--amber);
  font-weight: 500;
}

.p4-ack-timeout {
  color: var(--negative);
  font-weight: 500;
}

.p4-view-link {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.p4-view-link a {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}

.p4-view-link a:hover {
  text-decoration: underline;
}

/* Tarifa Edit Modal Form */
.p4-modal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.p4-form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

.p4-form-group input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 14px;
  font-size: 0.92rem;
  font-family: var(--font-data);
}

.p4-form-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Toast Notifications */
.p4-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}

.p4-toast-show {
  transform: translateY(0);
  opacity: 1;
}

.p4-toast-success {
  border-left: 4px solid var(--positive);
}

.p4-toast-warning {
  border-left: 4px solid var(--amber);
}

.p4-toast-info {
  border-left: 4px solid var(--accent);
}

.p4-toast-error {
  border-left: 4px solid var(--negative);
}

.p4-toast-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

/* ============================================
   v6.4 P4 — HEMS Control Workbench
   ============================================ */

/* Header */
.hems-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm, 8px);
}
.hems-header h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}
.hems-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border: 2px solid;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(255,255,255,0.04);
}
.hems-instruction {
  color: var(--text-secondary, #888);
  font-size: 0.82rem;
  margin-bottom: var(--space-lg, 20px);
}

/* Step sections */
.hems-step {
  background: var(--card, #1a1a2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-lg, 20px);
  margin-bottom: var(--space-md, 12px);
}
.hems-step h3 {
  display: inline;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--space-md, 12px) 6px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--accent, #6366f1);
}

/* Strategy cards */
.hems-strategy-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md, 12px);
  margin: var(--space-md, 12px) 0;
}
.s-card {
  background: var(--bg-secondary, #1e1e1e);
  border: 2px solid var(--border, #2a2a3e);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-md, 12px);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.s-card:hover {
  border-color: var(--mode-accent);
}
.s-card.active {
  border-color: var(--mode-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mode-accent) 30%, transparent);
}
.s-card-icon { font-size: 1.6rem; margin-bottom: 6px; }
.s-card-label { font-size: 0.88rem; font-weight: 600; }
.s-card-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mode-accent);
  margin: 8px auto 0;
}

/* Parameter strip */
.params-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md, 12px);
  margin: var(--space-md, 12px) 0;
  padding: var(--space-md, 12px);
  background: var(--bg-secondary, #1e1e1e);
  border-radius: var(--radius-sm, 4px);
}
.param-item { flex: 1; min-width: 180px; }
.param-item label { font-size: 0.82rem; color: var(--text-secondary, #aaa); display: block; margin-bottom: 4px; }
.param-item input[type="range"] { width: 100%; accent-color: var(--accent); }

/* Arb editor */
.arb-section {
  margin-top: var(--space-md, 12px);
  padding: var(--space-md, 12px);
  background: var(--bg-secondary, #1e1e1e);
  border-radius: var(--radius-sm, 4px);
}
.arb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm, 8px);
  font-size: 0.88rem;
  font-weight: 600;
}
.arb-brush-group { display: flex; gap: 8px; }
.arb-brush-label {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--card, #1a1a2e);
  border: 1px solid var(--border);
}
.arb-brush-label.active { border-color: var(--accent); color: var(--accent); }
.arb-brush-label input { display: none; }
.arb-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  margin-bottom: var(--space-sm, 8px);
}
.arb-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
  color: var(--text-secondary, #888);
}
.arb-cell:hover { background: rgba(255,255,255,0.12); }
.arb-cell.charge { background: #34d399; color: #000; }
.arb-cell.discharge { background: #f87171; color: #000; }
.arb-templates { display: flex; gap: 6px; margin-top: var(--space-sm, 8px); }
.arb-hint { color: var(--amber, #f0a820); font-size: 0.78rem; margin-top: 6px; }

@media (max-width: 1100px) {
  .arb-grid { grid-template-columns: repeat(12, 1fr); }
}
@media (max-width: 800px) {
  .hems-strategy-row { grid-template-columns: 1fr; }
  .arb-grid { grid-template-columns: repeat(8, 1fr); }
}

/* Impact counter strip */
.impact-strip {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-secondary, #1e1e1e);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-sm, 8px) 0;
  margin-top: var(--space-sm, 8px);
}
.impact-cell {
  flex: 1;
  text-align: center;
  padding: var(--space-sm, 8px);
  border-right: 1px solid var(--border, #2a2a3e);
}
.impact-cell:last-child { border-right: none; }
.impact-sep {
  width: 3px;
  align-self: stretch;
  background: var(--border, #2a2a3e);
  margin: 0 2px;
}
.ic-val { font-size: 1.3rem; font-weight: 700; }
.ic-label { font-size: 0.72rem; color: var(--text-secondary, #888); margin-top: 2px; }
.ic-eligible .ic-val { color: var(--positive, #2bcc5a); }
.ic-same .ic-val { color: var(--accent, #6366f1); }
.ic-conflict .ic-val { color: var(--amber, #f0a820); }
.ic-offline .ic-val { color: var(--negative, #ef4444); }
.ic-willchange .ic-val { color: var(--positive, #2bcc5a); }

@media (max-width: 800px) {
  .impact-strip { flex-wrap: wrap; }
  .impact-cell { min-width: 33%; }
}

/* Filters */
.hems-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 8px);
  align-items: center;
  margin: var(--space-md, 12px) 0;
}
.hems-filter-label {
  font-size: 0.78rem;
  color: var(--text-secondary, #888);
}
.hems-filter-label select {
  margin-left: 4px;
  background: var(--bg-secondary, #1e1e1e);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 0.78rem;
}
.hems-filter-actions { display: flex; gap: 6px; margin-left: auto; }

/* Schedule bar legend */
.sched-legend {
  display: flex;
  align-items: center;
  gap: var(--space-md, 12px);
  font-size: 0.75rem;
  color: var(--text-secondary, #888);
  margin-bottom: var(--space-sm, 8px);
}
.sched-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.swatch {
  display: inline-block;
  width: 12px;
  height: 8px;
  border-radius: 2px;
}
.swatch-self { background: #2bcc5a; }
.swatch-peak { background: #f0a820; }
.swatch-charge { background: #34d399; }
.swatch-discharge { background: #f87171; }

/* Mini schedule bar */
.mini-bar {
  display: flex;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  min-width: 80px;
}
.seg { display: block; height: 100%; }
.seg-self { background: #2bcc5a; }
.seg-peak { background: #f0a820; }
.seg-charge { background: #34d399; }
.seg-discharge { background: #f87171; }
.seg-empty { background: rgba(255,255,255,0.04); }

/* Targeting table */
.gw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.gw-table th {
  padding: 0.5rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #888);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.gw-table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: middle;
}
.gw-table tr:hover td { background: rgba(59, 130, 246, 0.04); }
.gw-table tr.sel td { background: rgba(43, 204, 90, 0.06); }
.gw-table tr.row-conflict td { background: rgba(240, 168, 32, 0.06); }
.gw-table tr.row-offline td { background: rgba(239, 68, 68, 0.04); opacity: 0.7; }
.gw-table input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
.gw-table input[type="checkbox"]:disabled { opacity: 0.3; cursor: not-allowed; }
.hems-empty { text-align: center; color: var(--text-secondary); padding: 2rem !important; }

/* Eligibility badges */
.sb-eligible, .sb-same, .sb-conflict, .sb-offline {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.sb-eligible { background: rgba(43,204,90,0.15); color: #2bcc5a; }
.sb-same { background: rgba(99,102,241,0.15); color: #818cf8; }
.sb-conflict { background: rgba(240,168,32,0.15); color: #f0a820; }
.sb-offline { background: rgba(239,68,68,0.12); color: #ef4444; }

/* Status badges (A3: truthful status display) */
[class^="status-badge-"] {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.status-badge-online { background: rgba(43,204,90,0.15); color: #2bcc5a; }
.status-badge-offline { background: rgba(239,68,68,0.12); color: #ef4444; }
.status-badge-decommissioned { background: rgba(156,163,175,0.18); color: #9ca3af; }

/* Conflict reason */
.conflict-reason {
  margin-top: 4px;
  font-size: 0.72rem;
}
.conflict-inline {
  color: var(--amber, #f0a820);
}
.conflict-toggle {
  margin-left: 6px;
  color: var(--accent, #6366f1);
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.7rem;
}
.conflict-popover {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--card, #1a1a2e);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.72rem;
  color: var(--text-secondary, #aaa);
  line-height: 1.5;
}

/* Review panel (dormant) */
.review-panel {
  padding: var(--space-lg, 20px);
  text-align: center;
}
.review-panel.dormant {
  opacity: 0.45;
}
.review-panel.dormant p {
  color: var(--text-secondary, #888);
  font-size: 0.88rem;
}

/* Impact hint (pre-strategy) */
.impact-hint {
  color: var(--text-secondary, #888);
  font-size: 0.82rem;
  text-align: center;
  margin-top: var(--space-sm, 8px);
  font-style: italic;
}

/* Review panel — active state */
.review-panel.active {
  text-align: left;
}
.review-layout {
  display: flex;
  gap: var(--space-lg, 20px);
  align-items: flex-start;
}
.review-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
}
.review-card {
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-sm, 8px) var(--space-md, 12px);
}
.rc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.rc-change { color: var(--positive, #2bcc5a); font-size: 0.78rem; font-weight: 600; }
.rc-same { color: var(--accent, #6366f1); font-size: 0.78rem; font-weight: 600; }
.rc-mode { font-size: 0.78rem; color: var(--text-secondary, #888); margin-bottom: 4px; }
.rc-bars { display: flex; flex-direction: column; gap: 3px; }
.rc-bar-row { display: flex; align-items: center; gap: 8px; }
.rc-bar-label { font-size: 0.7rem; color: var(--text-secondary, #888); min-width: 80px; }

/* Dispatch summary (sticky right) */
.dispatch-summary {
  position: sticky;
  top: var(--space-lg, 20px);
  min-width: 240px;
  max-width: 280px;
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-md, 12px);
}
.ds-title {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: var(--space-sm, 8px);
}
.ds-mode {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--space-sm, 8px);
}
.ds-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  padding: 2px 0;
}
.ds-sep {
  height: 1px;
  background: var(--border, #2a2a3e);
  margin: var(--space-sm, 8px) 0;
}

/* Review actions */
.review-actions {
  margin-top: var(--space-md, 12px);
  text-align: right;
}

/* Confirmation modal overlay */
.hems-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}
.hems-modal {
  background: var(--card, #1a1a2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-xl, 28px);
  max-width: 520px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}
.hems-modal h3 {
  margin: 0 0 var(--space-md, 12px) 0;
  font-size: 1.1rem;
  font-weight: 700;
}
.modal-section {
  margin-bottom: var(--space-md, 12px);
  font-size: 0.88rem;
  line-height: 1.6;
}
.modal-bar {
  margin-top: var(--space-sm, 8px);
}
.modal-bar .mini-bar {
  height: 24px;
}

/* Modal warning banner */
.modal-warning {
  background: rgba(240, 168, 32, 0.12);
  border: 1px solid var(--amber, #f0a820);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  margin-bottom: var(--space-md, 12px);
  font-size: 0.82rem;
  color: var(--amber, #f0a820);
}
.modal-warning ul {
  margin: 4px 0 0 16px;
  padding: 0;
  font-size: 0.78rem;
}

/* Modal action buttons */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm, 8px);
  margin-top: var(--space-md, 12px);
}

/* Danger button */
.btn.danger {
  background: var(--negative, #ef4444);
  color: #fff;
  border-color: var(--negative, #ef4444);
}
.btn.danger:hover {
  background: #dc2626;
  border-color: #dc2626;
}

/* Disabled button styling */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Spinner for dispatch loading */
.spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-sm 0.6s linear infinite;
  vertical-align: middle;
}
@keyframes spin-sm {
  to { transform: rotate(360deg); }
}

/* Post-dispatch results */
.review-panel.results {
  text-align: left;
}
.results-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
}
.dispatch-result {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  background: var(--bg-secondary, #1e1e1e);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.82rem;
}
.dr-pending { border-left: 3px solid var(--accent, #8b6cf5); }
.dr-accepted { border-left: 3px solid var(--amber, #f0a820); }
.dr-success { border-left: 3px solid var(--positive, #2bcc5a); }
.dr-fail { border-left: 3px solid var(--negative, #e74c3c); }
.dr-skipped { border-left: 3px solid var(--text-secondary, #888); opacity: 0.7; }
.result-reason { font-size: 0.75rem; color: var(--text-secondary, #888); margin-left: auto; }

.results-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm, 8px);
  margin-top: var(--space-md, 12px);
}

@media (max-width: 800px) {
  .review-layout { flex-direction: column; }
  .dispatch-summary { position: static; max-width: none; min-width: auto; }
}

/* ---- End v6.4 P4 ---- */

/* ---- P5: VPP & DR ---- */

/* KPI grid — 7 cards */
.p5-kpi-grid-7 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (max-width: 1024px) {
  .p5-kpi-grid-7 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .p5-kpi-grid-7 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p5-kpi-disabled {
  opacity: 0.45;
  border: 1px dashed var(--border);
}

.p5-kpi-note {
  font-size: 0.68rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 6px;
  line-height: 1.4;
}

/* DR Form */
.p5-dr-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.p5-form-row {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.p5-form-group {
  flex: 1;
  min-width: 160px;
}

.p5-form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.p5-form-group select,
.p5-form-group input[type="number"] {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 12px;
  font-size: 0.88rem;
  font-family: var(--font-ui);
}

.p5-form-group select:focus,
.p5-form-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.p5-form-group select:disabled,
.p5-form-group input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.p5-trigger-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.p5-btn-trigger {
  min-width: 200px;
}

/* DR Progress */
.p5-dr-progress {
  min-height: 0;
}

.p5-progress-box {
  background: var(--accent-bg);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.p5-progress-complete {
  background: var(--positive-bg);
  border-color: rgba(34, 197, 94, 0.2);
}

.p5-progress-bar-track {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.p5-progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.p5-progress-complete .p5-progress-bar-fill {
  background: var(--positive);
}

.p5-progress-counter {
  font-size: 0.88rem;
  color: var(--text);
  font-family: var(--font-data);
  font-weight: 600;
}

.p5-progress-done {
  font-size: 0.92rem;
  color: var(--positive);
  font-weight: 600;
}

/* Latency chart */
.p5-latency-chart {
  height: 320px;
}

/* Type badges */
.p5-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.p5-type-discharge {
  background: var(--negative-bg);
  color: var(--negative);
}

.p5-type-charge {
  background: var(--positive-bg);
  color: var(--positive);
}

.p5-type-curtail {
  background: var(--amber-bg);
  color: var(--amber);
}

/* Text color helpers */
.text-positive { color: var(--positive); }
.text-negative { color: var(--negative); }
.text-amber { color: var(--amber); }

/* ---- P6: Performance Scorecard ---- */

/* Scorecard 3-column grid */
.p6-scorecard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (max-width: 900px) {
  .p6-scorecard-grid {
    grid-template-columns: 1fr;
  }
}

.p6-scorecard-column {
  display: flex;
  flex-direction: column;
}

.p6-scorecard-column .section-card {
  flex: 1;
}

/* Metric rows */
.p6-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.p6-metric-row:last-child {
  border-bottom: none;
}

.p6-metric-near {
  background: var(--amber-bg);
  margin: 0 -16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border-bottom-color: transparent;
}

.p6-metric-info {
  flex: 1;
  min-width: 0;
}

.p6-metric-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.p6-metric-target {
  font-size: 0.72rem;
  color: var(--muted);
}

.p6-metric-result {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.p6-metric-value {
  font-family: var(--font-data);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
}

.p6-metric-status {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.p6-status-pass {
  color: var(--positive);
}

.p6-status-near {
  color: var(--amber);
}

.p6-status-warn {
  color: var(--amber);
}

.p6-status-na {
  opacity: 0.5;
}

/* Savings chart */
.p6-savings-chart {
  height: min(420px, 50vh);
}

/* ============================================
   LIGHT THEME OVERRIDES
   ============================================ */

/* P1: Device link styling */
.p1-device-link {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-data);
}

.p1-device-link:hover {
  text-decoration: underline;
}

/* P4: Light theme tarifa rows */
[data-theme="light"] .p4-tarifa-row {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .p4-tarifa-row:nth-child(odd) {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .p4-target-section {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .p4-readonly-badge {
  background: rgba(0, 0, 0, 0.06);
}

/* P4: Light theme mode cards */
[data-theme="light"] .p4-mode-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* P4: Light theme toast */
[data-theme="light"] .p4-toast {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* P4: Light theme radio hover */
[data-theme="light"] .p4-radio-label:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* P2: Light theme device row hover */
[data-theme="light"] .p2-device-table tr[data-device-id]:hover {
  background: rgba(59, 130, 246, 0.08);
}

/* Panel and wizard overlays in light theme */
[data-theme="light"] .device-panel-overlay {
  background: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .panel-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .wizard-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .wizard-btn-back:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* P3: Light theme before/after */
[data-theme="light"] .p3-ba-card {
  border-color: var(--border);
}

/* P6: Light theme metric near highlight */
[data-theme="light"] .p6-metric-near {
  background: var(--amber-bg);
}

/* ============================================
   P2: Gateway-first Device Management (v5.19)
   ============================================ */

/* ---- Layer 1: Gateway Card List ---- */
.p2-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); }
.p2-header h2 { margin: 0; font-size: 1.25rem; }
.p2-header-counts { display: flex; gap: var(--space-lg); font-size: 0.85rem; color: var(--text-muted); }
.p2-header-counts strong { color: var(--text-primary); }

.gw-list { display: flex; flex-direction: column; gap: var(--space-md); }

.gw-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.gw-card:hover { border-color: var(--accent); }

.gw-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  user-select: none;
}

.gw-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gw-status.online { background: var(--positive); box-shadow: 0 0 6px var(--positive); }
.gw-status.offline { background: var(--negative); }
.gw-status.degraded { background: var(--amber); }

.gw-info { flex: 1; min-width: 0; }
.gw-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.gw-sn { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

.gw-meta {
  display: flex;
  gap: var(--space-lg);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.gw-meta span { white-space: nowrap; }
.gw-meta strong { color: var(--text-primary); }

.gw-chevron {
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.gw-card[data-expanded="true"] .gw-chevron { transform: rotate(90deg); }

/* Gateway detail link in card header */
.gw-detail-link {
  text-decoration: none;
  color: inherit;
}
.gw-detail-link:hover .gw-name-primary {
  color: var(--accent);
  text-decoration: underline;
}

/* Device chips (read-only device list in Gateway Layer 3) */
.device-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.device-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}
.device-chip.tag-online { border-left: 3px solid var(--positive); }
.device-chip.tag-offline { border-left: 3px solid var(--negative); }
.device-chip[data-asset-id] { cursor: pointer; transition: background 0.15s, box-shadow 0.15s; }
.device-chip[data-asset-id]:hover { background: rgba(59, 130, 246, 0.1); }
.device-chip.active { background: rgba(59, 130, 246, 0.15); box-shadow: 0 0 0 2px var(--accent); }

/* ---- Device Rows (inside expanded gateway) ---- */
.gw-devices {
  border-top: 1px solid var(--border);
  padding: var(--space-sm) var(--space-lg) var(--space-md);
}

.device-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: 6px;
  transition: background 0.15s;
}
.device-row:hover { background: rgba(255,255,255,0.04); }

.dev-icon { font-size: 1.2rem; flex-shrink: 0; }

.dev-id {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent);
  min-width: 120px;
}

.dev-brand { font-size: 0.82rem; color: var(--text-muted); min-width: 140px; }

.dev-stats {
  display: flex;
  gap: var(--space-lg);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: auto;
}
.dev-stats span { white-space: nowrap; }
.dev-stats strong { color: var(--text-primary); font-family: var(--font-mono); }

/* ---- Layer 3: Device Detail Page ---- */
.detail-page {
  padding: var(--space-lg) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
.detail-page > .left-col,
.detail-page > .right-col {
  min-width: 0; /* prevent grid blowout */
}

@media (max-width: 1024px) {
  .detail-page {
    grid-template-columns: 1fr;
  }
}

.detail-breadcrumb {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}
.detail-breadcrumb a { color: var(--accent); text-decoration: none; cursor: pointer; }
.detail-breadcrumb a:hover { text-decoration: underline; }

.detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}
.detail-header h2 { margin: 0; font-family: var(--font-mono); font-size: 1.1rem; }
.detail-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
}
.detail-status-badge.online { background: var(--positive-bg); color: var(--positive); }
.detail-status-badge.offline { background: var(--negative-bg); color: var(--negative); }

.detail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
@media (max-width: 768px) {
  .detail-cols { grid-template-columns: 1fr; }
}

/* ---- Energy Flow Diamond ---- */
/* Energy Flow: 4-corner diamond layout — fill entire data lane */
.energy-flow-diamond {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  width: 100%;
  height: 100%;
  min-height: 400px;
  margin: 0;
  position: relative;
}

.ef-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}
.ef-node-icon { font-size: 1.4rem; }
.ef-node-label { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.ef-node-value { font-family: var(--font-data); font-size: 0.85rem; font-weight: 600; color: var(--text); }
.ef-node-sub { font-size: 0.65rem; color: var(--muted); margin-top: 1px; }

/* 4-corner positions */
.ef-pv       { grid-column: 1; grid-row: 1; transform: none; }
.ef-load     { grid-column: 3; grid-row: 1; }
.ef-battery  { grid-column: 1; grid-row: 3; }
.ef-grid     { grid-column: 3; grid-row: 3; }

.ef-center {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.ef-center-hub {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: block;
}

/* SVG overlay for flow lines */
.ef-svg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.ef-svg-overlay line {
  stroke-width: 0.8;
  stroke-linecap: round;
}
/* Dynamic supply/demand groups — JS adds .ef-supply or .ef-demand per line */
.ef-svg-overlay .ef-supply {
  animation: ef-breathe-supply 4s ease-in-out infinite;
}
.ef-svg-overlay .ef-demand {
  animation: ef-breathe-demand 4s ease-in-out infinite;
}
@keyframes ef-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -7; }
}
@keyframes ef-breathe-supply {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.06; }
}
@keyframes ef-breathe-demand {
  0%, 100% { opacity: 0.06; }
  50%      { opacity: 1; }
}

/* Line colors — aligned with P3 Energy chart: PV=yellow, Battery=green, Load=blue, Grid=red */
.ef-line-pv    { stroke: #f6c445; }
.ef-line-bat   { stroke: #34d399; }
.ef-line-load  { stroke: #60a5fa; }
.ef-line-grid  { stroke: #f87171; }

/* Hidden when no flow */
.ef-line-hidden { display: none; }

/* Arrow markers — same P3 color scheme */
.ef-arrow-positive { fill: #f6c445; }
.ef-arrow-neutral  { fill: #34d399; }
.ef-arrow-text     { fill: #60a5fa; }
.ef-arrow-accent   { fill: #f87171; }

/* ---- Telemetry Rows ---- */
.tele-card { margin-bottom: var(--space-md); }

.tele-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.82rem;
}
.tele-row:last-child { border-bottom: none; }
.tele-label { color: var(--muted); }
.tele-value { font-family: var(--font-data); font-weight: 600; color: var(--text); }

/* ---- Config Rows ---- */
.config-card { margin-bottom: var(--space-md); }

.config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.82rem;
}
.config-row:last-child { border-bottom: none; }
.config-label { color: var(--muted); flex: 1; }
.config-input {
  width: 140px;
  text-align: right;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-data);
  font-size: 0.82rem;
}
.config-input:focus { border-color: var(--accent); outline: none; }
.config-select {
  width: 160px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text-primary);
  font-size: 0.82rem;
}
.config-default {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: var(--space-sm);
}

/* ---- Schedule Card ---- */
.schedule-card { margin-bottom: var(--space-md); }

.sync-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: var(--space-md);
}
.sync-status.synced { background: var(--positive-bg); color: var(--positive); }
.sync-status.pending { background: var(--amber-bg); color: var(--amber); }
.sync-status.failed { background: var(--negative-bg); color: var(--negative); }

.schedule-bar {
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: var(--space-sm);
  border: 1px solid var(--border);
}
.schedule-segment {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  overflow: hidden;
  white-space: nowrap;
}
.schedule-segment[data-mode="self_consumption"] { background: #22c55e; }
.schedule-segment[data-mode="peak_valley_arbitrage"] { background: #3b82f6; }
.schedule-segment[data-mode="peak_shaving"] { background: #a855f7; }
.schedule-segment[data-mode="idle"] { background: #374151; color: var(--text-muted); }
.schedule-segment[data-hours="1"]  { flex: 1 0 0; }
.schedule-segment[data-hours="2"]  { flex: 2 0 0; }
.schedule-segment[data-hours="3"]  { flex: 3 0 0; }
.schedule-segment[data-hours="4"]  { flex: 4 0 0; }
.schedule-segment[data-hours="5"]  { flex: 5 0 0; }
.schedule-segment[data-hours="6"]  { flex: 6 0 0; }
.schedule-segment[data-hours="7"]  { flex: 7 0 0; }
.schedule-segment[data-hours="8"]  { flex: 8 0 0; }
.schedule-segment[data-hours="9"]  { flex: 9 0 0; }
.schedule-segment[data-hours="10"] { flex: 10 0 0; }
.schedule-segment[data-hours="11"] { flex: 11 0 0; }
.schedule-segment[data-hours="12"] { flex: 12 0 0; }
.schedule-segment[data-hours="13"] { flex: 13 0 0; }
.schedule-segment[data-hours="14"] { flex: 14 0 0; }
.schedule-segment[data-hours="15"] { flex: 15 0 0; }
.schedule-segment[data-hours="16"] { flex: 16 0 0; }
.schedule-segment[data-hours="17"] { flex: 17 0 0; }
.schedule-segment[data-hours="18"] { flex: 18 0 0; }
.schedule-segment[data-hours="19"] { flex: 19 0 0; }
.schedule-segment[data-hours="20"] { flex: 20 0 0; }
.schedule-segment[data-hours="21"] { flex: 21 0 0; }
.schedule-segment[data-hours="22"] { flex: 22 0 0; }
.schedule-segment[data-hours="23"] { flex: 23 0 0; }
.schedule-segment[data-hours="24"] { flex: 24 0 0; }

.schedule-markers {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: var(--space-md);
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.schedule-table th {
  text-align: left;
  padding: 6px 8px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.schedule-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-primary);
}
.schedule-table td:first-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.schedule-mode-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

/* Schedule editor controls (Fix #1) */
.schedule-table select.config-input {
  padding: 2px 4px;
  font-size: 0.8rem;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.schedule-mode-select {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 3px;
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 3px 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.schedule-mode-select option {
  background: var(--card, #1e1e2e);
  color: var(--text, #e0e0e0);
}
[data-theme="light"] .schedule-mode-select {
  background: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #1a1a2e;
  text-shadow: none;
}
[data-theme="light"] .schedule-mode-select option {
  background: #fff;
  color: #1a1a2e;
}

.btn-delete-slot {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--negative);
  transition: background 0.15s;
}
.btn-delete-slot:hover {
  background: rgba(239, 68, 68, 0.15);
}

/* v6.2 Phase 3A: Split/Merge slot action buttons */
.btn-split-slot,
.btn-merge-slot {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}
.btn-split-slot {
  color: var(--accent);
}
.btn-split-slot .split-icon {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: -2px;
}
.btn-split-slot:hover {
  background: rgba(59, 130, 246, 0.12);
}
.btn-merge-slot {
  color: var(--negative);
  font-size: 1.1rem;
  font-weight: bold;
}
.btn-merge-slot:hover {
  background: rgba(239, 68, 68, 0.12);
}
.slot-actions {
  white-space: nowrap;
}
.slot-time-fixed {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 2px 4px;
  display: inline-block;
  min-width: 3.2em;
  text-align: center;
}

#schedule-add-slot {
  margin-top: var(--space-sm);
  width: 100%;
}

.schedule-apply-row {
  margin-top: var(--space-md);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm);
}

.schedule-inflight-info {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

.btn-outline {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.82rem;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- v5.21: Battery Schedule Card (merged) ---- */
.config-params-section {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.schedule-section {
  margin-bottom: var(--space-sm);
  overflow-x: auto;
}

/* Schedule table: horizontal scroll when control lane is narrow */
.schedule-section {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.schedule-section .schedule-table {
  table-layout: auto;
  min-width: 400px;
  width: 100%;
}

.schedule-section .schedule-table th,
.schedule-section .schedule-table td {
  padding: 5px 4px;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Compact column widths for schedule editor */
.schedule-section .schedule-table th:nth-child(1),
.schedule-section .schedule-table td:nth-child(1),
.schedule-section .schedule-table th:nth-child(2),
.schedule-section .schedule-table td:nth-child(2) { width: 54px; min-width: 54px; text-align: center; }

.schedule-section .schedule-table th:nth-child(3),
.schedule-section .schedule-table td:nth-child(3) { width: 100px; }

.schedule-section .schedule-table th:nth-child(4),
.schedule-section .schedule-table td:nth-child(4) { width: 72px; }

.schedule-section .schedule-table th:nth-child(5),
.schedule-section .schedule-table td:nth-child(5) { width: 64px; }

.schedule-section .schedule-table th:nth-child(6),
.schedule-section .schedule-table td:nth-child(6) { width: 28px; }

.schedule-section .schedule-table select.config-input {
  max-width: 100%;
  font-size: 0.78rem;
  padding: 3px 2px;
}

/* Time selects: monospace + tabular numerals for uniform digit width */
.schedule-section .schedule-table select.slot-end {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  min-width: 54px;
  text-align: center;
  text-align-last: center;
}

.slot-na {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.slot-direction,
.slot-export {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 4px 8px;
  font-size: 0.82rem;
  font-family: var(--font-ui);
}

.sync-status.sync-failed {
  background: var(--negative-bg);
  color: var(--negative);
}

/* ---- Fix #4: EMS Health Grid ---- */
.ems-health-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.ems-health-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-sm);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
}

.ems-icon {
  font-size: 1.2rem;
  margin-bottom: 2px;
}

.ems-value {
  font-family: var(--font-data);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.ems-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 1px;
}

@media (max-width: 1023px) {
  .ems-health-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Action Bar ---- */
.action-bar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  margin-top: var(--space-lg);
}

/* ---- Empty / Error States ---- */
.p2-empty {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  color: var(--text-muted);
  font-size: 0.9rem;
}
.p2-empty-icon { font-size: 2rem; margin-bottom: var(--space-sm); }

/* ---- Light theme overrides ---- */
[data-theme="light"] .gw-card { border-color: var(--border); }
[data-theme="light"] .device-row:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .tele-row { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .config-row { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .schedule-segment { color: #fff; }

.scorecard-na {
  color: var(--muted);
  font-style: italic;
}

/* ---- Page-Specific Responsive Rules ---- */

/* P2: Gateway cards responsive */
@media (max-width: 1439px) {
  .gw-meta {
    flex-wrap: wrap;
  }
}

@media (max-width: 1023px) {
  .gw-meta span {
    font-size: 0.7rem;
  }
  .detail-page {
    grid-template-columns: 1fr;
  }
  .energy-flow-diamond {
    width: 100%;
    min-height: 280px;
  }
}

/* P3: Chart responsive */
@media (max-width: 1439px) {
  .p3-main-chart {
    min-height: 250px;
  }
}

/* P4: Mode cards responsive */
@media (max-width: 1439px) {
  .p4-mode-cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 1023px) {
  .p4-mode-cards {
    grid-template-columns: 1fr;
  }
  .p4-filter-row {
    flex-direction: column;
  }
  .p4-filter-row select {
    width: 100%;
  }
}

/* ---- P3-AE: Asset Energy Flow ---- */
.p3ae-page {
  padding: 0;
}

.p3ae-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.p3ae-skeleton-heading {
  width: 300px;
  height: 28px;
  border-radius: 6px;
}

.p3ae-skeleton-controls {
  width: 100%;
  height: 48px;
  border-radius: 6px;
}

.p3ae-back-btn {
  flex-shrink: 0;
}

.p3ae-title h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.p3ae-date-display {
  font-size: 0.82rem;
  color: var(--muted);
  font-family: var(--font-data);
}

.p3ae-controls {
  margin-bottom: var(--space-md);
}

.p3ae-controls-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.p3ae-gran-group {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.p3ae-gran-btn {
  background: transparent;
  color: var(--muted);
  border: none;
  border-right: 1px solid var(--border);
  padding: 8px 16px;
  font-size: 0.82rem;
  font-family: var(--font-ui);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.p3ae-gran-btn:last-child {
  border-right: none;
}

.p3ae-gran-btn.active {
  background: var(--accent);
  color: #fff;
}

.p3ae-gran-btn:hover:not(.active) {
  background: rgba(59, 130, 246, 0.08);
  color: var(--text);
}

.p3ae-nav-group {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.p3ae-nav-arrow {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  width: 36px;
  height: 36px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.p3ae-nav-arrow:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
}

.p3ae-date-input {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 6px 12px;
  font-size: 0.85rem;
  font-family: var(--font-data);
  height: 36px;
}

.p3ae-date-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.p3ae-shortcuts {
  display: flex;
  gap: var(--space-xs);
}

.p3ae-shortcut {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.p3ae-shortcut:hover {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}


.p3ae-summary,
.p3ah-summary {
  margin-bottom: var(--space-md);
}


/* P3 KPI card alignment fix */
.p3ae-summary .kpi-card,
.p3ah-summary .kpi-card {
  min-height: 80px;
  justify-content: center;
}

.p3ae-summary .kpi-card .kpi-label,
.p3ah-summary .kpi-card .kpi-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
}

.p3ae-summary .kpi-card .kpi-value,
.p3ah-summary .kpi-card .kpi-value {
  font-size: 1.1rem;
}

@media (max-width: 1024px) {
  .p3ae-summary .kpi-card .kpi-value,
  .p3ah-summary .kpi-card .kpi-value {
    font-size: 0.95rem;
  }
  .p3ae-summary .kpi-card .kpi-label,
  .p3ah-summary .kpi-card .kpi-label {
    font-size: 0.7rem;
  }
}

.p3ae-chart {
  height: min(420px, 50vh);
}

/* ── P3 Responsive ─────────────────────────────────── */

/* P3 pages fill available width naturally */
.p3ae-page {
  padding: 0;
}

/* Controls wrap on narrow screens */
@media (max-width: 1200px) {
  .p3ae-controls-row {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
}

@media (max-width: 768px) {
  .p3ae-controls-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .p3ae-chart {
    height: min(320px, 45vh);
  }
}

@media (max-width: 480px) {
  .p3ae-chart {
    height: min(260px, 40vh);
  }
  .p3ae-gran-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
  .p3ae-shortcut {
    padding: 3px 6px;
    font-size: 0.7rem;
  }
}

/* Asset energy link in P2 device rows */
.p2-asset-energy-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.p2-asset-energy-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* Asset health link in P2 device rows */
.p2-asset-health-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #8b5cf6;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast);
  margin-left: 8px;
}

.p2-asset-health-link:hover {
  color: #7c3aed;
  text-decoration: underline;
}

/* ---- P3-2: Asset Health ---- */
.p3ah-page {
  padding: 0;
}

.p3ah-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-md);
  width: fit-content;
}

.p3ah-tab {
  background: transparent;
  color: var(--muted);
  border: none;
  border-right: 1px solid var(--border);
  padding: 8px 20px;
  font-size: 0.85rem;
  font-family: var(--font-ui);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.p3ah-tab:last-child {
  border-right: none;
}

.p3ah-tab.active {
  background: var(--accent);
  color: #fff;
}

.p3ah-tab:hover:not(.active) {
  background: rgba(59, 130, 246, 0.08);
  color: var(--text);
}


.p3ah-chart {
  height: min(320px, 45vh);
}

@media (max-width: 768px) {
  .p3ah-chart {
    height: min(260px, 40vh);
  }
}

.p3ah-soh-hint {
  color: var(--muted);
  font-size: 0.85rem;
  padding: var(--space-lg);
  text-align: center;
  font-style: italic;
}

.p3ah-do-table {
  width: 100%;
}

.p3ah-no-events {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  padding: var(--space-md);
}

/* P3 Energy Flow Toggle (eye icon) */
.p3ae-flow-toggle {
  background: transparent;
  border: 1px solid #2a2d3a;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}
.p3ae-flow-toggle:hover {
  border-color: #3b82f6;
  color: #9ca3af;
}
.p3ae-flow-toggle.active {
  border-color: #3b82f6;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

/* ============================================
   P2 v6.2: Devices — Home-first Workbench Layout
   ============================================ */

/* ---- Three-segment layout ---- */
.devices-layout {
  display: flex;
  gap: 0;
  min-height: calc(100vh - 80px);
}

/* ---- Object Locator (left spine) ---- */
.devices-locator {
  width: 230px;
  min-width: 230px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  max-height: calc(100vh - 80px);
  position: sticky;
  top: 0;
  background: rgba(10, 18, 30, 0.9);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  padding: 12px 0;
}

.locator-search {
  margin-bottom: 2px;
  padding: 0 10px;
}

.locator-search-input {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 11px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.locator-search-input:focus {
  border-color: var(--accent);
}
.locator-search-input::placeholder {
  color: var(--muted);
  font-size: 0.74rem;
}

.locator-count {
  font-size: 0.72rem;
  color: rgba(163, 228, 198, 0.7);
  background: rgba(43, 204, 90, 0.06);
  border: 1px solid rgba(43, 204, 90, 0.10);
  padding: 2px 7px;
  border-radius: 999px;
  margin: 0 10px 4px;
  align-self: flex-start;
  font-weight: 600;
}

.locator-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 6px;
}

.locator-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
  background: transparent;
}
.locator-item:hover {
  background: rgba(255, 255, 255, 0.02);
}
.locator-item.selected {
  border-color: rgba(139, 108, 245, 0.12);
  background: rgba(139, 108, 245, 0.07);
}

.locator-status {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.locator-status.online {
  background: var(--positive);
  box-shadow: 0 0 3px var(--positive);
}
.locator-status.offline {
  background: var(--negative);
}

.locator-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.locator-home {
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.locator-gw-id {
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: #4a6585;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0;
}

.locator-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

.locator-soc {
  font-family: var(--font-data);
  font-size: 0.72rem;
  font-weight: 700;
  color: #4a6585;
}

.locator-status-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.locator-status-label.online {
  color: var(--positive);
}
.locator-status-label.offline {
  color: var(--muted);
}

/* ---- Workbench (right panel) ---- */
.devices-workbench {
  flex: 1;
  min-width: 0;
  padding: 20px 26px 40px;
}

/* ---- Workbench empty state ---- */
.workbench-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--muted);
  text-align: center;
  padding: var(--space-xl);
}

.workbench-empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  opacity: 0.4;
}

.workbench-empty-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-sm);
}

.workbench-empty-detail {
  font-size: 0.88rem;
  max-width: 320px;
}

/* ---- Workbench content: 50/50 two-lane layout ---- */
.workbench-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.workbench-data-lane,
.workbench-control-lane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- Device composition (Data Lane) ---- */
.device-comp-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.device-comp-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}
.device-comp-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.device-comp-info {
  flex: 1;
  min-width: 0;
}

.device-comp-name, .dev-comp-name {
  font-size: 0.82rem;
  color: #9bb3cc;
  display: block;
  font-weight: 400;
}

.device-comp-type, .dev-comp-type {
  font-size: 0.72rem;
  color: #4a6585;
  display: block;
}

.device-comp-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* P2: data-lane cards should blend into workbench surface, not float as bordered boxes */
#page-devices .workbench-data-lane .section-card {
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: none;
}
#page-devices .workbench-data-lane .section-card-header {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ---- Responsive: narrow screens stack vertically ---- */
@media (max-width: 1023px) {
  .devices-layout {
    flex-direction: column;
  }
  .devices-locator {
    width: 100%;
    min-width: unset;
    max-height: 300px;
    position: static;
  }
  .workbench-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1279px) and (min-width: 1024px) {
  .devices-locator {
    width: 210px;
    min-width: 210px;
  }
}

/* ---- Light theme overrides ---- */
[data-theme="light"] .devices-locator {
  background: rgba(0, 0, 0, 0.03);
  border-right-color: var(--border);
}
[data-theme="light"] .locator-search-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--border);
}
[data-theme="light"] .locator-count {
  color: var(--positive);
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.12);
}
[data-theme="light"] .locator-item {
  border-color: transparent;
}
[data-theme="light"] .locator-item:hover {
  border-color: var(--border);
  background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .locator-item.selected {
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.06);
}
[data-theme="light"] .vu-diag-panel {
  background: var(--surface-1);
  border-color: var(--border);
}
[data-theme="light"] .vu-diag-panel-body {
  border-top-color: var(--border);
}
[data-theme="light"] .vu-live-metrics {
  border-top-color: var(--border);
}
[data-theme="light"] .vu-diagnostics-header {
  border-bottom-color: var(--border);
}
[data-theme="light"] .device-comp-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* ---- v6.2: Control Lane state notices ---- */
.control-state-notice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
}
.control-state-notice.pending {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: var(--amber, #fbbf24);
}
.control-state-notice.readonly {
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: var(--muted);
}
.control-state-notice.unavailable {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--negative, #ef4444);
}
.control-state-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ---- v6.2: Mode summary ---- */
.control-mode-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--surface-1, var(--card));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  box-shadow: var(--shadow-sm);
}
.control-mode-label {
  color: var(--muted);
  font-weight: 500;
}
.control-mode-value {
  font-weight: 600;
  color: var(--text);
}

/* ---- v6.2: Confirmation area ---- */
.confirmation-card {
  padding: 12px 14px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.confirmation-header {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.confirmation-target {
  font-size: 0.78rem;
  color: var(--muted);
  font-family: var(--font-data);
  margin-bottom: 8px;
}
.confirmation-diffs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.confirmation-diff-row {
  font-size: 0.8rem;
  color: var(--text);
  font-family: var(--font-data);
  padding: 2px 0;
}

/* ---- v6.2: Locator anomaly badges ---- */
.locator-badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
}
.badge-pending {
  background: rgba(251, 191, 36, 0.15);
  color: var(--amber, #fbbf24);
}
.badge-failed {
  background: rgba(239, 68, 68, 0.15);
  color: var(--negative, #ef4444);
}

/* ---- v6.2: Config defaults note ---- */
.config-defaults-note {
  font-size: 0.82rem;
  color: var(--amber, #fbbf24);
  padding: 8px 12px;
  background: rgba(251, 191, 36, 0.08);
  border-radius: 6px;
  margin-bottom: var(--space-sm);
}
.config-value-ro {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-primary);
}
.schedule-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-md);
}

/* ---- v6.2: Disabled controls in readonly/pending state ---- */
[data-control-state="readonly"] .config-input,
[data-control-state="pending"] .config-input,
[data-control-state="unavailable"] .config-input {
  opacity: 0.5;
  pointer-events: none;
}
[data-control-state="readonly"] .btn-delete-slot,
[data-control-state="pending"] .btn-delete-slot,
[data-control-state="unavailable"] .btn-delete-slot,
[data-control-state="readonly"] #schedule-add-slot,
[data-control-state="pending"] #schedule-add-slot,
[data-control-state="unavailable"] #schedule-add-slot,
[data-control-state="readonly"] .btn-split-slot,
[data-control-state="pending"] .btn-split-slot,
[data-control-state="unavailable"] .btn-split-slot,
[data-control-state="readonly"] .btn-merge-slot,
[data-control-state="pending"] .btn-merge-slot,
[data-control-state="unavailable"] .btn-merge-slot {
  display: none;
}

/* Light theme overrides for v6.2 */
[data-theme="light"] .control-state-notice.pending {
  background: rgba(251, 191, 36, 0.08);
}
[data-theme="light"] .confirmation-card {
  background: rgba(59, 130, 246, 0.04);
}

/* ---- v6.2: Enhanced schedule select contrast ---- */
/* Closed controls must follow the current theme.  Native dropdown popups may be
   rendered by the OS/browser, but forcing the closed select to white in dark
   mode breaks the Device page visual contract. */
.schedule-section .schedule-table select.config-input,
.schedule-section .schedule-table .slot-end,
.schedule-section .schedule-table .slot-direction,
.schedule-section .schedule-table .slot-export,
.schedule-section .schedule-table .schedule-mode-select {
  background: var(--surface-1, var(--card)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm);
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text);
  text-shadow: none !important;
  color-scheme: dark;
  font-weight: 500;
}

/* Time dropdown: enforce monospace + tabular-nums for even digit widths */
.schedule-section .schedule-table .slot-end {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.schedule-section .schedule-table select.config-input option,
.schedule-section .schedule-table select.config-input optgroup,
.schedule-section .schedule-table .slot-end option,
.schedule-section .schedule-table .slot-direction option,
.schedule-section .schedule-table .slot-export option,
.schedule-section .schedule-table .schedule-mode-select option {
  background: var(--surface-1, var(--card)) !important;
  color: var(--text) !important;
}

[data-theme="light"] .schedule-section .schedule-table select.config-input,
[data-theme="light"] .schedule-section .schedule-table .slot-end,
[data-theme="light"] .schedule-section .schedule-table .slot-direction,
[data-theme="light"] .schedule-section .schedule-table .slot-export,
[data-theme="light"] .schedule-section .schedule-table .schedule-mode-select {
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827;
  border-color: #cbd5e1 !important;
  color-scheme: light;
}

[data-theme="light"] .schedule-section .schedule-table select.config-input option,
[data-theme="light"] .schedule-section .schedule-table select.config-input optgroup,
[data-theme="light"] .schedule-section .schedule-table .slot-end option,
[data-theme="light"] .schedule-section .schedule-table .slot-direction option,
[data-theme="light"] .schedule-section .schedule-table .slot-export option,
[data-theme="light"] .schedule-section .schedule-table .schedule-mode-select option {
  background: #ffffff !important;
  color: #111827 !important;
}

/* ---- v6.2: Responsive improvements for Devices page ---- */

/* Medium screens: tighter locator + workbench */
@media (max-width: 1023px) {
  .devices-layout {
    gap: var(--space-md);
  }

  .schedule-apply-row {
    flex-wrap: wrap;
  }

  /* Ensure schedule table scrolls horizontally */
  .schedule-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .schedule-section .schedule-table {
    min-width: 360px;
  }
}

/* Small screens: stack everything, ensure usability */
@media (max-width: 768px) {
  .devices-layout {
    flex-direction: column;
    gap: var(--space-md);
  }

  .devices-locator {
    width: 100%;
    min-width: unset;
    max-height: 220px;
    position: static;
  }

  .workbench-content {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Control lane needs full width */
  .workbench-control-lane {
    width: 100%;
    min-width: 0;
  }

  /* Schedule table: compact for narrow screens but still readable */
  .schedule-section .schedule-table {
    min-width: 320px;
    font-size: 0.78rem;
  }

  .schedule-section .schedule-table th,
  .schedule-section .schedule-table td {
    padding: 4px 3px;
    font-size: 0.78rem;
  }

  /* Apply button: full width on mobile */
  .schedule-apply-row {
    flex-direction: column;
    align-items: stretch;
  }

  .schedule-apply-row button {
    width: 100%;
    min-height: 44px;
  }

  /* Config params: stack on mobile */
  .config-params-section .p4-param-row {
    flex-wrap: wrap;
  }

  .config-params-section .p4-param-row label {
    min-width: auto;
    width: 100%;
  }

  /* Confirmation card: wrap diffs */
  .confirmation-diff-row {
    word-break: break-all;
  }

  /* EMS Health grid: 2 columns on mobile */
  .ems-health-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Data lane also needs full width */
  .workbench-data-lane {
    width: 100%;
    min-width: 0;
  }

  /* Schedule selects: ensure touch-friendly sizing on mobile */
  .schedule-section .schedule-table select.config-input,
  .schedule-section .schedule-table .slot-end,
  .schedule-section .schedule-table .slot-direction,
  .schedule-section .schedule-table .slot-export,
  .schedule-section .schedule-table .schedule-mode-select {
    font-size: 0.8rem !important;
    padding: 4px 3px !important;
    min-height: 32px;
  }

  /* Section card headers: don't shrink below readable size */
  .section-card-header h3 {
    font-size: 0.88rem;
  }
}

/* ---- P3: Energy Page (v6.3) ---- */

/* Centered layout with reasonable max-width */
#page-energy .page-content {
  max-width: 1600px;
  margin: 0 auto;
}

/* Two-panel layout: locator (left) + workbench (right) */
.energy-layout {
  display: flex;
  gap: var(--space-lg);
  min-height: calc(100vh - 80px);
}

.energy-locator {
  width: 230px;
  min-width: 230px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  overflow-y: auto;
  max-height: calc(100vh - 80px);
  position: sticky;
  top: 0;
}

.energy-workbench {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Top controls bar */
.energy-top-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
  padding: var(--space-xs) 0;
}

.energy-controls-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Gateway name (read-only label) */
.energy-gw-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

/* Window toggle buttons */
.energy-window-group {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.energy-window-btn {
  background: var(--card);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.energy-window-btn:last-child {
  border-right: none;
}

.energy-window-btn:hover {
  background: var(--hover);
}

.energy-window-btn.active {
  background: var(--accent);
  color: #fff;
}

/* Date input */
.energy-date-input {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 6px 10px;
  font-size: 0.82rem;
  font-family: var(--font-ui);
  min-width: 140px;
}

.energy-date-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Refresh button */
.energy-refresh-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 6px 10px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s;
  line-height: 1;
}

.energy-refresh-btn:hover {
  background: var(--hover);
}

/* Chart containers */
.energy-chart-container {
  height: 360px;
  width: 100%;
  margin-bottom: var(--space-md);
}

/* 680px tall when battery SOC series is present — replaces inline style="height:..." (CSP fix) */
.energy-chart-container.has-soc {
  height: 680px;
}

/* Loading area */
.energy-loading-area {
  min-height: 360px;
}

/* Directional summary cards (4 cards row) */
.energy-dir-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.energy-dir-card {
  text-align: center;
  padding: var(--space-sm);
}

.energy-dir-card .metric-value {
  font-size: 1.1rem;
}

/* Stat card panel backgrounds */
.stat-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: var(--space-sm) var(--space-md);
}

.stat-card-label {
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 4px;
}

.stat-card-desc {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 4px;
  line-height: 1.3;
  opacity: 0.7;
}

.metric-value {
  font-size: 1.1rem;
  font-weight: 600;
}

/* Metric color coding */
.metric.pv .metric-value { color: #f6c445; }
.metric.load .metric-value { color: #60a5fa; }
.metric.import .metric-value { color: #f87171; }
.metric.export .metric-value { color: #34d399; }
.metric.charge .metric-value { color: #34d399; }
.metric.discharge .metric-value { color: #fb923c; }
.metric.supporting .metric-value { color: #a78bfa; }

/* SoC info block (stats view) */
.energy-soc-info {
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  color: var(--muted);
  font-size: 0.85rem;
}

.energy-soc-info-icon {
  font-size: 1rem;
  margin-right: 4px;
}

/* Metrics hierarchy rows */
.energy-metric-primary,
.energy-metric-secondary,
.energy-metric-supporting {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.energy-metric-primary {
  grid-template-columns: repeat(4, 1fr);
}

.energy-metric-primary .stat-card {
  text-align: center;
}

.energy-metric-primary .metric-value {
  font-size: 1.75rem;
  font-weight: 700;
}

.energy-metric-secondary {
  grid-template-columns: repeat(2, 1fr);
}

.energy-metric-secondary .stat-card {
  text-align: center;
}

.energy-metric-secondary .metric-value {
  font-size: 1.2rem;
  font-weight: 600;
}

.energy-metric-supporting {
  grid-template-columns: repeat(3, 1fr);
}

.energy-metric-supporting .stat-card {
  text-align: center;
}

.energy-metric-supporting .metric-value {
  font-size: 1.0rem;
  font-weight: 600;
}

/* ── Headline Verdict (v6.3-R2) ── */
.energy-verdict {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 16px;
  margin-bottom: 10px;
}

.energy-verdict-metric {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.energy-verdict-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Grade-based color — replaces inline style="color:..." (CSP fix) */
.energy-verdict-value.good { color: #34d399; }
.energy-verdict-value.fair { color: #f6c445; }
.energy-verdict-value.poor { color: #f87171; }

.energy-verdict-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.energy-verdict-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.energy-verdict-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.energy-verdict-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

.energy-verdict-sep {
  width: 1px;
  height: 32px;
  background: var(--border);
  flex-shrink: 0;
}

.energy-verdict-grade {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}

.energy-verdict-grade.good {
  background: rgba(52,211,153,0.12);
  color: #6ee7b7;
  border: 1px solid rgba(52,211,153,0.18);
}

.energy-verdict-grade.fair {
  background: rgba(246,196,69,0.12);
  color: #fcd34d;
  border: 1px solid rgba(246,196,69,0.18);
}

.energy-verdict-grade.poor {
  background: rgba(248,113,113,0.12);
  color: #fca5a5;
  border: 1px solid rgba(248,113,113,0.18);
}

/* ── Top Summary Strip (v6.3-R2) ── */
.energy-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}

.energy-sum-cell {
  background: var(--card);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.energy-sum-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.energy-sum-dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  flex-shrink: 0;
}

.energy-sum-value {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.energy-sum-unit {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 2px;
}

.energy-sum-hint {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.3;
  opacity: 0.7;
}

.energy-sum-cell.pv .energy-sum-value { color: #f6c445; }
.energy-sum-cell.load .energy-sum-value { color: #60a5fa; }
.energy-sum-cell.grid-imp .energy-sum-value { color: #f87171; }
.energy-sum-cell.grid-exp .energy-sum-value { color: #34d399; }

/* Series dot colors — replaces inline style="background:..." (CSP fix) */
.energy-sum-cell.pv .energy-sum-dot { background: #f6c445; }
.energy-sum-cell.load .energy-sum-dot { background: #60a5fa; }
.energy-sum-cell.grid-imp .energy-sum-dot { background: #f87171; }
.energy-sum-cell.grid-exp .energy-sum-dot { background: #34d399; }

/* ── Battery Context Bar (v6.3-R2) ── */
.energy-battery-context {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 16px;
  font-size: 12px;
}

.energy-bat-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(52,211,153,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.energy-bat-label {
  color: var(--muted);
  font-size: 11px;
}

.energy-bat-val {
  color: #34d399;
  font-weight: 600;
  font-size: 13px;
}

.energy-bat-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  flex-shrink: 0;
}

.energy-bat-note {
  color: var(--muted);
  font-size: 10px;
  margin-left: auto;
}

/* ── Behavior Interpretation (v6.3-R2) ── */
.energy-interpretation {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  margin-top: 6px;
}

.energy-interp-header {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 10px;
}

.energy-interp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.energy-interp-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.015);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.03);
}

.energy-interp-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.energy-interp-icon.ic-pv { background: rgba(246,196,69,0.10); }
.energy-interp-icon.ic-load { background: rgba(96,165,250,0.10); }
.energy-interp-icon.ic-battery { background: rgba(52,211,153,0.10); }
.energy-interp-icon.ic-grid { background: rgba(248,113,113,0.10); }
.energy-interp-icon.ic-soc { background: rgba(167,139,250,0.10); }

.energy-interp-body {
  min-width: 0;
}

.energy-interp-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.energy-interp-detail {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
}

.energy-interp-detail strong { font-weight: 600; }
.energy-interp-detail .energy-val-pv { color: #f6c445; font-weight: 600; }
.energy-interp-detail .energy-val-load { color: #60a5fa; font-weight: 600; }
.energy-interp-detail .energy-val-bat { color: #34d399; font-weight: 600; }
.energy-interp-detail .energy-val-grid { color: #f87171; font-weight: 600; }
.energy-interp-detail .energy-val-soc { color: #a78bfa; font-weight: 600; }

/* ── Nav buttons (v6.3-R2) ── */
.energy-nav-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.energy-nav-btn:hover {
  background: var(--hover);
  color: var(--text);
}

.energy-today-btn {
  background: rgba(59,130,246,0.08);
  border-color: rgba(59,130,246,0.14);
  color: #bfdbfe;
}

/* ── Auto-refresh indicator (v6.3-R2) ── */
.energy-auto-refresh {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  width: 100%;
}

.energy-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  animation: energy-pulse 2s infinite;
}

@keyframes energy-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Empty state */
.energy-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
  gap: var(--space-sm);
}

.energy-empty-icon {
  font-size: 3rem;
  opacity: 0.5;
}

.energy-empty-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.energy-empty-hint {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 320px;
}

.energy-goto-devices {
  margin-top: var(--space-sm);
}

/* Energy page responsive */
@media (max-width: 900px) {
  .energy-layout {
    flex-direction: column;
  }

  .energy-locator {
    width: 100%;
    min-width: 0;
    max-height: 220px;
    position: static;
  }
}

@media (max-width: 768px) {
  .energy-dir-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .energy-metric-primary {
    grid-template-columns: repeat(2, 1fr);
  }

  .energy-metric-supporting {
    grid-template-columns: repeat(2, 1fr);
  }

  .energy-top-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .energy-gw-label {
    max-width: 100%;
  }

  .energy-summary-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .energy-interp-grid {
    grid-template-columns: 1fr;
  }

  .energy-verdict {
    flex-wrap: wrap;
  }

  .energy-battery-context {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .energy-dir-cards {
    grid-template-columns: 1fr 1fr;
  }

  .energy-metric-primary,
  .energy-metric-secondary {
    grid-template-columns: 1fr 1fr;
  }

  .energy-metric-supporting {
    grid-template-columns: 1fr;
  }

  .energy-summary-strip {
    grid-template-columns: 1fr;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .devices-locator {
    max-height: 180px;
  }

  .schedule-section .schedule-table {
    min-width: 280px;
  }

  /* Hide less critical schedule columns on very narrow screens */
  .schedule-section .schedule-table th:nth-child(5),
  .schedule-section .schedule-table td:nth-child(5) {
    display: none;
  }

  .locator-badges {
    display: none;
  }

  .workbench-empty {
    min-height: 200px;
    padding: var(--space-md);
  }

  .control-mode-summary {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
}

/* ============================================
   P5: Strategy Triggers
   ============================================ */

/* ---- Hero ---- */
.p5-strategy-hero {
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  border: 2px solid var(--border);
  background: var(--card);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.p5-strategy-posture-calm {
  border-color: var(--positive);
  border-style: solid;
}

.p5-strategy-posture-approval {
  border-color: var(--amber);
  animation: p5-strategy-pulse-border 2s ease-in-out infinite;
}

@keyframes p5-strategy-pulse-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  50% { box-shadow: 0 0 12px 2px rgba(245, 158, 11, 0.3); }
}

.p5-strategy-posture-protective {
  border-color: var(--accent);
  border-style: solid;
}

.p5-strategy-posture-escalation {
  border-color: var(--negative);
  box-shadow: 0 0 16px 2px rgba(239, 68, 68, 0.25);
}

.p5-strategy-hero-main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.p5-strategy-hero-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.p5-strategy-hero-info {
  flex: 1;
  min-width: 0;
}

.p5-strategy-hero-posture {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-xs);
}

.p5-strategy-hero-driver {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: var(--space-xs);
}

.p5-strategy-hero-badges {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}

.p5-strategy-hero-summary {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.4;
}

.p5-strategy-hero-indicators {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

/* ---- Indicators ---- */
.p5-strategy-indicator {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.p5-strategy-indicator-override {
  background: var(--amber-bg);
  color: var(--amber);
}

.p5-strategy-indicator-conflict {
  background: var(--negative-bg);
  color: var(--negative);
}

.p5-strategy-indicator-action {
  background: var(--amber-bg);
  color: var(--amber);
}

/* ---- Calm Explanation ---- */
.p5-strategy-calm-explain {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.p5-strategy-calm-reason {
  font-size: 0.875rem;
  color: var(--text);
  margin-bottom: var(--space-xs);
}

.p5-strategy-calm-detail {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

.p5-strategy-calm-factors {
  margin: 0;
  padding-left: var(--space-lg);
  font-size: 0.8125rem;
  color: var(--muted);
}

.p5-strategy-calm-factors li {
  margin-bottom: 2px;
}

/* ---- Badges ---- */
.p5-strategy-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.p5-strategy-badge-governance {
  background: var(--neutral-bg);
  color: var(--neutral);
}

.p5-strategy-badge-governance-escalate {
  background: var(--amber-bg);
  color: var(--amber);
}

.p5-strategy-urgency-critical {
  background: var(--negative-bg);
  color: var(--negative);
}

.p5-strategy-urgency-high {
  background: var(--amber-bg);
  color: var(--amber);
}

.p5-strategy-urgency-medium {
  background: var(--cyan-bg);
  color: var(--cyan);
}

.p5-strategy-urgency-low,
.p5-strategy-urgency-soon {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

.p5-strategy-status-new { background: var(--accent-bg); color: var(--accent); }
.p5-strategy-status-pending_approval { background: var(--amber-bg); color: var(--amber); }
.p5-strategy-status-approved { background: var(--positive-bg); color: var(--positive); }
.p5-strategy-status-executing { background: var(--accent-bg); color: var(--accent); }
.p5-strategy-status-completed { background: var(--positive-bg); color: var(--positive); }
.p5-strategy-status-deferred { background: rgba(255,255,255,0.05); color: var(--muted); }
.p5-strategy-status-suppressed { background: var(--negative-bg); color: var(--negative); }
.p5-strategy-status-escalated { background: var(--amber-bg); color: var(--amber); }

.p5-strategy-intent-arb-note {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 4px;
}

.p5-strategy-ctx-counts-helper {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* ---- Triage Lanes ---- */
.p5-strategy-lane {
  margin-bottom: var(--space-md);
}

.p5-strategy-lane-amber .section-card-header {
  border-left: 4px solid var(--amber);
}

.p5-strategy-lane-accent .section-card-header {
  border-left: 4px solid var(--accent);
}

.p5-strategy-lane-muted .section-card-header {
  border-left: 4px solid var(--muted);
}

.p5-strategy-lane-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.p5-strategy-lane-empty {
  padding: var(--space-lg);
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}

/* ---- Intent Detail Panel ---- */
.p5-strategy-intent-detail {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.p5-strategy-detail-loading,
.p5-strategy-detail-error {
  padding: var(--space-md);
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}

.p5-strategy-detail-error {
  color: var(--negative);
}

.p5-strategy-detail-body h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  margin: var(--space-md) 0 var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.p5-strategy-detail-body h4:first-child {
  margin-top: 0;
}

/* Key-value table */
.p5-strategy-kv-table {
  width: 100%;
  font-size: 0.8125rem;
  border-collapse: collapse;
}

.p5-strategy-kv-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.p5-strategy-kv-key {
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  width: 30%;
}

.p5-strategy-kv-row {
  display: flex;
  gap: var(--space-sm);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
}

.p5-strategy-kv-row .p5-strategy-kv-key::after {
  content: ":";
}

.p5-strategy-kv-row .p5-strategy-kv-val {
  color: var(--text);
}

/* Next path */
.p5-strategy-path-item {
  font-size: 0.8125rem;
  color: var(--text);
  margin-bottom: var(--space-xs);
  line-height: 1.4;
}

/* Arbitration note */
.p5-strategy-arb-note {
  font-size: 0.8125rem;
  color: var(--amber);
  background: var(--amber-bg);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin-top: var(--space-sm);
}

/* ---- Action Buttons ---- */
.p5-strategy-actions {
  margin-top: var(--space-md);
}

.p5-strategy-action-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.p5-strategy-action-btn {
  font-size: 0.8125rem;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity var(--transition-fast);
}

.p5-strategy-action-btn:hover {
  opacity: 0.85;
}

.btn-positive {
  background: var(--positive);
  color: #fff;
}

.btn-amber {
  background: var(--amber);
  color: #fff;
}

.btn-negative {
  background: var(--negative);
  color: #fff;
}

.btn-warning {
  background: #ea580c;
  color: #fff;
}

/* Reason input area */
.p5-strategy-reason-input {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.p5-strategy-textarea {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  resize: vertical;
}

.p5-strategy-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.p5-strategy-input-error {
  border-color: var(--negative) !important;
}

.p5-strategy-submit-action {
  align-self: flex-start;
}

/* ---- History Timeline ---- */
.p5-strategy-timeline {
  position: relative;
  padding-left: var(--space-lg);
}

.p5-strategy-timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.p5-strategy-timeline-item {
  position: relative;
  margin-bottom: var(--space-md);
  padding-left: var(--space-sm);
}

.p5-strategy-timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-lg) + 5px);
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.p5-strategy-timeline-time {
  font-size: 0.75rem;
  color: var(--muted);
  font-family: var(--font-data);
}

.p5-strategy-timeline-event {
  font-size: 0.8125rem;
  color: var(--text);
  font-weight: 500;
}

.p5-strategy-timeline-detail {
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---- Context Section ---- */
.p5-strategy-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

.p5-strategy-ctx-block h4 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-sm);
}

.p5-strategy-ctx-block ul {
  margin: 0;
  padding-left: var(--space-md);
  font-size: 0.8125rem;
  color: var(--text);
}

.p5-strategy-ctx-block li {
  margin-bottom: 2px;
}

.p5-strategy-ctx-counts {
  display: flex;
  gap: var(--space-lg);
  font-size: 0.875rem;
  color: var(--text);
}

/* ---- Override Section ---- */
.p5-strategy-override-active {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.p5-strategy-create-override {
  margin-bottom: var(--space-md);
}

.p5-strategy-override-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.p5-strategy-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.p5-strategy-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.p5-strategy-form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.p5-strategy-form-group select,
.p5-strategy-form-group input[type="number"],
.p5-strategy-form-group input[type="text"] {
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

.p5-strategy-form-group select:focus,
.p5-strategy-form-group input:focus {
  outline: none;
  border-color: var(--accent);
}

.p5-strategy-form-actions {
  display: flex;
  gap: var(--space-sm);
}

.p5-strategy-cancel-override {
  font-size: 0.8125rem;
}

/* ---- Skeleton ---- */
.p5-strategy-skeleton {
  padding: 0;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .p5-strategy-hero-main {
    flex-direction: column;
  }

  .p5-strategy-form-row {
    grid-template-columns: 1fr;
  }

  .p5-strategy-context {
    grid-template-columns: 1fr;
  }
}

/* ---- P5 Polish: Posture-first hero ---- */
.p5-strategy-hero-posture-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 2px;
}

.p5-strategy-hero-narrative {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
  margin-top: var(--space-xs);
}

.p5-strategy-hero-explanation {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}

.p5-strategy-hero-trace {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: var(--space-sm);
  padding: 4px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--border);
  font-style: italic;
}

/* ---- P5 Polish: Status strip ---- */
.p5-strategy-status-strip {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted);
}

.p5-strategy-strip-item {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
}

.p5-strategy-strip-override {
  color: var(--amber);
}

.p5-strategy-strip-conflict {
  color: var(--negative);
}

.p5-strategy-strip-action {
  color: var(--amber);
}

.p5-strategy-strip-sep {
  color: var(--border);
  font-size: 0.9rem;
}

/* ---- P5 Polish: Derived cards ---- */
.p5-strategy-derived-card {
  border-style: dashed;
  opacity: 0.92;
}

.p5-strategy-derived-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-left: auto;
}

/* ---- P5 Polish: Card trace ---- */
.p5-strategy-card-trace {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: var(--space-xs);
  padding: 3px 6px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--border);
  font-style: italic;
}

/* ---- P5 Action Model Reframe: Recommendation Hero ---- */
.p5-rec-hero {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: var(--space-md);
  border: 2px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-normal);
}

.p5-rec-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}

.p5-rec-hero--protective { border-color: var(--amber); }
.p5-rec-hero--protective::before { background: var(--amber); }
.p5-rec-hero--approval { border-color: var(--accent); }
.p5-rec-hero--approval::before { background: var(--accent); }
.p5-rec-hero--calm { border-color: var(--positive); }
.p5-rec-hero--calm::before { background: var(--positive); }
.p5-rec-hero--escalation { border-color: var(--negative); }
.p5-rec-hero--escalation::before { background: var(--negative); }

.p5-rec-hero__top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.p5-rec-hero__icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
}

.p5-rec-hero__body {
  flex: 1;
  min-width: 0;
}

.p5-rec-hero__title {
  font-size: 0.9375rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.p5-rec-hero--protective .p5-rec-hero__title { color: var(--amber); }
.p5-rec-hero--approval .p5-rec-hero__title { color: var(--accent); }
.p5-rec-hero--calm .p5-rec-hero__title { color: var(--positive); }
.p5-rec-hero--escalation .p5-rec-hero__title { color: var(--negative); }

.p5-rec-hero__narrative {
  font-size: 0.8125rem;
  color: var(--text);
  line-height: 1.6;
}

.p5-rec-hero__metrics {
  display: flex;
  gap: var(--space-sm);
  margin-top: 12px;
  flex-wrap: wrap;
}

.p5-rec-hero__chip {
  font-size: 0.6875rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--muted);
}

.p5-rec-hero__chip--warn {
  border-color: var(--amber-bg);
  background: var(--amber-bg);
  color: var(--amber);
}

.p5-rec-hero__chip--posture {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.625rem;
}

/* ---- P5 Action Model Reframe: Impact Strip ---- */
.p5-impact-strip {
  margin-bottom: var(--space-md);
}

.p5-impact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.p5-impact-row:last-child {
  margin-bottom: 0;
}

.p5-impact-row__icon {
  font-size: 1rem;
  color: var(--amber);
  flex-shrink: 0;
}

.p5-impact-row__label {
  color: var(--text);
  font-weight: 600;
  flex-shrink: 0;
}

.p5-impact-row__causal {
  color: var(--muted);
  font-size: 0.6875rem;
}

.p5-impact-row__recovery {
  color: var(--muted);
  font-size: 0.6875rem;
  margin-left: auto;
  flex-shrink: 0;
}

.p5-impact-more {
  font-size: 0.6875rem;
  color: var(--muted);
  padding: 4px 16px;
}

@media (max-width: 768px) {
  .p5-impact-row {
    flex-wrap: wrap;
  }

  .p5-impact-row__recovery {
    margin-left: 0;
    width: 100%;
    padding-left: 26px;
  }
}

/* ---- P5 Action Model Reframe: CTA Pair (Phase 2) ---- */
.p5-cta-pair {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.p5-cta-primary,
.p5-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  transition: background var(--transition-normal), border-color var(--transition-normal), opacity var(--transition-normal);
  border: 2px solid transparent;
  line-height: 1.3;
}

.p5-cta-primary {
  flex: 1;
  padding: 14px 24px;
  font-size: 0.875rem;
  color: #fff;
}

.p5-cta-primary--protective {
  background: var(--amber);
  border-color: var(--amber);
}
.p5-cta-primary--protective:hover {
  background: color-mix(in srgb, var(--amber) 85%, #000);
}

.p5-cta-primary--approval {
  background: var(--accent);
  border-color: var(--accent);
}
.p5-cta-primary--approval:hover {
  background: color-mix(in srgb, var(--accent) 85%, #000);
}

.p5-cta-primary--escalation {
  background: var(--negative);
  border-color: var(--negative);
}
.p5-cta-primary--escalation:hover {
  background: color-mix(in srgb, var(--negative) 85%, #000);
}

.p5-cta-primary[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.p5-cta-primary--success {
  background: var(--positive) !important;
  border-color: var(--positive) !important;
}

.p5-cta-primary--error {
  background: var(--negative) !important;
  border-color: var(--negative) !important;
}

.p5-cta-secondary {
  flex: 1;
  padding: 12px 20px;
  font-size: 0.8125rem;
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.p5-cta-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.p5-cta-pair--calm-only {
  justify-content: center;
}

.p5-cta-pair--calm-only .p5-cta-secondary {
  flex: 0 1 auto;
  max-width: 320px;
}

@media (max-width: 900px) {
  .p5-cta-pair {
    flex-direction: column;
  }

  .p5-cta-primary,
  .p5-cta-secondary {
    flex: none;
    width: 100%;
  }
}

/* ---- P5 Escalation triple CTA layout (Phase 11) ---- */
.p5-cta-pair--escalation {
  flex-direction: column;
  gap: var(--space-sm);
}

.p5-cta-secondary--defer {
  background: transparent;
  border-color: var(--amber);
  color: var(--amber);
}

.p5-cta-secondary--defer:hover {
  background: var(--amber-bg);
}

.p5-cta-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 16px;
  transition: color var(--transition-normal);
}

.p5-cta-tertiary:hover {
  color: var(--accent);
}

/* ---- P5 Action Model Reframe: Override Staged Confirmation (Phase 3) ---- */
.p5-override {
  margin-top: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  transition: border-color var(--transition-normal);
}

.p5-override--expanded {
  border-color: var(--amber);
}

.p5-override__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-normal);
  border-radius: var(--radius-sm);
}

.p5-override__trigger:hover {
  background: rgba(255, 255, 255, 0.03);
}

.p5-override__trigger-icon {
  font-size: 0.8125rem;
  opacity: 0.7;
}

.p5-override__trigger-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  flex: 1;
}

.p5-override__trigger-chevron {
  font-size: 0.625rem;
  color: var(--muted);
  opacity: 0.6;
}

.p5-override__panel {
  padding: 0 16px 16px;
}

.p5-override__duration-label {
  font-size: 0.6875rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.p5-override__duration-picker {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.p5-override__duration-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  font-family: var(--font-ui);
}

.p5-override__duration-chip:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.p5-override__duration-chip--selected {
  background: var(--amber-bg);
  border-color: var(--amber);
  color: var(--amber);
  font-weight: 600;
}

.p5-override__expiry-note {
  font-size: 0.6875rem;
  color: var(--muted);
  font-style: italic;
  margin-bottom: var(--space-md);
  padding: 8px 12px;
  border-left: 2px solid var(--amber);
  background: rgba(255, 170, 0, 0.04);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.p5-override__confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--amber);
  background: var(--amber-bg);
  color: var(--amber);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal);
  font-family: var(--font-ui);
  width: 100%;
}

.p5-override__confirm:hover:not([disabled]) {
  background: var(--amber);
  color: #000;
}

.p5-override__confirm[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.p5-override__confirm--error {
  border-color: var(--negative);
  background: var(--negative-bg);
  color: var(--negative);
}

/* ---- P5 Action Model Reframe: Alert Control (Phase 4) ---- */
.p5-alert-control {
  margin-top: var(--space-sm);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: border-color var(--transition-normal);
}

.p5-alert-control--expanded {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.01);
}

.p5-alert-control__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 8px 16px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-normal);
  border-radius: var(--radius-sm);
}

.p5-alert-control__trigger:hover {
  background: rgba(255, 255, 255, 0.02);
}

.p5-alert-control__trigger-icon {
  font-size: 0.6875rem;
  opacity: 0.45;
}

.p5-alert-control__trigger-label {
  font-size: 0.6875rem;
  color: var(--muted);
  opacity: 0.7;
  font-weight: 400;
  flex: 1;
}

.p5-alert-control__trigger-chevron {
  font-size: 0.5625rem;
  color: var(--muted);
  opacity: 0.4;
}

.p5-alert-control__panel {
  padding: 0 16px 12px;
}

.p5-alert-control__duration-label {
  font-size: 0.625rem;
  color: var(--muted);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.p5-alert-control__duration-picker {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.p5-alert-control__duration-chip {
  padding: 4px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 400;
  cursor: pointer;
  transition: all var(--transition-normal);
  font-family: var(--font-ui);
}

.p5-alert-control__duration-chip:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
}

.p5-alert-control__duration-chip--selected {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text);
  font-weight: 500;
}

.p5-alert-control__expiry-note {
  font-size: 0.625rem;
  color: var(--muted);
  opacity: 0.6;
  font-style: italic;
  margin-bottom: var(--space-sm);
}

.p5-alert-control__confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  font-family: var(--font-ui);
  width: 100%;
}

.p5-alert-control__confirm:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.p5-alert-control__confirm[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.p5-alert-control__confirm--error {
  border-color: var(--negative);
  color: var(--negative);
}

/* ---- P5 Defer duration picker (Phase 12) ---- */
.p5-defer-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) 0;
  animation: p5FadeIn 0.2s ease;
}

.p5-defer-picker-label {
  font-size: 0.8rem;
  color: var(--muted);
}

.p5-defer-picker__chips {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.p5-defer-picker__chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  font-family: var(--font-ui);
}

.p5-defer-picker__chip:hover {
  border-color: var(--amber);
  color: var(--amber);
}

/* ---- P5 Deferred state (Phase 13) ---- */
.p5-hero--deferred {
  border-color: var(--amber) !important;
}

.p5-hero--deferred .p5-hero-icon {
  color: var(--amber);
}

.p5-hero-countdown {
  font-size: 0.85rem;
  color: var(--amber);
  font-weight: 500;
  margin-top: var(--space-xs);
}

.p5-hero-badge--deferred {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber);
}

.p5-cta-pair--deferred {
  flex-direction: column;
  gap: var(--space-sm);
}

.p5-cta-primary--resume {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
}

.p5-cta-primary--resume:hover {
  background: rgba(59, 130, 246, 0.1);
}

.p5-impact-strip--muted {
  opacity: 0.6;
  border-color: var(--border) !important;
}

.p5-impact-strip--muted .p5-impact-reason {
  color: var(--muted);
}

@keyframes p5FadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── P5 Result Preview ── */
.p5-preview {
  margin-top: 18px;
  padding: 16px 20px;
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  border-left: 4px solid var(--border, #333);
  transition: border-color 0.2s;
}
.p5-preview--green { border-left-color: #2ecc71; }
.p5-preview--blue { border-left-color: #3498db; }
.p5-preview--amber { border-left-color: #f39c12; }
.p5-preview--default { border-left-color: var(--border, #555); }

.p5-preview__header {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.p5-preview__body { min-height: 40px; }

.p5-preview__default {
  font-style: italic;
  color: var(--text-muted, #666);
  margin: 0;
}

.p5-preview__tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.p5-preview__tag--green { background: rgba(46,204,113,0.15); color: #2ecc71; }
.p5-preview__tag--blue  { background: rgba(52,152,219,0.15); color: #3498db; }
.p5-preview__tag--amber { background: rgba(243,156,18,0.15); color: #f39c12; }
.p5-preview__tag--gray  { background: rgba(149,165,166,0.15); color: #95a5a6; }

.p5-preview__items {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.p5-preview__item {
  font-size: 0.82rem;
  color: var(--text-primary, #ddd);
  line-height: 1.6;
}

/* ============================================
   P1/P2 Visual Unification (v6.x)
   Shared visual grammar matching P3/P4/P5
   ============================================ */

/* ---- Unified Page Header ---- */
.vu-page-header {
  margin-bottom: var(--space-lg);
}
.vu-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.vu-page-mission {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: var(--space-xs);
  font-weight: 400;
}

/* ---- Unified Hero / Verdict Banner ---- */
.vu-hero {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.vu-hero-verdict {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.vu-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vu-hero-badge.healthy {
  background: var(--positive-bg);
  color: var(--positive);
}
.vu-hero-badge.warning {
  background: var(--amber-bg);
  color: var(--amber);
}
.vu-hero-badge.critical {
  background: var(--negative-bg);
  color: var(--negative);
}
.vu-hero-narrative {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}
.vu-hero-kpis {
  display: flex;
  gap: var(--space-xl);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}
.vu-hero-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vu-hero-kpi-value {
  font-family: var(--font-data);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.vu-hero-kpi-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
}

/* ---- Unified Priority Stack ---- */
.vu-priority-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
@media (max-width: 768px) {
  .vu-priority-stack { grid-template-columns: 1fr; }
}
.vu-priority-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.vu-priority-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.vu-priority-card-header .vu-count {
  background: var(--surface-3);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-family: var(--font-data);
  color: var(--muted);
}
.vu-priority-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vu-priority-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  transition: background var(--transition-fast);
}
.vu-priority-item:hover {
  background: rgba(255,255,255,0.03);
}
.vu-priority-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vu-priority-dot.negative { background: var(--negative); }
.vu-priority-dot.warning { background: var(--amber); }
.vu-priority-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.vu-priority-meta {
  font-size: 0.75rem;
  color: var(--muted);
  font-family: var(--font-data);
  flex-shrink: 0;
}
.vu-priority-empty {
  font-size: 0.82rem;
  color: var(--muted);
  padding: var(--space-sm);
}

/* ---- Unified Section Label (lightweight divider) ---- */
.vu-section-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

/* ---- Unified Chip / Tag ---- */
.vu-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.vu-chip.positive { background: var(--positive-bg); color: var(--positive); border-color: rgba(34, 197, 94, 0.18); }
.vu-chip.negative { background: var(--negative-bg); color: var(--negative); border-color: rgba(239, 68, 68, 0.18); }
.vu-chip.warning { background: var(--amber-bg); color: var(--amber); border-color: rgba(245, 158, 11, 0.18); }
.vu-chip.accent { background: var(--accent-bg); color: var(--accent); border-color: rgba(59, 130, 246, 0.18); }
.vu-chip.neutral { background: var(--neutral-bg); color: var(--neutral); border-color: rgba(168, 85, 247, 0.18); }

/* ---- P2-scoped chip overrides (mock-aligned) ---- */
#page-devices .vu-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  background: transparent;
  color: #4a6585;
  border: 1px solid rgba(255,255,255,0.05);
}
#page-devices .vu-chip.positive {
  background: rgba(43,204,90,0.10);
  color: #a8f0c4;
  border-color: rgba(43,204,90,0.32);
}
#page-devices .vu-chip.neutral {
  background: rgba(139,108,245,0.10);
  color: #c8b8ff;
  border-color: rgba(139,108,245,0.30);
}
#page-devices .vu-chip.accent {
  font-size: 12px;
  font-weight: 800;
}

/* ---- P2 Object Hero Bar ---- */
.vu-object-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 4px;
  box-shadow: none;
}
.vu-object-hero-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin-right: auto;
  letter-spacing: -0.02em;
}
.vu-object-hero-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- P2 Scene Narrative ---- */
.vu-scene-narrative {
  font-size: 0.82rem;
  color: #708bab;
  padding: 0;
  margin-bottom: 16px;
  border-bottom: none;
  line-height: 1.6;
}
.vu-scene-narrative strong {
  color: var(--text);
  font-weight: 600;
}

/* ---- P2 Live Metrics Row ---- */
.vu-live-metrics {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 0;
  margin-bottom: 14px;
}
.vu-live-metric {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}
.vu-live-metric-value {
  font-family: var(--font-data);
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.02em;
}
.vu-live-metric-label {
  font-size: 0.72rem;
  color: #4a6585;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- P2 Diagnostics Accordion ---- */
.vu-diagnostics {
  margin-top: 20px;
}
.vu-diagnostics-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.vu-diagnostics-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #4a6585;
}
.vu-diagnostics-count {
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-family: var(--font-data);
  color: var(--muted);
}
.vu-diag-panel {
  background: rgba(12, 22, 34, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  margin-bottom: 5px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.vu-diag-panel:hover {
  border-color: rgba(255, 255, 255, 0.08);
}
.vu-diag-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}
.vu-diag-panel-header:hover {
  background: rgba(255,255,255,0.02);
}
.vu-diag-panel-header:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
[data-theme="light"] .vu-diag-panel-header:hover {
  background: rgba(0,0,0,0.02);
}
.vu-diag-chevron {
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.vu-diag-panel.expanded .vu-diag-chevron {
  transform: rotate(90deg);
}
.vu-diag-panel-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  flex-shrink: 0;
}
.vu-diag-panel-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #9bb3cc;
  flex: 1;
}
.vu-diag-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.vu-diag-tag {
  font-size: 0.72rem;
  font-family: var(--font-data);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #4a6585;
  border: 1px solid rgba(255, 255, 255, 0.04);
  font-variant-numeric: tabular-nums;
}
.vu-diag-panel-body {
  display: none;
  padding: 0 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.vu-diag-panel.expanded .vu-diag-panel-body {
  display: block;
}
.vu-diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-sm);
  padding-top: var(--space-sm);
}
.vu-diag-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 6px;
}
.vu-diag-item-label {
  font-size: 0.72rem;
  color: #4a6585;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vu-diag-item-value {
  font-family: var(--font-data);
  font-size: 0.95rem;
  color: #9bb3cc;
  font-variant-numeric: tabular-nums;
}

/* ---- Upgraded KPI card (P1 visual weight) ---- */
.kpi-grid.vu-kpi-grid .kpi-card {
  box-shadow: var(--shadow-sm);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="light"] .kpi-grid.vu-kpi-grid .kpi-card {
  border-color: var(--border);
}

/* ---- Upgraded section-card for P1/P2 ---- */
.vu-section .section-card {
  box-shadow: var(--shadow-sm);
}

/* ---- Upgraded table rows (P3-P5 striping) ---- */
.vu-section .data-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}
.vu-section .data-table tbody tr:hover {
  background: rgba(255,255,255,0.05);
}
[data-theme="light"] .vu-section .data-table tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.015);
}
[data-theme="light"] .vu-section .data-table tbody tr:hover {
  background: rgba(0,0,0,0.04);
}

/* ---- P2 upgraded control notices ---- */
.vu-control-notice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
}
.vu-control-notice.pending {
  background: var(--amber-bg);
  border: 1px solid rgba(245,158,11,0.3);
  color: var(--amber);
}
.vu-control-notice.readonly {
  background: rgba(148,163,184,0.08);
  border: 1px solid rgba(148,163,184,0.25);
  color: var(--muted);
}
.vu-control-notice.unavailable {
  background: var(--negative-bg);
  border: 1px solid rgba(239,68,68,0.2);
  color: var(--negative);
}

/* ---- P2 upgraded sync status ---- */
.vu-sync-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
}
.vu-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vu-sync-status.synced .vu-sync-dot { background: var(--positive); box-shadow: 0 0 4px var(--positive); }
.vu-sync-status.sync-pending .vu-sync-dot { background: var(--amber); box-shadow: 0 0 4px var(--amber); }
.vu-sync-status.sync-failed .vu-sync-dot { background: var(--negative); box-shadow: 0 0 4px var(--negative); }
.vu-sync-status.sync-unknown .vu-sync-dot { background: var(--muted); }

/* ---- P2 upgraded Apply row ---- */
.vu-apply-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-md);
}
.vu-apply-row .btn-primary {
  padding: 10px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.vu-apply-row .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- P2-scoped: Energy Flow card → borderless, flush with workbench surface ---- */
#page-devices .workbench-data-lane .section-card:first-child {
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 0;
  padding-bottom: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
#page-devices .workbench-data-lane .section-card:first-child .section-card-header {
  display: none;
}
#page-devices .workbench-data-lane .section-card:first-child .section-card-body {
  padding: 0;
  margin-bottom: 0;
  flex: 1;
}

/* ---- P2-scoped: Live metrics → label-on-top, no background box, horizontal ---- */
#page-devices .vu-live-metrics {
  display: flex;
  gap: 0;
  padding: 16px 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: none;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
#page-devices .vu-live-metric {
  flex: 1 1 100px;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 4px 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
#page-devices .vu-live-metric:first-child {
  padding-left: 0;
}
#page-devices .vu-live-metric:last-child {
  border-right: none;
}
#page-devices .vu-live-metric-label {
  order: -1;
  font-size: 0.68rem;
  color: #5a7a9a;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  white-space: nowrap;
}
#page-devices .vu-live-metric-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: #dce6f2;
  line-height: 1.2;
}
#page-devices .vu-live-metric-sub {
  font-size: 0.68rem;
  color: #4a6585;
  margin-top: 2px;
}

/* ---- P2-scoped control lane overrides (Section 8) ---- */
#page-devices .workbench-control-lane .card {
  background: #0c1622;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
}
#page-devices .workbench-control-lane .card-header,
#page-devices .workbench-control-lane .section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #4a6585;
}

/* ---- P2-scoped apply row overrides (Section 9) ---- */
#page-devices .vu-apply-row {
  background: #0c1622;
  border: 1px solid rgba(255,255,255,0.05);
}
#page-devices .vu-apply-row .btn-primary,
#page-devices #schedule-apply {
  background: #2bcc5a;
  color: #080e18;
  font-weight: 800;
}

/* ── P6: Alerts ────────────────────────────── */

.vu-alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}
.vu-alert-severe {
  background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.04));
  border: 1px solid rgba(239,68,68,0.25);
}
.vu-alert-icon { font-size: 20px; }
.vu-alert-text { font-size: 13px; color: var(--text-muted); }
.vu-alert-text strong { color: var(--color-error); }

.vu-filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  align-items: center;
}
.vu-filter-group {
  display: flex;
  gap: 4px;
}
.vu-filter-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.vu-filter-btn:hover { border-color: var(--border-hover, #3f3f46); color: var(--text-primary); }
.vu-filter-btn.active { background: var(--color-success); border-color: var(--color-success); color: var(--bg-base); font-weight: 600; }
.vu-filter-btn.active-red { background: var(--color-error); border-color: var(--color-error); color: #fff; font-weight: 600; }
.vu-filter-btn.active-orange { background: var(--color-warning); border-color: var(--color-warning); color: var(--bg-base); font-weight: 600; }
.vu-filter-btn.active-blue { background: var(--color-info); border-color: var(--color-info); color: #fff; font-weight: 600; }
.vu-filter-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 4px;
}
.vu-filter-select {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.alerts-table tr.alert-recovered { opacity: 0.55; }
.alerts-table tr.alert-recovered:hover { opacity: 0.75; }

.alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.alert-badge-active { background: rgba(239,68,68,0.15); color: #fca5a5; }
.alert-badge-recovered { background: rgba(34,197,94,0.15); color: #86efac; }
.alert-badge-severe { background: rgba(239,68,68,0.15); color: #fca5a5; }
.alert-badge-general { background: rgba(245,158,11,0.15); color: #fcd34d; }
.alert-badge-notify { background: rgba(59,130,246,0.15); color: #93c5fd; }

.alert-type-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.alert-type-alarm { background: rgba(239,68,68,0.1); color: #f87171; }
.alert-type-fault { background: rgba(245,158,11,0.1); color: #fbbf24; }
.alert-type-notify { background: rgba(59,130,246,0.1); color: #60a5fa; }

.alert-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.alert-dot-red { background: var(--color-error); }
.alert-dot-green { background: var(--color-success); }

.alert-gw-name { font-weight: 600; color: var(--text-primary); }
.alert-gw-id { font-size: 11px; color: var(--text-dim, #52525b); font-family: 'JetBrains Mono', monospace; }
.alert-event-name { font-weight: 500; color: var(--text-primary); }
.alert-event-desc { font-size: 11px; color: var(--text-muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-prop-value { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-muted); }
.alert-time-main { font-size: 13px; color: var(--text-secondary, #d4d4d8); }
.alert-time-ago { font-size: 11px; color: var(--text-dim, #52525b); }

.alerts-table .data-table th.sortable { cursor: pointer; user-select: none; }
.alerts-table .data-table th.sortable:hover { color: var(--text-primary); }

/* ============================================================
   v6.9 F3: CSP inline-style remediation helpers
   All previously-inline styles moved to class/data-attribute
   selectors so style-src 'self' is never violated.
   ============================================================ */

/* Skeleton size helpers — replaces style="height:Xpx;border-radius:Ypx;margin-bottom:Zpx" */
.sk-40  { height: 40px;  border-radius: 6px; }
.sk-48  { height: 48px;  border-radius: 8px; }
.sk-60  { height: 60px;  border-radius: 8px; }
.sk-120 { height: 120px; border-radius: 8px; }
.sk-200 { height: 200px; border-radius: 10px; }
.sk-300 { height: 300px; border-radius: 10px; }
.sk-mb-8  { margin-bottom: 8px; }
.sk-mb-12 { margin-bottom: 12px; }
.sk-mb-16 { margin-bottom: 16px; }

/* schedule-mode-badge: background by purpose (replaces inline style="background:...") */
.schedule-mode-badge[data-purpose="self_consumption"]  { background: #22c55e; }
.schedule-mode-badge[data-purpose="peak_shaving"]      { background: #a855f7; }
.schedule-mode-badge[data-purpose="tariff_charge"]     { background: #3b82f6; }
.schedule-mode-badge[data-purpose="tariff_discharge"]  { background: #f97316; }

/* schedule-segment: tariff variants (supplement existing data-mode selectors) */
.schedule-segment[data-mode="tariff_charge"]    { background: #3b82f6; }
.schedule-segment[data-mode="tariff_discharge"] { background: #f97316; }

/* schedule-inflight-info: hidden by default; JS adds .visible to show */
.schedule-inflight-info { display: none; }
.schedule-inflight-info.visible { display: block; }

/* conflict-popover: hidden by default; JS toggles .open */
.conflict-popover { display: none; }
.conflict-popover.open { display: block; }

/* HEMS mode chip: border-color by mode (replaces inline style="border-color:...") */
.hems-mode-chip[data-mode="self_consumption"]      { border-color: var(--positive, #2bcc5a); }
.hems-mode-chip[data-mode="peak_shaving"]          { border-color: var(--amber, #f0a820); }
.hems-mode-chip[data-mode="peak_valley_arbitrage"] { border-color: var(--accent, #8b6cf5); }

/* HEMS s-card: --mode-accent per mode (replaces inline style="--mode-accent:...") */
.s-card[data-mode="self_consumption"]      { --mode-accent: var(--positive, #2bcc5a); }
.s-card[data-mode="peak_shaving"]          { --mode-accent: var(--amber, #f0a820); }
.s-card[data-mode="peak_valley_arbitrage"] { --mode-accent: var(--accent, #8b6cf5); }

/* HEMS targeting table: column widths (replaces inline style on <th>) */
.gw-table th.col-cb    { width: 30px; }
.gw-table th.col-sched { min-width: 100px; }

/* seg-empty: occupies full mini-bar width (replaces inline style="width:100%") */
.seg-empty { width: 100%; }

/* Mini-bar slot width buckets (1h–24h) — replaces dynamic style="width:X%" on .seg */
.seg-w-1  { width: 4.17%;  } .seg-w-2  { width: 8.33%;  } .seg-w-3  { width: 12.5%;  }
.seg-w-4  { width: 16.67%; } .seg-w-5  { width: 20.83%; } .seg-w-6  { width: 25%;    }
.seg-w-7  { width: 29.17%; } .seg-w-8  { width: 33.33%; } .seg-w-9  { width: 37.5%;  }
.seg-w-10 { width: 41.67%; } .seg-w-11 { width: 45.83%; } .seg-w-12 { width: 50%;    }
.seg-w-13 { width: 54.17%; } .seg-w-14 { width: 58.33%; } .seg-w-15 { width: 62.5%;  }
.seg-w-16 { width: 66.67%; } .seg-w-17 { width: 70.83%; } .seg-w-18 { width: 75%;    }
.seg-w-19 { width: 79.17%; } .seg-w-20 { width: 83.33%; } .seg-w-21 { width: 87.5%;  }
.seg-w-22 { width: 91.67%; } .seg-w-23 { width: 95.83%; } .seg-w-24 { width: 100%;   }

/* ic-val online count color (replaces inline style="color:var(--positive,...)") */
.ic-online .ic-val { color: var(--positive, #2bcc5a); }

/* sync-ack layout (replaces inline style="margin-left:auto;font-size:0.78rem;color:var(--muted)") */
.sync-ack { margin-left: auto; font-size: 0.78rem; color: var(--muted, var(--text-muted, #888)); }

/* vu-diag table spacing (replaces inline style="margin-top:8px" on .data-table) */
.vu-diag-detail-table { margin-top: 8px; }

/* ef SVG lines: stop breathing animation after timeout (replaces inline style.animation/opacity) */
.ef-lines-static { animation: none !important; opacity: 1 !important; }

/* alerts result count (replaces inline style="font-size:12px;color:var(--text-muted)") */
.alerts-result-count { font-size: 12px; color: var(--text-muted); }

/* ============================================================
   P7 — Runtime Governance (v6.10, admin-only internal surface)
   Minimal styles only; deliberately not a dashboard redesign.
   ============================================================ */
.runtime-header { display: flex; flex-direction: column; gap: 8px; }
.runtime-admin-chip {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  font-size: 0.68rem; border: 1px solid var(--border, #444);
  border-radius: 10px; color: var(--text-muted, #888); vertical-align: middle;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.runtime-actions { display: flex; align-items: center; gap: 12px; }
.runtime-captured-at { font-size: 0.8rem; color: var(--text-muted, #888); }

.nav-item-internal .nav-internal-tag {
  margin-left: 6px; font-size: 0.6rem; padding: 0 6px; border-radius: 8px;
  border: 1px solid var(--border, #555); color: var(--text-muted, #888);
  text-transform: uppercase; letter-spacing: 0.05em;
}

.runtime-kpi-grid { margin-top: 12px; }
.runtime-posture-card .runtime-posture-value { letter-spacing: 0.08em; }
.runtime-posture-ok .runtime-posture-value { color: var(--positive, #2bcc5a); }
.runtime-posture-warning .runtime-posture-value { color: var(--warning, #e2a400); }
.runtime-posture-degraded .runtime-posture-value { color: var(--warning, #e2a400); }
.runtime-posture-critical .runtime-posture-value { color: var(--negative, #e24d4d); }
.runtime-posture-disabled .runtime-posture-value { color: var(--text-muted, #888); }

.runtime-components-row { display: flex; flex-wrap: wrap; gap: 8px; }
.runtime-component {
  border: 1px solid var(--border, #444); border-radius: 6px;
  padding: 8px 12px; min-width: 140px;
}
.runtime-component-name { font-size: 0.8rem; color: var(--text-muted, #888); }
.runtime-component-state { font-weight: 600; text-transform: uppercase; font-size: 0.85rem; }
.runtime-component-ok .runtime-component-state { color: var(--positive, #2bcc5a); }
.runtime-component-warning .runtime-component-state { color: var(--warning, #e2a400); }
.runtime-component-degraded .runtime-component-state { color: var(--warning, #e2a400); }
.runtime-component-critical .runtime-component-state { color: var(--negative, #e24d4d); }

.runtime-issues-table td, .runtime-check-table td { font-size: 0.85rem; }
.runtime-state, .runtime-sev, .runtime-check {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.runtime-state-detected, .runtime-state-ongoing { background: rgba(226,77,77,0.15); color: var(--negative, #e24d4d); }
.runtime-state-recovered { background: rgba(43,204,90,0.15); color: var(--positive, #2bcc5a); }
.runtime-state-suppressed { background: rgba(120,120,120,0.2); color: var(--text-muted, #888); }
.runtime-state-closed { background: rgba(80,80,80,0.25); color: var(--text-muted, #888); }
.runtime-sev-critical { background: rgba(226,77,77,0.2); color: var(--negative, #e24d4d); }
.runtime-sev-degraded { background: rgba(226,164,0,0.2); color: var(--warning, #e2a400); }
.runtime-sev-warning { background: rgba(226,164,0,0.15); color: var(--warning, #e2a400); }
.runtime-sev-notice { background: rgba(80,120,200,0.2); color: #5a8ad0; }
.runtime-sev-info { background: rgba(80,80,80,0.15); color: var(--text-muted, #888); }

.runtime-check-pass { background: rgba(43,204,90,0.15); color: var(--positive, #2bcc5a); }
.runtime-check-fail { background: rgba(226,77,77,0.2); color: var(--negative, #e24d4d); }
.runtime-check-stale { background: rgba(226,164,0,0.15); color: var(--warning, #e2a400); }
.runtime-check-unknown { background: rgba(80,80,80,0.15); color: var(--text-muted, #888); }

.runtime-drawer {
  margin-top: 16px; border: 1px solid var(--border, #444); border-radius: 8px;
  padding: 16px; background: var(--surface, #1d1d1d);
}
.runtime-drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.runtime-drawer-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 0.85rem; }
.runtime-drawer-dl dt { color: var(--text-muted, #888); }
.runtime-drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; align-items: center; }
.runtime-note-input { flex: 1 1 240px; padding: 6px 8px; border: 1px solid var(--border, #444); border-radius: 4px; background: transparent; color: inherit; }
.runtime-until-input { padding: 6px 8px; border: 1px solid var(--border, #444); border-radius: 4px; background: transparent; color: inherit; }
.runtime-action-feedback { font-size: 0.78rem; color: var(--text-muted, #888); }
.runtime-events-title { margin: 16px 0 8px; font-size: 0.9rem; color: var(--text-muted, #888); }
.runtime-events-list { list-style: none; padding: 0; margin: 0; max-height: 240px; overflow-y: auto; }
.runtime-event-item { padding: 4px 0; border-bottom: 1px solid var(--border, #333); font-size: 0.8rem; }
.runtime-event-time { color: var(--text-muted, #888); font-family: var(--font-data, monospace); }
.runtime-event-code { font-family: var(--font-data, monospace); }

.runtime-empty { padding: 12px; color: var(--text-muted, #888); font-size: 0.9rem; }
.runtime-count { color: var(--text-muted, #888); font-size: 0.8rem; }
.runtime-admin-guard { padding: 24px; color: var(--text-muted, #888); }