/* BioUI Theme Override — Prepare Well Daily
 * Maps Prepare Well's wellness design tokens to BioUI CSS variables.
 * Load after bioui-base.css.
 */

:root {
  /* Primary palette — wellness sage */
  --bio-primary: hsl(158, 35%, 42%);
  --bio-primary-hover: hsl(158, 35%, 36%);
  --bio-primary-fg: #ffffff;
  --bio-accent: hsl(174, 42%, 65%);
  --bio-accent-fg: #ffffff;

  /* Surface — matches Tailwind card/background */
  --bio-surface: #ffffff;
  --bio-surface-fg: hsl(160, 20%, 15%);
  --bio-surface-muted: hsl(45, 20%, 92%);
  --bio-surface-muted-fg: hsl(160, 10%, 45%);
  --bio-border: hsl(45, 15%, 88%);

  /* Radius — matches app's 0.75rem */
  --bio-radius: 12px;
  --bio-radius-lg: 16px;

  /* Typography — Plus Jakarta Sans (body) */
  --bio-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Mood colors — from Prepare Well palette */
  --bio-mood-great: hsl(158, 50%, 45%);
  --bio-mood-good: hsl(174, 45%, 55%);
  --bio-mood-okay: hsl(42, 70%, 55%);
  --bio-mood-bitoff: hsl(25, 60%, 60%);
  --bio-mood-notbest: hsl(12, 50%, 55%);

  /* Shadows — match Prepare Well shadow tokens */
  --bio-shadow-sm: 0 4px 20px -4px hsl(160 20% 15% / 0.08);
  --bio-shadow-md: 0 8px 30px -8px hsl(160 20% 15% / 0.12);
  --bio-shadow-lg: 0 0 40px hsl(158 35% 42% / 0.15);
}

/* Dark mode */
.dark {
  --bio-primary: hsl(158, 40%, 55%);
  --bio-primary-hover: hsl(158, 40%, 48%);
  --bio-primary-fg: hsl(160, 20%, 8%);
  --bio-accent: hsl(174, 35%, 45%);
  --bio-surface: hsl(160, 18%, 12%);
  --bio-surface-fg: hsl(45, 20%, 95%);
  --bio-surface-muted: hsl(160, 15%, 18%);
  --bio-surface-muted-fg: hsl(45, 15%, 60%);
  --bio-border: hsl(160, 15%, 20%);
}

/* ===== Widget-specific structural overrides ===== */

/* Task list — circular checkboxes to match Prepare Well style */
.bio-task-list .bio-task-item input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--bio-surface-muted-fg);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--bio-transition);
  position: relative;
}

.bio-task-list .bio-task-item input[type="checkbox"]:checked {
  background: var(--bio-primary);
  border-color: var(--bio-primary);
}

.bio-task-list .bio-task-item input[type="checkbox"]:checked::after {
  content: '✓';
  color: var(--bio-primary-fg);
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Task completed state — sage-light background */
.bio-task-list .bio-task-done {
  background: hsl(158, 30%, 92%);
}

.bio-task-list .bio-task-done .bio-task-text {
  text-decoration: line-through;
  color: var(--bio-surface-muted-fg);
}

/* Task item card styling */
.bio-task-list .bio-task-item {
  padding: 16px;
  border-radius: var(--bio-radius-lg);
  background: var(--bio-surface);
  box-shadow: var(--bio-shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all var(--bio-transition);
}

.bio-task-list .bio-task-item:hover {
  box-shadow: var(--bio-shadow-md);
}

/* Category header */
.bio-task-list .bio-task-category {
  margin-bottom: 16px;
}

.bio-task-list .bio-task-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 500;
  text-transform: capitalize;
  font-size: var(--bio-font-size-base);
}

/* Checkin — card styling */
.bio-checkin-modal {
  border-radius: var(--bio-radius-lg);
  box-shadow: var(--bio-shadow-md);
}

.bio-checkin-scale-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--bio-border);
  background: var(--bio-surface);
  cursor: pointer;
  font-weight: var(--bio-font-weight-medium);
  transition: all var(--bio-transition);
}

.bio-checkin-scale-btn:hover {
  border-color: var(--bio-primary);
  color: var(--bio-primary);
}

/* Checkin summary */
.bio-checkin-summary {
  background: var(--bio-surface);
  border-radius: var(--bio-radius-lg);
  padding: var(--bio-spacing-lg);
  box-shadow: var(--bio-shadow-sm);
}

.bio-checkin-summary h3 {
  font-family: 'Libre Baskerville', serif;
}

/* Mood — card wrapper and larger emoji */
.bio-mood {
  background: var(--bio-surface);
  border-radius: var(--bio-radius-lg);
  padding: var(--bio-spacing-lg);
  box-shadow: var(--bio-shadow-sm);
}

.bio-mood-btn {
  padding: 12px 16px;
}

.bio-mood-emoji {
  font-size: 2rem;
}

/* Progress ring — text font */
.bio-progress-ring text {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Health metrics — card wrapper */
.bio-hm {
  background: var(--bio-surface);
  border-radius: var(--bio-radius-lg);
  padding: var(--bio-spacing-lg);
  box-shadow: var(--bio-shadow-sm);
}

.bio-hm-empty {
  border-color: var(--bio-border);
  padding: var(--bio-spacing-xl) var(--bio-spacing-lg);
}

.bio-hm-empty-title {
  font-family: 'Libre Baskerville', serif;
}

.bio-hm-metric {
  background: var(--bio-surface-muted);
  border-radius: var(--bio-radius);
  box-shadow: var(--bio-shadow-sm);
}

.bio-hm-metric:hover {
  box-shadow: var(--bio-shadow-md);
  transition: box-shadow var(--bio-transition);
}

.bio-hm-device-name {
  font-family: 'Libre Baskerville', serif;
}

.bio-hm-settings {
  border-radius: var(--bio-radius);
}

/* Journal — card wrapper and Prepare Well styling */
.bio-journal {
  background: var(--bio-surface);
  border-radius: var(--bio-radius-lg);
  padding: var(--bio-spacing-lg);
  box-shadow: var(--bio-shadow-sm);
}

.bio-journal-prompt {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
}

.bio-journal-textarea {
  border-radius: var(--bio-radius);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.bio-journal-textarea:focus {
  box-shadow: 0 0 0 3px hsl(158 35% 42% / 0.15);
}

.bio-journal-history-entry {
  border-radius: var(--bio-radius);
  box-shadow: var(--bio-shadow-sm);
}

/* Trend card — card wrapper */
.bio-trend-card {
  background: var(--bio-surface);
  border-radius: var(--bio-radius-lg);
  padding: var(--bio-spacing-lg);
  box-shadow: var(--bio-shadow-sm);
}

.bio-trend-card:hover {
  box-shadow: var(--bio-shadow-md);
  transition: box-shadow var(--bio-transition);
}

.bio-trend-card-label {
  font-family: 'Libre Baskerville', serif;
}

/* Trend chart — card wrapper */
.bio-trend-chart {
  background: var(--bio-surface);
  border-radius: var(--bio-radius-lg);
  padding: var(--bio-spacing-lg);
  box-shadow: var(--bio-shadow-sm);
}

.bio-trend-chart-label {
  font-family: 'Libre Baskerville', serif;
}

.bio-trend-chart svg text {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}