/* 人員中心頁面樣式。共用底稿是 tct-ui.css（正本在 tct-internal-ui 技能），
   這裡只放本系統自己的版面，顏色與字型一律引用 --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}

/* ── 頂欄與導覽（結構來自 tct-ui.css 的 .tct-topbar／.tct-tabs） ─── */
#top{position:sticky;top:0;z-index:50}
#top .tct-topbar{position:static}
.tct-topbar .tct-sys{font-family:var(--f-display)}
.tct-topbar .tct-who span{font-size:15px}
.tct-tabs a.on{color:var(--tct-green);border-bottom-color:var(--tct-green);font-weight:700}

/* ── 版面 ─────────────────────────────────── */
.wrap{max-width:1180px;margin:0 auto;padding:16px 20px 90px}
h2{font-size:22px;font-family:var(--f-display);color:var(--green);margin:18px 0 8px}
.card{background:var(--tct-surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:12px 0}
.card h3{margin:0 0 4px;font-size:18px;color:var(--green)}
.card .desc{font-size:16px;color:var(--muted);margin:0 0 8px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.sp{flex:1}

/* ── KPI ──────────────────────────────────── */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kpi .big{font:700 34px var(--f-num);color:var(--green)}
.kpi .card{margin:0;cursor:default}
.kpi a.card{display:block;text-decoration:none;color:inherit;cursor:pointer}
.kpi a.card:hover{border-color:var(--green)}
.warn{color:var(--warn);font-weight:700}
.kpi .big.warn{color:var(--warn)}

/* ── 表單元件 ─────────────────────────────── */
label{font-size:16px}
textarea,input[type=text],input[type=number],input[type=date],input[type=password],select{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:10px;font:16px var(--f-body);background:var(--tct-surface);color:var(--ink)}
textarea{min-height:72px}
input[type=checkbox]{width:20px;height:20px;vertical-align:middle}
input:disabled,select:disabled,textarea:disabled{background:#F4F1EA;color:var(--ink);-webkit-text-fill-color:var(--ink);opacity:1;cursor:default}
.f{margin:0 0 10px}
.f label{display:block;font-weight:700;margin-bottom:4px}
.btn{display:inline-block;border:1px solid var(--green);border-radius:var(--r);padding:10px 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);border-color:var(--green)}
.btn.d{background:var(--tct-surface);color:var(--warn);border-color:var(--warn)}
.btn.s{padding:6px 12px;font-size:16px}
.btn:disabled{opacity:.5;cursor:default}
.btn.wide{display:block;width:100%;margin-top:10px}
.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}

/* ── 表格 ─────────────────────────────────── */
.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;font-size:16px}
td.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)}
.empty{color:var(--muted);padding:10px 0}

/* ── 標籤與提示 ───────────────────────────── */
.pill{display:inline-block;border-radius:12px;padding:0 10px;font-size:16px;white-space:nowrap}
.pill.g{background:var(--tct-success-soft);color:var(--tct-success)}
.pill.r{background:var(--tct-danger-soft);color:var(--tct-danger)}
.pill.y{background:var(--tct-gold-soft);color:var(--tct-gold-deep)}
.pill.b{background:#E5EAF0;color:#31495e}
/* 可以點的 pill（例：資料來源＝申報，點了看是哪一筆申報寫進來的） */
.pill.lk{text-decoration:underline;cursor:pointer}
.note{font-size:16px;color:var(--muted)}
.err{color:var(--warn);font-weight:700}
.ok{color:var(--tct-success);font-weight:700}
.na{color:var(--muted)}

/* ── 唯讀區與拖放區 ───────────────────────── */
.ro{background:#F4F1EA}
.ro th{background:#EBE6D9}
.drop{border:2px dashed var(--green);border-radius:var(--tct-radius-lg);padding:32px;text-align:center;background:var(--tct-surface)}
.drop.over{background:var(--tct-green-soft)}
.drop p{margin:0 0 10px;font-size:17px}

/* ── 分頁籤（區塊內切換，非主導覽） ─────────── */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.tabs button{border:1px solid var(--line);background:var(--tct-surface);color:var(--ink);border-radius:var(--r) var(--r) 0 0;padding:9px 16px;font:700 16px var(--f-body);cursor:pointer}
.tabs button.on{background:var(--green);color:#fff;border-color:var(--green)}

/* ── 登入卡（結構來自 tct-ui.css 的 .tct-login／.tct-login-card） ── */
#app .tct-login{min-height:calc(100vh - 112px);padding:8px 0}
.tct-login-card .tct-alt a{cursor:pointer;text-decoration:underline}
.tct-login-card .login-local{text-align:left;margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.tct-login-card .login-local .tct-btn{margin-top:4px}
.tct-login-card .note,.tct-login-card .err{font-size:15px;margin:10px 0 0}
.hide{display:none !important}
.only-narrow{display:none}

/* ── 對話框與提示條 ───────────────────────── */
.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:60}
.toast.show{opacity:1}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;padding:20px;z-index:70}
.modal.show{display:flex}
.modal .box{background:var(--tct-surface);border-radius:var(--tct-radius-lg);padding:20px;max-width:420px;width:100%;box-shadow:var(--tct-shadow)}
.modal .box p{margin:0 0 16px;font-size:17px;white-space:pre-wrap}
.modal .box .row{justify-content:flex-end}

@media(max-width:860px){
  .only-narrow{display:block}
  .two{grid-template-columns:1fr}
  .wrap{padding:12px 20px 80px}
  .tct-topbar{padding:0 16px;gap:8px}
  .tct-topbar .tct-brand{font-size:16px}
  .tct-topbar .tct-who{gap:8px}
  .tct-tabs{padding:0 8px}
  .tct-tabs a{padding:12px 10px}
}
@media(max-width:560px){
  .tct-topbar .tct-role{display:none}
}

/* 導覽列最右邊的「使用說明」：跟其他頁籤區隔開 */
.tct-tabs .nav-help{margin-left:auto}
/* 說明頁在系統裡顯示時，寬度交給 .doc 控制，外層不要再限制一次 */
.wrap > .helpdoc{margin:-16px -20px -90px}
.wrap > .helpdoc .doc{padding-top:8px}
/* 列印說明頁時不要把系統頁首一起印出來 */
@media print{#top{display:none!important}.wrap>.helpdoc{margin:0}}

/* 名單頁的來源子頁籤：鋒形匯入的員工／手動維護的醫師分開看 */
.subtabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.subtabs .subtab{font:inherit;font-size:16px;cursor:pointer;padding:8px 16px;border-radius:999px;
  border:1px solid var(--tct-line);background:var(--tct-surface);color:var(--tct-ink-2)}
.subtabs .subtab:hover{border-color:var(--tct-gold-deep);color:var(--tct-ink)}
.subtabs .subtab.on{background:var(--tct-green);border-color:var(--tct-green);color:#fff}
#srcNote{margin:0 0 12px}

/* 首頁的組織現況表：數字靠右、合計那列粗一點 */
table.org td.num, table.org th.num{text-align:right;font-family:var(--f-num)}
table.org td.b{font-weight:700;color:var(--green)}
table.org tfoot th, table.org tfoot td{border-top:2px solid var(--line);font-weight:700}

/* 人資待辦收成小卡 */
.card.sub{background:var(--tct-surface-2, #F3EEE0)}
.kpi.small{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.kpi.small .mini{display:block;background:var(--tct-surface,#fff);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 12px;text-decoration:none;color:inherit}
.kpi.small a.mini:hover{border-color:var(--green)}
.kpi.small .mini .t{display:block;font-size:15px;color:var(--muted)}
.kpi.small .mini .v{display:block;font:700 26px var(--f-num);color:var(--green);line-height:1.3}
.kpi.small .mini .n{display:block;font-size:14px;color:var(--muted)}
.kpi.small .mini.warn .v{color:var(--warn)}

/* 組織圖：上面公司一格，下面各單位一排 */
.orgtop{display:flex;justify-content:center}
.orgline{height:18px;border-left:2px solid var(--line);width:0;margin:0 auto}
.units{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.unit{display:block;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  text-decoration:none;color:inherit;background:var(--tct-surface,#fff);text-align:center}
a.unit:hover{border-color:var(--green)}
.unit.top{border-color:var(--green);background:var(--tct-green-soft,#EDF1EA);min-width:240px}
.unit .u-name{display:block;font-size:18px;font-weight:500;color:var(--green)}
.unit .u-head{display:block;font-size:15px;color:var(--ink,#2B2E29);margin:2px 0}
.unit .u-num{display:block;font:700 24px var(--f-num);color:var(--green)}
.unit .u-split{display:block;font-size:14px;color:var(--muted)}

/* 內文連結沿用品牌綠，不要瀏覽器預設的藍底線 */
.card p a, .note a{color:var(--green);text-decoration:none;border-bottom:1px solid var(--tct-gold,#D3BC8C);padding-bottom:1px}
.card p a:hover, .note a:hover{border-bottom-color:var(--green)}
/* 組織圖：公司那格往下接一條橫線到各單位 */
.orgline{height:16px;border-left:2px solid var(--line);width:0;margin:0 auto}
.units{position:relative;padding-top:10px}
.units::before{content:'';position:absolute;top:0;left:10%;right:10%;border-top:2px solid var(--line)}
/* 首頁只有真的卡住才出現的提醒框 */
.card.warnbox{border-color:var(--warn);background:var(--tct-danger-soft,#F7E7E3)}
.card.warnbox p{margin:4px 0}

/* ── 保險頁 ─────────────────────────────── */
/* 子頁籤在保險頁是連結（要能直接開網址），button 的樣式 <a> 也吃得到，只差底線 */
.subtabs a.subtab{text-decoration:none}
/* 低報是要補錢的，紅字；高報只是多繳，灰字提示就好 */
.gap-low{color:var(--tct-danger,#b42318);font-weight:600}
.gap-high{color:#777}
.ins-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
/* 金額欄的表頭也靠右，才會跟數字對齊 */
th.num{text-align:right}
/* 申報明細成為唯一入口之後，名單的保險卡以顯示為主：數字用這個樣式印，不再是一格一格的輸入框 */
.ro-val{padding:8px 0;border-bottom:1px solid var(--line);min-height:24px}
.ro-val.n{text-align:right;font-variant-numeric:tabular-nums}
/* 「直接修正」是後門，收起來、標黃邊，讓人一眼看出跟平常的操作不一樣 */
details.fixbox{margin-top:12px;border:1px solid var(--tct-gold,#D3BC8C);border-radius:var(--r);padding:10px 14px;background:var(--tct-surface-2)}
details.fixbox>summary{cursor:pointer;font-weight:700;font-size:16px;color:var(--green)}
details.fixbox[open]>summary{margin-bottom:8px}
/* 備註改條列式之後，一條印一列 */
ul.notelist{margin:0;padding-left:18px}
ul.notelist li{margin:2px 0}