:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #1f2933;
  --muted: #6b7280;
  --accent: #c2410c;
  --accent-ink: #ffffff;
  --border: #e5e7eb;
  --error: #b91c1c;
}

* { box-sizing: border-box; }

/* `hidden` 屬性必須贏過所有作者樣式。
   瀏覽器對 [hidden] 的 display:none 來自 UA 樣式表，任何作者端的 display 宣告（例如
   `.orig-value { display: block }`、`.dt-filter-fields { display: flex }`）都會蓋掉它，
   造成「明明下了 hidden 卻整片顯示出來」。實測抓到過：票券明細每一格都跑出「原值：…」。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.brand { font-weight: 700; text-decoration: none; color: var(--ink); }
.topbar-nav { display: flex; align-items: center; gap: 0.75rem; }
.who { color: var(--muted); font-size: 0.9rem; }

.container {
  max-width: 720px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* 寬版頁面（歷史 / 帳號 / Benchmark）：依螢幕自動調整——用到視窗寬度的 94%，
   但在超寬螢幕封頂於 1760px 以維持可讀性。取代原本固定 1180px 造成大螢幕留白過多。 */
.container.wide { max-width: min(94vw, 1760px); }

.nav-link { color: var(--accent); text-decoration: none; font-size: 0.9rem; }
.nav-link:hover { text-decoration: underline; }

.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.55rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.95rem;
}
.btn-secondary { background: #475569; }

select {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
}

.table-wrap { overflow-x: auto; }

table.grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
}
table.grid th, table.grid td {
  border: 1px solid var(--border);
  padding: 0.35rem 0.5rem;
  text-align: left;
  white-space: nowrap;
}
table.grid th { background: #f1f5f9; position: sticky; top: 0; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-success { background: #dcfce7; color: #166534; }
.badge-review { background: #fef9c3; color: #854d0e; }
.badge-failed { background: #fee2e2; color: #991b1b; }
.badge-processing { background: #dbeafe; color: #1e40af; }

td.needs-review { background: #fef9c3; }
.review-note { color: #854d0e; font-size: 0.75rem; display: block; margin-top: 0.15rem; white-space: normal; max-width: 320px; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; font-size: 0.9rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.login-card { max-width: 360px; margin: 3rem auto; }

h1 { margin-top: 0; font-size: 1.4rem; }

.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); }

input[type="text"], input[type="password"] {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
}

button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  background: var(--accent);
  color: var(--accent-ink);
}

.link-btn { background: transparent; color: var(--accent); padding: 0.3rem 0.5rem; }
.link-btn.danger { color: var(--error); }
.logout-form { margin: 0; }

.error {
  background: #fef2f2;
  color: var(--error);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
}

.muted { color: var(--muted); font-size: 0.9rem; }

/* --- 主檔查表「來源」輔助面板（master_lookup.js；票券明細 / benchmark 共用）--- */
.ml-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 900;
}
.ml-overlay.ml-open { display: block; }
.ml-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(56rem, 96vw);
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}
.ml-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border);
}
.ml-title { font-weight: 700; font-size: 1.05rem; }
.ml-sub { color: var(--muted); font-size: 0.82rem; margin-top: 0.15rem; }
.ml-close { background: transparent; color: var(--muted); font-size: 1.4rem; line-height: 1; padding: 0 0.3rem; }
.ml-search {
  display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
  padding: 0.6rem 1.1rem; border-bottom: 1px solid var(--border); background: #f8fafc;
}
.ml-search select, .ml-search input[type="text"] { padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.ml-search .ml-q { flex: 1; min-width: 12rem; }
.ml-search button { padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.ml-only-cust { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--muted); }
.ml-body { padding: 0.9rem 1.1rem 2rem; overflow: auto; flex: 1; }
.ml-sec { margin-bottom: 1.4rem; }
.ml-sec-title { font-size: 0.92rem; margin: 0 0 0.25rem; }
.ml-note { color: var(--muted); font-size: 0.8rem; margin: 0 0 0.45rem; }
.ml-table td { white-space: normal; }
/* 主要來源列：一眼看出「就是這一列把值換算出來的」。 */
tr.ml-emph td { background: #ecfdf5; font-weight: 600; }

/* 值旁的放大鏡按鈕：不搶版面，滑過才明顯。 */
.ml-btn {
  background: transparent; color: var(--muted); border: 0; cursor: pointer;
  padding: 0 0.15rem; font-size: 0.8rem; line-height: 1; vertical-align: middle;
}
.ml-btn:hover { color: var(--accent); }
/* 查表換算後的正式名稱註記（灰字附在值後面，不必開面板就能核對）。 */
.ml-name { color: var(--muted); font-size: 0.75rem; display: block; white-space: normal; max-width: 22rem; }

/* --- 上傳頁拖拉區（upload_dropzone.js）--- */
.dropzone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1rem;
  background: #fafafa;
  transition: border-color 0.12s, background 0.12s;
}
/* 拖到框上：邊框與底色一起變，讓「可以放手了」非常明確。 */
.dropzone.dz-over { border-color: var(--accent); background: #fff7ed; }
/* 正在遞迴展開資料夾（大資料夾要一兩秒）。 */
.dropzone.dz-busy { opacity: 0.7; cursor: progress; }

.dz-hint { margin: 0 0 0.75rem; font-size: 0.95rem; }
.dz-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 0.5rem; }
.dz-actions .btn { padding: 0.4rem 0.8rem; font-size: 0.9rem; }
.dz-summary { margin: 0.25rem 0 0; font-size: 0.9rem; }

.dz-list { list-style: none; margin: 0.5rem 0 0; padding: 0; max-height: 15rem; overflow-y: auto; }
.dz-list li {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.1rem; border-bottom: 1px solid var(--border); font-size: 0.85rem;
}
.dz-list li:last-child { border-bottom: 0; }
.dz-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-size { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.dz-remove { padding: 0 0.35rem; font-size: 0.8rem; }

.dz-rejected { margin-top: 0.6rem; font-size: 0.82rem; color: #854d0e; background: #fef9c3;
               border: 1px solid #fde68a; border-radius: 8px; padding: 0.5rem 0.7rem; }
.dz-rejected p { margin: 0 0 0.25rem; font-weight: 600; }
.dz-rejected ul { margin: 0; padding-left: 1.1rem; }

#dz-error { margin: 0.6rem 0 0; }

/* 由腳本接手後，原生 file input 仍留在表單裡（送出的還是它），只是不顯示。
   用 clip 而非 display:none，避免瀏覽器對隱藏欄位的驗證/click 行為差異。 */
.dz-hidden-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- SAP 匯入檔下載列（上傳結果頁）--- */
.export-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
/* 全部處理完成前的停用狀態（仍是 <a>，靠 aria-disabled + 這個 class 表達）。 */
.btn-disabled { opacity: 0.5; cursor: not-allowed; }

/* --- 票券明細：9 欄位即時修正 --- */
.edit-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0.75rem 0 0.25rem; }
#edit-status.ok { color: #166534; }
#edit-status.err { color: #991b1b; }

table.grid td.cell { vertical-align: top; }
.cell-edit {
  width: 100%; min-width: 6.5rem; box-sizing: border-box;
  padding: 0.25rem 0.35rem; font-size: 0.85rem; font-family: inherit;
  border: 1px solid transparent; border-radius: 4px; background: transparent;
}
.cell-edit:hover { border-color: var(--border); background: #fff; }
.cell-edit:focus { border-color: var(--accent); background: #fff; outline: none; }

/* 修正過的格子：藍底（與 needs_review 的黃底可同時出現，兩件事互不取代）。 */
td.cell-corrected { background: #dbeafe; }
td.cell-corrected.needs-review { background: #e0e7ff; }
td.cell-saving .cell-edit { opacity: 0.55; }
td.cell-error { background: #fee2e2; }

.orig-value { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--muted); white-space: normal; }
.orig-value code { background: #f1f5f9; padding: 0 0.25rem; border-radius: 3px; }
.revert-btn { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 0.72rem; padding: 0 0.15rem; }
.revert-btn:hover { text-decoration: underline; }

/* --- 票券明細：檔案圖檔 --- */
.page-images { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 0.75rem; }
.page-fig { margin: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #f8fafc; }
.page-fig figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.4rem 0.7rem; font-size: 0.8rem; color: var(--muted);
  background: #f1f5f9; border-bottom: 1px solid var(--border);
}
.page-tools { display: flex; align-items: center; gap: 0.5rem; }
.rot-btn { border: 1px solid var(--border); background: #fff; border-radius: 6px; cursor: pointer;
           font-size: 0.9rem; line-height: 1; padding: 0.25rem 0.45rem; }
.rot-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-img { display: block; width: 100%; height: auto; background: #fff; }

/* --- 票券明細：整列新增／刪除 --- */
/* 系統重編（訂單單號/項目）用灰底，與「人工修正」的藍底分開，一眼看得出不是人改的。 */
td.cell-renumbered { background: #e2e8f0; }

tr.row-added td { background: #dcfce7; }
tr.row-added td.cell-corrected { background: #bbf7d0; }
tr.row-deleted td { background: #f8fafc; color: var(--muted); text-decoration: line-through; }
tr.row-deleted .row-tag, tr.row-deleted .row-actions { text-decoration: none; }

.row-tag { display: inline-block; margin-left: 0.3rem; padding: 0 0.35rem; border-radius: 999px;
           font-size: 0.68rem; font-weight: 600; vertical-align: middle; }
.row-tag-added { background: #16a34a; color: #fff; }
.row-tag-deleted { background: #94a3b8; color: #fff; }

.row-actions { white-space: nowrap; }
.row-btn { border: 1px solid var(--border); background: #fff; border-radius: 6px; cursor: pointer;
           font-size: 0.75rem; padding: 0.2rem 0.45rem; color: var(--muted); }
.row-btn:hover { border-color: #b91c1c; color: #b91c1c; }
.restore-row-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- 歷史結果：打包下載勾選欄 --- */
table.grid th.check-col, table.grid td.check-col { width: 2.2rem; text-align: center; padding: 0.35rem 0.25rem; }
.row-check, #check-all { cursor: pointer; }
#bundle-status.ok { color: #166534; }
#bundle-status.err { color: #991b1b; }

/* --- 歷史結果：篩選列（與 DataTables 搜尋框同一行）--- */
.dt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.6rem; }
.dt-toolbar .dataTables_length { margin-left: auto; }
.dt-filters { flex: 1 1 auto; min-width: 0; }
.dt-filter-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.dt-filter-fields select, .dt-filter-fields input[type="date"] {
  padding: 0.3rem 0.4rem; font-size: 0.85rem; border: 1px solid var(--border); border-radius: 6px;
  background: #fff; max-width: 12rem;
}
.dt-filter-fields .date-range { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: var(--muted); }
#filters-clear { font-size: 0.8rem; }

/* --- 票券明細：單位換算（與 needs_review 的黃底、人工修正的藍底、系統重編的灰底分開）--- */
td.cell-converted { background: #ecfeff; }
.convert-note { color: #0e7490; font-size: 0.72rem; display: block; margin-top: 0.15rem;
                white-space: normal; max-width: 20rem; }

#gt-status.ok { color: #166534; }
#gt-status.err { color: #991b1b; }