/* ============================================================
   LIFE.CSS — Life dashboard styles (Calendar, Schedule, Reminders)
   ============================================================ */

/* ─── Calendar Toolbar ──────────────────────────────────── */
.cal-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.view-toggle {
  display: flex;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.view-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  cursor: pointer;
  transition: all var(--transition);
}

.view-btn.active {
  background: var(--accent);
  color: #fff;
}

.view-btn:hover:not(.active) {
  color: var(--text-primary);
}

/* ─── Week Navigation ───────────────────────────────────── */
.week-nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  justify-content: center;
}

.week-nav-btn {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition);
}

.week-nav-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

.week-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.week-label-sub {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 400;
  margin-left: var(--space-sm);
}

.cal-toolbar-right {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

/* ─── Day Detail Panel ─────────────────────────────────── */
.cal-day-detail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.cal-day-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
}

.cal-day-detail-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.cal-day-detail-close {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
}

.cal-day-detail-close:hover {
  color: var(--text-primary);
}

.cal-day-detail-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cal-day-detail-empty {
  font-size: 13px;
  color: var(--text-faint);
  padding: 8px 0;
}

.cal-day-detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border-left: 3px solid var(--accent);
  cursor: pointer;
  transition: background var(--transition);
}

.cal-day-detail-item:hover {
  background: var(--bg-hover);
}

.cal-day-detail-item-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 60px;
}

.cal-day-detail-item-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}

.cal-day-detail-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-day-detail-actions {
  padding: 8px 16px 12px;
  border-top: 1px solid var(--border);
}

/* ─── Calendar Grid ─────────────────────────────────────── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.cal-day {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cal-day-today {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.cal-day-past {
  opacity: 0.6;
}

.cal-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
}

.cal-day-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.cal-day-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.cal-day-today .cal-day-date {
  color: var(--accent);
}

.cal-day-body {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
  max-height: 220px;
}

.cal-item {
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  border-left: 3px solid var(--accent);
  background: var(--bg-elevated);
  cursor: default;
}

.cal-item.disabled {
  opacity: 0.4;
  border-left-style: dashed;
}

.cal-item-time {
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

.cal-item-label {
  color: var(--text-primary);
  font-weight: 500;
}

/* Type-specific left border colors */
.cal-item.type-briefing     { border-left-color: var(--info); }
.cal-item.type-training     { border-left-color: var(--success); }
.cal-item.type-reminder     { border-left-color: var(--warning); }
.cal-item.type-nudge        { border-left-color: #c084fc; }
.cal-item.type-notification { border-left-color: var(--text-muted); }
.cal-item.type-one-off      { border-left-color: var(--warning); }
.cal-item.type-task         { border-left-color: var(--info); }

.cal-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-faint);
}

/* ─── Schedule Manager ──────────────────────────────────── */
/* ─── Timezone Bar ───────────────────────────────────────── */
.timezone-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
  font-size: 12px;
}
.tz-label {
  color: var(--text-faint);
  font-weight: 500;
  white-space: nowrap;
}
.tz-select {
  flex: 1;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
}

.schedule-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-md);
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  transition: opacity var(--transition);
}

.schedule-row.disabled {
  opacity: 0.45;
  border-left-style: dashed;
}

.schedule-row.type-briefing     { border-left-color: var(--info); }
.schedule-row.type-training     { border-left-color: var(--success); }
.schedule-row.type-reminder     { border-left-color: var(--warning); }
.schedule-row.type-nudge        { border-left-color: #c084fc; }
.schedule-row.type-notification { border-left-color: var(--text-muted); }

.schedule-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.schedule-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.schedule-toggle .toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--transition);
}

.schedule-toggle .toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: transform var(--transition), background var(--transition);
}

.schedule-toggle input:checked + .toggle-slider {
  background: var(--accent);
}

.schedule-toggle input:checked + .toggle-slider::after {
  transform: translateX(16px);
  background: #fff;
}

.schedule-info {
  flex: 1;
  min-width: 0;
}

.schedule-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.schedule-meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.schedule-time {
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  flex-shrink: 0;
  width: 58px;
}

.schedule-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.schedule-actions button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition);
}

.schedule-actions button:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.schedule-actions button.btn-delete:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* Day pills */
.day-pills {
  display: flex;
  gap: 2px;
}

.day-pill {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  line-height: 18px;
  background: var(--bg-primary);
  color: var(--text-faint);
  border: 1px solid var(--border);
  cursor: default;
}

.day-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Editable day pills (in forms) */
.day-pill-toggle {
  cursor: pointer;
  transition: all var(--transition);
}

.day-pill-toggle:hover {
  border-color: var(--accent);
}

/* Reminder offset */
.reminder-offset {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
}

.reminder-offset:hover {
  border-color: var(--accent);
}

/* Lock icon */
.lock-icon {
  font-size: 12px;
  color: var(--text-faint);
  flex-shrink: 0;
}

/* ─── Reminders List ────────────────────────────────────── */
.reminders-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
}

.reminder-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-md);
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--warning);
}

.reminder-row.status-sent {
  border-left-color: var(--success);
  opacity: 0.6;
}

.reminder-row.status-completed {
  border-left-color: var(--text-faint);
  opacity: 0.4;
}

.reminder-info {
  flex: 1;
  min-width: 0;
}

.reminder-message {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.reminder-time {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}

.reminder-status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.reminder-status.pending  { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
.reminder-status.sent     { background: rgba(74, 222, 128, 0.15); color: var(--success); }
.reminder-status.completed { background: var(--bg-primary); color: var(--text-faint); }

.reminder-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.reminder-actions button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition);
}

.reminder-actions button:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.reminder-actions button.btn-delete:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* ─── Add Forms ─────────────────────────────────────────── */
.add-form {
  padding: var(--space-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
  display: none;
}

.add-form.open {
  display: block;
}

.form-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-row label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  min-width: 80px;
}

.form-row input[type="text"],
.form-row input[type="time"],
.form-row input[type="date"],
.form-row input[type="datetime-local"],
.form-row textarea,
.form-row select {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  padding: 6px 10px;
  font-family: var(--font);
  flex: 1;
  min-width: 0;
  color-scheme: dark;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--accent);
}

.form-row textarea {
  resize: vertical;
  min-height: 40px;
}

.form-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  margin-top: var(--space-sm);
}

.form-hint {
  font-size: 11px;
  color: var(--text-faint);
  margin-left: 4px;
}

.sched-routine-toggle {
  flex: 0 0 auto !important;
  min-width: auto !important;
}

.sched-routine-row {
  flex-wrap: nowrap;
}

.sched-routine-row .form-label-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  min-width: 80px;
  flex-shrink: 0;
}

.sched-routine-row .form-hint {
  flex: 1;
  white-space: nowrap;
}

/* ─── Month Calendar Grid ──────────────────────────────── */
.month-grid-wrap {
  margin-bottom: var(--space-lg);
}

.month-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-bottom: 1px;
}

.month-grid-header span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 6px 0;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.month-cell {
  background: var(--bg-card);
  border: 1px solid var(--border);
  min-height: 90px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
}

.month-cell-blank {
  background: var(--bg-primary);
  opacity: 0.3;
  min-height: 90px;
}

.month-cell-today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.month-cell-past {
  opacity: 0.55;
}

.month-cell-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.month-cell-today .month-cell-date {
  color: var(--accent);
}

.month-cell-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow: hidden;
}

.month-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  line-height: 1.3;
  padding: 1px 3px;
  border-radius: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.month-item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent);
}

.month-item.type-briefing .month-item-dot     { background: var(--info); }
.month-item.type-training .month-item-dot     { background: var(--success); }
.month-item.type-reminder .month-item-dot     { background: var(--warning); }
.month-item.type-nudge .month-item-dot        { background: #c084fc; }
.month-item.type-notification .month-item-dot { background: var(--text-muted); }
.month-item.type-one-off .month-item-dot      { background: var(--warning); }
.month-item.type-task .month-item-dot         { background: var(--info); }

.month-item-label {
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.month-item-overflow {
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 500;
  padding: 1px 3px;
}

/* ═══════════════════════════════════════════════════════════
   OVERVIEW TAB
   ═══════════════════════════════════════════════════════════ */

/* ─── Greeting ──────────────────────────────────────────── */
.overview-greeting {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.ov-greeting-text {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.ov-greeting-date {
  font-size: 13px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* ─── Stat Cards ────────────────────────────────────────── */
.overview-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.ov-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 12px;
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.ov-stat:hover {
  border-color: var(--border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ov-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.ov-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-top: 4px;
}

/* ─── Day Planner (compact list) ───────────────────────────── */
.ov-routine {
  padding: var(--space-sm) var(--space-md);
}

.dp-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  cursor: pointer;
  transition: all var(--transition);
}

.dp-row:hover {
  background: var(--bg-elevated);
  transform: translateX(2px);
}

.dp-row.dp-past {
  opacity: 0.4;
}

.dp-row.dp-active {
  background: rgba(0, 200, 240, 0.1);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.dp-row-color {
  width: 4px;
  height: 28px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--accent);
}

.dp-row.type-briefing .dp-row-color     { background: var(--info); }
.dp-row.type-training .dp-row-color     { background: var(--success); }
.dp-row.type-reminder .dp-row-color     { background: var(--warning); }
.dp-row.type-nudge .dp-row-color        { background: #c084fc; }
.dp-row.type-notification .dp-row-color { background: var(--text-muted); }

.dp-row-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  width: 120px;
  flex-shrink: 0;
}

.dp-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-row-dur {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  background: var(--bg-primary);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Now marker in list */
.dp-now-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}

.dp-now-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--accent-glow);
  animation: pulse-now 2s infinite;
}

.dp-now-line {
  flex: 1;
  height: 1px;
  background: var(--accent);
  opacity: 0.4;
}

.dp-now-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  white-space: nowrap;
}

@keyframes pulse-now {
  0%, 100% { box-shadow: 0 0 4px var(--accent-glow); }
  50% { box-shadow: 0 0 12px var(--accent-glow); }
}

/* ─── Notification Center ──────────────────────────────────── */
.notif-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notif-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-hover);
}

.notif-count--active {
  color: var(--accent);
  background: rgba(0, 200, 240, 0.1);
}

.notif-timeline {
  padding: var(--space-sm) var(--space-md);
}

.notif-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  font-size: 13px;
  transition: all var(--transition);
}

.notif-row:hover {
  background: var(--bg-elevated);
}

.notif-row.notif-sent {
  opacity: 0.55;
}

.notif-row.notif-failed {
  opacity: 0.7;
  border-left: 2px solid var(--danger);
}

.notif-row.notif-upcoming {
  opacity: 1;
}

.notif-icon {
  font-size: 14px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.notif-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  width: 70px;
  flex-shrink: 0;
}

.notif-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.notif-offset {
  font-size: 10px;
  color: var(--text-faint);
  background: var(--bg-primary);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
}

.notif-source {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-faint);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.notif-status-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.notif-status-badge.sent {
  color: var(--success);
  background: rgba(130, 179, 102, 0.12);
}

.notif-status-badge.failed {
  color: var(--danger);
  background: rgba(231, 76, 60, 0.12);
}

.notif-more {
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  padding: 4px;
}

.notif-now-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
}

.notif-now-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--accent-glow);
  animation: pulse-now 2s infinite;
}

.notif-now-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  white-space: nowrap;
}

.notif-now-line {
  flex: 1;
  height: 1px;
  background: var(--accent);
  opacity: 0.4;
}

.notif-history {
  padding: 0 var(--space-md) var(--space-sm);
  border-top: 1px solid var(--border);
}

.notif-history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-sm);
}

/* ─── Daily Check-in Modal ─────────────────────────────────── */
.checkin-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 900;
}

.checkin-overlay.open {
  display: block;
}

.checkin-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  z-index: 910;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: none;
  flex-direction: column;
}

.checkin-modal.open {
  display: flex;
}

/* Wider modal when showing both morning + evening side by side */
.checkin-modal.checkin-dual {
  max-width: 960px;
}

.checkin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.checkin-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.checkin-modal-close {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}

.checkin-modal-close:hover {
  color: var(--text-primary);
}

.checkin-modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

/* Side-by-side layout for dual mode */
.checkin-modal.checkin-dual .checkin-modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

/* Actions span full width in dual mode */
.checkin-modal.checkin-dual .checkin-actions {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .checkin-modal.checkin-dual {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    top: 0;
    left: 0;
    transform: none;
  }
  .checkin-modal.checkin-dual .checkin-modal-body {
    grid-template-columns: 1fr;
  }
}

.checkin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.checkin-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.checkin-field.checkin-full {
  grid-column: 1 / -1;
}

.checkin-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkin-slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  height: 6px;
}

.checkin-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.checkin-field input[type="text"] {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  padding: 8px 10px;
  font-family: var(--font);
  box-sizing: border-box;
}

.checkin-field input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

.checkin-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.checkin-status {
  font-size: 12px;
  color: var(--text-faint);
}

/* ─── Planner Modal ────────────────────────────────────── */
.planner-modal .planner-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.planner-modal #planner-delete {
  color: var(--danger);
  border-color: var(--danger);
}

.planner-modal #planner-delete:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* ─── Goals Snapshot ────────────────────────────────────── */
.ov-goals-list {
  padding: var(--space-sm) var(--space-md);
}

.goal-group {
  margin-bottom: var(--space-md);
}

.goal-group:last-child {
  margin-bottom: 0;
}

.goal-area {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.goal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.goal-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-bar {
  width: 80px;
  height: 6px;
  background: var(--bg-primary);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.goal-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s;
}

.goal-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Habits Grid ───────────────────────────────────────── */
.ov-habits-grid {
  padding: var(--space-sm) var(--space-md);
}

.habit-header {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 6px;
}

.habit-name-col {
  flex: 1;
  min-width: 0;
}

.habit-day-col {
  width: 32px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-faint);
}

.habit-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}

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

.habit-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habit-dot-wrap {
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.habit-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  box-sizing: border-box;
}

.habit-dot.done {
  border-color: transparent;
}

.habit-dot.today {
  border-color: var(--accent);
}

.habit-dot-wrap {
  cursor: pointer;
}

.habit-dot-wrap:hover .habit-dot {
  border-color: var(--accent);
  transform: scale(1.2);
  transition: all 0.15s;
}

.habit-dot-wrap:hover .habit-dot.done {
  opacity: 0.7;
}

/* ─── Goals & Habits Management ────────────────────────── */

.goals-manage-list,
.habits-manage-list {
  padding: var(--space-sm) 0;
}

/* Goals management rows */
.gm-group {
  margin-bottom: var(--space-md);
}

.gm-group:last-child {
  margin-bottom: 0;
}

.gm-area {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 0 var(--space-md);
  margin-bottom: 6px;
}

.gm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--space-md);
  border-bottom: 1px solid var(--border);
}

.gm-row:last-child {
  border-bottom: none;
}

.gm-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gm-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-scope {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-hover);
  color: var(--text-faint);
  flex-shrink: 0;
}

.gm-bar {
  width: 80px;
  height: 6px;
  background: var(--bg-primary);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.gm-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s;
}

.gm-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.gm-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.gm-actions button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition);
}

.gm-actions button:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.gm-actions button.btn-delete:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* Habits management rows */
.hm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--space-md);
  border-bottom: 1px solid var(--border);
}

.hm-row:last-child {
  border-bottom: none;
}

.hm-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hm-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hm-dots {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.hm-row .btn-delete {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}

.hm-row .btn-delete:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* Color input styling */
.form-row input[type="color"] {
  width: 40px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  cursor: pointer;
  flex: 0 0 40px;
}

/* ─── Empty State ───────────────────────────────────────── */
.list-empty {
  padding: var(--space-lg);
  text-align: center;
  font-size: 13px;
  color: var(--text-faint);
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .overview-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .cal-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .month-cell {
    min-height: 70px;
  }

  .month-item-label {
    display: none;
  }

  .month-item-dot {
    width: 8px;
    height: 8px;
  }

  .month-cell-items {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px;
  }

  .month-item {
    padding: 0;
  }
}

@media (max-width: 600px) {
  .overview-stats {
    grid-template-columns: 1fr 1fr;
  }

  .ov-greeting-text {
    font-size: 18px;
  }

  .goal-bar {
    width: 50px;
  }

  .habit-day-col,
  .habit-dot-wrap {
    width: 26px;
  }

  .habit-dot {
    width: 12px;
    height: 12px;
  }

  .cal-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .week-nav {
    justify-content: space-between;
  }

  /* Check-in modal: single-column sliders, no horizontal scroll */
  .checkin-grid {
    grid-template-columns: 1fr;
  }

  .checkin-modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    top: 0;
    left: 0;
    transform: none;
  }

  .checkin-modal-body {
    padding: 12px;
  }

  .stoic-section {
    padding: var(--space-sm);
  }

  .stoic-goals-inputs {
    gap: 6px;
  }

  .stoic-goal-row {
    gap: 6px;
  }

  .cal-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cal-day {
    min-height: 120px;
  }

  .month-cell {
    min-height: 55px;
    padding: 2px 3px;
  }

  .month-cell-date {
    font-size: 11px;
  }

  .schedule-row {
    flex-wrap: wrap;
  }

  .schedule-time {
    width: auto;
  }

  .day-pills {
    order: 10;
    width: 100%;
    margin-top: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════
   CALENDAR EVENTS
   ═══════════════════════════════════════════════════════════ */

/* Clickable day cells */
.cal-day[data-action="cal-day-click"],
.month-cell[data-action="cal-day-click"] {
  cursor: pointer;
}

.cal-day[data-action="cal-day-click"]:hover {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 8px;
}

.month-cell[data-action="cal-day-click"]:hover {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Event items on week grid */
.cal-event-item {
  background: color-mix(in srgb, var(--evt-color) 15%, transparent) !important;
  border-left: 3px solid var(--evt-color) !important;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
}

.cal-event-item:hover {
  background: color-mix(in srgb, var(--evt-color) 25%, transparent) !important;
}

.cal-event-item .cal-item-label {
  color: var(--text-primary);
  font-weight: 500;
}

/* Event items on month grid */
.month-event-item {
  cursor: pointer;
}

.month-event-item:hover .month-item-label {
  text-decoration: underline;
}

/* Event modal */
.cal-event-modal {
  max-width: 420px;
}

.cal-event-modal .form-row {
  flex-direction: column;
  align-items: stretch;
}

.cal-event-modal .form-row label {
  min-width: unset;
  margin-bottom: 2px;
}

.cal-event-modal .cal-event-time-row {
  flex-direction: row !important;
  align-items: center;
}

.cal-event-modal.open {
  display: flex;
  flex-direction: column;
}

.cal-event-time-row {
  flex-direction: row !important;
  align-items: center;
}

.cal-event-allday-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.cal-event-allday-label input {
  margin: 0;
}

.cal-event-time-pair {
  display: flex;
  gap: 12px;
}

.cal-event-time-pair > div {
  flex: 1;
}

.cal-event-time-pair label {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 2px;
}

.cal-event-time-pair input {
  width: 100%;
}

/* Color swatches */
.cal-event-colors {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cal-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color .15s, transform .15s;
}

.cal-color-swatch:hover {
  transform: scale(1.15);
}

.cal-color-swatch.active {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-primary);
}

/* Modal overlay for cal-event */
#cal-event-overlay {
  display: none;
}

@media (max-width: 600px) {
  /* Event modal goes full-screen on mobile with visible margin */
  .cal-event-modal {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    max-height: calc(100% - 24px);
    border-radius: var(--radius);
  }

  .cal-event-time-pair {
    flex-direction: column;
    gap: 8px;
  }

  /* Month grid: compact cells on mobile */
  .month-cell {
    min-height: 50px;
    padding: 3px 4px;
  }

  .month-cell-date {
    font-size: 11px;
  }

  .month-item {
    font-size: 9px;
  }

  .month-item-dot {
    width: 5px;
    height: 5px;
  }
}

/* ═══════════════════════════════════════════════════════════
   JOURNAL TAB
   ═══════════════════════════════════════════════════════════ */

/* ─── Category Grid ──────────────────────────────────────── */

.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 4px 0;
}

.journal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.journal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-color: var(--card-accent, var(--border-light));
}

.jc-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}

.jc-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.jc-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.jc-count {
  font-size: 12px;
  color: var(--text-muted);
}

.jc-preview {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}

/* Mood trend mini-bars */
.jc-mood-bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 32px;
  margin-top: 6px;
}

.jc-mood-bar {
  flex: 1;
  background: var(--border);
  border-radius: 2px;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.jc-mood-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 2px;
  transition: height .3s;
}

/* Add Category card */
.journal-card--add {
  border: 2px dashed var(--border);
  background: transparent;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: .6;
  transition: opacity .15s, transform .15s;
}

.journal-card--add:hover {
  opacity: 1;
  box-shadow: none;
}

.jc-add-icon {
  font-size: 28px;
  color: var(--text-muted);
}

.jc-add-label {
  font-size: 12px;
  color: var(--text-muted);
}

/* ─── Expanded Category View ─────────────────────────────── */

.journal-expanded {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.je-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.je-back {
  font-size: 13px;
  padding: 4px 10px;
}

.je-title {
  font-size: 18px;
  font-weight: 700;
}

.je-count {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: auto;
}

/* Compose form */
.je-compose {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.je-compose .input {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-primary);
  resize: vertical;
}

.je-compose .input:focus {
  border-color: var(--accent);
  outline: none;
}

.je-compose .btn {
  align-self: flex-end;
}

.je-compose-meta {
  display: flex;
  gap: 8px;
}

.je-tags-input {
  flex: 1;
}

.je-priority-select {
  width: 110px;
  flex-shrink: 0;
}

/* Notes list */
.je-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.je-note {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  position: relative;
  transition: border-color var(--transition);
}

.je-note:hover {
  border-color: var(--border-light);
}

.je-note--pinned {
  border-color: #d4a841;
  border-width: 2px;
}

.je-note-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.je-note-date {
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.je-note-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.je-note-content {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Tags */
.je-note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.je-tag {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Priority badges */
.je-priority {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 1px 7px;
  border-radius: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.je-priority--low {
  background: rgba(130, 179, 102, .15);
  color: #82b366;
}

.je-priority--medium {
  background: rgba(212, 168, 65, .15);
  color: #d4a841;
}

.je-priority--high {
  background: rgba(224, 120, 80, .15);
  color: #e07850;
}

.je-note--high {
  border-left: 3px solid #e07850;
}

.je-note--medium {
  border-left: 3px solid #d4a841;
}

/* Hover actions */
.je-note-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .15s;
}

.je-note:hover .je-note-actions {
  opacity: 1;
}

.je-action-btn {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
}

.je-action-btn:hover {
  background: var(--border);
}

.je-action-btn--del:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

/* Daily log entries */
.je-note--log {
  border-left: 3px solid #9673a6;
}

.je-log-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 6px 0;
}

.je-log-stat {
  font-size: 13px;
  color: var(--text-primary);
}

.je-log-highlight {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.je-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem;
  font-size: 13px;
}

/* ─── Overview & Journal Responsive ──────────────────────── */

@media (max-width: 600px) {
  .overview-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .ov-greeting-text {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .overview-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .journal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .journal-card {
    padding: 12px;
  }
  .jc-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
    border-radius: 8px;
  }
  .je-note-actions {
    opacity: 1;
  }
  .je-compose-meta {
    flex-direction: column;
  }
  .je-priority-select {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════
   FINANCES TAB
   ═══════════════════════════════════════════════════════════ */

.fin-stats-row {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.fin-stat {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.fin-stat:hover {
  border-color: var(--border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.fin-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.fin-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-top: 4px;
}

.fin-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.fin-month-nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.fin-month-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 140px;
  text-align: center;
}

.fin-add-form {
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  border-radius: var(--radius);
}

.fin-form-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  align-items: center;
}

.fin-form-row:last-child {
  margin-bottom: 0;
}

/* Style all form inputs inside finance form */
.fin-form-row input,
.fin-form-row select {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  padding: 8px 10px;
  font-family: var(--font);
  flex: 1;
  min-width: 0;
}

.fin-form-row input:focus,
.fin-form-row select:focus {
  outline: none;
  border-color: var(--accent);
}

.fin-form-row input::placeholder {
  color: var(--text-faint);
}

.fin-amount-input {
  max-width: 120px;
}

.fin-method-select {
  max-width: 110px;
}

.fin-log {
  display: flex;
  flex-direction: column;
  margin: 0 calc(-1 * var(--space-md));
}

.fin-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md) 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  margin-top: var(--space-sm);
}

.fin-day-header:first-child {
  margin-top: 0;
}

.fin-day-total {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.fin-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px var(--space-md);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--fin-cat-color, var(--border));
  transition: background var(--transition);
}

.fin-row:hover {
  background: var(--bg-hover);
}

.fin-row:last-child {
  border-bottom: none;
}

.fin-row-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  color: #fff;
}

.fin-row-body {
  flex: 1;
  min-width: 0;
}

.fin-row-desc {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fin-row-meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}

.fin-method-tag {
  display: inline-block;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--bg-hover);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  margin-left: 4px;
}

.fin-row-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.fin-row-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}

.fin-row:hover .fin-row-actions {
  opacity: 1;
}

.fin-empty {
  padding: var(--space-lg);
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

/* Finance Summary */
.fin-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0;
}

.fin-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.fin-bar-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  min-width: 120px;
  flex-shrink: 0;
}

.fin-bar-track {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  position: relative;
  overflow: visible;
}

.fin-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.fin-bar-budget {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--text-primary);
  border-radius: 1px;
}

.fin-bar-row.over .fin-bar-amount { color: var(--danger); }
.fin-bar-row.warning .fin-bar-amount { color: var(--warning); }

.fin-bar-amount {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 100px;
  text-align: right;
  flex-shrink: 0;
}

.fin-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.fin-avg {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  padding: var(--space-md);
  font-variant-numeric: tabular-nums;
}

.fin-avg-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-faint);
}

.fin-top-list {
  display: flex;
  flex-direction: column;
}

.fin-top-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px var(--space-md);
  font-size: 13px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.fin-top-item:last-child { border-bottom: none; }

.fin-top-amount {
  margin-left: auto;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.fin-budget-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
}

.fin-budget-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 6px var(--space-md);
}

.fin-budget-info {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  min-width: 120px;
}

.fin-budget-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.fin-budget-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.fin-budget-nums {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  min-width: 120px;
  text-align: right;
}

/* Finance: Sub-nav (4-button toggle) */
.fin-subnav {
  gap: 2px;
}

.fin-subnav .view-btn {
  font-size: 11px;
  padding: 5px 10px;
}

/* Finance: Income/positive amounts */
.fin-positive { color: #4ade80 !important; }
.fin-negative { color: var(--danger) !important; }
.fin-income-row { border-left-color: #4ade80 !important; }

/* Finance: Filter bar */
.fin-filter-bar {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.fin-type-toggle {
  display: flex;
  gap: 2px;
}

.fin-type-switch {
  display: flex;
  gap: 2px;
}

.fin-cat-filter {
  max-width: 160px;
}

.fin-search-input {
  max-width: 160px;
}

/* Finance: Recurring badge */
.fin-recurring-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-left: 4px;
  vertical-align: middle;
}

.fin-recurring-check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}

.fin-recurring-check input { width: 14px; height: 14px; }

.fin-recurring-opts {
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm);
}

/* Finance: Budget cards */
.fin-budget-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  transition: border-color var(--transition);
}

.fin-budget-card--ok { border-left: 3px solid var(--success); }
.fin-budget-card--warning { border-left: 3px solid var(--warning); }
.fin-budget-card--over { border-left: 3px solid var(--danger); }

.fin-budget-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.fin-budget-card-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

.fin-budget-card-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.fin-budget-progress { margin-bottom: var(--space-sm); }

.fin-budget-card-nums {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.fin-budget-pct {
  font-weight: 700;
}

.fin-budget-card--over .fin-budget-pct { color: var(--danger); }
.fin-budget-card--warning .fin-budget-pct { color: var(--warning); }
.fin-budget-card--ok .fin-budget-pct { color: var(--success); }

.fin-budget-projected {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* Finance: Budget compact (dashboard) */
.fin-budget-compact {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px var(--space-md);
  border-bottom: 1px solid var(--border);
}

.fin-budget-compact:last-child { border-bottom: none; }

.fin-budget-compact-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.fin-budget-compact-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.fin-budget-compact-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 32px;
  text-align: right;
}

.fin-budget-compact.fin-budget-card--over .fin-budget-compact-pct { color: var(--danger); }
.fin-budget-compact.fin-budget-card--warning .fin-budget-compact-pct { color: var(--warning); }

/* Finance: Upcoming recurring */
.fin-upcoming-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px var(--space-md);
  border-bottom: 1px solid var(--border);
}

.fin-upcoming-item:last-child { border-bottom: none; }

.fin-upcoming-item .fin-row-actions {
  opacity: 1;
  gap: var(--space-xs);
}

/* Finance: Charts */
.fin-trend-chart {
  padding: var(--space-sm) 0;
}

.fin-chart-legend,
.fin-mom-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--text-faint);
  padding: var(--space-sm) 0;
}

.fin-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fin-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Finance: Donut chart */
.fin-donut-container {
  padding: var(--space-md) 0;
}

.fin-donut-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  padding: var(--space-md) 0;
}

.fin-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.fin-donut-legend-pct {
  font-weight: 600;
  color: var(--text-primary);
}

.fin-donut-legend-amt {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Finance: Recurring vs One-Time */
.fin-split-container { padding: var(--space-md); }

.fin-split-bar {
  display: flex;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.fin-split-seg {
  transition: width 0.4s ease;
}

.fin-split-legend {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}

.fin-split-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Finance: Month-over-Month */
.fin-mom-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0 var(--space-md) var(--space-md);
}

.fin-mom-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.fin-mom-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  min-width: 110px;
  flex-shrink: 0;
}

.fin-mom-track {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fin-mom-bar-cur,
.fin-mom-bar-prev {
  height: 6px;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.fin-mom-delta {
  font-size: 11px;
  font-weight: 700;
  min-width: 40px;
  text-align: right;
  color: var(--text-faint);
}

.fin-delta-up { color: var(--danger); }
.fin-delta-down { color: var(--success); }

/* ═══════════════════════════════════════════════════════════
   OVERVIEW CHECK-IN CARD
   ═══════════════════════════════════════════════════════════ */

.ov-checkin { margin-bottom: var(--space-lg); }

.ov-checkin-empty {
  text-align: center;
  padding: var(--space-lg);
  color: var(--text-faint);
}

.ov-checkin-empty p { margin-bottom: var(--space-md); font-size: 13px; }

.ov-ci-meters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  padding: var(--space-md) 0;
}

.ov-ci-meter { display: flex; flex-direction: column; gap: 4px; }
.ov-ci-label { font-size: 11px; color: var(--text-faint); }

.ov-ci-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.ov-ci-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.ov-ci-val { font-size: 14px; font-weight: 700; color: var(--text-primary); }

.ov-ci-rating {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-left: auto;
  margin-right: var(--space-sm);
}

.ov-ci-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--border);
}

.ov-ci-field {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 13px;
  color: var(--text-muted);
}

.ov-ci-field-icon { flex-shrink: 0; }

.ov-ci-journal {
  font-size: 13px;
  color: var(--text-muted);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

.ov-checkin--partial {
  border-left: 3px solid var(--accent);
}

.ov-checkin-cta {
  padding-top: var(--space-md);
  text-align: center;
}

/* Step badges (Morning / Complete) */
.dl-step-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 10px;
}

.dl-step-morning {
  background: rgba(212, 168, 65, 0.15);
  color: #d4a841;
}

.dl-step-complete {
  background: rgba(130, 179, 102, 0.15);
  color: #82b366;
}

/* Expand arrow on log entries */
.dl-expand-arrow {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-faint);
  flex-shrink: 0;
}

/* Section labels inside expanded logs and forms */
.dl-section {
  margin-bottom: var(--space-md);
}

.dl-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: var(--space-sm);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════
   STOIC FORM SYSTEM
   ═══════════════════════════════════════════════════════════ */

.stoic-form {
  margin-bottom: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-lg);
}

.stoic-card {
  border-radius: 12px;
}

.stoic-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 0 var(--space-md) 0;
}

.stoic-section {
  padding: var(--space-md);
  border-radius: 10px;
  margin-bottom: var(--space-sm);
}

.stoic-section:last-of-type {
  margin-bottom: 0;
}

.stoic-morning {
  background: rgba(212, 168, 65, 0.04);
  border: 1px solid rgba(212, 168, 65, 0.15);
}

.stoic-evening {
  background: rgba(124, 106, 247, 0.04);
  border: 1px solid rgba(124, 106, 247, 0.15);
}

.stoic-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.stoic-section-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.stoic-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.stoic-section-sub {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
  font-style: italic;
}

.stoic-quote {
  font-size: 12px;
  font-style: italic;
  color: var(--text-faint);
  padding: 4px var(--space-md);
  margin-bottom: var(--space-sm);
  border-left: 2px solid var(--border);
  line-height: 1.4;
}

.stoic-meters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.stoic-meter label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.stoic-meter--full {
  margin-bottom: var(--space-md);
}

.stoic-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stoic-slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  height: 6px;
}

.stoic-slider-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.stoic-field {
  margin-bottom: var(--space-md);
}

.stoic-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.4;
}

.stoic-input {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 10px 14px;
  font-family: var(--font);
  box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.stoic-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 106, 247, 0.1);
}

.stoic-input::placeholder {
  color: var(--text-faint);
  font-style: italic;
}

.stoic-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.6;
}

.stoic-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

/* Override checkin-field inputs inside stoic sections */
.stoic-section .checkin-field input[type="text"],
.stoic-section .checkin-field textarea {
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.stoic-section .checkin-field input[type="text"]:focus,
.stoic-section .checkin-field textarea:focus {
  box-shadow: 0 0 0 3px rgba(124, 106, 247, 0.1);
}

/* Overview card field labels */
.ov-ci-field-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  min-width: 70px;
  flex-shrink: 0;
}

.ov-ci-field-value {
  font-size: 13px;
  color: var(--text-primary);
}

.ov-ci-fields--evening {
  border-top-style: dashed;
}

/* Goals inputs (morning form) */
.stoic-goals-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stoic-goal-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stoic-goal-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(124, 106, 247, 0.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stoic-goal-row .stoic-input {
  flex: 1;
}

/* Goal review (evening) */
.stoic-goal-review {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: rgba(192, 132, 252, 0.05);
  border: 1px solid rgba(192, 132, 252, 0.12);
  border-radius: 10px;
  border-left: 3px solid rgba(192, 132, 252, 0.4);
}

.stoic-goal-review-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #c084fc;
  margin-bottom: var(--space-sm);
}

.stoic-goal-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--transition);
}

.stoic-goal-check:hover {
  background: rgba(192, 132, 252, 0.06);
}

.stoic-goal-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(192, 132, 252, 0.4);
  border-radius: 4px;
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

.stoic-goal-check input[type="checkbox"]:checked {
  background: #c084fc;
  border-color: #c084fc;
}

.stoic-goal-check input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.stoic-goal-check-text {
  font-size: 13px;
  color: var(--text-primary);
  transition: all 0.15s ease;
}

.stoic-goal-check input:checked + .stoic-goal-check-text {
  text-decoration: line-through;
  color: var(--text-faint);
}

/* Habit tracker in evening check-in */
.stoic-habit-review {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: rgba(0, 200, 240, 0.04);
  border: 1px solid rgba(0, 200, 240, 0.12);
  border-radius: 10px;
  border-left: 3px solid rgba(0, 200, 240, 0.4);
}

.stoic-habit-review-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.stoic-habit-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--transition);
}

.stoic-habit-check:hover {
  background: rgba(0, 200, 240, 0.06);
}

.stoic-habit-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 200, 240, 0.4);
  border-radius: 4px;
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

.stoic-habit-check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.stoic-habit-check input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.stoic-habit-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stoic-habit-check-text {
  font-size: 13px;
  color: var(--text-primary);
  transition: all 0.15s ease;
}

.stoic-habit-check input:checked + .stoic-habit-dot + .stoic-habit-check-text {
  color: var(--text-faint);
}

/* Overview goals display */
.ov-ci-goals {
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--border);
}

.ov-ci-goal {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-primary);
}

.ov-ci-goal--done .ov-ci-goal-text {
  text-decoration: line-through;
  color: var(--text-faint);
}

.ov-ci-goal-check {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.ov-ci-goal--done .ov-ci-goal-check {
  color: #82b366;
}

/* Overview card actions (edit/delete) */
.ov-ci-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.ov-ci-section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: var(--space-sm) 0 2px;
  border-top: 1px solid var(--border);
  margin-top: var(--space-xs);
}

.ov-ci-section-label--evening {
  color: #c084fc;
}

.ov-ci-day-rating {
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 0;
}

.ov-ci-day-rating strong {
  color: var(--accent);
}

.ov-ci-delete {
  color: #e07850;
}

.ov-ci-delete:hover {
  color: #e74c3c;
}

@media (max-width: 600px) {
  .stoic-meters { grid-template-columns: 1fr; }
  .stoic-section { padding: var(--space-md); }
  .stoic-form { padding: var(--space-md); }
}

/* ═══════════════════════════════════════════════════════════
   DAILY LOG (Journal expanded view)
   ═══════════════════════════════════════════════════════════ */

.dl-form { margin-bottom: var(--space-lg); }
.dl-form-date { margin-bottom: var(--space-md); }
.dl-form-date .input { max-width: 200px; }

.dl-slider-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.dl-slider-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: block;
}

.dl-text-fields { display: flex; flex-direction: column; gap: var(--space-sm); }

.dl-text-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: block;
}

.dl-text-row { margin-bottom: var(--space-sm); }
.dl-text-row .input { width: 100%; }

.dl-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.je-note--log {
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.je-note--log:hover { border-color: var(--accent); }

.dl-note-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 4px;
}

.dl-day-rating {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(124, 106, 247, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
}

.dl-one-word {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  font-style: italic;
}

.dl-preview {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 4px;
}

.dl-expanded { background: var(--bg-hover); }

.dl-details {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.dl-field { margin-bottom: var(--space-md); }

.dl-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 4px;
  display: block;
}

.dl-field-value {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}

.dl-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
  .ov-ci-meters { grid-template-columns: repeat(2, 1fr); }
  .dl-slider-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   INSIGHTS TAB
   ═══════════════════════════════════════════════════════════ */

.ins-trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  padding: var(--space-md) var(--space-sm);
}

.ins-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.ins-bar-stack {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px;
}

.ins-bar-mood {
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  min-height: 0;
  transition: height 0.3s ease;
}

.ins-bar-energy {
  background: var(--success);
  border-radius: 0 0 2px 2px;
  min-height: 0;
  transition: height 0.3s ease;
}

.ins-bar-label {
  font-size: 9px;
  color: var(--text-faint);
  margin-top: 4px;
}

.ins-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-faint);
}

.ins-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 8px;
}

.ins-streak-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 8px var(--space-md);
  border-bottom: 1px solid var(--border);
}

.ins-streak-row:last-child { border-bottom: none; }

.ins-streak-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ins-streak-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.ins-streak-badges {
  display: flex;
  gap: 6px;
}

.ins-streak-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-hover);
  color: var(--text-faint);
}

.ins-streak-badge.active {
  background: rgba(74, 222, 128, 0.15);
  color: var(--success);
}

.ins-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  padding: var(--space-md);
}

.ins-metric {
  text-align: center;
}

.ins-metric-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.ins-metric-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-top: 4px;
}

.ins-highlights {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) 0;
}

.ins-highlight {
  padding: 8px var(--space-md);
  font-size: 13px;
  color: var(--text-muted);
  border-left: 2px solid var(--border);
}

.ins-hl-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  margin-right: 4px;
}

.ins-hl-icon {
  margin-right: 2px;
}

/* Trend arrows (reuse from command) */
.trend-up { color: var(--success); font-size: 14px; font-weight: 700; }
.trend-down { color: var(--danger); font-size: 14px; font-weight: 700; }
.trend-flat { color: var(--text-faint); font-size: 14px; }

/* ═══════════════════════════════════════════════════════════
   JOURNAL ENHANCEMENTS
   ═══════════════════════════════════════════════════════════ */

.je-search-bar {
  margin-bottom: var(--space-md);
}

.je-search-bar .input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px var(--space-md);
  font-size: 13px;
  color: var(--text-primary);
  transition: border-color var(--transition);
}

.je-search-bar .input:focus {
  border-color: var(--accent);
  outline: none;
}

.je-search-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.je-search-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}

.je-cat-tag {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}

.je-bullet {
  display: block;
  padding-left: 12px;
  position: relative;
}

.je-bullet::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-faint);
}

.je-note-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.je-note-content a:hover {
  color: var(--text-primary);
}

/* ─── Finance Responsive ──────────────────────────────────── */
@media (max-width: 600px) {
  .fin-stats-row { flex-wrap: wrap; }
  .fin-stat { flex: 1 1 45%; }
  .fin-controls { flex-direction: column; gap: var(--space-sm); align-items: stretch; }
  .fin-subnav { justify-content: center; }
  .fin-subnav .view-btn { font-size: 10px; padding: 4px 8px; }
  .fin-form-row { flex-wrap: wrap; }
  .fin-amount-input { max-width: none; }
  .fin-method-select { max-width: none; }
  .fin-bottom-row { grid-template-columns: 1fr; }
  .fin-bar-label { min-width: 80px; font-size: 11px; }
  .fin-bar-amount { min-width: 70px; font-size: 11px; }
  .fin-row-actions { opacity: 1; }
  .fin-filter-bar { flex-direction: column; }
  .fin-cat-filter { max-width: none; }
  .fin-search-input { max-width: none; }
  .fin-mom-label { min-width: 80px; font-size: 11px; }
  .fin-donut-legend { gap: var(--space-xs) var(--space-md); }
  .fin-upcoming-item { flex-wrap: wrap; }
  .fin-upcoming-item .fin-row-actions { width: 100%; justify-content: flex-end; }
  .ins-metrics { grid-template-columns: repeat(2, 1fr); }
}