/* 預算與報價（洽談分頁）。只用 paper.css 的 token。 */

.budget-card {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.budget-totals {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin: 0;
}

.budget-totals > div {
  min-width: 0;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}

.budget-totals dt {
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.budget-totals dd {
  margin: 0;
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.budget-totals [data-budget-total="unpaid"] {
  color: var(--accent-text);
}

@media (min-width: 600px) {
  .budget-totals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 報價列表依容器寬度排版（同流程表編輯器的 @container 做法），整段不橫向捲動。
   窄（<560）：卡片，兩格一行（報價金額＋付款狀態、已付金額＋尾款日期），類別／廠商／備註／操作整行。
   560 以上：兩行。第一行 類別｜廠商｜報價金額｜付款狀態；第二行 已付金額｜尾款日期｜備註｜操作。 */
.quote-list {
  container: budget / inline-size;
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

.quote-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  min-width: 0;
}

/* 兩條 .quote-line 只是分組；卡片時展開成行內的格子 */
.quote-line {
  display: contents;
}

.quote-row .quote-cell,
.quote-row .quote-actions {
  min-width: 0;
}

.quote-cell {
  display: grid;
  gap: var(--s-1);
  align-content: start;
}

.quote-cap {
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.quote-row .field {
  width: 100%;
  min-width: 0;
  min-height: var(--tap);
}

/* 洽談頁給日期欄 10.5rem 的最小寬度（.consult input[type="date"]）；報價列的格子更窄，要蓋回 0，否則 320 寬會撐出橫向捲動 */
.quote-row input.field[type="date"] {
  min-width: 0;
}

.quote-row .field-warn,
.quote-row .field-error {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--pending-ink);
}

.quote-row .field-warn[hidden],
.quote-row .field-error[hidden] {
  display: none;
}

.quote-row .c-cat,
.quote-row .c-ven,
.quote-row .c-note,
.quote-actions {
  grid-column: 1 / -1;
}

.quote-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-1);
  white-space: nowrap;
}

.quote-actions .btn {
  min-width: var(--tap);
  min-height: var(--tap);
}

@container budget (min-width: 560px) {
  .quote-row {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }

  .quote-line {
    display: grid;
    align-items: start;
    gap: var(--s-2) var(--s-3);
  }

  .quote-line-1 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 7rem 9rem;
  }

  .quote-line-2 {
    grid-template-columns: 7rem 9.5rem minmax(0, 1fr) auto;
  }

  .quote-row .c-cat,
  .quote-row .c-ven,
  .quote-row .c-note,
  .quote-actions {
    grid-column: auto;
  }
}