/* AssetFlow — 倉庫端出入庫介面
 *
 * 設計取向：簡約乾淨、留白足、單一強調色；狀態色只用在掃碼結果與看板數字。
 * 兩種使用情境的尺度不同：
 *   - 平板作業頁：觸控目標大（最小 88px），單手可及。
 *   - 大螢幕看板：數字以 clamp() 隨視窗放大，遠距可讀。
 */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --line: #e3e6ea;
  --text: #1c1f23;
  --text-soft: #6b7280;
  --accent: #1f6feb;
  --accent-soft: #eaf2ff;

  --ok: #1a7f4b;
  --ok-bg: #e9f7ef;
  --warn: #9a6400;
  --warn-bg: #fdf4e3;
  --err: #b42318;
  --err-bg: #fdeceb;

  /* 開關（布林欄位）：ON 淺綠、OFF 淺粉。
   * 比 --ok-bg／--err-bg 深一階——那兩色是給白底上的大面積標籤用的，
   * 放在 38px 高的開關上會淡到看不出開關狀態。 */
  --switch-on: #cdeedb;
  --switch-off: #fbd5da;
  /* ON 字色比 --ok 更深：--ok 落在淺綠上只有 4.0:1，不到 WCAG AA 的 4.5。
   * OFF 側用 --err 即有 5.0:1，無須另設。 */
  --switch-on-ink: #15663c;

  --radius: 14px;
  --gap: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
               "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------- 版面骨架 */
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px var(--gap);
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* 窄螢幕上不讓標籤與按鈕被壓成直排 */
.topbar > * { white-space: nowrap; }

.topbar .brand {
  font-weight: 700;
  letter-spacing: .02em;
}

.topbar .warehouse {
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .9em;
}

.topbar .spacer { margin-left: auto; }

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.card + .card { margin-top: var(--gap); }

h1 { font-size: 1.6rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 0 0 16px; }
.muted { color: var(--text-soft); }
.small { font-size: .88rem; }

/* ------------------------------------------------------------------ 按鈕 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* 表格內的按鈕不需要觸控級高度 */
.data-table .btn.small { min-height: 40px; padding: 0 14px; }

.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-ghost { background: transparent; }

/* 大型選擇按鈕：出庫／入庫、領用／寄出 */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
}

.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-height: 132px;
  padding: 24px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.choice:hover { border-color: var(--accent); }
.choice .label { font-size: 1.35rem; font-weight: 700; }
.choice .hint { color: var(--text-soft); font-size: .92rem; }

/* ------------------------------------------------------------ 掃碼輸入區 */
.scan-field {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.scan-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text);
}

.scan-field.is-ready { border-color: var(--accent); }

.pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(26, 127, 75, .5);
  animation: pulse 1.8s infinite;
  flex: none;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 12px rgba(26, 127, 75, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 127, 75, 0); }
}

/* ------------------------------------------- 開發測試輔助（僅 DEBUG 顯示） */
/* 刻意低調並標明用途，避免與正式操作元件混淆 */
.devbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--warn);
  border-radius: 10px;
  background: var(--warn-bg);
}

.devbar-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--warn);
  letter-spacing: .04em;
  margin-right: 4px;
}

.devbtn {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}

.devbtn:hover { border-color: var(--warn); }

/* -------------------------------------------------------------- 統計數字 */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.stat {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.stat .n { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.stat .k { color: var(--text-soft); font-size: .85rem; }
.stat.ok .n { color: var(--ok); }
.stat.warn .n { color: var(--warn); }
.stat.err .n { color: var(--err); }

/* -------------------------------------------------------------- 掃碼清單 */
.lines { display: flex; flex-direction: column; gap: 8px; }

.line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 10px;
  background: var(--surface);
}

.line .no {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}

.line .msg { color: var(--text-soft); font-size: .9rem; }
.line .grow { margin-left: auto; }

.line.ok { border-left-color: var(--ok); }
.line.makeup { border-left-color: var(--warn); background: var(--warn-bg); }
.line.error { border-left-color: var(--err); background: var(--err-bg); }

.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.makeup { background: #fff; color: var(--warn); border: 1px solid currentColor; }
.tag.error { background: #fff; color: var(--err); border: 1px solid currentColor; }
.tag.flag { background: var(--bg); color: var(--text-soft); }

.remove {
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* 提交列固定在底部，避免長清單需捲動才能提交 */
.actionbar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin-top: var(--gap);
  padding: 16px 20px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.actionbar .btn-primary { min-width: 180px; }

.banner {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--err-bg);
  color: var(--err);
  font-weight: 600;
  margin-bottom: var(--gap);
}

.banner.info { background: var(--accent-soft); color: var(--accent); }

/* ------------------------------------------------------- 系統管理側邊欄 */
.admin-layout {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 61px); /* 61px 概估 topbar 高度，避免撐出多餘捲軸 */
}

.admin-sidebar {
  flex: none;
  width: 220px;
  padding: 24px 12px;
  border-right: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-nav-group { display: flex; flex-direction: column; gap: 4px; }

/* 第一層：可收合的群組標題。展開狀態由 localStorage 記住（見 _admin_base.html） */
.admin-nav-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: left;
  cursor: pointer;
}

.admin-nav-toggle:hover { background: var(--bg); }

.admin-nav-toggle .caret {
  display: inline-block;
  font-size: .7rem;
  transition: transform .15s ease;
}

.admin-nav-toggle .caret.is-open { transform: rotate(90deg); }

.admin-nav-items { display: flex; flex-direction: column; gap: 4px; }

.admin-nav-empty {
  padding: 10px 14px 10px 22px;
  color: var(--text-soft);
  font-size: .88rem;
}

/* Alpine 尚未接手前先藏起來，避免收合中的群組閃現一下 */
[x-cloak] { display: none !important; }

.admin-nav-link {
  display: block;
  padding: 12px 14px 12px 22px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.admin-nav-link:hover { background: var(--bg); }
.admin-nav-link.active { background: var(--accent-soft); color: var(--accent); }

.admin-content { flex: 1; min-width: 0; }

/* 看板嵌在側邊欄版型裡時不能吃滿 100vh，否則整頁多一段捲軸 */
.admin-content .board { min-height: calc(100vh - 61px); }

/* 巨型數字是為電視的觀看距離設計的（7vw）；側邊欄版是在電腦前近距離看，
   同一組尺寸會把面板擠爆（單位「顆」被推到下一行），故在此縮一級。
   全螢幕版（?tv=1）不套 .admin-content，維持原尺寸。 */
.admin-content .big { font-size: clamp(2rem, 4vw, 4.2rem); }

@media (max-width: 720px) {
  .admin-layout { flex-direction: column; }
  /* 窄螢幕改為整條橫幅、群組上下堆疊：群組可收合後橫向捲動反而找不到項目 */
  .admin-sidebar {
    width: auto;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .admin-nav-link { padding: 12px 14px; }
  .admin-content .board { min-height: 0; }
}

/* ------------------------------------------- 資料表（系統管理等維護介面） */
.data-table { width: 100%; border-collapse: collapse; }

.data-table th,
.data-table td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.data-table th { color: var(--text-soft); font-weight: 700; font-size: .85rem; }
.data-table tr:last-child td { border-bottom: 0; }

.mono { font-variant-numeric: tabular-nums; letter-spacing: .03em; }

/* 窄螢幕：隱藏員編欄（第 2 欄）。保留「可否操作」，那是最需要看到的可行動資訊。 */
@media (max-width: 640px) {
  .data-table th:nth-child(2),
  .data-table td:nth-child(2) { display: none; }
}

/* ------------------------------------------------------------------ 登入 */
.centered {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card { width: 100%; max-width: 460px; }

.field { margin-bottom: var(--gap); }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }

.field input {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 1.1rem;
  color: var(--text);
}

.field input:focus,
.field select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.field select {
  width: 100%;
  min-height: 56px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 1.1rem;
  color: var(--text);
}

.field input:disabled {
  background: var(--bg);
  color: var(--text-soft);
}

/* --------------------------------------------------- 布林欄位的 ON／OFF 開關
 * 原生 checkbox 落在 .field input 的尺寸下會被撐成整列的巨大方塊，
 * 故改以開關呈現：ON 淺綠、OFF 淺粉，狀態同時由顏色與滑塊位置表達
 * （不只靠顏色，色弱者也分得出來）。
 * 真正的 <input> 只是被移出視線，鍵盤與表單語意皆保留。
 */
/* 選擇器帶上 label：要壓過 `.field label { display: block }`，
 * 只寫 .switch 的特異性較低，開關會被還原成 block 而整個塌掉。 */
label.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
}

.switch .switch-label { font-weight: 600; }

.switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.switch-track {
  position: relative;
  flex: none;
  width: 80px;
  height: 38px;
  border-radius: 999px;
  background: var(--switch-off);
  transition: background .16s ease;
}

.switch-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .16s ease;
}

.switch-text {
  position: absolute;
  top: 0;
  line-height: 36px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  transition: opacity .16s ease;
}

.switch-text.on { left: 14px; color: var(--switch-on-ink); opacity: 0; }
.switch-text.off { right: 14px; color: var(--err); }

.switch input:checked ~ .switch-track { background: var(--switch-on); }
.switch input:checked ~ .switch-track .switch-knob { transform: translateX(42px); }
.switch input:checked ~ .switch-track .switch-text.on { opacity: 1; }
.switch input:checked ~ .switch-track .switch-text.off { opacity: 0; }

.switch input:focus-visible ~ .switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.switch input:disabled ~ .switch-track { opacity: .5; cursor: not-allowed; }

.steps { display: flex; gap: 8px; margin-bottom: 20px; }

.step {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}

.step.done { background: var(--accent); }

/* ------------------------------------------------------- 看板（大螢幕） */
.board {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 1.6vw, 28px);
  gap: clamp(10px, 1.2vw, 20px);
}

.board-grid {
  flex: 1;
  display: grid;
  gap: clamp(10px, 1.2vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  /* 撐滿螢幕高度：電視上不留大片空白 */
  align-content: stretch;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(14px, 1.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.panel > .title {
  font-size: clamp(.95rem, 1.1vw, 1.4rem);
  font-weight: 700;
  color: var(--text-soft);
  letter-spacing: .04em;
}

.panel.span-2 { grid-column: span 2; }

@media (max-width: 900px) {
  .panel.span-2 { grid-column: span 1; }
}

/* 看板巨型數字：隨視窗縮放，遠距可讀 */
.big {
  font-size: clamp(2.6rem, 7vw, 7.5rem);
  font-weight: 800;
  line-height: .95;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.big .unit {
  font-size: .28em;
  font-weight: 700;
  color: var(--text-soft);
  margin-left: .18em;
  letter-spacing: 0;
}

.sub {
  font-size: clamp(.9rem, 1.2vw, 1.5rem);
  color: var(--text-soft);
  font-weight: 600;
}

/* 三段式分組（今日／本週／本月），沿用現場看板的閱讀習慣 */
.triple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, .8vw, 14px);
}

.cell {
  border-radius: 12px;
  padding: clamp(10px, 1vw, 18px);
  background: var(--bg);
  border: 1px solid var(--line);
}

.cell .k {
  font-size: clamp(.72rem, .85vw, 1.05rem);
  font-weight: 700;
  color: var(--text-soft);
}

.cell .n {
  font-size: clamp(1.6rem, 3.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.cell .n small {
  font-size: .32em;
  color: var(--text-soft);
  font-weight: 700;
  margin-left: .2em;
}

.cell.now { background: var(--accent-soft); border-color: #cfe0ff; }
.cell.now .n, .cell.now .k { color: var(--accent); }

/* 看板表格 */
.board-table { width: 100%; border-collapse: collapse; }

.board-table th,
.board-table td {
  text-align: left;
  padding: clamp(6px, .7vw, 12px) 8px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(.82rem, 1.05vw, 1.3rem);
  font-variant-numeric: tabular-nums;
}

.board-table th { color: var(--text-soft); font-weight: 700; }
.board-table tr:last-child td { border-bottom: 0; }
.board-table td.num { text-align: right; font-weight: 700; }

.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .8em;
  font-weight: 700;
  white-space: nowrap;
}

.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.err { background: var(--err-bg); color: var(--err); }

/* 看板底部資訊列 */
.board-foot {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  padding: clamp(8px, .9vw, 16px) clamp(12px, 1.4vw, 24px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: clamp(.85rem, 1.1vw, 1.35rem);
  font-weight: 600;
  color: var(--text-soft);
}

.board-foot .clock {
  margin-left: auto;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.demo-badge {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: .8em;
  font-weight: 700;
}

/* 直立式螢幕（現場多為直掛電視）：改為單欄、數字更大 */
@media (orientation: portrait) and (min-width: 700px) {
  .board-grid { grid-template-columns: 1fr; }
  .big { font-size: clamp(4rem, 12vw, 10rem); }
  .cell .n { font-size: clamp(2.4rem, 7vw, 5rem); }
}

/* 手機 */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 16px 14px 48px; }
  .card { padding: 18px; }
  .triple { grid-template-columns: 1fr; }
  .actionbar { flex-direction: column; align-items: stretch; }
  .topbar { padding: 12px 14px; gap: 8px 10px; }
  .topbar .btn { min-height: 40px; padding: 0 14px; }
  /* 掃碼清單在窄螢幕改為兩行，避免編號與原因互相擠壓 */
  .line { flex-wrap: wrap; }
  .line .msg { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
}