/* ============================================================
   MAINH 新版介面 共用樣式 — mainhn.css
   奶茶 × 白（依設計稿 2a）
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@600&display=swap');

:root{
  --bg:#faf7f0;      /* 工作區底 */
  --panel:#ffffff;   /* 卡片 */
  --line:#ede6d8;    /* 卡片框線 */
  --hair:#f4efe4;    /* 髮絲線 */
  --hair2:#f6f1e7;   /* 表格列線 */
  --acc:#af9569;     /* 奶茶主色 */
  --ink:#3b342c;     /* 主文字 */
  --mid:#655a4a;     /* 次文字 */
  --faint:#ccbfa8;   /* 淡文字 */
  --dim:#bcac92;     /* 更淡 */
  --thbg:#f4eee1;    /* 表頭底 */
  --thtx:#8d7c61;    /* 表頭字 */
  --sel:#faf5ea;     /* 選取列 */
  --disbg:#f6f1e7;   /* 禁用底 */
  --disbd:#f0e9db;   /* 禁用框 */
  --btnline:#e0d5bf; /* 按鈕框 */
  --orange:#ee5622;  /* 品牌橘（僅 logo）*/
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC',sans-serif;
  font-size:14px;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--acc)}
.mono{font-family:'IBM Plex Mono',Consolas,'Courier New',monospace}

/* ---- 版面 ---- */
.app{display:flex;min-height:100vh}
.side{width:250px;flex:0 0 250px;background:#fff;border-right:1px solid var(--line);
  padding:32px 32px 36px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;align-self:flex-start;overflow-y:auto}
  /* ↑ 黏性側欄:內容再長,登出/回選單永遠停在可視範圍左下角(2026-07-14) */
.work{flex:1;min-width:0;padding:44px 56px;display:flex;flex-direction:column}

/* ---- Logo（直式堆疊，白邊置中）---- */
.logo{display:flex;flex-direction:column;gap:5px;width:106px;margin:40px auto 72px}
.logo .sq{background:var(--orange);color:#fff;width:106px;height:106px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  letter-spacing:3px;line-height:1.95}
.logo .en{font-size:12px;font-weight:700}
.logo .zh{font-size:12.5px;line-height:2.05}
.side .tag{font-size:10px;letter-spacing:3px;color:var(--dim);text-align:center}

/* ---- 側欄選單 ---- */
.nav{margin-top:36px;display:flex;flex-direction:column}
.nav a{display:flex;align-items:center;justify-content:center;gap:14px;padding:15px 0;
  border-bottom:1px solid var(--hair);font-size:14px;color:var(--ink);font-weight:400}
.nav a .c{font-size:11px;color:var(--mid);letter-spacing:1px}
.nav a:hover{color:var(--acc)}
.nav a.on{border-bottom:2px solid var(--acc);color:var(--ink);font-weight:500}
.nav a.on .c{color:var(--acc)}
.side .foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;font-size:12px}
.side .foot a{color:var(--dim);letter-spacing:1px;cursor:pointer}
.side .foot a:hover{color:var(--acc)}

/* ---- 頁首 ---- */
.crumb{font-size:10px;letter-spacing:4px;color:var(--acc)}
h1.ttl{font-family:'Noto Serif TC','PMingLiU',serif;font-weight:600;
  font-size:28px;letter-spacing:8px;margin:8px 0 0;color:var(--ink)}

/* ---- 卡片 ---- */
.card{background:var(--panel);border:1px solid var(--line)}
.card .chead{padding:12px 26px;border-bottom:1px solid var(--hair);
  display:flex;align-items:baseline;gap:12px}
.card .chead .cn{font-family:'Noto Serif TC','PMingLiU',serif;font-size:14px;
  letter-spacing:3px;color:var(--ink)}
.card .chead .ce{font-size:10px;letter-spacing:2px;color:var(--faint)}
.card .chead .cr{margin-left:auto;font-size:11px;color:var(--faint)}

/* ---- 欄位 ---- */
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f>label{font-size:11px;letter-spacing:2px;color:var(--acc);white-space:nowrap}
.f.ro>label{color:var(--faint)}
.f input,.f select{border:0;border-bottom:1px solid var(--ink);background:transparent;
  padding:5px 0;font-size:15px;color:var(--ink);font-family:inherit;outline:none;
  border-radius:0;width:100%}
.f input:focus,.f select:focus{border-bottom-color:var(--acc)}
.f input:read-only,.f input:disabled,.f select:disabled{
  border-bottom:1px dashed var(--btnline);color:var(--mid)}
.f.ro input{border-bottom:1px dashed var(--btnline);color:var(--faint)}
.f input.num{text-align:right}
.chk{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink);cursor:pointer;user-select:none}
.chk input{width:16px;height:16px;accent-color:var(--acc);margin:0}

/* ---- 表格 ---- */
.grid{display:flex;flex-direction:column;min-height:0}
.gh,.gr{display:grid;align-items:center;column-gap:8px}
.gh{padding:12px 22px 12px 19px;background:var(--thbg);font-size:11px;
  letter-spacing:2px;color:var(--thtx)}
.gr{padding:13px 22px 13px 19px;border-bottom:1px solid var(--hair2);
  border-left:3px solid transparent;font-size:14px;color:var(--mid);cursor:pointer}
.gr:hover{background:#fdfbf6}
.gr.sel{background:var(--sel);border-left-color:var(--acc);color:var(--ink)}
.gr.sel .b{font-weight:500}
.gr.dis{color:var(--faint)}
.glist{overflow:auto;flex:1;min-height:0}
.num{text-align:right}
.gnote{padding:10px 19px;border-top:1px solid var(--hair);font-size:11px;color:var(--faint)}

/* ---- 按鈕 ---- */
.btnbar{margin-top:18px;display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap}
.btn{padding:11px 24px;font-size:13px;letter-spacing:2px;color:var(--ink);
  border:1px solid var(--btnline);background:#fff;cursor:pointer;
  font-family:inherit;user-select:none}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn .k{font-size:10px;color:var(--acc)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fdfbf7;letter-spacing:3px}
.btn.pri:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.off,.btn.off:hover{background:var(--disbg);border-color:var(--disbd);
  color:var(--faint);cursor:default}
.btn.off .k{color:var(--faint)}
.vr{width:1px;height:26px;background:var(--btnline)}

/* ---- 底部提示列 ---- */
.hintbar{border-top:1px solid var(--line);padding-top:18px;margin-top:24px;
  display:flex;gap:30px;font-size:11px;color:var(--faint);letter-spacing:1px;align-items:flex-end}
.hintbar .r{margin-left:auto}

/* ---- 對話框 ---- */
.ovl{position:fixed;inset:0;background:rgba(59,52,44,.35);
  display:flex;align-items:center;justify-content:center;z-index:90}
.dlg{background:#fff;border:1px solid var(--line);min-width:380px;max-width:600px;
  box-shadow:0 10px 44px rgba(0,0,0,.16)}
.dlg .db{padding:32px 36px 24px;font-size:15px;line-height:1.9;color:var(--ink);white-space:pre-line}
.dlg .df{display:flex;justify-content:center;gap:10px;padding:0 36px 28px}

/* ---- 右鍵查詢視窗 ---- */
.dlg.sch{width:560px;max-height:72vh;display:flex;flex-direction:column;min-width:0}
.sch .sh{display:flex;align-items:center;padding:14px 20px;border-bottom:1px solid var(--hair)}
.sch .st{font-family:'Noto Serif TC','PMingLiU',serif;letter-spacing:4px;font-size:14px}
.sch .se{font-size:10px;letter-spacing:2px;color:var(--faint);margin-left:10px}
.sch .sx{margin-left:auto;cursor:pointer;color:var(--dim);font-size:18px;line-height:1;padding:2px 6px}
.sch .sx:hover{color:var(--acc)}
.sch input.q{margin:14px 20px;border:1px solid var(--btnline);padding:10px 12px;
  font-size:14px;outline:none;border-radius:0}
.sch input.q:focus{border-color:var(--acc)}
.sch .list{overflow:auto;border-top:1px solid var(--hair);min-height:120px}
.sch .row{display:flex;gap:16px;padding:10px 20px;border-bottom:1px solid var(--hair2);
  cursor:pointer;font-size:13px;color:var(--mid);align-items:center}
.sch .row:hover{background:var(--sel)}
.sch .row.on{background:var(--sel);color:var(--ink)}
.sch .row .k{color:var(--ink);min-width:72px}
.sch .row .ck{width:14px;height:14px;border:1px solid var(--btnline);flex:0 0 14px;
  display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff}
.sch .row.on .ck{background:var(--acc);border-color:var(--acc)}
.sch .row.on .ck::after{content:'✓'}
.sch .df{padding:14px 20px;border-top:1px solid var(--hair);justify-content:flex-end}
.sch .hint{padding:8px 20px 14px;font-size:11px;color:var(--faint)}

/* ==================== 新版操作 共用(2026-07-13) ==================== */
html.uiclassic .v2only{display:none !important}
html:not(.uiclassic) .v1only{display:none !important}
.hrow{display:flex;align-items:baseline;gap:16px}
.uimode{font-size:11px;color:var(--dim);letter-spacing:1px;cursor:pointer;
  border-bottom:1px dashed var(--btnline);margin-left:auto;white-space:nowrap}
.uimode:hover{color:var(--acc)}
.v2bar{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap;align-items:center}
.v2bar .spring{flex:1}
/* 新版介面:隱藏按鈕上的快捷鍵字母(快捷鍵本身仍可用;傳統模式照舊顯示) */
html:not(.uiclassic) .btn .k{display:none}
.v2banner{display:none;background:#fdf6e3;border:1px solid #e8d9ae;border-left:3px solid var(--acc);
  padding:10px 16px;font-size:12px;color:#8a6d1f;margin:12px 0 0;letter-spacing:1px}
.v2banner.show{display:block}
.v2savebar{display:none;padding:14px 26px;border-top:1px solid var(--hair);gap:10px;justify-content:flex-end}
.v2savebar.show{display:flex}
body.v2editing .f input:not(:read-only),body.v2editing .f select:not(:disabled){background:#fffdf5}
.btn.danger:hover{border-color:#c0603a;color:#c0603a}
.dfm{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:6px 36px 2px}
.dfm.n2{grid-template-columns:1fr 1fr}
.dchk{padding:10px 36px 0;font-size:13px}
@media (max-width:720px){
  .v2savebar{position:sticky;bottom:0;background:#fff;z-index:5}
  .dfm{grid-template-columns:1fr;padding:6px 22px 2px}
  .v2bar .btn{padding:10px 14px;font-size:12px}
}

/* ---- 右鍵查詢的手機「查」鈕(schn.js 自動加;桌機隱藏,手機顯示) ---- */
.schbtn{display:none}
@media (max-width:720px){
  .schbtn{display:block;position:absolute;right:0;bottom:3px;border:1px solid var(--btnline);
    background:#fff;color:var(--acc);font-size:12px;line-height:1;padding:5px 9px;
    font-family:inherit;letter-spacing:1px;cursor:pointer}
  .schbtn:active{background:var(--sel)}
}

/* ---- 訊息橫條 ---- */
.note{background:var(--sel);border:1px solid var(--line);border-left:3px solid var(--acc);
  padding:16px 24px;display:flex;align-items:center;gap:16px;font-size:13px}
.note a{color:var(--acc);border-bottom:1px solid var(--acc)}
.warn{background:#fff6f2;border:1px solid #f2d9cc;border-left:3px solid var(--orange);
  padding:12px 20px;font-size:12px;color:#8a4a2a}

@media (max-width:1100px){
  .work{padding:32px 28px}
  .side{width:210px;flex-basis:210px;padding:24px 22px 28px}
}

/* ==================== 手機版面(H1~H5 / 帳號管理 共用) ==================== */
@media (max-width:720px){
  .app{flex-direction:column}

  /* 側欄 → 頂部橫向導覽列(可左右滑;保留「回選單」) */
  .side{width:auto;flex:0 0 auto;flex-direction:row;align-items:center;gap:0;
    padding:8px 12px;border-right:0;border-bottom:1px solid var(--line);
    overflow-x:auto;white-space:nowrap;position:sticky;top:0;background:#fff;z-index:20;
    height:auto;overflow-y:visible}
  .side .logo,.side .tag{display:none}
  .side .nav{margin-top:0;flex-direction:row;flex:0 0 auto}
  .side .nav a{padding:8px 12px;border-bottom:0;font-size:13px;color:var(--ink)}
  .side .nav a .c{margin-right:5px}
  .side .nav a.on{border-bottom:2px solid var(--acc);color:var(--ink)}
  .side .foot{margin:0 0 0 6px;padding-left:10px;border-left:1px solid var(--line);flex:0 0 auto}
  .side .foot a{white-space:nowrap}

  .work{padding:18px 14px}
  h1.ttl{font-size:24px;letter-spacing:5px}
  .crumb{font-size:9px;letter-spacing:2px}

  /* 表單卡:多欄 → 2 欄 */
  .editcard,.hdr1,.hdr2,.pin,.acct,.det,.cond,.ind{
    grid-template-columns:1fr 1fr !important;gap:16px 14px !important;
    padding:18px 16px !important;margin-top:18px !important}
  .sect{margin:22px 0 10px}

  /* 資料表:整塊可左右捲,欄位維持對齊 */
  .grid,.card.grid{overflow-x:auto}
  .glist{overflow:visible;max-height:none !important}
  .gh,.gr{min-width:620px}
  .gh{padding:10px 14px}
  .gr{padding:11px 14px}

  /* 列印條件列 / 按鈕列 */
  .prtbar{flex-wrap:wrap;gap:14px 20px}
  .prtbar .hint{margin-left:0;width:100%}
  .prtbar .f{width:auto !important;flex:1 1 40%}
  .btnbar{gap:8px}
  .btn{padding:12px 18px}

  /* 帳號管理表列縮字 */
  .uhead,.urow{font-size:12px;padding:9px 10px}

  /* 對話框 / 右鍵查詢 適配窄螢幕 */
  .dlg{min-width:0;width:92vw;max-width:92vw}
  .dlg.sch{width:92vw;max-height:80vh}
  .dlg .db{padding:24px 22px}
  .dlg .df{padding:0 22px 22px}

  /* 訊息橫條 */
  .note{padding:14px 16px;gap:12px;flex-wrap:wrap}
}

/* ==================== 手機版補強(2026-07-13) ==================== */
@media (max-width:720px){
  /* 整頁不再左右捲:寬資料表一律改在各自卡片內橫向捲動(clip=iOS Safari 較可靠) */
  html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}

  /* iOS:輸入欄字級 <16px 聚焦時會自動放大整頁 → 手機統一 16px */
  .f input,.f select,.toolbar input,.sch input.q,.dlg input,.dlg select{font-size:16px}

  /* 觸控目標加大 */
  table.perm input{width:20px;height:20px}
  .chk input{width:18px;height:18px}
  .side .nav a{padding:10px 12px}
  .side .foot a{padding:6px 0}
  .sch .row{padding:12px 16px}
  .sres .sr{padding:11px 14px}
  .urow{padding:12px 10px}
  .dlg .df .btn{padding:12px 20px}

  /* 權限矩陣:功能名稱允許換行、整體縮字,窄螢幕不爆版 */
  table.perm td.fn{white-space:normal;font-size:12px;padding-left:8px}
  table.perm th,table.perm td{padding:7px 4px;font-size:12px}

  /* 資料表橫向捲動:慣性捲動更順 */
  .grid,.card.grid,.glist,.sch .list{-webkit-overflow-scrolling:touch}

  /* 鍵盤快捷鍵/右鍵提示在觸控裝置沒有意義 → 隱藏右側提示 */
  .hintbar .r{display:none}
  .hintbar{gap:14px;padding-top:12px;margin-top:16px}

  /* 對話框避開瀏覽器底部工具列 */
  .ovl{align-items:flex-start;padding:24px 0 12px}
  .dlg{margin:auto 0}
  .dlg.sch{max-height:78vh}
}