@font-face {
  font-family: Inter;
  src: url("/assets/fonts/e3237528af75-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2")
    format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("/assets/fonts/7c0c2f36f8de-ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyWyosBO5Xw.woff2")
    format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("/assets/fonts/4a97a001cbef-ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyWyosBB5XxxKA.woff2")
    format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: Lato;
  src: url("/assets/fonts/d19d4900858a-S6u9w4BMUTPHh6UVSwiPGQ.woff2")
    format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --primary: #0c29ab;
  --alert: #1e6df6;
  --text: #1a1a1a;
  --pale: #eaf3ff;
  --destructive: #b0200c;
  --line: #999;
  --cream: #fff5dc;
  --pink: #fad2cc;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  min-height: 28px;
  padding: 3px 8px;
  white-space: nowrap;
}
button:hover {
  filter: brightness(1.08);
}
button:disabled {
  opacity: 0.26;
  cursor: default;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--alert);
  outline-offset: 2px;
}
input,
select,
textarea {
  color: var(--text);
  border: 2px solid #c6c8cc;
  border-radius: 3px;
  outline: none;
  min-width: 0;
  background: transparent;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--alert);
}
input::placeholder,
textarea::placeholder {
  color: #aaa;
  opacity: 0.66;
}
select:has(option:checked[value=""]) {
  color: #bbb;
}
input:disabled,
select:disabled,
textarea:disabled {
  color: #aaa;
  border-color: #ddd;
  opacity: 0.55;
}
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
input::-webkit-inner-spin-button {
  appearance: none;
}
a {
  color: var(--primary);
}
.header {
  background: var(--pale);
  border-radius: 0 0 8px 8px;
  min-width: 960px;
}
.user-line {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  gap: 10px;
}
.user-line h6 {
  font-size: 18px;
  font-weight: 600;
  line-height: 25.2px;
  margin: 0;
}
.vendor-title {
  display: flex;
  align-items: center;
}
.vendor-profile-entry {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  min-width: 12px;
  min-height: 25px;
}
.vendor-profile-entry:focus-visible {
  outline: 2px solid var(--alert);
  outline-offset: 3px;
}
.modal.vendor-profile-modal {
  width: 600px;
  min-width: 360px;
  max-width: 800px;
  min-height: 360px;
  padding: 10px;
  border: 2px solid #999;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}
.vendor-profile-modal label {
  font-size: 16px;
}
.vendor-profile-modal textarea {
  min-width: 226px;
  min-height: 100px;
  width: 100%;
  resize: vertical;
}
.vendor-profile-close {
  position: absolute;
  top: 5px;
  right: 7px;
  background: transparent;
  color: #555;
  font-size: 24px;
}
.vendor-profile-hint,
.vendor-profile-status {
  font-size: 13px;
  line-height: 1.4;
  color: #515e7a;
}
.vendor-profile-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 24px;
}
.vendor-profile-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: auto;
}
.vendor-profile-actions [hidden] {
  display: none;
}
.vendor-menu {
  position: absolute;
  right: 8px;
  top: 36px;
  z-index: 20;
  background: #fff;
  box-shadow: 0 3px 9px #0005;
  padding: 8px;
  display: grid;
  gap: 6px;
}
.vendor-menu[hidden] {
  display: none;
}
.tabs {
  display: flex;
  align-items: center;
  height: 51px;
  gap: 14px;
  padding: 0 6px 6px;
  white-space: nowrap;
}
.tab {
  height: 42px;
  width: 130px;
  min-width: 130px;
  border: 5px solid #fff;
  box-shadow: 0 0 4px #c9cfda4d;
  border-radius: 6px;
  padding: 0;
  line-height: 32px;
}
.tab.selected {
  background: var(--alert);
}
.round-add {
  color: var(--alert);
  background: transparent;
  padding: 0;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  margin: 0 4px;
}
.round-add svg {
  width: 28px;
  height: 28px;
}
.icon {
  padding: 0;
  width: 30px;
  height: 28px;
  min-width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.icon svg {
  display: block;
  height: 100%;
  width: 100%;
  fill: currentColor;
}
.icon.plain {
  color: var(--primary);
  background: transparent;
}
.icon.bright {
  background: var(--alert);
}
.icon.gray {
  background: #8b8d8e;
}
.icon.red {
  background: var(--destructive);
}
.index-page .icon.red[data-action="delete"] {
  background: #cd260e;
  border-radius: 8px;
}
.header .icon[data-action="menu"] {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
}
.icon.green {
  background: #1e6c30;
}
.small-icon {
  width: 23px;
  min-width: 23px;
  height: 25px;
}
.toolbar {
  height: 43px;
  padding: 5px 10px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toolbar input {
  height: 28px;
  width: 120px;
  font:
    16px "Roboto Condensed",
    sans-serif;
  padding: 2px 6px;
}
.toolbar select {
  height: 28px;
  width: 130px;
  font:
    16px "Roboto Condensed",
    sans-serif;
  padding: 2px 8px;
}
.toolbar .icon {
  color: var(--alert);
}
.table-surface {
  margin-top: 15px;
  background: var(--pale);
  border-radius: 8px;
  padding: 10px 0;
  min-height: 42px;
}
.record-table {
  border: 2px solid var(--line);
  border-radius: 5px;
  width: max-content;
  margin: auto;
}
.record-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 5px;
  border-bottom: 1px dashed #999;
  position: relative;
}
.record-row:last-child {
  border-bottom: 0;
}
.field {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  min-width: 0;
  height: 28px;
}
.field input,
.field select {
  height: 28px;
  width: 100%;
  padding: 2px 6px;
  font:
    16px "Roboto Condensed",
    sans-serif;
  background: #ffffffcf;
  border-width: 1px;
}
.field.has-value input {
  padding: 10px 6px 0;
}
.field-label {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: -1px;
  left: 7px;
  font:
    12px/14px "Roboto Condensed",
    sans-serif;
  color: #666;
}
.field:not(.has-value) .field-label {
  display: none;
}
.field select {
  background: transparent;
  border-width: 2px;
}
.w50 {
  width: 50px;
}
.w60 {
  width: 60px;
}
.w70 {
  width: 70px;
}
.w90 {
  width: 90px;
}
.w100 {
  width: 100px;
}
.w110 {
  width: 110px;
}
.w120 {
  width: 120px;
}
.w130 {
  width: 130px;
}
.w135 {
  width: 135px;
}
.w140 {
  width: 140px;
}
.w150 {
  width: 150px;
}
.w170 {
  width: 170px;
}
.w180 {
  width: 180px;
}
.w200 {
  width: 200px;
}
.w220 {
  width: 220px;
}
.w255 {
  width: 255px;
}
.w260 {
  width: 260px;
}
.w280 {
  width: 280px;
}
.grow {
  flex: 1;
}
.staffs-table {
  width: 622px;
}
.customers-table,
.machines-table {
  width: max-content;
  min-width: 360px;
  min-height: 40px;
}
/* Source row minimums are not fixed total table widths. These rules stay local
   to Customers/Machines; other record rows keep their existing presentation. */
.customers-table .customer-cell {
  display: flex;
  flex-direction: column;
  border-bottom: 2px solid var(--line);
}
.customers-table .customer-cell:last-child {
  border-bottom: 0;
}
.customers-table .customer-primary-row,
.machines-table .machine-row {
  gap: 0;
  padding: 0;
}
.customers-table .customer-primary-row {
  min-width: 40px;
  min-height: 20px;
  border-bottom: 0;
}
.machines-table .machine-row {
  justify-content: space-between;
  min-height: 0;
  /* Local 1px fallback: source specifies dashed, but no separator width. */
  border-bottom: 1px dashed var(--line);
}
.machines-table .machine-row:last-child {
  border-bottom: 0;
}
.customer-primary-row .field,
.machine-row .field {
  width: auto;
  flex: 1 0 var(--row-field-min);
  min-width: var(--row-field-min);
  margin: -5px 5px 0;
}
/* Labelized source inputs occupy a 38px wrapper; the visible input starts
   7px below it. The intrinsic wrapper width is the declared field minimum. */
.customer-primary-row .field {
  width: var(--row-field-min);
  height: 38px;
  margin: 0 5px;
  padding-top: 7px;
  align-items: flex-start;
}
.customer-primary-row .field-label {
  top: 0;
}
.customers-table .customer-primary-row {
  align-items: flex-start;
}
.customer-secondary-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 5px;
}
.machine-row .field {
  margin-bottom: 5px;
}
.customer-primary-row .w180 {
  --row-field-min: 180px;
}
.customer-primary-row .w200,
.machine-row .w200 {
  --row-field-min: 200px;
}
.customer-primary-row .w120 {
  --row-field-min: 120px;
}
.machine-row .w100 {
  --row-field-min: 100px;
}
.customer-primary-row .field input,
.machine-row .field input {
  padding: 10px 5px 0;
}
.customer-primary-row > .icon,
.machine-row > .icon {
  flex: 0 0 30px;
  width: 30px;
  height: 28px;
  min-height: 28px;
  margin: 5px 5px 0;
}
.customer-primary-row > .icon.bright,
.customer-primary-row > .icon.red {
  border-radius: 8px;
}
.customer-primary-row > .icon.red {
  background: #cd260e;
}
.machine-row > .icon {
  margin-bottom: 5px;
}
.customer-primary-row > .customer-quotations {
  flex: 0 0 90px;
  width: 90px;
  min-height: 28px;
  margin: 5px;
  padding-left: 0;
  padding-right: 0;
}
.customer-address-toggle {
  color: var(--primary);
}
.customer-address-toggle[aria-expanded="true"] {
  color: var(--alert);
}
.customer-address-panel {
  display: flex;
  flex-direction: column;
  min-width: 40px;
  min-height: 40px;
  padding: 0 5px 5px;
}
.customer-address-panel[hidden] {
  display: none;
}
.customer-address-panel textarea {
  min-width: 300px;
  min-height: 60px;
  width: 100%;
  padding: 0 5px;
  border-width: 2px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.4;
  resize: vertical;
}
.customer-address-panel > label {
  line-height: 1.4;
}
.parts-table {
  width: max-content;
  min-width: 360px;
}
.index-part-cell + .index-part-cell {
  border-top: 1px dashed #8a8a8a;
}
.index-part-cell > .record-row {
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0;
  min-height: 35px;
  padding: 0;
  margin-bottom: 5px;
  border-bottom: 0;
}
.index-part-cell > .record-row .field {
  flex: 1 0 auto;
  margin: 0 5px;
  padding-top: 7px;
  height: 35px;
}
.index-part-cell > .record-row .field-label {
  top: 0;
}
.index-part-cell > .record-row .field:has([data-field="docs_url_text"]) {
  margin-right: 0;
}
.index-part-cell > .record-row > [data-action="doc"] {
  flex: 0 0 28px;
  min-width: 28px;
  width: 28px;
  margin-top: 7px;
}
.index-part-cell > .record-row > .part-routing {
  flex: 0 0 160px;
  width: 160px;
  margin: 7px 5px 0;
  padding: 0;
}
.index-part-cell > .record-row > .red {
  margin: 5px 5px 0;
}
.index-part-cell .red {
  background: #cd260e;
  border-radius: 8px;
}
.index-part-cell .nest-add {
  height: 42px;
  padding: 0 0 10px;
}
.index-part-cell .nest-add .round-add {
  width: 32px;
  height: 32px;
  min-width: 32px;
  margin: 0;
}
.part-long-id input {
  font-size: 12px;
}
.part-routing {
  min-width: 160px;
}
.part-routing.empty-routing {
  border: 3px solid var(--primary);
  color: var(--primary);
  background: white;
}
.wide-table {
  width: max-content;
  min-width: 1390px;
  margin-left: auto;
  margin-right: auto;
}
.wide-surface {
  overflow: visible;
  display: flex;
  justify-content: center;
}
.wide-surface > div {
  flex-shrink: 0;
}
.po-row {
  gap: 10px;
  min-height: 41px;
}
.po-row .qty-pair {
  display: flex;
  align-items: center;
  gap: 0;
}
.po-row .field input {
  background: transparent;
}
.po-row .field.has-value input {
  background: #ffffffdd;
}
.inline-date input {
  font:
    16px Inter,
    sans-serif;
  padding: 2px 4px;
}
.date-arrow {
  margin: 0 -8px;
  color: #888;
}
.po-state {
  width: 110px;
}
.po-state.pending {
  background: #666;
  font-size: 13px;
}
.nested {
  border: 2px solid #929292;
  margin: 0 4px 0 0;
}
.workorder {
  background: var(--pale);
}
.workorder-row {
  display: grid;
  grid-template-columns: 200px 240px 170px 110px 12px 110px 1fr 100px 30px 70px 30px;
  gap: 10px;
  align-items: center;
  padding: 5px;
  min-height: 45px;
}
.workorder-row .field,
.lot-row .field,
.operation-row .field {
  width: 100%;
}
.lot {
  background: #fbe9e5;
  margin: 0 5px;
}
.lot-row {
  display: grid;
  grid-template-columns: 310px 140px 220px 35px 1fr 270px 30px 30px 30px 30px;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 5px;
}
.lot-row .field input {
  background: transparent;
}
.operation {
  background: var(--pink);
  margin: 0 4px;
}
.operation-row {
  display: grid;
  grid-template-columns: 200px 280px 1fr 95px 280px 30px 30px 30px;
  gap: 10px;
  min-height: 41px;
  padding: 5px;
  align-items: center;
}
.operation-row .field input {
  background: transparent;
}
.operation-photo-area {
  min-height: 196px;
  display: flex;
  justify-content: center;
}
.operation-photo-area:empty {
  min-height: 0;
}
.operation-photo-area img {
  max-height: 196px;
  object-fit: contain;
}
.nest-add {
  text-align: center;
  height: 44px;
  padding: 4px;
  background: var(--pale);
}
.quotation-bar {
  background: #ffba00;
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 10px;
  gap: 10px;
}
.quotation-bar .quote-actions {
  display: flex;
  gap: 10px;
}
.empty-row {
  font:
    16px "Roboto Condensed",
    sans-serif;
  padding: 15px 20px;
  color: #777;
  text-align: center;
}
.footer {
  position: fixed;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  height: 31px;
  padding: 9px 10px;
  background: var(--pale);
  font-size: 12px;
}
.page-pad {
  padding-bottom: 45px;
}
.float-chat {
  position: fixed;
  z-index: 3;
  right: 34px;
  top: 65px;
  border-radius: 50%;
  background: #6551a5;
  width: 37px;
  height: 37px;
  box-shadow: 0 6px 7px #0002;
}
.notices {
  position: fixed;
  right: 8px;
  bottom: 31px;
  max-width: 370px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  z-index: 5;
}
.notice {
  background: var(--pale);
  border: 1px solid #999;
  border-radius: 11px;
  padding: 1px 6px;
  box-shadow: 0 3px 4px #0003;
  text-align: right;
  font-size: 16px;
}
.notice-toolbar {
  background: #fff3cf;
  border: 1px solid #aaa;
  border-radius: 10px 0 0 0;
  height: 22px;
  padding: 0 7px;
}
.notice-toolbar button {
  min-height: 18px;
  height: 20px;
  width: 24px;
  min-width: 24px;
}
.notice-toolbar svg {
  height: 20px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #000b;
  z-index: 50;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 18px 10px 50px;
}
.modal {
  background: #fff;
  border-radius: 8px;
  width: 1160px;
  flex-shrink: 0;
  padding: 25px;
  box-shadow: 0 2px 3px #0002;
}
.modal h2 {
  font-size: 23px;
  margin: 0 0 16px;
}
.modal .close {
  float: right;
}
.modal .field input,
.modal .field select {
  background: #fff;
}
.modal-buttons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 15px;
  margin-top: 14px;
}
.outline {
  border: 2px solid var(--primary);
  background: white;
  color: var(--primary);
  height: 32px;
  min-width: 100px;
}
.modal.import-modal {
  width: min(1120px, calc(100vw - 20px));
  border-radius: 0;
  padding: 0;
  margin-top: 82px;
}
/* Standalone mobile importer keeps its table scrollable inside native widths. */
.modal.import-modal.mobile-csv-import-modal {
  width: min(800px, calc(100vw - 20px));
  margin-top: 12px;
  overflow-wrap: anywhere;
}
.mobile-csv-import-modal .modal-buttons {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 10px 10px;
}
.mobile-csv-import-modal .import-preview table {
  min-width: 0;
}
.mobile-csv-import-modal .import-controls > select {
  max-width: 100%;
}
.mobile-csv-import-modal [data-csv-import-dialog] > p,
.mobile-csv-import-modal details {
  padding: 0 10px;
}
.import-preview {
  min-height: 200px;
  max-height: 430px;
  overflow: auto;
  box-shadow: 0 3px 4px #0003;
  padding: 0;
}
.import-controls {
  padding: 15px 20px 8px;
}
.import-controls > select {
  display: block;
  margin: auto;
  width: 310px;
  height: 28px;
  color: #777;
  font:
    16px "Roboto Condensed",
    sans-serif;
}
.import-controls input[type="file"] {
  display: none;
}
.import-preview table {
  border-collapse: collapse;
  width: 100%;
  font:
    16px "Roboto Condensed",
    sans-serif;
}
.import-preview td,
.import-preview th {
  padding: 5px;
  border: 1px solid #ccc;
  text-align: left;
}
.import-preview th {
  background: var(--pale);
}
.import-preview .empty-row {
  padding-top: 85px;
}
.import-preview.error {
  color: var(--destructive);
}
.import-preview .csv-cell-value {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 240px;
}
.import-preview .csv-row-edit {
  min-width: 0;
  padding: 2px 8px;
  margin-top: 4px;
  font-size: 14px;
}
.csv-correction-label,
.csv-correction-recovery label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.csv-correction-label input:not([type="checkbox"]),
.csv-correction-recovery input:not([type="checkbox"]) {
  box-sizing: border-box;
  width: 100%;
  min-width: 100px;
  max-width: 100%;
}
.csv-correction-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.csv-correction-actions [role="status"] {
  flex-basis: 100%;
  max-width: 240px;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.csv-correction-recovery {
  padding: 8px 12px;
}
@media (max-width: 760px) {
  .modal.import-modal {
    margin-top: 12px;
  }
  .import-modal .modal-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }
  .import-modal .import-preview thead {
    display: none;
  }
  .import-modal .import-preview table,
  .import-modal .import-preview tbody {
    display: block;
    width: 100%;
  }
  .import-modal .import-preview tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 8px;
    border: 1px solid #bbb;
    background: white;
  }
  .import-modal .import-preview td {
    display: grid;
    grid-template-columns: minmax(76px, 30%) minmax(0, 1fr);
    gap: 6px;
    min-width: 0;
    border: 0;
    border-bottom: 1px solid #eee;
    padding: 7px;
  }
  .import-modal .import-preview td::before {
    content: attr(data-label);
    font-size: 14px;
    color: #666;
  }
  .import-modal .import-preview td > * {
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
  }
  .import-modal .import-preview td::before {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .import-modal .quote-part-choice,
  .import-modal .quote-existing-part,
  .import-modal .quote-existing-part .field,
  .import-modal .quote-existing-part select {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .import-modal .import-controls > select {
    max-width: 100%;
  }
  .import-modal .csv-row-edit {
    justify-self: start;
  }
}
.login-backdrop {
  background: #000b;
  padding-top: 100px;
}
.login-modal {
  width: 600px;
  min-height: 280px;
  border-radius: 20px;
  padding: 30px;
  text-align: center;
}
.login-modal h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 18px;
}
.login-modal input {
  display: block;
  width: 300px;
  height: 48px;
  padding: 5px;
  margin: 0 auto 14px;
  font:
    16px "Roboto Condensed",
    sans-serif;
}
.login-modal button {
  height: 44px;
  margin-top: 1px;
}
.form-error {
  font-size: 13px;
  color: var(--destructive);
  margin: 8px 0;
}
.quote-title {
  display: flex;
  gap: 10px;
  align-items: center;
}
.quote-title input {
  height: 40px;
  flex: 1;
  padding: 5px;
  font:
    16px "Roboto Condensed",
    sans-serif;
  box-shadow: 0 2px 3px #0004;
}
.quote-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 8px;
}
.quote-address {
  width: 100%;
  height: 80px;
  resize: vertical;
  padding: 5px;
}
.quote-note {
  margin: 10px 0;
  width: 100%;
  height: 130px;
  resize: vertical;
  padding: 12px;
  font-size: 14px;
  box-shadow: 0 2px 3px #0005;
}
.quote-lines {
  box-shadow: 0 2px 3px #0005;
}
.quote-line {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  min-height: 76px;
  padding: 5px;
}
.quote-line input {
  height: 28px;
  font:
    16px "Roboto Condensed",
    sans-serif;
}
.quote-agree {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  justify-content: flex-end;
}
.quote-list-row {
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px dashed #aaa;
  padding: 5px;
}
.quote-list-row span {
  flex: 1;
}
.modal.generic-modal {
  width: 660px;
}
.form-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
  align-items: center;
}
.form-grid input,
.form-grid textarea,
.form-grid select {
  width: 100%;
  padding: 5px;
  min-height: 32px;
}
.form-grid textarea {
  height: 90px;
}
.route-list {
  background: var(--pale);
  border: 1px solid #999;
  margin: 0 4px;
}
.routing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-bottom: 1px dashed #999;
}
.routing-row .field {
  flex: 1;
}
/* Index Parts only: source widths and wrapping do not alter customer routing. */
.index-routing-row {
  flex-wrap: wrap;
  box-sizing: border-box;
  max-width: none;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  border-bottom: 0;
}
.index-routing-row .field {
  flex: 0 0 auto;
}
.index-routing-row > .field,
.index-routing-row > button {
  margin: 5px 5px 0;
}
.index-routing-row > button {
  flex-shrink: 0;
}
.index-routing-row > button:not(.icon) {
  padding: 0;
  margin-bottom: 5px;
}
.index-routing-row .field input,
.index-routing-row .field select {
  background: transparent;
  border: 2px solid #c7c7c7;
  border-radius: 4px;
  padding: 0 5px;
}
.index-routing-row .field.has-value input {
  padding: 0 5px;
}
.index-routing-row .field-label {
  display: none;
}
.index-process-row > .field.w150 {
  flex: 1 0 150px;
  min-width: 150px;
  max-width: 250px;
}
.index-process-row > .field.routing-note {
  max-width: none;
}
.index-process-row .routing-operations {
  width: 85px;
  min-width: 85px;
  padding-left: 4px;
  padding-right: 4px;
}
.index-operation-row {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}
.index-operation-row > .field.w40 {
  width: 40px;
}
.index-operation-row > .field.routing-name {
  flex: 1 0 150px;
  min-width: 150px;
  max-width: 200px;
}
.index-operation-row > .field.routing-docs {
  flex: 1 0 150px;
  min-width: 150px;
}
.index-operation-row > .field.w200 {
  flex: 1 0 200px;
  min-width: 200px;
}
.index-operation-row .routing-value-group {
  /* Source labels, numeric controls and the overlapping clock checkbox are
     siblings in the operation row. An extra wrapping flex box makes Bonus
     acquire a third line from its negative-margin checkbox's intrinsic size. */
  display: contents;
}
.index-operation-row .routing-value-group > span:first-child {
  margin: 8px 0 0 5px;
  min-height: 24px;
}
.index-operation-row .routing-value-group > .field {
  margin: 5px 5px 0;
}
.index-operation-row .routing-value-group > .field.w60 {
  margin-bottom: 4px;
}
.index-operation-row .routing-value-group > [role="alert"],
.index-operation-row .routing-value-group > [role="status"] {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.index-operation-row .routing-on-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 40px;
  min-height: 28px;
  margin: 8px 0 0 -50px;
}
.index-operation-row .routing-document {
  width: 28px;
  min-width: 28px;
  height: 20px;
  min-height: 20px;
  margin: 5px 10px 0 -35px;
}
.index-operation-row > .routing-document-slot {
  display: contents;
}
.index-operation-row .routing-qc {
  min-width: 120px;
}
.index-operation-row .routing-tools {
  min-width: 60px;
}
.index-operation-row .routing-components {
  min-width: 100px;
}
/* Source bTRdf -> bTRdt -> operation cell ancestry. The 1000px limit belongs
   to the right-aligned list, never the full-width process row or viewport. */
.index-process-list {
  border: 2px solid #8a8a8a;
  border-radius: 5px;
  background: #ebf3ff;
  margin: 0 5px;
  min-width: 360px;
}
.index-process-cell,
.index-routing-operation-cell {
  display: flex;
  flex-direction: column;
}
.index-process-cell + .index-process-cell,
.index-routing-operation-cell + .index-routing-operation-cell {
  border-top: 2px solid #8a8a8a;
}
.index-routing-operation-list {
  align-self: flex-end;
  width: calc(100% - 45px);
  max-width: 1000px;
  min-width: 360px;
  min-height: 20px;
  margin: 5px 5px 0 40px;
  border: 2px solid #8a8a8a;
  background: #d5e5fb;
}
/* Inline definition panel owns both its bounded list and the separate,
   centered Add/status below it. The source empty list is still 28px high. */
.index-routing-panel {
  border: 0;
  background: transparent;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}
.index-routing-panel > [data-index-qc-rows],
.index-routing-panel > .index-routing-usage-rows {
  width: calc(100% - 45px);
  max-width: 950px;
  min-width: 360px;
  min-height: 28px;
  margin: 5px 5px 0 40px;
  border: 2px solid #8a8a8a;
  background: #d5e5fb;
}
.index-qc-procedure-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border-bottom: 1px dashed var(--line);
}
.index-qc-procedure-row > .field.w150 {
  flex: 1 0 150px;
  min-width: 150px;
}
.index-qc-procedure-row .field {
  flex: 0 0 auto;
}
.index-qc-procedure-row .field.w210 {
  width: 210px;
}
.index-qc-procedure-row .field-label {
  display: none;
}
.index-qc-procedure-row [hidden] {
  display: none;
}
.index-qc-procedure-row > [data-qc-standard],
.index-qc-procedure-row > [data-qc-numeric] {
  display: inline-flex;
}
.index-qc-procedure-row > [data-qc-standard][hidden],
.index-qc-procedure-row > [data-qc-numeric][hidden] {
  display: none;
}
.index-routing-panel .usage-row {
  flex-wrap: wrap;
}
.index-routing-panel .nest-add {
  background: transparent;
  height: 42px;
  padding: 0 0 10px 5px;
}
.index-routing-panel .nest-add .round-add {
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin: 0;
}
.index-routing-panel [data-index-qc-status] > [role],
.routing-qc-type-notice {
  display: block;
  padding: 4px 6px;
  overflow-wrap: anywhere;
}
.qc-procedure-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  background: #fff3ce;
}
.logs {
  width: 95%;
  max-width: 1360px;
}
.log-row {
  display: grid;
  grid-template-columns: 180px 180px 150px 1fr;
  gap: 10px;
  min-height: 36px;
  border-bottom: 1px dashed #aaa;
  padding: 5px;
  font:
    16px "Roboto Condensed",
    sans-serif;
}
/* Work source uses its own responsive column, independent of the wide index. */
.work-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 360px;
  min-height: max(800px, 100vh);
  background: rgb(255, 244, 219);
  padding-bottom: 35px;
}
.work-page .header {
  min-width: 200px;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: 0 3px 4px #0003;
}
.work-page .user-line {
  height: auto;
  min-height: 42px;
  padding: 5px 10px;
  gap: 0;
  flex-wrap: wrap;
}
.work-page .vendor-title {
  min-width: 170px;
  margin: 0 10px;
  justify-content: flex-end;
}
.work-page .vendor-title > .icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
}
.work-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 650px;
  min-width: 40px;
  margin: 0 auto;
  font-size: 18px;
}
.work-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 40px;
  min-height: 40px;
}
.work-title {
  align-self: center;
  max-width: calc(100% - 10px);
  margin: 0 5px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.work-id {
  align-self: center;
  min-width: 150px;
  min-height: 32px;
  max-width: calc(100% - 5px);
  margin: 8px 0 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.work-note {
  display: flex;
  align-items: center;
  min-width: 40px;
  min-height: 40px;
}
.work-note input {
  height: 40px;
  min-width: 150px;
  flex: 1;
  margin: 5px;
  background: white;
  padding: 0 50px 0 5px;
  border-color: #c7c7c7;
  border-radius: 4px;
  font:
    18px "Roboto Condensed",
    sans-serif;
}
.work-note .icon {
  flex: 0 0 38px;
  width: 38px;
  height: 30px;
  min-width: 38px;
  margin-left: -50px;
  margin-right: 10px;
  border-radius: 5px;
}
.work-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0 5px;
  padding: 0 5px;
  min-width: 40px;
  min-height: 32px;
}
.work-date-row[hidden] {
  display: none;
}
.work-line > label {
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
}
.work-line input,
.work-line select {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 5px;
  border-color: #c7c7c7;
  border-radius: 4px;
}
.work-line input {
  background: #fff;
}
.work-note input:focus,
.work-line input:focus,
.work-line select:focus {
  border-color: var(--alert);
}
.work-line input[type="number"] {
  margin-left: 5px;
  text-align: center;
  font-family: "Roboto Condensed", sans-serif;
}
.work-line #qty-begin,
.work-line .work-machine {
  min-width: 150px;
  min-height: 32px;
  font-size: 24px;
}
.work-line .work-machine {
  padding: 0 12px;
  font-family: "Roboto Condensed", sans-serif;
}
.work-line .work-machine-before-start {
  /* Source bTIQH: --color_bTGzr_default (Primary 30). */
  background: rgb(213, 229, 251);
}
.work-line > [data-action="tools"] {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
}
.work-line.defect {
  height: 32px;
  min-height: 32px;
  margin-bottom: 15px;
  align-items: flex-start;
}
.work-line.defect:has(input:not(:disabled)) {
  height: 36px;
  min-height: 36px;
}
.work-line.defect > label {
  display: flex;
  align-items: center;
  min-height: 32px;
}
.work-line.defect:has(input:not(:disabled)) > label {
  min-height: 48px;
}
.work-line.defect input {
  height: 100%;
  min-width: 90px;
  font-size: 24px;
}
.work-line.defect input:not(:disabled) {
  /* Source fixed parent is 36px; its editable child extends to at least 48px. */
  min-height: 48px;
  font-size: 36px;
}
.work-line.defect > .icon {
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  height: 100%;
  border-radius: 5px;
}
.work-line .qc-number {
  flex: 0 0 70px;
  min-width: 70px;
  padding: 0;
  height: 100%;
  font:
    24px "Roboto Condensed",
    sans-serif;
}
.work-date-help {
  flex: 0 0 100%;
  margin: 0 0 4px;
  color: #495564;
  font-size: 13px;
  line-height: 1.4;
}
.work-date-controls {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  min-width: 150px;
}
.work-date-controls input {
  height: 32px;
  font:
    18px Inter,
    sans-serif;
  border-color: #e6e6e6;
}
/* Work uses explicit local 24-hour HH:mm text, matching the source display.
   Native time chrome can add a clipped AM/PM suffix at this 86px width. */
.work-date-controls .time {
  flex: 0 0 86px;
  width: 86px;
}
.work-actions {
  width: 100%;
  max-width: 360px;
  min-width: 60px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
}
.work-actions button {
  min-height: 70px;
  padding: 0 10px;
  font-size: 36px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
.work-actions button:disabled {
  opacity: 0.25;
}
.work-actions [data-action="begin"]:disabled,
.work-actions [data-action="finish"]:disabled {
  font-size: 24px;
  opacity: 1;
  filter: none;
}
.work-actions .modify,
.work-actions .finish {
  padding: 0 20px;
  background: var(--destructive);
}
.work-actions .pause {
  background: rgb(184, 129, 0);
}
.work-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.work-image-cell {
  display: flex;
  min-width: 100px;
  min-height: 50px;
}
.work-image-cell img {
  display: block;
  width: 100%;
  min-width: 100px;
  height: 150px;
  min-height: 150px;
  object-fit: contain;
  border-radius: 4px;
}
.work-return {
  position: fixed;
  bottom: 8px;
  left: 10px;
  font-size: 12px;
}
.qc-modal {
  width: 640px;
  text-align: center;
}
.qc-question {
  font-size: 25px;
  margin: 16px 0;
}
.qc-limits {
  color: #777;
  font-size: 15px;
}
.qc-value {
  height: 55px;
  font-size: 30px;
  width: 90%;
  margin: 20px 0 10px;
  padding: 5px;
}
.qc-fault {
  background: #fad2cc;
}
.qc-count {
  text-align: left;
  font-size: 16px;
}
.qc-settings {
  font-size: 13px;
  text-align: left;
  margin-top: 16px;
}
.toast-error {
  background: #ffe6e0;
  border-color: var(--destructive);
}
#toast-root {
  position: fixed;
  z-index: 100;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 6px;
}
.toast {
  background: #f4fff3;
  border: 1px solid #688663;
  border-radius: 5px;
  padding: 10px 16px;
  max-width: 650px;
  box-shadow: 0 3px 10px #0003;
  font-size: 14px;
}
.toast.error {
  background: #fff0ed;
  border-color: var(--destructive);
}
.busy {
  cursor: wait;
}
.print-controls {
  position: fixed;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 10px;
  z-index: 5;
}
.print-page {
  width: 900px;
  min-height: 1300px;
  border: 2px solid #777;
  margin: 0 auto;
  font:
    14px Arial,
    sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
}
.print-header {
  height: 280px;
  position: relative;
  padding: 20px 58px;
}
.print-header.quotation {
  height: 370px;
}
.print-header.shipping {
  height: 250px;
}
.print-vendor {
  padding-top: 24px;
  font-size: 18px;
  font-weight: 600;
  color: #555;
}
.print-doc-title {
  position: absolute;
  right: 18px;
  top: 20px;
  width: 325px;
  border: 2px solid #777;
  text-align: center;
}
.print-doc-title h1 {
  font-size: 24px;
  margin: 3px 0;
}
.print-doc-title div {
  border-top: 2px solid #777;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 600;
  padding: 4px 8px;
}
.print-doc-title span:last-child {
  border-left: 1px solid #777;
  padding-left: 10px;
}
.print-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  margin-top: 64px;
  line-height: 20px;
}
.print-header.quotation .print-addresses {
  margin-top: 68px;
  row-gap: 60px;
}
.print-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.print-table th,
.print-table td {
  border: 2px solid #777;
  padding: 6px 3px;
  vertical-align: middle;
}
.print-table th {
  white-space: nowrap;
}
.print-table tr:nth-child(odd) td {
  background: #e6e6e6;
}
.print-table .number {
  text-align: right;
}
.print-table .center {
  text-align: center;
}
.print-blank {
  flex: 1;
  min-height: 250px;
}
.print-end {
  padding: 30px 42px;
  font-size: 16px;
}
.print-end.invoice {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.signatures {
  line-height: 65px;
}
.print-end.quotation {
  display: flex;
  justify-content: space-between;
  align-items: end;
  font-size: 14px;
  padding: 25px 20px;
}
.print-end.quotation strong {
  font-size: 18px;
  white-space: nowrap;
}
.print-end.shipping {
  border-top: 2px solid #777;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 30px 25px 10px;
}
.conformance {
  border: 1px solid #777;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  padding: 5px;
}
.conformance h4 {
  text-align: center;
  border-bottom: 1px solid #777;
  margin: 0 0 8px;
  padding: 2px;
}
.print-thanks {
  text-align: center;
  font-weight: bold;
  margin: 5px auto 18px;
  border: 1px solid #777;
  padding: 5px 30px;
  width: max-content;
}
.bom {
  padding: 20px;
}
.bom h1 {
  font-size: 24px;
  text-align: center;
}
.notice-text {
  font-size: 13px;
  color: #777;
  margin: 8px 0;
}
.customer-page .table-surface {
  padding: 15px;
}
.link-button {
  display: inline-block;
  text-decoration: none;
  color: white;
  background: var(--primary);
  padding: 5px 10px;
  border-radius: 3px;
}
.loading {
  padding: 30px;
  text-align: center;
  color: #888;
}
.print-warning {
  font:
    12px Inter,
    sans-serif;
  color: #666;
  text-align: center;
  margin: 12px;
}
@media print {
  @page {
    size: A4;
    margin: 8mm;
  }
  body {
    background: white;
  }
  .print-controls,
  .print-warning {
    display: none;
  }
  .print-page {
    width: 100%;
    min-height: 275mm;
    border: 1px solid #777;
  }
  .print-table {
    break-inside: auto;
  }
  .print-table tr {
    break-inside: avoid;
  }
  .print-table thead {
    display: table-header-group;
  }
  .print-header {
    break-inside: avoid;
  }
  .print-end {
    break-inside: avoid;
  }
  .print-header.quotation {
    height: 72mm;
  }
  .print-header {
    height: 52mm;
  }
  .print-header.shipping {
    height: 48mm;
  }
  .print-blank {
    min-height: 15mm;
  }
  .footer,
  .float-chat,
  .notices {
    display: none;
  }
}
.print-vendor {
  margin-left: 156px;
}
.bom-header {
  height: 149px;
}
.bom-status {
  max-width: 760px;
  margin: 80px auto 30px;
  padding: 24px;
  border: 2px solid #777;
}
.bom-status h1 {
  font-size: 22px;
}
.bom-header .print-doc-title h2 {
  position: absolute;
  top: 69px;
  width: 100%;
  font-size: 23px;
  margin: 2px 0;
  white-space: nowrap;
}
.work-sheet {
  width: 1080px;
  margin: auto;
  font:
    16px Inter,
    Arial,
    sans-serif;
}
.work-sheet > h1 {
  text-align: center;
  font-size: 36px;
  line-height: 43px;
  margin: 8px 0 30px;
}
.sheet-head {
  display: grid;
  grid-template-columns: 280px 490px 1fr;
  gap: 18px;
  min-height: 244px;
  border-bottom: 4px solid #555;
  padding: 0 0 15px;
}
.sheet-vendor {
  padding-top: 30px;
}
.sheet-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
}
.sheet-trace {
  display: flex;
  align-items: center;
  justify-content: center;
}
.write-box {
  display: inline-block;
  width: 98px;
  min-height: 32px;
  border: 2px solid #c6c6c6;
  border-radius: 3px;
  vertical-align: middle;
  padding: 4px;
  text-align: center;
  font:
    16px "Roboto Condensed",
    sans-serif;
}
.sheet-operation {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px 20px;
  padding: 20px 10px;
  border-bottom: 3px solid #555;
  break-inside: avoid;
}
.sheet-operation .write-box {
  min-width: 110px;
  width: auto;
}
.sheet-operation > div {
  display: flex;
  gap: 5px;
  align-items: center;
}
@media print {
  .work-sheet {
    width: 100%;
  }
  .sheet-head {
    grid-template-columns: 22% 53% 20%;
  }
  .sheet-operation {
    grid-template-columns: 1fr 1fr;
  }
  .print-controls {
    display: none;
  }
}
.customer-page > h2 {
  text-align: center;
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
  margin: 20px 0;
}
.customer-heading {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 10px;
}
.customer-heading h2 {
  font-size: 24px;
  margin: 0;
}
.customer-heading h6 {
  font-size: 18px;
  margin: 0;
}
.customer-heading input {
  font:
    16px "Roboto Condensed",
    sans-serif;
  padding: 5px;
  height: 36px;
}
.customer-pos {
  min-width: 1250px;
}
/* Customer quotation frames: inert visible-run rails and endcaps. The saved
   quotation LAST/FIRST endpoints alone select the full header/source tail.
   Source bTOqW closes with a flat 5px band, not a rounded/padded lower cap.
   Keep every existing per-PO detail button, including neutral interior strips. */
.customer-pos {
  --customer-quotation-color: #ffb505;
}
.customer-pos > [data-customer-followthrough-row] {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.customer-pos > [data-customer-po-quotation-frame] {
  border-left-color: var(--customer-quotation-color);
  border-right-color: var(--customer-quotation-color);
}
.customer-pos > :is([data-customer-po-quotation-frame="first"], [data-customer-po-quotation-frame="single"]) {
  border-top: 5px solid var(--customer-quotation-color);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  margin-top: 3px;
}
.customer-pos > :is([data-customer-po-quotation-frame="last"], [data-customer-po-quotation-frame="single"]) {
  border-bottom: 5px solid var(--customer-quotation-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 0;
  margin-bottom: 3px;
}
.customer-pos > [data-customer-po-quotation-tail]:not([data-customer-po-quotation-frame="last"]):not([data-customer-po-quotation-frame="single"]) {
  border-bottom: 5px solid var(--customer-quotation-color);
}
.customer-pos > [data-customer-followthrough-row] > .customer-quotation-bar {
  background: #fff;
  border-radius: 0;
}
.customer-pos > [data-customer-po-quotation-header] > .customer-quotation-bar {
  background: var(--customer-quotation-color);
}
.customer-pos > :is([data-customer-po-quotation-frame="first"], [data-customer-po-quotation-frame="single"]) > .customer-quotation-bar {
  border-radius: 15px 15px 0 0;
}
[data-customer-po-reading-controls] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 6px 10px;
}
[data-customer-po-reading-controls] > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
[data-customer-po-reading-field="part"] {
  display: block;
  padding-top: 10px;
}
[data-customer-po-reading-field="part"] > span {
  position: absolute;
  top: -2px;
  left: 0;
  font-size: 12px;
  line-height: 14px;
  color: #666;
}
[data-customer-po-reading-field="part"] .customer-po-part-id {
  display: block;
  width: 100%;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-customer-po-reading-field="part"] .customer-po-part-detail {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 4;
  width: max-content;
  min-width: 80px;
  max-width: min(280px, 80vw);
  padding: 5px;
  border: 1px solid #aaa;
  background: #fff;
  box-shadow: 0 2px 6px #0002;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.customer-po-part-preview:hover .customer-po-part-detail,
.customer-po-part-preview:focus-within .customer-po-part-detail {
  display: block;
}
button.bright {
  background: var(--alert);
}
button.red {
  background: var(--destructive);
}
.float-chat {
  padding: 0;
  background: transparent;
  box-shadow: none;
  width: 64px;
  height: 64px;
  top: 60px;
  right: 20px;
}
.float-chat:hover {
  filter: none;
}
.float-chat img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* Source-shaped workflow controls; keep the dense desktop layout. */
.modal.staff-provision-modal {
  width: 600px;
  min-height: 280px;
  border-radius: 20px;
  padding: 20px;
}
.staff-provision-modal h2 {
  text-align: center;
  margin-bottom: 22px;
}
.staff-provision-modal .close {
  margin-left: 10px;
}
.usage-list {
  border: 2px solid var(--line);
  background: var(--cream);
  max-width: 950px;
  min-width: 360px;
  margin: 5px 5px 5px 40px;
}
.usage-title {
  font-size: 14px;
  color: #555;
  padding: 4px 6px;
}
.usage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px;
  border-bottom: 1px dashed var(--line);
}
.usage-row .field:first-child,
.usage-row .field:nth-child(2) {
  flex: 1;
}
.usage-list .nest-add {
  background: transparent;
}
.quotation-claim {
  margin: 10px 0;
}
.claim-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
}
.quotation-claim:not(:has(.claim-mode input:checked)) .claim-panel {
  display: none;
}
.claim-panel {
  border: 1px solid var(--line);
  background: var(--pale);
  padding: 10px;
}
.claim-candidates {
  padding-left: 32px;
  max-height: 240px;
  overflow: auto;
}
.claim-candidates li {
  padding: 5px;
  border-bottom: 1px dashed var(--line);
}
.claim-candidates li span,
.claim-candidates time {
  display: inline-block;
  min-width: 180px;
  margin-right: 12px;
}
.claim-selection {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.claim-selection label {
  display: grid;
  gap: 4px;
  font-size: 14px;
}
.claim-selection input {
  width: 155px;
  height: 32px;
  background: #fff;
  padding: 4px;
}
.shipping-order {
  border: 1px solid var(--line);
  margin: 10px 0;
}
.shipping-order .quote-list-row {
  background: var(--pale);
}
.shipping-order select {
  height: 28px;
}
.shipping-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border-bottom: 1px dashed var(--line);
}
.shipping-line:last-child {
  border-bottom: 0;
}
.shipping-line-number {
  min-width: 28px;
  text-align: center;
}
.shipping-po {
  flex: 1;
  overflow-wrap: anywhere;
}
.qc-defect-count {
  font-size: 14px;
  color: #555;
  max-width: 110px;
}

/* Scoped integration host: standalone QC renderers retain source layout. */
.qc-backdrop {
  overflow: auto;
  align-items: flex-start;
  padding: clamp(6px, 1.5vw, 20px);
}
.qc-backdrop > .qc-manual,
.qc-backdrop > .qc-report {
  margin: auto;
  max-width: 100%;
  flex-shrink: 0;
}
.qc-backdrop > .qc-report {
  box-sizing: border-box;
  max-width: 100%;
}
.qc-backdrop .qc-report-actions .qc-xlsx-download {
  box-sizing: border-box;
  min-width: 100px;
  min-height: 32px;
  margin-top: 20px;
  padding: 5px 10px;
  border: 1px solid rgb(12, 41, 171);
  border-radius: 4px;
  background: rgb(12, 41, 171);
  color: white;
  font:
    16px Inter,
    sans-serif;
  text-align: center;
}
.messenger-page {
  min-height: 423px;
}
@media print {
  #chat-root,
  .qc-backdrop {
    display: none;
  }
}
.quote-part-choice,
.quote-new-part,
.quote-new-part-fields {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.quote-new-part {
  font-size: 14px;
}
.quote-new-part[hidden],
.quote-part-choice:not(:has(.quote-new-part input:checked))
  .quote-new-part-fields,
.quote-part-choice:has(.quote-new-part input:checked) .quote-existing-part {
  display: none;
}

/* Source report shells: fixed wide rows remain clipped at narrow desktop widths. */
.scan-report {
  min-width: 1080px;
  padding-bottom: 45px;
}
.report-controls {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
}
.report-summary {
  padding: 10px 5px;
  background: #eaf3ff;
  border-radius: 0 0 6px 6px;
}
.report-summary h1 {
  margin: 0 5px 10px;
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
}
.report-summary-fields {
  display: flex;
  gap: 40px;
  font-size: 18px;
  line-height: 25px;
  margin-bottom: 10px;
}
.report-summary-fields > div:first-child {
  width: 300px;
  flex: none;
}
.report-finish {
  margin-left: 60px;
}
.report-orders {
  min-height: 20px;
  border: 2px solid #999;
  border-radius: 5px;
  background: #fff9ee;
}
.report-order + .report-order {
  border-top: 2px solid #999;
}
.report-order-row,
.report-lot-row,
.report-operation {
  display: flex;
  gap: 20px;
  align-items: center;
  min-height: 40px;
  padding: 5px;
  white-space: nowrap;
}
.report-order-row > span:nth-child(1),
.report-order-row > span:nth-child(2) {
  min-width: 210px;
}
.report-order-row > span:nth-child(6) {
  min-width: 160px;
}
.report-lots {
  margin: 5px 5px 20px 40px;
  border: 2px solid #999;
  background: #e8f1ff;
}
.report-lot + .report-lot {
  border-top: 2px solid #999;
}
.report-lot-row > a {
  min-width: 250px;
}
.report-lot-row > span:nth-child(3) {
  min-width: 200px;
}
.report-expand {
  background: #fff1cc;
  color: var(--primary);
  box-shadow: inset 1px 1px 3px #aaa;
}
.report-operations {
  margin: 5px;
  border: 2px solid #999;
  background: #ffeddd;
  overflow: hidden;
}
.report-operation + .report-operation {
  border-top: 2px solid #999;
}
.report-operation-name {
  min-width: 180px;
}
.report-operation > input {
  width: 150px;
  flex: none;
}
.report-operation > .report-defect {
  width: 80px;
}
.report-work-link {
  font-size: 14px;
}
.report-calendar {
  margin-top: 20px;
  font:
    12px Arial,
    sans-serif;
}
.report-calendar-toolbar {
  display: flex;
  gap: 2px;
  align-items: center;
  height: 48px;
  font-size: 16px;
}
.report-calendar-toolbar > button {
  background: #31485b;
  font-size: 14px;
  border-radius: 2px;
}
.report-calendar-toolbar > button:first-child {
  margin-right: 8px;
  background: #788695;
}
.report-calendar-toolbar > span {
  text-align: center;
  flex: 1;
}
.report-calendar-toolbar > small {
  width: 45px;
}
.report-calendar-head,
.report-calendar-grid {
  display: grid;
  grid-template-columns: 48px repeat(7, minmax(0, 1fr));
}
.report-calendar-head > span {
  border: 1px solid #ddd;
  padding: 3px;
  text-align: center;
}
.report-calendar-scroll {
  height: 734px;
  overflow-y: auto;
}
.report-calendar-grid {
  height: 864px;
  background: linear-gradient(#fafafa, #aaa);
}
.report-calendar-hours > span {
  display: block;
  height: 36px;
  border-bottom: 1px solid #ddd;
  padding: 3px;
  text-align: center;
}
.report-calendar-day {
  position: relative;
  border-left: 1px solid #ddd;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 17px,
    #ddd 17px,
    #ddd 18px,
    transparent 18px,
    transparent 35px,
    #ddd 35px,
    #ddd 36px
  );
}
.report-calendar-day.is-today {
  background-color: #fff9b855;
}
.report-calendar-event {
  position: absolute;
  left: 2px;
  right: 2px;
  min-height: 3px;
  overflow: hidden;
  background: #1e6df6;
  border: 1px solid #1050bd;
  border-radius: 3px;
  color: white;
  text-decoration: none;
  padding: 2px;
}
.report-calendar-event > span,
.report-calendar-event > small {
  display: block;
}
.report-calendar-note {
  padding: 4px;
  color: #555;
}
/* Source workplace: narrow gradient group rail and separate white content. */
.workplace-page {
  display: flex;
  gap: 15px;
  min-width: 640px;
  min-height: 100vh;
  background: #aaa;
}
.workplace-rail {
  width: 250px;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: 5px;
  background: linear-gradient(#f8f8f8, #aaa);
}
.workplace-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 240px;
  min-height: 54px;
  margin-bottom: 10px;
  background: transparent;
  color: #111;
  font-weight: 400;
  white-space: normal;
}
.workplace-choice:first-child {
  min-height: 84px;
}
.workplace-choice.is-selected {
  background: #fff0c7;
  border: 1px solid #ccc;
  box-shadow: inset 1px 1px 3px #aaa;
}
.workplace-choice svg {
  width: 42px;
  height: 42px;
  fill: var(--primary);
}
.workplace-choice small {
  color: var(--primary);
  font-size: 12px;
}
.workplace-group-mark svg {
  width: 45px;
}
.workplace-rail-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.workplace-content {
  flex: 1;
  min-width: 360px;
  margin-right: 5px;
  background: #fff;
  padding: 5px;
}
.workplace-message-controls,
.workplace-post-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 5px 0 15px;
  font-size: 13px;
}
.workplace-message {
  width: fit-content;
  max-width: 90%;
  margin: 5px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.workplace-message > div {
  padding: 3px 5px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.workplace-message > a {
  display: block;
  padding: 5px;
}
.workplace-message.is-own {
  margin-left: auto;
}
.workplace-message.is-own > div {
  background: #e1efff;
}
.workplace-post {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.workplace-post h2 {
  font-size: 18px;
  margin: 0 0 10px;
}
.workplace-post-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-bottom: 12px;
}
.workplace-post small {
  color: #666;
}
.local-qr {
  margin: 0;
  max-width: 180px;
  text-align: center;
  font-size: 13px;
}
.local-qr img {
  display: block;
  width: 152px;
  height: 152px;
  margin: 0 auto;
  background: white;
}
.local-qr [hidden] {
  display: none;
}
.qr-unavailable {
  display: block;
  padding: 10px;
  border: 1px dashed #999;
  color: #555;
  font-size: 12px;
}
.local-qr figcaption {
  margin-top: 5px;
}
.sheet-operation-qr {
  grid-column: 3;
  grid-row: span 4;
  justify-content: center;
}
.qc-xlsx-download {
  display: inline-block;
  padding: 6px 10px;
  background: var(--primary);
  border-radius: 4px;
  color: white;
  text-decoration: none;
}
@media print {
  .report-controls,
  .workplace-message-controls,
  .workplace-post-controls {
    display: none;
  }
  .sheet-operation-qr {
    grid-column: 2;
  }
}
.trace-page {
  min-width: 360px;
  min-height: 600px;
}
.trace-page h1 {
  margin: 0 20px 24px;
  font-size: 28px;
  font-weight: 600;
}
.trace-page form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.trace-page input {
  width: 250px;
  height: 48px;
  padding: 5px;
  font-family: "Roboto Condensed", sans-serif;
}
.trace-page button[type="submit"] {
  min-width: 150px;
  min-height: 50px;
  font-size: 24px;
}

/* bTORT: source popup max 800/min 360, 10px padding, 20px column gap.
   Geometry is source-derived; no browser or pixel-parity claim. */
.modal.tool-catalog-modal {
  width: 800px;
  max-width: calc(100vw - 24px);
  min-width: 360px;
  min-height: 400px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tool-catalog-modal h2,
.tool-catalog-modal p {
  margin: 0;
}
.tool-import-disabled {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-around;
}
.tool-import-disabled > div {
  display: flex;
  gap: 10px;
}
.tool-import-disabled input {
  min-width: 250px;
  min-height: 32px;
}
.catalog-code-search {
  width: 250px;
  min-height: 48px;
  align-self: center;
}
.tool-catalog-results {
  border: 2px solid #6b6b6b;
  border-radius: 5px;
}
.tool-catalog-card {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  padding: 10px;
  min-height: 150px;
  border-bottom: 2px solid #6b6b6b;
}
.tool-catalog-card:last-child {
  border-bottom: 0;
}
.tool-catalog-description {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-wrap: anywhere;
}
.tool-catalog-description > button {
  align-self: center;
  min-width: 60px;
  min-height: 32px;
}
.tool-catalog-placeholder {
  width: 320px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f4f4f4;
  color: #767676;
}
.tool-catalog-placeholder svg {
  width: 54px;
  height: 54px;
  fill: currentColor;
}
.catalog-limit,
.catalog-target {
  color: #666;
  font-size: 12px;
}
.catalog-selector {
  display: flex;
  align-items: center;
  min-width: 320px;
  width: 320px;
  gap: 8px;
}
.catalog-selector > .field {
  flex: 1;
  min-width: 160px;
}
.catalog-selector.component-selector {
  min-height: 28px;
}
.component-selector > input {
  flex: 1;
  min-width: 160px;
  height: 28px;
}
.catalog-selector .icon {
  width: 28px;
  min-width: 28px;
  height: 28px;
}
.catalog-row-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 5px;
}
.catalog-row-status:empty {
  display: none;
}

.tool-catalog-modal > .close {
  align-self: flex-end;
}
.catalog-selector.tool-selector {
  width: 288px;
  min-width: 288px;
}
.catalog-selector.tool-selector > .field {
  width: 250px;
  min-width: 250px;
}
.catalog-selector.component-selector {
  width: 360px;
  min-width: 360px;
}

/* Source PO column focus menu and per-row relation-boundary decorations. */
.po-column-picker,
.part-column-picker {
  position: relative;
}
.po-column-choices,
.part-column-choices {
  position: absolute;
  z-index: 20;
  right: 0;
  top: 32px;
  min-width: 150px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #aaa;
  background: white;
  box-shadow: 0 2px 8px #0003;
}
.po-column-choices legend,
.part-column-choices legend {
  font-size: 12px;
}
.po-column-choices label,
.part-column-choices label {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.toolbar .po-column-choices input,
.toolbar .part-column-choices input {
  width: auto;
  height: auto;
}
.po-column {
  display: contents;
}
.po-row-number {
  min-width: 45px;
  text-align: center;
}
.quotation-tail {
  min-height: 5px;
  margin-bottom: 3px;
  background: #ffba00;
}

/* PO quotation frames: source bTRcv / bTONX supplies 5px yellow rails;
   bTRcw / bTONL supplies 20px upper rounding; bTRdH / bTOOU has flat 5px tails.
   Visible-run end caps are inert
   presentation only, separate from stored-membership commercial boundaries. */
[data-desktop-po-list],
.mobile-section-pos {
  --po-quotation-color: #ffb505;
}
[data-desktop-po-list] > .po-block {
  border-left: 5px solid #fff;
  border-right: 5px solid #fff;
}
[data-desktop-po-list] > .po-block[data-po-quotation-frame],
.mobile-po-cell[data-po-quotation-frame] {
  border-left: 5px solid var(--po-quotation-color);
  border-right: 5px solid var(--po-quotation-color);
  border-bottom: 0;
}
:is(.po-block, .mobile-po-cell):is([data-po-quotation-frame="first"], [data-po-quotation-frame="single"]):not([data-po-quotation-header]) {
  border-top: 5px solid var(--po-quotation-color);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding-top: 15px;
  margin-top: 3px;
}
:is(.po-block, .mobile-po-cell):is([data-po-quotation-frame="last"], [data-po-quotation-frame="single"]):not([data-po-quotation-tail]) {
  border-bottom: 5px solid var(--po-quotation-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 0;
  margin-bottom: 3px;
}
:is(.quotation-bar, .mobile-quotation-bar)[data-po-quotation-frame] {
  background: var(--po-quotation-color);
  border-radius: 0;
  margin-top: 0;
}
:is(.quotation-bar, .mobile-quotation-bar):is([data-po-quotation-frame="first"], [data-po-quotation-frame="single"]) {
  border-radius: 20px 20px 0 0;
  margin-top: 3px;
}
:is(.quotation-tail, .mobile-quotation-tail)[data-po-quotation-frame] {
  height: 5px;
  min-height: 5px;
  border: 0;
  border-radius: 0;
  background: var(--po-quotation-color);
  margin-bottom: 0;
}
:is(.quotation-tail, .mobile-quotation-tail):is([data-po-quotation-frame="last"], [data-po-quotation-frame="single"]) {
  margin-bottom: 3px;
}
/* Keep the oversized PO table's left edge reachable. Auto margins center it
   only when it fits; never center overflow at a negative scroll origin. */
.index-page > .wide-surface:has(> [data-desktop-po-list]) {
  justify-content: flex-start;
}
/* Parts uses the same oversized flex surface: keep its first editable field
   reachable at scrollLeft 0 while auto margins center a table that fits. */
.index-page > .wide-surface:has(> .parts-table) {
  justify-content: flex-start;
}

/* Index-only source row: sections collapse independently from page navigation. */
.index-page {
  min-width: 360px;
  min-height: 800px;
}
.index-header {
  min-width: 360px;
  display: flow-root;
  background: #ebf3ff;
}
.index-shell-controls {
  height: auto;
  min-height: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 5px 10px;
  margin-bottom: 10px;
  white-space: normal;
}
.index-tab-group {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 5px;
  border: 2px solid #fff;
  border-radius: 6px;
  box-shadow: 0 0 4px #c9cfda4d;
}
.index-shell-controls .tab {
  width: 120px;
  min-width: 120px;
  height: 32px;
  min-height: 32px;
  border: 0;
  box-shadow: none;
}
.index-shell-controls > .round-add {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  margin: 0 5px;
}
.index-toolbar {
  flex: 1 1 206px;
  max-width: 286px;
  height: auto;
  min-width: 206px;
  gap: 15px;
  padding: 0;
}
.index-toolbar.po-toolbar {
  flex-basis: 394px;
  min-width: 351px;
  max-width: 474px;
}
.index-toolbar input[data-search] {
  flex: 1 1 120px;
  min-width: 120px;
  max-width: 200px;
}
.index-toolbar select {
  flex: 0 0 130px;
}
.index-shell-controls .icon:not(.round-add) {
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  color: var(--alert);
}
.index-page .icon svg,
.index-page .round-add svg {
  width: 100%;
  height: 100%;
}
.index-page .icon:hover,
.index-page .round-add:hover {
  filter: none;
}
.index-page > .table-surface {
  min-width: 360px;
  margin: 5px 0 10px;
  padding: 10px 5px;
  background: #ebf3ff;
}
.index-page > .table-surface > .record-table {
  border-color: #8a8a8a;
}
.index-page .customer-cell {
  border-bottom-color: #8a8a8a;
}
.index-page .usage-list.index-routing-panel {
  max-width: none;
  min-width: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

/* bTRhX follows quotation popup bTRkp visibility, never bTRhc expansion. */
.customer-quotations[data-quotation-popup-visible="false"] {
  background: var(--primary);
}
.customer-quotations[data-quotation-popup-visible="true"] {
  background: var(--alert);
}
.customer-quotation-panel {
  order: 2;
  align-self: flex-end;
  min-width: 150px;
  max-width: 95%;
  margin: 5px 0;
}
.customer-primary-row {
  order: 1;
}
.customer-address-panel {
  order: 3;
}
.customer-quotation-list {
  min-height: 20px;
  max-height: 350px;
  overflow: auto;
  border: 2px solid #8a8a8a;
  border-radius: 5px;
  background: #ebf3ff;
}
.customer-quotation-entry + .customer-quotation-entry {
  border-top: 2px solid #8a8a8a;
}
.customer-quotation-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
}
.customer-quotation-row > input {
  height: 28px;
  min-height: 28px;
  margin: 5px;
  padding: 0 5px;
  flex: 0 0 160px;
  width: 160px;
}
.customer-quotation-row > [data-quotation-field="note_text"] {
  flex: 1 0 250px;
  min-width: 250px;
}
.customer-quotation-row > [type="number"] {
  flex: 0 0 90px;
  width: 90px;
}
.quotation-row-creator {
  flex: 0 0 250px;
  width: 250px;
  min-height: 28px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.quotation-row-detail {
  min-width: 60px;
  min-height: 28px;
  margin: 5px 5px 4px;
  padding: 0 5px;
}
.quotation-row-limit,
.quotation-row-status,
.quotation-list-status {
  margin: 3px 5px;
  font-size: 13px;
}
.quotation-row-status:empty {
  display: none;
}
.quotation-list-status {
  display: flex;
  gap: 6px;
  align-items: center;
}
.customer-quotation-add {
  order: 6;
  align-self: center;
  margin-left: 10px;
}
.customer-quotation-add .round-add {
  width: 32px;
  height: 32px;
}
.customer-quotation-panel[hidden],
.customer-quotation-add[hidden] {
  display: none;
}

.quotation-list-status:empty {
  display: none;
}

/* index_mobile bTPgd/bTPgL: popup visibility colors the 90px entry button;
   each Customer occurrence keeps its own nested list ahead of its addresses. */
.mobile-page .mobile-quotations[data-quotation-popup-visible="false"] {
  background: var(--primary);
}
.mobile-page .mobile-quotations[data-quotation-popup-visible="true"] {
  background: var(--alert);
}
.mobile-page .mobile-section-customers .mobile-record-cell {
  display: flex;
  flex-direction: column;
}
.mobile-page .mobile-customer-row,
.mobile-page .mobile-section-customers .mobile-email-effect {
  order: 1;
}
.mobile-page .mobile-quotation-panel {
  order: 2;
  align-self: flex-end;
  min-width: 150px;
  max-width: 95%;
  margin: 5px 0;
}
.mobile-page .mobile-quotation-list {
  min-height: 20px;
  max-height: 350px;
  overflow: auto;
  border: 2px solid #8a8a8a;
  border-radius: 5px;
  background: #ebf3ff;
}
.mobile-page .mobile-quotation-entry + .mobile-quotation-entry {
  border-top: 2px solid #8a8a8a;
}
.mobile-page .mobile-quotation-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
}
.mobile-page .mobile-quotation-row > input {
  height: 28px;
  min-height: 28px;
  margin: 5px;
  padding: 0 5px;
  flex: 0 0 160px;
  width: 160px;
}
.mobile-page
  .mobile-quotation-row
  > [data-mobile-quotation-row-field="note_text"] {
  flex: 1 0 250px;
  min-width: 250px;
}
.mobile-page .mobile-quotation-row > [type="number"] {
  flex: 0 0 90px;
  width: 90px;
}
.mobile-page .mobile-quotation-creator {
  flex: 0 0 250px;
  width: 250px;
  min-height: 28px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mobile-page .mobile-quotation-detail {
  min-width: 60px;
  min-height: 28px;
  margin: 5px 5px 4px;
  padding: 0 5px;
}
.mobile-page .mobile-quotation-limit,
.mobile-page .mobile-quotation-row-status,
.mobile-page .mobile-quotation-list-status,
.mobile-page .mobile-quotation-create-status {
  margin: 3px 5px;
  font-size: 13px;
}
.mobile-page .mobile-quotation-list-status,
.mobile-page .mobile-quotation-create-status {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.mobile-page .mobile-section-customers .mobile-address-panel {
  order: 3;
}
.mobile-page .mobile-section-customers .mobile-row-save {
  order: 4;
}
.mobile-page .mobile-quotation-add {
  order: 6;
  align-self: center;
  margin-left: 10px;
}
.mobile-page .mobile-quotation-add .round-add {
  width: 32px;
  height: 32px;
}
.mobile-page .mobile-quotation-create-status {
  order: 7;
}
.mobile-quotation-modal {
  min-width: 360px;
  min-height: 550px;
}
.mobile-quotation-modal .quote-agree {
  flex-wrap: wrap;
}
.mobile-quotation-modal-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.mobile-page [data-mobile-quotation-panel][hidden],
.mobile-page [data-mobile-quotation-add][hidden],
.mobile-page [data-mobile-quotation-create-status][hidden],
.mobile-page [data-mobile-quotation-create-status] > button[hidden],
.mobile-page .mobile-quotation-row-status:empty,
.mobile-page .mobile-quotation-list-status:empty,
.mobile-quotation-modal [data-mobile-quotation-modal-status][hidden],
.mobile-quotation-modal [data-mobile-quotation-modal-status] > button[hidden] {
  display: none;
}

/* Index WorkOrder/WorkLot declarations bTRaV/bTRaZ/bTRaa; keep reports and
   non-index .nested grids independent. Widths are minima, not editor boxes. */
.index-production-panel {
  min-height: 20px;
  border: 2px solid #8a8a8a;
}
.index-production-panel[hidden] {
  display: none;
}
.index-workorder-list {
  min-width: 360px;
  max-width: 1400px;
  margin: 5px 0 20px auto;
  border-radius: 5px;
  background: #ebf3ff;
}
.index-lot-list,
.index-operation-list {
  margin: 5px 5px 0 40px;
}
.index-lot-list {
  background: #fdeae7;
}
.index-operation-list {
  background: #fbd0cb;
}
.index-workorder-list > .workorder-block + .workorder-block,
.index-lot-list > .lot-block + .lot-block,
.index-operation-list > .operation-block + .operation-block {
  border-top: 2px solid #8a8a8a;
}
.index-workorder-row,
.index-lot-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 40px;
  min-height: 40px;
  gap: 0;
  padding: 0;
}
.index-workorder-row > .field,
.index-lot-row > .field {
  flex: 1 1 auto;
  width: auto;
  min-height: 28px;
  margin: 5px 5px 0;
}
.index-workorder-row > button,
.index-lot-row > button {
  flex-shrink: 0;
  margin: 5px 5px 0;
}
.index-workorder-row .field input,
.index-workorder-row .field select,
.index-lot-row .field input,
.index-lot-row .field select {
  border: 2px solid #c7c7c7;
  border-radius: 4px;
  background: transparent;
  padding: 0 5px;
}
.index-workorder-row .field select,
.index-lot-row .field select {
  padding: 0 12px;
  text-align: right;
}
.index-workorder-row .field input:focus,
.index-workorder-row .field select:focus,
.index-lot-row .field input:focus,
.index-lot-row .field select:focus {
  border-color: var(--alert);
}
.index-workorder-row .field input:invalid,
.index-workorder-row .field select:invalid,
.index-order-process select:has(option:checked[value=""]) {
  border-color: var(--destructive);
}
.index-workorder-row .field-label,
.index-lot-row .field-label {
  display: none;
}
.index-workorder-row > .index-order-code {
  flex-basis: 120px;
  min-width: 120px;
}
.index-workorder-row > .index-order-process {
  flex-basis: 150px;
  min-width: 150px;
}
.index-workorder-row > .index-order-heat {
  flex-basis: 80px;
  min-width: 80px;
}
.index-workorder-row > .index-order-date {
  flex: 0 0 110px;
  min-width: 110px;
}
.index-workorder-row .index-order-date input {
  border-color: #e6e6e6;
}
.index-date-separator {
  flex: 0 0 auto;
  margin-top: 8px;
}
.index-workorder-row > .index-order-manager,
.index-lot-row > .index-lot-keeper {
  flex-basis: 120px;
  min-width: 120px;
}
.index-workorder-row > .index-order-quantity {
  flex-basis: 60px;
  min-width: 60px;
  max-width: 100px;
}
.index-lot-row > .index-lot-code {
  flex-basis: 130px;
  min-width: 130px;
}
.index-lot-created {
  flex: 0 0 135px;
  min-width: 135px;
  height: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  margin: 5px 0 0 5px;
  border: 2px solid #c7c7c7;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 16px;
  line-height: 1.4;
  white-space: nowrap;
}
.index-lot-row > .index-lot-heat {
  flex-basis: 70px;
  min-width: 70px;
}
.index-lot-quantity-label {
  flex: 0 0 auto;
  height: 24px;
  min-height: 24px;
  margin: 8px 0 0 5px;
}
.index-lot-row > .index-lot-quantity {
  flex-basis: 50px;
  min-width: 50px;
}
.index-order-heat input,
.index-order-quantity input,
.index-lot-heat input,
.index-lot-quantity input {
  text-align: right;
}
button.index-production-toggle {
  padding: 0;
  background: var(--primary);
  height: 28px;
  min-height: 28px;
}
button.index-production-toggle[aria-expanded="true"] {
  background: var(--alert);
}
button.index-order-toggle {
  width: 90px;
  min-width: 90px;
  margin: 7px 5px 0;
}
button.index-order-toggle:disabled {
  background: #525252;
  opacity: 1;
}
button.index-lot-toggle {
  width: 70px;
  min-width: 70px;
  height: auto;
}
button.index-operation-toggle {
  width: 30px;
  min-width: 30px;
  padding: 0 5px;
}
button.index-bom {
  background: var(--primary);
}
button.index-bom:disabled {
  background: #8a8a8a;
  opacity: 1;
}
.index-value-field > .index-value-display {
  position: absolute;
  inset: 2px;
  pointer-events: none;
  display: flex;
  align-items: center;
  padding: 0 5px;
  font:
    16px "Roboto Condensed",
    sans-serif;
  white-space: nowrap;
  overflow: hidden;
}
.index-lot-quantity > .index-value-display {
  justify-content: flex-end;
}
/* The same native input owns focus and its untouched raw value. Its invisible
   text is replaced only at rest; native picker layout remains browser-specific. */
.index-value-field:not(:focus-within) input {
  color: transparent;
  caret-color: transparent;
}
.index-value-field:not(:focus-within) input::-webkit-datetime-edit,
.index-value-field:not(:focus-within) input::-webkit-calendar-picker-indicator {
  opacity: 0;
}
.index-value-field:not(:focus-within) input::placeholder {
  color: transparent;
}
.index-value-field:focus-within > .index-value-display {
  visibility: hidden;
}
.index-workorder-row .index-order-overdue input,
.index-order-overdue > .index-value-display {
  background: var(--destructive);
  color: #fff;
}
.index-workorder-row .index-order-overdue:not(:focus-within) input {
  color: transparent;
}

.index-workorder-row .index-order-date input,
.index-order-date > .index-value-display {
  font:
    16px Inter,
    sans-serif;
}

.index-workorder-row > [data-action="delete"],
.index-lot-row > [data-action="delete"] {
  border-radius: 8px;
}

.index-value-field:not(:focus-within) input::-webkit-inner-spin-button {
  opacity: 0;
}

/* Index Lot operation bTRab. Source constraints, independent of routing
   definitions, Work execution and report rows. No phase-dependent styling. */
.index-lot-operation-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 20px;
  gap: 0;
  padding: 0;
}
.index-lot-operation-row > .field {
  flex: 1 1 120px;
  width: auto;
  min-width: 120px;
  min-height: 28px;
  margin: 5px 5px 0;
}
.index-lot-operation-name,
.index-lot-operation-quantity {
  display: flex;
  align-items: center;
  height: 28px;
  min-height: 28px;
  border: 2px solid #c7c7c7;
  border-radius: 4px;
  padding: 0 5px;
  font:
    16px/1.4 Inter,
    sans-serif;
  white-space: nowrap;
  overflow: hidden;
}
.index-lot-operation-name {
  flex: 1 1 120px;
  min-width: 120px;
  max-width: 200px;
  margin: 5px 0 0 5px;
}
.index-lot-operation-quantity {
  flex: 0 0 auto;
  min-width: 95px;
  margin: 5px 5px 0;
  justify-content: flex-end;
  text-align: right;
}
.index-lot-operation-row .field input,
.index-lot-operation-row .field select {
  border: 2px solid #c7c7c7;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  opacity: 1;
  padding: 0 5px;
  transition:
    border-color 200ms ease,
    color 200ms ease;
}
.index-lot-operation-row .field select {
  padding: 0 12px;
}
.index-lot-operation-row .field input:focus,
.index-lot-operation-row .field select:focus {
  border-color: var(--alert);
}
.index-lot-operation-row .field input:invalid,
.index-lot-operation-row .field select:invalid {
  border-color: var(--destructive);
}
.index-lot-operation-row .field select:has(option:checked[value=""]) {
  color: #c7c7c7;
}
.index-lot-operation-row .field input::placeholder {
  color: #c7c7c7;
  opacity: 1;
}
.index-lot-operation-operator select {
  text-align: right;
}
.index-lot-operation-row > .index-lot-operation-note {
  margin-bottom: 5px;
}
.index-lot-operation-row > button {
  flex-shrink: 0;
}
.index-lot-operation-row > .index-lot-operation-reload {
  width: 28px;
  min-width: 28px;
  height: 20px;
  min-height: 20px;
  margin: 0 10px 0 -35px;
  align-self: center;
}
/* Keep bTRay compact in its own flex slot. Overlapping the positioned note
   label lets its input intercept pointer hits on the visible arrow. */
.index-lot-operation-row > .index-lot-operation-note-open {
  width: 28px;
  min-width: 28px;
  height: 20px;
  min-height: 20px;
  margin: 0 5px 0 0;
  align-self: center;
}
.index-lot-operation-note-open[hidden] {
  display: none;
}
.index-lot-operation-note-open svg {
  width: 20px;
  height: 20px;
}
.index-lot-operation-reload svg {
  width: 20px;
  height: 20px;
}
.index-lot-operation-row > .index-lot-operation-work,
.index-lot-operation-row > .index-lot-operation-qc {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  margin: 2px 5px 0;
}
.index-lot-operation-work svg,
.index-lot-operation-qc svg {
  width: 32px;
  height: 32px;
}
.index-lot-operation-row > .index-lot-operation-qc.unavailable {
  color: #8a8a8a;
  background: transparent;
  opacity: 1;
}
.index-lot-operation-row > [data-action="delete"] {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  margin: 5px 0 0;
  border-radius: 8px;
}
.index-lot-operation-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  min-height: 200px;
}
.index-lot-operation-status:empty {
  display: none;
}
.index-lot-operation-status {
  margin: 0 5px 5px;
}
.index-lot-operation-images:empty {
  display: none;
}
.index-lot-operation-image-slot {
  display: flex;
  flex: 1 1 200px;
  min-width: 200px;
  justify-content: center;
}
.index-lot-operation-image-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 150px;
  max-width: 250px;
  min-height: 200px;
}
.index-lot-operation-image-cell img {
  width: 100%;
  min-width: 150px;
  min-height: 200px;
  border-radius: 4px;
}

/* Same-identity context selection and narrowly projected customer reports. */
.context-page {
  max-width: 980px;
  margin: 28px auto;
  padding: 24px;
  background: white;
}
.context-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.context-page h1,
.context-page h2 {
  margin-bottom: 16px;
}
.context-page p {
  margin: 12px 0;
  line-height: 1.5;
}
.access-email {
  overflow-wrap: anywhere;
}
.context-choices {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}
.context-choices li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid #b9cbd8;
  border-radius: 6px;
}
.context-choices li span,
.context-choices li small {
  display: block;
  margin-top: 5px;
}
.vendor-discovery {
  margin-top: 32px;
  border-top: 1px solid #b9cbd8;
  padding-top: 24px;
}
.vendor-discovery form {
  display: flex;
  align-items: end;
  gap: 12px;
  margin: 20px 0;
}
.vendor-discovery label,
.customer-setup-modal label,
.permanent-deletion-modal label {
  display: grid;
  gap: 6px;
}
.vendor-discovery-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.vendor-discovery-cards article {
  border: 1px solid #b9cbd8;
  padding: 16px;
  border-radius: 6px;
}
.vendor-advertisement {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.customer-setup-modal,
.permanent-deletion-modal {
  max-height: 90vh;
  overflow: auto;
  padding: 24px;
}
.customer-setup-modal {
  width: 600px;
}
.customer-setup-modal form {
  display: grid;
  gap: 12px;
}
.customer-setup-modal p,
.permanent-deletion-modal p {
  line-height: 1.5;
  margin: 12px 0;
}
.customer-setup-modal button,
.permanent-deletion-modal button {
  margin: 8px 8px 0 0;
}
.customer-setup-modal input,
.customer-setup-modal select {
  min-height: 32px;
}
.permanent-deletion-modal {
  width: 950px;
}
.deletion-warning {
  border: 2px solid #b92828;
  background: #fff1f1;
  padding: 12px;
  font-weight: 700;
}
.deletion-scope {
  border: 1px solid #bac8d2;
  padding: 16px;
  margin: 16px 0;
}
.deletion-scope li {
  padding: 6px 0;
  overflow-wrap: anywhere;
}
.deletion-scope h3 {
  margin-top: 20px;
}
.deletion-scope details {
  margin: 10px 0;
}
.deletion-scope pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 350px;
  overflow: auto;
}
.customer-progress {
  padding: 24px;
  max-width: 1350px;
  margin: auto;
}
.customer-report-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 12px 0;
}
.customer-report-fields dt {
  color: #526171;
  font-size: 13px;
}
.customer-report-fields dd {
  margin: 4px 0 0;
  white-space: pre-wrap;
}
.customer-progress-order,
.customer-progress-lot,
.customer-progress-operation {
  border: 1px solid #bccbd5;
  background: white;
  margin: 16px 0;
  padding: 16px;
}
.customer-progress-lot {
  background: #f4f8fb;
}
.customer-progress-operation h4 {
  font-size: 16px;
}
.customer-progress-operation details {
  margin: 12px 0;
}
@media print {
  .customer-progress .report-controls,
  .customer-progress button {
    display: none;
  }
}
.context-caption {
  margin: 0 12px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vendor-menu .access-email {
  display: block;
  max-width: 360px;
  padding: 8px;
  font-size: 12px;
}

/* Source bTRcr/bTRcB minima; editor rectangles are not pixel-parity evidence. */
.index-production-create {
  flex-wrap: wrap;
  justify-content: center;
}
.index-production-plus {
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  color: var(--alert);
}
.index-lot-list > .index-production-create .index-production-plus {
  margin-left: 5px;
}
.index-production-create-status {
  font-size: 12px;
  padding: 0 8px;
}
.index-production-create-status button {
  margin-left: 8px;
}
.production-working-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 40, 45, 0.6);
  color: white;
  font-size: 24px;
}
/* Commercial-only additions; other print reports keep their existing geometry. */
.shipping-modal {
  width: 840px;
  max-width: calc(100vw - 32px);
}
.shipping-identifier-note {
  font-size: 12px;
  color: #555;
  margin: 0 0 8px;
}
.shipping-number {
  width: 36px;
  text-align: center;
  padding: 3px;
}
.shipping-column-labels {
  display: grid;
  grid-template-columns: 36px 200px 70px 1fr 110px;
  gap: 8px;
  padding: 0 6px;
}
.shipping-modal .shipping-order {
  background: #fff4d7;
  border: 0;
  margin: 0 0 2px;
  padding-bottom: 3px;
}
.shipping-modal .shipping-lines {
  margin-left: 38px;
  background: #ffdf88;
  border: 1px solid #aaa;
  border-radius: 4px;
}
.shipping-modal .shipping-line {
  gap: 8px;
}
.shipping-quantity {
  width: 64px;
  min-width: 64px;
}
.shipping-line textarea {
  flex: 1;
  min-width: 90px;
  resize: vertical;
  height: 30px;
}
.shipping-line-total {
  min-width: 100px;
  text-align: right;
  padding: 4px;
  border: 1px solid #bbb;
}
.shipping-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px;
}
.shipping-addresses[hidden] {
  display: none;
}
.shipping-addresses label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.shipping-addresses textarea {
  width: 100%;
  resize: vertical;
}
.shipping-save-status:empty {
  display: none;
}
.shipping-save-status {
  font-size: 12px;
  padding: 3px 8px;
}
.shipping-save-status button {
  font-size: 12px;
  margin-left: 8px;
}
.commercial-print-status {
  max-width: 900px;
  margin: 52px auto 12px;
  padding: 12px;
  background: #fff4d7;
  border: 1px solid #bda969;
}
.commercial-print-page .print-addresses > div {
  white-space: pre-wrap;
}
.commercial-print-page .print-table td {
  overflow-wrap: anywhere;
}
.commercial-print-page .print-table th:first-child {
  width: 34px;
}
.commercial-print-page .print-table td:nth-child(2) {
  width: 280px;
}
@media print {
  .commercial-print-status {
    display: block;
    margin: 24px;
    font-size: 18px;
    border: 2px solid #333;
  }
  .commercial-print-page[data-commercial-print-state="loading"],
  .commercial-print-page[data-commercial-print-state="incomplete"] {
    display: none;
  }
}
.commercial-print-page .print-table td:nth-child(2),
.commercial-print-page .print-table td:nth-child(3) {
  white-space: pre-wrap;
}

/* Customer CNC uses a dedicated source projection; these groups never share
   editable index routing state or destination-factory entity caches. */
.customer-routing-processes {
  border: 2px solid var(--teal);
  border-radius: 5px;
  min-width: 360px;
  max-width: 95%;
  margin-left: auto;
}
.customer-routing-operations,
.customer-routing-panel {
  border: 2px solid var(--teal);
  border-radius: 5px;
  margin: 5px 5px 0 40px;
  min-width: 360px;
  max-width: 95%;
}
.customer-routing-process-row .customer-routing-operation-toggle,
.customer-routing-import-button {
  min-width: 85px;
}
.customer-routing-import-modal {
  min-width: 300px;
  width: 300px;
  min-height: 250px;
}
.customer-routing-import-modal form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.customer-routing-import-modal [name="destinationProcessId"] {
  min-width: 250px;
  min-height: 40px;
}
.customer-routing-import-modal .modal-buttons {
  display: flex;
  justify-content: space-around;
}
.customer-routing-status {
  padding: 8px;
  overflow-wrap: anywhere;
}
/* Reconstructed index_mobile PO-header Shipping, scoped to its owned popup.
   Source: bTPvv, bTPwB, bTPwT, bTQAg/bTQAm; no native-browser QA claim. */
.modal.mobile-po-shipping-modal {
  width: 800px;
  min-width: 360px;
  max-width: calc(100vw - 20px);
  min-height: 150px;
  padding: 20px 10px;
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}
.mobile-po-shipping-modal .mobile-po-shipping-orders {
  max-height: 500px;
  overflow: auto;
  margin-bottom: 20px;
}
.mobile-po-shipping-modal .mobile-po-shipping-order {
  background: #fff4db;
  border-bottom: 2px solid #fff;
}
.mobile-po-shipping-modal .mobile-po-shipping-order-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.mobile-po-shipping-modal .mobile-po-shipping-order-header > * {
  margin: 5px;
}
.mobile-po-shipping-modal button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 16px;
  line-height: 1.4;
}
.mobile-po-shipping-modal .mobile-po-shipping-order-header button {
  height: 32px;
}
.mobile-po-shipping-modal [aria-expanded="true"] {
  background: var(--alert);
}
.mobile-po-shipping-modal .mobile-po-shipping-number {
  width: 35px;
  min-height: 28px;
  padding: 0 3px;
  text-align: right;
}
.mobile-po-shipping-modal .mobile-po-shipping-status {
  min-width: 100px;
  min-height: 28px;
}
.mobile-po-shipping-modal .mobile-po-shipping-addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  gap: 10px;
  margin: 0 5px;
}
.mobile-po-shipping-modal .mobile-po-shipping-addresses textarea {
  width: 100%;
  height: 90px;
  min-height: 90px;
  padding: 0 5px;
  resize: none;
}
.mobile-po-shipping-modal textarea {
  border: 2px solid #e6e6e6;
  border-radius: 4px;
  font:
    400 16px/22.4px Inter,
    sans-serif;
}
.mobile-po-shipping-modal .mobile-po-shipping-lines {
  width: 95%;
  min-width: 300px;
  margin-left: auto;
  border: 1px solid #aaa;
  border-radius: 5px;
  background: #ffdc8a;
}
.mobile-po-shipping-modal .mobile-po-shipping-line {
  display: flex;
  align-items: center;
  min-height: 32px;
}
.mobile-po-shipping-modal .mobile-po-shipping-line > * {
  margin: 5px;
  min-height: 28px;
}
.mobile-po-shipping-modal .mobile-po-shipping-line + .mobile-po-shipping-line {
  border-top: 1px dashed #aaa;
}
.mobile-po-shipping-modal .mobile-po-shipping-line-number {
  min-width: 35px;
}
.mobile-po-shipping-modal .mobile-po-shipping-line-number,
.mobile-po-shipping-modal .mobile-po-shipping-amount {
  border: 2px solid #c7c7c7;
  border-radius: 4px;
  padding: 0 5px;
}
.mobile-po-shipping-modal .mobile-po-shipping-line select {
  min-width: 155px;
  max-width: 200px;
}
.mobile-po-shipping-modal .mobile-po-shipping-quantity {
  width: 60px;
  text-align: right;
}
.mobile-po-shipping-modal .mobile-po-shipping-note {
  min-width: 250px;
  height: 28px;
  padding: 0 5px;
  resize: vertical;
}
.mobile-po-shipping-modal .mobile-po-shipping-amount {
  min-width: 100px;
  text-align: right;
}
.mobile-po-shipping-modal .mobile-po-shipping-limit {
  margin: 0 0 10px;
  font-size: 12px;
}
.mobile-po-shipping-modal [data-mobile-po-commercial-addresses][hidden] {
  display: none;
}

/* Optional staging harness: only rendered for an active bounded QA session. */
.qa-test-menu-link {
  display: inline-block;
  padding: 6px 10px;
  color: #0c29ab;
  background: #fff;
  border: 1px solid currentColor;
  border-radius: 4px;
  text-decoration: none;
}
/* Saved workspace information. These slots never replace a production editor. */
.transactions-modal {
  width: min(650px, 94vw);
  max-height: 85vh;
  overflow: auto;
}
.transactions-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.transaction-bill {
  border-top: 1px solid #d7e0e4;
  padding: 12px 0;
}
.transaction-bill dl {
  display: grid;
  grid-template-columns: 90px 1fr;
  margin: 0;
  gap: 6px;
}
.transaction-bill dd {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.transaction-bill ul {
  margin: 10px 0 0;
  padding-left: 20px;
}
.workplace-group-entry {
  display: flex;
  align-items: center;
  gap: 4px;
}
.workplace-group-entry > .workplace-choice {
  flex: 0 0 40px;
  width: 40px;
}
.workplace-name-field {
  min-width: 0;
  flex: 1;
}
.workplace-name-field textarea {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
}
.workplace-name-field input {
  font-size: 1.25rem;
  box-sizing: border-box;
  width: 100%;
}
.workplace-name-field [readonly] {
  border-color: transparent;
  background: transparent;
  color: inherit;
  opacity: 1;
}
.workplace-save {
  font-size: 12px;
  min-height: 24px;
  padding: 2px 6px;
}
[data-workplace-status]:empty {
  display: none;
}
[data-workplace-status] {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.mobile-production-image-open {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}
.production-reference-viewer {
  position: fixed;
  z-index: 1200;
  right: 20px;
  bottom: 20px;
  max-width: min(760px, calc(100vw - 40px));
  max-height: 85vh;
  overflow: auto;
  background: white;
  color: #222;
  border: 1px solid #b9c9d0;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 8px 30px #0003;
}
.production-reference-viewer > div {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.production-reference-viewer > img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
}
@media print {
  [data-production-reference-root] {
    display: none !important;
  }
}

/* Owned Customer PO maintenance keeps ordinary row fields and routing read-only. */
[data-customer-po-maintenance] {
  padding: 4px 8px;
}
[data-customer-po-maintenance-panel] {
  border: 1px solid #8896a5;
  background: #f5f8fc;
  padding: 12px;
  margin: 6px 0;
  max-width: 960px;
}
[data-customer-po-maintenance-panel] h3 {
  margin: 0 0 6px;
}
.customer-po-maintenance-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0;
}
.customer-po-maintenance-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
}
.customer-po-maintenance-fields label:last-child {
  flex: 1;
}
[data-customer-po-maintenance-panel] input {
  padding: 6px;
}
[data-customer-po-maintenance-panel] button {
  margin: 3px;
}
[data-customer-po-maintenance-preview] {
  border: 2px solid #a92121;
  padding: 10px;
  margin-top: 10px;
}
[data-customer-po-maintenance-preview] label {
  display: block;
}
[data-customer-po-maintenance-preview] input {
  margin-left: 10px;
}
[data-customer-po-maintenance-recovery] {
  padding: 0 12px;
  color: #753500;
}

/* Separate, explicitly saved plaintext business editors. */
.modal.business-editor {
  min-width: 360px;
  width: min(760px, 92vw);
  max-width: 92vw;
  max-height: 90vh;
  overflow: auto;
}
.business-editor label {
  display: block;
  margin: 12px 0;
}
.business-editor textarea,
.business-editor input,
.business-editor select {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.business-editor textarea {
  min-height: 180px;
  white-space: pre-wrap;
}
.business-editor [data-business-target],
.business-editor [data-business-status] {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.business-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Safe quotation BBCode source editor and preview, no provider scripts. */
.quotation-note-editor { width: 100%; min-width: 0; }
.quotation-note-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.quotation-note-toolbar button { min-height: 32px; padding: 4px 10px; }
.quotation-note-source-label { display: block; }
.quotation-note-editor .quote-note { display: block; width: 100%; min-height: 130px; box-sizing: border-box; }
.quotation-note-preview-label { margin-top: 8px; font-size: 12px; }
.quotation-note-preview { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 48px; padding: 8px; border: 1px solid #888; }
.quotation-note-editor small { display: block; margin-top: 4px; }

.claim-candidates li[hidden], .claim-candidates button[hidden] { display: none; }
.claim-candidates .claim-selected { background: #dcebd7; }
.claim-candidates button { margin-right: 8px; }