/* ==========================================
   CSS 定義 - 可愛插畫風格待辦清單
   ========================================== */

/* 變數宣告 */
:root {
  --bg-app: #FAF6EE;         /* 極淺奶油黃背景 */
  --bg-card: #FFFFFF;        /* 卡片純白 */
  --text-main: #3E322D;      /* 手繪深褐主色 */
  --text-muted: #8E827C;     /* 輔助灰褐色 */
  
  /* 優先級配色 (馬卡龍粉彩) */
  --priority-high: #FF8A8A;
  --priority-high-bg: #FFEBEB;
  --priority-medium: #FFD384;
  --priority-medium-bg: #FFFDF0;
  --priority-low: #A8DF8E;
  --priority-low-bg: #F3FBF0;
  
  --completed-bg: #F1EFEA;
  --completed-border: #A8A09B;
  
  /* 裝飾配色 */
  --accent-pink: #FFD2E5;
  --accent-blue: #C5E9F8;
  --tape-color: rgba(254, 237, 187, 0.7); /* 紙膠帶顏色 */
}

/* 全域重設 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Fredoka', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-app);
  color: var(--text-main);
  line-height: 1.5;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

/* 主容器：手機優先設計，最大寬度 600px */
.app-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ==========================================
   HEADER 樣式與統計貼紙
   ========================================== */
.app-header {
  position: relative;
  text-align: center;
  margin-top: 10px;
}

/* 插畫圖片容器 */
.header-image-container {
  width: 100%;
  height: auto;
  max-height: 280px; /* 限制最大高度，避免過高 */
  overflow: hidden;
  border: 3.5px solid var(--text-main);
  border-radius: 30px 15px 35px 20px / 20px 30px 15px 25px; /* 手繪感圓角 */
  box-shadow: 6px 6px 0px var(--text-main);
  background-color: var(--bg-app); /* 與網頁背景色融合 */
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-img {
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain; /* 完整呈現圖檔，不裁切 */
}

/* 聖誕老公公與麋鹿貼紙 */
.header-sticker {
  position: absolute;
  width: 75px;
  height: 75px;
  border: 3px solid var(--text-main);
  border-radius: 50% 45% 52% 48% / 48% 52% 45% 50%; /* 不規則手繪圓 */
  box-shadow: 3px 3px 0px var(--text-main);
  background-color: #FFF;
  z-index: 10;
  object-fit: cover;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.header-sticker:hover {
  transform: scale(1.2) rotate(15deg) !important;
  cursor: pointer;
}

.sticker-santa {
  left: -15px;
  top: 70px;
  transform: rotate(-12deg);
}

.sticker-reindeer {
  right: -15px;
  top: 70px;
  transform: rotate(12deg);
}

@media (max-width: 480px) {
  .header-sticker {
    width: 58px;
    height: 58px;
    border-width: 2.5px;
  }
  .sticker-santa {
    left: -10px;
    top: 45px;
  }
  .sticker-reindeer {
    right: -10px;
    top: 45px;
  }
}

/* 主標題 */
.app-title {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.app-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: var(--accent-pink);
  z-index: -1;
  border-radius: 4px;
}

/* 統計數據貼紙 - 模擬便籤紙膠帶風格 */
.stats-sticker {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #FFFEE4; /* 鵝黃色便籤 */
  border: 3px solid var(--text-main);
  padding: 12px 16px;
  margin: 0 10px 10px 10px;
  border-radius: 12px 20px 10px 15px / 10px 12px 18px 10px;
  box-shadow: 4px 4px 0px var(--text-main);
  transform: rotate(-1.5deg); /* 傾斜更可愛 */
  transition: transform 0.2s ease;
}

.stats-sticker:hover {
  transform: rotate(0.5deg) scale(1.02);
}

/* 便籤紙膠帶裝飾 */
.stats-sticker::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 30%;
  width: 80px;
  height: 22px;
  background-color: var(--tape-color);
  box-shadow: 2px 2px 2px rgba(0,0,0,0.05);
  transform: rotate(-3deg);
  border-left: 2px dashed rgba(0,0,0,0.1);
  border-right: 2px dashed rgba(0,0,0,0.1);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.stat-count {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
}

.stat-item.pending .stat-count {
  color: var(--text-main);
}

.stat-item.completed .stat-count {
  color: var(--priority-low);
}

.stat-divider {
  width: 3px;
  height: 35px;
  background-color: var(--text-main);
  border-radius: 2px;
  margin: 0 10px;
}

/* ==========================================
   卡片與表單樣式
   ========================================== */
.card {
  background-color: var(--bg-card);
  border: 3.5px solid var(--text-main);
  border-radius: 25px 18px 22px 15px / 15px 22px 18px 25px;
  padding: 20px;
  box-shadow: 6px 6px 0px var(--text-main);
  position: relative;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

/* 文字輸入框 */
.form-control {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 16px;
  border: 3px solid var(--text-main);
  border-radius: 12px 15px 10px 14px / 14px 10px 15px 12px;
  background-color: #FAF9F6;
  color: var(--text-main);
  outline: none;
  transition: all 0.2s ease;
}

.form-control:focus {
  background-color: #FFF;
  box-shadow: 0 0 0 3px var(--accent-blue);
}

/* 表單雙欄配置 */
.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.form-row .form-group {
  flex: 1;
}

/* 優先級按鈕選擇器 */
.priority-buttons {
  display: flex;
  gap: 8px;
}

.priority-btn {
  flex: 1;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px;
  border: 3px solid var(--text-main);
  border-radius: 10px 12px 8px 10px / 10px 8px 12px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #FFF;
  color: var(--text-main);
  transition: all 0.15s ease;
  box-shadow: 2px 2px 0px var(--text-main);
}

.priority-btn .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--text-main);
  display: inline-block;
}

/* 各自按鈕顏色 */
.priority-btn.btn-high .dot { background-color: var(--priority-high); }
.priority-btn.btn-medium .dot { background-color: var(--priority-medium); }
.priority-btn.btn-low .dot { background-color: var(--priority-low); }

/* 未選中時淡色 hover */
.priority-btn:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 0px var(--text-main);
}

/* 選中狀態 */
.priority-btn.active {
  transform: translateY(1px);
  box-shadow: 1px 1px 0px var(--text-main);
}
.priority-btn.btn-high.active { background-color: var(--priority-high-bg); }
.priority-btn.btn-medium.active { background-color: var(--priority-medium-bg); }
.priority-btn.btn-low.active { background-color: var(--priority-low-bg); }

/* 日期選擇器 */
.form-control-date {
  font-family: inherit;
  font-size: 1rem;
  padding: 10px;
  border: 3px solid var(--text-main);
  border-radius: 10px 12px 8px 10px / 10px 8px 12px 10px;
  background-color: #FAF9F6;
  color: var(--text-main);
  outline: none;
  cursor: pointer;
  width: 100%;
}

.form-control-date:focus {
  background-color: #FFF;
  box-shadow: 0 0 0 3px var(--accent-blue);
}

/* 送出召喚按鈕 */
.submit-btn {
  width: 100%;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  background-color: var(--accent-pink);
  border: 3.5px solid var(--text-main);
  padding: 12px;
  border-radius: 16px 12px 18px 15px / 15px 18px 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 4px 4px 0px var(--text-main);
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-top: 8px;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px var(--text-main);
  background-color: #FFAEC9;
}

.submit-btn:active {
  transform: translateY(3px);
  box-shadow: 1px 1px 0px var(--text-main);
}

.icon-plus {
  width: 20px;
  height: 20px;
}

/* ==========================================
   待辦事項清單樣式
   ========================================== */
.todo-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.list-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-title {
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}

.title-decor {
  font-size: 1.2rem;
}

.todo-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 待辦事項單項 */
.todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 3px solid var(--text-main);
  border-radius: 16px 10px 14px 12px / 12px 14px 10px 16px;
  box-shadow: 4px 4px 0px var(--text-main);
  background-color: #FFF;
  position: relative;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: pop-in 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 依優先級背景著色 (淡彩) */
.todo-item.priority-high {
  background-color: var(--priority-high-bg);
  border-left: 10px solid var(--priority-high);
}

.todo-item.priority-medium {
  background-color: var(--priority-medium-bg);
  border-left: 10px solid var(--priority-medium);
}

.todo-item.priority-low {
  background-color: var(--priority-low-bg);
  border-left: 10px solid var(--priority-low);
}

/* 動畫：彈出載入 */
@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 手繪感勾選框 (Checkbox) */
.todo-checkbox {
  position: relative;
  width: 24px;
  height: 24px;
  border: 3px solid var(--text-main);
  border-radius: 50% 45% 52% 48% / 48% 52% 45% 50%; /* 不規則圓形 */
  background-color: #FFF;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.todo-checkbox:hover {
  transform: scale(1.15) rotate(5deg);
}

.todo-checkbox svg {
  width: 14px;
  height: 14px;
  color: var(--text-main);
  stroke-width: 4;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5);
}

/* 勾選選中狀態 */
.todo-item.completed {
  background-color: var(--completed-bg) !important;
  border-color: var(--completed-border);
  border-left: 10px solid var(--completed-border);
  box-shadow: 2px 2px 0px var(--completed-border);
  transform: translateY(2px);
}

.todo-item.completed .todo-checkbox {
  border-color: var(--completed-border);
  background-color: var(--accent-blue);
}

.todo-item.completed .todo-checkbox svg {
  opacity: 1;
  transform: scale(1);
  color: var(--text-main);
}

/* 待辦事項內容 */
.todo-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; /* 防止溢出 */
}

.todo-text {
  font-size: 1rem;
  font-weight: 700;
  word-break: break-all;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.todo-item.completed .todo-text {
  color: var(--text-muted);
  text-decoration: line-through 2.5px var(--text-muted);
}

/* 截止日期貼紙 */
.todo-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  background-color: rgba(0, 0, 0, 0.04);
  padding: 2px 6px;
  border-radius: 6px;
  width: fit-content;
}

.todo-date-badge svg {
  width: 12px;
  height: 12px;
}

/* 逾期標示 */
.todo-date-badge.overdue {
  color: #E05A5A;
  background-color: var(--priority-high-bg);
  border: 1px dashed #E05A5A;
}

/* 刪除按鈕 */
.delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.delete-btn:hover {
  color: #E05A5A;
  background-color: var(--priority-high-bg);
  transform: scale(1.2) rotate(15deg);
}

.delete-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

/* 空白狀態樣式 */
.empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px dashed var(--text-muted);
  border-radius: 18px;
  text-align: center;
  color: var(--text-muted);
  gap: 8px;
  margin-top: 4px;
  animation: pop-in 0.3s ease;
}

.empty-emoji {
  font-size: 2.2rem;
  filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.05));
}

.empty-state p {
  font-size: 0.9rem;
  font-weight: 700;
}

/* 顯示/隱藏空狀態（JS控制） */
.todo-list:empty + .empty-state {
  display: flex;
}

/* ==========================================
   FOOTER 樣式
   ========================================== */
.app-footer {
  text-align: center;
  padding: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* RWD 微調 */
@media (max-width: 480px) {
  body {
    padding: 10px;
  }
  
  .app-container {
    gap: 16px;
  }
  
  .header-image-container {
    height: 120px;
  }
  
  .app-title {
    font-size: 1.5rem;
    margin-bottom: 12px;
  }
  
  .stats-sticker {
    padding: 10px;
  }
  
  .stat-count {
    font-size: 1.3rem;
  }
  
  .form-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .priority-buttons {
    width: 100%;
  }
}