/* 行政申請系統頁面樣式。共用底稿是 tct-ui.css；這裡只放本系統版面，顏色與字型一律引用 --tct-* 變數。 */
:root{--green:var(--tct-green);--gold:var(--tct-gold);--bg:var(--tct-bg);--ink:var(--tct-ink);--warn:var(--tct-danger);
  --line:var(--tct-line);--muted:var(--tct-ink-2);--f-body:var(--tct-font);--f-display:var(--tct-font-display);--f-num:var(--tct-font-num);--r:var(--tct-radius)}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6}
#top{position:sticky;top:0;z-index:50}
#top .tct-topbar{position:static}
.tct-topbar .tct-sys{font-family:var(--f-display)}
.tct-tabs{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
.tct-tabs a.on{color:var(--green);border-bottom-color:var(--green);font-weight:700}

/* 版面：手機左右 20px 留白，桌機最寬 1180 */
.wrap{max-width:1180px;margin:0 auto;padding:16px 20px 90px}
.wrap.narrow{max-width:720px}
h2{font-size:22px;font-family:var(--f-display);color:var(--green);margin:16px 0 8px}
h2 small{font-size:16px;color:var(--muted);font-family:var(--f-body);font-weight:400;margin-left:8px}
.card{background:var(--tct-surface);border:1px solid var(--line);border-radius:var(--tct-radius-lg);padding:14px 16px;margin:12px 0}
.card h3{margin:0 0 6px;font-size:18px;color:var(--green)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.sp{flex:1}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.two{grid-template-columns:1fr}}

/* 表單 */
label{font-size:16px}
textarea,input[type=text],input[type=number],input[type=date],input[type=password],input[type=search],select{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;font:16px var(--f-body);background:var(--tct-surface);color:var(--ink)}
textarea{min-height:80px}
input[type=checkbox]{width:22px;height:22px;vertical-align:middle}
.f{margin:0 0 12px}
.f label{display:block;font-weight:700;margin-bottom:4px}
.f .hint{font-size:16px;color:var(--muted);margin-top:4px}
.ro{background:#F4F1EA}
.seg{display:flex;border:1px solid var(--green);border-radius:var(--r);overflow:hidden;margin:0 0 14px}
.seg button{flex:1;border:0;background:var(--tct-surface);color:var(--green);padding:11px 6px;font:700 16px var(--f-body);cursor:pointer}
.seg button.on{background:var(--green);color:#fff}
.btn{display:inline-block;border:1px solid var(--green);border-radius:var(--r);padding:11px 18px;font:700 16px var(--f-body);background:var(--green);color:#fff;cursor:pointer;text-decoration:none;text-align:center;line-height:1.2}
.btn.o{background:var(--tct-surface);color:var(--green)}
.btn.d{background:var(--tct-surface);color:var(--warn);border-color:var(--warn)}
.btn.s{padding:7px 12px}
.btn.wide{display:block;width:100%;margin-top:10px}
.btn:disabled{opacity:.5;cursor:default}
.btn:hover:not(:disabled){background:var(--tct-green-dark);color:#fff;border-color:var(--tct-green-dark)}
.btn.d:hover:not(:disabled){background:var(--warn);border-color:var(--warn)}
.btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.actions{position:sticky;bottom:0;background:var(--bg);padding:12px 0;border-top:1px solid var(--line);margin-top:12px}

/* 清單卡片（手機） */
.list a.item{display:block;background:var(--tct-surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:8px 0;color:inherit;text-decoration:none}
.list a.item:active{background:var(--tct-green-soft)}
.item .t{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.item .t b{font-size:17px}
.item .amt{font-family:var(--f-num);font-size:18px;font-weight:700;white-space:nowrap}
.item .sub{color:var(--muted);font-size:16px;margin-top:2px}
.empty{color:var(--muted);padding:24px 0;text-align:center}

/* 表格（會計電腦優先，手機橫向捲） */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--tct-surface-2);color:var(--green);white-space:nowrap}
td.n,th.n{font-family:var(--f-num);text-align:right;white-space:nowrap}
td.nw,th.nw{white-space:nowrap}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--tct-green-soft)}
table input[type=text],table input[type=number],table select{padding:7px 8px}

/* 標籤與提示 */
.pill{display:inline-block;border-radius:12px;padding:1px 10px;font-size:16px;white-space:nowrap}
.pill.success{background:var(--tct-success-soft);color:var(--tct-success)}
.pill.danger{background:var(--tct-danger-soft);color:var(--tct-danger)}
.pill.warn{background:var(--tct-gold-soft);color:var(--tct-gold-deep)}
.pill.muted{background:#ECEAE3;color:var(--muted)}
.note{font-size:16px;color:var(--muted)}
.err{color:var(--warn);font-weight:700}
.ok{color:var(--tct-success);font-weight:700}
.hide{display:none !important}

/* 詳情：欄位列與時間軸 */
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;margin:6px 0}
.kv div:nth-child(odd){color:var(--muted)}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:6px 0 6px 18px;border-left:2px solid var(--line);position:relative}
.timeline li::before{content:'';position:absolute;left:-6px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--green)}
.timeline .when{color:var(--muted);font-size:16px}
.att{display:flex;gap:10px;flex-wrap:wrap}
.att a{display:inline-block;border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;background:var(--tct-surface);color:var(--green);text-decoration:none}
/* 附件清單：一個檔案一列（檔名＋類別＋動作），手機會自動換行 */
.files{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.file-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;background:var(--tct-surface)}
.file-row .fname,.file-row a{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
.file-row a{color:var(--green);text-decoration:none}
.file-row a:hover{text-decoration:underline}
.file-row select{width:auto;padding:7px 8px}
#items .lbl{display:none;font-size:16px;color:var(--muted);margin-bottom:2px}
/* 品項表：手機上說明佔一整行，單價／數量／刪除排第二行，不用橫向捲 */
@media(max-width:600px){
  #items thead{display:none}
  #items tr{display:grid;grid-template-columns:1fr 1fr auto;gap:6px 8px;padding:8px 0;border-bottom:1px solid var(--line)}
  #items td{padding:0;border:0;text-align:left !important}
  #items td:last-child{align-self:end}
  #items td:first-child{grid-column:1 / -1}
  #items td.n input{width:100% !important}
  #items td .lbl{display:block}
}
/* 原生檔案選擇鈕是英文，藏起來改用中文的 label 按鈕（仍可用鍵盤聚焦） */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.btn.pick{display:inline-block;margin:4px 0}
.vh:focus-visible + .btn.pick{outline:2px solid var(--green);outline-offset:2px}
.flabel{display:block;margin-bottom:4px}

/* 廠商搜尋下拉 */
.dd{position:relative}
.dd .menu{position:absolute;left:0;right:0;top:100%;background:var(--tct-surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--tct-shadow);z-index:20;max-height:260px;overflow:auto}
.dd .menu div{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.dd .menu div:hover{background:var(--tct-green-soft)}
.dd .menu div.add{color:var(--green);font-weight:700}

/* 子頁籤 */
.subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.subtabs button{border:1px solid var(--line);background:var(--tct-surface);color:var(--ink);border-radius:20px;padding:8px 14px;font:700 16px var(--f-body);cursor:pointer}
.subtabs button.on{background:var(--green);color:#fff;border-color:var(--green)}
.subtabs button .cnt{margin-left:4px;color:inherit;opacity:.8}

/* 登入卡 */
#app .tct-login{min-height:calc(100vh - 112px);padding:8px 0}
.tct-login-card .login-local{text-align:left;margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.tct-login-card .tct-alt a{cursor:pointer;text-decoration:underline}

/* 自製對話框與提示條（不用原生 alert/confirm/prompt） */
.dlg{position:fixed;inset:0;background:rgba(43,46,41,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:70}
.dlg-box{background:var(--tct-surface);border-radius:var(--tct-radius-lg);padding:20px;max-width:440px;width:100%;box-shadow:var(--tct-shadow)}
.dlg-box h3{margin:0 0 8px;font-size:19px;color:var(--green)}
.dlg-box p{margin:0 0 14px;font-size:17px;white-space:pre-wrap}
.dlg-box p:empty{display:none}
#dlgInput textarea,#dlgInput input{margin-bottom:12px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r);opacity:0;transition:.3s;pointer-events:none;font-size:16px;max-width:90vw;z-index:80}
.toast.show{opacity:1}

@media(max-width:760px){
  .wrap{padding:12px 20px 90px}
  .tct-topbar{padding:8px 20px}
  .kv{grid-template-columns:90px 1fr}
}

/* tct-ui.css 有幾處 14～15px，本系統字級 16px 起跳，在這裡拉回來 */
.tct-topbar .tct-who,.tct-topbar .tct-role,.tct-topbar .tct-logout,.tct-topbar select{font-size:16px}
.tct-login-card p{font-size:16px}
.tct-login-card .tct-alt{font-size:16px}

/* 會計工作台：淡金工具列（左頁籤、右這一頁的動作）＋寬版表單對話框 */
.acctbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:var(--tct-gold-soft);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;margin:8px 0 4px}
.acctbar .subtabs{margin:0}
.dlg-box.wide{max-width:640px;max-height:calc(100vh - 40px);overflow:auto}
.alertcard{background:var(--tct-danger-soft);border-color:var(--tct-danger)}
.alertcard h3{color:var(--tct-danger)}
.pill .pwho{opacity:.8}
.warnline{color:var(--tct-gold-deep);font-weight:700}
.imptw{max-height:460px;overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
.imptw th{position:sticky;top:0;z-index:1}
.impnote{min-width:260px}
.impnote div+div{margin-top:2px}
tr.bad td{background:#FBF3F1}
.tw table.wide{min-width:960px}
.tw table.mid{min-width:720px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:600px){.three{grid-template-columns:1fr}}
.whohint{font-size:16px;margin-top:4px;line-height:1.4}
.whohint:empty{display:none}
.whook{color:var(--tct-success)}
.alertcard .ugroup{margin:10px 0 6px;color:var(--ink)}

/* 會計付款工作台：頁籤數字徽章、依支付單位分組的付款表、複製鍵 */
.subtabs button .cnt{display:inline-block;min-width:24px;margin-left:6px;padding:0 7px;border-radius:12px;background:var(--tct-danger-soft);color:var(--tct-danger);font-size:16px;line-height:22px;opacity:1;text-align:center}
.subtabs button.on .cnt{background:#fff;color:var(--green)}
.sumline{margin:8px 0 0;font-weight:700;font-family:var(--f-num)}
.paygrp .grphead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:8px}
.paygrp .grphead h3{margin:0}
.paygrp .grphead .bank{font-size:16px;font-weight:400;color:var(--muted)}
.paygrp .grpsum{font-family:var(--f-num);font-weight:700}
.paygrp .grpsel{color:var(--tct-gold-deep);font-weight:700;font-family:var(--f-num)}
.paytbl th.ck,.paytbl td.ck{width:40px;text-align:center}
.paytbl input[type=checkbox]{width:20px;height:20px;cursor:pointer;vertical-align:middle}
.paytbl .flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.btn.copy{margin-left:6px;padding:3px 10px}
.tw table.paytbl{table-layout:fixed;min-width:1080px}
.paytbl col.c-ck{width:44px}.paytbl col.c-case{width:150px}.paytbl col.c-acct{width:270px}.paytbl col.c-amt{width:150px}
.paytbl col.c-subj{width:100px}.paytbl col.c-inv{width:84px}.paytbl col.c-act{width:130px}
.paytbl td{overflow-wrap:anywhere}
.sumline .picked{color:var(--tct-gold-deep)}

/* 案號連結（各清單共用）：品牌綠、滑過才底線 */
a[href^="#/r/"]:not(.btn):not(.item){color:var(--tct-green);font-weight:700;text-decoration:none}
a[href^="#/r/"]:not(.btn):not(.item):hover,a[href^="#/r/"]:not(.btn):not(.item):focus-visible{text-decoration:underline}

/* 用印待辦：電腦看表格，手機改卡片（用印完成整排寬，不用橫向捲） */
.seal-cards{display:none}
.seal-card .doc{font-weight:700;margin-top:4px}
.seal-card .row{flex-wrap:nowrap}
@media(max-width:600px){.seal-table{display:none}.seal-cards{display:block}}

/* 查帳／匯出：篩選條、點名字篩選的標籤、匯出區 */
.auditbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 8px}
.auditbar select{width:auto;max-width:220px}
.auditbar input[type=search]{flex:1 1 220px;max-width:300px}
.mstep{display:flex;align-items:center;gap:8px}
.mstep b{min-width:112px;text-align:center;font-family:var(--f-num)}
.chips:empty{display:none}
.fchip{display:inline-flex;align-items:center;gap:6px;padding:2px 4px 2px 12px;border-radius:16px;background:var(--tct-gold-soft);color:var(--tct-gold-deep);font-weight:700}
.fchip button{border:0;background:none;color:inherit;font-size:20px;line-height:1;padding:2px 8px;cursor:pointer}
.exportcard{margin:8px 0}
.exportcard .num{font-family:var(--f-num)}
.linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--tct-green);cursor:pointer;text-align:left}
.linkbtn:hover,.linkbtn:focus-visible{text-decoration:underline}
.vlog{width:100%}
.vlog td{overflow-wrap:anywhere}
@media(max-width:600px){.auditbar select,.auditbar input[type=search]{flex:1 1 100%;max-width:none}}
.zipgrp{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center}
.zipgrp select{width:auto;max-width:200px}
.audittbl tfoot .auditsum{text-align:right;font-family:var(--f-num)}
.exportcard .exportbtns{margin-top:10px}

/* 執行長放行（payGroupTable 的 release 模式）：手機看卡片、整張卡點了就勾，不用橫向捲 */
.pay-cards{display:none}
.paycard{border:1px solid var(--line);border-radius:var(--r);background:var(--tct-surface);margin:8px 0}
.paycard .pc-main{display:flex;gap:12px;align-items:flex-start;padding:12px 12px 6px;cursor:pointer}
.paycard .pc-main input[type=checkbox]{flex:none;width:24px;height:24px;margin-top:2px}
.paycard .pc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.paycard .pc-t{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.paycard .pc-t b{font-size:17px;overflow-wrap:anywhere}
.paycard .pc-amt{font-family:var(--f-num);font-size:18px;font-weight:700;white-space:nowrap}
.paycard .pc-c{overflow-wrap:anywhere}
.paycard .flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.paycard .pc-foot{display:flex;align-items:center;gap:8px;padding:0 12px 10px 48px}
.paycard:has(input:checked){border-color:var(--green);background:var(--tct-green-soft)}
.pay-cards .pc-all{display:flex;gap:10px;align-items:center;font-weight:700;padding:4px 2px}
@media(max-width:600px){.paygrp.has-cards .pay-table{display:none}.paygrp.has-cards .pay-cards{display:block}}
.releasebar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.releasebar .picked{font-weight:700;font-family:var(--f-num);color:var(--tct-gold-deep)}
.releasebar .btn{flex:1 1 240px}
/* 本月支出：各表佔比長條 */
.share{display:inline-block;height:8px;border-radius:4px;background:var(--tct-gold);vertical-align:middle;margin-right:8px}
.sharecell{white-space:nowrap;font-family:var(--f-num);color:var(--muted)}
.bigsum{font-family:var(--f-num);font-size:28px;font-weight:700;color:var(--green)}
.reporttbl td:first-child{min-width:5.5em}
/* 廠商 LINE 綁定（M3） */
.vline{font-size:16px;color:var(--muted);white-space:nowrap;margin-top:4px}
.vacts{min-width:22em}
.vacts .btn{margin:2px 0}
.bindqr{text-align:center;margin:4px 0 10px}
.bindqr svg{width:220px;height:220px;max-width:100%}
.dlg-box p.bindhint{text-align:center;font-weight:700;color:var(--green);margin-bottom:10px}
.bindurl{flex-wrap:nowrap;gap:8px}
.bindurl input{flex:1;min-width:0;margin-bottom:0}
#dlgInput .bindurl input{margin-bottom:0}
.ubask{color:var(--tct-danger);font-weight:700}
/* 手機：報表四欄要塞進 390px——佔比條改放在百分比下面、欄距縮小，不再把「%」擠出畫面 */
@media(max-width:600px){
  .reporttbl th,.reporttbl td{padding:8px 6px}
  .reporttbl .sharecell .share{display:block;margin:4px 0 0}
}