/* Campong Quotation — A4 fixed layout + Builder panel */
@page { size: A4 portrait; margin: 0; }

:root {
  --ci-yellow: #f5c400;
  --ci-yellow-light: #fff8dc;
  --ci-table-head: #6d6d6d;
  --ci-table-alt: #ececec;
  --ci-border: #000;
  --ci-orange: #e65100;
  --ci-a4-w: 210mm;
  --ci-a4-h: 297mm;
  --ci-row-h: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: "Tahoma", "Arial", "Sarabun", sans-serif;
  font-size: 9pt; color: #111; background: #c8c8c8;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.ci-sheet {
  width: var(--ci-a4-w); height: var(--ci-a4-h); max-height: var(--ci-a4-h);
  margin: 0 auto; background: #fff; border: 1px solid #000;
  display: flex; flex-direction: column; overflow: hidden;
  page-break-after: always;
}
.ci-sheet:last-child { page-break-after: auto; }
.ci-sheet-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ci-table-grow { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ci-table-grow table.ci-items { height: 100%; }
.ci-table-grow table.ci-items tbody { height: 100%; }
table.ci-items tr.filler td { height: var(--ci-row-h); padding: 0 4px; background: #fff !important; }
table.ci-items tr.filler:nth-child(even) td { background: var(--ci-table-alt) !important; }

.ci-head {
  display: grid; grid-template-columns: 18mm 1fr 155px;
  flex-shrink: 0; border-bottom: 1px solid #000; min-height: 82px;
}
.ci-logo {
  padding: 5px 3px; border-right: 1px solid #000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; max-width: 18mm;
}
.ci-logo img {
  max-width: 18mm; max-height: 14mm; width: auto; height: auto;
  object-fit: contain; display: block;
}
.ci-company { padding: 5px 6px; text-align: center; line-height: 1.22; border-right: 1px solid #000; }
.ci-company .th { font-size: 10.5pt; font-weight: 700; margin: 0 0 1px; }
.ci-company .en { font-size: 8pt; font-weight: 700; margin: 0 0 2px; }
.ci-company p { margin: 0; font-size: 7pt; line-height: 1.28; }
.ci-quote-box { background: var(--ci-yellow); display: flex; flex-direction: column; }
.ci-quote-box .title { text-align: center; font-weight: 700; font-size: 9.5pt; padding: 5px 3px; border-bottom: 1px solid #000; }
.ci-quote-box table { width: 100%; border-collapse: collapse; font-size: 7pt; flex: 1; }
.ci-quote-box td { border-bottom: 1px solid #000; padding: 2px 4px; vertical-align: middle; }
.ci-quote-box tr:last-child td { border-bottom: none; }
.ci-quote-box td:first-child { font-weight: 700; width: 40%; border-right: 1px solid #000; }

.ci-parties { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #000; font-size: 7pt; flex-shrink: 0; min-height: 58px; }
.ci-party { padding: 2px 5px; }
.ci-party:first-child { border-right: 1px solid #000; }
.ci-party .label { font-weight: 700; }
.ci-party .row { margin: 0; line-height: 1.32; }

.ci-project { background: var(--ci-yellow-light); border-bottom: 1px solid #000; padding: 2px 5px; font-size: 7.5pt; font-weight: 700; flex-shrink: 0; line-height: 1.3; }

table.ci-items { width: 100%; border-collapse: collapse; font-size: 7pt; table-layout: fixed; }
table.ci-items thead th { background: var(--ci-table-head); color: #fff; font-weight: 700; text-align: center; border: 1px solid #000; padding: 2px 1px; line-height: 1.15; font-size: 6.5pt; }
table.ci-items tbody td { border: 1px solid #000; padding: 1px 3px; vertical-align: top; line-height: 1.25; font-size: 7pt; word-wrap: break-word; }
table.ci-items tbody tr:nth-child(even):not(.filler) td { background: var(--ci-table-alt); }
table.ci-items td.c { text-align: center; }
table.ci-items td.r { text-align: right; white-space: nowrap; }
table.ci-items .sub { display: block; padding-left: 6px; font-size: 6.5pt; }

.ci-footer-block { flex-shrink: 0; margin-top: auto; }
.ci-bottom { display: grid; grid-template-columns: 1fr 200px; }
.ci-bottom-left { border-right: 1px solid #000; border-top: 1px solid #000; padding: 3px 5px; font-size: 6.5pt; line-height: 1.3; }
.ci-pay-title { font-weight: 700; }
.ci-pay-methods { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 1px 0 2px; }
.ci-bank { font-weight: 700; font-size: 6.5pt; margin: 2px 0; }
.ci-notes { color: var(--ci-orange); font-size: 6pt; line-height: 1.28; }
.ci-notes p { margin: 0; }
.ci-terms-en { font-size: 6pt; margin-top: 2px; }
.ci-thanks { text-align: center; font-size: 6.5pt; font-style: italic; margin-top: 2px; padding-top: 2px; border-top: 1px solid #ccc; }
.ci-baht-words { border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 4px 6px; font-size: 7.5pt; text-align: center; flex-shrink: 0; }
.ci-totals-wrap { border-top: 1px solid #000; }
table.ci-totals { width: 100%; border-collapse: collapse; font-size: 7pt; }
table.ci-totals td { border: 1px solid #000; padding: 1px 4px; }
table.ci-totals td:first-child { font-weight: 700; width: 58%; }
table.ci-totals td.r { text-align: right; }
table.ci-totals tr.grand td { background: var(--ci-table-head); color: #fff; font-weight: 700; }

.ci-signatures { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ci-yellow); min-height: 82px; flex-shrink: 0; }
.ci-sign { padding: 3px 6px; position: relative; min-height: 82px; }
.ci-sign:first-child { border-right: 1px solid #000; }
.ci-sign .dots { margin-top: 36px; text-align: center; font-size: 7.5pt; }
.ci-sign .role { text-align: center; font-weight: 700; font-size: 7.5pt; }
.ci-sign .date-line { text-align: center; font-size: 7pt; }
.ci-sign.seller { text-align: center; }
.ci-sign.seller .stamp {
  position: absolute; left: 50%; top: 2px; transform: translateX(-50%);
  max-width: 20mm; max-height: 12mm; width: auto; height: auto;
  object-fit: contain; opacity: 0.88; z-index: 0;
}
.ci-sign.seller .auth-text { position: relative; z-index: 1; font-size: 6.5pt; margin-top: 48px; line-height: 1.35; }
.ci-sign.seller .auth-text strong { font-size: 7pt; }

tr.section-infra td { background: #fde8ea !important; color: #922b21; font-weight: 600; }
.ci-infra-banner { background: #fde8ea; border-top: 1px solid #e74c3c; border-bottom: 1px solid #e74c3c; color: #922b21; padding: 2px 5px; font-size: 6pt; font-weight: 700; }

.app-layout { display: grid; grid-template-columns: minmax(320px, 380px) 1fr; min-height: 100vh; }
.builder-panel { background: #1e3a5f; color: #fff; padding: 12px 14px 24px; overflow-y: auto; max-height: 100vh; position: sticky; top: 0; font-family: "Sarabun", "Tahoma", sans-serif; }
.builder-panel h2 { margin: 0 0 10px; font-size: 1.05rem; }
.builder-panel h3 { margin: 14px 0 6px; font-size: 0.88rem; color: #a8d4ff; border-bottom: 1px solid rgba(255,255,255,.15); padding-bottom: 4px; }
.b-field { margin-bottom: 8px; }
.b-field label { display: block; font-size: 0.78rem; font-weight: 600; margin-bottom: 3px; color: #cce4ff; }
.b-field input, .b-field select, .b-field textarea { width: 100%; min-height: 36px; padding: 6px 8px; border: 1px solid #4a6fa5; border-radius: 6px; font: inherit; font-size: 0.88rem; }
.b-field textarea { min-height: 52px; resize: vertical; }
.b-search-wrap { position: relative; }
.b-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #fff; color: #111; border: 1px solid #888; border-radius: 0 0 6px 6px; max-height: 180px; overflow-y: auto; display: none; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.b-suggest.open { display: block; }
.b-suggest button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-bottom: 1px solid #eee; background: #fff; cursor: pointer; font: inherit; font-size: 0.85rem; }
.b-suggest button:hover { background: #eef6ff; }
.b-suggest .meta { display: block; font-size: 0.72rem; color: #666; }
.b-row { display: grid; grid-template-columns: 1fr 72px 88px; gap: 6px; }
.b-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.b-actions button { min-height: 36px; padding: 6px 12px; border: none; border-radius: 6px; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600; }
.btn-primary { background: #f5c400; color: #111; }
.btn-secondary { background: #4a6fa5; color: #fff; }
.btn-danger { background: #c0392b; color: #fff; }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.line-list { margin: 8px 0 0; padding: 0; list-style: none; max-height: 200px; overflow-y: auto; font-size: 0.8rem; }
.line-list li { background: rgba(255,255,255,.08); border-radius: 6px; padding: 6px 8px; margin-bottom: 4px; display: flex; justify-content: space-between; gap: 6px; }
.line-list li button { flex-shrink: 0; background: #c0392b; color: #fff; border: 0; border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 0.72rem; }
.b-meta { font-size: 0.75rem; color: #9ec5ff; margin-bottom: 8px; }
.preview-wrap { padding: 16px 12px 32px; overflow-x: auto; }
.preview-toolbar { text-align: center; margin-bottom: 12px; }
.preview-toolbar button { min-height: 40px; padding: 8px 18px; margin: 0 4px; border: none; border-radius: 8px; background: #117a65; color: #fff; font-weight: 700; cursor: pointer; font-family: inherit; }

@media print {
  body { background: #fff; }
  .app-layout { display: block; }
  .builder-panel, .preview-toolbar { display: none !important; }
  .preview-wrap { padding: 0; overflow: visible; }
  .ci-sheet, .profile-canvas { margin: 0; box-shadow: none; border: none; page-break-after: always; }
  #printSheet[hidden] { display: none !important; }
  #profilePreviewHost:not([hidden]) { display: block !important; }
}
@media (max-width: 900px) { .app-layout { grid-template-columns: 1fr; } .builder-panel { position: relative; max-height: none; } }
@media screen { .ci-sheet { box-shadow: 0 4px 24px rgba(0,0,0,.28); margin-bottom: 16px; } }