/* BMSDock v10 UI 1.9.7 — Graph Shell Cleanup
   Migrated Data/Stats layout from legacy style.css.
   Existing approved data-ui.css rules remain later in this file and keep precedence.
   Graph/playback/tab rules are intentionally untouched. */

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 12px;margin-top:18px}
@media (max-width:520px){.stats{gap:16px 6px}}
.stats-collapse-handle{
  width:100%;
  height:28px;
  margin:0 0 8px 0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e2e8f0;
  border-top:0;
  border-radius:0 0 18px 18px;
  background:#fff;
  color:#94a3b8;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(15,23,42,.05);
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
.stats-collapse-handle:active{background:#f8fafc;}
.stats-collapse-arrow{
  display:block;
  font-size:34px;
  line-height:20px;
  font-weight:900;
  transform:translateY(-4px);
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.sheet.stats-collapsed .stats{display:none!important;}
.sheet.stats-collapsed .stats-collapse-handle{
  height:24px;
  margin-bottom:6px;
  border-radius:0 0 16px 16px;
}
.sheet.stats-collapsed .stats-collapse-arrow{
  transform:translateY(2px);
}
@media (max-width:520px){.stats-collapse-handle{height:26px;margin-bottom:6px;border-radius:0 0 16px 16px;}
.stats-collapse-arrow{font-size:32px;}}
.stats-card{
  margin-top:10px;
  margin-bottom:14px;
  padding:0 0 12px 0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  overflow:hidden;
}
.stats-card .stats{
  margin-top:0;
  padding:0 12px 0 12px;
}
.stats-card .stats-collapse-handle{
  width:100%;
  height:24px;
  margin:0 0 6px 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#94a3b8;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.stats-card .stats-collapse-handle:active{background:rgba(148,163,184,.06);}
.stats-card .stats-collapse-arrow{
  display:block;
  font-size:28px;
  line-height:18px;
  font-weight:900;
  transform:translateY(-2px);
  pointer-events:none;
}
.sheet.stats-collapsed .stats-card{
  padding-bottom:0;
  margin-bottom:10px;
}
.sheet.stats-collapsed .stats-card .stats{display:none!important;}
.sheet.stats-collapsed .stats-card .stats-collapse-handle{
  height:24px;
  margin-bottom:0;
}
.sheet.stats-collapsed .stats-card .stats-collapse-arrow{
  transform:translateY(1px);
}
@media (max-width:520px){.stats-card{margin-top:8px;margin-bottom:12px;border-radius:15px;padding-bottom:10px;}
.stats-card .stats{padding-left:8px;padding-right:8px;}
.stats-card .stats-collapse-handle{height:22px;margin-bottom:5px;}
.stats-card .stats-collapse-arrow{font-size:27px;}}
.sheet.stats-collapsed .stats-card .stats-collapse-handle{
  margin-bottom:0 !important;
}
.stats-card .stats-collapse-arrow{
  transform:rotate(0deg) !important;
}
.sheet.stats-collapsed .stats-card .stats-collapse-arrow{
  transform:rotate(180deg) !important;
}
.stats-card{
  position:relative !important;
  overflow:visible !important;
  margin-top:34px !important;
  padding-top:20px !important;
}
.sheet.stats-collapsed .stats-card .stats-collapse-arrow{
  transform:rotate(180deg) !important;
}
.stats-card .stats{
  margin-top:0 !important;
}
.sheet.stats-collapsed .stats-card{
  min-height:38px !important;
  padding-top:18px !important;
  padding-bottom:0 !important;
}
@media (max-width:520px){.stats-card{
    margin-top:18px !important;
    padding-top:20px !important;
  }}
#stats.stats-slot-mode{
  display:block!important;
  margin-top:12px!important;
  padding:0!important;
  overflow:hidden;
}
.stats-slot-strip{
  display:flex;
  gap:6px;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 8px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
}
.stats-slot-strip::-webkit-scrollbar{display:none;}
.stats-slot{
  --slot-color:#64748b;
  flex:0 0 calc((100% - 24px)/5);
  min-width:0;
  height:78px;
  border-radius:10px;
  background:var(--slot-color);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6px 3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  scroll-snap-align:start;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-x;
  transform-origin:center;
}
.stats-slot.is-locked{background:#334155;}
.stats-slot-value{
  max-width:100%;
  font-size:clamp(16px,4.6vw,27px);
  line-height:1;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.stats-slot-label{
  max-width:100%;
  margin-top:5px;
  font-size:clamp(9px,2.4vw,13px);
  line-height:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.stats-slot-unit{
  max-width:100%;
  margin-top:2px;
  font-size:clamp(8px,2.1vw,11px);
  line-height:1;
  opacity:.88;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.stats-slot-strip.is-editing{touch-action:none;scroll-snap-type:none;}
.stats-slot-strip.is-editing .stats-slot:not(.is-locked){
  animation:bms-slot-wiggle .18s ease-in-out infinite alternate;
  cursor:grabbing;
}
.stats-slot-strip.is-editing .stats-slot:nth-child(even):not(.is-locked){animation-direction:alternate-reverse;}
.stats-slot-strip.is-editing .stats-slot.is-dragging{
  animation:none;
  transform:scale(1.07);
  opacity:.88;
  z-index:3;
  box-shadow:0 6px 18px rgba(15,23,42,.28),inset 0 0 0 2px rgba(255,255,255,.45);
}
@media (min-width:700px){.stats-slot{height:84px;}
.stats-slot-value{font-size:25px;}
.stats-slot-label{font-size:12px;}
.stats-slot-unit{font-size:10px;}}
@media (prefers-reduced-motion:reduce){.stats-slot-strip.is-editing .stats-slot:not(.is-locked){animation:none;outline:2px dashed rgba(255,255,255,.8);outline-offset:-4px;}}
.stats-card.stats-slot-card-mode{
  padding:8px 8px 10px!important;
  margin-top:8px!important;
  margin-bottom:12px!important;
  border-radius:18px!important;
}
#stats.stats-slot-mode{
  display:block!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.stats-slot-strip{
  gap:7px!important;
  padding:2px 0 3px!important;
}
.stats-slot{
  --slot-color:#64748b;
  flex:0 0 calc((100% - 28px)/5)!important;
  height:82px!important;
  padding:8px 3px 7px!important;
  border:1.5px solid var(--slot-color)!important;
  border-radius:15px!important;
  background:color-mix(in srgb,var(--slot-color) 10%,#ffffff)!important;
  color:var(--slot-color)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--slot-color) 8%,transparent),0 2px 7px rgba(15,23,42,.06)!important;
  justify-content:center!important;
}
.stats-slot.is-locked{
  --slot-color:#64748b!important;
  background:color-mix(in srgb,#64748b 9%,#ffffff)!important;
  color:#475569!important;
}
.stats-slot-value{
  font-size:clamp(19px,5vw,30px)!important;
  line-height:1.02!important;
  font-weight:500!important;
}
.stats-slot-label{display:none!important;}
.stats-slot-unit{
  margin-top:7px!important;
  font-size:clamp(10px,2.55vw,14px)!important;
  line-height:1!important;
  font-weight:500!important;
  opacity:.9!important;
  color:currentColor!important;
}
.stats-slot-strip.is-editing .stats-slot.is-dragging{
  background:color-mix(in srgb,var(--slot-color) 16%,#ffffff)!important;
  box-shadow:0 7px 20px rgba(15,23,42,.2),inset 0 0 0 1px color-mix(in srgb,var(--slot-color) 20%,transparent)!important;
}
@media (max-width:520px){.stats-card.stats-slot-card-mode{padding:7px 7px 9px!important;}
.stats-slot{height:76px!important;border-radius:13px!important;}
.stats-slot-value{font-size:clamp(17px,6.2vw,27px)!important;}
.stats-slot-unit{font-size:clamp(9px,2.8vw,12px)!important;margin-top:6px!important;}}
.stats-card.stats-slot-card-mode{
  padding:0!important;
  margin-top:8px!important;
  margin-bottom:12px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#stats.stats-slot-mode{
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.stats-slot-strip{
  width:100%!important;
  padding:2px 0 4px!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  touch-action:pan-y!important;
  cursor:grab;
}
.stats-slot{
  touch-action:pan-y!important;
}
.stats-slot-strip.is-editing{
  touch-action:pan-y!important;
  scroll-snap-type:none!important;
  cursor:grab;
}
.stats-slot-strip.is-editing .stats-slot:not(.is-locked){cursor:grab;}
.stats-slot-strip.is-editing .stats-slot.is-dragging{cursor:grabbing;}
.stats-slot-strip{
  --slot-gap:10px;
  --slot-peek:18px;
  gap:var(--slot-gap)!important;
  padding:2px var(--slot-peek) 4px 0!important;
  scroll-snap-type:none!important;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.stats-slot{
  flex:0 0 max(80px,calc((100% - (5 * var(--slot-gap)) - var(--slot-peek))/6))!important;
  width:auto!important;
  min-width:80px!important;
  height:60px!important;
  min-height:60px!important;
  padding:5px 3px 4px!important;
  border-radius:12px!important;
  scroll-snap-align:none!important;
}
.stats-slot-value{
  min-height:35px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:clamp(20px,4.8vw,28px)!important;
  line-height:35px!important;
}
.stats-slot-unit{
  min-height:10px!important;
  margin-top:1px!important;
  font-size:10px!important;
  line-height:10px!important;
}
@media (max-width:520px){.stats-slot{
    height:60px!important;
    min-height:60px!important;
    min-width:80px!important;
    border-radius:12px!important;
  }
.stats-slot-value{
    min-height:35px!important;
    font-size:clamp(20px,6vw,27px)!important;
    line-height:35px!important;
  }
.stats-slot-unit{
    min-height:10px!important;
    margin-top:1px!important;
    font-size:10px!important;
    line-height:10px!important;
  }}
.stats-card.stats-slot-card-mode{
  margin:var(--bms-slot-edge-gap)!important;
  width:auto!important;
}
.stats-slot-strip{
  --slot-edge-gap:var(--bms-slot-edge-gap);
  padding:0 var(--slot-peek) 0 0!important;
}
.sheet:has(.stats-card.stats-slot-card-mode) .stats-card.stats-slot-card-mode{
  margin-top:var(--bms-slot-edge-gap)!important;
  margin-bottom:var(--bms-slot-edge-gap)!important;
  margin-left:var(--bms-slot-edge-gap)!important;
  margin-right:var(--bms-slot-edge-gap)!important;
}
.stats-card.stats-slot-card-mode{
  margin:var(--bms-slot-perimeter)!important;
  padding:0!important;
}
.stats-slot-strip{
  padding:0 var(--slot-peek) 0 0!important;
}
.stats-slot-unit{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:100%!important;
}
.stats-card.stats-slot-card-mode{
  margin-top:var(--bms-slot-card-edge-gap)!important;
  margin-bottom:var(--bms-slot-card-edge-gap)!important;
  margin-left:var(--bms-slot-visible-gap)!important;
  margin-right:var(--bms-slot-visible-gap)!important;
  overflow:visible!important;
}
.stats-slot-strip{
  box-sizing:border-box!important;
  min-height:calc(60px + (2 * var(--bms-slot-motion-pad)))!important;
  padding-top:var(--bms-slot-motion-pad)!important;
  padding-bottom:var(--bms-slot-motion-pad)!important;
  align-items:center!important;
  overflow-x:auto!important;
  /* Mobile engines may internally clip the scrolling layer vertically;
     the reserved padding keeps transformed cards inside that layer. */
  overflow-y:hidden!important;
}
.stats-slot-strip.is-editing .stats-slot.is-dragging{
  z-index:5!important;
}
.stats-card{
  margin-bottom:var(--bms-graph-controls-gap)!important;
}
.stats-slot-strip{
  --slot-gap:10px!important;
  gap:var(--slot-gap)!important;
  scroll-snap-type:none!important;
}
.stats-slot{
  flex:0 0 clamp(80px, calc((100% - (5 * var(--slot-gap))) / 6), 100px)!important;
  width:clamp(80px, calc((100% - (5 * var(--slot-gap))) / 6), 100px)!important;
  min-width:80px!important;
  max-width:100px!important;
  height:60px!important;
  min-height:60px!important;
  max-height:60px!important;
  box-sizing:border-box!important;
}
.stats-slot-value{
  min-height:35px!important;
  height:35px!important;
  line-height:35px!important;
}
.stats-slot-unit{
  min-height:10px!important;
  height:10px!important;
  line-height:10px!important;
}
.stats-card.stats-slot-card-mode{
  margin-left:0!important;
  margin-right:0!important;
  width:100%!important;
  max-width:100%!important;
}
.sheet:has(.stats-card.stats-slot-card-mode) .stats-card.stats-slot-card-mode{
  margin-left:0!important;
  margin-right:0!important;
}
.stats-slot-strip{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
.stats-card.stats-slot-card-mode{
  margin-top:0!important;
  margin-bottom:0!important;
  padding:0!important;
}
.sheet:has(.stats-card.stats-slot-card-mode) .stats-card.stats-slot-card-mode{
  margin-top:0!important;
  margin-bottom:0!important;
}
.stats-slot-strip{
  box-sizing:border-box!important;
  height:80px!important;
  min-height:80px!important;
  max-height:80px!important;
  padding-top:10px!important;
  padding-bottom:10px!important;
  padding-left:0!important;
  padding-right:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-behavior:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
  touch-action:pan-x pan-y!important;
}
.stats-slot{
  touch-action:pan-x pan-y!important;
}
.stats-slot-strip.is-editing,
.stats-slot-strip.is-editing .stats-slot{
  touch-action:pan-x pan-y!important;
}
.stats .time-item{
  min-width:0!important;
  overflow:hidden!important;
}
.stats .time-item .value{
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  font-variant-numeric:tabular-nums!important;
  font-feature-settings:"tnum" 1!important;
  letter-spacing:-.35px!important;
}
.stats .time-item.time-value-medium .value{
  font-size:clamp(22px,4.4vw,28px)!important;
}
.stats .time-item.time-value-long .value{
  font-size:clamp(18px,3.8vw,24px)!important;
  letter-spacing:-.65px!important;
}
.stats-slot.is-time-slot .stats-slot-value{
  width:100%!important;
  max-width:100%!important;
  padding-inline:2px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  font-variant-numeric:tabular-nums!important;
  font-feature-settings:"tnum" 1!important;
  letter-spacing:-.35px!important;
}
.stats-slot.is-time-slot.time-medium .stats-slot-value{
  font-size:21px!important;
  letter-spacing:-.5px!important;
}
.stats-slot.is-time-slot.time-long .stats-slot-value{
  font-size:18px!important;
  letter-spacing:-.75px!important;
}
.stats-slot-strip.is-editing,
.stats-slot-strip.is-editing .stats-slot{
  touch-action:none!important;
  overscroll-behavior:none!important;
}
#stats:not(.stats-slot-mode) .item{
  display:grid!important;
  grid-template-rows:32px 20px auto!important;
  align-content:start!important;
  align-items:center!important;
  min-width:0!important;
}
#stats:not(.stats-slot-mode) .item .value{
  align-self:center!important;
  justify-self:stretch!important;
  line-height:32px!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  margin:0!important;
  padding:0!important;
}
#stats:not(.stats-slot-mode) .item .label{
  align-self:center!important;
  justify-self:stretch!important;
  line-height:20px!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  margin:0!important;
  padding:0!important;
}
#stats:not(.stats-slot-mode) .item .sub{
  margin:0!important;
}
#stats:not(.stats-slot-mode) .time-item .value{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.stats-slot-strip.has-live-reorder .stats-slot{
  will-change:transform;
}
.stats-slot-strip .stats-slot.is-dragging{
  opacity:0!important;
  pointer-events:none!important;
}
.stats-slot-drag-ghost{
  box-sizing:border-box!important;
  transform:scale(1.035);
  opacity:.96;
  filter:drop-shadow(0 8px 14px rgba(15,23,42,.22));
  transition:transform 120ms ease,opacity 120ms ease;
  contain:layout paint style;
}
.stats-slot-drag-ghost.is-active{
  transform:scale(1.06);
}
@media (prefers-reduced-motion:reduce){.stats-slot-drag-ghost{transition:none!important;}}

/* Existing approved Data / Tables UI */
/* BMSDock UI 1.8.12 — Data / Tables Standardization
   Scope: data tables, metric rows and informational value blocks only. */

:root {
  --data-ui-text: #111827;
  --data-ui-muted: #64748b;
  --data-ui-border: #e2e8f0;
  --data-ui-soft: #f8fafc;
  --data-ui-surface: rgba(255,255,255,.96);
  --data-ui-row-height: 40px;
  --data-ui-radius: 10px;
  --data-ui-label-size: 13px;
  --data-ui-value-size: 14px;
}

/* Native and semantic data tables */
.trip-chart-card:not(.onboarding-mode) table,
.data-table,
.metrics-table,
.info-table,
.stats-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--data-ui-text);
  font-variant-numeric: tabular-nums;
}

.trip-chart-card:not(.onboarding-mode) table th,
.data-table th,
.metrics-table th,
.info-table th,
.stats-table th {
  min-height: var(--data-ui-row-height);
  padding: 8px 10px;
  color: var(--data-ui-muted);
  font-size: var(--data-ui-label-size);
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  border-bottom: 1px solid var(--data-ui-border);
}

.trip-chart-card:not(.onboarding-mode) table td,
.data-table td,
.metrics-table td,
.info-table td,
.stats-table td {
  min-height: var(--data-ui-row-height);
  padding: 8px 10px;
  font-size: var(--data-ui-value-size);
  font-weight: 700;
  line-height: 1.3;
  vertical-align: middle;
  border-bottom: 1px solid var(--data-ui-border);
}

.trip-chart-card:not(.onboarding-mode) table tr:last-child td,
.data-table tr:last-child td,
.metrics-table tr:last-child td,
.info-table tr:last-child td,
.stats-table tr:last-child td {
  border-bottom: 0;
}

/* Common key/value information rows */
.data-row,
.metric-row,
.info-row,
.stat-row,
.parameter-row {
  min-height: var(--data-ui-row-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--data-ui-border);
}

.data-row:last-child,
.metric-row:last-child,
.info-row:last-child,
.stat-row:last-child,
.parameter-row:last-child {
  border-bottom: 0;
}

.data-label,
.metric-label,
.info-label,
.stat-label,
.parameter-label,
.data-row .label,
.metric-row .label,
.info-row .label,
.stat-row .label {
  min-width: 0;
  color: var(--data-ui-muted);
  font-size: var(--data-ui-label-size);
  font-weight: 400;
  line-height: 1.3;
}

.data-value,
.metric-value,
.info-value,
.stat-value,
.parameter-value,
.data-row .value,
.metric-row .value,
.info-row .value,
.stat-row .value {
  margin-left: auto;
  color: var(--data-ui-text);
  font-size: var(--data-ui-value-size);
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.data-unit,
.metric-unit,
.info-unit,
.stat-unit,
.parameter-unit {
  color: var(--data-ui-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}

/* Reusable info/data surfaces */
.data-card,
.metrics-card,
.info-card,
.stats-card,
.parameter-card {
  background: var(--data-ui-surface);
  border: 1px solid var(--data-ui-border);
  border-radius: var(--data-ui-radius);
  overflow: hidden;
}

/* Keep semantic state colors meaningful without recoloring entire rows. */
.data-value.min,
.metric-value.min,
.info-value.min,
.stat-value.min {
  color: #991b1b;
}
.data-value.max,
.metric-value.max,
.info-value.max,
.stat-value.max {
  color: #166534;
}
.data-value.warning,
.metric-value.warning,
.info-value.warning,
.stat-value.warning {
  color: #b45309;
}

/* Mobile: preserve readable type; only tighten geometry. */
@media (max-width: 768px) {
  .trip-chart-card:not(.onboarding-mode) table th,
  .trip-chart-card:not(.onboarding-mode) table td,
  .data-table th,
  .data-table td,
  .metrics-table th,
  .metrics-table td,
  .info-table th,
  .info-table td,
  .stats-table th,
  .stats-table td {
    padding: 7px 8px;
  }

  .data-row,
  .metric-row,
  .info-row,
  .stat-row,
  .parameter-row {
    gap: 8px;
    padding: 7px 8px;
  }

  .data-label,
  .metric-label,
  .info-label,
  .stat-label,
  .parameter-label,
  .data-row .label,
  .metric-row .label,
  .info-row .label,
  .stat-row .label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}