/* ==========================================================================
   modes.css - 五種時段模式樣式
   套用方式:body.mode-morning / .mode-school / .mode-afternoon / .mode-evening / .mode-night
   ========================================================================== */

/* === 平滑切換時段背景 === */
body {
  transition: background 0.6s ease, color 0.6s ease;
}

/* === 早晨(暖橘) === */
body.mode-morning {
  background: linear-gradient(180deg, var(--mode-morning) 0%, var(--bg-primary) 60%);
}
body.mode-morning .mode-badge {
  background: #F5D7A8;
  color: #8C5A1A;
}

/* === 上學時段(淺藍,任務鎖定) === */
body.mode-school {
  background: linear-gradient(180deg, var(--mode-school) 0%, var(--bg-primary) 60%);
}
body.mode-school .mode-badge {
  background: #C8DDF4;
  color: #1A5093;
}
/* 學校時段:任務卡降低透明度,避免分心 */
body.mode-school .task-card {
  opacity: 0.7;
  pointer-events: none;
}

/* === 放學時光(嫩綠,主動打卡) === */
body.mode-afternoon {
  background: linear-gradient(180deg, var(--mode-afternoon) 0%, var(--bg-primary) 60%);
}
body.mode-afternoon .mode-badge {
  background: #C9E0A6;
  color: #436720;
}

/* === 回顧時間(紫色,⭐ 親子共同) === */
body.mode-evening {
  background: linear-gradient(180deg, var(--mode-evening) 0%, var(--bg-primary) 60%);
}
body.mode-evening .mode-badge {
  background: #D6D2F9;
  color: #3F3899;
}
/* 晚間回顧時段強調:加上微光效果 */
body.mode-evening .info-card {
  box-shadow: 0 4px 16px rgba(83, 74, 183, 0.18);
}

/* === 夜晚(深色,休息) === */
body.mode-night {
  background: var(--mode-night);
  color: #E8E6F2;
}
body.mode-night .page-header,
body.mode-night .card,
body.mode-night .placeholder-card,
body.mode-night .info-card,
body.mode-night .bottom-nav {
  background: #3A3A37;
  color: #E8E6F2;
  border-color: rgba(255, 255, 255, 0.08);
}
body.mode-night .mode-badge {
  background: #555351;
  color: #E8E6F2;
}
body.mode-night .hint,
body.mode-night .text-muted {
  color: #B5B3AB;
}
body.mode-night .nav-item {
  color: #B5B3AB;
}
body.mode-night .nav-item.active {
  color: #B6AEFF;
}