.cr-live-mode .dashboard-mode .fleetStat {
  bottom: 6px !important;
}

.fleetTableHead,
.fleetTableRow {
  grid-template-columns: 70px 130px 92px 142px 50px 55px 82px 78px 58px;
}

.fleetOnline.run { color: #48df82; }
.fleetOnline.run i { background: #3ce47a; box-shadow: 0 0 7px rgba(60, 228, 122, .35); }
.fleetOnline.charge { color: #5ebcff; }
.fleetOnline.charge i { background: #2fa9ff; }
.fleetOnline.wait { color: #a3b4c1; }
.fleetOnline.wait i { background: #899dac; }
.fleetOnline.unknown { color: #7d92a1; }

.alarmRow {
  min-height: 45px;
  height: auto;
  grid-template-columns: 76px 1fr;
  padding: 4px 0;
}
.alarmContent { min-width: 0; }
.alarmVehicle {
  color: #62bdf4;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alarmTitle {
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vehGridHead,
.vehGridRow {
  grid-template-columns: 70px 132px 108px 132px 60px 62px 72px 76px 96px 68px;
}
.vehPower { color: #9fb5c4; }
.vehTableStatus.unknown i { background: #637989; }
.vehTableStatus.unknown .txt { color: #869bab; }

.searchIcon,
.fleetSearchIcon,
.dashboardBell,
.dashPanelMore {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.dashKpi[role="button"],
.metricTile[role="button"],
.routeRow[data-dashboard-route],
.alarmRow[data-id] {
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.dashKpi[role="button"]:hover,
.dashKpi.active-filter,
.metricTile[role="button"]:hover {
  border-color: #2a86c5;
  box-shadow: inset 0 0 0 1px rgba(64, 169, 242, .18);
}
.routeRow[data-dashboard-route]:hover,
.routeRow.active-filter,
.alarmRow[data-id]:hover {
  background: rgba(39, 133, 194, .12);
}
.dashKpi[role="button"]:focus-visible,
.metricTile[role="button"]:focus-visible,
.routeRow[data-dashboard-route]:focus-visible,
.alarmRow[data-id]:focus-visible,
.searchIcon:focus-visible,
.fleetSearchIcon:focus-visible,
.dashboardBell:focus-visible,
.dashPanelMore:focus-visible {
  outline: 2px solid #36a9f4;
  outline-offset: 2px;
}

/* Realtime control room refinements */
.shell-v2 .realtimeView .dataStatusMetric .statusValue {
  margin-left: 14px !important;
  color: #55dc7b !important;
  font-size: 15px !important;
  letter-spacing: 0;
}
.shell-v2 .realtimeView .dataStatusMetric .statusSub { margin-left: 14px !important; }
.realtimeView .statusValue.bad,
.realtimeView .vehicleStatus b.bad { color: #ff6672 !important; }
.realtimeView .statusValue.warn,
.realtimeView .vehicleStatus b.warn { color: #ffb34d !important; }
.realtimeView .statusValue.missing { color: #788f9f !important; }

.alertHeader button {
  border: 0;
  background: transparent;
  color: #65bdf4;
  font: 700 10px/18px inherit;
  cursor: pointer;
}
.alertList { padding: 0 9px; }
.alertItem {
  appearance: none;
  width: 100%;
  height: 52px;
  padding: 0 6px;
  border: 0;
  border-top: 1px solid #1a3447;
  border-radius: 0;
  background: transparent;
  color: inherit;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease;
}
.alertItem:hover { background: rgba(45, 132, 187, .1); }
.alertBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  font-size: 9px;
}
.alertBadge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.alertBadge.red { color: #ff6571; }
.alertBadge.orange { color: #ffb14a; }
.alertBadge.blue { color: #63bdf7; }
.alertText { min-width: 0; }
.alertText b,.alertText span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alertTime { text-align: right; font-size: 9px; }
.realtimeAlertSummary {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 7px;
  height: 38px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid #1e4057;
  border-radius: 6px;
  background: #0a2030;
  color: #8da4b5;
  font-size: 9px;
}
.realtimeAlertSummary b { color: #e9f2f7; font-size: 12px; }
.realtimeAlertSummary span:last-child { text-align: right; }

.pack.caution { border-color: #b97826; box-shadow: 0 0 13px rgba(255, 174, 59, .12) inset; }
.pack.caution .t { color: #ffba58; font-weight: 800; }
.pack.danger,
.pack.danger.stale { border-color: #df4b58 !important; box-shadow: 0 0 15px rgba(228, 70, 86, .16) inset !important; }
.pack.danger .battery,.pack.danger .battery:after { border-color: #ff6672; }
.pack.danger .battery .fill { background: repeating-linear-gradient(90deg,#ff6672 0 7px,transparent 7px 9px); }
.pack.danger .t { color: #ff6874 !important; font-weight: 800; }
.pack .battery > span { position: absolute; inset: 0; z-index: 2; color: #eef8f1; font-size: 8px; font-weight: 800; line-height: 16px; }
.pack .battery.state-data > span { font-size: 7px; letter-spacing: -.03em; }
.pack.caution .battery.state-data > span { color: #fff4df; }
.pack.danger .battery.state-data > span { color: #fff0f1; }

.chartPanel .panelTitle,
.hist .panelTitle { display: flex; align-items: center; gap: 6px; }
.analysisState {
  display: inline-flex;
  align-items: center;
  height: 17px;
  margin-left: auto;
  padding: 0 7px;
  border: 1px solid #315064;
  border-radius: 9px;
  color: #8da6b7;
  font-size: 8px;
  line-height: 15px;
}
.analysisState.normal { border-color: rgba(76, 215, 120, .4); color: #58dc7e; background: rgba(34, 137, 77, .1); }
.analysisState.caution { border-color: rgba(255, 177, 72, .45); color: #ffb74f; background: rgba(174, 104, 25, .12); }
.analysisState.danger { border-color: rgba(255, 92, 105, .52); color: #ff6874; background: rgba(163, 42, 55, .13); }
.analysisState.missing { color: #7f95a5; }
.trendValue.normal { color: #58dc7e; }
.trendValue.caution { color: #ffb74f; }
.trendValue.danger { color: #ff6874; }
.trendValue.missing { color: #7f95a5; }
.hist .delta.danger { color: #ff6874; }

.operationSummaryGrid {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 39px;
  bottom: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.operationSummaryItem {
  min-width: 0;
  padding: 9px 10px 7px;
  border: 1px solid #1d3b50;
  border-radius: 7px;
  background: linear-gradient(180deg,#0c2637,#091d2b);
}
.operationSummaryItem span { display: block; color: #839aaa; font-size: 8.5px; }
.operationSummaryItem b { display: block; margin-top: 6px; overflow: hidden; color: #edf5f9; font-size: 14px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.operationSummaryItem b.normal { color: #59dd80; }
.operationSummaryItem b.caution { color: #ffb44e; }
.operationSummaryItem b.muted { color: #7e94a4; }
.operationSummaryItem small { display: block; margin-top: 4px; overflow: hidden; color: #7c94a5; font-size: 7.5px; line-height: 10px; text-overflow: ellipsis; white-space: nowrap; }
/* Six right-side metrics must stay within the existing meter panel. */
#realtimeView .metricCol:has(#fleetRealtimeSoh) .metric{height:46px;min-height:46px;padding-top:4px;padding-bottom:4px}
#fleetRealtimeSoh .value{margin-left:0}

/* Keep the existing scaled canvas, with consistent panel gutters and metric rhythm. */
.shell-v2 #realtimeView{grid-template-rows:340px 340px 187px!important;gap:12px!important;height:891px!important}
.shell-v2 #realtimeView .topGrid{grid-template-columns:704px 340px 224px!important;gap:12px!important}
.shell-v2 #realtimeView .midGrid{grid-template-columns:320px 568px 380px!important;gap:12px!important}
.shell-v2 #realtimeView .bottomGrid{grid-template-columns:924px 356px!important;gap:12px!important}
.shell-v2 #realtimeView .meterBlock{grid-template-columns:146px minmax(0,1fr) 146px!important;gap:10px!important}
.shell-v2 #realtimeView .metricCol{gap:7px}
.shell-v2 #realtimeView .metricCol:has(#fleetRealtimeSoh) .metric{height:50px;min-height:50px}
.shell-v2 #realtimeView .metric{border-radius:9px;padding:6px 9px!important}
.shell-v2 #realtimeView .metric .label{font-size:10px!important;line-height:15px}
.shell-v2 #realtimeView .metric .value{font-size:20px!important;line-height:23px;font-variant-numeric:tabular-nums}
.shell-v2 #realtimeView #fleetRealtimeSoh .value{margin-left:0!important}
.shell-v2 #realtimeView .panelTitle{font-size:12px;letter-spacing:0}
.shell-v2 #realtimeView .vehicleStatus{font-size:11px;line-height:14px}
.shell-v2 #realtimeView .vehicleStatus b{font-size:12px;line-height:15px}
.shell-v2 #realtimeView .operationSummaryItem{padding:9px 8px}
.shell-v2 #realtimeView .operationSummaryItem span{font-size:10px}
.shell-v2 #realtimeView .operationSummaryItem small{font-size:9px;line-height:12px}
.shell-v2 #realtimeView .alertItem{grid-template-columns:36px minmax(0,1fr) 33px;padding:0 3px}
.shell-v2 #realtimeView .alertText b{font-size:10px}
.shell-v2 #realtimeView .alertText span{font-size:9px}
.shell-v2 #realtimeView .packGrid{gap:7px!important}

.shell-v2 #realtimeView .analysisStack,.shell-v2 #realtimeView .analysisTop{gap:12px}

/* Align health metrics with the existing icon column. */
.shell-v2 #realtimeView #fleetRealtimeSoh .value{margin-left:22px!important}
.shell-v2 #realtimeView .metric .label{gap:7px}
.shell-v2 #realtimeView .metric .value,.shell-v2 #realtimeView .metric .statusValue{margin-left:22px!important}
.shell-v2.realtime-mode #realtimeVehiclePicker{height:74px;grid-template-rows:25px 37px;gap:4px;padding:4px 7px}
.realtimeVehicleTabs button{height:25px;font-size:11px;line-height:23px}
.realtimeVehicleList{scrollbar-width:thin;scrollbar-color:#39739a transparent}
.realtimeVehicleList::-webkit-scrollbar{display:block;height:3px}
.realtimeVehicleList::-webkit-scrollbar-thumb{background:#39739a;border-radius:3px}
.realtimeVehicleItem{flex:1 0 166px;height:34px;padding:4px 8px}
.realtimeVehicleIdentity b{font-size:11px}
.realtimeVehicleIdentity small{font-size:9px}
.realtimeVehicleState{font-size:9px}