/* Author: Ikramul Hasan Rakib */
:root{
  --navy:#1f5c63;
  --navy-dark:#164047;
  --teal-soft:#dceef0;
  --teal-pale:#edf6f5;
  --gray:#f1f1f1;
  --text:#222;
  --muted:#5d686a;
  --border:#444849;
  --border-dark:#8fa9ac;
  --accent:#e7833b;
  --white:#fff;
  --warning:#fff8ec;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI",Calibri,Arial,sans-serif;background:#eef2f2;color:var(--text);padding:20px}
button,input,select{font:inherit}
button{cursor:pointer}

.update-banner{max-width:1100px;margin:0 auto 8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:8px 12px;background:#fff8ec;border:1px solid #e7833b;border-radius:4px;font-size:12px;font-weight:600;color:#5a3a12}
.update-banner .update-actions{display:flex;gap:6px}
.update-banner button{border:1px solid #8fa9ac;background:#fff;color:#263a3c;padding:4px 10px;border-radius:4px;font-size:11px;font-weight:700}
.update-banner button:hover{background:#dceef0}
#updateRestartBtn{background:#1f5c63;border-color:#1f5c63;color:#fff}

.whatsnew-box{min-width:340px;max-width:480px;text-align:left}
.whatsnew-box h3{margin:0 0 8px;font-size:15px;color:var(--navy)}
.whatsnew-box ul{margin:0 0 4px;padding-left:20px;font-size:13px}
.whatsnew-box li{margin:4px 0}
.whatsnew-box .whatsnew-empty{font-size:13px;color:var(--muted)}

.toolbar{display:flex;justify-content:flex-end;gap:8px;max-width:1100px;margin:0 auto;padding:0 0 8px}
.btn{border:0;border-radius:4px;padding:8px 16px;font-size:13px;font-weight:700}
.btn-print{background:var(--accent);color:#fff}.btn-print:hover{filter:brightness(.95)}
.btn-reset{background:#e2e8e8;color:#333}.btn-reset:hover{background:#d4dddd}
.help-circle-btn{width:16px;height:16px;min-width:16px;border-radius:50%;border:1px solid #1f5c63;background:#fff;color:#1f5c63;font-weight:800;font-size:9px;line-height:1;display:inline-flex;align-items:center;justify-content:center;opacity:0.5;flex-shrink:0}
.help-circle-btn:hover{opacity:1;background:#1f5c63;color:#fff}

.manage-bar{max-width:1100px;margin:0 auto 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:7px 12px;background:#f7f9f9;border:1px solid var(--border);border-bottom:0}
.manage-bar label{font-size:11px;font-weight:700;color:var(--muted);margin-right:2px}
.manage-bar button{border:1px solid var(--border);background:#fff;color:#263a3c;padding:5px 9px;border-radius:4px;font-size:11px;font-weight:700}
.manage-bar button:hover{background:var(--teal-soft); color:#263a3c}
.manage-bar .primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.manage-bar .secondary{background:var(--accent);color:#fff;border-color:var(--accent)}
.manage-bar button.smart-fill{background:linear-gradient(180deg,#2ea36b,#1f8a54);color:#fff;border:0}
.manage-bar button.smart-fill:hover{background:linear-gradient(180deg,#35b578,#23945d);color:#fff;border:0}

.sheet{max-width:1100px;margin:0 auto;background:#fff;border:1px solid var(--border-dark);box-shadow:0 2px 10px rgba(0,0,0,.10)}
.titlebar{background:var(--navy);color:#fff;text-align:center;padding:11px 12px 4px;position:relative}
.titlebar h1{margin:0;font-size:22px;letter-spacing:.5px}.titlebar .addr{font-size:13px;margin:2px 0}.titlebar .sub{background:var(--navy-dark);margin:8px -12px -4px;padding:6px 12px;font-size:16px;font-weight:700;letter-spacing:1px}

.recipe-serial{
  position:absolute; top:8px; right:12px;
  font-size:11px; font-weight:700;
  background:rgba(255,255,255,.15); padding:3px 8px; border-radius:3px;
}

.codebar{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--teal-soft);padding:7px 14px;font-weight:700;font-size:14px;border-bottom:1px solid var(--border)}
.codebar input{font-weight:700;border:1px solid var(--border);background:#fff;padding:4px 6px}

.infogrid{display:grid;grid-template-columns:125px 0.85fr 110px 1.05fr 90px 1.1fr;gap:1px;background:var(--border);padding:1px}
.infogrid .lbl{background:var(--gray);color:#111;font-weight:700;font-size:12.5px;display:flex;align-items:center;padding:5px 8px}
.infogrid .val{background:#fff;display:flex;align-items:center;padding:3px 6px;min-width:0;font-weight: 700;}
.infogrid input,.infogrid select{width:100%;border:0;outline:0;font-size:13px;padding:3px 2px;background:transparent;min-width:0;font-weight:700}
#yarnLot{width:125px;text-align:center}
#codeNote{width:255px;text-align:center;font-weight:700;background:transparent;border:0}
#mlRatio{width:50px;margin-left:4px}
.infogrid .computed{background:var(--warning);font-weight:700;color:var(--navy-dark)}
.infogrid .computed input{font-weight:700;color:var(--navy-dark)}
.construction{display:flex;gap:10px;align-items:center;background:var(--gray);padding:5px 8px 5px 2px;font-size:12.5px;font-weight:700;color:#111; grid-column: span 1;}
.construction label{display:flex;align-items:center;gap:4px}
.mini-reset{border:0;background:transparent;color:var(--navy-dark);font-size:15px;padding:0 2px}.mini-reset:hover{color:var(--accent)}

/* pattern preview stays print-only; the history pill shows on screen (and hides itself when empty) */
#patternName{ display:none !important; }
.select-wrap{position:relative;display:flex;align-items:center;gap:4px;width:100%;min-width:0}
.select-wrap>select,.select-wrap>input{flex:1;min-width:0}

.recipe{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:2px}
.recipe th{background:var(--teal-soft);border:1px solid var(--border);padding:6px 4px;font-size:12.5px;font-weight:700;text-align:center}
.recipe td{border:1px solid var(--border);padding:3px 5px;vertical-align:middle}
.recipe td.section{background:var(--teal-pale);font-weight:700;font-size:14px;color:var(--navy-dark);padding:5px}
.recipe td.func{font-weight:500;font-size:12px;white-space:nowrap;color:#333}
.recipe select,.recipe input{width:100%;border:1px solid #d5dede;padding:4px;font-size:12.5px;background:#fff;min-width:0}
.recipe input.numin{text-align:right; font-weight: 700; font-size: 13px;}
.recipe select.func-select,.recipe input.func-input{font-weight:400}
.chemical-cell{display:flex;align-items:center;gap:4px;position:relative;min-width:0}
.chemical-cell select,.chemical-cell input{flex:1;min-width:0; font-weight: 700; font-size:13.5px;color:#111;}

/* Custom searchable dropdown popup (Buyer / Machine / Fabrics Type / row chemicals) */
.combo-popup{position:fixed;z-index:9999;background:#fff;border:1px solid #9fb3b5;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.18);overflow-y:auto;overflow-x:hidden}
.combo-item{padding:5px 10px;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.combo-item.hot{background:#1f5c63;color:#fff}
.combo-empty{padding:8px 10px;font-size:12px;color:#888}
.recipe td.qty{text-align:right;font-weight:700;font-size: 11px;color:var(--navy-dark);background:#fbfbf6}
.recipe td.kgm{text-align:center;font-weight:600;font-size: 12px;}
.empty-state{text-align:center;padding:22px;color:var(--muted);font-weight:600;background:#fafcfc}
.totalrow td{background:var(--navy);color:#fff;font-weight:700;font-size:13px}

.app-loader{position:fixed;inset:0;z-index:500000;background:#eef2f2;display:flex;align-items:center;justify-content:center}
body:not(.app-loading) .app-loader{display:none}
.app-loader-text{font-weight:700;color:var(--muted);font-size:14px;letter-spacing:.5px}

.footer{display:flex;justify-content:space-between;align-items:center;padding:7px 14px;font-size:12px;color:#556163}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:1000}
.modal{width:min(760px,94vw);max-height:90vh;overflow:auto;background:#fff;border-radius:7px;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:18px}
.modal h2{margin:0 0 10px;color:var(--navy-dark);font-size:18px}.help-text{font-size:12px;color:var(--muted);line-height:1.45}.warning-text{font-size:12px;color:#8a5a17;background:var(--warning);padding:8px;border-radius:4px}
.modal label{display:block;font-size:11px;font-weight:700;color:#445; margin-bottom:3px}
.modal input,.modal select{width:100%;padding:7px;border:1px solid var(--border);background:#fff}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.profile-grid .full{grid-column:1/-1}
.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.modal button{padding:7px 12px;border:1px solid var(--border);background:#fff;border-radius:4px;font-weight:700}.modal button.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.manager-add{display:grid;grid-template-columns:1fr auto;gap:7px;margin:10px 0}.manager-list{display:flex;flex-direction:column;gap:4px}.manager-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 9px;border:1px solid var(--border);border-radius:4px;background:#fafcfc;font-size:12px}.manager-row small{color:var(--muted);font-weight:400}.backup-actions{display:flex;gap:8px;align-items:center}.file-button{display:inline-flex!important;align-items:center;background:#fff;border:1px solid var(--border);padding:7px 12px;border-radius:4px;cursor:pointer}.file-button input{display:none!important}
.manager-edit-input{
  flex:1; padding:4px 8px; border:1px solid var(--border,#ccc); border-radius:4px; font-size:13px;
}

input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}

@media screen and (max-width:900px){
  body{padding:8px}.infogrid{grid-template-columns:100px 1fr 100px 1fr}.infogrid>.lbl:nth-child(5),.infogrid>.val:nth-child(6){display:none}.sheet,.manage-bar{max-width:100%}.recipe{font-size:11px}.recipe th{font-size:10.5px}
}

.chem-function-edit{width:180px!important;flex:0 0 180px;padding:5px!important;font-size:11px!important}
.chemical-manager-row .chem-function-edit{min-width:190px}.manager-row .danger{border-color:#b84a4a;color:#8a1f1f;background:#fff}.manager-row .danger:hover{background:#fff4f4}.manager-add input{width:100%}

/* =========================================================
   legal SINGLE-PAGE PRINT — consolidated print rules.
   ========================================================= */
@media print {

  @page {
    size: legal portrait;
    margin: 5mm 2mm 0mm 9mm !important;
  }

  /* Never show native dropdown arrows/icons in printed output */
  .recipe select,
  .infogrid select,
  .codebar select,
  .chemical-cell select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    background: transparent !important;
    padding-right: 0 !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
    opacity: 1 !important;
    font-weight: 700 !important;
  }

  /* The search dropdown popup is screen-only */
  #comboPopup{display:none !important;}

  html, body {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .toolbar,
  .manage-bar,
  .mini-reset,
  .no-print,
  .modal-backdrop,
  .app-loader {
    display: none !important;
  }

  .sheet {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* B&W-printer friendly: screen uses a dark teal header (white text),
     but that prints as grey/ash with washed-out white text. For print,
     force a white background with black text + solid borders so the
     header stays clearly readable on any black-and-white printer,
     even with background graphics turned off. */
  .titlebar {
    padding: 4px 6px 2px !important;
    margin-bottom: 0 !important;
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .titlebar h1 {
    font-size: 19px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    color: #000 !important;
  }

  .titlebar .addr {
    font-size: 10px !important;
    margin: 2px 0 !important;
    line-height: 1.2 !important;
    color: #000 !important;
  }

  .titlebar .sub {
    margin: 3px -6px -2px !important;
    padding: 3px 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    background: #eee !important;
    color: #000 !important;
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
  }

  .recipe-serial{
    font-size:8px !important;
    top:2px !important;
    right:4px !important;
    padding:1px 5px !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }

  .codebar {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
  }
  .codebar span { white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; }

  /* No fixed height on inputs/selects anywhere in print: a fixed
     height combined with a select element's own internal padding
     is what was clipping the tops of longer values (buyer names,
     etc). Let the box size itself from padding + line-height. */
  .codebar input,
  .codebar select {
    height: auto !important;
    min-height: 14px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    padding: 1px 2px !important;
    font-weight: 700 !important;
  }
  #code { width: 90px !important; min-width: 90px !important; }
  #yarnLot { width: 100px !important; min-width: 100px !important; }
  #codeNote { width: 200px !important; min-width: 180px !important; }

  #printPatternFooter,
  .print-pattern {
    display: block !important;
    visibility: visible !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap !important;
    margin: 1px 0 !important;
    padding: 0 !important;
  }

  .infogrid {
    display: grid !important;
    grid-template-columns: 125px 0.85fr 110px 1.05fr 90px 1.1fr !important;
    width: 100% !important;
    gap: 1px !important;
    padding: 1px !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
  }

  .infogrid .lbl {
    font-size: 7.8px !important;
    padding: 1.8px 5px !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    font-weight: 700;
  }

  /* The last grid row contains 4 completely empty cells. Some print
     pipelines cull the backgrounds of empty elements — those 4 cells then
     go transparent and the dark 1px-gap color shows through as a solid
     black block beside "Soda Stage". Marking the Backgrounds as required
     forces them to paint (light grey / white) like on screen. */
  .infogrid .lbl,
  .infogrid .val {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .infogrid .val {
    font-size: 8.7px !important;
    padding: 1px 4px !important;
    min-height: 12.5px !important;
    min-width: 0 !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
  }

  .infogrid input,
  .infogrid select {
    height: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 12px !important;
    font-size: 8.5px !important;
    line-height: 1.1 !important;
    padding: 0.5px 2px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
  }

  .construction {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 2px 8px 2px 2px !important;
    font-size: 8.7px !important;
    line-height: 1.15 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
  }

  .recipe {
    width: 100% !important;
    margin: 1.5px 0 0 !important;
    padding: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    font-size: 10.5px !important;
    line-height: 1.12 !important;
    page-break-after: avoid !important;
    break-after: avoid-page !important;
  }

  .recipe th {
    padding: 4px 4px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
  }

  .recipe td {
    padding: 1.8px 4px !important;
    font-size: 10.3px !important;
    line-height: 1.06 !important;
    vertical-align: middle !important;
  }

  .recipe td.section {
    font-weight: 700 !important;
    font-size: 11.5px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .recipe td.func {
    font-weight: 500 !important;
    font-size: 10.5px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .recipe td.qty,
  .recipe td.kgm,
  .recipe td:nth-child(6) {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* No fixed height here either, for the same reason as above:
     a fixed height clips select-element text at this font size. */
  .recipe select,
  .recipe input {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 12px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Function labels stay lighter than chemical names */
  .recipe select.func-select,
  .recipe input.func-input {
    font-weight: 500 !important;
  }

  .recipe input::placeholder{
    color: transparent !important;
    opacity: 0 !important;
  }

  .totalrow td {
    padding: 0 2px !important;
    font-size: 12px !important;
    /* B&W-printer friendly: the navy fill prints as a solid black bar
       with washed-out white text — use light fill + black text instead. */
    background: #eee !important;
    color: #000 !important;
  }

  .footer {
    padding: 0 2px !important;
    font-size: 7.6px !important;
    line-height: 1.15 !important;
    /* Pin the "Prepared for internal use … Printed …" line to the page
       bottom (single-page legal sheet). Left/right match the @page side
       margins so it lines up with the content above. */
    position: fixed !important;
    bottom: 2mm !important;
    left: 9mm !important;
    right: 2mm !important;
    background: #fff !important;
  }

  /* Table may flow across the page if it ever needs to, but a
     single row is never split in half, and the header repeats
     if that were to happen. */
  .sheet,
  .recipe,
  .recipe tbody,
  .recipe tfoot {
    page-break-inside: auto !important;
    break-inside: auto !important;
    page-break-after: avoid !important;
    break-after: avoid-page !important;
  }

  .recipe tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .recipe thead {
    display: table-header-group !important;
  }

  .signature-row{
    padding:36px 4px 2px !important;
    margin-bottom:14px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .sig-line{margin:0 4px 3px !important;}
  .sig-title{font-size:8.6px !important;}

  /* M:L "1 :" is a text node, so explicitly match it to
     the input instead of allowing the browser's larger base font. */
  #mlRatio {
    font-size: 10px !important;
  }

  .infogrid .val:has(#mlRatio) {
    font-size: 10px !important;
  }

  .construction label {
    font-size: 8.7px !important;
    white-space: nowrap !important;
  }
}
/* ---------- Signature row ---------- */
.signature-row{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:10px; padding:35px 18px 6px; border-top:1px solid var(--border);
}
.sig-block{flex:1; text-align:center;}
.sig-line{border-top:1px solid #444; margin:0 6px 4px;}
.sig-title{font-size:11px; font-weight:700; color:#3f3f3f; white-space:nowrap;}

/* ---------- Finishing form ---------- */
/* Header values (buyer, fabrics type, …) type in bold like the dyeing sheet */
#modal .fin-info input{font-weight:700;}
/* Quantity hint (calculated grams) shows bold/dark, not washed-out gray */
#modal input[id^="fin-qtyin"]::placeholder{font-weight:700;color:#1a1a1a;opacity:1;}
/* Finishing table heading labels only — bold + a bit larger */
#modal .cost-table.finishing-table thead th{font-size:12.5px;font-weight:700;}
/* Cost panel heading labels (Function / Chemical / Qty / Rate / Cost) — bold + larger */
#modal .cost-table.cost-panel-table thead th{font-size:13px;font-weight:700;text-transform:uppercase;}

/* ---------- Confirm overlay ---------- */

.confirm-overlay{
  position:fixed; inset:0; z-index:200000;
  background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
}
.confirm-box{
  background:#fff; border-radius:8px; padding:20px 22px; max-width:380px;
  box-shadow:0 8px 30px rgba(0,0,0,.3);
}
.confirm-box p{margin:0 0 16px; font-size:14px; line-height:1.4;}
.confirm-actions{display:flex; justify-content:flex-end; gap:10px;}
.confirm-actions button{padding:7px 16px; border-radius:5px; border:1px solid var(--border,#ccc); cursor:pointer; background:#fff;}
.confirm-actions button.primary{background:#c0392b; color:#fff; border-color:transparent;}

/* ---------- Cost panel ---------- */
.cost-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px;margin-top:6px}
  .cost-table th,.cost-table td{border:1px solid var(--border);padding:4px 6px;word-wrap:break-word;font-weight:700}
.cost-table th:nth-child(1){width:27%}
.cost-table th:nth-child(2){width:27%}
.cost-table th:nth-child(3){width:23%}
.cost-table th:nth-child(4){width:11%}
.cost-table th:nth-child(5){width:12%}
.cost-table th{background:var(--teal-soft);font-size:12px;text-align:center;font-weight: 700;}
.cost-table .num{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.cost-table tr.cost-section td{background:var(--teal-pale);font-weight:700;color:var(--navy-dark)}
.cost-table tr.missing-price td{background:#fff8ec}
.cost-table tfoot tr.cost-total td{background:var(--navy);color:#fff;font-weight:700;border-color:var(--navy)}
.price-default-tag{font-size:10px;font-weight:700;color:#0b6e6a;background:var(--teal-soft);padding:1px 6px;border-radius:8px;white-space:nowrap}

/* ---------- Daily Usage table (5 cols with S/R — own widths, headers never wrap) ---------- */
#modal .cost-table.usage-table th:nth-child(1){width:8%}
#modal .cost-table.usage-table th:nth-child(2){width:32%}
#modal .cost-table.usage-table th:nth-child(3){width:18%}
#modal .cost-table.usage-table th:nth-child(4){width:18%}
#modal .cost-table.usage-table th:nth-child(5){width:24%}
/* Dyes/OBA section has no Finishing column (4 cols) */
#modal .cost-table.usage-table.usage-dye th:nth-child(1){width:8%}
#modal .cost-table.usage-table.usage-dye th:nth-child(2){width:40%}
#modal .cost-table.usage-table.usage-dye th:nth-child(3){width:22%}
#modal .cost-table.usage-table.usage-dye th:nth-child(4){width:30%}
#modal .cost-table.usage-table th{white-space:nowrap}
/* Keep column headers pinned while the long chemical list scrolls */
#modal .cost-table.usage-table thead th{position:sticky;top:0;z-index:1}

/* ---------- Cost sheet PDF ---------- */
.cost-print-sheet{display:none}
#finishingPrintSheet.cost-print-sheet{display:none}
@media print{
  /* Normal dyeing print: cost + finishing sheets must NEVER appear,
     even if a previous Save-as-PDF left an inline display:block behind. */
  #costPrintSheet,
  #finishingPrintSheet{display:none!important}
  body.cost-printing .sheet,
  body.cost-printing .toolbar,
  body.cost-printing .manage-bar,
  body.cost-printing .modal-backdrop,
  body.cost-printing #finishingPrintSheet{display:none!important}
  body.cost-printing #costPrintSheet{display:block!important}
  /* B&W-printer friendly headers: the finishing sheet markup carries dark
     teal inline styles (good on screen) which print as grey/ash with
     washed-out white text. Force light backgrounds + black text with
     solid borders so headers stay clearly readable on any B&W printer.
     !important is required here to beat the inline styles. */
  .cost-print-sheet .cps-head{background:#fff!important;color:#000!important}
  .cost-print-sheet .cps-head h1{background:#fff!important;color:#000!important}
  .cost-print-sheet .cps-head div{background:#fff!important;color:#000!important}
  .cost-print-sheet .cps-head .cps-band{background:#eee!important;color:#000!important;border-top:1px solid #000!important;border-bottom:1px solid #000!important}
  .cost-print-sheet .cps-head .cps-addr{font-size:11px!important}
  .cost-print-sheet .cps-head .cps-date{background:#fff!important;color:#000!important}
  .cost-print-sheet .cps-head{text-align:center;margin-bottom:6px}
  .cost-print-sheet .cps-head h1{font-size:18px;margin:0;letter-spacing:.5px;color:#1a1a1a}
  .cost-print-sheet .cps-sub{font-size:12px;font-weight:700;margin:3px 0;border-bottom:1px solid #333;padding-bottom:3px}
  .cost-print-sheet .cps-date{font-size:8.5px;color:#444}
  .cost-print-sheet .cps-info{width:100%;border-collapse:collapse;font-size:9.5px;margin-bottom:6px}
  .cost-print-sheet .cps-info td{border:1px solid #666;padding:2px 5px;font-weight:700}
  .cost-print-sheet .cps-info td.l{background:#f0f0f0;font-weight:700;width:14%}
  .cost-print-sheet .cps-info.cost-info td.l{font-size:9px;}
  .cost-print-sheet .cps-info.cost-info td:not(.l){font-size:10.5px;}
  .cost-print-sheet .cps-info.cost-info{table-layout:fixed;}
  .cost-print-sheet .cps-info.cost-info td:not(.l){width:36%;overflow-wrap:break-word;}
  .cost-print-sheet .cps-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:10px}
  .cost-print-sheet .cps-table th,.cost-print-sheet .cps-table td{border:1px solid #666;padding:2px 5px;text-align:left;word-wrap:break-word;font-weight:700}
  .cost-print-sheet .cps-table th:nth-child(1){width:27%}
  .cost-print-sheet .cps-table th:nth-child(2){width:27%}
  .cost-print-sheet .cps-table th:nth-child(3){width:23%}
  .cost-print-sheet .cps-table th:nth-child(4){width:11%}
  .cost-print-sheet .cps-table th:nth-child(5){width:12%}
  /* finishing 8-col overrides — applied when table has .finishing */
  .cost-print-sheet .cps-table.finishing th:nth-child(1){width:24%}
  .cost-print-sheet .cps-table.finishing th:nth-child(2){width:22%}
  .cost-print-sheet .cps-table.finishing th:nth-child(3){width:9%}
  .cost-print-sheet .cps-table.finishing th:nth-child(4){width:12%}
  .cost-print-sheet .cps-table.finishing th:nth-child(5){width:6%}
  .cost-print-sheet .cps-table.finishing th:nth-child(6){width:8%}
  .cost-print-sheet .cps-table.finishing th:nth-child(7){width:8%}
  .cost-print-sheet .cps-table.finishing th:nth-child(8){width:11%}
  .cost-print-sheet .cps-table.finishing th, .cost-print-sheet .cps-table.finishing td{padding:3.5px 5px !important; font-size:10.5px !important; line-height:1.2 !important}
  .cost-print-sheet .cps-table.finishing tbody td:nth-child(1), .cost-print-sheet .cps-table.finishing tbody td:nth-child(2){font-size:12px !important; font-weight:700 !important; color:#000 !important}
  .cost-print-sheet .cps-table.finishing th{font-size:10px !important; font-weight:700 !important}
  /* daily usage 5-col (S/R) overrides — applied when table has .usage */
  .cost-print-sheet .cps-table.usage th:nth-child(1){width:8%}
  .cost-print-sheet .cps-table.usage th:nth-child(2){width:32%}
  .cost-print-sheet .cps-table.usage th:nth-child(3){width:18%}
  .cost-print-sheet .cps-table.usage th:nth-child(4){width:18%}
  .cost-print-sheet .cps-table.usage th:nth-child(5){width:24%}
  /* dyes/OBA print table has no Finishing column (4 cols) */
  .cost-print-sheet .cps-table.usage.usage-dye th:nth-child(1){width:8%}
  .cost-print-sheet .cps-table.usage.usage-dye th:nth-child(2){width:40%}
  .cost-print-sheet .cps-table.usage.usage-dye th:nth-child(3){width:22%}
  .cost-print-sheet .cps-table.usage.usage-dye th:nth-child(4){width:30%}
  /* A4 multi-page: long usage tables flow across pages with the column
     header repeated on every page and no row split across a page break. */
  .cost-print-sheet .cps-table.usage{page-break-inside:auto;font-size:12.5px}
  .cost-print-sheet .cps-table.usage thead{display:table-header-group}
  .cost-print-sheet .cps-table.usage tfoot{display:table-footer-group}
  .cost-print-sheet .cps-table.usage tr{break-inside:avoid;page-break-inside:avoid}
  .cost-print-sheet .cps-table.usage tr.sec{break-after:avoid;page-break-after:avoid}
  .cost-print-sheet .cps-table.usage th,.cost-print-sheet .cps-table.usage td{padding:4px 7px;font-size:15px;line-height:1.35}
  .cost-print-sheet .cps-table.usage th{white-space:nowrap;font-size:15px}
  .cost-print-sheet .cps-table.usage tr.sec td{font-size:16px}
  /* Usage sheet header/footer use the full A4 width — keep them readable. */
  .cost-print-sheet .cps-head.usage-head h1{font-size:24px}
  .cost-print-sheet .cps-head.usage-head .cps-addr{font-size:12.5px}
  .cost-print-sheet .cps-head.usage-head .cps-sub{font-size:16px}
  .cost-print-sheet .cps-head.usage-head .cps-date{font-size:12px}
  .cost-print-sheet .cps-foot.usage-foot{font-size:11px}
  .cost-print-sheet .cps-table th{background:#eee;font-size:11px;font-weight:700}
  .cost-print-sheet .cps-table:not(.finishing) thead th{text-transform:uppercase;}
  .cost-print-sheet .cps-table .n{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
  .cost-print-sheet .cps-table tr.sec td{background:#eee;font-weight:700}
  .cost-print-sheet .cps-table tfoot tr.tot td{background:#222;color:#fff;font-weight:700}
  /* B&W-printer friendly: the near-black fill prints as a solid black bar
     with washed-out white text — use light fill + black text instead. */
  .cost-print-sheet .cps-table tfoot tr.tot td{background:#eee!important;color:#000!important}
  .cost-print-sheet .cps-foot{margin-top:8px;font-size:8.5px;color:#555;text-align:center}
}

/* ---------- Recipe history ---------- */
.archive-origin{font-size:10px;font-weight:700;color:#8a5a17;background:var(--warning);padding:2px 7px;border-radius:3px;white-space:nowrap}
.archive-origin:empty{display:none}
.archive-table{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:4px}
.archive-table th,.archive-table td{border:1px solid var(--border);padding:4px 6px;text-align:left}
.archive-table th{background:var(--teal-soft);font-size:10.5px;white-space:nowrap}
.archive-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.archive-table td.actions-cell{white-space:nowrap;text-align:right}
.archive-table .primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.archive-table .danger{border-color:#b84a4a;color:#8a1f1f;background:#fff}