/* ============================================================ */
/* HABIT TRACKER & CALENDAR STYLES (BINARY YES/NO 1-0) */
/* ============================================================ */

/* Habit Check Button: Satisfying Click Experience (Optimized for Mobile Touch) */
.habit-check-btn {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  border-width: 2px;
  -webkit-tap-highlight-color: transparent;
}

.habit-check-btn:active {
  transform: scale(0.85);
}

.habit-check-btn.checked {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #34d399;
  box-shadow: 0 0 16px -2px rgba(16, 185, 129, 0.5);
  color: #ffffff;
}

.habit-check-btn.checked svg {
  animation: habitCheckPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.habit-check-btn.unchecked {
  background: rgb(var(--color-slate-800) / 0.7);
  border-color: rgb(var(--color-slate-600) / 0.5);
  color: transparent;
}

.habit-check-btn.unchecked:hover,
.habit-check-btn.unchecked:active {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  color: rgba(16, 185, 129, 0.4);
}

@keyframes habitCheckPop {
  0% { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Habit Card Styling */
.habit-card {
  transition: all 0.2s ease;
  border: 1px solid rgb(var(--color-slate-700) / 0.6);
  -webkit-tap-highlight-color: transparent;
}

.habit-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
}

.habit-card:active {
  transform: scale(0.99);
}

.habit-card.is-completed {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, rgb(var(--color-slate-900) / 0.6) 100%);
}

/* Circular SVG Progress Ring */
.progress-ring-circle {
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* Matrix Table: Sticky Left Column for Mobile Scrolling */
.habit-matrix-table th, 
.habit-matrix-table td {
  padding: 0.65rem 0.5rem;
  text-align: center;
}

.habit-matrix-table th:first-child,
.habit-matrix-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 15;
  background-color: rgb(var(--color-slate-950));
  border-right: 1px solid rgb(var(--color-slate-700));
  box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.15);
}

.matrix-cell-btn {
  width: 2.125rem;
  height: 2.125rem;
  min-width: 2.125rem;
  min-height: 2.125rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1.5px solid transparent;
  -webkit-tap-highlight-color: transparent;
}

.matrix-cell-btn:active {
  transform: scale(0.85);
}

.matrix-cell-btn.checked {
  background: #10b981;
  color: white;
  box-shadow: 0 0 10px -1px rgba(16, 185, 129, 0.5);
}

.matrix-cell-btn.unchecked {
  background: rgb(var(--color-slate-800) / 0.6);
  border-color: rgb(var(--color-slate-600) / 0.4);
  color: transparent;
}

.matrix-cell-btn.unchecked:hover,
.matrix-cell-btn.unchecked:active {
  border-color: #10b981;
  color: rgba(16, 185, 129, 0.5);
}

/* Calendar Heatmap Tiles (Compact for Mobile) */
.cal-day-cell {
  aspect-ratio: 1;
  min-height: 3.25rem;
  transition: all 0.15s ease;
  cursor: pointer;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 640px) {
  .cal-day-cell {
    min-height: 2.5rem;
    border-radius: 10px;
    padding: 0.2rem !important;
  }
}

.cal-day-cell:hover {
  transform: translateY(-1px);
  z-index: 5;
}

.cal-day-cell:active {
  transform: scale(0.95);
}

.cal-day-cell.is-today {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 1.5px #6366f1, 0 2px 8px -1px rgba(99, 102, 241, 0.4);
}

.cal-day-cell.is-selected {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 2px #38bdf8, 0 4px 12px -2px rgba(56, 189, 248, 0.5);
  background-color: rgba(56, 189, 248, 0.12) !important;
}

/* Streak Flame Animation */
.flame-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(239, 68, 68, 0.15) 100%);
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: #fb923c;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
}

.flame-icon {
  animation: flameFlicker 1.8s infinite alternate ease-in-out;
}

@keyframes flameFlicker {
  0% { transform: scale(1) rotate(-3deg); filter: brightness(1); }
  50% { transform: scale(1.15) rotate(4deg); filter: brightness(1.2); }
  100% { transform: scale(1) rotate(-2deg); filter: brightness(1.05); }
}