/* ===========================================================================
   BM1 Monitor — app-specific layout on top of mehali-ui.css.
   Tokens only: no colours, no spacing values outside the --mu-space scale.
   =========================================================================== */

.bm-hidden { display: none !important; }

/* ---- nav (safe-area aware for iPhone home-screen mode) ------------------ */
.mu-nav.bm-nav {
  height: auto;
  min-height: 48px;
  padding-top: env(safe-area-inset-top);
  gap: var(--mu-space-2);
}
.bm-nav-status { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.bm-nav-status .mu-nav-title { white-space: nowrap; }
.bm-nav-status .mu-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bm-user-menu {
  position: absolute;
  right: var(--mu-gutter);
  top: calc(48px + env(safe-area-inset-top) + var(--mu-space-1));
  min-width: 220px;
  padding: var(--mu-space-2);
  z-index: 60;
}
.bm-user-menu .mu-list-row { border-bottom: 0; border-radius: var(--mu-radius-sm); }
.bm-user-menu .bm-menu-name { padding: var(--mu-space-2) var(--mu-cell-pad-x) var(--mu-space-1); }

/* ---- page tabs (scrollable on phone) ----------------------------------- */
.bm-tabs-wrap {
  position: sticky;
  top: calc(48px + env(safe-area-inset-top));
  z-index: 40;
  background: var(--mu-material);
  -webkit-backdrop-filter: var(--mu-material-blur);
  backdrop-filter: var(--mu-material-blur);
  border-bottom: var(--mu-hairline) solid var(--mu-separator);
}
.bm-tabs {
  max-width: var(--mu-max-wide);
  margin-inline: auto;
  padding-inline: var(--mu-gutter);
  border-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bm-tabs::-webkit-scrollbar { display: none; }
.bm-tabs .mu-tab { flex: none; min-height: var(--mu-control-lg); }

/* ---- main ---------------------------------------------------------------- */
.bm-main {
  padding-top: var(--mu-space-6);
  padding-bottom: calc(var(--mu-space-12) + env(safe-area-inset-bottom));
}

/* ---- value cards --------------------------------------------------------- */
.bm-grid {
  display: grid;
  gap: var(--mu-space-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.bm-grid-summary { grid-template-columns: repeat(3, 1fr); }
.bm-grid-towers  { grid-template-columns: repeat(4, 1fr); }
.bm-grid-span    { grid-column: 1 / -1; }

.bm-stat {
  display: flex;
  flex-direction: column;
  gap: var(--mu-space-2);
  min-height: 0;
  transition: border-color var(--mu-dur-fast) var(--mu-ease),
              transform var(--mu-dur-fast) var(--mu-ease);
}
.bm-stat.is-trendable { cursor: pointer; }
.bm-stat.is-trendable:hover { border-color: var(--mu-accent); }
.bm-stat.is-trendable:active { transform: scale(0.98); }
.bm-stat-label {
  font-size: var(--mu-size-subhead);
  line-height: 1.3;
  letter-spacing: var(--mu-track-wide);
  color: var(--mu-text-secondary);
}
.bm-stat-value {
  font-family: var(--mu-font-display);
  font-size: var(--mu-size-large-title);
  font-weight: var(--mu-weight-semibold);
  letter-spacing: var(--mu-track-tight);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: auto;
}
.bm-stat-text {
  font-size: var(--mu-size-title-2);
  font-weight: var(--mu-weight-semibold);
  letter-spacing: var(--mu-track-snug);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.bm-stat-badge { margin-top: auto; }

.bm-skeleton-card { height: 112px; }

/* ---- status dots ---------------------------------------------------------- */
.bm-dot {
  display: inline-block;
  width: var(--mu-space-6);
  height: var(--mu-space-6);
  border-radius: var(--mu-radius-full);
  background: var(--mu-fill-strong);
  flex: none;
}
.bm-dot.on { background: var(--mu-green); }
.bm-status-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--mu-space-2);
  padding: var(--mu-space-4) var(--mu-space-2);
}
.bm-status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mu-space-2);
  text-align: center;
}
.bm-status-label {
  font-size: var(--mu-size-footnote);
  color: var(--mu-text-secondary);
  letter-spacing: var(--mu-track-wide);
}
.bm-run { margin-top: var(--mu-space-3); }
.bm-run-value { color: var(--mu-text); font-weight: var(--mu-weight-semibold); }

/* ---- trend sheet --------------------------------------------------------- */
.bm-sheet { max-width: 760px; }
#chart { width: 100%; height: 320px; display: block; }
.bm-chart-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mu-space-3);
}
.bm-chart-stat { display: flex; flex-direction: column; gap: var(--mu-space-1); }
.bm-chart-stat .bm-v {
  font-size: var(--mu-size-headline);
  font-weight: var(--mu-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ---- phone --------------------------------------------------------------- */
@media (max-width: 734px) {
  .bm-grid, .bm-grid-summary, .bm-grid-towers {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mu-space-3);
  }
  .bm-grid .bm-grid-span { grid-column: 1 / -1; }
  .bm-stat { padding: var(--mu-space-4); }
  .bm-scrim { align-items: flex-end; padding: 0; }
  .bm-sheet {
    max-width: none;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: var(--mu-radius-xl) var(--mu-radius-xl) 0 0;
    padding-bottom: calc(var(--mu-space-6) + env(safe-area-inset-bottom));
  }
  #chart { height: 260px; }
  .bm-chart-stats { grid-template-columns: repeat(2, 1fr); }
  .bm-nav-status .mu-caption { max-width: 46vw; }

  /* Summary fills one phone screen: 3 tiles across, 4 towers, one status row,
     and the blocks stretch to use the whole display height. */
  .bm-main.bm-main-fit { padding-bottom: calc(var(--mu-space-4) + env(safe-area-inset-bottom)); }
  .bm-summary, .bm-grid.bm-fill {
    min-height: calc(100dvh - 48px - var(--mu-control-lg) - var(--mu-space-6) - var(--mu-space-4)
                     - var(--mu-space-2) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .bm-summary { display: flex; flex-direction: column; gap: var(--mu-space-3); }

  /* value pages: cards stretch to fill the screen height */
  .bm-grid.bm-fill { gap: var(--mu-space-2); align-items: stretch; }
  .bm-grid.bm-fill.bm-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .bm-fill .bm-stat { padding: var(--mu-space-2); gap: var(--mu-space-1); justify-content: center; min-height: 0; }
  .bm-fill .bm-stat-label { font-size: var(--mu-size-footnote); min-height: 0; align-items: center; }
  .bm-fill .bm-stat-value { font-size: var(--mu-size-large-title); margin-top: 0; }
  .bm-fill .bm-stat-text { font-size: var(--mu-size-title-2); margin-top: 0; }
  .bm-fill .bm-stat-badge { margin-top: 0; }
  .bm-fill.bm-cols-3 .bm-stat-label { font-size: var(--mu-size-caption); }
  .bm-fill.bm-cols-3 .bm-stat-value { font-size: var(--mu-size-title-1); }
  .bm-fill.bm-cols-3 .bm-stat-text { font-size: var(--mu-size-title-3); }
  .bm-fill .grid-section, .bm-fill .mu-section-header { padding-block: var(--mu-space-1); }
  .bm-summary .bm-grid-summary { grid-template-columns: repeat(3, 1fr); gap: var(--mu-space-2); flex: 4; }
  .bm-summary > section { display: flex; flex-direction: column; flex: 2; }
  .bm-summary .bm-grid-towers  { grid-template-columns: repeat(4, 1fr); gap: var(--mu-space-2); flex: 1; }
  .bm-summary .bm-stat { padding: var(--mu-space-3) var(--mu-space-2); gap: var(--mu-space-1); justify-content: center; }
  .bm-summary .bm-stat-label { font-size: var(--mu-size-subhead); min-height: 0; }
  .bm-summary .bm-stat-value { font-size: var(--mu-size-large-title); margin-top: 0; }
  .bm-summary .mu-section-header { padding-bottom: var(--mu-space-1); }
  .bm-summary .bm-status-strip { flex: 1; align-content: center; padding: var(--mu-space-3) var(--mu-space-1); gap: var(--mu-space-1); }
  .bm-summary .bm-dot { width: var(--mu-space-8); height: var(--mu-space-8); }
  .bm-summary .bm-status-label { font-size: var(--mu-size-footnote); }
  .bm-summary .bm-run { margin-top: var(--mu-space-2); }
  .bm-summary .bm-run .mu-list-row { min-height: var(--mu-space-12); font-size: var(--mu-size-headline); }
  .bm-summary .bm-run-value { font-size: var(--mu-size-title-3); }
}