/* 日系風格：生成り紙色底 + 白卡片 + 藍鼠點綴。
   襯線標題與內文黑體都走系統字族，不下載任何 web font ——
   這個 app 是離線可用的 PWA，多一個字體檔就多一個離線會壞掉的東西。 */
:root {
  --paper: #f7f4ed;   /* 生成り：底色 */
  --card: #fff;
  --line: #e3ddd1;    /* 暖灰 hairline */
  --rule: #d3cbbb;    /* 稍重的分隔線，用在表頭 */
  --fg: #2b2b2b;      /* 墨 */
  --muted: #7a7268;
  --accent: #4a6572;  /* 藍鼠 */
  --accent-dark: #3a5260;
  --danger: #a8442f;  /* 朱 */
  --ok: #5a7247;      /* 松葉 */
  --serif: "Songti TC", "Noto Serif TC", "Noto Serif CJK TC", "Yu Mincho", serif;
  --sans: system-ui, -apple-system, "Noto Sans TC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 2px;           /* 圓角收到幾乎沒有：這個風格靠細線，不靠圓弧 */
}
/* checkbox 與 date picker 的原生控制項預設是瀏覽器的藍，跟整套色盤打架 */
html { accent-color: var(--accent); }
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.75 var(--sans);
  color: var(--fg);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
::selection { background: #dfe5e8; }

/* 骨架 ---------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.brand {
  font-family: var(--serif); font-size: 1.0625rem; font-weight: 500;
  letter-spacing: .14em; text-decoration: none; color: var(--fg);
}
main { max-width: 52rem; margin: 0 auto; padding: 1.5rem 1.25rem 5rem; }

/* 標題：h1 一條 hairline 加一段藍鼠短線，h2 只有 hairline。
   刻意不用粗體 —— 層級靠字族、字距與留白區分。 */
h1 {
  position: relative;
  font-family: var(--serif); font-size: 1.5rem; font-weight: 500;
  letter-spacing: .09em; line-height: 1.5;
  margin: .75rem 0 1.5rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
h1::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 2.75rem; height: 2px; background: var(--accent);
}
h2 {
  font-family: var(--serif); font-size: 1.125rem; font-weight: 500;
  letter-spacing: .07em; margin: 2rem 0 .75rem;
}
main > h2 { border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
h3 { font-family: var(--serif); font-weight: 500; letter-spacing: .05em; }
/* 收合區塊：新增、編輯這類次要操作預設收起來，讓清單與未繳金額先進眼睛。
   summary 要長得像 h2，因為它在版面上就是那一節的標題。
   native 的三角形在三家瀏覽器長得都不一樣，關掉自己畫。 */
.fold { margin: 2rem 0 1.25rem; }
.fold > summary {
  font-family: var(--serif); font-size: 1.125rem; font-weight: 500;
  letter-spacing: .07em; padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer; list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: "\25B8"; font-family: var(--sans); color: var(--accent);
  display: inline-block; width: 1.25em;
}
.fold[open] > summary::before { content: "\25BE"; }
.fold > summary:hover { color: var(--accent); }
.fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fold > *:not(summary) { margin-top: 1rem; }

a { color: var(--accent); text-underline-offset: .2em; }
a:hover { color: var(--accent-dark); }
.muted, .sub { color: var(--muted); }
.sub { font-size: .875rem; }
.crumbs { font-size: .875rem; color: var(--muted); letter-spacing: .02em; }

/* 提示 ---------------------------------------------------------------- */
.error {
  padding: .75rem 1rem; border: 1px solid #d8b6ab; border-left: 3px solid var(--danger);
  border-radius: var(--r); color: var(--danger); background: #fbf3f0;
}
.notice {
  padding: .75rem 1rem; border: 1px solid #e5d9b6; border-left: 3px solid #b08d3f;
  border-radius: var(--r); background: #fbf6e8;
}

/* 表單 ---------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card);
}
label {
  display: flex; flex-direction: column; gap: .375rem;
  font-size: .875rem; color: var(--muted); letter-spacing: .03em;
}
input, select, textarea {
  font: inherit; color: var(--fg); padding: .5rem .625rem;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
button {
  font: inherit; font-weight: 500; letter-spacing: .08em;
  padding: .625rem 1.25rem; border: 1px solid var(--accent); border-radius: var(--r);
  background: var(--accent); color: #fff; cursor: pointer;
}
button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.linkbtn {
  background: none; border: 0; color: var(--accent); padding: 0;
  letter-spacing: .06em; text-decoration: underline; text-underline-offset: .2em;
}
.linkbtn:hover { background: none; color: var(--accent-dark); }
/* 破壞性與不可逆的操作用朱色外框，不用實心。
   實心紅會讓「刪除這棟房子」變成整頁最顯眼的按鈕 —— 那正好是反的。
   外框說的是「這是另一類操作，看清楚再按」，而不是大聲喊。 */
.danger { background: none; color: var(--danger); border-color: var(--danger); }
.danger:hover { background: #fbf3f0; color: var(--danger); border-color: var(--danger); }
.danger:focus-visible { outline-color: var(--danger); }
/* 清單裡的刪除是行內文字連結（合約、瓦斯帳單），不該長出外框。
   兩個 class 的選擇器特異性高於單獨的 .danger，所以會蓋掉上面那組。 */
.linkbtn.danger { border: 0; background: none; color: var(--danger); }
.linkbtn.danger:hover { background: none; color: var(--danger); }

.checkbox { flex-direction: row; align-items: center; gap: .5rem; color: var(--fg); }
.checkbox input { width: auto; }
/* 寬螢幕不要把日期、數字、下拉這種短欄位拉成整行寬。
   兩個 select 裝的都是「月繳」、房號這種短字串，一起收。 */
@media (min-width: 40rem) {
  .card label > input[type=date],
  .card label > input[type=month],
  .card label > input[type=number],
  .card label > select { max-width: 16rem; }
}

/* 表格 ---------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; }
th {
  padding: .5rem; text-align: left; border-bottom: 1px solid var(--rule);
  font-size: .8125rem; font-weight: 500; color: var(--muted); letter-spacing: .06em;
}
td {
  padding: .625rem .5rem; text-align: left; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
/* 窄螢幕把表格拆成卡片：房東多數時間是拿手機在用。
   table/tbody 也要改成 block —— 留著 display:table 的話，長地址會把表格
   撐得比視窗還寬，space-between 就把名稱那一欄推到畫面外。 */
@media (max-width: 40rem) {
  table, tbody { display: block; }
  thead { display: none; }
  tr {
    display: block; margin-bottom: .75rem; padding: .625rem;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  }
  td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3rem .5rem; }
  td::before {
    content: attr(data-label); flex: 0 0 auto;
    color: var(--muted); font-size: .8125rem; letter-spacing: .04em;
  }
}

/* 定義清單 ------------------------------------------------------------ */
dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; margin: 0; }
dt { color: var(--muted); font-size: .875rem; letter-spacing: .03em; }
dd { margin: 0; font-variant-numeric: tabular-nums; }

/* 結帳試算 ------------------------------------------------------------ */
/* label 沒有包住 input，所以是 center 而不是 flex-end */
.monthpick { display: flex; gap: .625rem; align-items: center; margin: 1.25rem 0; }
.draft {
  margin: 1.25rem 0; padding: 1.125rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
}
.draft > h2 {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 1.0625rem; margin: 0 0 .75rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.line { display: grid; gap: .375rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.line label { font-size: .875rem; }
.line input[type=text] { width: 100%; }
/* 明細是給爭議房客看的稽核紀錄，排成收據的樣子 */
.detail {
  white-space: pre-wrap; word-break: break-all;
  font-family: var(--mono); font-size: .8125rem; line-height: 1.6; color: var(--muted);
  padding: .625rem .75rem; border-radius: var(--r); background: var(--paper);
}
.total {
  font-family: var(--serif); font-weight: 500; font-size: 1.125rem;
  letter-spacing: .04em; font-variant-numeric: tabular-nums; text-align: right;
}
/* 寬螢幕把明細列排成一行（spec §6 的 RWD：純 CSS，不寫 JS） */
@media (min-width: 40rem) {
  .line { grid-template-columns: 12rem 8rem 1fr; align-items: center; }
  /* 算式是這一列的第 4 個子元素，只有 3 欄，所以它會掉到下一列的第一欄
     （12rem 寬），「420 分（621600 ÷ 1480）」之類的值就被擠成三行。
     讓它跨滿整列。 */
  .line > details { grid-column: 1 / -1; }
}

/* 帳單清單與狀態 ------------------------------------------------------ */
.billlist { list-style: none; padding: 0; margin: .5rem 0 0; }
.billlist li {
  display: flex; gap: .75rem; align-items: baseline;
  padding: .625rem 0; border-bottom: 1px solid var(--line);
}
.billlist li:last-child { border-bottom: 0; }
.billlist .amount { margin-left: auto; font-variant-numeric: tabular-nums; }
.status { font-size: .875rem; letter-spacing: .03em; }
/* 手機寬度塞不下「房號　項目 / 金額 / 到期日」三段，讓連結自己佔一行 */
@media (max-width: 40rem) {
  .billlist li { flex-wrap: wrap; }
  .billlist li > a { flex: 1 1 100%; }
  .billlist .amount { margin-left: 0; }
  .billlist .status, .billlist .sub { margin-left: auto; }
}
.status.unpaid { color: var(--danger); }
.status.paid { color: var(--ok); }
.status.overdue { color: var(--danger); font-weight: 600; }

/* 帳單明細 ------------------------------------------------------------ */
.billmeta { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; margin: 1.25rem 0; }
.billmeta dt { color: var(--muted); font-size: .875rem; }
.billmeta dd { margin: 0; }
.item {
  margin: 1.25rem 0; padding: 1.125rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
}
.item > h3 {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 1rem; margin: 0 0 .75rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.calc { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.25rem; font-size: .875rem; }
.calc dt { color: var(--muted); }
.calc dd { margin: 0; }

/* 總覽彙總 ------------------------------------------------------------ */
.summary {
  margin: 1.25rem 0; padding: 1.125rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
}
.summary > h2 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
.summary > h2:first-child { margin-top: 0; }
.big { font-size: 1rem; color: var(--muted); letter-spacing: .05em; margin: 0; }
.big strong {
  font-family: var(--serif); font-size: 1.875rem; font-weight: 500;
  letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--fg);
}