/*
 * Tab bar + PI / Invoice generator styles. cm-/pi- prefixed; does not touch the
 * COA site sheets. The invoice preview (.pi-page) is a fixed A4-width page scaled
 * to fit via --pi-scale (reset to 1 during html2canvas capture).
 */
:root {
  --pi-accent: #0b6fa9;
  --pi-accent-deep: #00305f;
  --pi-border: #cfe6f2;
  --pi-muted: #5b6b78;
}

/* self-hosted handwriting/signature fonts (all OFL) — several styles to choose from */
@font-face { font-family: "SigBrush";    src: url("vendor/fonts/alexbrush.woff2")  format("woff2"); font-display: swap; }
@font-face { font-family: "SigElegant";  src: url("vendor/fonts/greatvibes.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SigFlourish"; src: url("vendor/fonts/mrdafoe.woff2")    format("woff2"); font-display: swap; }
@font-face { font-family: "SigCasual";   src: url("vendor/fonts/caveat.woff2")     format("woff2"); font-display: swap; }
@font-face { font-family: "SigBold";     src: url("vendor/fonts/yellowtail.woff2") format("woff2"); font-display: swap; }

/* OUTPUT: document-type select and the Generate button on one aligned row */
.pi-output-row {
  align-items: flex-end;
  display: flex;
  gap: 12px;
}
.pi-output-row .pi-output-doctype {
  flex: 1;
  margin-bottom: 0;
}
.pi-output-row select,
.pi-output-row .pi-generate {
  height: 38px;
}
.pi-output-row .pi-generate {
  align-self: flex-end;
  flex: 0 0 auto;
  padding: 0 18px;
}

.tabbar {
  background: #f4f9fc;
  border-bottom: 1px solid var(--pi-border);
  display: flex;
  gap: 4px;
  padding: 8px 14px 0;
  position: sticky;
  top: 0;
  z-index: 60;
}

.tabbar .tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: var(--pi-muted);
  cursor: pointer;
  font: 700 13px/1 Arial, sans-serif;
  padding: 10px 18px;
}

.tabbar .tab.active {
  background: #fff;
  border-color: var(--pi-border);
  color: var(--pi-accent-deep);
}

.tab-logout {
  align-self: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--pi-muted);
  cursor: pointer;
  font: 700 12px/1 Arial, sans-serif;
  margin: 0 4px 6px auto; /* margin-left:auto pushes it to the far right */
  padding: 7px 13px;
}
.tab-logout:hover { background: #fff; border: 1px solid var(--pi-border); color: #b00020; }

.tab-view[hidden] {
  display: none;
}

/* ---------- PI layout ---------- */
.pi-layout {
  display: grid;
  grid-template-columns: minmax(608px, 777px) 1fr;
  gap: 0;
  height: calc(100vh - 43px);
}

.pi-form {
  border-right: 1px solid var(--pi-border);
  overflow-y: auto;
  padding: 14px 16px 60px;
}

.pi-group {
  border: 1px solid var(--pi-border);
  border-radius: 8px;
  margin: 0 0 14px;
  padding: 10px 12px 12px;
}

.pi-group legend {
  color: var(--pi-accent-deep);
  font: 800 12px/1 Arial, sans-serif;
  letter-spacing: 0.3px;
  padding: 0 6px;
  text-transform: uppercase;
}

.pi-form label {
  color: var(--pi-muted);
  display: grid;
  font: 700 11px/1.3 Arial, sans-serif;
  gap: 3px;
  margin-bottom: 8px;
}

/* a class/element display rule overrides the bare [hidden] UA rule, so restore it */
.pi-form label[hidden] {
  display: none;
}

/* bulk product picker (reuses the COA .cm-menu component, but inline so the
   panel isn't clipped by the scrollable form) */
.pi-prod-picker {
  margin-bottom: 12px;
}
.pi-prod-picker .cm-menu-toggle {
  width: 100%;
}
.pi-prod-picker .cm-menu-panel {
  box-shadow: none;
  margin-top: 6px;
  position: static;
  width: auto;
}
.pi-prod-add {
  margin-top: 8px;
  width: 100%;
}

.pi-form input,
.pi-form textarea,
.pi-form select {
  background: #fff;
  border: 1px solid var(--pi-border);
  border-radius: 6px;
  color: #14222e;
  font: 400 13px/1.3 Arial, sans-serif;
  padding: 7px 9px;
  width: 100%;
}

.pi-form textarea { resize: vertical; }

/* templates: save/load the whole form, stored in this browser only */
.pi-tpl-row { align-items: center; display: flex; gap: 8px; margin-bottom: 8px; }
.pi-tpl-row select, .pi-tpl-row input { flex: 1 1 auto; min-width: 0; }
.pi-tpl-row .pi-btn { flex: 0 0 auto; white-space: nowrap; }
.pi-tpl-save { background: var(--pi-accent); border-color: var(--pi-accent); color: #fff; }
.pi-tpl-save:hover { background: #095c8d; }
.pi-tpl-del { background: #fbeaea; border-color: #f0c9c9; color: #b00020; }
.pi-tpl-del:hover { background: #f6dada; }
.pi-tpl-hint { margin: 4px 0 2px; }
#piTplStatus { display: block; min-height: 14px; }

.pi-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* structured Ship To sub-section (same fields as Bill To) */
.pi-shipto-fields { border-top: 1px dashed var(--pi-border); margin-top: 10px; padding-top: 10px; }
.pi-subhead { color: var(--pi-accent-deep); font: 800 11px/1 Arial, sans-serif; letter-spacing: 0.3px; margin-bottom: 8px; text-transform: uppercase; }
.pi-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.pi-check {
  align-items: center;
  display: flex !important;
  flex-direction: row;
  gap: 6px;
}
.pi-check input { width: auto; }
/* when a checkbox shares a 2-col row with a labelled select/input, the neighbour
   sits below its own caption — drop the checkbox to overlay that field's height so
   the box + text line up with the field's vertical centre (not the cell top) */
.pi-row2 .pi-check {
  align-self: end;
  height: 33px;
}

/* line items — one aligned table row each: Product | Description | Qty | Unit price | Amount | × */
.pi-items-head,
.pi-item-row {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.15fr) 54px 68px 66px 22px;
}
.pi-items-head {
  color: var(--pi-muted);
  font: 700 10px/1 Arial, sans-serif;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  padding: 0 2px;
  text-transform: uppercase;
}
.pi-items-head span:nth-child(4), .pi-items-head span:nth-child(5) { text-align: right; }
.pi-item-row { margin-bottom: 6px; }
.pi-item-row input { min-width: 0; padding: 6px 7px; }
.pi-it-name { font-weight: 600; }
.pi-it-price { text-align: right; }
.pi-it-amount {
  color: var(--pi-accent-deep);
  font: 700 12px/1 Arial, sans-serif;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
}
.pi-it-del {
  background: #fbeaea;
  border: 1px solid #f0c9c9;
  border-radius: 5px;
  color: #b00020;
  cursor: pointer;
  font: 700 11px/1 Arial, sans-serif;
  padding: 5px 0;
}

.pi-items-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 6px;
}
.pi-items-btns { display: flex; gap: 8px; }
.pi-btn-clear { background: #fbeaea; border-color: #f0c9c9; color: #b00020; }
.pi-btn-clear:hover { background: #f6dada; }
.pi-grand { color: var(--pi-accent-deep); font: 700 13px/1 Arial, sans-serif; }
.pi-grand b { font-size: 15px; }

.pi-btn {
  background: #eef6fb;
  border: 1px solid var(--pi-border);
  border-radius: 6px;
  color: var(--pi-accent);
  cursor: pointer;
  font: 700 12px/1 Arial, sans-serif;
  padding: 7px 12px;
}
.pi-btn:hover { background: #dcecf6; }

/* always-open paste-to-parse box */
.pi-paste-box {
  background: #f4f9fc;
  border: 1px solid var(--pi-border);
  border-radius: 8px;
  margin-top: 10px;
  padding: 10px 12px;
}
.pi-paste-title { color: var(--pi-accent-deep); font: 800 11px/1.2 Arial, sans-serif; letter-spacing: 0.3px; margin-bottom: 4px; text-transform: uppercase; }
.pi-paste-eg { list-style: none; margin: 4px 0 8px; padding: 0; }
.pi-paste-eg li { margin: 3px 0; }
.pi-hint { color: var(--pi-muted); font: 400 11px/1.4 Arial, sans-serif; margin: 6px 0; }
.pi-hint code, .pi-paste-eg code { background: #e6f0f7; border-radius: 3px; font-size: 11px; padding: 1px 5px; }
.pi-notes-field { margin-top: 12px; }

.pi-recognized-label {
  color: var(--pi-muted);
  font: 700 10px/1 Arial, sans-serif;
  margin: 8px 0 5px;
  text-transform: uppercase;
}
.pi-detected {
  color: #2e7d32;
  font: 700 10px/1 Arial, sans-serif;
  text-transform: none;
}
.pi-bank-fields { display: grid; gap: 3px; margin: 4px 0 4px; }
.pi-bf { display: grid; grid-template-columns: 120px 1fr; gap: 8px; font: 400 11.5px/1.35 Arial, sans-serif; }
.pi-bf b { color: var(--pi-accent); font-weight: 700; }
.pi-bf-empty { color: var(--pi-muted); font: italic 12px/1 Arial; }

.pi-warn {
  align-self: end;
  color: #b00020;
  font: 700 11px/1.3 Arial, sans-serif;
}

.pi-generate {
  align-self: end;
  background: var(--pi-accent);
  border: 1px solid var(--pi-accent);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font: 700 13px/1 Arial, sans-serif;
  padding: 9px 14px;
}
.pi-generate:hover { background: #095c8d; }
.pi-generate:disabled { cursor: wait; opacity: 0.6; }
.pi-status { color: var(--pi-accent-deep); font: 600 12px/1 Arial, sans-serif; margin-top: 6px; }

/* ---------- preview ---------- */
.pi-preview-wrap {
  background: #eef4f8;
  overflow: auto;
}
.pi-preview-shell {
  display: grid;
  justify-content: center;
  padding: 18px;
}
.pi-page {
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 48, 95, 0.16);
  width: 794px;
  zoom: var(--pi-scale, 1);
}
@supports not (zoom: 1) {
  .pi-page { transform: scale(var(--pi-scale, 1)); transform-origin: top center; }
}

.pi-doc {
  color: #14222e;
  font-family: Arial, Helvetica, sans-serif;
  padding: 46px 46px 40px;
}

/* ===== Professional Trade Proforma Invoice (scope .pi-pro) — table-driven so the
   html2canvas PDF and the Word .docx mirror it faithfully. ===== */
.pi-pro { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pi-pro table { border-collapse: collapse; width: 100%; }

/* 1. letterhead */
.pi-pro .pi-letterhead { text-align: center; }
.pi-pro .pi-seller-name { color: var(--pi-accent-deep); font-size: 19px; font-weight: 800; letter-spacing: 0.4px; }
.pi-pro .pi-seller-line { color: #2c3e4c; font-size: 11.5px; line-height: 1.5; margin-top: 2px; }
.pi-pro .pi-seller-line .pi-dot { color: var(--pi-accent); margin: 0 7px; }
.pi-pro .pi-rule-double { border-top: 2px solid var(--pi-accent-deep); border-bottom: 1px solid var(--pi-accent); height: 3px; margin: 10px 0 0; }

/* 2. title */
.pi-pro .pi-title { color: var(--pi-accent-deep); font-size: 26px; font-weight: 800; letter-spacing: 3px; margin: 16px 0; text-align: center; }

/* 3. parties + meta head grid */
.pi-pro .pi-headgrid { margin-bottom: 14px; table-layout: fixed; }
.pi-pro .pi-headgrid > tbody > tr > td { border: 1px solid var(--pi-border); padding: 9px 11px; vertical-align: top; }
.pi-pro .pi-hg-party { width: 50%; }
.pi-pro .pi-hg-meta { width: 50%; padding: 0; }
/* visual hierarchy: small label, bold name, regular company/address, muted contact set
   apart by extra space — so Bill To / Ship To read as grouped blocks, not one clump */
.pi-pro .pi-cell-label { color: var(--pi-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.6px; line-height: 1.4; margin-bottom: 3px; text-transform: uppercase; }
.pi-pro .pi-party-name { color: var(--pi-accent-deep); font-size: 13.5px; font-weight: 800; line-height: 1.45; margin-bottom: 1px; }
.pi-pro .pi-party-line { color: #2c3a45; font-size: 12px; line-height: 1.5; }
.pi-pro .pi-party-contact { color: var(--pi-muted); font-size: 11px; line-height: 1.45; margin-top: 7px; }
.pi-pro .pi-shipto { border-top: 1px dotted var(--pi-border); margin-top: 16px; padding-top: 12px; }
.pi-pro .pi-metakv td { border-bottom: 1px solid #eef6fb; padding: 6px 11px; vertical-align: top; }
.pi-pro .pi-metakv tr:last-child td { border-bottom: none; }
.pi-pro .pi-mk { color: var(--pi-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; width: 108px; }
.pi-pro .pi-mv { color: #14222e; font-size: 12px; font-weight: 600; line-height: 1.4; }

/* 4. items table */
.pi-pro .pi-items-tbl { margin-bottom: 4px; table-layout: fixed; }
.pi-pro .pi-items-tbl th { background: var(--pi-accent); border: 1px solid var(--pi-accent); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; line-height: 1.25; padding: 8px 7px; text-align: left; text-transform: uppercase; }
.pi-pro .pi-items-tbl th small { font-size: 9px; font-weight: 400; opacity: 0.9; }
.pi-pro .pi-items-tbl td { border: 1px solid var(--pi-border); font-size: 12px; padding: 7px 8px; vertical-align: top; word-wrap: break-word; }
.pi-pro .pi-items-tbl td.c { text-align: center; }
.pi-pro .pi-items-tbl td.r { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pi-pro .pi-nowrap { white-space: nowrap; }
.pi-pro .pi-item-name { color: #14222e; font-weight: 700; }
.pi-pro .pi-item-spec { color: var(--pi-muted); font-size: 11.5px; }
.pi-pro .pi-amt { font-weight: 600; }
.pi-pro .pi-items-tbl th.pi-w-price, .pi-pro .pi-items-tbl th.pi-w-amt { text-align: right; }
.pi-pro .pi-items-tbl th.pi-w-qty { text-align: center; }
.pi-pro .pi-w-no { width: 30px; }
.pi-pro .pi-w-spec { width: 122px; }
.pi-pro .pi-w-qty { width: 72px; }
.pi-pro .pi-w-price { width: 92px; }
.pi-pro .pi-w-amt { width: 98px; }

/* 5. total footer row */
.pi-pro .pi-total-row td { background: #eaf3fa; border: 1px solid var(--pi-border); font-size: 12px; padding: 9px 8px; }
.pi-pro .pi-total-lbl { color: var(--pi-accent-deep); font-weight: 800; letter-spacing: 1px; text-align: left; }
.pi-pro .pi-total-qty { color: var(--pi-accent-deep); font-weight: 700; text-align: center; }
.pi-pro .pi-total-amt { background: #eaf3fa; border: 1px solid var(--pi-border); color: #14222e; font-size: 15px; font-weight: 800; text-align: right; white-space: nowrap; }

/* 6. notes */
.pi-pro .pi-notes { color: #3a4a56; font-size: 11.5px; font-style: italic; line-height: 1.5; margin-top: 12px; }
.pi-pro .pi-notes-label { color: var(--pi-accent-deep); font-style: normal; font-weight: 700; }
.pi-bank-warn { color: #b00020 !important; font-weight: 700; margin: 8px 0 0; }

/* 7. bilingual bank panel */
.pi-pro .pi-bank-tbl { border: 1px solid var(--pi-border); margin-top: 16px; table-layout: fixed; }
.pi-pro .pi-bank-bar { background: #eaf3fa; border: 1px solid var(--pi-border); color: var(--pi-accent-deep); font-size: 12px; font-weight: 800; letter-spacing: 0.5px; padding: 8px 11px; text-align: left; text-transform: uppercase; }
.pi-pro .pi-bank-tbl td { border: 1px solid var(--pi-border); padding: 6px 11px; vertical-align: top; }
.pi-pro .pi-bank-label { color: var(--pi-accent); font-size: 11px; font-weight: 700; line-height: 1.45; width: 240px; }
.pi-pro .pi-bank-cn { color: var(--pi-muted); font-weight: 400; }
.pi-pro .pi-bank-val { color: #14222e; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.45; word-break: break-word; }

/* 8. signature (bottom-right, centred over the printed name, slight overlap) */
.pi-pro .pi-sign { align-items: center; display: flex; flex-direction: column; margin: 30px 0 0 auto; width: fit-content; }
.pi-pro .pi-sig-img { display: block; height: 62px; object-fit: contain; position: relative; z-index: 1; }
.pi-pro .pi-sig-blank { height: 62px; }
.pi-pro .pi-sig-name { border-top: 1.5px solid var(--pi-accent-deep); color: var(--pi-accent-deep); font-size: 13px; font-weight: 700; margin-top: 2px; min-width: 220px; padding-top: 4px; text-align: center; }
.pi-pro .pi-sign-label { color: var(--pi-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; margin-top: 3px; min-width: 220px; text-align: center; }

@media (max-width: 900px) {
  .pi-layout { grid-template-columns: 1fr; height: auto; }
  .pi-form { border-right: none; border-bottom: 1px solid var(--pi-border); }
}