/* ===== jiazerkt 風 — 深藍導覽 + 淺灰底 + 白色圓角卡片 =====
   設計語言取自 jiazerkt（imacwhite:8447），字級尺度沿用 ftt-rental 2026-07-30 定案值
   （body 17px / 表格 16px / 儀表板 ×1.5），不縮回 jiazerkt 的緊湊尺度。
   ⚠ 本檔刻意保留舊版全部 selector 名稱，只換長相；52 個模板不必改。 */
:root{
  /* jiazerkt 主色 */
  --nav:#123c69; --nav-hi:#1d5fa7; --nav-txt:#dce8f5; --nav-dim:#9fb8d4; --nav-sep:#1d4d80;
  --bg:#f2f4f7; --card:#fff; --ink:#1a2433; --muted:#68788f;
  --line:#dbe2ea; --th:#eef3f8; --thg:#e2ebf4; --ring:#c6d0dc;
  --ok:#2e7d4f; --red:#b23b3b; --warn:#c77700;
  --shadow:0 1px 4px rgba(16,42,80,.08);
  --radius:10px;
  /* 舊變數保留（模板/內嵌樣式可能引用），對映到新色系 */
  --win-gray:#f2f4f7; --win-face:#fff; --win-light:#fff; --win-dark:#dbe2ea;
  --title1:#123c69; --title2:#1d5fa7; --title-grn1:#2e7d4f; --title-grn2:#3f9668;
  --pink:#fbf7ec; --yellow:#fbf7ec; --grid-alt:#f7f9fc; --link:#1d5fa7;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"PingFang TC","Microsoft JhengHei",system-ui,sans-serif;font-size:17px;line-height:1.6}

/* ---- 頁首：深藍列 ---- */
header{background:var(--nav);color:#fff}
.topbar{display:flex;justify-content:space-between;align-items:center;
  background:var(--nav);color:#fff;padding:9px 18px 4px;font-weight:400}
.brand a{color:#fff;text-decoration:none;font-size:24px;font-weight:700;letter-spacing:.3px}
.userbox{font-size:17.5px;color:var(--nav-dim)}
.userbox a{color:var(--nav-txt);margin-left:9px;text-decoration:none}
.userbox a:hover{color:#fff}
.userbox .role{background:rgba(255,255,255,.16);padding:2px 11px;border-radius:20px;font-size:16px}

/* ---- 導覽列：分組下拉（jiazerkt 式）---- */
nav{display:flex;flex-wrap:wrap;gap:22px;align-items:center;
  padding:7px 18px 12px;background:var(--nav)}
nav a{color:var(--nav-txt);text-decoration:none;font-size:20px;
  background:none;border:0;border-radius:0;padding:4px 0}
nav a:hover{color:#fff}
nav .grp{position:relative;display:inline-block}
nav .grp>span{color:var(--nav-txt);font-size:20px;cursor:default;display:inline-block;padding:4px 0}
nav .grp:hover>span{color:#fff}
nav .grp .dd{display:none;position:absolute;left:-12px;top:100%;background:var(--nav);
  min-width:214px;border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 8px 18px rgba(0,0,0,.35);z-index:10000;padding:6px 0}
nav .grp:hover .dd{display:block}
nav .grp .dd a{display:block;padding:9px 20px;font-size:19px;white-space:nowrap}
nav .grp .dd a:hover{background:var(--nav-hi);color:#fff}
nav .grp .dd .sect{color:var(--nav-dim);font-size:15.5px;padding:7px 20px 2px;
  border-top:1px solid var(--nav-sep)}

main{max-width:1680px;margin:20px auto;padding:0 16px}
footer{text-align:center;color:var(--muted);padding:18px;font-size:14px;margin-top:16px}

/* ---- 標題 ---- */
h1{font-size:22px;margin:0 0 14px;color:var(--ink);font-weight:700;
  background:none;padding:0;border:0;display:flex;align-items:center;gap:8px}
h1::before{content:none}
h2{font-size:18px;margin:20px 0 10px;color:var(--nav);font-weight:700;
  border-left:4px solid var(--nav-hi);padding-left:10px}
/* 頁面標題列：白卡條，左標題右動作 */
.bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  background:var(--card);border:0;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:12px 18px;margin-bottom:16px}
.bar h1{flex:1;border:0;margin:0}
.bar a,.bar div{margin-right:0}

/* ---- 搜尋／動作列 → 白卡 ---- */
.search{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--card);border:0;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:14px 18px;margin:0 0 16px}
.search input,.search select{padding:6px 9px;border:1px solid var(--ring);border-radius:6px;
  background:#fff;font-size:16px}
.search input:focus,.search select:focus{outline:2px solid rgba(29,95,167,.35);outline-offset:-1px}

/* ---- 按鈕：扁平藍 ---- */
.btn,button{display:inline-block;cursor:pointer;font-size:16px;color:#fff;
  text-decoration:none;padding:7px 16px;background:var(--nav-hi);
  border:0;border-radius:6px;line-height:1.5;font-family:inherit}
.btn:hover,button:hover{background:#17508f}
.btn:active,button:active{background:#12416f}
.btn.ghost{background:#7a8698}
.btn.ghost:hover{background:#69748a}
.mini{padding:3px 11px;font-size:14px;border-radius:5px}
.mini.ghost{background:var(--red)}
.mini.ghost:hover{background:#9c3131}
.btn.disabled{opacity:.4;cursor:default;pointer-events:none}
form.inline{display:inline}

/* ---- 資料表 ---- */
table{width:100%;border-collapse:collapse;background:#fff;border:0;font-size:16px}
th,td{padding:7px 12px;text-align:left;border:1px solid var(--line);white-space:nowrap}
th{background:var(--th);color:var(--ink);font-weight:600;border-color:var(--line);
  position:sticky;top:0}
th.grp{background:var(--thg)}
tbody tr:nth-child(even) td{background:var(--grid-alt)}
tbody tr:hover td{background:#eef3fb}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
td.overdue{color:var(--red);font-weight:700}
tr.unpaid td:first-child{box-shadow:inset 3px 0 0 var(--red)}
tr.paid{color:var(--muted)}
tr.sum td{background:var(--th);font-weight:700}

/* ---- 儀表板卡片 ---- */
.cards{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0}
.card{background:var(--card);border:0;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px 22px;min-width:172px;flex:1 1 auto}
.card .num{font-size:30px;font-weight:700;color:var(--nav);font-variant-numeric:tabular-nums}
.card .lbl{color:var(--muted);font-size:15px;margin-top:2px}
.card.ok .num{color:var(--ok)}.card.warn .num{color:var(--warn)}.card.danger .num{color:var(--red)}
.quick{display:flex;gap:12px;flex-wrap:wrap;margin-top:17px}
.muted{color:var(--muted);font-size:14.5px}

/* ---- 表單 ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(299px,1fr));gap:14px 21px;
  background:var(--card);border:0;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.grid label{display:flex;flex-direction:column;gap:5px;font-size:16px}
.grid label span{color:var(--muted);font-size:14.5px}
.grid label em{color:var(--red);font-style:normal}
.grid input,.grid select,.grid textarea{padding:6px 9px;font-size:16px;
  border:1px solid var(--ring);border-radius:6px;background:#fff;font-family:inherit}
.grid input:focus,.grid select:focus,.grid textarea:focus{outline:2px solid rgba(29,95,167,.35);outline-offset:-1px}
.grid input[readonly]{background:var(--pink);color:var(--muted)}
.actions{margin-top:17px;display:flex;gap:12px;flex-wrap:wrap}
input,select,textarea{font-family:inherit}

/* ---- 明細區 ---- */
.detail{background:var(--card);border:0;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 20px}
.detail div{padding:8px 0;border-bottom:1px solid var(--line)}
.detail div:last-child{border-bottom:0}
.detail span{display:inline-block;width:150px;color:var(--muted)}
.pay{display:flex;gap:4px;align-items:center}
.pay input{padding:3px 7px;border:1px solid var(--ring);border-radius:5px;background:#fff}
.tag{display:inline-block;padding:2px 10px;font-size:14px;border:1px solid var(--line);
  border-radius:20px;background:#e3ecf5;color:var(--nav)}
.tag.ok{background:#e6f5e9;color:var(--ok);border-color:#bcdfc3}

/* ---- 總計列 ---- */
.total-bar{background:var(--card);border:0;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:14px 18px;margin-top:14px;text-align:right;font-weight:700}
.total-bar .v{background:var(--yellow);border:1px solid var(--line);border-radius:6px;
  padding:3px 14px;margin-left:8px;font-variant-numeric:tabular-nums}

/* ---- 分頁 tabs ---- */
.tabs{display:flex;gap:4px;margin:0;border-bottom:2px solid var(--line);flex-wrap:wrap}
.tabs a{padding:9px 20px;text-decoration:none;color:var(--muted);font-size:16px;
  background:none;border:0;border-bottom:2px solid transparent;margin:0 0 -2px;border-radius:0}
.tabs a:hover{color:var(--nav-hi)}
.tabs a.on{background:none;color:var(--nav);font-weight:700;border-bottom-color:var(--nav-hi);top:0}

/* ---- 登入頁 ---- */
.login-bg{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:var(--nav)}
.login-card{background:#fff;padding:32px 34px;width:379px;border:0;border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:10px}
.login-card h1{background:none;color:var(--nav);margin:0 0 4px;border:0;padding:0;font-size:21px}
.login-card label{display:flex;flex-direction:column;gap:4px;font-size:14.5px;color:var(--muted)}
.login-card input{padding:10px;font-size:16px;border:1px solid var(--ring);border-radius:8px;background:#fff}
.login-card button{padding:10px;font-size:17px;margin-top:6px;border-radius:8px;width:100%}
.login-card .err{background:#fdeaea;color:var(--red);padding:8px;border:1px solid #ecc2c2;
  border-radius:8px;font-size:14.5px}
.tiny{font-size:14px}
.err{color:var(--red)}
.msg{background:#e6f5e9;border:1px solid #bcdfc3;padding:8px 12px;border-radius:8px;margin-bottom:12px}
a{color:var(--link)}

@media print{
  header,footer,.search,.bar a,.bar div,.actions,.quick,nav{display:none!important}
  body{background:#fff} main{margin:0;max-width:100%;padding:0}
  h1{background:#fff!important;color:#000!important;border:0;border-bottom:2px solid #000}
  .bar{box-shadow:none;padding:0}
  .card,.detail,.grid,.search,.total-bar,.chartbox,.imgbox{box-shadow:none;border:1px solid #999}
  table{font-size:12px}
}

/* ---- 表單：工具列／主資料／分頁面板 ---- */
.formtoolbar{display:flex;gap:10px;flex-wrap:wrap;background:var(--card);border:0;
  border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--shadow);
  padding:12px 18px;align-items:center}
.formhead{background:var(--card);border:0;border-top:1px solid var(--line);
  box-shadow:var(--shadow);padding:16px 18px}
.formhead .grid{background:transparent;border:0;padding:0;box-shadow:none}
.tabpanel{background:var(--card);border:0;border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.tabpanel .grid{background:transparent;border:0;padding:0;box-shadow:none}
.tabpanel.hidden{display:none}
.tabs{margin-top:10px}
.formtoolbar .sep{flex:1}
/* 2026-08-24 主檔刪除鈕：紅色，與存檔／離開明顯區隔，避免誤按 */
.dangerbtn{color:#c62828;border-color:#ef9a9a}
.dangerbtn:hover{background:#ffebee}
.pager{margin-top:10px}
.pager .bar{gap:6px;flex-wrap:wrap}

/* ---- 報表中心 ---- */
.repline{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.repline:last-child{border-bottom:0}
.repname{min-width:230px;font-size:17px}
.bar div{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---- 儀表板圖表（純 CSS）---- */
.chartrow{display:flex;gap:17px;flex-wrap:wrap;margin-top:17px}
.chartbox{flex:1;min-width:414px;background:var(--card);border:0;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 20px}
.chartbox h2{margin-top:5px}
.barchart{display:flex;align-items:flex-end;gap:12px;height:230px;padding-top:23px}
.barcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.barcol .bar{width:60%;background:linear-gradient(180deg,#4b86c9,var(--nav-hi));
  border:0;border-radius:4px 4px 0 0;box-shadow:none;padding:0;min-height:2px;display:block}
.barcol .barval{font-size:14px;color:var(--muted);margin-bottom:2px;font-variant-numeric:tabular-nums}
.barcol .barlbl{font-size:15px;margin-top:3px;color:var(--ink)}
.hbar{display:flex;align-items:center;gap:9px;margin:8px 0;font-size:15px}
.hbar-lbl{width:195px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-track{flex:1;background:var(--th);border:0;border-radius:20px;height:22px;overflow:hidden}
.hbar-fill{display:block;height:100%;background:linear-gradient(90deg,#f0a020,var(--warn))}
.hbar-val{width:155px;text-align:right;font-variant-numeric:tabular-nums}

/* ---- 中等寬度（769~1400px）：導覽列略縮，避免越南文標籤換行成兩排 ---- */
@media (min-width:769px) and (max-width:1439px){
  nav{gap:13px}
  nav a,nav .grp>span{font-size:19px}
  .brand a{font-size:23px}
  .userbox{font-size:16.5px}
}
@media (min-width:769px) and (max-width:1330px){
  nav{gap:10px}
  nav a,nav .grp>span{font-size:18px}
  .brand a{font-size:21.5px}
}
@media (min-width:769px) and (max-width:1180px){
  nav{gap:10px}
  nav a,nav .grp>span{font-size:17.5px}
  .brand a{font-size:21px}
}

/* ---- 行動裝置（<=768px）：下拉改攤平，避免 hover 在觸控失效 ---- */
@media (max-width:768px){
  body{font-size:17px}
  .topbar{flex-direction:column;align-items:flex-start;gap:4px;padding-bottom:8px}
  nav{gap:6px;padding:0 12px 12px}
  nav a{padding:7px 13px;font-size:15px;background:rgba(255,255,255,.10);border-radius:6px}
  nav a:hover{background:var(--nav-hi)}
  nav .grp{display:contents}
  nav .grp>span{display:none}
  nav .grp .dd,nav .grp:hover .dd{display:contents;position:static;background:none;
    box-shadow:none;padding:0;min-width:0}
  nav .grp .dd a{display:inline-block;padding:7px 13px;font-size:15px;
    background:rgba(255,255,255,.10);border-radius:6px}
  nav .grp .dd .sect{display:none}
  main{margin:10px auto;padding:0 8px}
  .bar{flex-direction:column;align-items:stretch;gap:8px}
  .cards{gap:8px}.card{flex:1;min-width:45%}
  .grid{grid-template-columns:1fr}
  .chartrow{flex-direction:column}.chartbox{min-width:0}
  table{display:block;overflow-x:auto;white-space:nowrap}
  .search{flex-direction:column;align-items:stretch}
  .search input,.search select{width:100%}
  .repline{flex-wrap:wrap}.repname{min-width:0;width:100%}
}

/* ---- 語言切換 / Chuyển ngôn ngữ (中 / VN) ---- */
.langswitch{display:inline-flex;gap:3px;margin-right:10px;vertical-align:middle}
.langswitch .lang{display:inline-block;min-width:30px;text-align:center;padding:2px 9px;
  font-size:17px;color:var(--nav-txt);background:rgba(255,255,255,.14);border-radius:20px;
  text-decoration:none;font-weight:400;line-height:1.7}
.langswitch .lang:hover{background:rgba(255,255,255,.26);color:#fff}
.langswitch .lang.on{background:#fff;color:var(--nav);font-weight:700}
.login-lang{justify-content:flex-end;margin:-6px 0 2px}
.login-lang .lang{color:var(--muted);background:#eef3f8}
.login-lang .lang.on{background:var(--nav-hi);color:#fff}

/* ---- 圖片庫 / Kho ảnh (NAS) ---- */
.imgbox{margin:18px 0;padding:16px 18px;border:0;border-radius:var(--radius);
  background:var(--card);box-shadow:var(--shadow)}
.imgbox h2{margin:0 0 10px;font-size:18px}
.gallery{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.gitem{width:166px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px;
  display:flex;flex-direction:column;gap:6px}
.gitem img{width:100%;height:126px;object-fit:cover;display:block;background:var(--th);
  border:0;border-radius:6px}
.gitem form{margin:0}
.gitem .btn.tiny{font-size:14px;padding:3px 9px;text-align:center;width:100%;border-radius:5px}
.imgupload{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:8px 0}

/* ==== 儀表板(首頁)版面 — 2026-08-10 安東：導覽列字放大、下方欄位縮小 ====
   原 ×1.5 放大（2026-07-30 定案）讓首頁高 1388px 要捲兩屏、且與導覽列 16px 落差過大，
   改為 ×1.05~1.2 的「一屏可讀」尺度；卡片改 CSS grid 等分，避免最後一張落單占整列。 */
/* 左右各留白 5%（合計 10%），內容不貼齊視窗邊緣（2026-08-10 安東） */
.dash{padding:0 4%}
@media (max-width:768px){.dash{padding:0 3%}}
.dash h1{font-size:21.5px;padding:0;gap:9px}
.dash h2{font-size:17.5px;margin:20px 0 9px;border-left-width:4px;padding-left:11px}
.dash .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(151px,1fr));
  gap:11px;margin:11px 0}
.dash .card{padding:12.5px 16px;min-width:0}
.dash .card .num{font-size:28px;line-height:1.2}
.dash .card .lbl{font-size:14.5px;margin-top:2px}
.dash .muted{font-size:13.5px}
/* 金額卡：預設 2×2 兩層（數字長，不擠成一排）；超寬螢幕才排成一列 4 欄 */
.dash .money{grid-template-columns:repeat(2,minmax(0,1fr))}
.dash .money .card .num{font-size:27px}
@media (min-width:1600px){.dash .money{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* 圖表 */
.dash .chartrow{gap:14px;margin-top:14px}
.dash .chartbox{padding:12.5px 16px;min-width:min(414px,100%)}
.dash .chartbox h2{margin-top:4px;font-size:16px}
.dash .barchart{height:189px;gap:11px;padding-top:20px}
.dash .barcol .barval{font-size:clamp(10px,.78vw,13px);margin-bottom:3px}
.dash .barcol .barlbl{font-size:13.5px;margin-top:4px}
.dash .hbar{font-size:14.5px;gap:9px;margin:6px 0}
.dash .hbar-lbl{width:171px}
.dash .hbar-track{height:22px}
.dash .hbar-val{width:135px}
.dash .quick{gap:9px;margin-top:14px}
.dash .quick .btn{font-size:15.5px;padding:8px 18px}
@media (max-width:1100px){
  .dash .cards{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
  .dash .money{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash .hbar-lbl{width:135px}.dash .hbar-val{width:117px}
}
@media (max-width:640px){
  .dash .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash .money{grid-template-columns:1fr}
}

/* ==== 備註等長文欄位限寬 ==== */
.note{display:inline-block;max-width:110px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:bottom}
@media (max-width:1100px){.note{max-width:80px}}

/* ==== 月報列印優化 ==== */
@media print{
  .cards{gap:5px;margin:6px 0}
  .card{background:#fff;border:1px solid #999;padding:6px 10px;box-shadow:none}
  .card .num{font-size:15px}.card .lbl{font-size:10px}
  .dash .card .num{font-size:15px}.dash .card .lbl{font-size:10px}
  h2{font-size:12px;margin:8px 0 4px;page-break-after:avoid}
  tr{page-break-inside:avoid}
  th{position:static}
  .detail{background:#fff;border:1px solid #999}
  a{text-decoration:none;color:#000}
}


/* ---- 表頭訊息通知鈴鐺 / Chuông thông báo (2026-08-14) ---- */
.userbox .bell{display:inline-block;padding:2px 11px;border-radius:20px;
  background:rgba(255,255,255,.16);font-size:16px;line-height:1.7;white-space:nowrap}
.userbox .bell:hover{background:rgba(255,255,255,.3);color:#fff}
.userbox .bell.has{background:#dc3545;color:#fff;font-weight:700}
.userbox .bell .badge{display:inline-block;min-width:20px;margin-left:6px;padding:0 6px;
  border-radius:20px;background:#fff;color:#dc3545;font-size:15px;font-weight:700;
  text-align:center}