* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Microsoft JhengHei", "PingFang TC", Arial, sans-serif;
  background: #f0f3f5; color: #243137;
}
h1, h2, h3 { color: #1f4e5f; }
button {
  cursor: pointer; border: none; border-radius: 6px; padding: 8px 14px;
  background: #1f4e5f; color: #fff; font-size: 14px;
}
button.sec { background: #6b8a95; }
button.mini { padding: 1px 7px; font-size: 11px; margin-left: 6px; }
button.danger { background: #c0504d; }
button:hover { opacity: .9; }
input, select {
  padding: 7px 9px; border: 1px solid #c3ced3; border-radius: 6px;
  font-size: 14px; background: #fff;
}
/* 數字欄位(隻數/數量/單價…)不顯示上下箭頭,只手動輸入(保留數字鍵盤) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* login */
#login {
  display: flex; align-items: center; justify-content: center; height: 100vh;
}
#login .card {
  background: #fff; padding: 36px 40px; border-radius: 12px; width: 320px;
  box-shadow: 0 8px 30px rgba(0,0,0,.1); text-align: center;
}
#login input { width: 100%; margin: 8px 0; }
#login button { width: 100%; margin-top: 10px; }
.hint { color: #889; font-size: 12px; margin-top: 14px; }
.err { color: #c0504d; font-size: 13px; min-height: 18px; }

/* layout */
header.top {
  background: #1f4e5f; color: #fff; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
header.top .title { font-size: 18px; font-weight: bold; }
nav {
  background: #fff; padding: 0 12px; display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid #dde4e7; position: sticky; top: 0; z-index: 5;
}
nav button {
  background: none; color: #41606b; border-radius: 0; padding: 12px 14px;
  border-bottom: 3px solid transparent; font-size: 14px;
}
nav button.active { color: #1f4e5f; border-bottom-color: #1f4e5f; font-weight: bold; }
nav button.navback { color: #4a86c5; font-weight: 600; border-bottom: 3px solid transparent; }
nav button.navback:hover { background: #eef4fa; }
/* 回上頁獨立列:放在選單與內容之間,空的時候不佔位(選單不會跳動) */
#navback:empty { display: none; }
#navback { max-width: 1200px; margin: 8px auto 0; padding: 0 20px; }
#navback button.navback { background: #eef4fa; color: #2c6cad; font-weight: 600; border: 1px solid #cfe0f0; border-radius: 6px; padding: 6px 14px; font-size: 14px; cursor: pointer; }
#navback button.navback:hover { background: #e0edf9; }
main { padding: 20px; max-width: 1200px; margin: 0 auto; }

.cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
/* 其他管理:基本資料卡 + 狀態標籤 */
.card { background: #f7fafb; border: 1px solid #e2e8eb; border-radius: 8px; padding: 10px 14px; min-width: 120px; }
.card .k { color: #7a8c93; font-size: 12px; }
.card .vv { font-size: 18px; font-weight: bold; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.pill.warn { background: #fdecea; color: #c0392b; }
.pill.ok { background: #eafaf0; color: #2a9d3f; }
.pill.soon { background: #fff4e0; color: #b8860b; }
.kpi {
  background: #fff; border-radius: 10px; padding: 16px 20px; min-width: 150px;
  flex: 1; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.kpi .label { color: #7a8c93; font-size: 13px; }
.kpi .value { font-size: 26px; font-weight: bold; color: #1f4e5f; margin-top: 4px; }

.panel {
  background: #fff; border-radius: 10px; padding: 18px; margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
/* 可收合面板(如電費清單):summary 當標題,預設收合 */
.collapsepanel > summary { list-style: none; cursor: pointer; font-size: 16px; font-weight: bold;
  color: #1f4e5f; display: flex; align-items: center; gap: 8px; user-select: none; }
.collapsepanel > summary::-webkit-details-marker { display: none; }
.collapsepanel > summary::before { content: "▸"; color: #6b7d84; font-size: 13px; transition: transform .15s; }
.collapsepanel[open] > summary::before { transform: rotate(90deg); }
.collapsepanel > summary .hint-sm { font-size: 12px; font-weight: normal; color: #889; }
.collapsepanel[open] > summary { margin-bottom: 12px; }
.charts { display: flex; gap: 18px; flex-wrap: wrap; }
.charts .panel { flex: 1; min-width: 320px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 7px 9px; border-bottom: 1px solid #eef1f3; text-align: left; white-space: nowrap; }   /* 全域預設靠左:所有頁面(含未來新項目)表頭與資料切齊;數字欄如需靠右用 inline text-align:right */
.dbcontent th, .dbcontent td { text-align: left !important; }   /* 資料庫管理清單預設靠左,頭尾對齊整齊 */
.dbcontent th.num, .dbcontent td.num { text-align: right !important; }   /* 金額/數量欄頭尾皆靠右 */
.dbcontent th.ctr, .dbcontent td.ctr { text-align: center !important; }   /* 勾選欄(✓)置中 */
/* 入鴨表/死亡紀錄:全欄統一靠左(數字欄 .num 靠右),表頭與資料切齊 */
.intake-tbl th, .intake-tbl td,
.mortbatch-tbl th, .mortbatch-tbl td,
#mlist th, #mlist td { text-align: left !important; }
.intake-tbl th.num, .intake-tbl td.num { text-align: right !important; }
/* 金額一律靠右(全站通用,覆蓋上面的全靠左規則) */
th.amt, td.amt { text-align: right !important; }
/* 通用欄位對齊:日齡/狀態置中、數字(死亡/淘汰/合計)靠右 */
th.c-age, td.c-age, th.c-status, td.c-status { text-align: center !important; }
th.c-num, td.c-num { text-align: right !important; }
/* 蓋過 #mlist / .mortbatch-tbl 的全靠左(id/class 特異度需對應提高) */
#mlist th.c-age, #mlist td.c-age, #mlist th.c-status, #mlist td.c-status,
.mortbatch-tbl th.c-age, .mortbatch-tbl td.c-age { text-align: center !important; }
#mlist th.c-num, #mlist td.c-num,
.mortbatch-tbl th.c-num, .mortbatch-tbl td.c-num { text-align: right !important; }
th { background: #eaf1f4; color: #1f4e5f; position: sticky; top: 0; z-index: 2; }
tr:hover td { background: #f7fafb; }
.tablewrap { overflow-x: auto; }
/* 每日明細:表格於容器內垂直捲動,表頭第一排凍結(sticky top:0),往下滑仍看得到欄位名稱 */
.dm-scroll { max-height: calc(100vh - 180px); overflow-y: auto; }
.neg { color: #c0504d; font-weight: bold; }
.warn { background: #fde9e7 !important; }

.formrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.formrow .fld { display: flex; flex-direction: column; gap: 3px; }
.formrow .fld label { font-size: 12px; color: #7a8c93; }
.formrow input, .formrow select { min-width: 110px; }
.formrow .inline { display: flex; gap: 4px; align-items: center; }
.addopt { padding: 7px 10px; font-size: 14px; line-height: 1; }
.drugrow { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.drugrow select { min-width: 160px; }
.drugrow input { min-width: 140px; }
.drugrow .danger { padding: 6px 10px; }

/* ---- 可搜尋下拉(combobox)---- */
.sx-wrap { position: relative; display: inline-block; min-width: 140px; }
.formrow .fld .sx-wrap { width: 100%; }
.sx-input {
  width: 100%; min-width: 140px; box-sizing: border-box;
  padding: 7px 9px; border: 1px solid #c3ced3; border-radius: 6px;
  font-size: 14px; background: #fff;
}
.sx-input:focus { outline: none; border-color: #4a90a4; box-shadow: 0 0 0 2px rgba(74,144,164,.18); }
.sx-panel {
  position: absolute; z-index: 50; top: calc(100% + 2px); left: 0;
  min-width: 100%; max-height: 240px; overflow-y: auto;
  background: #fff; border: 1px solid #c3ced3; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.sx-item { padding: 7px 10px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.sx-item.sx-active { background: #e8f1f4; }
.sx-item.sx-cur { font-weight: 600; color: #1f4e5f; }
.sx-empty { padding: 8px 10px; font-size: 13px; color: #889; }

/* 資料庫管理:左選單 + 內容 */
.dblayout { display: flex; gap: 16px; align-items: flex-start; }
.dbmenu { flex: 0 0 160px; background: #fff; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05); padding: 8px; position: sticky; top: 56px; }
.dbmenu-h { font-size: 12px; color: #7a8c93; padding: 4px 10px 8px; }
.dbmenu button { display: block; width: 100%; text-align: left; background: none;
  color: #41606b; padding: 10px 12px; border-radius: 6px; margin-bottom: 2px; font-size: 14px; }
.dbmenu button.active { background: #1f4e5f; color: #fff; font-weight: bold; }
.dbcontent { flex: 1; min-width: 0; }
.btnbar { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
tr.selrow { cursor: pointer; }
tr.selrow:hover td { background: #f0f6f8; }
tr.selected-row td { background: #d6e9d2 !important; }
@media (max-width: 768px) {
  .dblayout { flex-direction: column; }
  .dbmenu { position: static; width: 100%; flex: none; display: flex; flex-wrap: wrap; gap: 4px; }
  .dbmenu .dbmenu-h { width: 100%; }
  .dbmenu button { width: auto; }
}

/* 資料庫管理 */
.dbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.dbcard { background: #f7fafb; border: 1px solid #e3ebee; border-radius: 8px; padding: 12px 14px; }
.dbcard h4 { margin: 0 0 8px; color: #1f4e5f; }
.dbcard .cnt { color: #889; font-size: 12px; font-weight: normal; }
.dblist { list-style: none; margin: 0 0 8px; padding: 0; max-height: 260px; overflow-y: auto; }
.dblist li { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 5px 4px; border-bottom: 1px solid #eef1f3; font-size: 14px; }
.liact { display: flex; gap: 2px; align-items: center; }
.ebtn { background: none; color: #1f4e5f; padding: 0 6px; font-size: 14px; line-height: 1; }
.ebtn:hover { background: #e3eef1; border-radius: 4px; }
.xbtn { background: none; color: #c0504d; padding: 0 6px; font-size: 16px; line-height: 1; }
.xbtn:hover { background: #fde9e7; border-radius: 4px; }
/* 統一編輯圖示鈕(鉛筆),與 .xbtn(刪除 ×)成對使用 */
.ebtn { background: none; color: #1f4e5f; padding: 0 6px; font-size: 15px; line-height: 1; }
.ebtn:hover { background: #e4eef1; border-radius: 4px; }
.dbadd { margin-top: 6px; display: flex; gap: 4px; align-items: center; }
.dbadd input { flex: 1; min-width: 0; }
.dbadd button { white-space: nowrap; }

/* 其他選項小卡(整理版) */
.optcard { background: #fff; border: 1px solid #e3ebee; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.05); display: flex; flex-direction: column; }
.optcard-h { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 13px; background: #1f4e5f; color: #fff; }
.optcard-h .t { font-weight: bold; font-size: 14px; }
.optcard-h .cnt2 { background: rgba(255,255,255,.22); border-radius: 10px; padding: 1px 9px; font-size: 12px; }
.opt-add { display: flex; gap: 6px; padding: 9px 11px; background: #f7fafb; border-bottom: 1px solid #eef1f3; }
.opt-add > input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #c3ced3; border-radius: 6px; font-size: 14px; }
.opt-add button { border: none; background: #2e7d52; color: #fff; border-radius: 6px; min-width: 36px; cursor: pointer; font-size: 16px; }
.opt-add.elec { flex-direction: column; }
.opt-add.elec .row3 { display: flex; gap: 6px; }
.opt-add.elec .row3 input { flex: 1; width: 0; min-width: 0; padding: 6px 8px; border: 1px solid #c3ced3; border-radius: 6px; font-size: 14px; }
.opt-add.elec button { width: 100%; font-size: 14px; padding: 6px; }
.opt-add input:focus { outline: none; border-color: #1f4e5f; box-shadow: 0 0 0 2px rgba(31,78,95,.15); }
.optlist { list-style: none; margin: 0; padding: 6px; max-height: 280px; overflow-y: auto; }
.optlist li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px; border-radius: 6px; }
.optlist li:hover { background: #f2f8fa; }
.opt-val { font-size: 14px; }
.opt-elec b { font-size: 14px; }
.opt-elec small { display: block; color: #7a8c93; font-size: 12px; margin-top: 1px; }
.opt-empty { color: #9aa7ac; font-size: 13px; padding: 8px; justify-content: flex-start; }
.opt-acts { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; flex: 0 0 auto; }
.optlist li:hover .opt-acts, .optlist li:focus-within .opt-acts { opacity: 1; }
/* 觸控裝置沒有 hover,編輯/刪除鈕需常駐顯示 */
@media (hover: none), (pointer: coarse) { .opt-acts { opacity: 1; } }
@media (max-width: 768px) { .dbgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) {
  .dbgrid { grid-template-columns: 1fr; }
  .opt-acts .ebtn, .opt-acts .xbtn { padding: 4px 9px; }
}
.badge { padding: 2px 8px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.badge.sold { background: #d6e9d2; color: #2e6b1f; }
.badge.raising { background: #fdeccd; color: #8a5a00; }
.badge.warn-badge { background: #faddd8; color: #8a3a00; }
.msg { color: #2e6b1f; font-size: 13px; }
.notice { background: #fff6e8; border: 1px solid #f0d9a8; border-radius: 8px;
  padding: 14px 16px; color: #8a5a00; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.notice button { margin-left: auto; }
tr.row-due td { background: #fff6e8; }
a.link { color: #1f4e5f; font-weight: bold; text-decoration: underline; cursor: pointer; }
a.link:hover { color: #2e7d8f; }

.topright { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topright #who { font-size: 14px; }

/* modal */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.modal-card {
  background: #fff; border-radius: 12px; padding: 24px; width: auto; min-width: 360px; max-width: min(680px, calc(100vw - 32px));
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
  max-height: calc(100vh - 32px); overflow-y: auto;   /* 內容過長時可捲動,避免下方欄位被切掉碰不到 */
}
.modal-card .fld { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.modal-card .fld label { font-size: 12px; color: #7a8c93; }
.modal-card input { width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---------- 手機 / 平板 RWD ---------- */
@media (max-width: 768px) {
  header.top { flex-direction: column; align-items: stretch; gap: 8px; }
  header.top .title { font-size: 16px; }
  .topright { justify-content: space-between; }
  nav { padding: 0 4px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  nav button { padding: 11px 10px; font-size: 13px; white-space: nowrap; }
  main { padding: 12px; }
  .cards { gap: 10px; }
  .kpi { min-width: calc(50% - 5px); padding: 12px 14px; }
  .kpi .value { font-size: 21px; }
  .charts { flex-direction: column; }
  .charts .panel { min-width: 0; }
  .panel { padding: 14px; }
  .formrow .fld { flex: 1; min-width: calc(50% - 5px); }
  .formrow input, .formrow select { min-width: 0; width: 100%; }
  .formrow > button { width: 100%; }
  .modal-card { width: 100%; }
  /* 選單置頂常駐,滑長清單時仍可切分頁 */
  nav { position: sticky; top: 0; z-index: 20; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
  /* 表格更緊湊、好讀;容器加框讓「可左右滑」更明顯 */
  table { font-size: 13px; }
  th, td { padding: 8px 8px; }
  h3 { font-size: 16px; }
  .tablewrap { border: 1px solid #eef1f3; border-radius: 8px; }
  /* 清單表格改用自然寬度+左右滑(不擠成一團),欄位不換行好讀 */
  .tablewrap table { min-width: max-content; }
  .tablewrap th, .tablewrap td { white-space: nowrap; }
  input, select { font-size: 16px; }   /* iOS 聚焦不自動放大畫面 */
  /* 排班/注射月曆:格子縮小、字縮小,一頁看得更完整 */
  .sh-cal td, .ij-cal td { height: 90px; padding: 3px 4px 5px; }
  .sh-dnum, .ij-dnum { font-size: 13px; }
  .sh-zline, .sh-znames, .ij-line { font-size: 11px; }
  /* 觸控按鈕加大好按 */
  .ebtn, .xbtn { padding: 6px 10px; font-size: 17px; }
}
@media (max-width: 480px) {
  th, td { padding: 6px 6px; font-size: 12px; }
  .badge { font-size: 11px; padding: 2px 6px; }
  .kpi { min-width: calc(50% - 5px); }
  .modal-card { padding: 16px; }
}
@media (max-width: 420px) {
  .kpi { min-width: 100%; }
}
@media print {
  nav, header.top, .noprint { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .panel { box-shadow: none; border: none; }
  #costrep-print { max-width: none; padding: 0; }
  .dm-scroll { max-height: none; overflow: visible; }   /* 列印時不截斷,完整印出每日明細 */
}

/* 帳號管理:權限欄改為可換行的並排小標籤 */
td.permcell { white-space: normal; font-size: 12px; max-width: 560px; vertical-align: top; }
.perm-wrap { display: flex; flex-direction: column; gap: 5px; }
.perm-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.perm-tag { font-size: 11px; font-weight: 700; color: #fff; border-radius: 4px; padding: 1px 6px; flex: none; }
.perm-tag.use { background: #1f4e5f; }
.perm-tag.view { background: #8a99a0; }
.perm-chip { font-size: 12px; background: #eef3f5; color: #2a4048; border: 1px solid #dbe4e7; border-radius: 4px; padding: 1px 6px; }

/* ---------- 進銷存首頁(天心式流程圖) ---------- */
.erp-wrap { display: flex; gap: 16px; align-items: flex-start; }
.erp-side { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.erp-cat { text-align: left; padding: 12px 14px; border: none; border-radius: 6px; background: #f3f5f7; cursor: pointer; font-size: 15px; color: #334; }
.erp-cat.active { background: #4a86c5; color: #fff; }
.erp-main { flex: 1; padding: 20px 12px; min-height: 320px; }
.erp-top, .erp-bottom { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.erp-top { justify-content: flex-start; }
.erp-bottom { justify-content: flex-end; }
.erp-flow { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 22px 0; }
.erp-grid { gap: 40px; justify-content: flex-start; align-items: flex-start; }
.erp-col { display: flex; flex-direction: column; gap: 16px; }
.erp-node { min-width: 120px; padding: 12px 20px; background: #fff; border: 1px solid #d5dbe0; border-radius: 6px; text-align: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.06); font-size: 15px; color: #2c3e50; transition: .15s; user-select: none; letter-spacing: 1px; }
.erp-node:hover { border-color: #4a86c5; box-shadow: 0 2px 8px rgba(74,134,197,.25); transform: translateY(-1px); }
/* 物流管理:分群卡片 */
.wl-groups { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.wl-group { background: #fbfdfe; border: 1px solid #e0e9ec; border-radius: 12px; padding: 12px 16px 14px; }
.wl-gtitle { font-weight: 700; color: #1f4e5f; font-size: 15px; margin-bottom: 10px; border-left: 4px solid #4a86c5; padding-left: 10px; letter-spacing: 1px; }
.wl-gbody { display: flex; flex-wrap: wrap; gap: 10px; }
.wl-gbody .erp-node { margin: 0; min-width: 158px; flex: 0 0 auto; letter-spacing: 0; }
.wl-gbody.wl-g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wl-gbody.wl-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wl-gbody.wl-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wl-gbody.wl-g2 .erp-node, .wl-gbody.wl-g3 .erp-node, .wl-gbody.wl-g4 .erp-node { min-width: 0; }
@media (max-width: 640px) { .wl-gbody .erp-node { flex: 1 1 46%; min-width: 0; } .wl-gbody.wl-g3, .wl-gbody.wl-g4 { grid-template-columns: repeat(2, 1fr); } }
.erp-head { background: #eef3f8; }
.erp-todo { color: #9aa4ab; background: #f7f8f9; border-style: dashed; letter-spacing: 0; }
.erp-caret { color: #4a86c5; font-size: 12px; }
.erp-arrow { color: #6fbf73; font-size: 22px; font-weight: bold; }
@media (max-width: 640px) {
  .erp-wrap { flex-direction: column; }
  .erp-side { flex-direction: row; flex-wrap: wrap; min-width: 0; width: 100%; }
  .erp-cat { flex: 1; text-align: center; }
  .erp-arrow { transform: rotate(90deg); }
  .erp-flow { flex-direction: column; }
}

/* 進銷存流程圖:下拉子選單 */
.erp-submenu { display: flex; flex-direction: column; gap: 4px; margin: -6px 0 4px 14px; padding-left: 8px; border-left: 2px solid #cfe0d0; }
.erp-submenu > div { padding: 7px 14px; background: #f6faf6; border: 1px solid #dbe7dc; border-radius: 5px; cursor: pointer; font-size: 14px; color: #33613a; }
.erp-submenu > div:hover { background: #e6f2e7; border-color: #6fbf73; }