/* Line-item editor shared by the invoice and quotation forms */
.dl-head, .dl-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 100px 104px 100px 92px; gap: 6px; align-items: center; }
.dl-row.dl-has-remark, .dl-head.dl-has-remark { grid-template-columns: minmax(0, 1fr) 64px 92px 100px 96px 96px 92px; }
.dl-row { margin-bottom: 6px; }
.dl-head { font-size: 11px; font-weight: 500; color: var(--tx2); margin-bottom: 6px; }
.dl-row input, .dl-row select { width: 100%; box-sizing: border-box; background: var(--sf2); border: 1px solid var(--bd2); border-radius: var(--r); padding: 7px 8px; color: var(--tx); outline: none; min-width: 0; }
.dl-row input:focus-visible, .dl-row select:focus-visible { border-color: var(--ac); }
.dl-total { text-align: right; font-size: 12px; font-weight: 600; padding: 7px 4px; overflow-wrap: anywhere; }
.dl-btns { display: flex; gap: 3px; justify-content: flex-end; }
.dl-btn { background: var(--sf2); color: var(--tx2); border: 1px solid var(--bd2); border-radius: var(--r); cursor: pointer; font-size: 13px; height: 30px; width: 28px; padding: 0; }
.dl-btn:hover { color: var(--tx); border-color: var(--ac); }
.dl-btn.dl-rm { background: var(--rd-d); color: var(--rd); border-color: transparent; }
.dl-add { margin-bottom: 10px; }

.dl-totals { background: var(--sf2); border-radius: var(--r2); padding: 12px 16px; margin-top: 8px; }
.dl-totals-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 6px; }
.dl-totals-row > span:first-child { color: var(--tx2); }
.dl-totals-row.dl-grand { font-size: 14px; font-weight: 700; border-top: 1px solid var(--bd); padding: 8px 0 0; margin: 0; }
.dl-totals-row.dl-grand > span:first-child { color: var(--tx); }
.dl-totals-row.dl-grand > span:last-child { color: var(--ac); }

.inv-num-edit { background: var(--sf2); border: 1px solid var(--bd2); border-radius: var(--r2); padding: 10px 12px; margin-bottom: 10px; }
.inv-num-edit[hidden], .dl-head[hidden] { display: none; }
.inv-num-warn { font-size: 11.5px; color: var(--gd); margin-top: 6px; }

@media (max-width: 640px) {
  .dl-head { display: none; }
  .dl-row, .dl-row.dl-has-remark { grid-template-columns: 1fr 1fr 1fr; padding-bottom: 8px; border-bottom: 1px solid var(--bd); }
  .dl-row .dl-desc { grid-column: 1 / -1; }
  .dl-row .dl-remark { grid-column: 1 / -1; }
  .dl-row .dl-total { text-align: left; }
  .dl-row .dl-btns { grid-column: span 2; }
}
#ni-id[readonly] { background: var(--sf3); }

/* Fixed quotation charge rows (label, qty, price, tax, total, remarks) */
.qt-chg-head.qt-std, .qt-chg-row.qt-std { grid-template-columns: 1.5fr 60px 105px 100px 105px 140px; }
@media (max-width: 640px) {
  .qt-chg-head.qt-std { display: none; }
  .qt-chg-row.qt-std { grid-template-columns: 1fr 1fr 1fr; padding-bottom: 8px; border-bottom: 1px solid var(--bd); }
  .qt-chg-row.qt-std .qt-chg-lbl { grid-column: 1 / -1; }
  .qt-chg-row.qt-std select:last-child { grid-column: 1 / -1; }
}

.job-refs { font-size: 10px; color: var(--tx2); margin-top: 2px; overflow-wrap: anywhere; }

/* Invoice form: number field first, then grouped sections */
.inv-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 13px; align-items: start; background: var(--sf2); border: 1px solid var(--bd2); border-radius: var(--r2); padding: 14px; margin-bottom: 14px; }
.inv-head-num input { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.inv-head-num input::placeholder { font-family: var(--body); font-weight: 400; letter-spacing: 0; }
.inv-hint { font-size: 11px; color: var(--tx2); margin-top: 4px; }
.inv-sec { font-size: 11px; font-weight: 700; color: var(--tx2); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--bd); }
@media (max-width: 640px) { .inv-head { grid-template-columns: 1fr; } }