* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  background: #f4f6f9; color: #2c3e50; font-size: 14px;
}

/* ---- 登入頁 ---- */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #14532d; }
.login-box { background: #fff; padding: 40px; border-radius: 12px; width: 360px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.login-box h1 { font-size: 22px; margin-bottom: 4px; }
.login-box .sub { color: #888; margin-bottom: 24px; }
.login-box label { display: block; margin-bottom: 14px; font-weight: bold; }
.login-box input { width: 100%; padding: 10px; margin-top: 4px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; }
.error { color: #e74c3c; margin-top: 10px; min-height: 18px; }

/* ---- 主框架 ---- */
.layout { display: flex; height: 100vh; }
.sidebar {
  width: 190px; background: #14532d; color: #fff; padding: 16px 0; flex-shrink: 0;
  display: flex; flex-direction: column;
}
.sidebar .logo { font-size: 17px; font-weight: bold; padding: 0 20px 16px; border-bottom: 1px solid rgba(255,255,255,.15); }
.sidebar nav { flex: 1; margin-top: 10px; }
.sidebar a { display: block; color: #cde3d3; text-decoration: none; padding: 10px 20px; font-size: 14px; cursor: pointer; }
.sidebar a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar a.active { background: #1e7a43; color: #fff; border-left: 3px solid #7ee2a8; }
.sidebar .userinfo { padding: 12px 20px; border-top: 1px solid rgba(255,255,255,.15); font-size: 12px; color: #9fc8ab; }
.sidebar .userinfo a { display: inline; padding: 0; color: #7ee2a8; cursor: pointer; }

.main { flex: 1; padding: 24px; overflow: auto; }
.main::-webkit-scrollbar { height: 14px; width: 12px; }
.main::-webkit-scrollbar-thumb { background: #9fb0c0; border-radius: 7px; border: 3px solid #f4f6f9; }
.main::-webkit-scrollbar-thumb:hover { background: #7e93a8; }
.main::-webkit-scrollbar-track { background: #e8edf2; }
.main h2 { margin-bottom: 16px; font-size: 20px; }
.toolbar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.toolbar input, .toolbar select { padding: 7px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; }
.toolbar .spacer { flex: 1; }

/* ---- 按鈕 ---- */
.btn { padding: 7px 14px; border: 1px solid #ccc; background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px; }
.btn:hover { background: #f0f4f8; }
.btn.primary { background: #1e7a43; color: #fff; border-color: #1e7a43; }
.btn.primary:hover { background: #166437; }
.btn.danger { color: #e74c3c; border-color: #e74c3c; }
.btn.danger:hover { background: #fdeaea; }
.btn.small { padding: 3px 8px; font-size: 12px; }

/* ---- 表格 ---- */
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #eef1f4; white-space: nowrap; }
th { background: #f8fafc; font-size: 13px; color: #556; position: sticky; top: 0; z-index: 1; }
tr:hover td { background: #f6f9fc; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.wrap { white-space: normal; max-width: 320px; }
tfoot td { font-weight: bold; background: #f2f6f2; }

/* ---- 流水帳 Excel 式表格 ---- */
#ledgerWrap { overflow-x: auto; }
.ledger th { position: sticky; z-index: 2; }
.ledger thead tr:first-child th { top: 0; height: 34px; }
.ledger thead tr.filterRow th { top: 34px; padding: 3px 4px; background: #fbfcfe; }
.ledger td { overflow: hidden; text-overflow: ellipsis; }
th.sortable { cursor: pointer; user-select: none; position: relative; }
th.sortable:hover { background: #eef3f8; }
th .arrow { color: #1e7a43; font-size: 10px; margin-left: 3px; }
th .colgrip { position: absolute; right: 0; top: 0; bottom: 0; width: 7px; cursor: col-resize; }
th .colgrip:hover, th .colgrip.active { background: #7ee2a8; }
.filterRow input { width: 100%; padding: 3px 6px; border: 1px solid #dde3ea; border-radius: 4px; font-size: 12px; }
.quickAdd td { padding: 3px 4px; background: #f0f8f2; border-bottom: 2px solid #bfe6cb; }
.quickAdd input, .quickAdd select { width: 100%; padding: 5px 5px; border: 1px solid #b9cec0; border-radius: 4px; font-size: 13px; font-family: inherit; }
.quickAdd input:focus, .quickAdd select:focus { border-color: #1e7a43; outline: none; }
td.selCell { outline: 2px solid #1e7a43; outline-offset: -2px; background: #eaf6ee; }
.cellEdit { width: 100%; padding: 4px 5px; border: 2px solid #1e7a43; border-radius: 3px; font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box; }
.hintbar { color: #8a9; font-size: 12px; margin: -8px 0 10px; line-height: 1.7; }

/* ---- 到帳確認 / 記錄人 ---- */
.okmark { color: #1e8e3e; font-size: 12px; white-space: nowrap; cursor: help; }
.btn.small.pend { background: #fff3e0; border-color: #e0b070; color: #c77b13; padding: 2px 7px; font-size: 12px; }
.btn.small.pend:hover { background: #c77b13; color: #fff; border-color: #c77b13; }
.rcvChk { font-size: 12px; color: #567; white-space: nowrap; cursor: pointer; }
.rcvChk input { width: auto; margin-right: 3px; vertical-align: middle; }
.card.clickable { cursor: pointer; transition: box-shadow .15s; }
.card.clickable:hover { box-shadow: 0 3px 12px rgba(0,0,0,.16); }
.btn.small.unpaidbtn { color: #d33; border-color: #e0a0a0; padding: 2px 6px; font-size: 12px; }
.btn.small.unpaidbtn:hover { background: #d33; color: #fff; border-color: #d33; }
.unpaidBanner { background: #fdeaea; border: 1px solid #e8b0b0; border-left: 4px solid #d33;
  border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; color: #822; }
.unpaidBanner ul { margin: 8px 0 0 18px; }
.unpaidBanner li { margin: 2px 0; font-size: 13px; }

/* ---- 合併付款（等同 Excel 合併儲存格）---- */
.ledger tr.grp td { background: #f4faf6; }
.ledger tr.grp td:first-child { border-left: 3px solid #7ec8a0; }
.ledger tr.grpMid td { border-top: none; }
.ledger tr.grpFirst td { border-top: 1px solid #cfe8da; }
.ledger tr.grpMid td:first-child { color: #9ab; }
.grpBadge { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 8px;
  background: #1e7a43; color: #fff; font-size: 11px; cursor: help; }
.grpCont { color: #9ab; cursor: help; }
/* ---- WhatsApp 秘書設定 ---- */
.keyBox { background: #f7faf8; border: 1px solid #dde7e1; border-radius: 8px; padding: 12px 14px; margin: 10px 0; }
.keyBox code { background: #eef3f0; padding: 1px 6px; border-radius: 4px; font-size: 12px; }

/* ---- 依收款帳號分組（對帳用）---- */
.accPanel { background: #fff; border: 1px solid #e7ecf1; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.accHead { font-size: 13px; font-weight: bold; color: #14532d; margin-bottom: 8px; }
.accHead small { font-weight: normal; color: #8a9; }
.accChips { display: flex; flex-wrap: wrap; gap: 7px; }
.accChip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border: 1px solid #d6e0da; background: #fafcfb; border-radius: 18px; cursor: pointer;
  font-size: 12px; font-family: inherit; white-space: nowrap; }
.accChip:hover { border-color: #1e7a43; background: #eefaf1; }
.accChip.on { background: #1e7a43; border-color: #1e7a43; color: #fff; }
.accChip.on .amount-in, .accChip.on .amount-out, .accChip.on .an em { color: #d6f5e2; }
.accChip.on .tag { background: rgba(255,255,255,.9); }
.accChip .an { font-weight: bold; }
.accChip .an em { font-style: normal; color: #789; font-weight: normal; }
.accChip b { color: inherit; }
.accChip .tag { padding: 1px 6px; font-size: 11px; }

/* ---- 待補憑證（手機補件用）---- */
.navBadge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px;
  background: #e06666; color: #fff; font-size: 11px; text-align: center; }
.rcptList { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.rcptCard { background: #fff; border: 1px solid #e7ecf1; border-left: 4px solid #e0b070;
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.rcptCard.done { border-left-color: #34a853; opacity: .6; }
.rcptTop { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rcptTop .spacer { flex: 1; }
.rcptDate { color: #789; font-size: 12px; }
.rcptAmt { font-weight: bold; font-size: 15px; color: #14532d; }
.rcptTitle { font-size: 14px; margin-bottom: 4px; word-break: break-word; }
.rcptNotes { color: #789; font-size: 12px; margin-bottom: 10px; word-break: break-word; }
.rcptUp { width: 100%; padding: 11px; font-size: 15px; margin-top: 6px; }
/* 待確認到帳卡片 */
.pendCard { border-left-color: #7ab8e0; }
.pendCard.done { border-left-color: #34a853; }
.pendCard.unpaidCard { border-left-color: #d33; background: #fdf6f6; }
.pendBtns { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.pendBtns .btn { flex: 1; padding: 9px; font-size: 14px; }
.pendBtns .rcpt { flex: 0 0 auto; font-size: 18px; }
@media (max-width: 760px) { .pendBtns .btn { padding: 13px; font-size: 15px; } }
/* 拖曳圖片到列／卡片上的提示 */
.dropHover { outline: 3px dashed #1e7a43 !important; outline-offset: -3px; }
.rcptCard.dropHover { background: #eefaf1; }
tr.dropHover td { background: #eefaf1 !important; }

@media (max-width: 760px) {
  .main { padding: 14px; }
  .rcptList { grid-template-columns: 1fr; }
  .rcptUp { padding: 14px; font-size: 16px; }
  .sidebar nav { display: flex; flex-wrap: wrap; }
  .sidebar a { padding: 10px 14px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ---- 儲值帳戶 ---- */
.expGroup { font-size: 12px; color: #789; display: inline-flex; align-items: center; gap: 4px; }
.expGroup .btn { padding: 3px 10px; }
.prepaidTbl { font-size: 13px; }
.prepaidTbl th, .prepaidTbl td { padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; }
.prepaidTbl td[data-f] { cursor: cell; }
.prepaidTbl td.wrap { white-space: nowrap; }
.prepaidTbl td.bal { font-weight: 600; background: #fffdf0; }
.prepaidTbl tr.negRow td.bal { background: #fdeaea; }
.prepaidTbl .quickAdd input { width: 100%; padding: 5px; border: 1px solid #b9cec0; border-radius: 4px; font-size: 13px; font-family: inherit; }

/* ---- 付款憑證 ---- */
.rcpt { cursor: zoom-in; font-size: 16px; }
.btn.small.rcptBtn { padding: 1px 5px; font-size: 11px; }
.btn.small.rcptMissing { color: #c77b13; border-color: #e0b070; background: #fff3e0; padding: 2px 7px; font-size: 12px; }
.btn.small.rcptMissing:hover { background: #c77b13; color: #fff; }
/* OCR 自動填入的格子標黃，提醒逐格核對再送出 */
.quickAdd .ocrFilled { background: #fff8d6; border-color: #d9b400; }
.rcptPop {
  position: fixed; z-index: 300; background: #fff; border: 1px solid #bbb; border-radius: 10px;
  padding: 6px; box-shadow: 0 8px 28px rgba(0,0,0,.28); pointer-events: none;
}
.rcptPop img { display: block; max-width: 330px; max-height: 360px; border-radius: 6px; }
.rcptPdf { width: 200px; padding: 30px 10px; text-align: center; color: #556; }

.ledger tr.selRow td { background: #e3f0fb !important; }
.ledger tr.selRow.grp td { background: #dbeef0 !important; }

/* ---- 阿本往來 ---- */
.batchBlock { padding: 14px 18px; }
.bhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 10px; }
details.batchBlock summary.bhead { cursor: pointer; padding: 4px 0; list-style: none; }
details.batchBlock summary.bhead::before { content: '▸ '; color: #789; }
details.batchBlock[open] summary.bhead::before { content: '▾ '; }
details.batchBlock .abenGrid { margin-top: 10px; }
.bname { font-weight: bold; font-size: 15px; color: #14532d; }
.bmeta { color: #567; font-size: 13px; }
.bhead .spacer { flex: 1; }
.abenSub { margin: 4px 0 8px; font-size: 14px; color: #14532d; }
.abenSub small { color: #8a9; font-weight: normal; }
.abenGrid { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start; }
.abenGrid table { font-size: 13px; }
.abenGrid th, .abenGrid td { padding: 6px 8px; }
.abenGrid td[data-f] { cursor: cell; }
.abenGrid td { overflow: hidden; text-overflow: ellipsis; }
.abenGrid td.wrap { white-space: nowrap; }
@media (max-width: 1200px) { .abenGrid { grid-template-columns: 1fr; } }
.abenGrid tr[style*="background"] td { background: transparent; }
.swbtn { width: 18px; height: 18px; border: 1px solid #bbb; border-radius: 4px; cursor: pointer; padding: 0; vertical-align: middle; }
.swbtn:hover { border-color: #1e7a43; }
.palettePop {
  position: fixed; z-index: 200; background: #fff; border: 1px solid #ccc; border-radius: 8px;
  padding: 8px; display: flex; gap: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.palettePop .sw { width: 26px; height: 26px; border: 1px solid #bbb; border-radius: 5px; cursor: pointer; }
.palettePop .sw:hover { outline: 2px solid #1e7a43; }
.palettePop .sw.none { background: #fff; color: #999; font-size: 13px; }
a.link { color: #1e7a43; cursor: pointer; text-decoration: underline; }
.amount-in { color: #1e8e3e; font-weight: 600; }
.amount-out { color: #d33; font-weight: 600; }

/* ---- 狀態標籤 ---- */
.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.tag.green { background: #e6f7ea; color: #1e8e3e; }
.tag.blue { background: #e8f0fe; color: #1a63c9; }
.tag.orange { background: #fef3e0; color: #c77b13; }
.tag.red { background: #fdeaea; color: #d33; }
.tag.gray { background: #eee; color: #777; }

/* ---- 統計卡 ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 24px; }
.card { background: #fff; border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card .num { font-size: 24px; font-weight: bold; color: #14532d; }
.card .num.red { color: #d33; }
.card .num.green { color: #1e8e3e; }
.card .label { color: #789; font-size: 13px; margin-top: 4px; }

/* ---- 彈窗 ---- */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: #fff; border-radius: 10px; padding: 24px; width: 520px; max-width: 94vw; max-height: 90vh; overflow-y: auto; }
/* 帳單預覽用：夠寬能完整顯示整張帳單（小卉要截圖給客人） */
.modal.modalWide { width: 840px; max-width: 96vw; padding: 16px; }
.modal h3 { margin-bottom: 16px; }
.modal label { display: block; margin-bottom: 12px; font-size: 13px; color: #445; }
.modal input, .modal select, .modal textarea {
  width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; font-family: inherit;
}
.modal textarea { min-height: 60px; resize: vertical; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.modal .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* 收入/支出切換 */
.typeswitch { display: flex; gap: 0; margin-bottom: 12px; border-radius: 8px; overflow: hidden; border: 1px solid #ccc; width: fit-content; }
.typeswitch button { padding: 8px 26px; border: none; background: #fff; cursor: pointer; font-size: 14px; }
.typeswitch button.on-income { background: #1e8e3e; color: #fff; font-weight: bold; }
.typeswitch button.on-expense { background: #d33; color: #fff; font-weight: bold; }

/* ---- 區塊 ---- */
.section { background: #fff; border-radius: 10px; padding: 18px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.section h3 { margin-bottom: 12px; font-size: 16px; color: #14532d; }

/* ---- 長條圖（純 CSS） ---- */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 10px 4px 0; }
.bars .bargroup { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.bars .barpair { display: flex; align-items: flex-end; gap: 2px; height: 130px; }
.bars .bar { width: 16px; border-radius: 3px 3px 0 0; min-height: 1px; }
.bars .bar.in { background: #34a853; }
.bars .bar.out { background: #e06666; }
.bars .blabel { font-size: 11px; color: #789; }

@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; }
}

/* 應收帳滑鼠移上去浮出的帳單預覽 */
.billPop { position: fixed; z-index: 300; background: #fff; border: 1px solid #cbd5dd;
  border-radius: 6px; box-shadow: 0 8px 28px rgba(0,0,0,.22); overflow: hidden; pointer-events: none; }

/* 分頁列（客戶與帳單頁）*/
.tabBar { display: flex; gap: 4px; margin: -6px 0 14px; border-bottom: 2px solid #e3e9ee; }
.tabBtn { padding: 9px 18px; border: none; background: none; cursor: pointer;
  font-size: 14px; font-family: inherit; color: #6a7b8c; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabBtn:hover { color: #14532d; background: #f4f8f5; }
.tabBtn.on { color: #14532d; font-weight: bold; border-bottom-color: #1e7a43; }

/* 固定欄寬的表格：內容太長用 … 收尾，絕不讓字疊到隔壁欄 */
table[style*="table-layout: fixed"] td, table[style*="table-layout: fixed"] th { overflow: hidden; text-overflow: ellipsis; }

/* 客戶清單：第一欄的客戶名可點 */
.clLink { cursor: pointer; color: #14532d; text-decoration: underline dotted; }
.clLink:hover { color: #1e7a43; text-decoration: underline; }

/* 帳單表單：收款帳戶複選 */
.baPick { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 4px; }
.baChk { font-size: 12px; color: #445; cursor: pointer; display: flex; align-items: center; gap: 5px; margin: 0; }
.baChk input { width: auto; margin: 0; }

/* 通用表格：標題下方的篩選列（流水帳有自己的一套） */
tr.genFilter th { padding: 3px 4px; background: #fbfcfe; position: sticky; top: 34px; z-index: 1; }
tr.genFilter input { width: 100%; padding: 3px 6px; border: 1px solid #dde3ea; border-radius: 4px; font-size: 12px; }
/* 客戶清單：同一個客人的第二列起淡一點（仍可點、可排序） */
.clLink.dim { color: #9fb3a6; }

/* 檔案投放區（報價單）：拖曳／貼上／點選 */
.dropZone { border: 2px dashed #cbd5dd; border-radius: 8px; padding: 12px; background: #fafcfb;
  margin-top: 4px; outline: none; transition: border-color .15s, background .15s; }
.dropZone:focus, .dropZone.dropHover { border-color: #1e7a43; background: #eefaf1; }
.dzEmpty { color: #7b8a99; font-size: 13px; text-align: center; }
.dzHint { color: #9aa7b3; font-size: 11px; margin-top: 4px; }
.dzHas { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #14532d; }
.dzHas .rcpt { font-size: 20px; cursor: pointer; }

/* 客戶清單：可就地編輯的格子 */
td.editFee, td.editCad { cursor: pointer; }
td.editFee:hover, td.editCad:hover { background: #eefaf1; outline: 1px dashed #7ec8a0; outline-offset: -2px; }

/* 合併付款：整組實付總額（對銀行帳單用） */
.grpTotal { font-size: 11px; color: #14532d; font-weight: bold; background: #e3f5e9;
  border-top: 1px dashed #7ec8a0; margin-top: 2px; padding-top: 1px; }
.grpBadge { font-size: 10px; white-space: nowrap; }

/* 待辦頁：已經處理完的列，先淡化留在畫面上，離開本頁才消失 */
tr.doneRow > td { opacity: .5; background: #f3f8f4; }
tr.doneRow > td:first-child::after { content: ' ✓'; color: #1e7a43; font-weight: bold; opacity: 1; }

/* 設定頁表格：像 Excel 一樣在格子裡改 */
td[data-ef] { cursor: cell; }
td.selCell { outline: 2px solid #1e7a43; outline-offset: -2px; background: #f0f7f2; }
input.cellEdit, select.cellEdit { width: 100%; box-sizing: border-box; padding: 2px 4px; font: inherit;
  border: 1px solid #1e7a43; border-radius: 3px; background: #fff; }