/* Coach App — Design System
 * Dark Mode by default. Gedämpfte Erdtöne als Statusfarben.
 * Bereichsspezifische Akzentfarben (Oura-Logik).
 * Stand: 2026-05-14.
 */

:root {
  /* Hintergrund */
  --bg-app: #0F0F12;
  --bg-card: #1A1A20;
  --bg-card-hover: #22222B;
  --border-subtle: #2A2A33;

  /* Text */
  --text-primary: #F5F5F0;
  --text-secondary: #A8A8A0;
  --text-tertiary: #6E6E68;
  --text-disabled: #4A4A45;

  /* Status (gedämpft) */
  --status-good: #7DAA6E;
  --status-mid: #D9A852;
  --status-bad: #C46B5E;
  --status-empty: #5C5C5C;

  /* Bereichs-Akzente */
  --accent-sleep: #6B7FB0;
  --accent-mental: #8B7CB6;
  --accent-habits: #8AAA8A;
  --accent-water: #6FB0C9;
  --accent-supplements: #A88565;
  --accent-stool: #7A7A7A;
  --accent-energy: #D49560;
  --accent-work: #6A6FA0;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Radius */
  --radius-card: 20px;
  --radius-button: 12px;
  --radius-chip: 999px;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Newsreader", "Tiempos Text", Georgia, serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  /* iOS safe area */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) 96px;
}

.header {
  margin-bottom: var(--space-xl);
}

.greeting {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.date {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-secondary);
}

.section-label {
  font-size: 13px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--space-xl) 0 var(--space-md);
  font-weight: 500;
}

/* ============================================================
   MOOD CHECK
   ============================================================ */
.mood-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}

.mood-title {
  font-family: var(--font-serif);
  font-size: 18px;
  margin-bottom: var(--space-md);
}

.mood-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
}

.mood-option {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-button);
  padding: var(--space-md) var(--space-sm);
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
  transition: all 150ms ease-out;
}

.mood-option .mood-symbol {
  font-size: 24px;
  display: block;
  margin-bottom: 4px;
  line-height: 1;
}

.mood-option:active,
.mood-option.selected {
  background: var(--accent-mental);
  border-color: var(--accent-mental);
  color: var(--text-primary);
  transform: scale(0.98);
}

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

.scale-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.scale-label {
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
  min-width: 80px;
}

.scale-buttons {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}

.scale-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.scale-btn.selected {
  background: var(--accent-mental);
  border-color: var(--accent-mental);
  color: var(--text-primary);
}

/* ============================================================
   HABITS (PINNED)
   ============================================================ */
.habit-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-card);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-sm);
}

.habit-checkbox {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1.5px solid var(--border-subtle);
  background: transparent;
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.habit-checkbox.done {
  background: var(--accent-habits);
  border-color: var(--accent-habits);
}

.habit-checkbox.done::after {
  content: '';
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--bg-app);
  border-bottom: 2px solid var(--bg-app);
  transform: rotate(-45deg) translateY(-2px);
}

.habit-name {
  flex: 1;
  font-size: 16px;
}

.habit-streak {
  display: flex;
  gap: 3px;
}

.streak-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-empty);
}

.streak-dot.done {
  background: var(--accent-habits);
}

.streak-dot.future {
  background: transparent;
  border: 1px solid var(--status-empty);
}

.habits-more {
  color: var(--text-tertiary);
  font-size: 13px;
  margin-top: var(--space-sm);
  text-align: center;
}

/* ============================================================
   TRACKER KACHELN
   ============================================================ */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.tile {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  position: relative;
  transition: transform 100ms ease-out;
  cursor: pointer;
  user-select: none;
}

.tile:active { transform: scale(0.98); }

.tile-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.tile-label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.tile.tile-sleep .tile-label::before { background: var(--accent-sleep); }
.tile.tile-water .tile-label::before { background: var(--accent-water); }
.tile.tile-supplements .tile-label::before { background: var(--accent-supplements); }
.tile.tile-stool .tile-label::before { background: var(--accent-stool); }

.tile-value {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
}

.tile-value.empty {
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 400;
}

.tile-secondary {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.tile-streak {
  display: flex;
  gap: 4px;
  margin-top: var(--space-md);
}

/* ============================================================
   WEEKLY HEATMAP
   ============================================================ */
.weekly-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  margin-top: var(--space-md);
}

.weekly-title {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

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

.weekly-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.weekly-day-label {
  font-size: 11px;
  color: var(--text-tertiary);
}

.weekly-day-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--status-empty);
  opacity: 0.4;
}

.weekly-day-dot.has-data { opacity: 1; }
.weekly-day-dot.mood-good { background: var(--accent-mental); opacity: 1; }
.weekly-day-dot.mood-ok { background: var(--accent-mental); opacity: 0.7; }
.weekly-day-dot.mood-mid { background: var(--accent-mental); opacity: 0.5; }
.weekly-day-dot.mood-flat { background: var(--accent-mental); opacity: 0.3; }
.weekly-day-dot.mood-cloudy { background: var(--accent-mental); opacity: 0.2; }

/* ============================================================
   STATUS BANNER (Auth-Warnung)
   ============================================================ */
.banner {
  background: var(--bg-card);
  border: 1px solid var(--status-mid);
  border-radius: var(--radius-button);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: 13px;
  color: var(--text-secondary);
}

.banner strong { color: var(--text-primary); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  margin-top: var(--space-xl);
  text-align: center;
  color: var(--text-tertiary);
  font-size: 11px;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.hidden { display: none !important; }