/* 員工網頁：代墊款收據、小包報價兩頁（receipt.html、quote.html；P4）自己的樣式。顏色、元件沿用 theme.css 的變數與 sp- 元件；這裡只加 dc- 開頭的。
   CSP style-src 'self'：頁面不能有 <style>、style 屬性。 */

.dc-stack { display: grid; gap: var(--s5); }
.dc-status { font-weight: 600; color: var(--ink-2); }
.dc-status.is-bad { color: var(--redline); }
.dc-status.is-done { color: var(--moss); }
.dc-small { color: var(--ink-3); font-size: 13px; }
.dc-err { color: var(--redline); font-size: var(--fs-sm); font-weight: 600; }
.sp-input[aria-invalid="true"] { border-color: var(--redline); }
select.sp-input { appearance: auto; }

/* 照片 */
.dc-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dc-file:focus-visible + .sp-hint { box-shadow: var(--focus); }
.dc-thumbbox { display: grid; gap: var(--s2); }
.dc-thumb { display: block; max-width: 100%; max-height: 360px; object-fit: contain; border: var(--line); border-radius: var(--r-ctl); background: var(--paper-2); }
.dc-filelink { font-weight: 600; overflow-wrap: anywhere; }

/* 含稅／未稅 */
.dc-radios { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin: 0; padding: 0; border: 0; }
.dc-radios legend { width: 100%; padding: 0; margin-bottom: var(--s1); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.dc-radios .dc-err { width: 100%; }

/* 照片比對結果：一條一條，每條底下是原因按鈕 */
.dc-compare { display: grid; gap: var(--s3); }
.dc-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.dc-item { display: grid; gap: var(--s2); padding: var(--s3); border: var(--line); border-left: 4px solid var(--ochre); border-radius: var(--r-ctl); background: var(--sheet); }
.dc-item.is-done { border-left-color: var(--moss); }
.dc-item__msg { font-weight: 600; }
.dc-item__why { color: var(--redline); font-size: var(--fs-sm); }
.dc-reasons { display: flex; flex-wrap: wrap; gap: var(--s2); }
.dc-reason { text-align: left; white-space: normal; line-height: 1.35; padding-top: var(--s1); padding-bottom: var(--s1); }
.dc-reason[aria-pressed="true"] { background: var(--verdigris-tint); border-color: var(--verdigris); color: var(--verdigris-2); }
.dc-other { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); }

@media (max-width: 380px) {
  .dc-other { grid-template-columns: 1fr; }
}