/* Quotation Generator - scoped additions on top of the shared marketing
   design system (tokens.css / components.css already loaded via
   renderHead()). Reuses .card / .form-grid / .field / .input / .btn as-is
   for the entry form, matching the pattern already established by
   gst-invoice-generator. Everything below is either (a) the actual
   quotation DOCUMENT layout, or (b) print behaviour required to produce a
   clean single/multi-page A4 quotation. Class names are referenced
   directly by app.js and must be kept. Prefix: qg. */

.qg-workspace { display: grid; grid-template-columns: minmax(420px, 0.95fr) minmax(480px, 1.15fr); gap: var(--sp-6); align-items: start; }
@media (max-width: 1150px) {
  .qg-workspace { grid-template-columns: 1fr; }
}

.qg-privacy-note {
  display: flex; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4); border: 1px solid #cfe1ff; border-radius: var(--r-md);
  background: var(--info-100); color: var(--info-700); font-size: var(--fs-12);
}

.qg-form-section { padding: var(--sp-5) 0; border-top: 1px solid var(--border); }
.qg-form-section:first-of-type { border-top: 0; padding-top: 0; }
.qg-section-title { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.qg-section-title > b {
  flex: 0 0 30px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); background: var(--brand-600); color: #fff; font-size: var(--fs-12);
}
.qg-section-title h2 { margin: 0; color: var(--ink-900); font-size: var(--fs-16); }
.qg-section-title p { margin: 4px 0 0; color: var(--ink-400); font-size: var(--fs-12); }

.qg-logo-row { display: flex; align-items: center; gap: var(--sp-4); }
.qg-logo-preview {
  width: 64px; height: 64px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-50); overflow: hidden;
}
.qg-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.qg-logo-preview span { color: var(--ink-400); font-size: var(--fs-11); text-align: center; padding: 0 4px; }
.qg-logo-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.qg-logo-actions small { color: var(--ink-400); font-size: var(--fs-12); }

/* -------------------- Editable item table (in the FORM) -------------------- */
.qg-item-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.qg-item-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: var(--fs-13); }
.qg-item-table th { padding: 10px 8px; background: var(--surface-50); color: var(--ink-600); text-align: left; white-space: nowrap; font-size: var(--fs-12); }
.qg-item-table td { padding: 6px 8px; border-top: 1px solid var(--border); vertical-align: middle; }
.qg-item-table input.input { padding: 8px 10px; font-size: var(--fs-13); }
.qg-col-desc { min-width: 220px; }
.qg-col-num { width: 90px; }
.qg-col-amount { width: 110px; text-align: right; font-weight: 600; white-space: nowrap; }
.qg-empty-cell { text-align: center; color: var(--ink-400); padding: var(--sp-5) !important; }
.qg-remove-item { width: 28px; height: 28px; border: 0; border-radius: var(--r-sm); background: var(--danger-100); color: var(--danger-600); font-weight: 700; cursor: pointer; }

.qg-add-item-row { margin-top: var(--sp-3); }

.qg-discount-row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3); margin-top: var(--sp-4); }
.qg-discount-row .field { flex: 1; min-width: 140px; }

.qg-form-totals { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-50); }
.qg-form-totals > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: var(--fs-13); color: var(--ink-600); }
.qg-form-totals > div.qg-grand { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border); font-size: var(--fs-16); font-weight: 700; color: var(--ink-900); }

.qg-form-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.qg-form-actions .btn { flex: 1; }
@media (max-width: 560px) { .qg-form-actions { flex-direction: column; } }

.field input.invalid, .field select.invalid, .field textarea.invalid { border-color: var(--danger-600); background: #fff7f7; }
.qg-inline-error, .qg-form-error { display: none; margin: 10px 0 0; color: var(--danger-600); font-size: var(--fs-12); font-weight: 600; }
.qg-inline-error.show, .qg-form-error.show { display: block; }
.qg-form-error.show { padding: var(--sp-3) var(--sp-4); border: 1px solid #fecaca; border-radius: var(--r-md); background: var(--danger-100); }

/* -------------------- Preview panel -------------------- */
.qg-preview-panel { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.qg-preview-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.qg-preview-top > div { display: flex; flex-direction: column; gap: 3px; }
.qg-preview-top b { color: var(--ink-700); font-size: var(--fs-12); letter-spacing: 0.03em; }
.qg-preview-top span { color: var(--ink-400); font-size: var(--fs-12); }

/* The actual quotation document - fixed A4-like proportions/typography are
   intentional (this is a printed business document, not a webpage). */
.qg-sheet {
  width: 100%; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 4px;
  background: #fff; color: #172033; box-shadow: var(--shadow-md);
  font-family: Arial, Helvetica, sans-serif;
}
.qg-header { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-5); padding: 22px 24px 16px; border-bottom: 1px solid #ccd5e2; }
.qg-header-business { display: flex; gap: 12px; align-items: flex-start; }
.qg-header-logo { width: 52px; height: 52px; flex: none; object-fit: contain; display: none; }
.qg-header-logo.qg-has-logo { display: block; }
.qg-header h2 { margin: 0 0 8px; color: var(--brand-700); font-size: 16px; }
.qg-header p, .qg-bill-to p, .qg-bottom p { margin: 4px 0; color: #334155; font-size: 10px; line-height: 1.5; word-break: break-word; }
.qg-title-block { text-align: right; }
.qg-title-block h2 { margin: 0; color: var(--brand-700); font-size: 20px; letter-spacing: 0.03em; }
.qg-title-block dl { margin: 10px 0 0; }
.qg-title-block dl div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; margin: 5px 0; font-size: 9px; }
.qg-title-block dt { font-weight: 700; }
.qg-title-block dd { margin: 0; text-align: left; }
.qg-bill-to { padding: 14px 24px; border-bottom: 1px solid #ccd5e2; }
.qg-bill-to small, .qg-bottom small { color: #475569; font-size: 8px; font-weight: 800; letter-spacing: 0.05em; }
.qg-bill-to h3 { margin: 6px 0; color: var(--brand-700); font-size: 12px; }
.qg-reference { padding: 8px 24px; border-bottom: 1px solid #ccd5e2; font-size: 10px; color: #334155; }

.qg-table-wrap { overflow: auto; }
.qg-preview-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 9px; }
.qg-preview-table th { padding: 9px 6px; border-right: 1px solid rgba(255, 255, 255, 0.35); background: var(--brand-700); color: #fff; text-align: center; line-height: 1.25; }
.qg-preview-table td { padding: 9px 6px; border-right: 1px solid #d8e0ec; border-bottom: 1px solid #d8e0ec; text-align: right; vertical-align: top; word-break: break-word; }
.qg-preview-table td.qg-desc-cell { min-width: 180px; text-align: left; white-space: pre-line; }
.qg-preview-table td:first-child { text-align: center; width: 30px; }
.qg-preview-empty { text-align: center !important; color: #94a3b8; padding: 22px !important; }

.qg-summary-area { display: grid; grid-template-columns: 1fr 280px; gap: var(--sp-5); padding: var(--sp-4) 24px; border-bottom: 1px solid #ccd5e2; }
.qg-summary-area > div:first-child b { color: var(--brand-700); font-size: 9px; }
.qg-totals > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 5px 4px; font-size: 10px; }
.qg-totals .qg-grand { margin-top: 6px; padding: 10px 12px; background: var(--brand-700); color: #fff; font-size: 13px; }
@media (max-width: 900px) {
  .qg-summary-area { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .qg-header { grid-template-columns: 1fr; }
  .qg-title-block { text-align: left; }
}

.qg-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); padding: var(--sp-4) 24px; }
.qg-keep-lines { white-space: pre-line; }
.qg-footer { padding: 9px 24px; border-top: 1px solid var(--border); color: var(--ink-400); text-align: center; font-size: 7px; }

.qg-preview-actions { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.qg-preview-actions .btn { min-width: 190px; }
.qg-pdf-status { min-height: 14px; margin: var(--sp-2) 0 0; color: var(--ink-400); text-align: center; font-size: var(--fs-12); }

/* -------------------- Print: clean A4 quotation, page breaks respected --------------------
   #quotationPreview sits several levels deep (body > section > .container >
   .qg-workspace > aside > article#quotationPreview). A blanket "body *
   {display:none}, then un-hide #quotationPreview" does NOT work: display:none
   on an ancestor removes the whole subtree from rendering, and unlike
   visibility there is no way for a descendant rule to override an ancestor's
   display:none (confirmed - it produced a fully blank, 0x0-sized preview).
   So instead every unwanted element is targeted precisely, and the preview's
   own ancestor chain (section/.container/.qg-workspace/.qg-preview-panel) is
   left in normal, visible flow with just its layout (grid columns, sticky
   position, max-width) neutralised so #quotationPreview alone fills the page. */
@media print {
  @page { size: A4 portrait; margin: 7mm; }
  html, body { width: 210mm !important; margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  body > header, body > .service-hero, body > footer, body > script { display: none !important; }
  #quotationForm, .qg-privacy-note, .qg-preview-top, .qg-preview-actions, #pdfStatus { display: none !important; }

  .section { padding: 0 !important; }
  .container { max-width: none !important; width: auto !important; padding: 0 !important; }
  .qg-workspace { display: block !important; }
  .qg-preview-panel { position: static !important; top: auto !important; }

  #quotationPreview {
    width: 196mm !important; margin: 0 auto !important;
    overflow: visible !important; border: 0 !important; box-shadow: none !important; background: #fff !important; color: #0f172a !important;
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
  #quotationPreview .qg-table-wrap { overflow: visible !important; }
  #quotationPreview .qg-preview-table { width: 100% !important; min-width: 0 !important; table-layout: fixed !important; }
  #quotationPreview .qg-preview-table th { color: #fff !important; background: var(--brand-700) !important; font-weight: 800 !important; }
  #quotationPreview .qg-preview-table td { color: #0f172a !important; font-weight: 600 !important; }
  #quotationPreview .qg-preview-table tr { page-break-inside: avoid !important; break-inside: avoid !important; }
  #quotationPreview thead { display: table-header-group !important; }
  #quotationPreview .qg-totals .qg-grand, #quotationPreview .qg-totals .qg-grand * { color: #fff !important; background: var(--brand-700) !important; font-weight: 800 !important; }
  #quotationPreview .qg-header, #quotationPreview .qg-bill-to, #quotationPreview .qg-summary-area, #quotationPreview .qg-bottom, #quotationPreview .qg-footer {
    break-inside: avoid !important; page-break-inside: avoid !important;
  }
}