/* Minor overrides on top of Tailwind CDN. */

:root {
  --snowpros-blue: #0083CA;
  --state-go: #ef4444;
  --state-watch: #f59e0b;
  --state-clear: #22c55e;
}

.snowpros-accent { color: var(--snowpros-blue); }
.snowpros-bg { background: var(--snowpros-blue); }

.state-go { background: var(--state-go); color: #fff; }
.state-watch { background: var(--state-watch); color: #111; }
.state-clear { background: var(--state-clear); color: #fff; }

/* Heatmap grid: each row is a CSS Grid so buckets stretch to fill the
   container. 24 buckets × 3 hours = 72h horizon. Minimum cell width
   18px — below that we horizontally scroll instead of crushing the
   cells. */
.hm-row,
.hm-header-row {
  display: grid;
  grid-template-columns: 140px repeat(24, minmax(18px, 1fr));
  gap: 1px;
  align-items: center;
  margin: 1px 0;
}

.hm-cell {
  height: 22px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}
.hm-cell.go { background: var(--state-go); }
.hm-cell.watch { background: var(--state-watch); }
.hm-cell.clear { background: var(--state-clear); }

.hm-row-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 8px;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}