/* BMSDock v10 UI 1.9.7 — Graph Shell Cleanup
   Only outer trip-chart-card shell geometry/visuals migrated from legacy style.css.
   No graph panels, toolbar, timeline, stacking, pointer-events or playback logic here. */

.trip-chart-card{margin-top:18px;background:linear-gradient(180deg,#0f1d2a 0%,#111a24 100%);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.18);}
.trip-chart-card{
  margin-top:18px;
  background:#ffffff;
  border:1px solid #e8edf3;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
}
.trip-chart-card{margin-top:18px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 10px 24px rgba(15,23,42,.06);overflow:hidden;}
.sheet.stats-collapsed .trip-chart-card{margin-top:8px;}
.sheet.stats-collapsed .trip-chart-card{margin-top:10px;}
.sheet.stats-collapsed .trip-chart-card{
  margin-top:10px !important;
}
.sheet.stats-collapsed .trip-chart-card{
  margin-top:10px!important;
}
.sheet:has(.stats-card.stats-slot-card-mode) .stats-card.stats-slot-card-mode + .trip-chart-card{
  margin-top:0!important;
}
.trip-chart-card:not(.onboarding-mode){
  margin-top:0!important;
}

/* BMSDock UI 1.8.12 — Graph UI standardization
   Visual layer only. Chart rendering, viewport geometry and playback logic stay untouched. */

:root{
  --graph-ui-text:#111827;
  --graph-ui-muted:#64748b;
  --graph-ui-border:#e5e7eb;
  --graph-ui-surface:#ffffff;
  --graph-ui-soft:#f8fafc;
  --graph-ui-radius:14px;
  --graph-ui-control-radius:10px;
  --graph-ui-font:14px;
  --graph-ui-weight:700;
}

/* Shared graph card */
.trip-chart-card:not(.onboarding-mode){
  background:var(--graph-ui-surface) !important;
  border:1px solid var(--graph-ui-border) !important;
  border-radius:var(--graph-ui-radius) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.06) !important;
  overflow:hidden !important;
}

/* Main / Cell / Info toolbar buttons share one typographic and geometric language. */
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row{
  gap:8px !important;
  padding-left:10px !important;
  padding-right:10px !important;
  background:var(--graph-ui-surface) !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle{
  min-width:0 !important;
  height:29px !important;
  min-height:29px !important;
  max-height:29px !important;
  padding:0 12px !important;
  border-radius:var(--graph-ui-control-radius) !important;
  font-size:var(--graph-ui-font) !important;
  font-weight:var(--graph-ui-weight) !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease,transform .1s ease !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle:not(.active){
  background:var(--graph-ui-soft) !important;
  border-color:#dbe2ea !important;
  color:var(--graph-ui-muted) !important;
  opacity:1 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle:focus-visible{
  outline:2px solid rgba(37,99,235,.28) !important;
  outline-offset:2px !important;
}

/* Preserve channel identity only for active state. */

.trip-chart-card:not(.onboarding-mode) .chart-power.active{background:rgba(245,158,11,.10) !important;border-color:#f59e0b !important;color:#d97706 !important;}
.trip-chart-card:not(.onboarding-mode) .chart-temp.active{background:rgba(37,99,235,.09) !important;border-color:var(--temp-color,#2563eb) !important;color:var(--temp-color,#2563eb) !important;}
.trip-chart-card:not(.onboarding-mode) .chart-extra.active{background:color-mix(in srgb,var(--extra-color,#64748b) 10%,#fff) !important;border-color:var(--extra-color,#64748b) !important;color:var(--extra-color,#64748b) !important;}
.trip-chart-card:not(.onboarding-mode) .chart-fix.active{background:#f1f5f9 !important;border-color:#cbd5e1 !important;color:#334155 !important;}
.trip-chart-card:not(.onboarding-mode) .cell-graph-toggle[data-cell-chart="avg"].active{background:rgba(124,58,237,.10) !important;border-color:#7c3aed !important;color:#6d28d9 !important;}



/* The toolbar scroll indicator is a secondary neutral element. */
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress{
  background:var(--graph-ui-surface) !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress .bms-toolbar-progress-thumb{
  background:#cbd5e1 !important;
  border-radius:999px !important;
}

/* Zoom overlay follows the same control geometry as Settings / Donate. */
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-zoom-overlay,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-zoom-overlay{
  border:1px solid #dbe2ea !important;
  border-radius:var(--graph-ui-control-radius) !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.12) !important;
  backdrop-filter:blur(8px) !important;
}
.trip-chart-card:not(.onboarding-mode) .chart-zoom-overlay .chart-zoom-btn{
  border:1px solid #dbe2ea !important;
  border-radius:8px !important;
  background:#fff !important;
  color:var(--graph-ui-text) !important;
  font-weight:700 !important;
  box-shadow:none !important;
}
.trip-chart-card:not(.onboarding-mode) .chart-zoom-overlay .chart-zoom-label{
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--graph-ui-muted) !important;
}

/* Bottom graph tabs: one level, one type scale. */





/* Cell Info adopts the same text hierarchy. */
.trip-chart-card:not(.onboarding-mode) .cell-card{
  border:1px solid var(--graph-ui-border) !important;
  border-radius:10px !important;
  background:var(--graph-ui-soft) !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-name{
  font-size:12px !important;
  font-weight:400 !important;
  color:var(--graph-ui-muted) !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-value{
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--graph-ui-text) !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-role,
.trip-chart-card:not(.onboarding-mode) .cell-role-inline{
  font-size:12px !important;
  font-weight:700 !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-empty,
.trip-chart-card:not(.onboarding-mode) .cell-info-empty-label{
  font-size:14px !important;
  font-weight:400 !important;
  color:var(--graph-ui-muted) !important;
}

/* Mini timeline remains a secondary navigation element. */
.trip-chart-card:not(.onboarding-mode) .mini-timeline-wrap{
  border-radius:10px !important;
}

@media(max-width:520px){
  .trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle{
    font-size:14px !important;
    font-weight:700 !important;
    padding-left:11px !important;
    padding-right:11px !important;
  }
  
}

/* UI 1.8.12 — Cell Graph / Cell Info refinements */
/* Selected cell filters must read as active, not disabled. Keep chart line colors unchanged. */


/* Preserve the established Min / Max card surfaces and borders. */
.trip-chart-card:not(.onboarding-mode) .cell-card.min{
  border-color:#ef4444 !important;
  background:#fff5f5 !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-card.min::before{
  background:rgba(239,68,68,.14) !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-card.max{
  border-color:#22c55e !important;
  background:#f0fdf4 !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-card.max::before{
  background:rgba(34,197,94,.14) !important;
}

/* Only the voltage text receives the semantic Min / Max color. */
.trip-chart-card:not(.onboarding-mode) .cell-card.min .cell-value{
  color:#991b1b !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-card.max .cell-value{
  color:#166534 !important;
}

/* UI 1.8.12 — Cell Info semantic Min/Max text colors.
   Card backgrounds, borders and geometry remain unchanged. */
.cell-info-item.min .cell-info-name,
.cell-info-item.min .cell-info-value,
.cell-info-card.min .cell-info-name,
.cell-info-card.min .cell-info-value,
.cell-info-min .cell-info-name,
.cell-info-min .cell-info-value {
  color: #ef4444 !important;
}

.cell-info-item.max .cell-info-name,
.cell-info-item.max .cell-info-value,
.cell-info-card.max .cell-info-name,
.cell-info-card.max .cell-info-value,
.cell-info-max .cell-info-name,
.cell-info-max .cell-info-value {
  color: #22c55e !important;
}

/* MIN label */
.cell-info .min .cell-info-name,
.cell-info .min .cell-name,
.cell-info .min .label,
.cell-info [data-extreme="min"] .cell-info-name,
.cell-info [data-extreme="min"] .cell-name,
.cell-info [data-extreme="min"] .label,
.cell-info-min .cell-info-name,
.cell-info-min .cell-name,
.cell-info-min .label,
.cell-min .cell-info-name,
.cell-min .cell-name,
.cell-min .label {
  color: #ef4444 !important;
}

/* MIN voltage */
.cell-info .min .cell-info-value,
.cell-info .min .cell-value,
.cell-info .min .voltage,
.cell-info [data-extreme="min"] .cell-info-value,
.cell-info [data-extreme="min"] .cell-value,
.cell-info [data-extreme="min"] .voltage,
.cell-info-min .cell-info-value,
.cell-info-min .cell-value,
.cell-info-min .voltage,
.cell-min .cell-info-value,
.cell-min .cell-value,
.cell-min .voltage {
  color: #991b1b !important;
}

/* MAX label */
.cell-info .max .cell-info-name,
.cell-info .max .cell-name,
.cell-info .max .label,
.cell-info [data-extreme="max"] .cell-info-name,
.cell-info [data-extreme="max"] .cell-name,
.cell-info [data-extreme="max"] .label,
.cell-info-max .cell-info-name,
.cell-info-max .cell-name,
.cell-info-max .label,
.cell-max .cell-info-name,
.cell-max .cell-name,
.cell-max .label {
  color: #22c55e !important;
}

/* MAX voltage */
.cell-info .max .cell-info-value,
.cell-info .max .cell-value,
.cell-info .max .voltage,
.cell-info [data-extreme="max"] .cell-info-value,
.cell-info [data-extreme="max"] .cell-value,
.cell-info [data-extreme="max"] .voltage,
.cell-info-max .cell-info-value,
.cell-info-max .cell-value,
.cell-info-max .voltage,
.cell-max .cell-info-value,
.cell-max .cell-value,
.cell-max .voltage {
  color: #166534 !important;
}

/* Cell Graph: active cell is clear but not heavy/dark. */
.trip-chart-card:not(.onboarding-mode) .cell-graph-toggle.cell-line.active {
  background: rgba(241, 245, 249, 0.96) !important;
  border-color: #94a3b8 !important;
  color: #1f2937 !important;
  box-shadow: none !important;
}

/* Bottom graph tabs: no extra top selection stripe. */


/* Cell Info extrema — real markup selectors only. */
.trip-chart-card:not(.onboarding-mode) .cell-card.min .cell-name {
  color: #ef4444 !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-card.max .cell-name {
  color: #22c55e !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-card.min .cell-value {
  color: #991b1b !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-card.max .cell-value {
  color: #166534 !important;
}

/* UI 1.8.12 — exact Graph UI fixes. */

/* Main Graph Speed: use the same canonical color as the plotted Speed series. */
.trip-chart-card:not(.onboarding-mode) .chart-speed.active {
  background: color-mix(in srgb, var(--metric-speed) 12%, #fff) !important;
  border-color: var(--metric-speed) !important;
  color: var(--metric-speed) !important;
}

/* Cell Graph Speed and Delta: use the exact same colors as their plotted series. */
.trip-chart-card:not(.onboarding-mode) .cell-graph-toggle[data-cell-chart="speed"].active {
  background: color-mix(in srgb, var(--metric-speed) 12%, #fff) !important;
  border-color: var(--metric-speed) !important;
  color: var(--metric-speed) !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-graph-toggle[data-cell-chart="delta"].active {
  background: color-mix(in srgb, var(--metric-cellDelta) 12%, #fff) !important;
  border-color: var(--metric-cellDelta) !important;
  color: var(--metric-cellDelta) !important;
}

/* Cell Graph regular cells: match Cell Info's approved active-toggle pattern exactly. */
.trip-chart-card:not(.onboarding-mode) .cell-graph-toggle.cell-line.active {
  background: #e5e7eb !important;
  border-color: #cbd5e1 !important;
  color: #111827 !important;
  box-shadow: none !important;
}

/* Bottom graph tabs: no extra active stripe. */


/* Working Min/Max selectors from UI 1.5.4 — keep unchanged. */
.trip-chart-card:not(.onboarding-mode) .cell-card.min .cell-name {
  color: #ef4444 !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-card.max .cell-name {
  color: #22c55e !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-card.min .cell-value {
  color: #991b1b !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-card.max .cell-value {
  color: #166534 !important;
}