/* === 螢幕基本 === */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: #1d1d1f; background: #f5f5f7; line-height: 1.4;
}
.app-header { padding: 24px 20px 8px; max-width: 720px; margin: 0 auto; }
.app-header h1 { font-size: 22px; font-weight: 700; }
.app-header .sub { font-size: 14px; color: #86868b; margin-top: 4px; }
.form-card { max-width: 720px; margin: 0 auto 60px; padding: 0 20px; }
fieldset {
  background: #fff; border: none; border-radius: 12px; padding: 20px;
  margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
legend { font-size: 15px; font-weight: 600; color: #424245; margin-bottom: 12px; padding: 0; }
label { display: block; font-size: 13px; color: #424245; margin-bottom: 12px; }
label:last-child { margin-bottom: 0; }
input[type=text], input[type=number], select {
  width: 100%; padding: 10px 12px; font-size: 15px; margin-top: 4px;
  border: 1px solid #d2d2d7; border-radius: 8px; background: #fff;
  font-family: inherit;
}
input:focus, select:focus { outline: none; border-color: #0071e3; box-shadow: 0 0 0 3px rgba(0,113,227,0.15); }
.row { display: grid; gap: 12px; }
.row.two { grid-template-columns: 1fr 1fr; }
.row.three { grid-template-columns: 2fr 1fr 1fr; }
.detail-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.detail-row input { font-size: 14px; }
.hint { font-size: 12px; color: #86868b; margin-bottom: 8px; }
.actions { display: flex; gap: 10px; margin-top: 8px; }
button {
  flex: 1; padding: 14px; font-size: 16px; font-weight: 600;
  border: none; border-radius: 12px; cursor: pointer; font-family: inherit;
}
button.primary { background: #0071e3; color: #fff; }
button.primary:hover { background: #0077ed; }
button.ghost { background: #f5f5f7; color: #1d1d1f; border: 1px solid #d2d2d7; }
@media (max-width: 480px) {
  .row.two, .row.three { grid-template-columns: 1fr; }
  .detail-row { grid-template-columns: 1fr; }
}
.toolbar {
  background: #fff; padding: 12px 20px; display: flex; gap: 12px; align-items: center;
  border-bottom: 1px solid #ddd; position: sticky; top: 0; z-index: 10;
}
.toolbar button { flex: 0 0 auto; padding: 8px 16px; font-size: 14px; border-radius: 8px; }
.toolbar .hint { flex: 1; margin: 0; }
.hidden { display: none !important; }

/* === 報支單 A5 橫式 — 固定 210×148mm === */
/* 標楷體字體棧（macOS / Windows / Web fallback） */
.print-sheet,
.print-sheet * {
  font-family: "標楷體", "DFKai-SB", "BiauKai", "Kaiti TC", "Kaiti SC", "STKaiti",
               "cwTeXKai", "Edukai", "TW-Kai", "DFKai", serif !important;
}

/* 表單實際 198×136mm（A5 210×148 扣掉四周 6mm 列印安全邊界），
   避免印表機把外框卡掉 */
.print-sheet {
  width: 198mm; height: 136mm;
  margin: 20px auto; background: #fff;
  padding: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  font-size: 10pt;
  color: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-sheet .title {
  font-size: 16pt; font-weight: bold; text-align: center;
  height: 7mm; line-height: 7mm;
}
.print-sheet .subtitle {
  font-size: 13pt; font-weight: bold; text-align: center;
  letter-spacing: 4pt;
  height: 7mm; line-height: 7mm;
}

/* === 頂部 2 列：日期 / 部門 + 廠商 === */
.print-sheet .top-info {
  display: grid;
  grid-template-columns: 14mm 1fr 18mm 1fr;
  grid-template-rows: 6mm 6mm;
  border: 1px solid #000;
}
.print-sheet .top-info > div {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 0 1.5mm;
  display: flex; align-items: center;
}
.print-sheet .top-info > div:nth-child(4n) { border-right: none; }
.print-sheet .top-info > div:nth-child(n+5) { border-bottom: none; }
.print-sheet .top-info .lbl {
  background: #fff; font-weight: bold; justify-content: center;
}

/* === 主體：左標籤 + 中內容 + 右簽核 === */
.print-sheet .body-grid {
  display: grid;
  grid-template-columns: 7mm 1fr 32mm;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  height: 91mm;
  overflow: hidden;
}
.print-sheet .side-label {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: bold; text-align: center;
  border-right: 1px solid #000;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 9pt;
  letter-spacing: 1pt;
}
.print-sheet .body-main {
  display: flex; flex-direction: column;
  border-right: 1px solid #000;
  min-width: 0;
}
/* 主體區是一整塊開放空間，沒有內部分隔線（對齊真實紙本格式） */
.print-sheet .body-main .b-title {
  text-align: center; font-weight: bold;
  padding: 2mm 2mm 1mm;
  font-size: 11pt;
}
.print-sheet .body-main .b-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1mm 2mm;
  min-height: 0;
  font-size: 12pt;   /* 申請事項明細字加大 */
}
.print-sheet .body-main .b-detail .drow {
  display: grid;
  padding: 1mm 0;
  align-items: start;
  overflow: hidden;
  line-height: 1.3;
  text-align: center;   /* 申請事項內容全部置中 */
}
.print-sheet .body-main .b-detail .drow.single { grid-template-columns: 1fr; }
.print-sheet .body-main .b-detail .drow.double {
  grid-template-columns: 1fr 26mm;   /* 描述 + 固定金額欄 */
  gap: 4mm;
}
.print-sheet .body-main .b-detail .drow .right-col {
  text-align: center;
  white-space: nowrap;
}
.print-sheet .body-main .b-total {
  padding: 1mm 2mm 2mm;
  font-weight: bold;
  font-size: 12pt;
  text-align: center;
}

/* === 右側簽核欄 === */
.print-sheet .sig-col {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  font-size: 9pt;
  min-height: 0;
}
.print-sheet .sig-col .sig {
  border-bottom: 1px solid #000;
  display: grid;
  grid-template-columns: 14mm 1fr;
  overflow: hidden;
}
.print-sheet .sig-col .sig:last-child { border-bottom: none; }
.print-sheet .sig-col .sig .l {
  background: #fff; text-align: center;
  border-right: 1px solid #000; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  padding: 0 0.5mm;
  white-space: nowrap;
}
.print-sheet .sig-col .sig .v {
  padding: 0 1.5mm;
  display: flex; align-items: center;
  overflow: hidden;
}

/* === 底部：行庫 / 票期 / 領款人 ===
   最後兩欄 14mm+18mm=32mm，跟上方簽核欄 sig-col(14+18=32mm) 完全對齊 */
.print-sheet .bottom-info {
  display: grid;
  grid-template-columns: 14mm 1fr 14mm 32mm 14mm 18mm;
  height: 8mm;
  border: 1px solid #000;
  /* border-top 保留 → 這就是「行庫上面 / 申請人下面」那條橫線 */
}
.print-sheet .bottom-info > div {
  padding: 0 1mm;
  border-right: 1px solid #000;
  display: flex; align-items: center;
}
.print-sheet .bottom-info > div:last-child { border-right: none; }
.print-sheet .bottom-info .b-lbl {
  background: #fff; font-weight: bold; justify-content: center;
  white-space: nowrap;
  padding: 0;
}

/* === 請款金額列 === */
.print-sheet .amount-row {
  display: grid;
  grid-template-columns: 18mm 1fr;
  height: 11mm;
  border: 1px solid #000;
  border-top: none;
}
.print-sheet .amount-row > div {
  padding: 0 2mm;
  display: flex; align-items: center;
}
.print-sheet .amount-row .lbl {
  background: #fff; font-weight: bold; justify-content: center;
  border-right: 1px solid #000;
}
.print-sheet .amount-row .val {
  font-size: 12pt; font-weight: bold;
  justify-content: center;
}

/* === 列印時 ===
   A5 210×148mm，四周留 6mm 邊界（印表機列印不到紙張最邊緣，
   不留邊界外框會被卡掉） */
@page {
  size: 210mm 148mm;
  margin: 6mm;
}
@media print {
  body { background: #fff; }
  .screen-only, .toolbar { display: none !important; }
  #form-view { display: none !important; }
  #print-view { display: block !important; }
  .print-sheet {
    margin: 0; box-shadow: none;
    width: 198mm; height: 136mm;
    page-break-after: always;
  }
}

/* 強制列印時保留背景色（瀏覽器預設會省略，省墨水）
   有了這個，灰底 label、邊框都會印出來 */
.print-sheet,
.print-sheet * {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}