:root {
  /* 告诉浏览器原生控件（日期选择器、下拉箭头、捲軸…）也固定用浅色画的，
   * 不然就算网站自己的颜色都是浅色，系统深色模式下这些原生元件还是可能显示成暗色。 */
  color-scheme: light;
  --bg: #faf6f0;
  --surface: #ffffff;
  --ink: #2f2a25;
  --ink-soft: #6b6259;
  --border: #e8ddd0;
  --accent-betamek: #3d7ea6;
  --accent-betamek-bg: #e7f1f7;
  --accent-ichikoh: #d97b3f;
  --accent-ichikoh-bg: #fbeee1;
  --accent-other: #7a7367;
  --accent-other-bg: #ece8e1;
  --accent-in: #4f8f5e;
  --accent-in-bg: #e7f5ec;
  --accent-out: #7a5ea6;
  --accent-out-bg: #efe9f7;
  --accent-store: #2f8f8a;
  --accent-store-bg: #e2f2f1;
  --accent-po: #b6862c;
  --accent-po-bg: #faf1dc;
  --accent-delivery: #3d6ea6;
  --accent-delivery-bg: #e7eef7;
  --accent-calc: #a6455e;
  --accent-calc-bg: #f7e7ec;
  --accent-gemba: #3f8f5e;
  --accent-gemba-bg: #e7f5ea;
  --accent-machine: #55708a;
  --accent-machine-bg: #e7ecf1;
  --accent-mould: #8a5a2f;
  --accent-mould-bg: #f3e8d8;
  --accent-car: #9a3f6b;
  --accent-car-bg: #f7e5ee;
  --notstarted: #c2483b;
  --notstarted-bg: #f8e3e0;
  --ok: #4f9f6e;
  --ok-bg: #e7f5ec;
  --low: #d3a325;
  --low-bg: #fbf3dc;
  --used: #b0a89c;
  --used-bg: #eeeae3;
  --stock-available-bg: #e2f6f5;
  --stock-used-bg: #fbeae8;
  --danger: #c2483b;
  --code-bg: #ffd93d;
  --code-ink: #4a3800;
  --radius: 18px;
  --shadow: 0 2px 10px rgba(60, 45, 25, 0.08);
}

/* 固定用亮色主题——不管使用者/装置的系统设定是深色还是浅色，网站一律显示浅色画面，
 * 方便老板/仓库同事在各种手机/电脑上都看得清楚，不会因为系统深色模式变成暗画面。 */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.4;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar h1 {
  font-size: 1.3rem;
  margin: 0;
}

.btn-back {
  border: none;
  background: var(--accent-other-bg);
  color: var(--ink);
  font-size: 1rem;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
}

#app {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

/* Material Store 的对帐表栏位很多，桌面上把 #app 的宽度上限放宽一点，
   表格才有地方伸展——其他画面（表单有自己的 .form-card max-width、
   tile-grid 是 auto-fill）变宽不会跑版，所以只用一个 class 切换就好，
   不用整个 app 都跟着变宽。 */
#app.app-wide {
  max-width: 1400px;
}

.hint {
  color: var(--ink-soft);
  font-size: 1.1rem;
  margin: 4px 0 20px;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* 同一组底下连续好几排 .tile-grid（中间没有 h3 分隔，例如 Material Store System
   菜单的 Data Input/Data Analysis 各自两排）本来完全没有排跟排之间的间距——
   .tile-grid 的 gap 只管同一个 grid 內部的欄位，跟上一个 .tile-grid 之间要另外补。 */
.tile-grid + .tile-grid {
  margin-top: 16px;
}

.menu-section-title {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 28px 0 12px;
}

/* Machine PM / Mould PM 各自 4 个功能一组，固定排成一整排比较好找——
   跟上面 .tile-grid 的 auto-fill 不一样，這裡故意锁 4 欄，宽度不够时才降成 2 欄、1 欄。 */
.tile-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 760px) {
  .tile-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  .tile-grid-4 { grid-template-columns: 1fr; }
}

/* CAR Follow Up 只有 3 个功能（没有独立的 Checklist 入口，只能从 Due List / Open
   Follow-up 卡片点进去），沿用 .tile-grid-4 同一套响应式断点，只是锁 3 欄。 */
.tile-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 760px) {
  .tile-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  .tile-grid-3 { grid-template-columns: 1fr; }
}

/* Material Store System 的 Data Input 第一排（Material In / Material Out）只有
   2 个功能，同一套响应式断点，锁 2 欄。 */
.tile-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 420px) {
  .tile-grid-2 { grid-template-columns: 1fr; }
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
}

.tile {
  border: none;
  border-radius: var(--radius);
  padding: 28px 20px;
  font-size: 1.25rem;
  font-weight: 600;
  min-height: 88px;
  cursor: pointer;
  box-shadow: var(--shadow);
  text-align: left;
  color: var(--ink);
}

.tile.customer-betamek { background: var(--accent-betamek-bg); border-left: 8px solid var(--accent-betamek); }
.tile.customer-ichikoh { background: var(--accent-ichikoh-bg); border-left: 8px solid var(--accent-ichikoh); }
.tile.customer-other   { background: var(--accent-other-bg);   border-left: 8px solid var(--accent-other); }
.tile.part-name        { background: var(--surface); border: 1px solid var(--border); }
.tile.menu-in           { background: var(--accent-in-bg);  border-left: 8px solid var(--accent-in); font-size: 1.4rem; min-height: 120px; }
.tile.menu-out          { background: var(--accent-out-bg); border-left: 8px solid var(--accent-out); font-size: 1.4rem; min-height: 120px; }
.tile.menu-store        { background: var(--accent-store-bg); border-left: 8px solid var(--accent-store); font-size: 1.4rem; min-height: 120px; }
.tile.menu-finish-good  { background: var(--accent-machine-bg); border-left: 8px solid var(--accent-machine); font-size: 1.4rem; min-height: 120px; }
.tile.menu-po           { background: var(--accent-po-bg); border-left: 8px solid var(--accent-po); font-size: 1.4rem; min-height: 120px; }
.tile.menu-delivery     { background: var(--accent-delivery-bg); border-left: 8px solid var(--accent-delivery); font-size: 1.4rem; min-height: 120px; }
.tile.menu-start-over   { background: var(--accent-car-bg); border-left: 8px solid var(--accent-car); font-size: 1.4rem; min-height: 120px; }
.tile.menu-calc         { background: var(--accent-calc-bg); border-left: 8px solid var(--accent-calc); font-size: 1.4rem; min-height: 120px; }
.tile.menu-gemba        { background: var(--accent-gemba-bg); border-left: 8px solid var(--accent-gemba); font-size: 1.4rem; min-height: 120px; }
.tile.menu-gemba-ng     { background: var(--notstarted-bg); border-left: 8px solid var(--notstarted); font-size: 1.4rem; min-height: 120px; }
.tile.menu-gemba-history { background: var(--accent-gemba-bg); border-left: 8px solid var(--accent-gemba); font-size: 1.4rem; min-height: 120px; }
.tile.menu-machine-pm-due { background: var(--notstarted-bg); border-left: 8px solid var(--notstarted); font-size: 1.4rem; min-height: 120px; }
.tile.menu-machine-pm    { background: var(--accent-machine-bg); border-left: 8px solid var(--accent-machine); font-size: 1.4rem; min-height: 120px; }
.tile.menu-machine-pm-ng { background: var(--notstarted-bg); border-left: 8px solid var(--notstarted); font-size: 1.4rem; min-height: 120px; }
.tile.menu-machine-pm-history { background: var(--accent-machine-bg); border-left: 8px solid var(--accent-machine); font-size: 1.4rem; min-height: 120px; }
.tile.menu-mould-pm      { background: var(--accent-mould-bg); border-left: 8px solid var(--accent-mould); font-size: 1.4rem; min-height: 120px; }
.tile.menu-mould-pm-due  { background: var(--notstarted-bg); border-left: 8px solid var(--notstarted); font-size: 1.4rem; min-height: 120px; }
.tile.menu-mould-pm-ng   { background: var(--notstarted-bg); border-left: 8px solid var(--notstarted); font-size: 1.4rem; min-height: 120px; }
.tile.menu-mould-pm-history { background: var(--accent-mould-bg); border-left: 8px solid var(--accent-mould); font-size: 1.4rem; min-height: 120px; }
.tile.menu-car-due       { background: var(--notstarted-bg); border-left: 8px solid var(--notstarted); font-size: 1.4rem; min-height: 120px; }
.tile.menu-car-open      { background: var(--notstarted-bg); border-left: 8px solid var(--notstarted); font-size: 1.4rem; min-height: 120px; }
.tile.menu-car-history   { background: var(--accent-car-bg); border-left: 8px solid var(--accent-car); font-size: 1.4rem; min-height: 120px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

/* 卡片总数是奇数时，最后一张会落单挤在左边、右边留一大块空白，看起来大小不一致。
   落单时改成整行置中、宽度跟其他卡片一样（用两栏宽度的算式，不要撑满整行）。
   660px 大约是版面刚好能排成两栏的宽度（.view 最大 960px、扣掉左右 padding 后
   两张卡片 + 中间 gap 需要的最小空间）。 */
@media (min-width: 660px) {
  .card-grid > .stock-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 18px) / 2);
  }
}

.stock-card {
  background: var(--stock-available-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.stock-card[disabled] {
  cursor: not-allowed;
  background: var(--stock-used-bg);
}

/* 卡片变暗只套用在这些欄位，领用码 (.card-codes) 保持明亮方便查阅 */
.stock-card[disabled] .batch-id,
.stock-card[disabled] .field-row {
  opacity: 0.55;
}

.stock-card .batch-id {
  font-weight: 700;
  font-size: 1.2rem;
  text-align: left;
}

.stock-card .field-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.95rem;
  text-align: left;
}

.stock-card .field-row .field-label {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.stock-card .field-row b {
  color: var(--ink);
  font-weight: 600;
  text-align: left;
}

.card-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.card-codes .field-label {
  color: var(--ink-soft);
  font-size: 0.8rem;
  width: 100%;
}

.code-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 4px 14px;
  border-radius: 10px;
}

.code-chip .code-value {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
}

.code-chip .code-date {
  font-weight: 600;
  font-size: 0.8rem;
  opacity: 0.75;
  white-space: nowrap;
}

/* QC 验退（Return to Supplier）用跟 NG/Overdue 同一套警示色，一眼就能跟一般领用码分开。 */
.code-chip-return {
  background: var(--notstarted-bg);
  color: var(--notstarted);
}

.code-return-badge {
  display: inline-block;
  background: var(--notstarted);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

.status-badge {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 6px;
}

.status-ok   { background: var(--ok-bg);   color: var(--ok); }
.status-low  { background: var(--low-bg);  color: var(--low); }
.status-used { background: var(--used-bg); color: var(--ink-soft); }
.status-notstarted { background: var(--notstarted-bg); color: var(--notstarted); }

.form-card, .confirm-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 28px;
  max-width: 520px;
  margin: 0 auto;
}

.form-card-summary {
  background: var(--accent-other-bg);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 20px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.field {
  display: block;
  margin-bottom: 18px;
}

/* 拍照欄位改成两个按钮并排：一个直接开相机，一个开原生的档案/相簿选择器——
   两个都是包住隐藏 input[type=file] 的 label，点文字就等于点 input。 */
.photo-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.photo-picker-btn {
  flex: 1;
  min-width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--accent-other-bg);
  color: var(--ink);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.photo-picker-btn input[type="file"] {
  display: none;
}

/* 把「Yes/No 判定 + 备注」这种一组两个欄位放进同一个卡片框，视觉上一眼看出是配对的，
   不会跟表单上其他不相关的欄位混在一起。用在 CAR Follow Up 的 Solution/Implementation
   Verified+Remarks 那两组。 */
.field-group {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 16px 4px;
  margin-bottom: 18px;
}

.field-group .field {
  margin-bottom: 14px;
}

.field-group .field-last {
  margin-bottom: 4px;
}

.field span {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.field select, .field input {
  width: 100%;
  font-size: 1.1rem;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  min-height: 48px;
}

.btn-primary {
  background: var(--accent-betamek);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}

.btn-large { min-height: 56px; }

.btn-secondary {
  background: var(--accent-other-bg);
  color: var(--ink);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-bottom: 18px;
}

.form-card h3 {
  font-size: 1rem;
  margin: 24px 0 12px;
}

.item-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.item-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 38px 14px 14px;
  background: var(--bg);
  position: relative;
}

.item-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.item-field {
  margin-bottom: 12px;
}

.item-field label,
.item-row-grid label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.item-field select,
.item-field input,
.item-row-grid input,
.item-row-grid select {
  width: 100%;
  font-size: 1rem;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  min-height: 42px;
}

.item-row .item-goods-preview {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.item-row .btn-remove-item {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  color: var(--danger);
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9rem;
}

.mi-batch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}

.mi-batch-list span {
  background: var(--ok-bg);
  color: var(--ok);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
}

.form-error {
  color: var(--danger);
  font-weight: 600;
  margin-bottom: 14px;
}

.confirm-card { text-align: center; }

.confirm-label {
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.confirm-code {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  background: var(--ok-bg);
  color: var(--ok);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.error-text { color: var(--danger); }

/* Material Store */

.store-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}

.store-filters .field { margin-bottom: 10px; }

.store-warning {
  background: var(--accent-po-bg);
  color: var(--ink);
  border: 1px solid var(--accent-po);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.85rem;
  margin: 8px 0 20px;
}

.report-table-scroll {
  overflow-x: auto;
  margin-top: 12px;
}

.report-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.report-table th,
.report-table td {
  padding: 10px 14px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  white-space: nowrap;
}

.report-table th:first-child,
.report-table td:first-child,
.report-table th:nth-child(2),
.report-table td:nth-child(2) {
  text-align: left;
  white-space: normal;
}

.report-table thead th {
  background: var(--accent-store-bg);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.78rem;
}

.report-table tbody tr:last-child td { border-bottom: none; }

.report-cell-variance { font-weight: 700; }
.report-cell-negative { color: var(--accent-out); }
.report-cell-positive { color: var(--accent-in); }

.store-summary-label {
  margin: 28px 0 0;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* Betamek Delivery Calculation */

.calc-order-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
}

.calc-order-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.calc-order-top b { font-size: 1.15rem; }

.calc-stats-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}

.calc-stats-table > * {
  border-right: 1px solid var(--border);
  text-align: center;
  padding: 8px 12px;
}

.calc-stats-table > *:nth-child(3n) {
  border-right: none;
}

.calc-stats-label {
  display: block;
  background: var(--accent-other-bg);
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.calc-stats-value {
  display: block;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
}

/* Ichikoh/Daikin Goods Store 报表：老板说 Balance Instore 才是重点，数字要一眼看到，所以
 * 字放大，只套在这两个报表自己的容器 (#igs-report-summary/#dgs-report-summary) 底下，
 * 不影响 Betamek PO vs Raw Store/Betamek Delivery Calculation 共用的 .calc-stats-value
 * 原本大小。 */
#igs-report-summary .calc-stats-value,
#dgs-report-summary .calc-stats-value {
  font-size: 1.4rem;
}
#igs-report-summary .calc-stats-value-highlight,
#dgs-report-summary .calc-stats-value-highlight {
  font-size: 1.75rem;
  color: var(--accent-store);
}

/* Betamek Delivery Calculation 页面上方的汇总卡（Total PO/Delivered/Remaining）——
 * 跟下面一张张的单笔订单卡用同一个 .calc-order-card 底子，只是另外套一层浅青色，
 * 一眼就能分出「汇总」跟「流水帐」两个区块。只加在这个页面的汇总卡上，其他报表
 * （Betamek PO vs Raw Store / Raw Material Balance）共用的 .calc-order-card 不受影响。 */
.calc-summary-card {
  background: var(--accent-store-bg);
  border-color: var(--accent-store);
}

.calc-summary-card .calc-stats-value {
  background: var(--accent-store-bg);
}

.calc-delivery-list { margin-top: 4px; }

.calc-delivery-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}

.calc-delivery-row:first-child { border-top: none; }

.calc-delivery-do { font-weight: 700; }
.calc-delivery-qty { color: var(--accent-in); font-weight: 700; }
.calc-delivery-date { color: var(--ink-soft); }
.calc-delivery-remark { color: var(--ink-soft); font-style: italic; }

/* Weekly Gemba Walk */

.gemba-item-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.gemba-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--bg);
}

.gemba-item-label {
  margin-bottom: 12px;
}

.gemba-item-category {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-gemba);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.gemba-item-description {
  font-size: 1.05rem;
}

.zh-annotation {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 0.92em;
}

.zh-annotation-block {
  display: block;
  margin-top: 2px;
  font-size: 0.9rem;
}

.machine-pm-item-meta {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 4px;
}

.machine-pm-item-meta-line {
  display: block;
}

.safety-critical-badge {
  display: inline-block;
  background: var(--notstarted-bg);
  color: var(--notstarted);
  border-radius: 999px;
  padding: 1px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 8px;
  vertical-align: middle;
}

.gemba-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gemba-toggle button {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  border-radius: 12px;
  padding: 14px;
  font-size: 1.1rem;
  font-weight: 700;
  min-height: 52px;
  cursor: pointer;
}

.gemba-toggle button.selected.gemba-btn-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.gemba-toggle button.selected.gemba-btn-ng { background: var(--notstarted-bg); color: var(--notstarted); border-color: var(--notstarted); }
.gemba-toggle button.selected.gemba-btn-na { background: var(--used-bg); color: var(--ink-soft); border-color: var(--used); }

/* Machine PM 的检查项目多一个 N/A（这台机器没有这个装置/功能，不用勉强选 OK/NG）。 */
.machine-pm-item .gemba-toggle { grid-template-columns: repeat(3, 1fr); }
.machine-pm-item .gemba-toggle button { font-size: 0.95rem; padding: 12px 8px; }

.gemba-ng-detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.gemba-ng-detail .field { margin-bottom: 12px; }
.gemba-ng-detail textarea {
  width: 100%;
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  min-height: 70px;
  font-family: inherit;
  resize: vertical;
}

.gemba-photo-preview {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: 12px;
  margin-top: 10px;
  border: 1px solid var(--border);
}

/* Open NG Items */

.ng-card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.ng-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.ng-card-date { font-weight: 700; }
.ng-card-area { color: var(--ink-soft); }

.ng-badge-overdue {
  margin-left: auto;
  background: var(--notstarted-bg);
  color: var(--notstarted);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}

.ng-card-category {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-gemba);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.ng-card-description { font-size: 1.05rem; margin-bottom: 8px; }

.ng-card-remark {
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 12px;
}

.ng-card-photo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  text-decoration: none;
}

.ng-card-photo-link img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.ng-card-photo-link span {
  color: var(--accent-betamek);
  font-weight: 600;
}

.ng-card-edit {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 4px;
}

.ng-card-edit .field { margin-bottom: 0; }

.ng-card-edit .ng-btn-save {
  width: auto;
  white-space: nowrap;
  margin-bottom: 0;
  height: 48px;
}

.ng-save-error {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .ng-card-edit { grid-template-columns: 1fr; }
  .ng-card-edit .ng-btn-save { width: 100%; }
}

.ng-card-close {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px dashed var(--border);
  padding-top: 14px;
  margin-top: 14px;
}

.ng-card-close .field { margin-bottom: 0; }

.ng-card-close .ng-btn-close {
  width: 100%;
  height: 52px;
  background: var(--ok);
}

.mould-pm-due-btn,
.machine-pm-due-btn {
  width: 100%;
  height: 52px;
  margin-top: 10px;
}

.ng-close-error { margin-bottom: 0; }

/* Gemba Walk History */

.history-walk-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.history-walk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.history-walk-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 20px;
}

.history-walk-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.history-walk-print-btn {
  flex-shrink: 0;
  width: auto;
  margin-bottom: 0;
  padding: 8px 14px;
  font-size: 0.85rem;
}

.history-walk-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.history-walk-date { font-weight: 700; }
.history-walk-area,
.history-walk-inspector { color: var(--ink-soft); }

.history-walk-counts {
  display: flex;
  align-items: center;
  gap: 10px;
}

.history-count-ok,
.history-count-ng {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}

.history-count-ok { background: var(--ok-bg); color: var(--ok); }
.history-count-ng { background: var(--accent-gemba-bg); color: var(--accent-gemba); }
.history-count-ng-open { background: var(--notstarted-bg); color: var(--notstarted); }
.history-count-na { background: var(--used-bg); color: var(--ink-soft); }

.history-walk-toggle {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 1.1rem;
}

.history-walk-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 20px 18px;
  border-top: 1px solid var(--border);
}

.history-walk-detail[hidden] { display: none; }

.history-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: var(--bg);
}

.history-item.history-item-ng { border-color: var(--notstarted); }

.history-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.history-item-result-badge {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.history-badge-ok { background: var(--ok-bg); color: var(--ok); }
.history-badge-ng { background: var(--notstarted-bg); color: var(--notstarted); }
.history-badge-na { background: var(--used-bg); color: var(--ink-soft); }

.history-item-category {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-gemba);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.history-item-description { font-size: 1rem; margin-bottom: 4px; }

.history-item-closed { color: var(--ok); font-weight: 600; margin-top: 6px; }
.history-item-open { color: var(--notstarted); font-weight: 600; margin-top: 6px; }

/* Gemba Walk trend alerts */

.trend-alert-card {
  background: var(--notstarted-bg);
  border: 1px solid var(--notstarted);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.trend-alert-title {
  font-weight: 700;
  color: var(--notstarted);
  margin-bottom: 10px;
}

.trend-alert-item {
  padding: 8px 0;
  border-top: 1px dashed var(--border);
}

.trend-alert-item:first-of-type { border-top: none; padding-top: 0; }

.trend-alert-streak {
  display: inline-block;
  background: var(--notstarted);
  color: #fff;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-right: 8px;
}

.trend-alert-description { margin-top: 4px; }

.trend-alert-meta {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-top: 2px;
}

/* Gemba Walk History — PDF export (print) */

.history-toolbar { margin-bottom: 16px; }

.print-only { display: none; }

@media print {
  .topbar,
  .store-filters,
  .history-toolbar,
  #gemba-trend-alerts,
  .history-walk-print-btn,
  .history-walk-toggle {
    display: none !important;
  }

  .print-only {
    display: block !important;
    margin-bottom: 20px;
  }

  .print-only h2 { margin: 0 0 6px; }
  .print-only .print-meta { color: #555; font-size: 0.85rem; }

  body.print-single-walk .history-walk-card:not(.print-target) { display: none !important; }
  body.print-single-walk .history-walk-card.print-target .history-walk-detail,
  body.print-all-history .history-walk-detail {
    display: flex !important;
  }

  .history-walk-card {
    box-shadow: none;
    border: 1px solid #999;
    margin-bottom: 12px;
  }

  /* 每一次巡查/保养的检查项目常常比一整页还长（例如 11 项 Gemba Walk 清单），
     卡片本身不能整张 break-inside: avoid，不然只要卡片放不进当前页剩下的空间，
     浏览器就会把整张卡片（连同还没印到的空白）硬挤到下一页，造成第一页只剩标题、
     内容却全部跳到第二页才开始。改成只在每一个检查项目 (.history-item) 这个
     比较小的单位上避免断页，卡片本身可以正常跨页，就不会再整页留白了。 */
  .history-item { break-inside: avoid; }
}

.view[hidden] { display: none; }