/* ═══════════════════════════════════════════════════════════════════
   Week Pulse + Month Heatmap — Premium Calendar Components
   ═══════════════════════════════════════════════════════════════════
   Design philosophy:
   - Today is the hero. It glows, it's elevated, it demands attention.
   - Logged days feel like progress (green fill bars, warm heatmap).
   - Missing days are invitations, not failures (warm dot, not red dash).
   - The total is a badge of accomplishment, not a footnote.
   - Built for construction sites: high contrast, large touch targets,
     glanceable at arm's length in direct sunlight.
   - All colors via tokens — works across dark, light, and outrun themes.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Micro-animations ── */
@keyframes today-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow), 0 0 8px var(--accent-glow); }
  50% { box-shadow: 0 0 0 4px var(--accent-glow), 0 0 14px var(--accent-glow); }
}

@keyframes today-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent-glow); }
  50% { box-shadow: 0 0 0 4px var(--accent-glow), 0 0 10px var(--accent-glow); }
}

/* ══════════════════════════════════
   MONTH HEATMAP
   ══════════════════════════════════ */
.month-grid {
  background: var(--surface);
  background-image: var(--gradient-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-2xl);
}

/* ── Navigation ── */
.month-grid__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.month-grid__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-lg);
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    transform 0.15s var(--ease-spring);
  flex-shrink: 0;
}

.month-grid__arrow:active {
  transform: scale(0.88);
}

.month-grid__label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text);
  text-transform: capitalize;
  text-align: center;
  letter-spacing: var(--tracking-snug);
}

/* ── Day name header row ── */
.month-grid__header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: var(--space-xs);
}

.month-grid__day-name {
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-faint);
  text-align: center;
  padding: var(--space-2xs) 0;
}

/* ── Grid body ── */
.month-grid__body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

/* ── Base cell ── */
.month-grid__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: var(--space-2xs) 0;
  border-radius: var(--radius-sm);
  min-height: 52px;
  position: relative;
  transition:
    background var(--transition-fast),
    transform 0.12s var(--ease-spring);
}

.month-grid__cell--empty {
  min-height: 44px;
}

/* ── Date number ── */
.month-grid__date {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--text-muted);
  transition: color var(--transition-fast), background var(--transition-fast);
}

/* ── Hours text ── */
.month-grid__hours {
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums;
  min-height: 14px;
  display: flex;
  align-items: center;
  line-height: 1;
  color: var(--text-faint);
  transition: color var(--transition-fast);
}

/* ── Today — ring + glow, instantly visible in sunlight ── */
.month-grid__cell--today {
  background: var(--accent-glow);
  animation: today-ring-pulse 3s ease-in-out infinite;
  z-index: 1;
}

.month-grid__cell--today .month-grid__date {
  background: var(--accent-hover);
  color: var(--text);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}

/* ── Logged hours — heatmap intensity ──
   Uses background opacity to create a GitHub-contribution-graph feel.
   Lighter fill for any hours, stronger accent for the cell state. */
.month-grid__cell--logged {
  background: var(--success-bg);
}

.month-grid__cell--logged .month-grid__hours {
  color: var(--success);
}

.month-grid__cell--logged .month-grid__date {
  color: var(--text);
}

/* Today + logged gets heatmap bg blended with accent glow */
.month-grid__cell--today.month-grid__cell--logged {
  background: var(--accent-glow);
}

/* ── Missing past days — warm invitation, NOT alarming ──
   Replaced dashed red outline with a gentle warm background tint.
   The dash becomes a soft dot via border-radius on the span. */
.month-grid__cell--missing {
  background: color-mix(in srgb, var(--warning) 6%, transparent);
}

.month-grid__cell--missing .month-grid__hours {
  color: var(--text-faint);
}

/* Style the dash span into a subtle empty ring */
.month-grid__cell--missing .month-grid__hours > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--text-faint);
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  color: transparent;
}

/* ── Weekend ── */
.month-grid__cell--weekend .month-grid__date {
  opacity: 0.35;
}

/* ── Future ── */
.month-grid__cell--future .month-grid__date {
  opacity: 0.25;
}

/* ── Tappable cells ── */
.month-grid__cell--tappable {
  cursor: pointer;
  transition:
    background var(--transition-fast),
    transform 0.12s var(--ease-spring);
}

.month-grid__cell--tappable:active {
  transform: scale(0.93);
}

/* ── Active (selected) day ── */
.month-grid__cell--active {
  background: var(--accent-muted);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 30%, transparent);
}

.month-grid__cell--active .month-grid__date {
  color: var(--text);
}

/* ── Today dot (shown when today has no entries) ── */
.month-grid__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--accent);
}

/* ── Month total — prominent summary badge ── */
.month-grid__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.month-grid__total strong {
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tight);
}

/* ── Dim today when another day is selected ── */
.month-grid--other-selected .month-grid__cell--today {
  background: transparent;
  animation: none;
  box-shadow: none;
}

/* ── Outrun theme: dark bg on amber accent reads better than white ── */
[data-theme="outrun"] .month-grid__cell--today .month-grid__date,
[data-theme="outrun"] .week-strip__day--today .week-strip__date,
[data-theme="outrun"] .week-strip__day--today.week-strip__day--missing .week-strip__date {
  color: var(--bg);
}

/* ── Day detail panel below grid ── */
.month-grid-detail {
  padding: var(--space-md) 0;
  animation: fade-up 0.15s var(--ease-out);
}

/* ── Hover states (desktop pointer devices only) ── */
@media (hover: hover) {
  .month-grid__arrow:hover {
    color: var(--text);
    background: var(--surface-2);
  }

  .month-grid__cell--tappable:hover {
    background: var(--surface-hover);
  }

  /* Preserve today and active backgrounds on hover */
  .month-grid__cell--today.month-grid__cell--tappable:hover {
    background: var(--accent-glow);
  }

  .month-grid__cell--active.month-grid__cell--tappable:hover {
    background: var(--accent-muted);
  }
}


/* ══════════════════════════════════
   WEEK PULSE
   ══════════════════════════════════ */
.week-strip {
  background: var(--surface);
  background-image: var(--gradient-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-md);
}

/* ── Navigation ── */
.week-strip__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.week-strip__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-lg);
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    transform 0.15s var(--ease-spring);
  flex-shrink: 0;
}

.week-strip__arrow:active {
  transform: scale(0.88);
}

.week-strip__label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text);
  text-transform: capitalize;
  text-align: center;
  letter-spacing: var(--tracking-snug);
}

/* ── 7-day row ── */
.week-strip__days {
  display: flex;
  justify-content: space-around;
}

/* ── Individual day column ── */
.week-strip__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  padding: var(--space-xs) 0;
  border-radius: var(--radius-md);
  min-width: 0;
  position: relative;
  transition:
    background var(--transition-fast),
    transform 0.12s var(--ease-spring);
}

/* ── Day name label ── */
.week-strip__name {
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-faint);
  line-height: 1;
  transition: color var(--transition-fast);
}

/* ── Date circle ── */
.week-strip__date {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-base),
    transform var(--transition-fast);
}

/* ── Status indicator area (hours text or progress) ── */
.week-strip__status {
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: color var(--transition-fast);
}

/* ── Tappable day link ── */
a.week-strip__day {
  text-decoration: none;
  cursor: pointer;
}

a.week-strip__day:active {
  transform: scale(0.94);
}

/* ── Active (selected) day in week strip ── */
a.week-strip__day.month-grid__cell--active {
  background: var(--accent-muted);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── TODAY — the hero ──
   Slightly elevated with glow pulse, accent background,
   date circle filled with accent color. Unmissable. */
.week-strip__day--today {
  background: var(--accent-glow);
  z-index: 1;
}

.week-strip__day--today .week-strip__date {
  background: var(--accent-hover);
  color: var(--text);
  animation: today-glow-pulse 3s ease-in-out infinite;
  transform: scale(1.08);
}

.week-strip__day--today .week-strip__name {
  color: var(--accent);
  font-weight: var(--font-bold);
}

/* ── Dim today when another day is selected ── */
.month-grid--other-selected .week-strip__day--today {
  background: transparent;
}

.month-grid--other-selected .week-strip__day--today .week-strip__date {
  animation: none;
  transform: scale(1);
  box-shadow: none;
}

/* ── Logged hours — green success, mini progress feel ──
   The hours text turns green as a "filled" indicator.
   A subtle bottom bar under the status area reinforces completion. */
.week-strip__day--logged .week-strip__status {
  color: var(--success);
}

.week-strip__day--logged .week-strip__date {
  color: var(--text);
}

/* Mini progress bar under logged days */
.week-strip__day--logged .week-strip__status::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--success);
  opacity: 0.5;
}

/* ── Missing days — warm invitation, not punishment ──
   Replace the dash with a soft empty ring that says "tap to fill".
   Warm background tint, not angry red. */
.week-strip__day--missing .week-strip__status {
  color: transparent;
}

/* Transform the dash span into an empty ring indicator */
.week-strip__day--missing .week-strip__status > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--text-faint);
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  color: transparent;
  opacity: 0.7;
  transition: border-color var(--transition-fast), opacity var(--transition-fast);
}

.week-strip__day--missing .week-strip__date {
  color: var(--text-muted);
  opacity: 0.7;
}

/* Today always wins over missing */
.week-strip__day--today.week-strip__day--missing .week-strip__date {
  color: var(--text);
  opacity: 1;
}

/* ── Weekend — quieted down ── */
.week-strip__day--weekend .week-strip__name,
.week-strip__day--weekend .week-strip__date {
  opacity: 0.35;
}

/* ── Future — barely there ── */
.week-strip__day--future .week-strip__name,
.week-strip__day--future .week-strip__date {
  opacity: 0.25;
}

/* ── Week total — prominent summary badge ── */
.week-strip__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.week-strip__total strong {
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tight);
}

/* ── Hover states (desktop pointer devices only) ── */
@media (hover: hover) {
  .week-strip__arrow:hover {
    color: var(--text);
    background: var(--surface-2);
  }

  a.week-strip__day:hover {
    background: var(--surface-hover);
  }

  /* Preserve today background on hover */
  .week-strip__day--today:hover {
    background: var(--accent-glow);
  }

  /* Missing ring brightens on hover — "go ahead, tap me" */
  a.week-strip__day.week-strip__day--missing:hover .week-strip__status > span {
    border-color: var(--accent);
    opacity: 1;
  }
}

/* ── Light theme: bright text on accent today circle ── */
[data-theme="light"] .month-grid__cell--today .month-grid__date,
[data-theme="light"] .week-strip__day--today .week-strip__date,
[data-theme="light"] .week-strip__day--today.week-strip__day--missing .week-strip__date {
  color: var(--bg);
}