/* Shared styles for metrics widgets and primitives. */

.statsStrip {
  display: grid;
  /* auto-fit lets the strip step down 6 → 5 → 4 → 3 → 2 → 1 as the
     dashboard panel narrows (driven by window size OR sidebar drag),
     instead of jumping straight from 6 cols to 2 at a single viewport
     breakpoint. 160px floor keeps the tile values legible at the bottom
     of the step ladder. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--divider);
  background: transparent;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 76px;
  padding: 10px 14px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: var(--hover-bg-subtle);
  overflow: hidden;
  /* Each tile is its own inline-size container so `.tileValue`'s
     clamp() can reference the tile's own width (`cqi`) instead of the
     viewport — values scale down before they clip. */
  container-type: inline-size;
}

.tileLabel {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}

.tileValue {
  font-family: var(--font-mono);
  /* Scales 16px → 22px with tile width. At the 160px auto-fit floor a
     22px value clipped its trailing character ($53.11, +387 -…);
     clamp() lets it shrink instead. The hard ellipsis below catches
     anything still too long for the floor (e.g. very large totals). */
  font-size: clamp(16px, 9cqi, 22px);
  color: var(--text-primary);
  line-height: 1;
  margin-top: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tileValueAccent {
  color: var(--accent-primary);
}

.tileSub {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tileChart {
  margin-top: 6px;
  display: flex;
  align-items: flex-end;
}

.tileRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pulseGlow {
  animation: pulse-glow 2.4s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-primary-rgb), 0);
  }
  50% {
    box-shadow: 0 0 14px 0 rgba(var(--accent-primary-rgb), 0.35);
  }
}

/* Analytics section ------------------------------------------------------- */

.analyticsSection {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 28px;
  border-top: 1px solid var(--divider);
}

.analyticsHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-faint);
  font-family: inherit;
}

.analyticsHeader:hover {
  color: var(--text-muted);
}

.analyticsTitle {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

.analyticsGrid {
  display: grid;
  /* Same auto-fit treatment as `.statsStrip` — the analytics panels
     pack 4 → 3 → 2 → 1 as the dashboard panel narrows. 220px keeps
     room for a row label plus its inline progress bar / value pair. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

@media (max-width: 1100px) {
  /* `.statsStrip` and `.analyticsGrid` no longer need a viewport-based
     breakpoint — `auto-fit minmax(...)` above handles their column
     stepping. The rules left here apply to layouts that aren't part of
     the responsive grid (`.hideNarrow` opts elements out at small
     viewports; `.leaderRow` collapses extra columns). */
  .hideNarrow {
    display: none;
  }
  .leaderRow {
    grid-template-columns: 1fr auto;
  }
}

.panel {
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--hover-bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
}

.panelTitle {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}

.panelFull {
  grid-column: 1 / -1;
  min-height: auto;
}

/* Empty / placeholder variants ------------------------------------------- */

.empty {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

.shimmer {
  background: var(--hover-bg);
  animation: shimmerPulse 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
  min-height: 16px;
}

@keyframes shimmerPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Primitive shared styles ------------------------------------------------- */

.svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.svgFixed {
  display: block;
  overflow: visible;
  flex-shrink: 0;
}

.axis {
  stroke: var(--divider);
  stroke-dasharray: 2 3;
  stroke-width: 1;
}

.mark {
  stroke: var(--accent-primary);
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.markFill {
  fill: rgba(var(--accent-primary-rgb), 0.12);
}

.bar {
  fill: var(--accent-primary);
}

.barMuted {
  fill: var(--metric-negative);
}

.barTrack {
  fill: var(--divider);
}

.ringTrack {
  stroke: var(--divider);
  fill: none;
}

.ringArc {
  stroke: var(--accent-primary);
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 500ms ease-out;
}

.ringCenter {
  font-family: var(--font-mono);
  fill: var(--text-primary);
  font-size: 13px;
  text-anchor: middle;
  dominant-baseline: central;
}

.heatCell {
  stroke: transparent;
}

.dotOk {
  fill: var(--accent-primary);
}

.dotFail {
  fill: var(--metric-negative);
}

.dotPending {
  fill: var(--text-dim);
}

/* Micro-stats chip on WorkspaceCard -------------------------------------- */

.microChip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.microAdd {
  color: var(--accent-primary);
}

.microDel {
  color: var(--metric-negative-soft);
}

.microSep {
  color: var(--text-dim);
}

.microPart {
  display: inline-flex;
  gap: 6px;
}

/* Vertical row stack used in the analytics panels (leaderboard, slash). */
.rowList {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Inline icon prefix for repo names — aligns the Lucide SVG with the
   text baseline so the name sits flush with the icon. */
.repoIcon {
  margin-right: 6px;
  vertical-align: -2px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Inline progress bars (slash command share, histogram bars) ------------- */

.progressTrack {
  position: relative;
  background: var(--divider);
  border-radius: 2px;
  overflow: hidden;
}

.progressTrackThin {
  height: 8px;
}

.progressTrackThick {
  height: 10px;
}

.progressFill {
  height: 100%;
  background: var(--accent-primary);
  border-radius: 2px;
  opacity: 0.85;
  transition: width 400ms ease-out;
  /* Width is supplied as an inline `--p` custom property by the caller. */
  width: var(--p, 0%);
}

.progressFillFaint {
  opacity: 0.15;
}

/* Tile value color variants ---------------------------------------------- */

.tileValuePositive {
  color: var(--accent-primary);
}

.tileValueNegative {
  color: var(--metric-negative-soft);
}

/* Row components --------------------------------------------------------- */

.leaderRow,
.slashRow,
.histRow {
  display: grid;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}

.leaderRow {
  grid-template-columns: 1fr auto auto auto auto;
}

.slashRow {
  grid-template-columns: 110px 1fr auto;
}

.histRow {
  grid-template-columns: 48px 1fr 44px;
}

.rowLabel {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rowMuted {
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.rowValue {
  color: var(--accent-primary);
  font-family: var(--font-mono);
  text-align: right;
}
