/* 分組底色定義在 app.js 的 PALETTE，由 JS 以 inline style 直接套用到列上，
 * 這份 CSS 不去覆蓋它（用 !important 蓋掉會讓分組失去意義）。 */

:root {
  /* 主色系：單一飽和藍撐起整個畫面，框線、標題、陰影共用同一支 */
  --blue: #3860D1;
  --blue-soft: rgba(56, 96, 209, 0.08);
  --orange: #EF6B23;
  --pink: #F7D1C8;

  --ink: #1A1A1A;
  --ink-soft: #4A5578;
  --bg: var(--pink);
  --card-bg: #FFFFFF;
  --border: var(--blue);

  --danger: #C0392B;
  --warn: #8A5A00;

  /* UI 表頭 */
  --header-bg: var(--blue);
  --header-fg: #FFFFFF;

  /* 匯出 PNG 的表頭：刻意與 UI 脫鉤，維持原本的深板岩色。
   * 這支變數只被 .render-target 使用，改 UI 配色不會動到送出去的圖。 */
  --export-header-bg: #4A5568;
  --export-header-fg: #FFFFFF;

  /* 硬邊位移陰影：零模糊，是這套視覺的骨架 */
  --shadow-lg: 6px 6px 0 var(--blue);
  --shadow-md: 4px 4px 0 var(--blue);
  --shadow-sm: 3px 3px 0 var(--blue);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  color: var(--ink);
  line-height: 1.6;

  /* 點陣圖樣底：純 CSS 的 radial-gradient，不需要圖檔。
   * 覺得太吵的話把 background-image 整行刪掉就變素色。 */
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(56, 96, 209, 0.42) 1.5px, transparent 1.6px);
  background-size: 15px 15px;
}

.app {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

/* ---------- 頁首 ---------- */
.app-header {
  background: var(--card-bg);
  border: 3px solid var(--blue);
  box-shadow: var(--shadow-lg);
  padding: 18px 22px;
  margin-bottom: 28px;
}
.app-header h1 {
  font-size: 23px;
  line-height: 1.35;
  margin: 0 0 6px;
  color: var(--blue);
  letter-spacing: 0.01em;
}
.subtitle {
  color: var(--ink-soft);
  margin: 0;
  font-size: 14px;
}

/* ---------- 卡片 ---------- */
.card {
  background: var(--card-bg);
  border: 3px solid var(--blue);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  padding: 22px;
  margin-bottom: 28px;
}
.card h2 {
  font-size: 16px;
  margin: 0 0 14px;
  color: var(--blue);
  padding-bottom: 10px;
  border-bottom: 3px solid var(--blue);
}

/* app.js 的流程控制靠這一條，不可更動 */
.hidden { display: none !important; }

.hint {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

/* ---------- 上傳區 ---------- */
.dropzone {
  border: 5px dotted var(--blue);
  border-radius: 0;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--card-bg);
  transition: background .12s, box-shadow .12s;
}
.dropzone:hover {
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 5px rgba(56, 96, 209, 0.12);
}
.dropzone.dragover {
  background: var(--blue-soft);
  border-style: solid;
  box-shadow: var(--shadow-md);
}
.dropzone.has-file {
  border-style: solid;
  border-width: 3px;
  background: var(--blue-soft);
  box-shadow: var(--shadow-sm);
}
.dz-main {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.dz-link {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
.dz-sub {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---------- 提示訊息 ---------- */
.note {
  font-size: 13px;
  color: var(--ink);
  background: #FFF3C4;
  border: 3px solid var(--blue);
  box-shadow: var(--shadow-sm);
  border-radius: 0;
  padding: 10px 13px;
  margin: 0 0 16px;
}

.diag { margin-top: 14px; }
.diag-text {
  max-height: 260px;
  overflow: auto;
  background: var(--blue-soft);
  border: 2px solid var(--blue);
  border-radius: 0;
  padding: 12px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 10px 0 0;
  color: var(--ink-soft);
}

/* ---------- 表單元件 ---------- */
input[type="text"] {
  padding: 9px 12px;
  border: 3px solid var(--blue);
  border-radius: 0;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--card-bg);
  flex: 1;
}
input[type="text"]:focus {
  outline: none;
  box-shadow: var(--shadow-sm);
}
input[type="file"] { font-size: 14px; }

.row {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  align-items: center;
}

/* ---------- 按鈕 ---------- */
.btn {
  border: 3px solid var(--blue);
  border-radius: 0;
  padding: 9px 18px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  transition: transform .06s, box-shadow .06s;
}
/* 按下去時往陰影的方向位移，模擬實體按鍵被壓下 */
.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--blue);
}
/* 橘底配深字：白字在 #EF6B23 上只有 3.1:1，不夠；深字是 7.8:1 */
.btn.primary { background: var(--orange); color: var(--ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.secondary { background: var(--card-bg); color: var(--blue); }
.btn.secondary:hover { background: var(--blue-soft); }
.btn.small { padding: 6px 12px; font-size: 13px; margin-top: 12px; }
.btn.link {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 600;
}
.btn.link:active { transform: none; box-shadow: none; }

/* 鍵盤操作時要看得見焦點在哪 */
.btn:focus-visible,
input:focus-visible,
.code-chip:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.error {
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  margin-top: 12px;
  white-space: pre-line;
}

/* ---------- 代碼 chips ---------- */
.codes-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.code-chip {
  border: 2px solid var(--blue);
  border-radius: 0;
  background: var(--card-bg);
  color: var(--blue);
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .06s, box-shadow .06s;
}
.code-chip:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--blue); }
.code-chip:hover { background: var(--blue-soft); }
.code-chip.matched-target {
  background: var(--orange);
  color: var(--ink);
}

/* ---------- 預覽表格 ---------- */
.table-wrap {
  overflow-x: auto;
  border: 3px solid var(--blue);
  border-radius: 0;
}

table.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.preview-table th {
  background: var(--header-bg);
  color: var(--header-fg);
  text-align: left;
  padding: 10px;
  font-weight: 700;
  white-space: nowrap;
}
table.preview-table td {
  padding: 10px 12px;
  border-bottom: 2px solid var(--blue);
  vertical-align: middle;
}
table.preview-table tbody tr:last-child td { border-bottom: 0; }
/* 解析可能有誤的列，左緣打一條橘色實心條 */
table.preview-table tbody tr.needs-review td:first-child {
  box-shadow: inset 5px 0 0 var(--orange);
}
.row-flag {
  font-size: 11px;
  font-weight: 700;
  color: var(--warn);
  white-space: nowrap;
  margin-right: 6px;
}
.row-del {
  border: 2px solid var(--danger);
  background: var(--card-bg);
  color: var(--danger);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  padding: 3px 9px;
}
.row-del:hover { background: var(--danger); color: #fff; }
.row-restore {
  border: 2px solid var(--blue);
  background: var(--card-bg);
  color: var(--blue);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  padding: 3px 9px;
}
.row-restore:hover { background: var(--blue); color: #fff; }

.excluded-section { margin-top: 18px; }
.excluded-table td, .excluded-table th { opacity: 0.7; }

.output-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.render-frame {
  border: 3px solid var(--blue);
  border-radius: 0;
  padding: 16px;
  background: #fff;
  overflow-x: auto;
}

/* ==================================================================
 * 以下是匯出 PNG 的樣式，維持原樣未動。
 * 用 --export-header-bg 而非 --header-bg，讓上面的 UI 改色不會影響
 * 實際送給同事的那張圖；html2canvas 的兩個 workaround 也照原樣保留。
 * ================================================================== */

/* 輸出圖片樣式：字大、字粗、黑字，每列之間留白線（比照參考樣式） */
.render-target {
  display: inline-block;
  min-width: 480px;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  line-height: 1.5;
}
/* 列間白線用 border-bottom 而非 border-spacing：
 * border-spacing 也會作用在表格最外圈，會讓匯出的圖片上下多出白邊。 */
.render-target table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.render-target th,
.render-target td {
  border-bottom: 2px solid #FFFFFF;  /* 匯出 scale:2，PNG 實際間距為 4px */
}
.render-target tbody tr:last-child td {
  border-bottom: 0;
}
/* 底色同時加在列上：欄寬為小數時，html2canvas 逐格描背景會在交界留下 1px 縫，
 * 露出頁面白底而形成垂直白線。列底色可保證縫隙後面仍是同色。 */
.render-target thead tr {
  background: var(--export-header-bg);
}
.render-target th {
  background: var(--export-header-bg);
  color: var(--export-header-fg);
  padding: 13px 20px;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}
.render-target th:first-child,
.render-target th:last-child { text-align: center; }
.render-target td {
  padding: 13px 20px;
  font-size: 21px;
  font-weight: 700;
  color: #1A1A1A;
  white-space: nowrap;
}
/* 編號與訂購人置中，餐點與商店名稱靠左 */
.render-target td:first-child,
.render-target td:last-child { text-align: center; }

/* ==================================================================
 * 全辦公室餐點統計（第 3 區）
 * ================================================================== */

.warn-note {
  background: #FFF4E0;
  border: 2px solid var(--orange);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}
.warn-note p { margin: 0 0 6px; }
.warn-note p:last-child { margin-bottom: 0; }

.flagged-section { margin-bottom: 16px; }

table.stat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.stat-table th {
  background: var(--header-bg);
  color: var(--header-fg);
  text-align: left;
  padding: 10px 12px;
  font-weight: 700;
  white-space: nowrap;
}
table.stat-table th.num,
table.stat-table td.num {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}
table.stat-table td {
  padding: 9px 12px;
  border-bottom: 2px solid var(--blue);
  vertical-align: middle;
}
table.stat-table tbody tr:last-child td { border-bottom: 0; }
table.stat-table td.num b { font-size: 19px; }
table.stat-table td.store { color: var(--ink-soft); font-size: 13px; }
/* 合計列：不套色盤，靠粗框與粗體跟上面的菜色列分開 */
table.stat-table tbody tr.total-row td {
  background: var(--card-bg);
  border-top: 3px solid var(--blue);
  border-bottom: 0;
  font-weight: 700;
  font-size: 15px;
}
table.stat-table tbody tr.total-row td.num b { font-size: 21px; }

/* 同菜名跨兩家商店：數量欄是合計，各店份數寫在商店欄，左緣打橘條 */
table.stat-table tbody tr.stat-warn td:first-child {
  box-shadow: inset 5px 0 0 var(--orange);
}

/* 統計圖的匯出樣式。沿用 .render-target 的字級與白線間隙，只改欄位對齊：
 * 那邊的 th:first-child/:last-child 置中規則是為四欄表寫的，套到三欄表上
 * 會把「餐點」和「商店名稱」一起置中。 */
.stats-export .stats-export-title {
  font-size: 20px;
  font-weight: 700;
  padding: 4px 20px 14px;
  color: var(--ink);
  white-space: nowrap;
}
.stats-export th:first-child,
.stats-export th:last-child { text-align: left; }
.stats-export th:nth-child(2),
.stats-export td:nth-child(2) { text-align: center; white-space: nowrap; }
.stats-export tbody tr.total-row td { background: #EDEFF6; font-weight: 700; }