/*
 * habit-detail.css — Habit detail view (full panel).
 *
 * Shown in place of the habits card grid when a card is clicked. The detail
 * spans the full grid width (grid-column: 1 / -1) as a surface card (same
 * treatment as the habit cards) with a sticky header (back + title + edit)
 * above a stack of sections. Inner blocks (stats, goals) use --bg so they
 * read as raised tiles on the card's --surface.
 *
 * Load after habits.css.
 */

/* ---- Detail container ---------------------------------------------------- */
/* Spans the full width of the .habits__list grid. A surface card so the
   --bg inner blocks (stats, goals, range pills) have contrast. */
.habit-detail {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  animation: habit-detail-in 150ms ease-out;
}

@keyframes habit-detail-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ---- Header (back + title + edit) --------------------------------------- */
/* Sticky so it stays put while the sections below scroll. Spans the full
   card width (the card itself has no horizontal padding). */
.habit-detail__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.habit-detail__back {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.habit-detail__back:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.habit-detail__back:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.habit-detail__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habit-detail__edit {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.habit-detail__edit:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.habit-detail__edit:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

/* ---- Sections ------------------------------------------------------------- */
/* Horizontal padding lives here (the card itself has none) so the sticky
   header can span the full card width. */
.habit-detail__section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.habit-detail__section:last-child {
  border-bottom: none;
}

/* ---- Schedule (read-only key/value rows) --------------------------------- */
.habit-detail__schedule {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.habit-detail__schedule-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.875rem;
}

.habit-detail__schedule-label {
  flex: 0 0 90px;
  color: var(--text-muted);
}

.habit-detail__schedule-value {
  flex: 1;
  min-width: 0;
  color: var(--text);
}

/* ---- Progress (chart + range/metric controls + stats) --------------------- */
.habit-detail__progress {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.habit-detail__progress-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Controls row: range pills (left) + metric select (right). */
.habit-detail__progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Date-range pill group (segmented control). */
.habit-detail__range {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.habit-detail__range-btn {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  padding: 6px 12px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
  transition: color var(--transition), background var(--transition), box-shadow var(--transition);
}

.habit-detail__range-btn:hover {
  color: var(--text);
}

.habit-detail__range-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.habit-detail__range-btn--active {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Metric selector (only shown when a habit has >1 number module). */
.habit-detail__metric {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.habit-detail__metric-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.habit-detail__metric-select {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
}

.habit-detail__metric-select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Chart container. The SVG fills the width; height is set by renderLineChart. */
.habit-detail__chart {
  width: 100%;
}

.habit-detail__chart svg {
  display: block;
}

/* Empty-state message for a habit with no number modules. */
.habit-detail__empty {
  padding: 24px 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Stats row: 4 equal blocks. */
.habit-detail__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.habit-detail__stat {
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.habit-detail__stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.habit-detail__stat-value {
  margin-top: 4px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Narrow screens: 2-up stats. */
@media (max-width: 480px) {
  .habit-detail__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Goals (one row per goal + add-goal button) -------------------------- */
.habit-detail__goals {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.habit-detail__goals-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.habit-detail__goals-empty-btn {
  padding: 8px 14px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.habit-detail__goals-empty-btn:hover {
  background: var(--accent-soft, rgba(59, 130, 246, 0.12));
}

.habit-detail__goal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative; /* anchor for the achieved confetti burst */
}

/* Top row: name + "current / target unit" + deadline + edit/delete. */
.habit-detail__goal-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.habit-detail__goal-name {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habit-detail__goal-text {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.habit-detail__goal-deadline {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  white-space: nowrap;
}

.habit-detail__goal-deadline--overdue {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-soft);
}

.habit-detail__goal-achieved {
  flex: 0 0 auto;
  font-size: 0.75rem;
  white-space: nowrap;
}

.habit-detail__goal-risk {
  flex: 0 0 auto;
  font-size: 0.75rem;
  white-space: nowrap;
}

.habit-detail__goal-pace {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--danger);
  white-space: nowrap;
}

/* Archive button (achieved goals) — same footprint as edit/delete. */
.habit-detail__goal-archive {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.habit-detail__goal-archive:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.habit-detail__goal-archive:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* "Archive completed" header row (name + button). */
.habit-detail__goals-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.habit-detail__goals-head-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* "Archive completed" button (small, subtle). */
.habit-detail__goals-archive {
  height: 26px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.habit-detail__goals-archive:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.habit-detail__goals-archive:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Archived goals section (history). */
.habit-detail__goals-archived {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--border);
}

.habit-detail__goals-archived-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Archived rows are dimmed — they're history, not live goals. */
.habit-detail__goal--archived {
  opacity: 0.65;
  border-style: dashed;
}

.habit-detail__goal-edit,
.habit-detail__goal-delete {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.habit-detail__goal-edit:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.habit-detail__goal-delete:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.habit-detail__goal-edit:focus-visible,
.habit-detail__goal-delete:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Progress bar (only when the goal has a numeric target). */
.habit-detail__goal-bar {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.habit-detail__goal-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  /* Grows from 0 to the inline width set by JS (no `to` keyframe, so the
     inline width is the animation's end value). */
  animation: goal-bar-fill 300ms ease-out;
}

@keyframes goal-bar-fill {
  from {
    width: 0;
  }
}

/* Goal "weather": a subtle always-on pacing signal on the progress bar —
   glows when on pace, dims when behind. */
.habit-detail__goal-bar--onpace {
  box-shadow: 0 0 7px 1px var(--accent);
}

.habit-detail__goal-bar--behind {
  opacity: 0.5;
}

/* Goals section header: "Goals" label + "Archive completed" action. */
.habit-detail__goals-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.habit-detail__goals-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.habit-detail__goals-archive {
  height: 26px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.habit-detail__goals-archive:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Per-goal archive button (on achieved goals). */
.habit-detail__goal-archive {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.habit-detail__goal-archive:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Archived goals: a compact, dimmed history list under the active goals. */
.habit-detail__goals-archived {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.habit-detail__goals-archived-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.habit-detail__goal--archived {
  opacity: 0.75;
}

.habit-detail__goal-archived-text {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.habit-detail__goal-restore {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.habit-detail__goal-restore:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

/* "+ Add goal" button (turns into an inline name input on click). */
.habit-detail__goal-add {
  align-self: flex-start;
  height: 32px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.habit-detail__goal-add:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.habit-detail__goal-add:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  .habit-detail,
  .habit-detail__goal-bar-fill {
    animation: none;
  }
  .habit-detail__back,
  .habit-detail__edit,
  .habit-detail__range-btn,
  .habit-detail__goal-edit,
  .habit-detail__goal-delete,
  .habit-detail__goal-add {
    transition: none;
  }
}