/* tct-ui.css ── 泰昌堂內部系統共用樣式（正本在 湯agent/000_Agent/skills/tct-internal-ui/）
   用法：每個 repo 複製一份到自己的靜態目錄，在每頁 <head> 先載 Google Fonts，再載本檔，最後才是頁面自己的 <style>。
   頁面自己的變數請改成「引用」這裡的 --tct-*，不要再定義另一個綠。 2026-09-20 */
:root{
  --tct-green:#577B53;          /* CIS 主色（官網值，2026-09-07 定案）；停用 #5B7A54 */
  --tct-green-dark:#46603F;
  --tct-green-soft:#EDF1EA;
  --tct-gold:#D3BC8C;
  --tct-gold-deep:#A8905C;
  --tct-gold-soft:#F5EEDF;
  --tct-bg:#FAF7F0;             /* 後台米白；對外民眾端維持白底 */
  --tct-surface:#FFFFFF;
  --tct-surface-2:#F3EEE0;
  --tct-ink:#2B2E29;
  --tct-ink-2:#5E635A;
  --tct-ink-3:#8A8F82;
  --tct-line:#E4DCC9;
  --tct-danger:#B24B3C;
  --tct-danger-soft:#F7E7E3;
  --tct-success:#3E7A4C;
  --tct-success-soft:#E3EFE4;
  --tct-radius:8px;
  --tct-radius-lg:14px;         /* 觸控床卡這類大物件才用 */
  --tct-shadow:0 1px 2px rgba(43,46,41,.06),0 6px 20px rgba(43,46,41,.08);
  --tct-font:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC",sans-serif;
  --tct-font-display:"Noto Serif TC","Songti TC",serif;
  /* 標題字重 500（2026-09-20 阿湯裁決）：CIS 標準字是金萱 3.0 Bold，網頁替代的
     Noto Serif TC 700 對中文明體過於厚重，一律用 Medium。不要在標題寫 700/bold。 */
  --tct-weight-title:500;
  --tct-font-num:"Helvetica Neue",Arial,sans-serif;
}
html{-webkit-text-size-adjust:100%}
/* 標題不要用瀏覽器預設的 bold（對中文明體太重）；各頁若要更重請改 --tct-weight-title */
h1,h2,h3{font-weight:var(--tct-weight-title)}
body{margin:0;font-family:var(--tct-font);font-size:16px;line-height:1.6;color:var(--tct-ink);background:var(--tct-bg)}

/* 頂欄：綠底 60px。左 logo＋「泰昌堂｜系統名」；右 角色標籤 → 名字 → 連結 → 登出 */
.tct-topbar{background:var(--tct-green);color:#fff;min-height:60px;display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:50}
.tct-topbar .tct-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--tct-font-display);font-size:18px;font-weight:var(--tct-weight-title);letter-spacing:.02em;white-space:nowrap;min-width:0;flex-shrink:1}
.tct-topbar .tct-brand img{flex-shrink:0}
.tct-topbar .tct-brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tct-topbar .tct-brand img{width:32px;height:32px;border-radius:50%;background:#fff;object-fit:contain}
.tct-topbar .tct-brand .tct-sep{opacity:.55;font-weight:400;margin:0 2px}
.tct-topbar .tct-who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:15px;white-space:nowrap;flex-shrink:0}
.tct-topbar .tct-who a{color:#fff;text-decoration:none;opacity:.9}
.tct-topbar .tct-role{display:inline-block;font-size:12.5px;padding:1px 10px;border-radius:99px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45)}
.tct-topbar .tct-logout{background:#fff;color:var(--tct-green);border:1px solid #fff;border-radius:var(--tct-radius);padding:6px 14px;font-size:15px;font-family:inherit;cursor:pointer}
.tct-topbar select{font-family:inherit;font-size:15px;border-radius:var(--tct-radius);border:1px solid rgba(255,255,255,.6);background:#fff;color:var(--tct-ink);padding:5px 8px}

/* 頁籤：頂欄正下方一列，底線式 */
.tct-tabs{display:flex;gap:2px;border-bottom:1px solid var(--tct-line);background:var(--tct-surface);padding:0 12px;overflow-x:auto;scrollbar-width:thin}
.tct-tabs button,.tct-tabs a{background:none;border:0;border-bottom:3px solid transparent;padding:13px 14px;font-size:16px;font-family:inherit;color:var(--tct-ink-2);cursor:pointer;white-space:nowrap;text-decoration:none}
.tct-tabs button[aria-selected=true],.tct-tabs .active{color:var(--tct-green);border-bottom-color:var(--tct-green);font-weight:500}
.tct-tabs button:focus-visible,.tct-tabs a:focus-visible{outline:2px solid var(--tct-green);outline-offset:-2px}

/* 按鈕 */
.tct-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:16px;font-family:inherit;padding:9px 18px;border-radius:var(--tct-radius);border:1px solid var(--tct-green);background:var(--tct-surface);color:var(--tct-green);cursor:pointer;line-height:1.2;text-decoration:none}
.tct-btn.primary{background:var(--tct-green);color:#fff}
.tct-btn.primary:hover{background:var(--tct-green-dark)}
.tct-btn.danger{border-color:var(--tct-danger);color:var(--tct-danger)}
.tct-btn:disabled{opacity:.5;cursor:not-allowed}
.tct-btn:focus-visible{outline:2px solid var(--tct-green);outline-offset:2px}

/* 登入卡：圓印 logo、系統名、一句用途、綠色主鈕「用泰昌堂帳號登入」；本地帳密收成卡底小連結 */
/* 用 block+margin 而不是 flex：各系統的 JS 常寫 el.style.display='block'，inline 樣式會蓋掉 flex 讓卡片貼頂 */
.tct-login{padding:min(11vh,88px) 16px 24px}
.tct-login-card{width:100%;max-width:400px;margin:0 auto;background:var(--tct-surface);border:1px solid var(--tct-line);border-radius:var(--tct-radius-lg);padding:36px 32px;text-align:center;box-shadow:var(--tct-shadow)}
.tct-login-card img{width:56px;height:56px;border-radius:50%;margin-bottom:12px}
.tct-login-card h1{font-family:var(--tct-font-display);font-size:22px;font-weight:var(--tct-weight-title);color:var(--tct-green);margin:0 0 6px}
.tct-login-card p{margin:0 0 20px;color:var(--tct-ink-2);font-size:15px}
.tct-login-card .tct-btn{width:100%}
.tct-login-card .tct-alt{display:block;margin-top:16px;font-size:14px;color:var(--tct-ink-3)}
.tct-login-card .tct-alt a{color:var(--tct-ink-2)}

/* 窄螢幕：頂欄容許折行；角色標籤先收起，登出永遠看得到 */
@media (max-width:760px){
  .tct-topbar{flex-wrap:wrap;padding:8px 16px;min-height:0;row-gap:6px}
  .tct-topbar .tct-brand{font-size:16px}
  .tct-topbar .tct-role{display:none}
  .tct-login{padding-top:6vh}
}
