/* Quotation / proforma-invoice generator: form grid + document-specific
   styles. The A4 sheet and ALL print rules are shared from
   packing-slip/packing-slip.css (.ps-sheet, .ps-table, .ps-parties…). */
.qi-shell { max-width: 1180px; }
/* the form is much taller than the A4 card — keep the live preview in view
   while the user edits further down (packing-slip's shorter form doesn't need it) */
@media (min-width: 961px) {
  .qi-console .ps-preview-card { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
}
.qi-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qi-2col .st-field { margin-bottom: 12px; }
@media (max-width: 460px) { .qi-2col { grid-template-columns: 1fr; gap: 0; } }

/* document-type segmented control */
.qi-doctype { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.qi-type { position: relative; }
.qi-type input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.qi-type span { display: block; text-align: center; padding: 9px 6px; border: 1px solid var(--line, #d1d5db); border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ink-soft, #4b5563); }
.qi-type input:checked + span { border-color: var(--accent, #b45309); color: var(--accent, #b45309); background: color-mix(in srgb, var(--accent, #b45309) 7%, #fff); }
.qi-type input:focus-visible + span { outline: 2px solid var(--accent, #b45309); outline-offset: 1px; }

/* item-line editor: name | sku | qty | unit price | amount | × */
.qi-rowhead { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) 62px minmax(0,1fr) minmax(0,1fr) 32px; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-soft, #6b7280); padding: 0 2px 4px; }
.qi-row { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) 62px minmax(0,1fr) minmax(0,1fr) 32px; gap: 8px; margin-bottom: 8px; position: relative; align-items: center; }
.qi-row .st-input { padding: 9px 10px; font-size: 13px; }
.qi-row input[aria-invalid="true"], .qi-form input[aria-invalid="true"] { border-color: #dc2626; background: #fef2f2; }
.qi-amt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; text-align: right; color: var(--ink-soft, #374151); overflow-wrap: anywhere; }
.qi-del { width: 32px; height: 38px; border: 1px solid var(--line, #d1d5db); border-radius: 9px; background: #fff; color: var(--ink-soft, #6b7280); font-size: 15px; line-height: 1; cursor: pointer; }
.qi-del:hover { border-color: #dc2626; color: #dc2626; }
@media (max-width: 640px) {
  .qi-rowhead { display: none; }
  .qi-row { grid-template-columns: 1fr 1fr; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 12px 10px 10px; }
  .qi-row .c-name, .qi-row .qi-amt { grid-column: 1 / -1; }
  .qi-row .qi-amt { text-align: left; font-weight: 700; }
  .qi-row .qi-del { position: absolute; top: 6px; right: 6px; height: 30px; }
}

#qi-stats { margin: 12px 0 0; font-weight: 600; }
#qi-draft { margin-top: 4px; font-size: 12px; color: var(--ink-soft, #6b7280); min-height: 16px; }
#qi-status { margin-top: 8px; }

/* ---- sheet (document) pieces that packing-slip doesn't have ---- */
.qi-totals { margin-top: 12px; margin-left: auto; width: 62%; min-width: 240px; font-size: 12.5px; }
.qi-totals .tr { display: flex; justify-content: space-between; gap: 12px; padding: 4px 8px; border-bottom: 1px solid #e5e7eb; }
.qi-totals .tr span:last-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.qi-totals .tr.disc span:last-child, .qi-totals .tr.grand span:last-child { font-weight: 700; }
.qi-totals .tr.grand { border-top: 1.5px solid #111827; border-bottom: none; font-size: 14px; font-weight: 700; padding-top: 7px; }
.qi-totals .tr.grand span:last-child { font-size: 16px; }
.qi-block { margin-top: 14px; font-size: 12.5px; }
.qi-block b { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; }
.qi-block p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.qi-disclaimer { margin-top: 16px; border-top: 1px solid #e5e7eb; padding-top: 10px; font-size: 11px; color: #6b7280; }
.qi-disclaimer b { color: #374151; }
@media (max-width: 640px) { .qi-totals { width: 100%; min-width: 0; } }