: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)); }
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{
  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, button:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

.table-scroll{ overflow-x: auto; margin-bottom: 12px; }
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); }

.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; }
  .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; }
}

/* ---- Mix design extras: trial table inputs, chart grid, requirement note ---- */
.trial-table input[type="number"]{ width: 84px; text-align: center; }
.chart-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 10px;
}
.chart-card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px 6px;
}
.chart-card h4{ margin: 0 0 6px; font-size: 0.85rem; color: var(--ink-soft); text-align: center; }
.chart-card svg{ width: 100%; height: auto; display: block; }
.req-note{ font-size: 0.82rem; color: var(--ink-soft); margin-top: 6px; }
.avgRow td{ font-weight: 700; border-top: 2px solid var(--ink); background: #fbf9f1; }