/* 金時記 — 元件樣式（需先載入 tokens.css） */

/* ---------- 版面 ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 86px; flex: 0 0 86px;
  background: var(--card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 0; gap: 4px;
}
.sidebar__item {
  width: 70px; padding: 11px 0 9px; border-radius: var(--radius-card);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-2); font-size: 12px; letter-spacing: .04em;
  cursor: pointer; transition: background var(--transition);
}
.sidebar__item:hover { background: var(--bg); }
.sidebar__item--active { background: var(--red-bg); color: var(--red); font-weight: var(--w-medium); }
.sidebar__logo {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--card-sub); border: 1px solid var(--gold-border);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}

.main { flex: 1; min-width: 0; padding: 28px 32px 36px; display: flex; flex-direction: column; gap: 24px; }

/* ---------- 頁首 ---------- */
.header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.header__title { margin: 0; font-size: var(--text-title); font-weight: var(--w-bold); letter-spacing: .08em; line-height: 1; }
.header__rule { display: flex; align-items: center; gap: 7px; }
.header__rule::before { content: ""; width: 26px; height: 2px; background: var(--gold); border-radius: 2px; }
.header__en {
  font-family: var(--font-num); font-size: 10px; font-weight: 600;
  letter-spacing: .22em; color: var(--gold);
}
.header__tagline { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-2); letter-spacing: .03em; }

.btn-ghost {
  height: 34px; padding: 0 14px; border: 1px solid var(--border);
  border-radius: var(--radius-pill); background: var(--card); color: var(--text-2);
  font-family: inherit; font-size: 13px; cursor: pointer; transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-ghost:hover { border-color: var(--green); color: var(--green); }

/* ---------- 月曆 ---------- */
.calendar {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 18px 18px 14px; box-shadow: var(--shadow-card);
}
/* 月份標題列與換月按鈕（原始 handoff 檔沒有獨立 class，這裡照設計稿樣式補上） */
.calendar__monthhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calendar__monthlabel { font-family: var(--font-num); font-size: 15px; letter-spacing: .02em; }
.calendar__navbtn {
  width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--card); color: var(--text-2); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition);
}
.calendar__navbtn:hover { border-color: var(--red); color: var(--red); }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar__dow { text-align: center; font-size: 11px; color: var(--text-3); letter-spacing: .06em; padding-bottom: 4px; }
.calendar__day {
  height: 38px; border-radius: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--font-num); font-size: 14px; cursor: pointer; transition: background var(--transition);
}
.calendar__day:hover { background: var(--bg); }
.calendar__day--today { background: var(--red); color: var(--card); font-weight: var(--w-bold); }
.calendar__day--muted { color: var(--text-empty); font-weight: 300; cursor: default; }
.calendar__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--red); }

/* ---------- 繳款方章 ---------- */
.duebar {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 16px 18px 18px; box-shadow: var(--shadow-card);
}
.duebar__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.duebar__title { margin: 0; font-size: 14px; font-weight: var(--w-medium); letter-spacing: .06em; }
.duebar__hint { font-size: 11px; color: var(--text-3); letter-spacing: .04em; }
.duebar__list { display: flex; flex-wrap: wrap; gap: 9px; }

/* 一筆繳款 = 白底 + 左側色條 + 日期方章 */
.due {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 15px 0 8px;
  background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--rose); border-radius: var(--radius-chip);
  cursor: pointer; transition: all var(--transition);
}
.due:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.due__day {
  min-width: 28px; height: 28px; padding: 0 7px; border-radius: var(--radius-icon);
  background: var(--rose-bg); color: var(--rose);
  font-family: var(--font-num); font-size: 12px; font-weight: var(--w-bold);
  display: flex; align-items: center; justify-content: center;
}
.due__name { font-size: 13px; letter-spacing: .01em; }
.due__amount { font-family: var(--font-num); font-size: 13px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }

/* 法定支出（勞保／健保／勞退）改用無印紅 */
.due--gov { border-left-color: var(--red); }
.due--gov .due__day { background: var(--red-bg); color: var(--red); }

/* 已繳 */
.due--paid {
  height: 32px; padding: 0 13px; border: 1px solid var(--green-border); border-left-width: 1px;
  background: var(--green-bg); border-radius: var(--radius-pill); color: var(--text-2); font-size: 12px;
}
.due--paid .due__amount { color: var(--green); }

/* ---------- 本週日卡 ---------- */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 11px; align-items: stretch; }
.week__heading { display: flex; align-items: center; gap: 12px; }
.week__heading::before { content: ""; width: 18px; height: 2px; background: var(--gold); border-radius: 2px; }

.daycard {
  display: flex; flex-direction: column; min-height: 396px; overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  transition: all var(--transition);
}
.daycard:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.daycard__head {
  padding: 13px 13px 11px; border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.daycard__date { font-family: var(--font-num); font-size: var(--text-date); font-weight: 600; letter-spacing: .02em; }
.daycard--today .daycard__date { color: var(--red); font-weight: var(--w-bold); }
.daycard__dow { font-size: 11px; color: var(--text-3); letter-spacing: .06em; }
.daycard__badge {
  font-size: 10px; color: var(--card); background: var(--red);
  border-radius: var(--radius-pill); padding: 3px 9px; letter-spacing: .08em;
}
.daycard__body { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.daycard__empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-empty); letter-spacing: .12em;
}

/* 一筆支出：金額（大）／店名（中）／備註（小） */
.entry { display: flex; gap: 9px; padding: 8px; border-radius: var(--radius-chip); cursor: pointer; transition: background var(--transition); }
.entry:hover { background: var(--bg); }
.entry__icon {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: var(--radius-icon);
  display: flex; align-items: center; justify-content: center;
}
.entry__icon--company { background: var(--red-bg); color: var(--red); }
.entry__icon--family  { background: var(--green-bg); color: var(--green); }
.entry__icon--event   { background: #F1EEEA; color: var(--text-2); }
.entry__amount { font-family: var(--font-num); font-size: var(--text-amount); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.entry__name { font-size: var(--text-name); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.entry__note { font-size: var(--text-note); line-height: 1.5; color: var(--text-3); text-wrap: pretty; }

/* 小計 */
.subtotal { padding: 10px 13px; background: var(--card-sub); border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: 5px; }
.subtotal__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-2); }
.subtotal__row span:first-child { display: flex; align-items: center; gap: 6px; }
.subtotal__dot { width: 5px; height: 5px; border-radius: 50%; }
.subtotal__dot--company { background: var(--red); }
.subtotal__dot--family { background: var(--green); }
.subtotal__value { font-family: var(--font-num); font-size: 13px; font-weight: var(--w-bold); color: var(--text); font-variant-numeric: tabular-nums; }

/* 卡片底部動作 */
.daycard__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.daycard__action {
  height: 40px; border: none; background: var(--card);
  font-family: inherit; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: background var(--transition);
}
.daycard__action--expense { color: var(--red); }
.daycard__action--expense:hover { background: var(--red-bg); }
.daycard__action--event { color: var(--green); }
.daycard__action--event:hover { background: var(--green-bg); }

/* 月曆＋本月繳款並排列（原始 handoff 檔沒有獨立 class，這裡照設計稿樣式補上，並加上手機收合規則） */
.calendar-duebar-row { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; align-items: start; }

/* ---------- 手機 ---------- */
@media (max-width: 720px) {
  .app { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; flex-direction: row; justify-content: space-around;
    border-right: none; border-top: 1px solid var(--border);
    padding: 8px 0; order: 2; position: sticky; bottom: 0; background: var(--card);
  }
  .sidebar__logo { display: none; }
  .main { padding: 18px 20px 24px; gap: 18px; }
  .calendar-duebar-row { grid-template-columns: 1fr; }
  .duebar__head { flex-wrap: wrap; row-gap: 8px; }
  .week { grid-template-columns: 1fr; }
  .daycard { min-height: 0; }
  .header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .btn-primary { min-height: 48px; }   /* 觸控區 ≥44px */
}