/* ================================================================
   <bm-stat-tile> — self-contained (hardcoded colors, no dependency on
   any page's own --csd-* / --bm-* token block) so it renders identically
   wherever it's dropped in. See StatTile.js for the full design rationale.
   ================================================================ */

/* ── Grid container — 3 columns by default (matching the original
   .csd-tiles); add a --cols-N modifier for any other column count (e.g.
   .esd-tiles used 4 for its Live Stats grid, 2 for Lifetime Totals next
   to the pie chart). ── */
.bm-stat-tiles {
  display: grid !important;
  grid-template-columns: repeat(var(--bm-stat-tiles-cols, 3), 1fr) !important;
  gap: 8px !important;
}
.bm-stat-tiles--cols-2 { --bm-stat-tiles-cols: 2; }
.bm-stat-tiles--cols-3 { --bm-stat-tiles-cols: 3; }
.bm-stat-tiles--cols-4 { --bm-stat-tiles-cols: 4; }

.bm-stat-tile {
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  background: #FFFFFF !important; border: 1px solid #E2E5EF !important;
  border-radius: 6px !important; padding: 9px !important; text-align: center !important;
  box-sizing: border-box !important;
  /* Reserves the same vertical space a bar-track tile needs (value + label +
     track) on EVERY tile, bar or not. Without this, a plain tile sharing a
     CSS Grid row with a bar tile gets stretched taller than its own content
     by the grid's default align-items:stretch — inconsistent-looking tile
     heights that shift depending on which tiles happen to land in the same
     row, which changes any time tiles are added/reordered/removed.
     68px, not 60px: a bar tile's OWN natural content height (padding 9+9 +
     ~22px value line + 2px gap + ~13px label line + 3px track margin + 5px
     track = ~64px) already exceeds a 60px floor, so bar tiles were still
     coming out taller than plain ones even with a floor — the floor has to
     clear the tallest tile's own content, not just look "roomy enough". */
  min-height: 68px !important;
}
.bm-stat-tile--has-tooltip { cursor: help !important; }

.bm-stat-tile-value { font-size: 17px !important; font-weight: 800 !important; color: #111827 !important; }
.bm-stat-tile-label { font-size: 9.5px !important; font-weight: 700 !important; color: #8E97B4 !important; text-transform: uppercase !important; letter-spacing: .3px !important; }
.bm-stat-tile--warn .bm-stat-tile-value { color: #DC2626 !important; }

/* ── Bar (pressure/utilization gauge, 0-100) ── */
.bm-stat-tile-bar-track {
  height: 5px !important; background: #F7F8FC !important; border-radius: 3px !important;
  overflow: hidden !important; margin-top: 3px !important; width: 100% !important;
}
.bm-stat-tile-bar-fill {
  height: 100% !important; border-radius: 3px !important; min-width: 2px !important;
  transition: width .4s ease, background .4s ease !important;
  background: linear-gradient(90deg, #2196f3 0%, #1976d2 100%); /* pre-JS/no-color fallback only, not !important */
}

/* ── Small trend arrow, inline right after the value (esd's original
   placement) — UP is always "worse" (red), DOWN always "better" (green),
   regardless of which metric it's attached to. ── */
.bm-stat-tile-trend-icon-sm {
  font-size: 14px !important; width: 14px !important; height: 14px !important;
  vertical-align: middle !important; margin-left: 2px !important;
}
.bm-stat-tile-trend-icon-sm--up   { color: #DC2626 !important; }
.bm-stat-tile-trend-icon-sm--down { color: #16A34A !important; }

/* ── Large trend arrow, own column on the right (csd's original placement)
   — switches the tile itself to a row layout, .bm-stat-tile-main re-wraps
   the value/label/bar column so it keeps behaving like any other tile. ── */
.bm-stat-tile--trend-row {
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 6px !important;
}
.bm-stat-tile-main {
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  flex: 1 1 auto !important; min-width: 0 !important;
}
.bm-stat-tile-trend-icon-lg {
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex: 0 0 34px !important; width: 34px !important; height: auto !important;
  font-size: 30px !important;
}
.bm-stat-tile-trend-icon-lg--up   { color: #DC2626 !important; }
.bm-stat-tile-trend-icon-lg--down { color: #16A34A !important; }