/*
 * patterns.css — Patterns heatmap: a GitHub-style contribution graph of habits.
 *
 * Embedded at the top of the Habits panel (not a standalone view). Uses its
 * own BEM block (.patterns) so it doesn't collide with other styles.
 *
 * Structure:
 *   #habits-patterns (.habits__patterns)
 *     .patterns__toggle        — slim header bar, always visible
 *     .patterns__body          — hidden when container has [data-collapsed]
 *       .patterns__header      — month + week ruler
 *       .patterns__legend
 *       .patterns__grid        — one .patterns__row per habit
 *         .patterns__label + .patterns__cells
 */

.habits__patterns {
  margin: 0 0 16px;
}

/* Toggle bar (always visible). */
.patterns__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}

.patterns__toggle:hover {
  background: var(--surface-hover);
}

.patterns__toggle-chevron {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Body: the grid + legend. Hidden when collapsed. */
.patterns__body {
  padding-top: 10px;
}

.habits__patterns[data-collapsed] .patterns__body {
  display: none;
}

.patterns__header,
.patterns__row {
  display: flex;
  gap: 8px;
}

.patterns__row {
  align-items: center;
}

.patterns__header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  align-items: flex-start;
  padding-bottom: 6px;
}

/* The ruler sits in the header's flex:1 slot (matching each row's cells slot)
 * and stacks the month band above the week-number row. Both tiers are grids
 * using the same column template as the data rows, so they align exactly. */
.patterns__ruler {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.patterns__months {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.patterns__month {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  padding: 2px 4px;
  border-right: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.patterns__weeks {
  display: grid;
  min-width: 0;
  gap: 2px;
  margin-top: 1px;
}

/* Week number, left-aligned at the start of each week. */
.patterns__week {
  font-size: 0.6rem;
  color: var(--text-muted);
  text-align: left;
  padding: 0 3px;
  white-space: nowrap;
}

.patterns__label {
  flex: 0 0 132px;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.patterns__header .patterns__label {
  color: transparent; /* reserve the corner width without text */
}

.patterns__cells {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.patterns__grid {
  margin-top: 4px;
}

.patterns__row {
  margin-bottom: 2px;
}

.patterns__cell {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}

/* Faint separator before each week (Monday cells) — weekly rhythm without text. */
.patterns__cell--weekstart {
  border-left: 1px solid var(--border);
}

.patterns__cell--done {
  background: var(--accent);
}

.patterns__cell--partial {
  background: var(--accent);
  opacity: 0.45;
}

.patterns__cell--missed {
  background: var(--danger);
}

.patterns__cell--pending {
  background: var(--surface);
  border: 1px solid var(--border);
}

.patterns__cell--unscheduled {
  background: transparent;
  border: 1px solid var(--border);
}

.patterns__cell--future {
  background: transparent;
}

.patterns__cell:hover {
  outline: 1px solid var(--text);
  outline-offset: 1px;
}

.patterns__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 14px;
  padding-left: 140px; /* align under the cells, past the label column */
}

.patterns__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.patterns__legend .patterns__cell {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  aspect-ratio: auto;
  cursor: default;
}

.patterns__legend-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.patterns__empty {
  padding: 40px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}