:root {
  --bg: #0b0f14;
  --panel: #121821;
  --text: #d5dde5;
  --muted: #8a96a3;
  --green: #27c93f;
  --yellow: #fdbc40;
  --red: #ff5f56;
  --grid-bg: #0f141b;
}

* {
  box-sizing: border-box;
  scrollbar-color: #1d2733 transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1d2733; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a3a4d; }
html, body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: #e0e0e0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* Shared container – same max-width and horizontal padding for header and main */
.app-container {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .app-container {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Global app header – full width, pinned to top */
.app-global-nav {
  width: 100%;
  background: #080b0f;
  border-bottom: 1px solid #1f2937;
}
.app-global-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.app-global-nav-brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-global-nav-brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.app-global-nav-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}
.app-global-nav-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.app-global-nav-brand {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.025em;
  color: #ffffff;
}
.app-global-nav-avatar-wrap {
  position: relative;
}
.app-global-nav-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  padding: 0;
}
.app-global-nav-avatar:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}
.app-global-nav-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 6px;
  min-width: 200px;
  background: #111827;
  border: 1px solid #374151;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  padding: 8px 0;
}
.app-global-nav-dropdown[hidden] {
  display: none;
}
.app-global-nav-dropdown-welcome {
  padding: 8px 12px;
  font-size: 0.875rem;
  color: #9ca3af;
}
.app-global-nav-dropdown-divider {
  height: 1px;
  background: #374151;
  margin: 4px 0;
}
.app-global-nav-dropdown-item {
  display: block;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: #fff;
  text-decoration: none;
}
.app-global-nav-dropdown-item:hover {
  background: #1f2937;
}
.app-global-nav-dropdown-item-logout {
  color: #f87171;
}
.app-global-nav-dropdown-item-logout:hover {
  color: #fca5a5;
  background: #1f2937;
}

/* Main content area – full width; alignment via .app-container inside */
#app {
  min-width: 0;
}

/* Main content container – padding-top below header, same horizontal as header */
#app > .app-container {
  padding-top: 24px;
}

/* Page title – on main background, above KPI card */
.page-title {
  margin: 0 0 24px 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text);
}

/* KPI card – only metric boxes, with spacing from title */
.kpi-card {
  margin-top: 0;
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  padding-bottom: 2rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.footer-copyright { font-weight: 500; }

.header { display: flex; flex-direction: column; gap: 12px; background: var(--panel); border-radius: 12px; padding: 16px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.35); min-width: 0; overflow-x: hidden; }
.header-brand { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; }
.header-brand h1,
.header-brand .header-content { flex: 1; min-width: 0; }
.header-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
  flex-shrink: 0;
}
.header-logo-wrap .header-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.header h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: 0.3px; }

/* KPI Grid Layout (for charger detail and fleet view) */
.kpis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }

/* KPI Container - 2 Row Layout */
.kpi-container { display: flex; flex-direction: column; gap: 16px; }
.kpi-row { display: grid; gap: 10px; }
.kpi-row-session { grid-template-columns: repeat(7, 1fr); }
.kpi-row-network { grid-template-columns: 1fr; }

/* KPI Separator */
.kpi-separator {
  display: flex;
  align-items: center;
  margin: 12px 0;
  position: relative;
}
.kpi-separator::before {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin-right: 12px;
}
.kpi-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin-left: 12px;
}
.separator-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  white-space: nowrap;
}

/* KPI Card Base Styles - Stacked Layout, numbers bottom-aligned */
.kpi {
  background: #0e141d;
  border: 1px solid #1d2733;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  min-height: 80px;
  height: 100%;
}

/* Ensure labels align across all cards */
.kpi .label {
  min-height: 1rem; /* Reduced label height for tighter spacing */
  display: flex;
  align-items: center;
  line-height: 1.2;
}

.kpi-metrics-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
  width: 100%;
}

.kpi-value {
  margin: 0;
  line-height: 1;
}

.kpi-percentage {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
}

.success-badge {
  color: #27c93f;
}

.error-badge {
  color: #ff5f56;
}

.warning-badge {
  color: #fdbc40;
}

.purple-badge {
  color: #a855f7;
}

/* Label Styles */
.label {
  color: #c5cdd4;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.label-tier1 {
  font-weight: 700;
  color: #ffffff;
  font-size: 1rem;
}
.label-standard {
  font-weight: 600;
  color: #c5cdd4;
  font-size: 1rem;
}
.label-network {
  font-weight: 600;
  color: #c5cdd4;
  font-size: 1rem;
}

/* Primary Value Styles */
.value {
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.value-tier1 {
  font-size: 2rem;
  color: #ffffff;
}
.value-standard {
  font-size: 1.8rem;
  color: #ffffff;
}
.value-network {
  font-size: 1.8rem;
  color: #ffffff;
}

/* KPI Color Variants with Enhanced Visual Hierarchy */
.kpi-active {
  border-left: 3px solid #4a9eff;
  box-shadow: 0 0 8px rgba(74, 158, 255, 0.2); /* Slight glow for Active Sessions only */
}
.kpi-success {
  border-left: 3px solid var(--green);
  box-shadow: 0 0 8px rgba(39, 201, 63, 0.2); /* Green glow for Charging Success */
}
.kpi-transient-error { border-left: 3px solid #ff8c42; } /* Orange */
.kpi-failure { border-left: 3px solid var(--red); } /* Red */
.kpi-completed { border-left: 3px solid #4b5563; } /* Dark Grey - Least important */
.kpi-unauthorized { border-left: 3px solid var(--red); } /* Red */
.kpi-low-energy { border-left: 3px solid #f59e0b; } /* Yellow/Amber */
.kpi-auth-failure { border-left: 3px solid #a855f7; } /* Purple/Indigo */

.controls {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--panel);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.main-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 800px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Primary row: 4 filters + Advanced button in one row */
.filter-primary-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: end;
}

/* Advanced Filters button container: no dark box, align button with dropdowns */
.filter-control-button {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

.filter-label-invisible {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: 0;
}

.btn-advanced-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.875rem;
  color: #d1d5db;
  background: transparent;
  border: 1px solid #4b5563;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.btn-advanced-filters:hover {
  color: #fff;
  background: #1f2937;
  border-color: #4b5563;
}

.btn-advanced-filters-icon {
  flex-shrink: 0;
}

/* Advanced filters: collapsible grid below primary row */
.filter-advanced-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.filter-advanced-row[hidden] {
  display: none;
}

.filter-section {
  width: 100%;
}

.filter-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .kpi-row-session,
  .kpis {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .kpi-row-session,
  .kpis {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .controls {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 12px;
  }
  .filter-primary-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .kpi-row-session,
  .kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

.controls-row {
  display: contents;
}

.main-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 800px;
}
.control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Event workbench wrapper */
.event-workbench-wrapper {
  margin-top: 20px;
  background: var(--panel);
  border-radius: 12px;
  padding: 20px 20px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.event-workbench-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.event-workbench-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-workbench-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.event-workbench-subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.35;
}

.event-workbench-scroll {
  display: none;
  width: 100%;
  height: 280px;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}


/* Inline spinner + label shared across all collapsible sections */
.section-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  font-size: 12px;
  color: var(--muted);
}

.section-loading-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--green);
  animation: timeline-spin 0.8s linear infinite;
}

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

/* Page-level loading overlay */
.page-loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(15, 20, 27, 0.9), rgba(7, 10, 14, 0.98));
  z-index: 999;
}

.control label,
.filter-control label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #a0aab2;
  margin-bottom: 6px;
}
label { font-size: 0.875rem; color: #a0aab2; }
select {
  font-size: 1rem !important;
  background: #0e141d;
  color: var(--text);
  border: 1px solid #1d2733;
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 44px;
}

/* Filter Panel Styles */
.filter-control {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Advanced Filters button cell: no panel box (override .filter-control) */
.filter-control.filter-control-button {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 4px 0;
}

/* Date Range Styles */
.date-range-select {
  font-size: 1rem !important;
  background: #0e141d;
  color: var(--text);
  border: 1px solid #1d2733;
  border-radius: 6px;
  padding: 10px 12px;
  min-height: 44px;
  width: 100%;
}

.date-range-select:focus {
  outline: none;
  border-color: var(--green);
}

/* Date Range: relative parent so custom popover is positioned below the select */
.date-range-control-wrap {
  position: relative;
}

/* Custom date range: floating popover below the Date Range dropdown */
.custom-date-range.date-range-popover {
  position: absolute;
  z-index: 50;
  top: 100%;
  margin-top: 8px;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #111827;
  border: 1px solid #374151;
  border-radius: 6px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  padding: 12px;
}

.date-range-actions {
  margin-top: 0;
}

/* Apply button in Date Range: full-width CTA */
.date-range-actions .filter-apply {
  width: 100%;
  font-size: 0.9rem;
  padding: 8px 16px;
  background: #238636;
  color: #fff;
  border-color: #238636;
}
.date-range-actions .filter-apply:hover {
  background: #2ea043;
  border-color: #2ea043;
}

.date-input {
  font-size: 1rem !important;
  background: #0e141d;
  color: var(--text);
  border: 1px solid #1d2733;
  border-radius: 6px;
  padding: 10px 12px;
  min-height: 44px;
  flex: 1;
}

.date-input:focus {
  outline: none;
  border-color: var(--green);
}

/* Calendar icon same color as date input text */
.date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.9);
  opacity: 0.9;
  cursor: pointer;
}

.date-separator {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.filter-toggle {
  font-size: 1rem !important;
  background: #0e141d;
  color: var(--text);
  border: 1px solid #1d2733;
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 140px;
}
.filter-toggle:hover { border-color: #2a3441; }
.filter-arrow { font-size: 10px; transition: transform 0.2s; }
.filter-toggle.open .filter-arrow { transform: rotate(180deg); }

.filter-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 300px;
  width: max-content;
  max-width: min(400px, calc(100vw - 32px));
  background: var(--panel);
  border: 1px solid #1d2733;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 1000;
  margin-top: 4px;
  max-height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.filter-search { padding: 8px; border-bottom: 1px solid #1d2733; }
.filter-search input {
  width: 100%;
  background: #0e141d;
  color: var(--text);
  border: 1px solid #1d2733;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
}
.filter-search input:focus { outline: none; border-color: #2a3441; }

.filter-options {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
}
.filter-option {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  min-height: 32px;
}
.filter-option:hover { background: #1a2029; }
.filter-option input[type="checkbox"] {
  margin-right: 10px;
  accent-color: var(--green);
  flex-shrink: 0;
}
.filter-option label {
  cursor: pointer;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-option.selected { background: #1a2029; }

.filter-actions {
  padding: 8px;
  border-top: 1px solid #1d2733;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.filter-clear, .filter-select-all, .filter-apply {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  border: 1px solid #1d2733;
}
.filter-clear {
  background: transparent;
  color: var(--muted);
}
.filter-clear:hover { background: #1a2029; }
.filter-select-all {
  background: #2a3441;
  color: var(--text);
  border-color: #2a3441;
}
.filter-select-all:hover {
  background: #3a4451;
  border-color: #3a4451;
}
.filter-apply {
  background: var(--green);
  color: #000;
  border-color: var(--green);
}
.filter-apply:hover { background: #22b837; }

.activity-wrapper { margin-top: 16px; background: var(--panel); border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }

/* Collapsible section headers — entire row is the click target */
.collapsible-header { cursor: pointer; user-select: none; }
.collapsible-header:hover { opacity: 0.8; }
.section-chevron { display: flex; align-items: center; color: var(--muted); flex-shrink: 0; transition: transform 0.2s ease; }
.collapsible-header.is-open .section-chevron { transform: rotate(90deg); }
.collapsible-header.is-loading { pointer-events: none; opacity: 0.5; }

.activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.activity-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.activity-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}
.activity-subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.activity-filters {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-bottom: 12px;
}

#heatmap { width: 100%; overflow-x: auto; position: relative; }
.row-labels { position: sticky; left: 0; background: var(--panel); pointer-events: none; }
.row-label-bg { fill: var(--panel); }
.totals-label { fill: var(--text); font-size: 14px; font-weight: 800; text-shadow: 0 1px 0 rgba(0,0,0,0.7); }
.labels-overlay { position: absolute; left: 0; top: 0; z-index: 3; }
.tooltip { position: absolute; pointer-events: none; background: #111927; color: var(--text); padding: 8px 10px; border: 1px solid #263445; border-radius: 8px; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.55); z-index: 9999; }

.cell { stroke: #182232; stroke-width: 1; }
.axis-label { fill: #c5cdd4; font-size: 13px; }
.daily-total { font-size: 9px; }
.row-drillable, .row-drillable .axis-label { fill: var(--text); }
.row-drillable:hover text { text-decoration: underline; }
.badge-pct { font-weight: 700; font-size: 10px; }

/* Support Diagnostics View Styles */
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

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

.charger-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 0.25rem;
  margin-bottom: 24px;
  font-size: 14px;
  align-items: center;
}

.charger-header-pills {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

.date-range-pill-wrap {
  position: relative;
  display: inline-flex;
}

.date-range-pill-wrap::after {
  content: '▼';
  font-size: 8px;
  color: var(--muted);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.date-range-pill {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  padding: 4px 24px 4px 10px;
  min-height: 0;
  border-radius: 999px;
  border: 1px solid #2a3441;
  background: var(--bg);
  color: var(--muted);
  font-size: 11px !important;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  vertical-align: middle;
}

.date-range-pill:hover {
  border-color: var(--text);
  color: var(--text);
}

.date-range-control-wrap .custom-date-range.date-range-popover {
  right: 0;
  left: auto;
  width: auto;
  min-width: 220px;
}

.metadata-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.metadata-label {
  color: var(--muted);
  font-weight: 500;
}

.metadata-item span:last-child {
  color: var(--text);
  font-weight: 600;
}

.back-button {
  background: #0e141d;
  color: var(--text);
  border: 1px solid #1d2733;
  border-radius: 8px;
  padding: 8px 12px;
  text-decoration: none;
  font-size: 12px;
  transition: all 0.2s;
}

.back-button:hover {
  background: #1a2029;
  border-color: #2a3441;
  color: var(--text);
  text-decoration: none;
}


.fault-remediation-wrapper,
.session-outcome-wrapper {
  margin-top: 20px;
  background: var(--panel);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.session-outcomes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#session-outcomes-content {
  padding-top: 1rem;
}

.session-outcomes-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.session-outcomes-header-left h3 {
  margin: 0;
}

.session-outcomes-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.session-outcomes-updated {
  font-size: 0.875rem;
  color: #9ca3af;
}

.fault-remediation-loading,
.configuration-repair-loading,
.session-outcome-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
  color: var(--muted);
  font-size: 0.875rem;
}


.fault-remediation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#fault-remediation-content {
  padding-top: 12px;
}

.fault-remediation-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fault-remediation-header h3,
.fault-remediation-header-left h3 {
  margin: 0;
}

.fault-remediation-subtitle,
.session-outcome-subtitle {
  font-size: 0.875rem;
  color: var(--muted);
}

.table-wrapper {
  max-height: 750px;
  overflow: auto;
  border: 1px solid #1d2733;
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

th {
  background: #0e141d;
  color: var(--muted);
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #1d2733;
  position: sticky;
  top: 0;
  z-index: 1;
}

td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text);
}

/* Connector column - center-aligned, pill for values */
#sessions-table th:first-child,
#sessions-table td:first-child {
  width: 120px;
  min-width: 120px;
  max-width: 160px;
  text-align: left;
  padding-left: 12px;
  padding-right: 8px;
}
.connector-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 9999px;
  background: #1f2937;
  color: #d1d5db;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Session Start / End: time above date, tabular-nums */
.session-datetime-cell {
  display: flex;
  flex-direction: column;
}
.session-datetime-time {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.02em;
}
.session-datetime-date {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 2px;
}

/* Duration: explicit units (e.g. 3h 9m 49s), tabular-nums */
.duration-value {
  font-variant-numeric: tabular-nums;
  color: #d1d5db;
}

/* Live energy display for active sessions */
.energy-live-icon {
  margin-right: 4px;
  color: #22c55e;
  font-size: 0.85rem;
}

.energy-live-value {
  font-variant-numeric: tabular-nums;
  color: #d1d5db;
}

/* Indicator when energy comes from the meter total (not StopTransaction) */
.energy-meter-icon {
  margin-left: 4px;
  color: #9ca3af;
  font-size: 0; /* size comes from SVG viewBox */
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 999px;
  background-color: rgba(31, 41, 55, 0.6); /* slate-700/60 */
  transition: background-color 0.15s ease, color 0.15s ease;
}

.energy-meter-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.energy-meter-icon svg {
  width: 14px;
  height: 14px;
}

.energy-meter-icon:hover {
  background-color: rgba(55, 65, 81, 0.9); /* hover slate-600 */
  color: #ffffff;
}

/* Inferred values: dashed underline, subtle slate tone */
.inferred-value-text {
  color: #d1d5db;
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: #9ca3af;
  text-underline-offset: 4px;
  cursor: help;
}

/* Transaction ID cell */
.session-txn-id-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Meter Audit / Integrity chip */
.integrity-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.integrity-variance {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
}

.integrity-verified {
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
}

.integrity-minor {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
}

.integrity-major,
.integrity-recovery {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.integrity-unknown {
  background: rgba(148, 163, 184, 0.18);
  color: #e5e7eb;
}

.integrity-in-progress {
  background: rgba(59, 130, 246, 0.18);
  color: #bfdbfe;
}

tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.loading, .no-data {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 20px;
}

.suspicious-session-icon {
  display: inline-block;
  margin-left: 4px;
  cursor: help;
  font-size: 14px;
  vertical-align: middle;
  filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.5));
}

.suspicious-session-icon:hover {
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.8));
}

/* Support Diagnostics controls layout - single row with 4 controls */

/* Responsive adjustments for Support Diagnostics */
@media (max-width: 768px) {
  .ops-top {
    gap: 16px;
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .back-button {
    align-self: flex-start;
  }

  .charger-metadata {
    flex-direction: column;
    gap: 8px;
  }

}

@media (max-width: 480px) {
  .kpi-row-session,
  .kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

/* Diagnostic & Action Pane */
.diagnostic-pane {
  background: var(--panel);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid #1d2733;
}

.diagnostic-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.diagnostic-title {
  font-size: 1.125rem;
  font-weight: 600;
}

.diagnostic-meta {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 6px;
}

.diagnostic-severity-badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #374151;
  background: #111827;
  color: var(--muted);
  white-space: nowrap;
}

.diagnostic-severity-badge[data-severity="high"] {
  background: rgba(255, 95, 86, 0.12);
  border-color: #ff5f56;
  color: #ff8a7d;
}

.diagnostic-severity-badge[data-severity="medium"] {
  background: rgba(253, 188, 64, 0.12);
  border-color: #fdbc40;
  color: #ffdf8a;
}

.diagnostic-severity-badge[data-severity="low"] {
  background: rgba(39, 201, 63, 0.12);
  border-color: #27c93f;
  color: #7ced91;
}

.diagnostic-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diagnostic-section h3 {
  margin: 0 0 8px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.diagnostic-section p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.diagnostic-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.diagnostic-columns ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}

.diagnostic-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diagnostic-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Selected fault row */
tr.fault-row-selected td {
  background: rgba(59, 130, 246, 0.25);
}

@media (max-width: 768px) {
  .diagnostic-columns {
    grid-template-columns: 1fr;
  }
  .diagnostic-footer-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Technician log form */
.diag-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-title {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Technician log specific layout: Root + Vehicle share left column, Resolution on right */
.form-row-tech {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "root resolution"
    "vehicle resolution";
}

.form-row-tech .form-group-root {
  grid-area: root;
}

.form-row-tech .form-group-resolution {
  grid-area: resolution;
  min-width: 0; /* Allow grid item to shrink below content size */
  max-width: 100%; /* Prevent overflow */
}

.form-row-tech .form-group-resolution select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.form-row-tech .form-group-vehicle {
  grid-area: vehicle;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.form-group textarea {
  background: #1a1a1a;
  border: 1px solid #404040;
  color: #fff;
  border-radius: 4px;
  padding: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}

.form-group select {
  background: #0e141d;
  color: var(--text);
  border: 1px solid #1d2733;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.form-group select:focus,
.form-group textarea:focus,
.form-group input[type="text"]:focus {
  outline: none;
  border-color: var(--green);
}

.form-group input[type="text"] {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #404040;
  color: #fff;
  padding: 6px;
  border-radius: 4px;
  font-size: 0.9rem;
}

.part-details-group {
  background: #333;
  padding: 10px;
  border-radius: 4px;
  border-left: 3px solid #f59e0b;
}

.part-details-label {
  color: #f59e0b;
  font-size: 0.8rem;
}

.btn-primary {
  background: var(--green);
  color: #000;
  border-radius: 999px;
  border: none;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Diagnostic tabs */
.diagnostic-tabs {
  display: flex;
  gap: 8px;
  margin: 16px 0 8px 0;
}

.diagnostic-tab {
  background: transparent !important;
  border: 1px solid #2a3441 !important;
  color: var(--muted) !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 400;
  position: relative;
}

.diagnostic-tab:hover:not(.active):not(.smoke) {
  background: #1a2029 !important;
  color: var(--text) !important;
}

.diagnostic-tab.active,
.diagnostic-tab.smoke {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 600 !important;
}

/*
 * Breadcrumb bar — visual system
 *
 * Layout: three zones separated by flexbox.
 *   Left   = drill path (where you are, every segment navigates back)
 *   Center = view toggle (Chargers/Groups, only at location level)
 *   Right  = Manage Locations link
 *
 * Color/interactivity rules (one rule per visual state):
 *   Green text          → clickable, navigates back (path segments: Fleet, client, location, group)
 *   White text          → clickable action (toggle alternative, Manage Locations)
 *   White + pill bg     → current selection in toggle, not clickable (you're viewing this)
 *   Muted text          → non-interactive label (dimmed Fleet at root, inline "Locations"/"Chargers" labels)
 *   Muted + 0.5 opacity → unavailable (e.g. Groups when location has no groups defined)
 *
 * Hover: all clickable elements (green or white) show underline on hover.
 * Heatmap row labels: .row-drillable adds underline on hover when the row is clickable
 *   (drill into detail or next hierarchy level).
 *
 * Classes:
 *   .breadcrumb-segment             Muted gray, clickable path segment (go-back); white on hover
 *   .breadcrumb-current             White + bold, current page (charger detail only, not clickable)
 *   .breadcrumb-toggle-active       White + pill, current toggle selection
 *   .breadcrumb-toggle-available    White, clickable toggle alternative
 *   .breadcrumb-toggle-unavailable  Muted + dim, not clickable
 *   .breadcrumb-view-label          Muted, non-interactive inline label
 *   .breadcrumb-manage              White, clickable link to admin upload
 */
.breadcrumb {
  margin-bottom: 8px;
  padding: 8px 0;
  background: transparent;
  font-size: 0.95rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-segment {
  color: #8b97a2;
  cursor: pointer;
  text-decoration: none;
}

.breadcrumb-segment:hover {
  color: #ffffff;
  text-decoration: underline;
}

.breadcrumb-separator {
  color: #8b97a2;
  font-size: 0.85em;
}

.breadcrumb-left > .breadcrumb-separator:last-of-type {
  color: #ffffff;
}

.breadcrumb-current {
  color: #ffffff;
  font-weight: 600;
}

.breadcrumb-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.breadcrumb-right {
  display: flex;
  align-items: center;
}

.breadcrumb-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb-toggle-active {
  color: var(--text);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 2px 8px;
}

.breadcrumb-toggle-available {
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  padding: 2px 8px;
}

.breadcrumb-toggle-available:hover {
  text-decoration: underline;
}

.breadcrumb-toggle-unavailable {
  color: var(--muted);
  opacity: 0.5;
  padding: 2px 8px;
}

.breadcrumb-view-label {
  color: var(--muted);
}

.breadcrumb-manage {
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
  margin-left: 8px;
}

.breadcrumb-manage:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ── Configuration Repair (ENG-52) ──────────────────────────────────── */

/* Configuration repair wrapper: collapsible section in <main>, mirrors .event-workbench-wrapper */
.configuration-repair-wrapper {
  margin-top: 20px;
  background: var(--panel);
  border-radius: 12px;
  padding: 20px 20px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.configuration-repair-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.configuration-repair-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.configuration-repair-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.configuration-repair-subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

#configuration-repair-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0 4px;
}

.config-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.config-summary-text {
  color: var(--text);
}

.config-hint {
  margin-left: auto;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted);
  opacity: 0.7;
}

/* Freshness: plain text showing last collection date */
.config-freshness-text {
  font-size: 0.875rem;
  color: var(--muted);
}

/* Config controls */
.config-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.config-search,
.config-filter-select {
  background: #0e141d;
  color: var(--text);
  border: 1px solid #1d2733;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 0.875rem;
  height: 42px;
  line-height: 42px;
  box-sizing: border-box;
}

.config-search {
  flex: 1;
}

.config-search:focus {
  outline: none;
  border-color: var(--green);
}


/* Config table */
.config-table-wrapper {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid #1d2733;
  border-radius: 8px;
}

.config-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  table-layout: fixed;
}

.config-table th:nth-child(1),
.config-table td:nth-child(1) { width: 22%; }  /* Key */
.config-table th:nth-child(2),
.config-table td:nth-child(2) { width: 20%; }  /* Value */
.config-table th:nth-child(3),
.config-table td:nth-child(3) { width: 16%; }  /* Peer Value */
.config-table th:nth-child(4),
.config-table td:nth-child(4) { width: 18%; }  /* Peer Comparison */
.config-table th:nth-child(5),
.config-table td:nth-child(5) { width: 8%; }   /* Severity */
.config-table th:nth-child(6),
.config-table td:nth-child(6) { width: 16%; }  /* Remediation */

.config-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.config-table th {
  background: #0e141d;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #1d2733;
  white-space: nowrap;
}

.config-sortable {
  cursor: pointer;
  user-select: none;
}

.config-sortable::after {
  content: '⇅';
  margin-left: 4px;
  opacity: 0.3;
  font-size: 10px;
}

.config-sortable.sort-asc::after {
  content: '↑';
  opacity: 0.8;
}

.config-sortable.sort-desc::after {
  content: '↓';
  opacity: 0.8;
}

.config-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(29, 39, 51, 0.5);
  color: var(--text);
  vertical-align: middle;
}

.config-row {
  transition: background 0.1s;
}

.config-row-clickable {
  cursor: pointer;
}

.config-row-clickable:hover {
  background: rgba(255, 255, 255, 0.03);
}

.config-row-selected {
  background: rgba(39, 201, 63, 0.06) !important;
}

.config-value-cell {
  font-family: monospace;
  font-size: 0.75rem;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Config lock icon */
.config-lock {
  font-size: 0.6875rem;
  margin-left: 4px;
  opacity: 0.6;
}

/* Severity column: quiet, metadata-only — not an alert */
.config-severity-quiet {
  color: var(--muted);
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Peer comparison text — this column carries the visual weight */
.peer-anomaly {
  color: #ff8a7d;
  font-size: 0.8125rem;
}

.peer-match {
  color: #7ced91;
  font-size: 0.8125rem;
}

.peer-excluded,
.peer-na {
  color: var(--muted);
  font-size: 0.8125rem;
  font-style: italic;
}

/* Config history panel */
.config-history-panel {
  border-top: 1px solid #1d2733;
  padding-top: 12px;
  margin-top: 4px;
}

.config-history-title {
  font-size: 0.75rem;
  color: var(--text);
  margin: 0 0 8px 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.config-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.config-history-table th {
  background: #0e141d;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  text-align: left;
  border-bottom: 1px solid #1d2733;
}

.config-history-table td {
  padding: 6px 12px;
  border-bottom: 1px solid rgba(29, 39, 51, 0.5);
  color: var(--text);
}

/* ── Unified Fleet Triage (ENG-56) ──────────────────────────────────── */

.fleet-triage-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.fleet-triage-title-row .page-title {
  margin-bottom: 0;
}

.fleet-triage-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1px solid;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  background: var(--panel);
  transition: background 0.15s;
}
.fleet-triage-badge:hover { filter: brightness(1.1); }
.fleet-triage-badge .fleet-triage-chevron {
  font-size: 8px;
  opacity: 0.6;
}

.fleet-triage-badge-red { border-color: var(--red); color: var(--red); }
.fleet-triage-badge-orange { border-color: var(--yellow); color: var(--yellow); }
.fleet-triage-badge-gray { border-color: var(--muted); color: var(--muted); }
.fleet-triage-badge-none { border-color: var(--muted); color: var(--muted); opacity: 0.7; }

.fleet-triage-panel {
  background: var(--panel);
  border-radius: 8px;
  padding: 12px 16px 16px;
  margin-bottom: 12px;
  border: 1px solid rgba(29, 39, 51, 0.6);
}

.fleet-triage-toggles {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

/* Reuse severity-toggle styles (kept from ENG-54, still used) */
.severity-toggle {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  border: 1px solid;
  background: transparent;
  transition: background 0.15s, color 0.15s;
}

.severity-toggle-critical { border-color: var(--red); color: var(--red); }
.severity-toggle-critical.active { background: rgba(255, 95, 86, 0.18); }
.severity-toggle-high { border-color: var(--red); color: var(--red); }
.severity-toggle-high.active { background: rgba(255, 95, 86, 0.12); }
.severity-toggle-medium { border-color: var(--yellow); color: var(--yellow); }
.severity-toggle-medium.active { background: rgba(253, 188, 64, 0.12); }
.severity-toggle-low { border-color: var(--muted); color: var(--muted); }
.severity-toggle-low.active { background: rgba(138, 150, 163, 0.12); }
.severity-toggle:not(.active) { opacity: 0.4; }

.fleet-triage-table-wrapper {
  max-height: 420px;
  overflow-y: auto;
}

.fleet-triage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

.fleet-triage-table th {
  background: #0e141d;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid #1d2733;
  position: sticky;
  top: 0;
  z-index: 1;
}

.fleet-triage-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(29, 39, 51, 0.5);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-triage-charger-row { cursor: pointer; }
.fleet-triage-charger-row:hover { background: rgba(255, 255, 255, 0.03); }
.triage-remediation-cell { white-space: nowrap; vertical-align: middle; padding: 4px 8px; }
.triage-status-wrap { display: inline-block; position: relative; }
.triage-status-menu {
  position: fixed;
  z-index: 200;
  background: var(--panel);
  border: 1px solid #2a3441;
  border-radius: 8px;
  padding: 4px 0;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.fleet-triage-charger-row .fleet-triage-chevron-cell {
  display: inline-block;
  width: 14px;
  font-size: 9px;
  opacity: 0.5;
}

.fleet-triage-sev-red td:first-child { border-left: 3px solid var(--red); }
.fleet-triage-sev-orange td:first-child { border-left: 3px solid var(--yellow); }
.fleet-triage-sev-gray td:first-child { border-left: 3px solid var(--muted); }

.fleet-triage-issue-row {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.15);
  font-size: 11px;
}
.fleet-triage-issue-row:hover { background: rgba(255, 255, 255, 0.03); }
.fleet-triage-issue-indent { padding-left: 32px !important; }

.fleet-triage-sev-label {
  font-size: 10px;
  color: var(--muted);
  margin-left: 6px;
}
.fleet-triage-sev-red .fleet-triage-sev-label { color: var(--red); }
.fleet-triage-sev-orange .fleet-triage-sev-label { color: var(--yellow); }
/* Fault accordion detail row */
.fault-detail-row td { padding: 0 !important; border-bottom: none !important; }
.fault-detail-cell { background: var(--panel); }
.fault-detail-cell .diagnostic-pane {
  display: block;
  position: static;
  width: 100%;
  max-width: none;
  border: none;
  border-radius: 0;
  padding: 16px 20px;
}

/* Diagnosis detail cards (in accordion) */
.diag-detail-card {
  background: var(--grid-bg);
  border: 1px solid #1d2733;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.diag-detail-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.diag-detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.diag-detail-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
}
.diag-detail-value {
  font-size: 0.875rem;
  color: var(--text);
}

/* Diagnosis action stub */
.diag-detail-action { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid #1d2733; }
.diag-action-btn { padding: 5px 12px; border-radius: 6px; border: 1px solid #2a3441; background: transparent; color: var(--muted); font-size: 0.75rem; cursor: not-allowed; opacity: 0.6; }
.diag-action-hint { font-size: 0.6875rem; color: var(--muted); margin-left: auto; font-style: italic; }

/* Fault timestamp format (matches session outcomes) */
.fault-ts-time { font-weight: 600; }
.fault-ts-date { color: var(--muted); font-size: 0.75rem; }

/* Inline diagnosis in fault log */
.fault-diagnosis-cell { font-size: 0.75rem; }
.fault-diag-summary { color: var(--green); }
.fault-diag-meta { color: var(--muted); font-size: 0.6875rem; }

.triage-date-time { font-weight: 600; }
.triage-date-date { color: var(--muted); font-size: 0.75rem; }

/* ── Severity button group (diagnosis form) ──────────────────────── */
.severity-buttons {
  display: flex;
  gap: 4px;
}
.severity-btn {
  padding: 4px 10px;
  border: 1px solid #2a3441;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}
.severity-btn:hover { border-color: var(--text); color: var(--text); }
.severity-btn--active[data-severity="critical"] { background: var(--red); color: #fff; border-color: var(--red); }
.severity-btn--active[data-severity="high"] { background: #e67e22; color: #fff; border-color: #e67e22; }
.severity-btn--active[data-severity="medium"] { background: var(--yellow); color: #000; border-color: var(--yellow); }
.severity-btn--active[data-severity="low"] { background: #3498db; color: #fff; border-color: #3498db; }
.severity-btn--active[data-severity="none"] { background: #2a3441; color: var(--text); border-color: #2a3441; }

/* ── Help hint (inline tooltip trigger) ──────────────────────────── */
/* ── Config action buttons (As Intended / Undo) ──────────────────── */
.btn-triage-intended {
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #2a3441;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 8px;
}
.btn-triage-intended:hover { border-color: var(--green); color: var(--green); }
.btn-triage-intended:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-config-intended, .btn-config-undo {
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #2a3441;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-config-intended:hover { border-color: var(--green); color: var(--green); }
.btn-config-undo:hover { border-color: var(--yellow); color: var(--yellow); }
.btn-config-auto-apply {
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #2a3441;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-config-auto-apply:hover { border-color: var(--green); color: var(--green); }
.config-action-cell {
  display: flex;
  gap: 4px;
  align-items: center;
}
.peer-intended {
  color: var(--green);
  font-size: 12px;
  font-weight: 500;
}
.peer-muted {
  color: var(--muted);
  font-size: 12px;
  opacity: 0.6;
}

/* ── Charger status pill + dropdown ───────────────────────────────── */
.charger-status-wrap {
  position: relative;
}
.charger-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #2a3441;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.charger-status-pill:hover { border-color: var(--text); color: var(--text); }
.charger-status-pill--active {
  background: var(--yellow);
  color: #000;
  border-color: var(--yellow);
  font-weight: 600;
}
.charger-status-pill--active:hover { background: #e5a830; border-color: #e5a830; }
.charger-status-pill-chevron { font-size: 8px; }
.charger-status-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  background: var(--panel);
  border: 1px solid #2a3441;
  border-radius: 8px;
  padding: 4px 0;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.charger-status-option {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.charger-status-option:hover { background: #1d2733; }
.charger-status-option--selected {
  color: var(--yellow);
  font-weight: 600;
}

/* ── Confirm modal ────────────────────────────────────────────────── */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}
.confirm-modal-box {
  background: var(--panel);
  border: 1px solid #2a3441;
  border-radius: 10px;
  padding: 24px 28px 20px;
  max-width: 400px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.confirm-modal-box p {
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 20px;
}
.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.confirm-modal-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid #2a3441;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
.confirm-modal-btn:hover { border-color: var(--text); color: var(--text); }
.confirm-modal-btn--primary {
  background: var(--green);
  color: #000;
  border-color: var(--green);
  font-weight: 600;
}
.confirm-modal-btn--primary:hover { background: #1fb835; }

.help-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  cursor: help;
  margin-left: 6px;
  vertical-align: middle;
}