/* 開支記錄（2026-09-14，老闆親自開單）
   ────────────────────────────────────────────────────────────
   🔴 唔開新 design token。全部顏色／圓角／陰影跟返 style.css 已經有嗰套
   （--line / --card / --ink / --muted / --page / --prog-* / --tag-ink），
   加新 token 就會慢慢變成兩套視覺語言。

   擺位：粒藥丸喺頂部工具列，「今日到店」隔籬（老闆 2026-09-14 指定）。
   同到店一樣係順手動作，唔係主角內容 —— 唔准搬去首頁中間。 */

/* ── 頂部工具列嗰粒 ─────────────────────────────────────── */
.cash-pill {
  display: flex; align-items: center; gap: 6px;
  padding: .3rem .5rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  cursor: pointer; position: relative;
  transition: box-shadow .15s ease;
}
.cash-pill:hover { box-shadow: 0 1px 5px rgba(16, 24, 40, .09); }
/* 🔴 老闆本機驗收開關(EXPENSES_LOCAL)——粒藥丸位細,擺唔落成句字,
   用隻睇得出嘅小圓點 + title tooltip 頂住(成句字擺喺抽屜個 .cash-local-banner)。 */
.cash-pill-local::after {
  content: ''; position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #E08A2E; border: 1.5px solid var(--card);
}
.cash-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.cash-amount {
  font-size: 13.5px; font-weight: 800; color: var(--prog-ink);
  display: inline-block; transition: transform .18s ease;
}
.cash-amount.bump { animation: cashBump .35s ease; }
@keyframes cashBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); color: var(--prog-fill); }
  100% { transform: scale(1); }
}

/* 警戒線（原本張表右上角嗰句「如少過 $4000 或多過 $10000 請通知 Lam」）。
   🔴 兩邊都要有色 —— 得一邊有色嘅話，另一邊就會靜靜哋過咗界冇人知。 */
.cash-amount.is-low  { color: #C2453B; }
.cash-amount.is-high { color: #B06A00; }
/* 倉未接通。**唔准畫 $0** —— 畫 $0 等於靜靜哋講「收銀機冇錢」。 */
.cash-amount.is-off  { color: var(--tag-ink); font-weight: 600; }

.cash-add {
  min-width: 26px; height: 22px; padding: 0 5px; border-radius: 6px;
  background: var(--prog-fill); color: #fff; border: none;
  font-size: 13px; font-weight: 700; line-height: 1;
  white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
  transition: transform .1s ease, background .15s ease;
}
.cash-add:hover { background: var(--prog-ink); }
.cash-add:active { transform: scale(0.9); }
.cash-add:disabled { opacity: .5; cursor: wait; }

/* ── 甲段：新增記錄嘅彈框 ─────────────────────────────────── */

/* 🔴 置中特登用 flex，唔用 `top:50%` ＋ translate。
   原因：`tests/影子帶讓位.test.js` 嗰道閘一開始就捉咗我 —— `top:50%`
   係由**視窗頂**起計，行影子模式嗰陣條橙帶會食咗最頂一截。
   呢度改成由條帶下面開始鋪（`inset` 個 top 讓返 --影子帶高），
   個框就喺「剩返嗰塊地」中間，條帶幾高都唔使改呢度。 */
.cash-modal-wrap {
  position: fixed;
  inset: var(--影子帶高, 0px) 0 0 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
  z-index: 210;
}
/* `display:flex` 會蓋過 `hidden` 屬性，所以要自己收返。 */
.cash-modal-wrap[hidden] { display: none; }

.cash-modal-bg {
  position: absolute; inset: 0; background: rgba(16, 24, 40, .32);
}
.cash-modal {
  position: relative; z-index: 1;
  width: 340px; max-width: 100%;
  max-height: 100%; overflow-y: auto;
  background: var(--card); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(16, 24, 40, .22);
  padding: 1rem 1.1rem 1.1rem;
}
.cash-modal-head { display: flex; align-items: center; margin-bottom: .9rem; }
.cash-modal-head h2 { font-size: 15px; margin: 0; color: var(--ink); }
.cash-modal-close {
  margin-left: auto; background: none; border: none; font: inherit; font-size: 17px;
  color: var(--muted); cursor: pointer; line-height: 1;
}

.cash-amt-label, .cash-field-label {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--muted);
  margin: .7rem 0 .3rem;
}
.cash-amt-label { margin-top: 0; }

/* 金額係主角 —— 特登大隻，同事一開個框就知要打咩。 */
.cash-amt-row {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: .35rem .7rem; background: var(--page);
}
.cash-amt-row:focus-within { border-color: var(--prog-fill); background: var(--card); }
.cash-amt-sign { font-size: 18px; font-weight: 700; color: var(--muted); }
.cash-amt-input {
  flex: 1; min-width: 0;
  border: none; background: none; outline: none;
  font: inherit; font-size: 24px; font-weight: 800; color: var(--ink);
  padding: .2rem 0;
}
.cash-hint { font-size: 11px; color: var(--tag-ink); margin: .3rem 0 0; }

/* 收入／支出 */
.cash-dir { display: flex; gap: 6px; margin-top: .8rem; }
.cash-dir button {
  flex: 1; font: inherit; font-size: 12.5px; font-weight: 700;
  padding: .42rem 0; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cash-dir button.is-on {
  background: var(--prog-bg); border-color: var(--prog-track); color: var(--prog-ink);
}

/* 用途藥丸。次序由後端計，呢度唔寫死任何一粒。 */
.cash-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cash-pills button {
  font: inherit; font-size: 12px; padding: .35rem .6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.cash-pills button:hover { background: var(--prog-bg); }
.cash-pills button.is-on {
  background: var(--prog-fill); border-color: var(--prog-fill); color: #fff; font-weight: 700;
}
.cash-pills button.other { color: var(--tag-ink); border-style: dashed; }
.cash-pills .cash-pills-empty { font-size: 11.5px; color: var(--tag-ink); }

.cash-other { margin-top: .5rem; }
.cash-text {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 13px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .42rem .6rem; background: var(--card);
}
.cash-text:focus { outline: none; border-color: var(--prog-fill); }

.cash-more-btn {
  margin-top: .8rem; background: none; border: none; padding: 0;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--muted);
  cursor: pointer; text-decoration: underline;
}
.cash-more { margin-top: .2rem; }

/* 🔴 錯誤訊息唔准自動消失（Angus 2026-09-05 已經講過一次）。 */
.cash-err {
  margin: .8rem 0 0; padding: .45rem .6rem;
  background: #FDECEA; color: #A3372F; border-radius: 8px;
  font-size: 12px; line-height: 1.45;
}

.cash-modal-foot { display: flex; gap: 8px; margin-top: 1rem; }
.cash-btn {
  flex: 1; font: inherit; font-size: 13px; font-weight: 700;
  padding: .55rem 0; border-radius: 9px; cursor: pointer;
  transition: background .15s ease;
}
.cash-btn.ghost { background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.cash-btn.ghost:hover { background: var(--page); }
.cash-btn.primary { background: var(--prog-fill); border: 1px solid var(--prog-fill); color: #fff; }
.cash-btn.primary:hover { background: var(--prog-ink); }
.cash-btn:disabled { opacity: .55; cursor: wait; }

/* ── 乙段：後台抽屜 ─────────────────────────────────────── */
.cash-overlay { position: fixed; inset: 0; background: rgba(16, 24, 40, .28); z-index: 190; }
.cash-drawer {
  position: fixed; top: var(--影子帶高); right: 0; bottom: 0; width: 420px; max-width: 92vw;
  background: var(--card); box-shadow: -6px 0 24px rgba(0, 0, 0, .12);
  z-index: 200; display: flex; flex-direction: column;
}
.cash-drawer-head {
  display: flex; align-items: center; padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
.cash-drawer-head h2 { font-size: 15px; margin: 0; color: var(--ink); }
.cash-drawer-close {
  margin-left: auto; background: none; border: none; font: inherit; font-size: 17px;
  color: var(--muted); cursor: pointer; line-height: 1;
}

/* 🔴 老闆本機驗收開關(EXPENSES_LOCAL,2026-09-16)——照抄 web/messages.css
   嘅 .msg-local-banner:同一組顏色,同一個「睇得出係假數據」諗頭。 */
.cash-local-banner {
  padding: 6px 13px; font-size: 12px; font-weight: 600; text-align: center;
  background: #FDF2E9; color: #9A5B13; border-bottom: 1px solid #F3D9B5;
}

.cash-bal { padding: .9rem 1.1rem .3rem; }
.cash-bal .box {
  background: var(--prog-bg); border: 1px solid var(--prog-track);
  border-radius: 10px; padding: .6rem .75rem;
}
.cash-bal .lbl { display: block; font-size: 11px; color: var(--prog-ink); font-weight: 600; }
.cash-bal .val { font-size: 21px; font-weight: 800; color: var(--prog-ink); }
.cash-bal .val.is-low  { color: #C2453B; }
.cash-bal .val.is-high { color: #B06A00; }
.cash-bal .warn { display: block; margin-top: .3rem; font-size: 11.5px; line-height: 1.5; }
.cash-bal .warn.is-low  { color: #C2453B; }
.cash-bal .warn.is-high { color: #B06A00; }

.cash-tabs { display: flex; gap: 4px; padding: .7rem 1.1rem 0; }
.cash-tab {
  font: inherit; font-size: 12px; font-weight: 600; padding: .35rem .7rem;
  border-radius: 8px 8px 0 0; border: 1px solid transparent; border-bottom: none;
  background: none; color: var(--muted); cursor: pointer;
}
.cash-tab.is-on { background: var(--card); border-color: var(--line); color: var(--ink); }

.cash-drawer-body { flex: 1; overflow-y: auto; padding: .6rem 1.1rem 1.2rem; }
.cash-empty { font-size: 12.5px; color: var(--tag-ink); padding: 1rem 0; text-align: center; }

/* 🔴 一定要 `flex-wrap: wrap`。`.cash-note` 係 `flex-basis:100%`（想自己霸一行），
   唔准 wrap 嘅話佢就會迫喺同一行度，逼到「京東運費」四個字打直排 ——
   2026-09-14 喺老闆本機真係咁樣出過一次，先至捉到。 */
.cash-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: .55rem 0;
  border-bottom: 1px solid var(--line); font-size: 12.5px;
}
/* 日期同用途一律唔准斷行 —— 呢兩格斷咗就完全睇唔明。 */
.cash-row .d {
  color: var(--muted); min-width: 66px; flex: none;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cash-row .p { color: var(--ink); font-weight: 600; white-space: nowrap; }
.cash-row .w { color: var(--tag-ink); font-size: 11px; white-space: nowrap; }
.cash-row .a {
  margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cash-row .a.out { color: #C2453B; }
.cash-row .a.in  { color: #2E7D52; }
.cash-row .ops { display: flex; gap: 2px; flex: none; }
.cash-row .ops button {
  background: none; border: none; font: inherit; font-size: 11px;
  color: var(--tag-ink); cursor: pointer; padding: 0 .25rem;
}
.cash-row .ops button:hover { color: var(--prog-ink); text-decoration: underline; }
/* 已作廢：劃走，但**照樣見到** —— 財務記錄唔應該人間蒸發。 */
.cash-row.voided { opacity: .55; }
.cash-row.voided .p, .cash-row.voided .a { text-decoration: line-through; }
.cash-row .void-tag { font-size: 10.5px; color: var(--tag-ink); white-space: nowrap; flex: none; }

.cash-note { flex-basis: 100%; font-size: 11.5px; color: var(--tag-ink); padding-left: 74px; }

.cash-foot-note { font-size: 11px; color: var(--tag-ink); margin-top: .9rem; line-height: 1.6; }

/* 用途管理頁籤 */
.cash-purpose-row {
  display: flex; align-items: center; gap: 8px; padding: .5rem 0;
  border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.cash-purpose-row .n { color: var(--ink); font-weight: 600; }
.cash-purpose-row .u { color: var(--tag-ink); font-size: 11px; }
.cash-purpose-row .act { margin-left: auto; }
.cash-purpose-row.off .n { color: var(--tag-ink); text-decoration: line-through; }
.cash-purpose-row button {
  background: none; border: none; font: inherit; font-size: 11px;
  color: var(--tag-ink); cursor: pointer; padding: 0 .25rem;
}
.cash-purpose-row button:hover { color: var(--prog-ink); text-decoration: underline; }
.cash-purpose-add { display: flex; gap: 6px; margin-top: .9rem; }
.cash-purpose-add .cash-text { flex: 1; }
.cash-purpose-add button {
  font: inherit; font-size: 12px; font-weight: 700; padding: 0 .8rem;
  border-radius: 8px; border: 1px solid var(--prog-fill);
  background: var(--prog-fill); color: #fff; cursor: pointer; white-space: nowrap;
}

/* 窄螢幕：抽屜貼滿，彈框留返 16px 邊位。 */
@media (max-width: 520px) {
  .cash-drawer { width: 100%; max-width: 100%; }
  .cash-note { padding-left: 0; }
}

/* 作廢確認：特登唔用 window.confirm —— 原生嗰個改唔到啲字，
   講唔出「收銀機結餘會相應調整」，而同事最需要知就係嗰句。 */
.cash-confirm { padding: 1rem 0; }
.cash-confirm p { margin: 0 0 .5rem; font-size: 13px; color: var(--ink); line-height: 1.6; }