:root{
  --paper: #efece1;
  --paper-line: #d8d2bd;
  --ink: #23324a;
  --ink-soft: #4c5c73;
  --amber: #b5811f;
  --amber-soft: #f1e3c2;
  --green: #3f6d54;
  --green-soft: #e2ead9;
  --red: #a4402c;
  --red-soft: #f1ddd4;
  --card-bg: #f7f5ec;
  --border: #c7bfa4;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background:
    linear-gradient(var(--paper-line) 1px, transparent 1px) 0 0/100% 28px,
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{
  font-family: var(--sans);
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.sheet-header{
  background: var(--ink);
  color: #f3f1e7;
  border-bottom: 4px solid var(--amber);
}
.header-inner{
  max-width: 2400px;
  margin: 0 auto;
  padding: 22px 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.back-link{
  display: inline-block;
  color: var(--amber-soft);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-decoration: none;
  margin-bottom: 8px;
  opacity: 0.9;
}
.back-link:hover{ text-decoration: underline; opacity: 1; }
.title-block h1{
  color: #f3f1e7;
  font-size: 1.55rem;
  font-weight: 700;
}
.subtitle{
  margin: 6px 0 0;
  color: #b9c2ce;
  font-size: 0.85rem;
  font-family: var(--mono);
}
.install-hint{
  font-size: 0.75rem;
  color: var(--amber-soft);
  border: 1px dashed var(--amber);
  padding: 4px 8px;
  border-radius: 3px;
}
.project-banner{
  font-family: var(--mono);
  font-size: 0.8rem;
  color: #f3f1e7;
  display: flex;
  align-items: center;
  gap: 10px;
}
.project-banner .mts-proj-name{ font-weight: 700; }
.project-banner .mts-proj-switch{
  color: var(--amber-soft);
  text-decoration: none;
  border: 1px dashed var(--amber);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 0.74rem;
}
.project-banner .mts-proj-switch:hover{ text-decoration: underline; }
.hidden{ display: none !important; }

main{
  max-width: 2400px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.panel{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 20px 20px;
  box-shadow: 2px 2px 0 rgba(35,50,74,0.05);
}
.panel h2{
  font-size: 1.02rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.panel-heading-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.panel-heading-row h2{ border: none; padding: 0; margin: 0; }
.note{ font-size: 0.78rem; color: var(--ink-soft); font-family: var(--mono); }

.field-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 18px;
}
.field-grid.three-col{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.readonly-label{ font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-soft); margin-bottom: 4px; }
.readonly-value{ font-family: var(--mono); font-size: 0.95rem; }
label{
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.inline-label{
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}
.inline-label input{ width: 200px; }

input, select, textarea{
  font-family: var(--mono);
  font-size: 0.92rem;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fffdf7;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus, button:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}
tbody textarea{
  width: 100%;
  resize: vertical;
  line-height: 1.35;
}
tbody select.pdInsertSelect{
  display: block;
  width: 100%;
  margin-top: 4px;
  font-size: 0.72rem;
  padding: 3px 4px;
}

.table-scroll{ overflow-x: auto; margin-bottom: 12px; }

/* Freeze table headers on the big registers (Equipment MU, List of
   Product/Material of Test) which can run to hundreds of rows: the wrapper
   gets its own bounded, independently-scrolling box so only the table body
   scrolls inside it, while the header row stays pinned at its top. */
.table-scroll.freeze-scroll{
  overflow-y: auto;
}
.freeze-scroll table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}
/* Same depth treatment for both of the big registers — Equipment MU and
   List of Product/Material of Test — so neither feels cramped. */
.freeze-scroll-equipment,
.freeze-scroll-products{ max-height: max(70vh, 700px); }
table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  min-width: 640px;
}
thead th{
  text-align: center;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--ink);
  padding: 5px 6px;
  background: #fbf9f1;
}
tbody td, tfoot td{
  border: 1px solid var(--border);
  padding: 4px 6px;
  font-family: var(--mono);
  text-align: center;
}
tbody tr:hover{ background: rgba(181,129,31,0.07); }
tbody input{
  width: 90px;
  padding: 4px 6px;
}
#totalsRow td{
  font-weight: 700;
  border-top: 2px solid var(--ink);
  border-bottom: none;
}
.status-pass{ color: var(--green); font-weight: 700; }
.status-fail{ color: var(--red); font-weight: 700; }
.status-na{ color: var(--ink-soft); }
.val-pass{ color: var(--green); }
.val-fail{ color: var(--red); }
.avg-col{ font-weight: 700; border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }

.grad-block{ margin-bottom: 26px; }
.grad-block:last-child{ margin-bottom: 0; }
.grad-block h3{
  font-size: 0.92rem;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.grad-col-head{
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.delete-grad{
  border: 1px solid var(--red);
  color: var(--red);
  background: #fffdf7;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 1;
  font-size: 0.7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.delete-grad:hover{ background: var(--red-soft); }

.warning{
  margin-top: 4px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid var(--red);
  border-radius: 3px;
  padding: 8px 10px;
}
.empty-note{
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  padding: 10px 0;
}

.results-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.result-card{
  background: #fffdf7;
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber);
  border-radius: 3px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.result-label{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.result-value{
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 700;
}
.result-value.pass{ color: var(--green); }
.result-value.fail{ color: var(--red); }

.curve-wrap h3{
  font-size: 0.88rem;
  margin-bottom: 10px;
  color: var(--ink-soft);
}
svg{
  width: 100%;
  height: auto;
  background: #fffdf7;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.curve-legend{
  display: flex;
  gap: 18px;
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.swatch{
  display: inline-block;
  width: 14px;
  height: 8px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 1px;
}
.line-avg{ background: var(--ink); }
.line-trial{ background: var(--ink-soft); opacity: 0.5; }
.band-sample{ background: var(--amber-soft); border: 1px solid var(--amber); }
.line-upper{ background: #a4402c; }
.line-lower{ background: #2c6fa4; }
.line-mid{ background: #3f6d54; }

.chart-tooltip{
  position: fixed;
  z-index: 999;
  background: var(--ink);
  color: #f3f1e7;
  font-family: var(--mono);
  font-size: 0.76rem;
  padding: 4px 8px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -130%);
}

.actions-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}
.btn{
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 3px;
  border: 1px solid var(--ink);
  background: #fffdf7;
  color: var(--ink);
  cursor: pointer;
}
.btn:hover{ background: var(--amber-soft); }
.btn.primary{
  background: var(--ink);
  color: #f3f1e7;
}
.btn.primary:hover{ background: #34455f; }
.btn.small{ padding: 6px 12px; font-size: 0.8rem; }
.btn.danger{ border-color: var(--red); color: var(--red); }
.btn.danger:hover{ background: var(--red-soft); }

#blendInputBody td{ vertical-align: middle; }
#blendInputBody input[type="number"]{ width: 80px; }
.stock-status-yes{ color: var(--green); }
.stock-status-no{ color: var(--red); }

/* --- report header panel: logos + project table --- */
.logo-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.logo-slot{
  position: relative;
  border: 1px dashed var(--border);
  border-radius: 4px;
  background: #fffdf7;
  aspect-ratio: 2 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 6px;
}
.logo-slot:hover{ border-color: var(--amber); }
.logo-slot img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-remove{
  position: absolute;
  top: 3px; right: 3px;
  border: 1px solid var(--red);
  color: var(--red);
  background: #fffdf7;
  border-radius: 50%;
  width: 18px; height: 18px;
  font-size: 0.7rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

#projectTableBody input[type="text"]{ width: 100%; }
.row-delete-btn{
  border: 1px solid var(--red);
  color: var(--red);
  background: #fffdf7;
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 0.75rem;
  cursor: pointer;
}
.row-delete-btn:hover{ background: var(--red-soft); }
.row-actions-cell{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  white-space: nowrap;
}
.row-actions-cell button{ font-size: 0.72rem; padding: 3px 8px; }

/* Compact per-row icon buttons (insert / remove) — kept small on purpose so
   tables with hundreds of rows (e.g. Equipment MU) don't grow tall.
   display:flex goes on the inner .cell-row div, never the <td> itself — see
   the note by #productsIndexTable .cell-row below. */
.row-icons-cell{ white-space: nowrap; }
.row-icons-cell .cell-row{
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}
.row-icon-btn{
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 3px;
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  background: #fffdf7;
}
.row-icon-btn.insert{ border: 1px solid var(--amber); color: var(--amber); }
.row-icon-btn.insert:hover{ background: var(--amber-soft); }
.row-icon-btn.remove{ border: 1px solid var(--red); color: var(--red); }
.row-icon-btn.remove:hover{ background: var(--red-soft); }
.row-icon-btn.move{ border: 1px solid var(--ink-soft); color: var(--ink-soft); }
.row-icon-btn.move:hover{ background: rgba(76,92,115,0.12); }
.row-icon-btn.edit{ border: 1px solid var(--green); color: var(--green); }
.row-icon-btn.edit:hover{ background: var(--green-soft); }

/* Tighter row padding for tables expected to hold many rows. */
/* table-layout:fixed + the <colgroup> in renderEquipmentTable() means a
   column's width IS the input's width — no more of the column growing (say,
   from a long wrapped header) while the entry box inside stays narrow. */
#equipmentTable{ table-layout: fixed; }
#equipmentTable td, #equipmentTable th{ padding: 3px 6px; overflow-wrap: break-word; }
#equipmentTable input[type="text"]{ width: 100%; padding: 2px 4px; font-size: 0.82rem; }

/* --- List of Product / Material of Test (Table 2): nested rowspan-merged
   table — Discipline/Group and Product/Material span every test row the
   product has, the Tests column numbers each test 1., 2., 3... within its
   own product, and Equipments grows one column at a time. --- */
#productsIndexTable td, #productsIndexTable th{ padding: 2px 6px; }
#productsIndexTable .merged-cell{
  vertical-align: middle;
  text-align: center;
  font-weight: 600;
  background: #fbf9f1;
}
.product-cell-name{
  display: block;
  width: 100%;
  margin-bottom: 4px;
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  padding: 0;
}
.product-cell-name:hover{ text-decoration-color: var(--amber); color: var(--amber); }
.product-cell-actions{
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
}
/* NOTE: display:flex must go on an inner <div>, never directly on a <td> —
   a flex `<td>` drops out of the table's column layout (the browser inserts
   an anonymous table-cell in its place) and visually overlaps the next
   cell. So .test-name-cell / .equip-cell stay plain table-cells; the actual
   flex row is their inner .cell-row wrapper. */
#productsIndexTable .test-name-cell,
#productsIndexTable .equip-cell{
  text-align: left;
  white-space: nowrap;
}
#productsIndexTable .cell-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
#productsIndexTable .test-method-cell input{
  width: 160px;
  font-size: 0.78rem;
  font-family: var(--mono);
  padding: 1px 4px;
}
#productsIndexTable .equip-name{ font-family: var(--mono); font-size: 0.8rem; }
#productsIndexTable .idxEquipPick{ font-size: 0.78rem; max-width: 150px; }

/* Keep Tests and Equipments unmistakably separate columns — a heavier
   divider on the first Equipments cell of every row (and its header),
   rather than the same thin grid line used between equipment sub-columns. */
#productsIndexTable .equip-group-start{ border-left: 3px solid var(--ink); }

/* --- Excel-sheet-style tabstrip (Equipment MU / product-index / one tab per product) --- */
.mu-tabstrip{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 18px;
}
.mu-tab{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 9px 14px;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 transparent;
}
.mu-tab:hover{ background: var(--amber-soft); }
.mu-tab.active{
  color: var(--ink);
  background: #fffdf7;
  border-color: var(--border) var(--border) #fffdf7;
  box-shadow: inset 0 -3px 0 var(--amber);
}
/* The small "×" inside an open product tab, to close it. It's a <span>
   inside the tab's own <button> (not a nested button — invalid HTML) with
   its own click target; the tab's click handler checks event.target to
   decide "close" vs "activate". */
.mu-tab-x{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border-radius: 3px;
  font-weight: 700;
  color: var(--ink-soft);
}
.mu-tab-x:hover{ background: var(--red-soft); color: var(--red); }

.back-calc-block{
  margin-top: 14px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 10px 14px 14px;
  background: #fffdf7;
}
.back-calc-block summary{
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 2px 0;
}
.back-calc-block[open] summary{ margin-bottom: 8px; }
.back-calc-block .field-grid{ margin-top: 6px; }

/* --- Per-test MU Calculation sheet: one continuous bordered table, the
   same shape as the user's own NABL-141 worksheet (SHREE TEST HOUSE
   format) -- every cell has a border, nothing floats outside the grid. --- */
.mu-sheet{ overflow-x: auto; }
table.mu-worksheet{
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.76rem;
}
.mu-worksheet td{
  border: 1px solid var(--ink);
  padding: 4px 5px;
  text-align: center;
  vertical-align: middle;
  font-family: var(--mono);
  word-break: break-word;
}
.mu-worksheet td.mu-ws-title{
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  font-family: var(--sans);
  padding: 8px 5px;
}
.mu-worksheet td.mu-ws-title input{
  width: 320px;
  max-width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  border: none;
  background: transparent;
}
.mu-worksheet td.mu-ws-subtitle{
  font-weight: 700;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.82rem;
  text-decoration: underline;
}
.mu-worksheet td.mu-ws-label{ font-weight: 700; background: #f2ede0; text-align: left; }
.mu-worksheet td.mu-ws-colon{ font-weight: 700; }
.mu-worksheet td.mu-ws-colhead{ font-weight: 700; background: #f2ede0; font-size: 0.7rem; }
.mu-worksheet td.mu-ws-left{ text-align: left; padding-left: 10px; }
.mu-worksheet td.mu-ws-ulabel{ font-weight: 700; }
.mu-worksheet td.mu-ws-eq{ font-weight: 700; padding: 4px 2px; }
.mu-worksheet td.mu-ws-frac{ line-height: 1.5; }
.mu-worksheet td.mu-ws-frac hr{ border: none; border-top: 1px solid var(--ink); margin: 1px 4px; }
.mu-worksheet td.mu-ws-result{ font-weight: 700; }
.mu-worksheet td.mu-ws-noborder{ border: none; background: transparent; }
/* Bold vertical rule on the table's last column, closing off the Type A
   (U1 / Relative U1) block the way the top of the merged region is
   already bounded by the row above it. */
.mu-worksheet td.mu-ws-close{ border-right: 3px solid var(--ink); }
.mu-worksheet td.mu-ws-banner{
  text-align: left;
  font-family: var(--sans);
  font-size: 0.78rem;
  padding: 6px 8px;
}
.mu-worksheet td.mu-ws-banner-bold{ font-weight: 700; text-align: center; }
.mu-worksheet td.mu-ws-banner-italic{ font-style: italic; text-align: center; }
.mu-worksheet td.mu-ws-sig{ font-weight: 700; padding: 18px 8px 8px; }
.mu-worksheet input[type="text"],
.mu-worksheet input[type="date"],
.mu-worksheet input[type="number"]{
  width: 100%;
  min-width: 0;
  padding: 2px 4px;
  font-size: 0.76rem;
  text-align: center;
  border: 1px solid var(--border);
}

/* --- Scope of Accreditation: a product's own summary of every test it
   lists, one row per test, with the Measurement Uncertainty column filled
   in only once that test has computed observations. Reuses the app's
   default table look (same as the List tab's register) rather than the
   heavier mu-worksheet grid, since this is a plain summary, not a
   calculation sheet. --- */
table.mu-scope-table{ min-width: 760px; font-size: 0.8rem; }
table.mu-scope-table th{ text-transform: none; font-size: 0.72rem; }
table.mu-scope-table td{ text-align: left; font-family: var(--mono); }
table.mu-scope-table td.mu-scope-num{ text-align: center; font-weight: 700; }
table.mu-scope-table tr.mu-scope-subhead td{
  font-family: var(--sans);
  font-weight: 700;
  text-align: left;
  background: #fbf9f1;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.mu-worksheet select.muEquipPick{
  width: 100%;
  font-size: 0.72rem;
  padding: 2px 3px;
}

.reference-panel{ background: #fffdf7; }
.reference-image{
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 3px;
  display: block;
  margin-top: 8px;
}

.sheet-footer{
  max-width: 2400px;
  margin: 0 auto;
  padding: 10px 20px 40px;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

@media (max-width: 560px){
  table{ min-width: 560px; }
  .logo-row{ grid-template-columns: repeat(2, 1fr); }
}

.mts-fmt-picker{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 10px; font-size: 0.82rem; }
.mts-fmt-picker-label{ font-weight: 700; color: var(--ink-soft); }
.mts-fmt-picker-opt{ display: flex; align-items: center; gap: 5px; font-weight: 400; cursor: pointer; }

/* ================== PRINT REPORT ================== */

#printReport{ display: none; }

@page{ size: A4; margin: 12mm; }

@media print{
  body{ background: #fff; margin: 0; }
  #appRoot{ display: none !important; }
  /* mtsRenderTopBar() inserts the site-wide top nav bar directly into
     <body>, before #appRoot, so hiding #appRoot alone leaves it printed
     above every report. */
  .mts-topbar{ display: none !important; }
  #printReport{
    display: block;
    color: #000;
    font-family: var(--sans);
    font-size: 11px;
  }
  #printReport table{ width: 100%; border-collapse: collapse; font-size: 10.5px; }
  #printReport th, #printReport td{ border: 0.75pt solid #000; padding: 4px 7px; text-align: center; }
  /* Chrome's print renderer can drop the collapsed border-collapse line at a
     table's outer right/bottom edge (a long-standing rendering quirk with
     hairline borders on a 100%-width table). Force that closing edge to draw
     via box-shadow, which isn't subject to the same rounding, on top of the
     ordinary border. */
  #printReport th:last-child, #printReport td:last-child{ box-shadow: inset -0.75pt 0 0 #000; }
  #printReport tr:last-child > th, #printReport tr:last-child > td{ box-shadow: inset 0 -0.75pt 0 #000; }
  #printReport tr:last-child > th:last-child, #printReport tr:last-child > td:last-child{ box-shadow: inset -0.75pt -0.75pt 0 #000; }
  #printReport .pr-blend-block table td, #printReport .pr-blend-block table th{ padding: 4px 8px; }
  #printReport h3{ font-size: 12px; margin: 4px 0 6px; text-align: center; text-transform: uppercase; }
  #printReport h4{ font-size: 10.5px; margin: 0 0 8px; text-align: center; font-weight: 500; }

  /* min-height matches the true printable area (A4's 297mm minus the 12mm
     top+bottom @page margin = 273mm), less ~1mm of safety margin against
     browser print-layout rounding -- so the filler below always stretches to
     fill the real remaining space and the signature line lands at the same
     bottom position on every printed page, regardless of how much content
     sits above it on that page. */
  .pr-page{ break-after: page; display: flex; flex-direction: column; min-height: 272mm; }
  .pr-page:last-child{ break-after: auto; }
  /* A4 landscape printable area (297mm wide page, 10mm top+bottom margin
     from #muLandscapePageStyle) minus a small rounding safety margin — used
     only by the per-test "Export to PDF" sheet, never the portrait
     whole-register print. */
  .pr-page.pr-page-landscape{ min-height: 185mm; }
  .pr-page-filler{ flex: 1 1 auto; min-height: 6mm; }
  .pr-sig-row{ display: flex; justify-content: space-between; gap: 12px; text-align: center; font-size: 0.82rem; }
  .pr-sig-cell{ flex: 1; }
  .pr-header-block{ margin-bottom: 10px; }
  .pr-logo-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #000;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  .pr-logo-cell{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
  }
  .pr-logo-cell img{ max-height: 46px; max-width: 100%; object-fit: contain; }
  .pr-project-table td:first-child{ width: 35%; font-weight: 700; }
  .pr-project-table td:last-child{ width: 65%; }
  .pr-sample-table{ margin: 10px 0; }
  .pr-sample-table td{ width: 25%; }
  .pr-sample-table .pr-sample-label{ font-weight: 700; background: #f2f2f2; width: auto; }
  .pr-grading-block{ margin: 14px 0; break-inside: avoid; }
  .pr-blend-block{ margin: 14px 0; break-inside: avoid; }
  .pr-graph-block{ margin: 10px 0 18px; break-inside: avoid; }
  .pr-graph-block svg{ width: 100%; height: auto; border: 1px solid #000; }
  .pr-avg-col{ font-weight: 700; background: #f2f2f2; }
}


/* ---- "Measurement Uncertainty Templet excel" download button, top-right of the page header ---- */
.header-actions{ display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.mu-template-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--amber, #b5811f);
  color: #fff;
  border: 1px solid #d9a845;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 0.85rem; font-weight: 700;
  text-decoration: none;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}
.mu-template-btn svg{ width: 16px; height: 16px; flex: none; background: none; border: 0; border-radius: 0; }
.mu-template-btn:hover{ background: #c99226; }
.mu-template-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
@media print{ .header-actions{ display: none !important; } }