/* S3 情境 1 費用報銷與簽核中心。
   報銷卡與簽核明細都掛 .order-card，外框、欄位、明細表、按鈕沿用 adam 版建單卡（styles.css）；
   這裡只補報銷多出來的部分。顏色只用 adam 的 token。 */

/* ── 報銷卡 ── */
.expense-card .expense-ask { margin: 0 0 var(--s2); font-weight: 500; color: var(--text); }
.purpose { margin: var(--s3) 0 var(--s2); }
.purpose-label { display: block; font-size: 11px; color: var(--text-3); letter-spacing: .04em; margin-bottom: 8px; }
.purpose-options { display: flex; flex-wrap: wrap; gap: 8px; }
.purpose-chip {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  border-radius: var(--r-pill); padding: 5px 14px; font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.purpose-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.purpose-chip.tax::after { content: ' ⁕'; color: var(--warning); }
.purpose-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.purpose-chip:disabled { cursor: default; opacity: .55; }
.purpose-chip.on:disabled { opacity: 1; }
.purpose-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.75; color: var(--text-3); }
.expense-card .order-btn:disabled { opacity: .45; cursor: not-allowed; }

.expense-done, .expense-approval {
  display: flex; align-items: center; gap: 8px; margin: var(--s4) var(--s4) 0; padding: 10px 14px;
  border-radius: var(--r-md); font-size: 13px;
}
.expense-done { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.expense-approval { background: var(--surface-2); color: var(--text-2); }
.expense-card .findings { margin: var(--s4) var(--s4) 0; }
.expense-card .expense-lines td { vertical-align: middle; }
.expense-flag { margin-left: 6px; color: var(--warning); cursor: help; }
.order-card .items td .expense-code-input { width: 72px; min-width: 0; font-family: var(--font-mono); border-bottom-color: var(--warning); }
.expense-blocked { margin: 10px var(--s4) 0; font-size: 12.5px; color: var(--danger); }
.expense-blocked .reason { color: var(--text-3); }
.expense-card .unmapped { margin: 14px var(--s4) 0; }

/* ── 簽核中心（版面沿用 adam 版 Dashboard 頁的 .board-page） ── */
.approval-shell .approval-work { overflow: hidden; }
.approval-page .stats .alert dd { color: var(--danger); }
.approval-page .board-tabs { display: flex; align-items: center; flex-wrap: wrap; }
.approval-search {
  display: flex; align-items: center; gap: 6px; height: 32px; margin-left: auto; padding: 0 10px; min-width: 220px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-3);
}
.approval-search:focus-within { border-color: var(--accent-border); }
.approval-search .search-input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 12.5px; outline: none; }
.approval-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 980px; }
.approval-row {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--t-fast);
}
.approval-row:hover { border-color: var(--accent-border); }
.approval-row.mine { border-left: 3px solid var(--accent); }
.approval-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.approval-row-main strong { font-size: 14px; font-weight: 500; }
.approval-row-main small { font-size: 11.5px; color: var(--text-3); }
.approval-row-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.approval-amount { font-size: 14px; color: var(--text); }
.approval-chip { font-size: 11px; border-radius: var(--r-pill); padding: 2px 10px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.approval-chip.mine { background: var(--accent); color: var(--accent-ink); }
.approval-chip.approved { background: var(--accent-soft); color: var(--accent); }
.approval-chip.rejected, .approval-chip.overdue { background: var(--danger-soft); color: var(--danger); }
.approval-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; }
.approval-detail { max-width: 980px; margin-top: 0; }
.approval-detail-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: var(--s4); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.approval-detail-head h2 { margin: 4px 0; font-size: 18px; font-weight: 600; color: var(--text); }
.approval-detail-head .muted { margin: 0; font-size: 12.5px; color: var(--text-3); }
.approval-detail-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.approval-detail-amount strong { font-size: 20px; font-weight: 500; color: var(--text); }
.danger-text { color: var(--danger); }
.approval-detail .flow { padding: var(--s4) var(--s4) 0; }
.approval-section { padding-bottom: 4px; }
.approval-section .muted { margin: 0; padding: 0 var(--s4); font-size: 12.5px; color: var(--text-3); }
.approval-attachments { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 var(--s4); }
.approval-attachment { display: flex; flex-direction: column; gap: 4px; width: 150px; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.approval-attachment img { width: 100%; height: 190px; object-fit: cover; object-position: top; border: 1px solid var(--border); border-radius: var(--r-md); }
.approval-attachment span { font-size: 11px; color: var(--text-3); overflow-wrap: anywhere; }
.approval-timeline { list-style: none; margin: 0 var(--s4); padding: 0 0 0 16px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.approval-timeline li { position: relative; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--text-2); }
.approval-timeline li::before { content: ''; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.approval-timeline li.rejected::before { border-color: var(--danger); }
.approval-timeline .t-when { color: var(--text-3); font-size: 11.5px; }
.approval-timeline .t-what { font-weight: 500; color: var(--text); }
.approval-timeline li.rejected .t-what { color: var(--danger); }
.approval-timeline .t-comment { flex-basis: 100%; margin: 0; color: var(--text-3); }
.approval-decide { margin-top: var(--s4); padding: var(--s4); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.approval-decide .field-label { margin: 0; }
.approval-comment {
  width: 100%; border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 8px 10px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; resize: vertical;
}
.approval-comment:focus { outline: none; border-color: var(--accent); }
.approval-decide .expense-blocked { margin: 0; }
.approval-decide .order-actions { margin-top: 4px; }
.approval-wait { margin: var(--s4) !important; padding: 0 !important; }

/* ── 簽核流程圖（照實體 FlowDiagram.vue 的 scoped style） ── */
.flow { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.flow-cap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flow-now { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--accent); font-weight: 500; }
.flow-now.danger { color: var(--danger); }
.flow-count { margin-left: auto; font-size: 11px; color: var(--text-3); }
.flow-scroll { overflow-x: auto; padding: 4px 0 2px; }
.flow svg { display: block; overflow: visible; }
.flow .edge { stroke: var(--accent); stroke-width: 1.6; }
.flow .edge.dim { stroke: var(--border-strong); stroke-dasharray: 4 4; }
.flow .shape { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.4; transition: fill var(--t-fast), stroke var(--t-fast); }
.flow .inner { fill: none; stroke-width: 1.2; }
.flow .node.done .shape { stroke: var(--accent); fill: var(--accent-soft); }
.flow .node.done.start .shape, .flow .node.done.end .shape { fill: var(--accent); }
.flow .node.done.end .inner { stroke: var(--accent-ink); fill: none; }
.flow .node.current .shape { stroke: var(--accent); fill: var(--surface); stroke-width: 1.8; }
.flow .node.rejected .shape { stroke: var(--danger); fill: var(--danger-soft); }
.flow .node.pending .shape { stroke: var(--border-strong); }
.flow .ring { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  .flow .ring { animation: flow-breathe 2.2s ease-in-out infinite; }
  @keyframes flow-breathe { 0%, 100% { opacity: .18; } 50% { opacity: .55; } }
}
.flow .icon path, .flow .icon circle { fill: none; stroke: var(--text-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.flow .node.done .icon path { stroke: var(--accent); }
.flow .node.current .icon .fill { fill: var(--accent); stroke: none; }
.flow .node.rejected .icon path { stroke: var(--danger); }
.flow .lbl { fill: var(--text-2); font-family: var(--font-sans); text-anchor: middle; }
.flow .lbl.title { text-anchor: start; font-size: 12.5px; font-weight: 600; fill: var(--text); }
.flow .lbl.sub { text-anchor: start; font-size: 10.5px; fill: var(--text-3); }
.flow .lbl.small { font-size: 10px; fill: var(--text-3); }
.flow .node.pending .lbl.title { fill: var(--text-2); font-weight: 500; }
.flow .node.rejected .lbl.title { fill: var(--danger); }
.flow-legend { display: flex; gap: 14px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: 10.5px; color: var(--text-3); }
.flow-legend li { display: inline-flex; align-items: center; gap: 5px; }
.flow-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1.4px solid var(--border-strong); background: var(--surface); }
.flow-legend .lg.done { border-color: var(--accent); background: var(--accent-soft); }
.flow-legend .lg.current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.flow-legend .lg.rejected { border-color: var(--danger); background: var(--danger-soft); }

@media (max-width: 600px) {
  .approval-search { margin-left: 0; min-width: 0; width: 100%; }
  .approval-detail-amount { align-items: flex-start; }
}

/* ── 對話裡的請款單查詢結果（外框同 order-card） ── */
.lookup-card .lookup-fields { margin-top: var(--s4); }
.lookup-card .lookup-flow { padding: var(--s4) var(--s4) 0; }
.lookup-card .draft-foot { justify-content: flex-end; }
.approval-attachment-missing {
  display: grid; place-items: center; width: 100%; height: 190px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-3);
}

/* ── 草稿的人工修正 ── */
.expense-edited { margin-left: auto; font-size: 10px; padding: 0 6px; border-radius: var(--r-sm); background: var(--warning-soft); color: var(--warning); cursor: help; }
.expense-flag-note { color: var(--warning) !important; font-size: 11.5px !important; }
.expense-corrections ul { list-style: none; margin: 0; padding: 0 var(--s4); display: flex; flex-direction: column; gap: 6px; }
.expense-corrections li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 12.5px; color: var(--text-2); }
.expense-corrections .corr-field { min-width: 6em; color: var(--text-3); }
.expense-corrections .corr-from { text-decoration: line-through; color: var(--text-3); }
.expense-corrections .corr-to { font-weight: 500; color: var(--text); }
.expense-card .expense-corrections { margin: 14px var(--s4) 0; padding: 10px 0 0; }
.expense-card .expense-corrections .section-title { margin-left: 0; }
.expense-card .expense-corrections ul { padding: 0; }
.expense-card .expense-lines th { white-space: nowrap; }

/* ── 草稿三層：品項那一層（照 code 的 c8b6ad9） ── */
.expense-card .expense-items td { vertical-align: middle; }
.expense-card .expense-items .num-input { width: 88px; min-width: 0; }
.expense-card .expense-rate { height: 30px; font-size: 12px; padding: 0 6px; min-width: 5.5em; }
.expense-mark { margin-left: 6px; padding: 0 5px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-2); font-size: 10.5px; }

/* 送出條件（照 code 6750f57）：缺什麼列在送出鈕上方 */
.expense-blockers { list-style: none; margin: 14px var(--s4) 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--danger-soft); color: var(--danger); font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.expense-blockers li { display: flex; align-items: center; gap: 6px; }
.order-card .field-input.missing { border-bottom-color: var(--danger); background: var(--danger-soft); }
.expense-approval { flex-wrap: wrap; }
.expense-go-approval { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; }