/* Refined operations UI */
:root {
  --bg: #f5f7fa;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --text: #17202a;
  --muted: #667085;
  --line: #d9e1ea;
  --accent: #0b6f85;
  --accent-dark: #075466;
  --accent-soft: #e5f4f7;
  --success: #2f6b24;
  --success-soft: #edf7eb;
  --danger: #c24141;
  --danger-soft: #fff1f1;
  --warning: #8a6a00;
  --warning-soft: #fff8df;
  --badge: #eef2f7;
  --action-create-bg: #101828;
  --action-create-bg-hover: #1d2939;
  --action-create-border: #101828;
  --action-add-bg: linear-gradient(180deg, #4299f5 0%, #1673e6 100%);
  --action-add-bg-hover: linear-gradient(180deg, #2f8bf0 0%, #0d63cf 100%);
  --action-add-border: #0f62c9;
  --action-select-bg: #667085;
  --action-select-bg-hover: #475467;
  --action-select-border: #667085;
  --action-edit-bg: #0b6f85;
  --action-edit-bg-hover: #075466;
  --action-edit-border: #0b6f85;
  --action-ghost-bg: #ffffff;
  --action-ghost-bg-hover: #f8fafc;
  --action-ghost-border: #d0d5dd;
  --action-ghost-border-hover: #98a2b3;
  --action-disabled-bg: #eef2f7;
  --action-disabled-border: #d8dee8;
  --action-disabled-text: #98a2b3;
  --form-check-accent: #667085;
  --form-check-accent-hover: #475467;
  --form-check-accent-disabled: #98a2b3;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 12px 28px rgba(16, 24, 40, .08);
  --radius: 8px;
  --app-header-height: 72px;
  --trade-topbar-height: 72px;
  --database-topbar-height: 72px;
}

/* Operation_DetailSetting_Manage_PC settings cards. */
.operation-detail-settings-form {
  display: grid;
  gap: 12px;
}

.operation-detail-settings-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operation-detail-settings-card {
  border: 1px solid #d6deea;
  border-radius: 6px;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

.operation-detail-settings-card h2 {
  color: #17233a;
  font-size: 15px;
  margin: 0;
}

.operation-detail-settings-card--quality {
  align-content: start;
}

.operation-detail-checkbox,
.operation-detail-levels,
.operation-detail-settings-fields {
  display: grid;
  gap: 10px;
}

.operation-detail-checkbox {
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
}

.operation-detail-levels label,
.operation-detail-settings-fields > label,
.operation-detail-picker-field {
  display: grid;
  gap: 5px;
}

.operation-detail-levels span,
.operation-detail-settings-fields > label > span,
.operation-detail-picker-field > span,
.operation-detail-operation-id legend {
  color: #5b6980;
  font-size: 12px;
  font-weight: 700;
}

.operation-detail-levels input,
.operation-detail-settings-fields input,
.operation-detail-settings-fields select,
.operation-detail-settings-fields output {
  border: 1px solid #c8d4e4;
  border-radius: 5px;
  box-sizing: border-box;
  color: #17233a;
  font: inherit;
  min-height: 38px;
  padding: 8px 10px;
  width: 100%;
}

.operation-detail-settings-fields output {
  align-items: center;
  background: #f7f9fc;
  display: flex;
}

.operation-settings-picker {
  align-items: center;
  background: #fff;
  border: 1px solid #c8d4e4;
  border-radius: 5px;
  color: #17233a;
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: space-between;
  min-height: 38px;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.operation-settings-picker:hover,
.operation-settings-picker:focus-visible {
  border-color: #087f96;
  outline: 0;
}

.operation-settings-picker strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-detail-hint {
  color: #8a6a00;
  font-size: 12px;
  margin: 0;
}

.operation-detail-operation-id {
  border: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: 0;
  min-width: 0;
  padding: 0;
}

.operation-detail-operation-id legend {
  grid-column: 1 / -1;
  padding: 0;
}

.operation-detail-settings-card--quality:not(:has(.operation-detail-quality-toggle:checked)) .operation-detail-levels {
  display: none;
}


.operation-detail-settings-actions {
  display: flex;
  justify-content: flex-end;
}

.operation-detail-settings-actions button {
  background: #087f96;
  border: 1px solid #087f96;
  border-radius: 5px;
  color: #fff;
  font: inherit;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 18px;
}

.operation-detail-edit-dialog,
.operation-detail-choice-dialog {
  border: 1px solid #d0d9e5;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, .2);
  color: #17233a;
  margin: auto;
  max-width: min(520px, calc(100vw - 32px));
  padding: 0;
  width: 100%;
}

.operation-detail-edit-dialog::backdrop,
.operation-detail-choice-dialog::backdrop {
  background: rgba(16, 24, 40, .42);
}

.operation-detail-edit-dialog header,
.operation-detail-choice-dialog header {
  align-items: center;
  border-bottom: 1px solid #e0e7ef;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}

.operation-detail-edit-dialog header button,
.operation-detail-choice-dialog header button {
  background: #fff;
  border: 1px solid #c8d4e4;
  border-radius: 5px;
  color: #344054;
  font: inherit;
  height: 32px;
  width: 32px;
}

.operation-detail-edit-dialog > input {
  border: 1px solid #c8d4e4;
  border-radius: 5px;
  box-sizing: border-box;
  font: inherit;
  margin: 16px;
  min-height: 40px;
  padding: 8px 10px;
  width: calc(100% - 32px);
}

.operation-detail-edit-dialog footer {
  border-top: 1px solid #e0e7ef;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 16px;
}

.operation-detail-edit-dialog footer button,
.operation-detail-choice-dialog > div > button {
  background: #fff;
  border: 1px solid #c8d4e4;
  border-radius: 5px;
  color: #344054;
  font: inherit;
  min-height: 36px;
  padding: 7px 12px;
}

.operation-detail-edit-dialog footer button:last-child {
  background: #087f96;
  border-color: #087f96;
  color: #fff;
}

.operation-detail-choice-dialog > div {
  display: grid;
  gap: 6px;
  max-height: min(440px, calc(100vh - 160px));
  overflow: auto;
  padding: 12px 16px 16px;
}

.operation-detail-choice-dialog > div > button {
  text-align: left;
}

.operation-detail-choice-dialog > div > button:hover,
.operation-detail-choice-dialog > div > button:focus-visible {
  background: #eef7f8;
  border-color: #087f96;
  outline: 0;
}

@media (max-width: 760px) {
  .operation-detail-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Operation summary setting: FileMaker's report and summary sections. */
.operation-summary-setting {
  display: grid;
  gap: 24px;
  max-width: 1120px;
}

.operation-summary-setting-group {
  border-top: 1px solid #d9e1ec;
  display: grid;
  gap: 14px;
  padding-top: 14px;
}

.operation-summary-setting-group-title {
  color: #182230;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.operation-summary-setting-panel {
  display: grid;
  gap: 12px;
}

.operation-summary-setting-panel > h2 {
  color: #344054;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.operation-summary-setting-fields,
.operation-summary-setting-reference-grid {
  display: grid;
  gap: 12px 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operation-summary-setting-report-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operation-summary-setting-client-contact-row {
  display: grid;
  gap: 16px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr));
}

.operation-summary-setting-supplier-panel {
  position: relative;
}

.operation-summary-setting-supplier-panel::before {
  background: #d9e1ec;
  content: "";
  inset: 28px auto 0 0;
  position: absolute;
  width: 1px;
}

.operation-summary-setting-supplier-panel > .operation-summary-setting-reference-grid,
.operation-summary-setting-supplier-panel > .operation-summary-setting-supplier-contact-row {
  padding-left: 12px;
}

.operation-summary-setting-sales-row {
  display: grid;
  gap: 16px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.operation-summary-setting-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.operation-summary-setting-input-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.operation-summary-setting-field > span {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.operation-summary-setting-field input,
.operation-summary-setting-field select,
.operation-summary-setting-field textarea {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-sizing: border-box;
  color: #182230;
  font: inherit;
  min-height: 40px;
  padding: 8px 10px;
  width: 100%;
}

.operation-summary-setting-field--full {
  grid-column: 1 / -1;
}

.operation-summary-setting-reference-select-value {
  align-items: center;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-sizing: border-box;
  color: #182230;
  display: flex;
  font-size: inherit;
  min-height: 40px;
  padding: 8px 10px;
}

.operation-acceptance-combobox {
  position: relative;
}

.operation-acceptance-combobox input {
  padding-right: 42px;
}

.operation-acceptance-combobox-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 40px;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
}

.operation-acceptance-combobox-toggle::before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #182230;
  content: "";
  left: 15px;
  position: absolute;
  top: 17px;
}

.operation-acceptance-combobox-options {
  background: #fff;
  border: 1px solid #d6e0ec;
  border-radius: 6px;
  box-shadow: 0 10px 20px rgba(24, 34, 48, 0.16);
  display: grid;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
}

.operation-acceptance-combobox-options[hidden] {
  display: none;
}

.operation-acceptance-combobox-options button {
  background: #fff;
  border: 0;
  color: #182230;
  cursor: pointer;
  display: block;
  font: inherit;
  min-height: 40px;
  padding: 8px 10px;
  text-align: left;
}

.operation-acceptance-combobox-options button:hover,
.operation-acceptance-combobox-options button:focus-visible {
  background: #eef4ff;
  outline: 0;
}

.operation-summary-setting-select-button {
  min-height: 40px;
}

.operation-client-account-list,
.operation-client-department-list {
  display: grid;
  gap: 8px;
}

.operation-client-account-card,
.operation-client-department-card {
  align-items: center;
  border: 1px solid #d6e0ec;
  border-radius: 6px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 62px;
  padding: 10px 12px;
}

.operation-client-account-card.is-filtered-out {
  display: none !important;
}

.operation-client-department-card[hidden] {
  display: none;
}

.operation-client-account-card-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.operation-client-account-card-title {
  align-items: center;
  display: flex;
  gap: 6px;
  min-width: 0;
}

.operation-client-account-card-main strong {
  color: #182230;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.operation-client-account-detail-button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #98a2b3;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  height: 24px;
  justify-content: center;
  line-height: 1;
  min-height: 24px;
  min-width: 24px;
  padding: 0;
  width: 24px;
}

.operation-client-account-detail-button:hover,
.operation-client-account-detail-button:focus-visible {
  background: #f2f4f7;
  color: #344054;
  outline: none;
}

.operation-client-account-detail-dialog::backdrop {
  background: rgba(15, 23, 42, .12);
}

.operation-client-account-detail-dialog:not([open]) {
  display: none !important;
}

.company-account-detail-dialog:not([open]) {
  display: none !important;
}

.operation-client-account-detail-department form {
  display: block;
}

.operation-client-account-detail-department select {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  height: 32px;
  min-width: 0;
  padding: 0 9px;
  width: 100%;
}

.operation-client-account-card-main span {
  color: #667085;
  font-size: 13px;
  line-height: 1.45;
}

.operation-client-account-card .floating-selection-button {
  min-width: 72px;
}

.operation-client-department-card .floating-selection-button {
  min-width: 72px;
}

.operation-client-department-card strong {
  color: #182230;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
}

.operation-client-department-empty {
  color: #667085;
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  padding: 14px;
  text-align: center;
}

.operation-client-account-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  color: #667085;
  font-size: 13px;
  margin: 0;
  padding: 14px;
  text-align: center;
}

.operation-summary-setting-field.is-reference {
  align-content: start;
  border-left: 2px solid #e2e8f0;
  gap: 3px;
  padding-left: 10px;
}

.operation-summary-setting-supplier-panel .operation-summary-setting-field.is-reference {
  border-left: 0;
  padding-left: 0;
}

.operation-summary-setting-field.is-reference strong {
  color: #182230;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.operation-summary-setting-panel:has([data-operation-company-display]):has([data-operation-supplier-address-1-display]) {
  position: relative;
}

.operation-summary-setting-panel:has([data-operation-company-display]):has([data-operation-supplier-address-1-display])::before {
  background: #d9e1ec;
  content: "";
  inset: 28px auto 0 0;
  position: absolute;
  width: 1px;
}

.operation-summary-setting-panel:has([data-operation-company-display]):has([data-operation-supplier-address-1-display]) > .operation-summary-setting-reference-grid,
.operation-summary-setting-panel:has([data-operation-company-display]):has([data-operation-supplier-address-1-display]) > .operation-summary-setting-client-contact-row {
  padding-left: 12px;
}

.operation-summary-setting-panel:has([data-operation-company-display]):has([data-operation-supplier-address-1-display]) .operation-summary-setting-field.is-reference {
  border-left: 0 !important;
  padding-left: 0 !important;
}

.operation-summary-setting-company-name-en {
  color: #98a2b3;
  font-size: 12px;
  line-height: 1.4;
}

.operation-summary-setting-party-reference-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(140px, .55fr);
}

.operation-summary-setting-party-reference-grid strong,
.operation-summary-setting-party-reference-grid small {
  overflow-wrap: anywhere;
}

.operation-summary-setting-supplier-panel {
  position: relative !important;
}

.operation-summary-setting-supplier-panel::before,
.operation-summary-setting-supplier-line {
  background: #d9e1ec !important;
  bottom: 0 !important;
  content: "" !important;
  left: 0 !important;
  position: absolute !important;
  top: 28px !important;
  width: 1px !important;
}

.operation-summary-setting-supplier-panel > .operation-summary-setting-reference-grid,
.operation-summary-setting-supplier-panel > .operation-summary-setting-supplier-contact-row {
  padding-left: 12px !important;
}

.operation-summary-setting-supplier-panel .operation-summary-setting-field.is-reference {
  border-left: 0 !important;
  padding-left: 0 !important;
}

.operation-summary-setting-supplier-contact-row {
  border-left: 1px solid #d9e1ec !important;
  padding-left: 12px !important;
  position: relative;
}

.operation-summary-setting-supplier-contact-row::before {
  background: #d9e1ec;
  content: "";
  height: 12px;
  left: -1px;
  position: absolute;
  top: -12px;
  width: 1px;
}

.operation-summary-setting-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .operation-summary-setting-fields,
  .operation-summary-setting-report-fields,
  .operation-summary-setting-client-contact-row,
  .operation-summary-setting-sales-row,
  .operation-summary-setting-reference-grid,
  .operation-summary-setting-party-reference-grid {
    grid-template-columns: 1fr;
  }
}

.operation-item-total-items {
  display: contents;
}

/* Inspection totals are one navigation target.  The three figures remain
   separate for scanning, without looking like three individual text links. */
.operation-item-total-substeps--single-action {
  color: inherit;
  text-decoration: none;
}

.operation-item-total-substeps--single-action .operation-item-total-value {
  text-decoration: none;
}

.operation-item-total-substeps--single-action:hover {
  background: #f2f4f7;
  color: inherit;
}

.operation-item-total-group.is-active .operation-item-total-substeps--single-action:hover {
  background: #d0d5dd;
}

/* On desktop, each process group owns one horizontal row of substeps.
   The wrapper stays flattened so its links become direct grid children. */
@media (min-width: 681px) {
  .operation-item-total-board .operation-item-total-group {
    grid-auto-flow: row;
    grid-auto-rows: minmax(40px, 1fr);
  }

  .operation-item-total-board .operation-item-total-group--size-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operation-item-total-board .operation-item-total-group--size-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .operation-item-total-board .operation-item-total-group h2 {
    grid-column: 1 / -1;
  }

  .operation-item-total-board .operation-item-total-items {
    display: contents !important;
  }

  .operation-item-total-board .operation-item-total-group:not(.operation-item-total-group--statistics) .operation-item-total-value {
    border-bottom: 0;
    border-right: 1px solid #eef2f6;
  }

  .operation-item-total-board .operation-item-total-group:not(.operation-item-total-group--statistics) .operation-item-total-value:last-child {
    border-right: 0;
  }

  .operation-item-total-board .operation-item-total-substeps {
    display: grid;
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-width: 0;
    width: 100%;
  }

  .operation-item-total-board .operation-item-total-group--size-2 > .operation-item-total-substeps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .operation-item-total-board .operation-item-total-group--size-3 > .operation-item-total-substeps {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .operation-item-total-board .operation-item-total-substeps .operation-item-total-value {
    border-bottom: 0;
    border-right: 1px solid #eef2f6;
  }

  .operation-item-total-board .operation-item-total-substeps .operation-item-total-value:last-child {
    border-right: 0;
  }
}

/* Phone widths keep the substeps legible by stacking within their own group. */
@media (max-width: 680px) {
  .operation-item-total-board .operation-item-total-substeps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .operation-item-total-board .operation-item-total-substeps .operation-item-total-value {
    border-bottom: 1px solid #eef2f6;
    border-right: 0;
  }
}

/* Process substeps stay in one horizontal row on desktop and tablet.
   The stacked view is reserved for phone widths. */
@media (max-width: 680px) {
  .operation-item-total-board .operation-item-total-group--stacked-mobile {
    display: block !important;
  }

  .operation-item-total-board .operation-item-total-items--stacked-mobile {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .operation-item-total-board .operation-item-total-items--stacked-mobile .operation-item-total-value {
    border-bottom: 1px solid #eef2f6 !important;
    border-right: 0 !important;
    box-sizing: border-box !important;
    min-height: 46px !important;
    width: 100% !important;
  }

  .operation-item-total-board .operation-item-total-items--stacked-mobile .operation-item-total-value:last-child {
    border-bottom: 0 !important;
  }
}

@media (max-width: 680px) {
  .operation-item-total-board {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    margin-bottom: 5px !important;
    margin-top: 5px !important;
  }

  .operation-item-total-board .operation-item-total-group {
    border-bottom: 1px solid #d9e1ec !important;
    border-right: 1px solid #d9e1ec !important;
    grid-column: auto !important;
  }

  .operation-item-total-board .operation-item-total-group:nth-child(7n) {
    border-right: 0 !important;
  }

  .operation-item-total-board .operation-item-total-group h2 {
    font-size: 10px !important;
    line-height: 1.1 !important;
    padding: 3px 2px 2px !important;
  }

  .operation-item-total-board .operation-item-total-items--stacked-mobile .operation-item-total-value {
    gap: 0 !important;
    min-height: 34px !important;
    padding: 2px 1px 3px !important;
  }

  .operation-item-total-board .operation-item-total-value span {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  .operation-item-total-board .operation-item-total-value strong {
    font-size: 13px !important;
  }

  .operation-standard-portal tbody tr {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .operation-standard-portal .operation-standard-product-cell {
    grid-column: 1 / 5 !important;
  }

  .operation-standard-portal .operation-reportonly-picture-cell--defective {
    grid-column: 5 !important;
  }

  .operation-standard-portal .operation-reportonly-picture-cell--product {
    grid-column: 6 !important;
  }

  .operation-standard-portal tbody td:nth-child(n + 2):nth-child(-n + 15) {
    min-height: 33px !important;
    padding: 2px 1px 3px !important;
  }

  .operation-standard-portal tbody td[data-mobile-group]::after {
    color: #475467;
    content: attr(data-mobile-group);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    order: -2;
    text-align: center;
  }

  .operation-standard-portal tbody td[data-responsive-label]::before {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  .operation-standard-portal tbody td[data-mobile-group]::before {
    display: none;
  }

  .operation-standard-portal tbody td.operation-standard-cell--defect-initial::before {
    display: block;
  }

  .operation-standard-portal tbody td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .operation-standard-portal tbody td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .operation-standard-portal tbody td:nth-child(4) { grid-column: 2; grid-row: 3; }
  .operation-standard-portal tbody td:nth-child(5) { grid-column: 2; grid-row: 4; }
  .operation-standard-portal tbody td:nth-child(6) { grid-column: 3; grid-row: 2; }
  .operation-standard-portal tbody td:nth-child(7) { grid-column: 3; grid-row: 3; }
  .operation-standard-portal tbody td:nth-child(8) { grid-column: 3; grid-row: 4; }
  .operation-standard-portal tbody td:nth-child(9) { grid-column: 4; grid-row: 2; }
  .operation-standard-portal tbody td:nth-child(10) { grid-column: 4; grid-row: 3; }
  .operation-standard-portal tbody td:nth-child(11) { grid-column: 5; grid-row: 2; }
  .operation-standard-portal tbody td:nth-child(12) { grid-column: 5; grid-row: 3; }
  .operation-standard-portal tbody td:nth-child(13) { grid-column: 5; grid-row: 4; }
  .operation-standard-portal tbody td:nth-child(14) { grid-column: 6; grid-row: 2; }
  .operation-standard-portal tbody td:nth-child(15) { grid-column: 6; grid-row: 3; }
}

/* The standard operation table switches to cards at 1100px, so its process grid
   must use the same breakpoint rather than waiting for the narrower phone rule. */
@media (max-width: 1100px) {
  .operation-item-total-board {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .operation-item-total-board .operation-item-total-group {
    border-bottom: 1px solid #d9e1ec !important;
    border-right: 1px solid #d9e1ec !important;
    grid-column: auto !important;
  }

  .operation-item-total-board .operation-item-total-group:nth-child(7n) {
    border-right: 0 !important;
  }

  .operation-standard-portal tbody tr {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .operation-standard-portal .operation-standard-product-cell {
    grid-column: 1 / 5 !important;
  }

  .operation-standard-portal .operation-reportonly-picture-cell--defective {
    grid-column: 5 !important;
  }

  .operation-standard-portal .operation-reportonly-picture-cell--product {
    grid-column: 6 !important;
  }

  .operation-standard-portal tbody td:nth-child(n + 2):nth-child(-n + 15) {
    min-height: 33px !important;
    padding: 2px 1px 3px !important;
  }

  .operation-standard-portal tbody td[data-mobile-group]::after {
    color: #475467;
    content: attr(data-mobile-group);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    order: -2;
    text-align: center;
  }

  .operation-standard-portal tbody td[data-responsive-label]::before {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  .operation-standard-portal tbody td[data-mobile-group]::before {
    display: none;
  }

  .operation-standard-portal tbody td.operation-standard-cell--defect-initial::before {
    display: block;
  }

  .operation-standard-portal tbody td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .operation-standard-portal tbody td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .operation-standard-portal tbody td:nth-child(4) { grid-column: 2; grid-row: 3; }
  .operation-standard-portal tbody td:nth-child(5) { grid-column: 2; grid-row: 4; }
  .operation-standard-portal tbody td:nth-child(6) { grid-column: 3; grid-row: 2; }
  .operation-standard-portal tbody td:nth-child(7) { grid-column: 3; grid-row: 3; }
  .operation-standard-portal tbody td:nth-child(8) { grid-column: 3; grid-row: 4; }
  .operation-standard-portal tbody td:nth-child(9) { grid-column: 4; grid-row: 2; }
  .operation-standard-portal tbody td:nth-child(10) { grid-column: 4; grid-row: 3; }
  .operation-standard-portal tbody td:nth-child(11) { grid-column: 5; grid-row: 2; }
  .operation-standard-portal tbody td:nth-child(12) { grid-column: 5; grid-row: 3; }
  .operation-standard-portal tbody td:nth-child(13) { grid-column: 5; grid-row: 4; }
  .operation-standard-portal tbody td:nth-child(14) { grid-column: 6; grid-row: 2; }
  .operation-standard-portal tbody td:nth-child(15) { grid-column: 6; grid-row: 3; }
}

/* Desktop and tablet: give each process group the width of its child steps.
   A three-step process therefore receives three columns, preventing vertical labels. */
@media (min-width: 681px) {
  .operation-item-total-board {
    grid-template-columns: repeat(var(--operation-item-total-slot-count, 7), minmax(0, 1fr)) !important;
  }

  .operation-item-total-board > .operation-item-total-group--size-1 {
    grid-column: span 1 !important;
  }

  .operation-item-total-board > .operation-item-total-group--size-2 {
    grid-column: span 2 !important;
  }

  .operation-item-total-board > .operation-item-total-group--size-3 {
    grid-column: span 3 !important;
  }
}

/* Keep the inspection, good and defective totals as one control.  No child
   may look or behave like an independent text link. */
.operation-item-total-board .operation-item-total-substeps--single-action {
  border-radius: 6px;
  color: inherit !important;
  cursor: pointer;
  text-decoration: none !important;
}

.operation-item-total-board .operation-item-total-substeps--single-action,
.operation-item-total-board .operation-item-total-substeps--single-action:hover,
.operation-item-total-board .operation-item-total-substeps--single-action .operation-item-total-value,
.operation-item-total-board .operation-item-total-substeps--single-action .operation-item-total-value span,
.operation-item-total-board .operation-item-total-substeps--single-action .operation-item-total-value strong {
  text-decoration: none !important;
}

.operation-item-total-board .operation-item-total-substeps--single-action .operation-item-total-value {
  border-bottom: 0 !important;
  border-right: 0 !important;
  pointer-events: none;
}

/* The heading belongs to the same hit area as its totals. */
.operation-item-total-board .operation-item-total-card {
  color: inherit !important;
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  text-decoration: none !important;
  width: 100%;
}

.operation-item-total-board .operation-item-total-card > h2 {
  text-decoration: none !important;
}

/* Shared tab treatment for the process summary. */
.operation-item-total-board.tabs.operation-item-total-tabs {
  background: #edf2f7;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  gap: 3px;
  padding: 4px;
}

.operation-item-total-board.tabs.operation-item-total-tabs > .operation-item-total-group {
  border: 0 !important;
}

.operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-card {
  border-radius: 6px;
  grid-template-rows: 34px minmax(0, 1fr);
  min-height: 52px;
  padding: 0;
  position: relative;
}

/* Process names lead each tab.  The subordinate labels and totals remain
   visually quieter at every viewport width. */
.operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-card > h2 {
  align-items: center;
  box-sizing: border-box;
  color: #344054;
  display: flex;
  font-size: 12px;
  height: 34px;
  justify-content: center;
  line-height: 1.15;
  padding: 2px 4px;
}

.operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-value,
.operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-value span,
.operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-value strong {
  color: #667085 !important;
}

.operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-value strong {
  font-size: 11px;
}

.operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-card::after {
  background: #d0d5dd;
  content: "";
  height: 2px;
  left: 3px;
  position: absolute;
  right: 3px;
  top: 33px;
}

.operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-group.is-active .operation-item-total-card::after {
  background: #2f80ed;
}

.operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-card:hover {
  background: #fff;
  color: var(--accent-dark) !important;
}

.operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-group.is-active,
.operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-group.is-active .operation-item-total-value,
.operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-group.is-active h2 {
  background: transparent;
}

.operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-group.is-active .operation-item-total-card {
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-group.is-active .operation-item-total-card:hover {
  background: #fff;
}

@media (min-width: 681px) {
  /* A process is one standard tab.  Its width follows the number of totals
     it contains so the process tabs stay in the 1:1:3:3:2:3:2 proportion. */
  .operation-item-total-board.tabs.operation-item-total-tabs {
    grid-template-columns: repeat(var(--operation-item-total-slot-count, 15), minmax(48px, 1fr)) !important;
  }

  .operation-item-total-board.tabs.operation-item-total-tabs > .operation-item-total-group--size-1 {
    grid-column: span 1 !important;
  }

  .operation-item-total-board.tabs.operation-item-total-tabs > .operation-item-total-group--size-2 {
    grid-column: span 2 !important;
  }

  .operation-item-total-board.tabs.operation-item-total-tabs > .operation-item-total-group--size-3 {
    grid-column: span 3 !important;
  }

  .operation-item-total-board .operation-item-total-group--size-2 > .operation-item-total-card > .operation-item-total-substeps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .operation-item-total-board .operation-item-total-group--size-3 > .operation-item-total-card > .operation-item-total-substeps {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

html {
  background: var(--bg);
  scrollbar-gutter: stable;
}

html:has(.trade-top-shell) {
  scrollbar-gutter: auto;
}

body {
  background: radial-gradient(circle at top left, #edf7fa 0, transparent 360px), var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
}

a {
  color: var(--accent-dark);
  text-underline-offset: 3px;
}

input[type="checkbox"] {
  accent-color: var(--form-check-accent);
}

input[type="checkbox"]:hover {
  accent-color: var(--form-check-accent-hover);
}

input[type="checkbox"]:disabled {
  accent-color: var(--form-check-accent-disabled);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--accent-dark);
  box-shadow: var(--shadow-md);
}

.skip-link:focus {
  top: 12px;
}

.app-header {
  box-sizing: border-box;
  height: var(--app-header-height);
  position: sticky;
  top: 0;
  z-index: 300;
  min-height: 0;
  padding: 10px clamp(16px, 3vw, 32px);
  color: var(--text);
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .03);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px rgb(14 165 233 / 24%);
}

.brand-copy {
  display: grid;
  line-height: 1.05;
}

.brand-copy strong {
  font-size: 14px;
  letter-spacing: .08em;
}

.brand-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .02em;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.top-nav a {
  color: #344054;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.top-nav a:hover {
  background: #f0f4f8;
  color: var(--accent-dark);
  text-decoration: none;
}

.nav-pill-button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  justify-content: center;
  min-height: 50px;
  min-width: 64px;
  position: relative;
}

.top-nav a.nav-pill-button {
  padding: 0 18px;
}

.nav-pill-button[aria-disabled="true"] {
  cursor: default;
}

.nav-logout-form {
  display: inline-flex;
  margin: 0;
}

.language-menu {
  display: inline-flex;
  position: relative;
}

.nav-icon-button,
.language-menu-button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: inline-flex;
  height: 50px;
  justify-content: center;
  list-style: none;
  width: 50px;
}

.nav-icon-button {
  color: var(--text);
  line-height: 1;
}

.nav-logout-button {
  color: var(--text);
  line-height: 1;
  padding: 0;
}

.nav-icon-svg {
  display: block;
  fill: none;
  height: 40px;
  stroke: #111827;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 40px;
}

.language-menu-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 2px;
  min-width: 132px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 310;
}

.language-menu-panel[hidden] {
  display: none !important;
}

.language-menu-panel a {
  border-radius: 6px;
  color: var(--text);
  display: block;
  padding: 8px 10px;
}

.page {
  width: min(1220px, calc(100% - 32px));
  max-width: none;
  padding: 28px 0 64px;
}

.page:has(.home-shell) {
  align-content: start;
  background: #f8fafc;
  display: block;
  max-width: none;
  min-height: calc(100vh - var(--app-header-height));
  overflow: visible;
  padding: 0;
  width: 100%;
}

.page:has(.personal-settings-shell) {
  align-content: start;
  min-height: calc(100vh - var(--app-header-height));
  padding-top: calc(var(--app-header-height) + 28px);
}

body.personal-settings-page .app-header,
body:has(.personal-settings-shell) .app-header {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
}

body.personal-initial-flow-page {
  --app-header-height: 72px;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.personal-initial-flow-page .app-header {
  bottom: auto !important;
  height: var(--app-header-height) !important;
  margin: 0 !important;
  min-height: var(--app-header-height) !important;
  position: static !important;
  transform: none !important;
  width: 100% !important;
  z-index: 300 !important;
}

body.personal-initial-flow-page .app-header .top-nav {
  display: none !important;
}

body.personal-initial-flow-page .app-header .brand {
  pointer-events: none;
}

body.personal-initial-flow-page .page {
  display: block !important;
  margin: 0 auto !important;
  max-width: 1120px !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 28px 16px 64px !important;
  position: static !important;
  width: min(100%, 1120px) !important;
}

body.personal-initial-flow-page .personal-settings-shell {
  align-content: start !important;
  display: grid !important;
  gap: 0 !important;
  justify-items: center !important;
  margin: 0 auto !important;
  max-width: 1120px !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  width: 100% !important;
  z-index: auto !important;
}

body.personal-initial-flow-page .personal-initial-flow-panel {
  max-height: none;
  overflow-y: visible;
  width: min(560px, calc(100vw - 32px));
}

h1,
h2,
h3 {
  color: var(--text);
  letter-spacing: 0;
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.18;
}

h2 {
  margin: 28px 0 14px;
  font-size: 22px;
}

h3 {
  margin: 20px 0 10px;
  font-size: 17px;
}

p {
  color: #344054;
}

.hero,
.page-hero {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff, #f8fbfc);
  box-shadow: var(--shadow-sm);
}

.hero-actions,
.actions,
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.card,
.section-card,
.panel,
.form-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.card,
.section-card,
.form-panel {
  padding: 18px;
}

.grid,
.card-grid {
  display: grid;
  gap: 14px;
}

.mu-card-list {
  box-sizing: border-box;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.mu-card {
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  width: 100%;
}

.mu-click-card {
  cursor: pointer;
}

.mu-card:hover {
  border-color: #c8d2df;
  box-shadow: var(--shadow-md);
}

.mu-click-card:hover {
  transform: translateY(-1px);
}

.mu-card-overlay {
  border-radius: inherit;
  bottom: 0;
  cursor: pointer;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  text-decoration: none;
  top: 0;
  z-index: 1;
}

.mu-card-overlay:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .28);
  outline-offset: 3px;
}

.mu-card-main {
  min-width: 0;
}

.mu-card-content {
  pointer-events: none;
  position: relative;
  z-index: 2;
}

.mu-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  position: relative;
  z-index: 3;
}

.mu-card :is(a:not(.mu-card-overlay), button, input, select, textarea, summary, [role="button"]),
.mu-card-interactive,
.mu-card .mu-card {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

.list,
.record-list {
  display: grid;
  gap: 10px;
}

.list-row,
.record-row,
.workplace-row,
.trade-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.list-row:hover,
.record-row:hover,
.workplace-row:hover,
.trade-row:hover {
  border-color: #b8c6d8;
  box-shadow: 0 8px 18px rgba(16, 24, 40, .07);
}

.tabs,
.segmented {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #edf2f7;
}

.tabs a,
.tabs button,
.segmented a,
.segmented button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #344054;
  padding: 9px 14px;
  font-weight: 700;
  text-decoration: none;
}

.tabs .active,
.tabs [aria-current="page"],
.segmented .active,
.segmented [aria-pressed="true"] {
  background: #fff;
  color: var(--accent-dark);
  box-shadow: var(--shadow-sm);
}

.button,
.btn,
button,
input[type="submit"] {
  min-height: 38px;
  border: 1px solid #b8c6d8;
  border-radius: var(--radius);
  background: #fff;
  color: #243447;
  padding: 8px 13px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.button:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.button-primary,
.btn-primary,
.primary,
button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.button-primary:hover,
.btn-primary:hover,
.primary:hover,
button.primary:hover {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
  color: #fff;
}

.button-secondary,
.btn-secondary,
.secondary {
  background: var(--panel-soft);
}

.danger,
.button-danger {
  border-color: #e4a3a3;
  background: var(--danger-soft);
  color: var(--danger);
}

.badge,
.status,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--badge);
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.badge-success,
.status-connected {
  border-color: #bbdfb6;
  background: var(--success-soft);
  color: var(--success);
}

.badge-warning {
  border-color: #eadc9d;
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-danger {
  border-color: #efb4b4;
  background: var(--danger-soft);
  color: var(--danger);
}

.entity-kind,
.entity-kind--database,
.entity-kind--workplace,
.entity-kind--connection,
.entity-kind--trade,
.entity-kind--permission {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.entity-kind--database {
  background: #eaf3ff;
  color: #1d4f8f;
}

.entity-kind--workplace {
  background: #e5f4f7;
  color: #075466;
}

.entity-kind--connection {
  background: #edf7eb;
  color: #2f6b24;
}

.entity-kind--trade {
    background: #eef2ff;
    color: #354c8c;
}

.entity-kind--permission {
  background: #fff1f1;
  color: #9f3030;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

th,
td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  background: #f0f4f8;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

tr:last-child td {
  border-bottom: 0;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #b8c6d8;
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  padding: 9px 11px;
  font: inherit;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(11, 111, 133, .16);
  border-color: var(--accent);
}

label {
  display: inline-block;
  margin-bottom: 6px;
  color: #344054;
  font-size: 13px;
  font-weight: 750;
}

.helptext,
.muted,
.caption {
  color: var(--muted);
  font-size: 13px;
}

.empty-state,
.empty {
  display: grid;
  gap: 8px;
  place-items: center;
  min-height: 180px;
  padding: 28px;
  border: 1px dashed #b8c6d8;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .7);
  color: var(--muted);
  text-align: center;
}

.calendar-shell,
.day-shell {
  display: grid;
  gap: 18px;
}

.calendar-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.calendar-header h1 {
  margin-bottom: 6px;
}

.calendar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.calendar-actions strong {
  min-width: 104px;
  text-align: center;
}

.calendar-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.calendar-summary div {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.calendar-summary span,
.calendar-day .day-empty,
.operation-main span,
.operation-main small,
.operation-grid span,
.operation-grid small {
  color: var(--muted);
  font-size: 12px;
}

.calendar-summary strong {
  font-size: 22px;
  line-height: 1;
}

.calendar-weekdays,
.operation-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
  gap: 1px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.calendar-weekdays span {
  padding: 8px;
}

.operation-calendar {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  gap: 1px;
  box-shadow: var(--shadow-sm);
}

.calendar-day {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 128px;
  padding: 10px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
}

.calendar-day:hover {
  background: #f8fbfc;
  color: var(--text);
  text-decoration: none;
}

.calendar-day.is-muted {
  background: #f4f7fa;
  color: var(--muted);
}

.day-number {
  font-size: 15px;
  font-weight: 800;
}

.day-count,
.day-metric {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.day-count {
  background: #eaf3ff;
  color: #1d4f8f;
}

.day-metric.plan {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.day-metric.actual {
  background: var(--success-soft);
  color: var(--success);
}

.operation-detail-list {
  display: grid;
  gap: 10px;
}

.operation-detail-row {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(0, 1.6fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.operation-main,
.operation-grid div {
  display: grid;
  gap: 4px;
}

.operation-main strong {
  font-size: 17px;
}

.operation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.operation-grid div {
  min-height: 74px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.operation-grid strong {
  font-size: 18px;
}

.is-negative {
  color: var(--danger) !important;
}

.is-positive {
  color: var(--success) !important;
}

.checklist-default-shell {
  gap: 18px;
}

.checklist-picker {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.checklist-picker-head,
.checklist-group-row {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.2fr) 96px 78px;
  gap: 6px;
  align-items: stretch;
}

.checklist-picker-head {
  padding: 12px 14px 8px;
  color: #111;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.checklist-group-list {
  display: grid;
  gap: 10px;
  max-height: 680px;
  overflow: auto;
  padding: 0 8px 18px;
}

.checklist-group-row {
  cursor: pointer;
}

.checklist-group-row > span {
  min-height: 64px;
  border: 2px solid #111;
  border-radius: 4px;
  background: #e5e5e5;
}

.checklist-group-row.is-selected > span {
  background: #d8f0f5;
}

.checklist-group-name,
.checklist-item-preview,
.checklist-select-box {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px;
  text-align: center;
}

.checklist-group-name strong {
  font-size: 14px;
}

.checklist-group-name small,
.checklist-item-preview small {
  color: var(--muted);
  font-size: 12px;
}

.checklist-item-preview {
  align-content: start;
  text-align: left;
}

.checklist-item-preview em {
  display: block;
  overflow: hidden;
  color: #111;
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checklist-open-box,
.checklist-select-box {
  place-items: center;
}

.checklist-select-box input {
  width: 28px;
  min-height: 28px;
  padding: 0;
}

.checklist-group-edit,
.checklist-add-tile {
  display: grid;
  align-items: center;
  gap: 6px;
}

.checklist-group-edit {
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
}

.checklist-group-edit label {
  display: grid;
  gap: 2px;
  margin: 0;
  color: #111;
}

.checklist-group-edit span {
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.checklist-add-tile {
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 1fr) repeat(4, 44px) auto;
}

.checklist-add-tile input[type="text"],
.checklist-add-tile textarea,
.checklist-group-edit input {
  min-height: 32px;
  border: 2px solid #111;
  border-radius: 4px;
  background: #f2f2f2;
}

.checklist-add-tile label {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 32px;
  margin: 0;
  border: 1px solid #111;
  border-radius: 4px;
  background: #f2f2f2;
  color: #111;
  font-size: 11px;
}

.checklist-add-tile input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  padding: 0;
}

.checklist-edit-shell {
  gap: 18px;
}

.checklist-item-editor {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.checklist-item-head,
.checklist-item-row {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(180px, .7fr) minmax(170px, .55fr) minmax(140px, .45fr);
  gap: 6px;
  align-items: stretch;
}

.checklist-item-head {
  padding: 8px 14px;
  color: #111;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.checklist-item-list {
  display: grid;
  gap: 10px;
  max-height: 700px;
  overflow: auto;
  padding: 0 8px 18px;
}

.checklist-item-row input[type="text"],
.checklist-item-row textarea {
  min-height: 56px;
  border: 2px solid #111;
  border-radius: 4px;
  background: #e5e5e5;
}

.checklist-flags,
.checklist-row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 2px solid #111;
  border-radius: 4px;
  background: #e5e5e5;
}

.checklist-row-actions {
  grid-template-columns: 1fr;
}

.checklist-flags label,
.delete-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  color: #111;
  font-size: 11px;
}

.checklist-flags input,
.delete-check input {
  width: 18px;
  min-height: 18px;
  padding: 0;
}

.auto-check-shell {
  gap: 18px;
}

.auto-check-add {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(150px, 1fr) minmax(150px, 1fr) repeat(5, 48px) auto;
  gap: 6px;
  align-items: center;
}

.auto-check-add.product-target {
  grid-template-columns: minmax(100px, .65fr) minmax(110px, .65fr) minmax(120px, .75fr) minmax(150px, .9fr) minmax(150px, 1fr) minmax(150px, 1fr) repeat(5, 42px) auto auto;
}

.auto-check-add select,
.auto-check-add input[type="text"],
.auto-check-row select,
.auto-check-row input[type="text"],
.auto-check-row textarea {
  min-height: 34px;
  border: 2px solid #111;
  border-radius: 4px;
  background: #f2f2f2;
}

.auto-check-add label {
  display: grid;
  place-items: center;
  min-height: 34px;
  margin: 0;
  border: 1px solid #111;
  border-radius: 4px;
  background: #f2f2f2;
  color: #111;
  font-size: 11px;
}

.auto-check-add input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  padding: 0;
}

.auto-check-layout {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  min-height: 640px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.auto-check-side {
  display: grid;
  align-content: start;
  border-right: 1px solid var(--line);
  background: #fbfbfb;
}

.auto-check-side a {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid #111;
  border-left: 0;
  border-top: 0;
  color: #111;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.auto-check-side a.active {
  background: #e5e5e5;
  font-weight: 900;
}

.auto-check-list {
  overflow: hidden;
}

.auto-check-head,
.auto-check-row {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(150px, .8fr) minmax(220px, 1fr) minmax(180px, .75fr) minmax(130px, .45fr);
  gap: 6px;
  align-items: stretch;
}

.auto-check-head.product-target,
.auto-check-row.product-target {
  grid-template-columns: minmax(100px, .55fr) minmax(105px, .55fr) minmax(120px, .6fr) minmax(130px, .7fr) minmax(150px, .75fr) minmax(190px, 1fr) minmax(160px, .75fr) minmax(120px, .45fr);
}

.auto-check-head {
  padding: 8px 14px;
  color: #111;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.auto-check-rows {
  display: grid;
  gap: 10px;
  max-height: 680px;
  overflow: auto;
  padding: 0 8px 18px;
}

.auto-check-row input[type="text"],
.auto-check-row textarea,
.auto-check-row select {
  min-height: 54px;
  background: #e5e5e5;
}

.mail-setting-recipient-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 16px 20px 20px;
}

.mail-setting-recipient-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  min-width: 0;
  overflow: hidden;
}

.mail-setting-recipient-head {
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  display: flex;
  min-height: 40px;
  padding: 0 12px;
}

.mail-setting-recipient-head h3 {
  color: #101828;
  font-size: 13px;
  font-weight: 800;
  margin: 0;
}

.mail-setting-recipient-add,
.mail-setting-recipient-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, .7fr) auto;
}

.mail-setting-recipient-add {
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 10px;
}

.mail-setting-recipient-row {
  align-items: center;
  border-bottom: 1px solid #eef2f7;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, .7fr) 70px auto;
  margin: 0;
  padding: 8px 10px;
}

.mail-setting-recipient-row:last-child {
  border-bottom: 0;
}

.mail-setting-recipient-add input,
.mail-setting-recipient-row input,
.mail-setting-template-editor input,
.mail-setting-template-editor textarea {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  font: inherit;
  min-height: 34px;
  min-width: 0;
  padding: 6px 10px;
}

.mail-setting-recipient-add input:focus,
.mail-setting-recipient-row input:focus,
.mail-setting-template-editor input:focus,
.mail-setting-template-editor textarea:focus {
  border-color: #8fb6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
  outline: none;
}

.mail-setting-recipient-list {
  display: grid;
  min-height: 120px;
}

.mail-setting-delete-check {
  align-items: center;
  color: #475467;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
  justify-content: center;
  white-space: nowrap;
}

.mail-setting-delete-check input {
  min-height: 0;
  justify-content: center;
  width: 100%;
}

.mail-setting-empty {
  align-items: center;
  color: #667085;
  display: flex;
  font-size: 13px;
  font-weight: 650;
  justify-content: center;
  min-height: 112px;
  padding: 16px;
}

.mail-setting-template-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 280px;
  padding: 16px 20px 24px;
}

.mail-setting-template-editor {
  display: grid;
  gap: 10px;
}

.mail-setting-template-editor textarea {
  line-height: 1.7;
  min-height: 360px;
  resize: vertical;
}

.mail-setting-template-editor .workplace-setting-link {
  justify-self: end;
}

.mail-setting-token-list {
  align-content: start;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 0;
  overflow: hidden;
}

.mail-setting-token-list div {
  border-bottom: 1px solid #eef2f7;
  display: grid;
  gap: 8px;
  grid-template-columns: 96px minmax(0, 1fr);
  min-height: 38px;
  padding: 9px 10px;
}

.mail-setting-token-list div:last-child {
  border-bottom: 0;
}

.mail-setting-token-list strong {
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.mail-setting-token-list span {
  color: #475467;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .workplace-setting-inline-add {
    align-items: stretch;
    width: 100%;
  }

  .workplace-setting-inline-add input {
    min-width: 0;
    width: 100%;
  }

  .mail-setting-recipient-grid,
  .mail-setting-template-grid {
    grid-template-columns: 1fr;
  }

  .mail-setting-recipient-add,
  .mail-setting-recipient-row {
    grid-template-columns: 1fr;
  }

  .mail-setting-template-grid {
    padding: 14px;
  }
}

.factory-check-tile {
  justify-self: end;
  display: grid;
  place-items: center;
  min-width: 76px;
  min-height: 62px;
  padding: 8px;
  border: 2px solid #111;
  border-radius: 4px;
  background: #fff;
  color: #111;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}

.mail-recipient-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mail-recipient-panel {
  display: grid;
  gap: 6px;
}

.mail-recipient-add {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(0, .8fr) minmax(0, .7fr);
  gap: 6px;
  align-items: center;
}

.mail-recipient-add input,
.mail-recipient-row input,
.mail-template-editor input,
.mail-template-editor textarea {
  min-height: 36px;
  border: 2px solid #111;
  border-radius: 4px;
  background: #fff;
}

.mail-recipient-list {
  display: grid;
  align-content: start;
  min-height: 210px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  background: #f5f5f5;
}

.mail-recipient-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) minmax(0, .6fr) 62px 58px;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.mail-empty {
  display: grid;
  place-items: center;
  min-height: 120px;
  color: var(--muted);
  font-size: 13px;
}

.mail-template-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: start;
}

.mail-template-editor {
  display: grid;
  gap: 10px;
}

.mail-template-editor textarea {
  min-height: 440px;
  padding: 12px;
  line-height: 1.7;
}

.mail-template-editor input {
  padding: 0 10px;
  font-weight: 800;
}

.mail-token-list {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  color: #111;
  font-size: 13px;
  line-height: 1.45;
}

.mail-token-list div {
  display: grid;
  grid-template-columns: 96px 1fr;
}

.factory-survey-shell {
  display: grid;
  gap: 18px;
  min-height: calc(100vh - 140px);
  background: #fff;
}

.factory-survey-header {
  display: grid;
  gap: 0;
}

.factory-survey-hero {
  display: grid;
  grid-template-columns: 72px 220px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  background: #858584;
}

.factory-back {
  background: #ffd49d;
  font-size: 30px;
}

.factory-survey-add {
  justify-self: end;
  display: grid;
  grid-template-columns: minmax(180px, .9fr) minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.factory-survey-add input,
.factory-survey-row input[type="text"] {
  min-height: 38px;
  border: 2px solid #111;
  border-radius: 4px;
  background: #fff;
}

.factory-survey-list {
  display: grid;
  align-content: start;
  border: 1px solid var(--line);
  background: #fff;
}

.factory-survey-list-head,
.factory-survey-row {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(260px, .9fr) 120px 180px;
  gap: 8px;
  align-items: stretch;
}

.factory-survey-list-head {
  padding: 10px 14px;
  color: #111;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.factory-survey-row {
  padding: 8px;
}

.factory-survey-row input[type="text"] {
  min-height: 64px;
  padding: 0 12px;
  background: #e5e5e5;
  text-align: center;
  font-weight: 750;
}

.factory-survey-count {
  display: grid;
  place-items: center;
  min-height: 64px;
  border: 1px solid #111;
  background: #f5f5f5;
  font-weight: 800;
}

.factory-survey-actions {
  display: grid;
  grid-template-columns: 1fr 70px 70px;
  gap: 6px;
  align-items: center;
}

.factory-group-head,
.factory-group-row {
  grid-template-columns: 52px minmax(260px, .9fr) minmax(180px, .65fr) 90px 210px;
}

.factory-hidden-field {
  display: none;
}

.factory-item-list {
  overflow-x: auto;
}

.factory-item-head,
.factory-item-row {
  display: grid;
  grid-template-columns: 52px minmax(160px, .65fr) repeat(5, minmax(150px, 1fr)) 210px;
  gap: 6px;
  align-items: stretch;
  min-width: 1180px;
}

.factory-item-head {
  padding: 10px 8px;
  color: #111;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.factory-item-row {
  padding: 8px;
}

.factory-item-row textarea {
  min-height: 140px;
  padding: 10px;
  border: 2px solid #111;
  border-radius: 4px;
  background: #e5e5e5;
  resize: vertical;
}

.item-add textarea {
  min-height: 38px;
  max-height: 72px;
  border: 2px solid #111;
  border-radius: 4px;
}

.factory-detail-form {
  display: grid;
  gap: 0;
}

.factory-detail-hero {
  grid-template-columns: 72px minmax(260px, .65fr) minmax(220px, .35fr);
}

.factory-detail-title-card textarea {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  background: #e5e5e5;
  text-align: center;
  font-weight: 800;
  resize: vertical;
}

.factory-detail-tabs {
  display: flex;
  gap: 0;
  padding: 14px 14px 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.factory-detail-tabs a {
  min-width: 110px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: #fff;
  color: #111;
  text-align: center;
  font-weight: 800;
  text-decoration: none;
}

.factory-detail-tabs a.active {
  background: #222;
  color: #fff;
}

.factory-detail-panel {
  display: grid;
  gap: 14px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-top: 0;
  background: #fff;
}

.factory-detail-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 8px;
}

.factory-detail-grid label {
  display: grid;
  gap: 6px;
  text-align: center;
  font-weight: 800;
}

.factory-detail-grid textarea {
  min-height: calc(100vh - 340px);
  padding: 10px;
  border: 2px solid #111;
  border-radius: 4px;
  background: #e5e5e5;
  resize: vertical;
  text-align: left;
  font-weight: 500;
}

.factory-detail-save {
  justify-self: end;
  min-width: 110px;
}

.home-shell,
.home-shell--dashboard {
  align-content: start;
  background: #f8fafc;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  display: block;
  margin-left: calc(50% - 50vw);
  min-height: calc(100vh - var(--app-header-height));
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  box-shadow: none;
}

.permission-launcher--home {
  align-content: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  padding: 12px 24px 24px;
}

.permission-launcher--home .permission-row {
  min-height: 64px;
  position: relative;
  text-decoration: none;
}

.database-top-shell {
  background: #fff;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  min-height: calc(100vh - var(--app-header-height));
  padding: 0;
  width: 100vw;
  max-width: 100vw;
}

.database-top-bar {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  display: flex;
  gap: 16px;
  height: var(--database-topbar-height);
  justify-content: space-between;
  min-height: 0;
  left: 0;
  padding: 10px 24px;
  position: static;
  z-index: 24;
}

.database-top-bar-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.database-top-kicker {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 650;
  gap: 7px;
  min-width: 0;
}

.database-top-kicker :is(a, strong, span) {
  color: #101828;
  text-decoration: none;
}

.database-top-kicker a:hover {
  color: var(--accent-dark);
  text-decoration: none;
}

.database-top-title-row {
  align-items: center;
  display: flex;
  gap: 10px;
}

.database-top-title-row h1 {
  color: #101828;
  font-size: 18px;
  font-weight: 650;
  margin: 0;
}

.database-top-title-row span {
  align-items: center;
  background: #f2f4f7;
  border-radius: 999px;
  color: #475467;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 28px;
  min-width: 38px;
  padding: 0 10px;
}

.database-top-description {
  color: #667085;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  margin: -2px 0 0;
}

.database-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.database-top-actions a {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #344054;
  display: inline-flex;
  font-size: 13px;
  font-weight: 620;
  justify-content: center;
  min-height: 34px;
  padding: 0 11px;
  text-decoration: none;
}

.database-top-actions a:hover {
  background: #f0f4f8;
  color: var(--accent-dark);
  text-decoration: none;
}

.database-top-panel {
  background: #fff;
  border-top: 0;
  min-height: calc(100vh - var(--app-header-height) - var(--database-topbar-height));
}

.database-top-tabs {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
  padding: 8px 20px;
}

.database-top-tabs a {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #344054;
  display: inline-flex;
  gap: 8px;
  min-height: 34px;
  padding: 0 11px;
  text-decoration: none;
}

.database-top-tabs a.is-active {
  background: #101828;
  border-color: #101828;
  color: #fff;
}

.database-top-tabs small {
  align-items: center;
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: center;
  min-height: 20px;
  min-width: 24px;
  padding: 0 7px;
}

.database-top-tabs a:not(.is-active) small {
  background: #f2f4f7;
  color: #475467;
}

.database-top-toolbar {
  align-items: center;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  padding: 16px 20px 8px;
}

.database-top-search {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-sizing: border-box;
  display: flex;
  flex: 0 1 420px;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
}

.database-top-search span {
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.database-top-search input {
  border: 0;
  flex: 1 1 auto;
  font: inherit;
  min-width: 0;
  outline: 0;
}

.database-top-toolbar button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #344054;
  display: inline-flex;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
}

.database-top-table-wrap {
  box-sizing: border-box;
  overflow-x: auto;
  padding: 12px 20px 24px;
  width: 100%;
}

.database-top-table {
  border-collapse: collapse;
  min-width: 760px;
  table-layout: fixed;
  width: 100%;
}

.database-top-table th,
.database-top-table td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid #eef2f6;
  color: #101828;
  font-size: 13px;
  height: 42px;
  padding: 0 12px;
  text-align: center;
  vertical-align: middle;
}

.database-top-table th:last-child,
.database-top-table td:last-child {
  border-right: 0;
}

.database-top-table th {
  background: #f8fafc;
  color: #344054;
  font-size: 12px;
  font-weight: 650;
}

.database-top-table a {
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: none;
}

.database-top-shell .database-workplace-list {
  display: grid;
  gap: 12px;
  padding: 16px 20px 24px;
}

.database-top-shell .database-workplace-row {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(280px, 1fr) auto;
  min-height: 72px;
  padding: 14px 20px;
  position: relative;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.database-top-shell .database-workplace-row:hover {
  border-color: #c8d2df;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.database-top-shell .database-workplace-overlay {
  display: block;
}

.database-top-shell .database-workplace-name {
  color: #101828;
  display: inline-flex;
  font-size: 14px;
  font-weight: 650;
  min-width: 0;
  pointer-events: none;
  position: relative;
  text-decoration: none;
  z-index: 3;
}

.database-top-shell .database-workplace-name:hover {
  box-shadow: none;
  color: #101828;
  text-decoration: none;
}

.database-top-shell .database-workplace-card-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.database-top-shell .database-workplace-card-main small {
  color: #667085;
  font-size: 12px;
  font-weight: 650;
}

.database-top-shell .database-workplace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  position: relative;
  z-index: 4;
}

.database-top-shell .database-workplace-primary,
.database-top-shell .database-workplace-secondary {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #344054;
  display: inline-flex;
  font-size: 13px;
  font-weight: 620;
  justify-content: center;
  min-height: 34px;
  min-width: 0;
  padding: 0 11px;
  pointer-events: auto;
  position: relative;
  text-align: center;
  text-decoration: none;
  z-index: 6;
}

.database-top-shell .database-workplace-primary:hover,
.database-top-shell .database-workplace-secondary:hover {
  background: #f0f4f8;
  color: var(--accent-dark);
  text-decoration: none;
}

.database-top-shell .database-empty {
  color: var(--muted);
  margin: 0;
  padding: 28px 24px;
}

.workplace-top-shell {
  background: #f8fafc;
  box-sizing: border-box;
  margin-left: 0;
  min-height: calc(100vh - var(--app-header-height));
  overflow: visible;
  padding: 0;
  width: 100%;
  max-width: none;
}

.workplace-top-bar {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  display: flex;
  gap: 16px;
  height: var(--database-topbar-height);
  justify-content: space-between;
  left: 0;
  min-height: 0;
  padding: 10px 24px;
  position: sticky;
  right: 0;
  top: var(--app-header-height);
  z-index: 24;
}

.workplace-top-bar-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.workplace-top-kicker {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 650;
  gap: 7px;
  min-width: 0;
}

.workplace-top-kicker a,
.workplace-top-kicker strong {
  color: #101828;
  font-weight: 650;
  text-decoration: none;
}

.workplace-top-kicker a:hover {
  color: var(--accent-dark);
  text-decoration: none;
}

.workplace-top-title-row {
  align-items: center;
  display: flex;
  gap: 10px;
}

.workplace-top-title-row h1 {
  color: #101828;
  font-size: 18px;
  font-weight: 650;
  margin: 0;
}

.workplace-top-title-row span {
  align-items: center;
  background: #f2f4f7;
  border-radius: 999px;
  color: #475467;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 28px;
  min-width: 38px;
  padding: 0 10px;
}

.workplace-setting-title-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

.workplace-setting-title-line h1 {
  color: #101828;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.2;
  margin: 0;
}

.workplace-setting-title-line span {
  align-items: center;
  background: #f2f4f7;
  border-radius: 999px;
  color: #475467;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 28px;
  min-width: 38px;
  padding: 0 10px;
}

.workplace-setting-back-link {
  margin-right: 2px;
}

.workplace-setting-shell .workplace-top-bar {
  justify-content: flex-start;
}

.workplace-setting-shell .workplace-top-bar-main {
  flex: 1 1 auto;
}

.workplace-setting-header-back-link {
  flex: 0 0 auto;
}

.workplace-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.workplace-top-actions a,
.workplace-top-tabs a,
.workplace-top-panel .workplace-connection-product,
.workplace-top-panel .workplace-connection-project,
.workplace-top-panel .workplace-connection-factory,
.workplace-top-panel .workplace-connection-setting {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #344054;
  display: inline-flex;
  font-size: 13px;
  font-weight: 620;
  justify-content: center;
  min-height: 34px;
  padding: 0 11px;
  text-decoration: none;
}

.workplace-top-actions a:hover,
.workplace-top-tabs a:hover,
.workplace-top-panel .workplace-connection-product:hover,
.workplace-top-panel .workplace-connection-project:hover,
.workplace-top-panel .workplace-connection-factory:hover,
.workplace-top-panel .workplace-connection-setting:hover {
  background: #f0f4f8;
  color: var(--accent-dark);
  text-decoration: none;
}

.page-header-shell,
.page-header-shell.workplace-top-bar {
  align-items: stretch;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px 16px;
  height: auto;
  justify-content: stretch;
  min-height: var(--database-topbar-height);
  padding: 14px var(--layout-header-x, 32px) 10px;
  position: static;
  z-index: 24;
}

.page-breadcrumb-header {
  align-items: flex-start;
  box-sizing: border-box;
  display: flex;
  min-height: 20px;
  min-width: 0;
  width: 100%;
}

.page-header-shell .layout-breadcrumb-header {
  color: var(--muted) !important;
  flex-wrap: wrap !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  min-height: 20px !important;
  overflow: visible !important;
  padding: 0 !important;
  white-space: normal !important;
}

.page-header-shell .layout-breadcrumb-header :is(a, strong, span) {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  word-break: normal !important;
}

.page-header-shell .layout-breadcrumb-header a {
  color: #344054 !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}

.page-header-shell .layout-breadcrumb-header strong {
  color: #101828 !important;
  font-weight: 800 !important;
}

.page-header-shell .layout-breadcrumb-header span {
  color: var(--muted) !important;
  font-weight: 650 !important;
}

.page-title-header {
  align-items: center;
  box-sizing: border-box;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) max-content;
  min-height: 38px;
  min-width: 0;
  width: 100%;
}

.page-title-header-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.page-breadcrumb-title {
  align-items: center;
  column-gap: 10px;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  row-gap: 4px;
}

.page-breadcrumb-title h1 {
  color: #101828;
  flex: 0 1 auto;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
}

.page-breadcrumb-title span {
  align-items: center;
  background: #f2f4f7;
  border-radius: 999px;
  color: #475467;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 28px;
  min-width: 38px;
  padding: 0 10px;
}

.page-title-actions,
.page-breadcrumb-actions {
  align-self: center !important;
  flex: 0 0 auto;
  grid-column: 2;
  justify-self: end;
}

.page-header-shell .layout-page-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.page-header-shell .layout-page-actions > :is(a, button) {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-sizing: border-box;
  color: #344054;
  display: inline-flex;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  min-height: 34px;
  justify-content: center;
  line-height: 1;
  padding: 0 11px;
  text-decoration: none;
  white-space: nowrap;
}

.page-header-shell .layout-page-actions > :is(a, button):hover {
  background: #f0f4f8;
  color: var(--accent-dark);
  text-decoration: none;
}

.layout-contract-shell .page-header-shell .layout-breadcrumb-header {
  flex-wrap: wrap !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  min-height: 20px !important;
  padding: 0 !important;
  white-space: normal !important;
}

.workplace-top-panel {
  background: #fff;
  min-height: calc(100vh - var(--app-header-height) - var(--database-topbar-height));
}

.workplace-top-tabs {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  padding: 14px 24px;
}

.workplace-top-tabs a.is-active {
  background: #101828;
  border-color: #101828;
  color: #fff;
}

.workplace-top-panel .workplace-card-list {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  padding: 16px 20px 24px;
  width: 100%;
}

.workplace-top-panel .workplace-card {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-sizing: border-box;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 16px;
  grid-template-columns: 64px minmax(260px, 1fr) auto;
  min-width: 0;
  min-height: 72px;
  padding: 14px 20px;
  position: relative;
  cursor: default;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  width: 100%;
}

.workplace-top-panel .workplace-card-simple {
  grid-template-columns: 64px minmax(260px, 1fr);
}

.workplace-top-panel .workplace-warehouse-row {
  max-width: none;
}

.workplace-top-panel .workplace-card:has(.workplace-card-overlay) {
  cursor: pointer;
}

.workplace-top-panel .workplace-card:hover {
  border-color: #c8d2df;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.workplace-top-panel .workplace-card-overlay {
  border-radius: inherit;
  bottom: 0;
  cursor: pointer;
  display: block;
  left: 0;
  pointer-events: auto;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

.workplace-top-panel .workplace-card-code {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  min-height: 40px;
  pointer-events: none;
  position: relative;
  z-index: 3;
}

.workplace-top-panel .workplace-card-name {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #101828;
  font-size: 14px;
  font-weight: 650;
  min-height: 0;
  min-width: 0;
  padding: 0;
  pointer-events: none;
  position: relative;
  text-decoration: none;
  z-index: 3;
}

.workplace-top-panel .workplace-card-name:hover {
  color: #101828;
  text-decoration: none;
}

.workplace-top-panel .workplace-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  position: relative;
  z-index: 4;
}

.workplace-top-panel .workplace-warehouse-name {
  pointer-events: none;
}

.workplace-top-empty {
  color: var(--muted);
  margin: 0;
  padding: 28px 24px;
}

.workplace-setting-panel {
  background: #fff;
  min-height: calc(100vh - var(--app-header-height) - var(--database-topbar-height));
}

.workplace-setting-layout {
  align-items: start;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - var(--app-header-height) - var(--database-topbar-height));
}

.workplace-setting-drawer {
  align-self: start;
  background: #f8fafc;
  border-right: 1px solid var(--line);
  box-sizing: border-box;
  max-height: calc(100vh - var(--app-header-height) - var(--database-topbar-height));
  min-height: calc(100vh - var(--app-header-height) - var(--database-topbar-height));
  overflow-y: auto;
  padding: 18px 14px;
  position: sticky;
  scrollbar-width: thin;
  top: calc(var(--app-header-height) + var(--database-topbar-height));
  z-index: 12;
}

.workplace-setting-drawer a {
  align-items: center;
  border-radius: 6px;
  color: #344054;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 42px;
  padding: 0 12px;
  text-decoration: none;
}

.workplace-setting-drawer a + a {
  margin-top: 6px;
}

.workplace-setting-drawer a:hover,
.workplace-setting-drawer a.is-active {
  background: #eef2f7;
  color: #101828;
  text-decoration: none;
}

.workplace-setting-drawer a.is-child {
  margin-left: 18px;
  min-height: 36px;
  padding-left: 16px;
  position: relative;
}

.workplace-setting-drawer a.is-child::before {
  background: #d0d5dd;
  bottom: 7px;
  content: "";
  left: -8px;
  position: absolute;
  top: -13px;
  width: 2px;
}

.workplace-setting-drawer a.is-child strong {
  color: #475467;
  font-size: 12px;
  font-weight: 700;
}

.workplace-setting-drawer a.is-child.is-active strong,
.workplace-setting-drawer a.is-child:hover strong {
  color: #101828;
}

.workplace-setting-drawer strong {
  font-size: 13px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workplace-setting-drawer span {
  align-items: center;
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 999px;
  color: #475467;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: center;
  min-height: 22px;
  min-width: 30px;
  padding: 0 8px;
}

.workplace-setting-content {
  min-width: 0;
}

.workplace-setting-tabs {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px;
  padding: 14px 24px;
}

.workplace-setting-tabs a {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #344054;
  display: inline-flex;
  font-size: 13px;
  font-weight: 650;
  min-height: 34px;
  padding: 0 12px;
  text-decoration: none;
}

.workplace-setting-tabs a:hover {
  background: #f0f4f8;
  color: var(--accent-dark);
  text-decoration: none;
}

.workplace-setting-tabs a.is-active {
  background: #101828;
  border-color: #101828;
  color: #fff;
}

.workplace-setting-menu {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  padding: 16px 20px 24px;
}

.workplace-setting-menu-card {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  color: #101828;
  display: grid;
  gap: 6px 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 76px;
  padding: 16px 20px;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.workplace-setting-menu-card:hover {
  border-color: #c8d2df;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-1px);
}

.workplace-setting-menu-card strong {
  color: #101828;
  font-size: 14px;
  font-weight: 750;
}

.workplace-setting-menu-card span {
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  grid-column: 1;
}

.workplace-setting-menu-card em {
  align-items: center;
  background: #f2f4f7;
  border-radius: 999px;
  color: #475467;
  display: inline-flex;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-content: center;
  min-height: 28px;
  min-width: 38px;
  padding: 0 10px;
}

.workplace-setting-section {
  border-bottom: 1px solid var(--line);
}

.workplace-setting-section-head {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 14px 24px;
}

.workplace-setting-section-head h2 {
  color: #101828;
  font-size: 15px;
  font-weight: 750;
  margin: 0;
}

.workplace-setting-section-head p {
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  margin: 4px 0 0;
}

.workplace-setting-add,
.workplace-setting-link,
.workplace-setting-secondary-link {
  align-items: center;
  background: var(--action-edit-bg);
  border: 1px solid var(--action-edit-border);
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  text-decoration: none;
  white-space: nowrap;
}

.workplace-setting-link[hidden],
[data-dirty-save][hidden] {
  display: none !important;
}

.workplace-setting-add,
.settings-contract-shell .workplace-setting-head-actions .workplace-setting-add {
  background: var(--action-create-bg) !important;
  border-color: var(--action-create-border) !important;
  color: #fff;
}

.workplace-setting-add:hover,
.settings-contract-shell .workplace-setting-head-actions .workplace-setting-add:hover {
  background: var(--action-create-bg-hover) !important;
  border-color: var(--action-create-bg-hover) !important;
  color: #fff;
}

button.workplace-setting-link {
  cursor: pointer;
  font-family: inherit;
}

button.workplace-setting-secondary-link {
  cursor: pointer;
  font-family: inherit;
}

button.workplace-setting-secondary-link:disabled {
  background: var(--action-disabled-bg);
  border-color: var(--action-disabled-border);
  color: var(--action-disabled-text);
  cursor: not-allowed;
}

.workplace-setting-inline-add {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 0;
}

.workplace-setting-inline-add input {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  font: inherit;
  min-height: 34px;
  min-width: 220px;
  padding: 6px 10px;
}

.workplace-setting-row-form {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  margin: 0;
}

.workplace-setting-count-cell {
  font-weight: 800;
  text-align: center !important;
}

.workplace-setting-head-actions {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
}

.workplace-setting-head-actions form {
  display: inline-flex;
  margin: 0;
}

.workplace-setting-head-actions .workplace-setting-name-form {
  display: none;
}

.workplace-setting-head-actions .trade-product-edit-save {
  margin-left: 0;
}

.workplace-setting-add:disabled {
  background: var(--action-disabled-bg);
  border-color: var(--action-disabled-border);
  color: var(--action-disabled-text);
}

.workplace-setting-secondary-link {
  background: var(--action-ghost-bg);
  border-color: var(--action-ghost-border);
  color: #101828;
}

.workplace-setting-select-trigger {
  background: var(--action-select-bg);
  border-color: var(--action-select-border);
  color: #fff;
}

.workplace-setting-select-trigger:hover {
  background: var(--action-select-bg-hover);
  border-color: var(--action-select-bg-hover);
  color: #fff;
}

.workplace-setting-config-link {
  background: var(--action-edit-bg);
  border-color: var(--action-edit-border);
  color: #fff;
}

.workplace-setting-config-link:hover {
  background: var(--action-edit-bg-hover);
  border-color: var(--action-edit-bg-hover);
  color: #fff;
  text-decoration: none;
}

.workplace-setting-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.workplace-setting-table {
  border-collapse: collapse;
  color: #101828;
  font-size: 13px;
  min-width: 1120px;
  width: 100%;
}

.workplace-setting-table th,
.workplace-setting-table td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid #eef2f7;
  height: 44px;
  padding: 8px 12px;
  text-align: center;
  vertical-align: middle;
}

.workplace-setting-table th {
  background: #f8fafc;
  color: #344054;
  font-size: 12px;
  font-weight: 750;
  position: sticky;
  top: 0;
  z-index: 1;
}

.workplace-setting-table tr[data-row-href] {
  cursor: pointer;
}

.workplace-setting-table tr[data-row-href]:hover > td,
.workplace-setting-table tr[data-row-href]:focus > td {
  background: #f8fafc;
}

.workplace-setting-table tr[data-row-href]:focus {
  outline: none;
}

.workplace-setting-table tr[data-row-href]:focus-visible > td {
  box-shadow: inset 0 0 0 2px #667085;
}

.workplace-setting-team-table,
.workplace-setting-warehouse-table {
  min-width: 560px;
}

.workplace-setting-basic-table {
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

.workplace-setting-basic-col-label {
  width: 244px;
}

.workplace-setting-basic-table .workplace-setting-name-input {
  max-width: 420px;
  text-align: left;
}

.workplace-time-page {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.workplace-time-shell {
  align-items: start;
  display: block;
  margin: 0 auto;
  max-width: 760px;
  padding: 12px 8px 32px;
}

.workplace-time-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.workplace-time-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 40px;
}

.workplace-time-heading h2 {
  color: #111827;
  font-size: 20px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
}

.workplace-time-heading p {
  color: #6b7280;
  font-size: 12px;
  margin: 5px 0 0;
}

.workplace-time-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  overflow: hidden;
}

.workplace-time-card-title {
  align-items: center;
  border-bottom: 1px solid #eef2f7;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 14px;
}

.workplace-time-card-title strong {
  color: #111827;
  font-size: 13px;
  font-weight: 760;
}

.workplace-time-card-title span {
  color: #6b7280;
  font-size: 12px;
}

.workplace-time-table {
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
  width: 100%;
}

.workplace-time-col-label {
  width: 244px;
}

.workplace-time-col-start,
.workplace-time-col-end {
  width: calc((100% - 244px) / 2);
}

.workplace-time-table th,
.workplace-time-table td {
  border-bottom: 1px solid #f1f5f9;
  height: 42px;
  padding: 7px 12px;
  text-align: left;
  vertical-align: middle;
}

.workplace-time-table tr:last-child th,
.workplace-time-table tr:last-child td {
  border-bottom: 0;
}

.workplace-time-table th {
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 720;
}

.workplace-time-break-table thead th {
  background: #f9fafb;
  color: #6b7280;
  font-size: 11px;
  height: 34px;
  text-transform: none;
}

.workplace-setting-time-input {
  font-weight: 650;
  max-width: 136px;
  min-width: 0;
  text-align: left;
  width: 136px;
}

@media (max-width: 960px) {
  .workplace-time-shell {
    max-width: 760px;
  }
}

@media (max-width: 640px) {
  .workplace-time-shell {
    padding: 16px var(--layout-mobile-x, 16px) 40px;
  }

  .workplace-time-heading {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .workplace-time-table th,
  .workplace-time-table td {
    padding-left: 10px;
    padding-right: 10px;
  }

  .workplace-time-col-label {
    width: 104px;
  }

  .workplace-time-col-start,
  .workplace-time-col-end {
    width: calc((100% - 104px) / 2);
  }

  .workplace-setting-time-input {
    max-width: 112px;
    text-align: center;
    width: min(100%, 112px);
  }

  .workplace-setting-basic-col-label {
    width: 124px;
  }

  .workplace-setting-basic-table .workplace-setting-name-input {
    max-width: 100%;
  }
}

.workplace-trade-setting-form {
  padding: 18px 20px 32px;
}

.workplace-trade-setting-toolbar {
  align-items: center;
  border-bottom: 1px solid #e4e7ec;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: -18px -20px 18px;
  min-height: 58px;
  padding: 10px 20px;
}

.workplace-trade-setting-toolbar-actions {
  justify-content: flex-end;
}

.workplace-trade-setting-toolbar h2 {
  color: #101828;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0;
}

.workplace-trade-setting-toolbar p {
  color: #667085;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  margin: 3px 0 0;
}

.workplace-trade-setting-actions {
  align-items: center;
  border-top: 1px solid #e4e7ec;
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
}

.workplace-trade-setting-save {
  margin-left: 0;
}

.workplace-trade-setting-groups {
  display: grid;
  gap: 18px;
}

.workplace-trade-setting-basic-list {
  display: grid;
  gap: 12px;
  max-width: 640px;
  min-width: 0;
}

.workplace-trade-setting-group {
  min-width: 0;
  padding: 0;
}

.workplace-trade-setting-group-head {
  align-items: flex-start;
  border-bottom: 1px solid #e4e7ec;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 34px;
  padding: 0 2px 10px;
  margin-bottom: 12px;
}

.workplace-trade-setting-group-head h3 {
  color: #101828;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
  margin: 0;
}

.workplace-trade-setting-group-head p {
  color: #667085;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.35;
  margin: 0;
}

.workplace-trade-setting-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 760px);
  max-width: 760px;
}

.workplace-trade-setting-card {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, .04);
  min-width: 0;
  padding: 14px;
}

.workplace-trade-setting-card-wide {
  grid-column: span 2;
}

.workplace-trade-setting-group .workplace-trade-setting-card-wide {
  grid-column: auto;
}

.workplace-trade-setting-card-compact {
  min-height: 108px;
}

.workplace-trade-setting-language-row {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  min-width: 0;
}

.workplace-trade-setting-language-row label {
  color: #344054;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.3;
}

.workplace-trade-setting-mode-options {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
  min-width: 0;
}

#inspection-setting-group .workplace-trade-setting-grid {
  grid-template-areas: none;
  grid-template-columns: minmax(0, 760px);
}

#inspection-report-setting {
  grid-area: auto;
}

#inspection-level-setting {
  grid-area: auto;
}

#summary-setting {
  grid-area: auto;
  grid-column: auto;
}

#aql-setting {
  grid-area: auto;
}

.workplace-trade-setting-card-head {
  align-items: center;
  border-bottom: 1px solid #eef2f7;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: -2px 0 12px;
  min-height: 32px;
  padding-bottom: 10px;
}

.workplace-trade-setting-card h3 {
  color: #101828;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
  margin: 0;
}

.workplace-trade-setting-toggle {
  align-items: center;
  color: #344054;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  gap: 6px;
  letter-spacing: 0;
  white-space: nowrap;
}

.workplace-trade-setting-toggle input {
  height: 18px;
  width: 18px;
}

.workplace-trade-setting-toggle-box {
  background: #f8fafc;
  border: 1px solid #e4e7ec;
  border-radius: 6px;
  justify-content: center;
  min-height: 36px;
  padding: 8px 10px;
  width: 100%;
}

.workplace-trade-setting-subhead {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e4e7ec;
  border-radius: 6px;
  color: #344054;
  display: flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  letter-spacing: 0;
  margin: 14px 0 10px;
  min-height: 30px;
  padding: 5px 8px;
  text-align: center;
}

.workplace-trade-setting-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 112px minmax(0, 1fr);
  margin-top: 8px;
  min-width: 0;
}

.workplace-trade-setting-row.is-split {
  grid-template-columns: 112px minmax(0, 1fr) minmax(0, .72fr);
}

.workplace-trade-setting-row.is-textarea {
  align-items: start;
}

.workplace-trade-setting-row > label,
.workplace-trade-aql-grid label {
  color: #344054;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.3;
}

.workplace-trade-setting-row > label {
  text-align: right;
}

.workplace-trade-setting-stack {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.workplace-trade-setting-form input:not([type="checkbox"]),
.workplace-trade-setting-form select,
.workplace-trade-setting-form textarea {
  background: #f8fbff;
  border: 1px solid #d8e1ee;
  border-radius: 6px;
  color: #101828;
  font: inherit;
  min-height: 34px;
  padding: 6px 10px;
  width: 100%;
}

.workplace-trade-setting-form textarea {
  min-height: 72px;
  resize: vertical;
}

.workplace-trade-setting-form input:focus,
.workplace-trade-setting-form select:focus,
.workplace-trade-setting-form textarea:focus {
  border-color: #8fb6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
  outline: none;
}

.workplace-trade-aql-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workplace-trade-aql-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.workplace-trade-aql-grid label {
  text-align: center;
}

.workplace-trade-setting-errors {
  border-radius: 0;
  margin: -18px -20px 18px;
  padding: 10px 20px;
}

.workplace-parts-setting-table {
  min-width: 760px;
  table-layout: fixed;
}

.workplace-parts-setting-table th:nth-child(1),
.workplace-parts-setting-table td:nth-child(1) {
  width: auto;
}

.workplace-parts-setting-table th:nth-child(2),
.workplace-parts-setting-table td:nth-child(2),
.workplace-parts-setting-table th:nth-child(3),
.workplace-parts-setting-table td:nth-child(3),
.workplace-parts-setting-table th:nth-child(4),
.workplace-parts-setting-table td:nth-child(4) {
  width: 112px;
}

.workplace-parts-name {
  text-align: left !important;
}

.workplace-parts-name a {
  color: #101828;
  font-weight: 750;
  text-decoration: none;
}

.workplace-parts-name a:hover {
  color: var(--accent-dark);
  text-decoration: none;
}

.layout-hierarchy-area {
  background: #f8fafc;
  border: 1px solid #d0d5dd;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 980px;
  padding: 12px;
}

.settings-contract-shell .layout-hierarchy-section {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.settings-contract-shell .layout-hierarchy-section .layout-hierarchy-area {
  margin: 0 !important;
}

.layout-hierarchy-card {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  overflow: hidden;
}

.layout-hierarchy-card-head {
  align-items: center;
  border-bottom: 1px solid #e4e7ec;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px 16px;
}

.layout-hierarchy-card-fields {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.layout-hierarchy-field {
  min-width: 0;
}

.layout-hierarchy-field span {
  color: #667085;
  display: block;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 5px;
}

.layout-hierarchy-field strong {
  color: #101828;
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.layout-hierarchy-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.layout-hierarchy-child-block {
  background: #fff;
  border-left: 2px solid #d0d5dd;
  margin: 12px 16px 14px 28px;
  padding: 10px 0 10px 12px;
}

.layout-hierarchy-item-card {
  --layout-hierarchy-action-width: 132px;
  --layout-hierarchy-flag-count: 4;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  overflow: hidden;
}

.layout-hierarchy-item-card.is-five-flag {
  --layout-hierarchy-action-width: 150px;
  --layout-hierarchy-flag-count: 5;
}

.layout-hierarchy-item-card.auto-add-target-card {
  --layout-hierarchy-auto-add-width: 104px;
}

.layout-hierarchy-item-header {
  background: #f8fafc;
  border-bottom: 1px solid #e4e7ec;
  color: #667085;
  display: grid;
  font-size: 11px;
  font-weight: 800;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) repeat(var(--layout-hierarchy-flag-count), 70px) var(--layout-hierarchy-action-width);
  padding: 9px 12px;
  text-align: center;
}

.layout-hierarchy-item-header span:nth-child(-n + 2) {
  text-align: left;
}

.layout-hierarchy-item-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) repeat(var(--layout-hierarchy-flag-count), 70px) var(--layout-hierarchy-action-width);
  padding: 10px 12px;
}

.auto-add-target-card .layout-hierarchy-item-header,
.auto-add-target-card .layout-hierarchy-item-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) repeat(var(--layout-hierarchy-flag-count), 70px) var(--layout-hierarchy-auto-add-width);
}

.auto-add-target-card-static .layout-hierarchy-item-header,
.auto-add-target-card-static .layout-hierarchy-item-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) repeat(var(--layout-hierarchy-flag-count), 70px);
}

.layout-hierarchy-item-row.is-selected {
  background: #fbfcfd;
}

.layout-hierarchy-row-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.layout-hierarchy-row-actions .layout-hierarchy-select-action {
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  min-height: 30px;
  min-width: 68px;
  padding: 0 10px;
  width: auto;
}

.layout-hierarchy-row-actions .layout-hierarchy-deselect-action {
  min-width: 78px;
}

.layout-hierarchy-auto-add-cell {
  align-items: center;
  display: flex;
  justify-content: center;
}

.layout-hierarchy-auto-add-toggle {
  font-size: 12px;
  font-weight: 750;
  min-height: 30px;
  min-width: 86px;
  padding: 0 10px;
}

.layout-hierarchy-item-row + .layout-hierarchy-item-row {
  border-top: 1px solid #e4e7ec;
}

.layout-hierarchy-item-value {
  color: #101828;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.layout-hierarchy-item-row.is-selected .layout-hierarchy-item-value,
.layout-hierarchy-item-row.is-selected .workplace-checklist-flag-check {
  color: #98a2b3;
  opacity: 0.62;
}

.layout-hierarchy-empty {
  color: #667085;
  font-weight: 650;
  padding: 16px;
}

.layout-hierarchy-empty strong,
.layout-hierarchy-empty span {
  display: block;
}

.layout-hierarchy-empty strong {
  color: #101828;
  margin-bottom: 4px;
}

.workplace-checklist-item-name {
  padding-left: 14px !important;
  position: relative;
  text-align: left !important;
}

.workplace-checklist-flag-check {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 28px;
}

.workplace-checklist-flag-check input {
  height: 18px;
  width: 18px;
}

.workplace-checklist-select-cell {
  text-align: center !important;
}

.workplace-checklist-select-cell input {
  height: 18px;
  width: 18px;
}

.workplace-trade-auto-check-section {
  gap: 14px;
}

.workplace-trade-auto-target-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 12px;
}

.workplace-trade-auto-target-tabs a {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  min-height: 32px;
  padding: 0 12px;
  text-decoration: none;
}

.workplace-trade-auto-target-tabs a.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}

.workplace-trade-auto-check-create {
  border-bottom: 1px solid var(--line);
  padding: 0 12px 14px;
}

.workplace-trade-auto-check-section .auto-check-add,
.workplace-trade-auto-check-section .auto-check-row {
  align-items: center;
}

.workplace-trade-auto-check-section .auto-check-add select,
.workplace-trade-auto-check-section .auto-check-add input[type="text"],
.workplace-trade-auto-check-section .auto-check-row select,
.workplace-trade-auto-check-section .auto-check-row input[type="text"],
.workplace-trade-auto-check-section .auto-check-row textarea {
  background: #f8fbff;
  border: 1px solid #d8e1ee;
  border-radius: 6px;
  color: #101828;
  font: inherit;
  min-height: 34px;
  padding: 6px 10px;
}

.workplace-trade-auto-check-section .auto-check-row textarea,
.workplace-trade-auto-check-section .auto-check-row input[type="text"],
.workplace-trade-auto-check-section .auto-check-row select {
  min-height: 40px;
}

.workplace-trade-auto-check-section .auto-check-add label,
.workplace-trade-auto-check-section .checklist-flags,
.workplace-trade-auto-check-section .checklist-row-actions {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 6px;
}

.workplace-trade-auto-check-section .auto-check-add label {
  min-height: 34px;
}

.workplace-trade-auto-check-list {
  overflow-x: auto;
  padding: 0 12px 14px;
}

.workplace-trade-auto-check-list .auto-check-head,
.workplace-trade-auto-check-list .auto-check-row {
  min-width: 980px;
}

.workplace-trade-auto-check-list .auto-check-head {
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  color: #344054;
  padding: 10px 8px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.workplace-trade-auto-check-list .auto-check-rows {
  gap: 0;
  max-height: none;
  overflow: visible;
  padding: 0;
}

.workplace-trade-auto-check-list .auto-check-row {
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.workplace-trade-auto-check-empty {
  border-top: 1px solid var(--line);
}

.workplace-setting-account-table {
  min-width: 980px;
}

.workplace-setting-account-list-name {
  min-width: 220px;
  text-align: center !important;
}

.workplace-setting-account-edit-table {
  min-width: 1180px;
}

.workplace-setting-account-edit-table th:nth-child(1),
.workplace-setting-account-edit-table td:nth-child(1),
.workplace-setting-account-edit-table th:nth-child(2),
.workplace-setting-account-edit-table td:nth-child(2) {
  min-width: 200px;
}

.workplace-setting-account-edit-table th:nth-child(4),
.workplace-setting-account-edit-table td:nth-child(4) {
  min-width: 260px;
}

.workplace-setting-account-edit-table th:nth-child(5),
.workplace-setting-account-edit-table td:nth-child(5) {
  min-width: 170px;
}

.workplace-setting-personal-cell {
  text-align: center;
}

.workplace-setting-permission-cell {
  text-align: center;
}

.workplace-setting-permission-cell form {
  margin: 0;
}

.workplace-setting-permission-toggle {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  justify-content: center;
  white-space: nowrap;
}

.workplace-setting-permission-button {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d7dde8;
  border-radius: 6px;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  min-height: 28px;
  min-width: 64px;
  padding: 0 12px;
}

.workplace-setting-permission-button.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.workplace-setting-permission-button:not(.is-active):hover {
  border-color: #9aa6b8;
  color: #111827;
}

.workplace-setting-personal-summary {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  max-width: 260px;
}

.workplace-setting-personal-summary strong {
  color: #101828;
  font-size: 12px;
  font-weight: 800;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workplace-setting-personal-meta {
  color: #667085;
  font-size: 11px;
  font-weight: 650;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workplace-setting-personal-summary form {
  margin: 2px 0 0;
}

.workplace-setting-team-cell {
  min-width: 150px;
  text-align: center;
}

.workplace-setting-team-picker {
  display: inline-flex;
  justify-content: center;
}

.workplace-setting-team-picker select {
  appearance: none;
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  justify-content: center;
  list-style: none;
  min-height: 30px;
  min-width: 108px;
  padding: 0 28px 0 12px;
  white-space: nowrap;
}

.workplace-setting-team-picker select:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.workplace-setting-team-picker::after {
  border-bottom: 1.5px solid #667085;
  border-right: 1.5px solid #667085;
  content: "";
  height: 6px;
  margin-left: -20px;
  pointer-events: none;
  position: relative;
  top: 10px;
  transform: rotate(45deg);
  width: 6px;
}

.workplace-setting-table td:first-child,
.workplace-setting-table th:first-child {
  border-left: 1px solid #eef2f7;
}

.workplace-setting-name {
  font-weight: 650;
  text-align: center !important;
}

.workplace-setting-name-form {
  display: none;
}

.workplace-setting-name-edit {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  justify-content: center;
  width: 100%;
}

.workplace-setting-name-input {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  font-size: 12px;
  font-weight: 750;
  min-height: 30px;
  padding: 0 8px;
  text-align: center;
  width: 100%;
}

.workplace-setting-name-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
  outline: none;
}

.workplace-setting-report-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #667085 50%), linear-gradient(135deg, #667085 50%, transparent 50%);
  background-position: calc(100% - 14px) 12px, calc(100% - 9px) 12px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 24px;
}

.workplace-setting-name-save {
  min-width: 46px;
  padding: 0 8px;
}

.workplace-setting-code {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #d0d5dd;
  border-radius: 5px;
  color: #101828;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  justify-content: center;
  min-height: 28px;
  min-width: 40px;
  padding: 0 8px;
}

.workplace-setting-flag {
  color: #101828;
  font-size: 12px;
  font-weight: 800;
}

.workplace-setting-table .workplace-setting-flag-column {
  width: 112px;
}

.workplace-setting-table .workplace-setting-flag-column input[type="checkbox"] {
  height: 18px;
  width: 18px;
}

.workplace-setting-muted {
  color: #98a2b3;
  font-weight: 750;
}

.workplace-setting-account-edit-table tr.is-hidden-account td {
  background: #fafbfc;
  color: #98a2b3;
}

.workplace-setting-action-chip {
  align-items: center;
  background: #101828;
  border: 1px solid #101828;
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  justify-content: center;
  min-height: 30px;
  min-width: 54px;
  padding: 0 10px;
  white-space: nowrap;
}

button.workplace-setting-action-chip {
  cursor: pointer;
  font-family: inherit;
}

button.workplace-setting-action-chip:disabled {
  background: var(--action-disabled-bg);
  border-color: var(--action-disabled-border);
  color: var(--action-disabled-text);
  cursor: not-allowed;
}

.workplace-setting-action-chip.is-muted {
  background: #fff;
  border-color: #d0d5dd;
  color: #344054;
}

.workplace-setting-action-chip.is-danger {
  background: #fff;
  border-color: #d0d5dd;
  color: #101828;
}

.workplace-setting-action-chip.is-restore {
  background: #eef4ff;
  border-color: #b2ccff;
  color: #1849a9;
}

.workplace-setting-delete-form {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.workplace-setting-row-actions {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  justify-content: center;
}

.workplace-setting-status-chip {
  align-items: center;
  background: #eef2f7;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  justify-content: center;
  min-height: 30px;
  min-width: 64px;
  padding: 0 10px;
  white-space: nowrap;
}

.workplace-setting-status-chip.is-initial {
  background: #eef4ff;
  border-color: #b2ccff;
  color: #1849a9;
}

.workplace-setting-status-chip.is-granted {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.workplace-setting-personal-dialog {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, .18);
  color: #101828;
  max-width: min(720px, calc(100vw - 32px));
  padding: 0;
  width: 720px;
}

.workplace-setting-personal-dialog::backdrop {
  background: rgba(16, 24, 40, .38);
}

.workplace-setting-personal-dialog-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
}

.workplace-setting-personal-dialog-head strong {
  font-size: 14px;
  font-weight: 800;
}

.workplace-setting-personal-dialog-head button {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 16px;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.workplace-setting-personal-dialog-body {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.workplace-setting-personal-form {
  border: 1px solid #eaecf0;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.workplace-setting-personal-form label {
  display: grid;
  gap: 6px;
}

.workplace-setting-personal-form label span {
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.workplace-setting-personal-form input,
.workplace-setting-personal-form select {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  font: inherit;
  font-size: 13px;
  min-height: 34px;
  padding: 0 10px;
}

.workplace-setting-personal-form input:focus,
.workplace-setting-personal-form select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
  outline: none;
}

.workplace-setting-personal-dialog-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workplace-setting-empty,
.workplace-setting-empty-cell {
  color: #667085;
  font-size: 13px;
  font-weight: 600;
}

.workplace-setting-empty {
  margin: 0;
  padding: 20px 24px;
}

.workplace-setting-empty-cell {
  height: 72px !important;
  text-align: left !important;
}

.page:has(.trade-top-shell),
.page:has(.workplace-top-shell),
.page:has(.database-top-shell) {
  background: #f8fafc;
  max-width: none;
  min-height: calc(100vh - var(--app-header-height));
  overflow: visible;
  padding: 0;
  width: 100%;
}

.page:has(.database-top-shell),
.database-top-shell,
.database-top-panel {
  background: #fff;
}

html:has(.database-top-shell),
body:has(.database-top-shell) {
  background: #fff;
}

.trade-top-shell {
  background: #f8fafc;
  display: grid;
  gap: 0;
  margin: 0;
  max-width: none;
  min-height: calc(100vh - var(--app-header-height));
  overflow: visible;
}

.trade-top-bar-main {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.trade-top-bar {
  align-items: flex-start;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  display: flex;
  gap: 16px;
  height: auto;
  justify-content: space-between;
  left: 0;
  min-height: 0;
  padding: 10px 24px;
  position: sticky;
  right: 0;
  top: var(--app-header-height);
  z-index: 24;
}

.trade-top-kicker {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 650;
  gap: 7px;
  min-width: 0;
}

.trade-top-kicker a,
.trade-top-kicker span {
  color: #101828;
  text-decoration: none;
}

.trade-top-kicker a:hover {
  color: var(--accent-dark);
  text-decoration: none;
}

.trade-top-title-row {
  align-items: center;
  display: flex;
  gap: 10px;
}

.trade-top-title-row h1 {
  color: #101828;
  font-size: 18px;
  font-weight: 650;
  margin: 0;
}

.trade-product-category-back-link {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #111827;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 750;
  gap: 6px;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px 0 10px;
  text-decoration: none;
}

.trade-product-category-back-link::before {
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: "";
  display: block;
  height: 7px;
  transform: rotate(45deg);
  width: 7px;
}

.trade-product-category-back-link:hover {
  background: #f8fafc;
  border-color: #98a2b3;
  color: #111827;
  text-decoration: none;
}

.trade-top-title-row span {
  align-items: center;
  background: #f2f4f7;
  border-radius: 999px;
  color: #475467;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 28px;
  min-width: 38px;
  padding: 0 10px;
}

.trade-top-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.trade-product-tabs a,
.trade-product-tabs button,
.trade-product-controls button,
.trade-product-controls a,
.trade-top-actions a:not(.button):not(.operation-compact-action) {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #344054;
  display: inline-flex;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  line-height: 1;
  min-height: 34px;
  padding: 0 11px;
  text-decoration: none;
  vertical-align: middle;
}

.trade-product-tabs a:hover,
.trade-product-controls a:hover,
.trade-product-controls button:hover,
.trade-top-actions a:not(.button):not(.operation-compact-action):hover {
  background: #f0f4f8;
  color: var(--accent-dark);
  text-decoration: none;
}

.trade-top-layout {
  align-items: start;
  display: grid;
  gap: 0;
  grid-template-columns: 248px minmax(0, 1fr);
  height: calc(100vh - var(--app-header-height) - var(--trade-topbar-height));
  transition: grid-template-columns .18s ease;
  overflow: hidden;
  position: relative;
}

.trade-top-shell.is-sidebar-collapsed .trade-top-layout {
  grid-template-columns: 56px minmax(0, 1fr);
}

.trade-sidebar {
  align-self: start;
  background: #f8fafc;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: sticky;
  top: calc(var(--app-header-height) + var(--trade-topbar-height));
  transition: box-shadow .18s ease;
  width: 100%;
  z-index: 8;
}

.trade-top-shell:not(.is-sidebar-collapsed) .trade-sidebar {
  box-shadow: 10px 0 24px rgba(16, 24, 40, .08);
}

.trade-top-shell.is-sidebar-collapsed .trade-sidebar {
  background: #f8fafc;
  border-right: 1px solid var(--line);
  box-shadow: none;
  bottom: auto;
  height: 100%;
  left: auto;
  min-height: 0;
  overflow: hidden;
  position: sticky;
  top: calc(var(--app-header-height) + var(--trade-topbar-height));
  width: 100%;
  z-index: 8;
}

.trade-sidebar-toggle {
  align-items: center;
  background: #f8fafc;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  gap: 0;
  justify-content: flex-end;
  min-height: 50px;
  padding: 0 12px 0 8px;
  width: 100%;
}

.trade-top-shell.is-sidebar-collapsed .trade-sidebar-toggle {
  background: #f8fafc;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  justify-content: center;
  min-height: 50px;
  padding: 0;
  width: 100%;
}

.trade-sidebar-toggle-icon {
  background: #fff;
  border: 1.5px solid #98a2b3;
  border-radius: 4px;
  display: inline-block;
  flex: 0 0 auto;
  height: 18px;
  position: relative;
  width: 18px;
}

.trade-sidebar-toggle-icon::before {
  background: #98a2b3;
  border-radius: 999px;
  content: "";
  left: 7px;
  position: absolute;
  top: 3px;
  bottom: 2px;
  width: 1.5px;
}

.trade-sidebar-toggle-icon::after {
  background: #cbd5e1;
  border-radius: 2px;
  content: "";
  left: 3px;
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 3px;
}

.trade-top-shell.is-sidebar-collapsed .trade-sidebar-toggle-icon::after {
  left: auto;
  right: 3px;
}

.trade-sidebar-toggle-text {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.trade-sidebar-panel,
.common-drawer[data-drawer-kind="work"] .common-drawer-menu {
  display: grid;
  gap: 4px;
  padding: 10px 8px 18px;
}

.trade-sidebar-group,
.common-drawer[data-drawer-kind="work"] .common-drawer-group {
  display: grid;
  gap: 4px;
  position: relative;
}

.trade-sidebar-group::before,
.common-drawer[data-drawer-kind="work"] .common-drawer-group::before {
  background: #d0d5dd;
  bottom: 10px;
  content: "";
  left: 22px;
  position: absolute;
  top: 42px;
  width: 1px;
}

.trade-sidebar-group h2,
.common-drawer[data-drawer-kind="work"] .common-drawer-group h2 {
  color: #344054;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  margin: 16px 14px 6px;
}

.trade-sidebar-item,
.common-drawer[data-drawer-kind="work"] .common-drawer-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #1f2937;
  display: flex;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  justify-content: flex-start;
  margin-left: 38px;
  min-height: 34px;
  padding: 7px 12px 7px 16px;
  text-align: left;
  text-decoration: none;
  width: calc(100% - 38px);
}

.trade-sidebar-item:hover,
.common-drawer[data-drawer-kind="work"] .common-drawer-item:hover {
  background: #f2f4f7;
  color: #101828;
  text-decoration: none;
}

.trade-sidebar-item.is-active,
.common-drawer[data-drawer-kind="work"] .common-drawer-item.is-active {
  background: #eceff3;
  color: #111827;
  font-weight: 700;
}

.trade-sidebar-item.is-disabled,
.common-drawer[data-drawer-kind="work"] .common-drawer-item.is-disabled {
  color: #98a2b3;
  cursor: default;
}

.trade-top-shell.is-sidebar-collapsed .trade-sidebar-panel,
.common-drawer-shell.is-sidebar-collapsed .common-drawer[data-drawer-kind="work"] .common-drawer-menu {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.trade-top-shell:not(.layout-contract-shell).is-sidebar-collapsed .trade-product-panel {
  border-left: 1px solid var(--line);
}

.trade-top-shell:not(.layout-contract-shell) .trade-product-panel {
  align-self: start;
  background: #fff;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  margin: 0;
  min-height: 0;
  overflow: auto;
  position: relative;
  z-index: 1;
}

.trade-top-shell:not(.layout-contract-shell) .trade-product-scroll {
  min-width: 0;
}

.trade-sidebar-backdrop {
  display: none;
}

.trade-product-tabs {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: none;
  gap: 4px;
  min-height: 40px;
  padding: 0 16px;
}

.trade-product-tabs a,
.trade-product-tabs button {
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 32px;
  padding: 0 14px;
}

.trade-product-tabs a.is-active {
  background: #eef4ff;
  border-color: #84caff;
  color: #111827;
  font-weight: 700;
}

.trade-product-tabs button {
  background: transparent;
  cursor: default;
  opacity: .72;
}

.trade-product-controls {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(160px, 1fr) auto auto auto;
  padding: 10px 16px;
}

.trade-search {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  gap: 8px;
  min-height: 36px;
  padding: 0 11px;
}

.trade-search span {
  border: 2px solid #98a2b3;
  border-radius: 999px;
  display: block;
  height: 13px;
  position: relative;
  width: 13px;
}

.trade-search span::after {
  background: #98a2b3;
  content: "";
  height: 6px;
  position: absolute;
  right: -4px;
  top: 9px;
  transform: rotate(45deg);
  width: 2px;
}

.trade-search input {
  border: 0;
  color: #111827;
  flex: 1;
  font: inherit;
  font-size: 13px;
  min-height: 30px;
  outline: 0;
  padding: 0;
}

.trade-product-controls button,
.trade-product-controls a {
  min-height: 36px;
}

.trade-product-add-form {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin: 0;
}

.trade-product-filter-form {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin: 0;
  min-width: 0;
  flex-wrap: wrap;
}

.trade-product-filter-field {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.trade-product-filter-field > span {
  color: #667085;
  display: none;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.trade-product-filter-form select {
  background: #f2f4f7;
  border: 1px solid #b8c6d8;
  border-radius: 6px;
  color: #101828;
  flex: 0 0 auto;
  font: inherit;
  min-height: 36px;
  min-width: 132px;
  padding: 6px 28px 6px 10px;
  width: auto;
}

.trade-product-filter-form input[type="search"] {
  background: #fff;
  border: 1px solid #b8c6d8;
  border-radius: 6px;
  color: #101828;
  flex: 0 1 260px;
  font: inherit;
  min-height: 36px;
  min-width: 220px;
  padding: 6px 10px;
  width: 260px;
}

.trade-product-filter-form select.is-filtered {
  background: #eef4ff;
  border-color: #2f67d8;
  color: #163b89;
  font-weight: 700;
}

.trade-product-filter-clear {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  display: inline-flex;
  flex: 0 0 auto;
  height: 36px;
  justify-content: center;
  line-height: 1;
  min-height: 36px;
  text-decoration: none;
  width: 36px;
}

.trade-product-filter-clear:hover {
  background: #f8fafc;
  border-color: #98a2b3;
  color: #101828;
}

.trade-product-filter-clear svg {
  display: block;
  height: 18px;
  width: 18px;
}

.trade-product-filter-clear path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.trade-product-add-form input {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  font: inherit;
  min-height: 36px;
  min-width: 220px;
  padding: 6px 10px;
}

.trade-product-add-form button {
  background: var(--action-create-bg);
  border-color: var(--action-create-border);
  color: #fff;
}

.trade-product-add-form button:hover {
  background: var(--action-create-bg-hover);
  border-color: var(--action-create-bg-hover);
  color: #fff;
}

.trade-project-controls {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.trade-project-add-form button {
  background: var(--action-create-bg);
  border-color: var(--action-create-border);
  border-radius: 6px;
  color: #fff;
  gap: 6px;
  min-width: 92px;
  padding: 0 12px;
}

.trade-project-add-form button:hover {
  background: var(--action-create-bg-hover);
  border-color: var(--action-create-bg-hover);
  color: #fff;
}

.trade-project-add-form button span[aria-hidden="true"] {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.trade-product-list {
  display: grid;
  gap: 0;
  padding: 0;
}

.trade-product-head,
.trade-product-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 58px minmax(240px, .5fr) minmax(320px, 1fr) minmax(118px, .22fr) 48px;
}

.trade-product-head {
  border-bottom: 1px solid var(--line);
  color: #667085;
  font-size: 12px;
  font-weight: 650;
  min-height: 38px;
  padding: 0 16px;
}

.trade-product-row {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: inherit;
  min-height: 63px;
  padding: 0 16px;
}

.trade-product-row-main {
  align-items: center;
  color: inherit;
  display: grid;
  gap: 12px;
  grid-column: 1 / 5;
  grid-template-columns: 58px minmax(240px, .5fr) minmax(320px, 1fr) minmax(118px, .22fr);
  min-height: 63px;
  text-decoration: none;
}

.trade-product-row:hover,
.trade-product-row-main:hover {
  background: #f8fafc;
  text-decoration: none;
}

.trade-product-row strong {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #111827;
  display: inline-flex;
  font-size: 13px;
  font-weight: 650;
  justify-content: center;
  justify-self: start;
  min-height: 26px;
  min-width: 42px;
  padding: 0 8px;
}

.trade-product-row time,
.trade-product-row span {
  color: #101828;
  font-size: 13px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.trade-product-row small {
  color: #475467;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.trade-product-delete-form {
  align-items: center;
  display: flex;
  justify-content: center;
  justify-self: center;
  margin: 0;
}

.trade-product-delete-form button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #667085;
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  font-weight: 650;
  justify-content: center;
  line-height: 1;
  min-height: 28px;
  padding: 0 6px;
}

.trade-product-delete-form button:hover {
  background: #fef3f2;
  color: #b42318;
}

.trade-project-list {
  display: grid;
  gap: 0;
  min-width: 980px;
  padding: 0;
}

.trade-project-head,
.trade-project-row {
  align-items: center;
  display: grid;
  grid-template-columns: 52px 118px 1.15fr 1fr 1fr .67fr .67fr;
  gap: 12px;
}

.trade-project-head {
  border-bottom: 1px solid var(--line);
  color: #667085;
  font-size: 12px;
  font-weight: 650;
  min-height: 38px;
  padding: 0 16px;
}

.trade-project-head span {
  text-align: center;
}

.trade-project-row {
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: inherit;
  min-height: 86px;
  padding: 6px 16px;
  position: relative;
}

.trade-project-row-main {
  align-items: center;
  color: inherit;
  cursor: pointer;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 52px 118px 1.15fr 1fr 1fr .67fr .67fr;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}

.trade-project-row a {
  text-decoration: none;
}

.trade-project-row:hover {
  background: #f8fafc;
}

.trade-project-row-main:focus-visible {
  background: #f8fafc;
  outline: 2px solid #84caff;
  outline-offset: -2px;
}

.trade-project-id,
.trade-project-date,
.trade-project-name,
.trade-project-cell,
.trade-project-row time {
  min-width: 0;
  padding: 0;
}

.trade-project-id {
  padding-left: 0;
  padding-right: 0;
}

.trade-project-cell {
  background: transparent;
}

.trade-project-id {
  align-items: center;
  background: transparent;
  display: flex;
  justify-content: center;
}

.trade-project-name {
  background: transparent;
}

.trade-project-id,
.trade-project-date,
.trade-project-name {
  color: inherit;
  text-decoration: none;
}

.trade-project-list--processing .trade-project-name strong {
  display: block;
  line-height: 1.35;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.trade-project-name strong,
.trade-project-cell span,
.trade-project-date time,
.trade-project-row time {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trade-project-id strong,
.trade-project-name strong {
  color: #172033;
  font-size: 14px;
}

.trade-project-id strong {
  align-items: center;
  background: #eef4ff;
  border: 1px solid #b2ccff;
  border-radius: 6px;
  color: #1849a9;
  display: inline-flex;
  font-size: 13px;
  font-weight: 650;
  justify-content: center;
  line-height: 1;
  min-height: 26px;
  min-width: 42px;
  padding: 0 6px;
}

.trade-project-row.is-approved .trade-project-id strong {
  background: #fff;
  border-color: #d0d5dd;
  color: #111827;
}

.trade-project-id small,
.trade-project-name small {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: #6b7280;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trade-project-cell {
  align-items: start;
  align-self: stretch;
  background: #f8fafc;
  border: 1px solid #e4e7ec;
  border-radius: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  justify-items: start;
  min-height: 54px;
  padding: 7px 32px 7px 8px;
  position: relative;
  text-align: left;
}

.trade-project-cell span {
  color: #344054;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  white-space: pre-line;
}

.trade-project-row time {
  font-size: 11px;
  line-height: 1.35;
  overflow: visible;
  overflow-wrap: anywhere;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
}

.trade-project-date {
  display: block;
}

.trade-project-cell strong {
  bottom: 6px;
  display: inline-grid;
  height: 20px;
  min-width: 20px;
  place-items: center;
  position: absolute;
  right: 8px;
  border-radius: 4px;
  background: #101828;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.16);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 0 6px;
}

.trade-project-cell b {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #d92d20;
  color: #ffffff;
  font-size: 11px;
}

.trade-project-delete-form {
  display: flex;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.trade-project-delete-form button {
  align-items: center;
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: 4px;
  color: #b42318;
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  line-height: 1;
  padding: 0 7px;
}

.trade-project-delete-form button:hover {
  background: #fee4e2;
  color: #912018;
}

.trade-product-category-list {
  display: grid;
  width: 100%;
}

.trade-top-shell:not(.layout-contract-shell) .trade-product-category-list {
  overflow-x: auto;
  overflow-y: visible;
  padding-top: 50px;
}

.trade-product-category-head,
.trade-product-category-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(240px, 1fr) 96px 112px;
  min-width: 0;
  padding: 0 16px;
}

.trade-top-shell:not(.layout-contract-shell) .trade-product-category-head {
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  color: #475467;
  font-size: 12px;
  font-weight: 750;
  left: 248px;
  min-height: 50px;
  position: fixed;
  right: 0;
  text-align: center;
  top: calc(var(--app-header-height) + var(--trade-topbar-height));
  z-index: 22;
}

.trade-product-category-head.has-back {
  grid-template-columns: auto minmax(240px, 1fr) 96px 112px;
}

.trade-product-category-head .trade-product-category-back-link {
  justify-self: start;
}

.trade-top-shell:not(.layout-contract-shell).is-sidebar-collapsed .trade-product-category-head {
  left: 56px;
}

.trade-product-category-row {
  background: #fff;
  border-bottom: 1px solid var(--line);
  color: #101828;
  font-size: 13px;
  font-weight: 600;
  min-height: 56px;
  text-decoration: none;
}

.trade-product-category-main {
  align-items: center;
  color: inherit;
  display: flex;
  min-height: 56px;
  min-width: 0;
  text-decoration: none;
}

.trade-product-category-main.is-clickable:hover {
  background: #f8fbff;
  color: #0f172a;
  text-decoration: none;
}

.trade-product-category-row span,
.trade-product-category-main span {
  overflow-wrap: anywhere;
  text-align: left;
}

.trade-product-category-row strong {
  align-items: center;
  color: #344054;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  justify-self: stretch;
  min-width: 0;
  text-align: center;
}

.trade-product-category-head > span:last-of-type {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  justify-self: stretch;
  min-width: 0;
  text-align: center;
}

.trade-product-category-row-actions {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  justify-self: end;
  min-height: 56px;
  width: 112px;
}

.trade-product-category-row-actions button,
.trade-product-category-add-button {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  height: 28px;
  justify-content: center;
  padding: 0 8px;
  white-space: nowrap;
}

.trade-product-category-add-button,
.trade-category-admin-button[data-category-admin-action^="create_"] {
  background: var(--action-create-bg);
  border-color: var(--action-create-border);
  color: #fff;
  flex: 0 0 auto;
  justify-self: end;
  min-width: 44px;
  padding: 0 10px;
  width: auto;
}

.trade-product-category-row-actions button:hover,
.trade-product-category-add-button:hover {
  background: #f8fafc;
  border-color: #98a2b3;
  color: #111827;
}

.trade-product-category-add-button:hover,
.trade-category-admin-button[data-category-admin-action^="create_"]:hover {
  background: var(--action-create-bg-hover);
  border-color: var(--action-create-bg-hover);
  color: #fff;
}

.trade-product-category-empty-actions {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
}

@media (min-width: 769px) {
  .trade-top-shell:not(.layout-contract-shell).trade-product-category-shell .trade-product-panel {
    scrollbar-gutter: stable;
  }

  .trade-top-shell:not(.layout-contract-shell).trade-product-category-shell .trade-product-category-head {
    right: 16px;
  }
}

.trade-empty {
  color: var(--muted);
  margin: 0;
  padding: 28px;
}

.trade-product-group-toolbar {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  min-height: 50px;
  padding: 6px 16px;
  flex: 0 0 auto;
  position: relative;
  top: auto;
  z-index: 12;
}

.trade-product-group-toolbar-main {
  align-items: center;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

body:has(.layout-contract-shell.trade-product-group-shell) {
  overflow-x: hidden;
  overflow-y: hidden;
}

.page:has(.layout-contract-shell.trade-product-group-shell) {
  height: calc(100dvh - var(--app-header-height));
  left: auto;
  min-height: 0;
  overflow: hidden;
  position: static;
  right: auto;
  top: auto;
  width: 100%;
}

.trade-product-group-toolbar-main strong {
  color: #101828;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
}

.trade-product-group-toolbar-main span {
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.trade-product-group-id {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #98a2b3;
  border-radius: 4px;
  color: #101828;
  display: inline-flex;
  min-height: 24px;
  padding: 0 8px;
}

.trade-product-group-toolbar .trade-product-group-id,
.trade-product-group-toolbar .trade-product-date-badge {
  box-sizing: border-box;
  height: 30px;
  min-height: 30px;
}

.trade-product-add-actions {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.trade-product-add-button,
.trade-product-row-action-button {
  align-items: center;
  background: var(--action-create-bg);
  border: 1px solid var(--action-create-border);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  min-height: 30px;
  padding: 0 10px;
  white-space: nowrap;
}

.trade-product-add-button:hover,
.trade-product-row-action-button:hover {
  background: var(--action-create-bg-hover);
  border-color: var(--action-create-bg-hover);
}

.trade-product-date-badge {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  color: #344054;
  display: inline-flex;
  min-height: 24px;
  padding: 0 8px;
}

.trade-product-banner-field {
  align-items: center;
  background: #f3f7ff;
  border: 1px solid #d8e3ff;
  border-radius: 6px;
  box-sizing: border-box;
  display: inline-flex;
  gap: 6px;
  height: 30px;
  line-height: 1;
  min-width: 0;
  padding: 0 8px;
}

.trade-product-banner-field span {
  color: #667085;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
}

.trade-product-banner-field input {
  background: transparent;
  border: 0;
  box-sizing: border-box;
  color: #102a56;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  height: 28px;
  line-height: 28px;
  min-width: 0;
  outline: 0;
  padding: 0;
}

.trade-product-banner-date input {
  min-width: 122px;
}

.trade-product-banner-name {
  flex: 0 0 420px;
  max-width: 420px;
}

.trade-product-banner-name input {
  font-size: 14px;
  width: 100%;
}

.trade-product-banner-date input {
  width: 94px;
}

.trade-product-banner-date {
  flex: 0 0 184px;
}

.trade-product-banner-category {
  flex: 0 0 180px;
}

.trade-product-banner-category input {
  width: 0;
}

.trade-product-category-picker {
  align-items: center;
  background: transparent;
  border: 0;
  color: #102a56;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  height: 28px;
  max-width: 112px;
  min-width: 112px;
  padding: 0;
  text-align: left;
}

.trade-product-category-picker span {
  color: inherit;
  display: block;
  flex: 1 1 auto;
  font-size: inherit;
  font-weight: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trade-product-category-picker span.is-category-empty,
.trade-product-cell-picker span.is-category-empty {
  color: #98a2b3;
  font-weight: 700;
}

.trade-product-banner-remark {
  flex: 1 1 260px;
  max-width: 520px;
}

.trade-product-banner-remark input {
  width: 100%;
}

.trade-product-banner-field:focus-within {
  background: #eff8ff;
  border-color: #2e90fa;
}

@media (min-width: 769px) {
  .trade-product-group-edit-shell .trade-product-group-toolbar-main {
    flex-wrap: nowrap;
  }

  .trade-product-group-edit-shell .trade-product-group-id {
    flex: 0 0 auto;
    justify-content: center;
  }
}

.trade-category-dialog {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.24);
  display: none;
  flex-direction: column;
  max-height: min(640px, calc(100vh - 96px));
  max-width: min(880px, calc(100vw - 28px));
  overflow: hidden;
  padding: 0;
  width: 860px;
}

.trade-category-dialog[open] {
  display: flex;
}

.trade-category-dialog::backdrop {
  background: rgba(16, 24, 40, 0.28);
}

.trade-category-dialog-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}

.trade-category-dialog-head strong {
  color: #101828;
  font-size: 14px;
}

.trade-category-dialog-head button {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  height: 30px;
  justify-content: center;
  line-height: 1;
  width: 30px;
}

.trade-category-dialog-body {
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  flex: 1 1 auto;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding: 10px;
}

.trade-category-search {
  display: grid;
  gap: 4px;
}

.trade-category-search span {
  color: #475467;
  font-size: 11px;
  font-weight: 800;
}

.trade-category-search input {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  box-sizing: border-box;
  color: #101828;
  font: inherit;
  font-size: 13px;
  height: 34px;
  padding: 0 10px;
  width: 100%;
}

.trade-category-dialog-actions {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-bottom: 10px;
}

.trade-category-admin-panel {
  background: #f8fafc;
  border: 1px solid #d9e2f1;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 10px;
}

.trade-category-admin-panel[hidden] {
  display: none;
}

.trade-category-dialog.is-category-admin-editing .trade-category-columns {
  display: none;
}

.trade-category-admin-panel-head,
.trade-category-admin-panel-actions {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.trade-category-admin-panel-head strong {
  color: #101828;
  font-size: 13px;
  font-weight: 850;
}

.trade-category-admin-panel-head button {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #475467;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.trade-category-admin-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trade-category-admin-grid label {
  display: grid;
  gap: 4px;
}

.trade-category-admin-grid span {
  color: #475467;
  font-size: 11px;
  font-weight: 750;
}

.trade-category-admin-grid input {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  height: 34px;
  padding: 0 9px;
}

.trade-category-admin-panel-actions {
  gap: 8px;
  justify-content: flex-end;
}

.trade-category-admin-panel-actions button {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  min-width: 76px;
  padding: 0 12px;
}

.trade-category-admin-panel-actions [data-category-admin-submit] {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.trade-category-admin-panel-actions .trade-category-admin-ai-button {
  background: #eef4ff;
  border-color: #84adff;
  color: #1d4ed8;
  margin-right: auto;
}

.trade-category-admin-panel-actions .trade-category-admin-ai-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.trade-category-action-back,
.trade-category-clear {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  height: 30px;
  justify-content: center;
  padding: 0 10px;
  text-align: center;
}

.trade-category-action-back {
  box-sizing: border-box;
  color: #111827;
  display: none;
  font-size: 13px;
  gap: 6px;
  margin-right: auto;
  min-height: 30px;
  padding: 0 12px 0 10px;
}

.trade-category-dialog[data-category-step="small"] .trade-category-action-back[data-category-action-back="small"],
.trade-category-dialog[data-category-step="item"] .trade-category-action-back[data-category-action-back="item"] {
  display: inline-flex;
}

.trade-category-dialog[data-category-searching="true"] .trade-category-action-back {
  display: none;
}

.trade-category-action-back::before {
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: "";
  display: block;
  height: 7px;
  transform: rotate(45deg);
  width: 7px;
}

.trade-category-action-back:hover {
  background: #f8fafc;
  border-color: #98a2b3;
  color: #111827;
}

.trade-category-columns {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.trade-category-dialog[data-category-step="large"]:not([data-category-searching="true"]) .trade-category-columns {
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.2fr);
}

.trade-category-column {
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.trade-category-dialog:not([data-category-step]) [data-category-step-panel]:not([data-category-step-panel="large"]),
.trade-category-dialog[data-category-step="large"] [data-category-step-panel]:not([data-category-step-panel="large"]),
.trade-category-dialog[data-category-step="small"] [data-category-step-panel]:not([data-category-step-panel="small"]),
.trade-category-dialog[data-category-step="item"] [data-category-step-panel]:not([data-category-step-panel="item"]) {
  display: none !important;
}

.trade-category-dialog[data-category-searching="true"] [data-category-frequent-panel],
.trade-category-dialog[data-category-step="small"] [data-category-frequent-panel],
.trade-category-dialog[data-category-step="item"] [data-category-frequent-panel] {
  display: none !important;
}

.trade-category-frequent-column .trade-category-choice {
  min-height: 42px;
}

.trade-category-column h3 {
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid #e4e7ec;
  color: #344054;
  display: flex;
  font-size: 12px;
  font-weight: 850;
  gap: 8px;
  margin: 0;
  padding: 9px 10px;
}

.trade-category-column h3 span {
  flex: 1 1 auto;
}

.trade-category-column h3 button {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #111827;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  height: 26px;
  padding: 0 9px;
}

.trade-category-column-list {
  display: grid;
  flex: 1 1 auto;
  gap: 4px;
  max-height: none;
  min-height: 0;
  overflow: auto;
  padding: 8px 8px 18px;
}

.trade-category-option {
  align-items: stretch;
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.trade-category-option-main,
.trade-category-choice.trade-category-option-main {
  align-items: center;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 6px;
  color: #101828;
  cursor: pointer;
  display: flex;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  justify-content: space-between;
  min-height: 34px;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.trade-category-option-main span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trade-category-option-main small {
  align-items: center;
  background: #f2f4f7;
  border: 1px solid #e4e7ec;
  border-radius: 999px;
  color: #475467;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 850;
  height: 18px;
  justify-content: center;
  min-width: 22px;
  padding: 0 5px;
}

.trade-category-option-main.is-active {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.trade-category-option-main.is-active small {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.trade-category-option-main:hover,
.trade-category-choice.trade-category-option-main:hover {
  background: #f3f7ff;
  border-color: #b6c7fb;
}

.trade-category-option-actions {
  align-items: center;
  display: flex;
  gap: 4px;
}

.trade-category-option-actions button,
.trade-category-admin-button {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  height: 28px;
  justify-content: center;
  padding: 0 8px;
  white-space: nowrap;
}

.trade-category-admin-button[data-category-admin-action^="create_"] {
  background: var(--action-create-bg);
  border-color: var(--action-create-border);
  color: #fff;
  flex: 0 0 auto;
  min-width: 44px;
  padding: 0 10px;
  width: auto;
}

.trade-category-option-actions button:hover,
.trade-category-admin-button:hover {
  background: #f8fafc;
  border-color: #98a2b3;
  color: #111827;
}

.trade-category-admin-button[data-category-admin-action^="create_"]:hover {
  background: var(--action-create-bg-hover);
  border-color: var(--action-create-bg-hover);
  color: #fff;
}

.trade-category-choice strong {
  flex: 0 0 auto;
  font-size: 13px;
}

.trade-category-choice span,
.trade-category-empty {
  color: #667085;
  flex: 1 1 auto;
  font-size: 11px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .trade-category-dialog {
    max-height: calc(100vh - 24px);
    width: min(520px, calc(100vw - 20px));
  }

  .trade-category-admin-grid {
    grid-template-columns: 1fr;
  }

  .trade-category-columns {
    grid-template-columns: 1fr;
  }

  .trade-category-dialog[data-category-step="large"]:not([data-category-searching="true"]) .trade-category-columns {
    grid-template-columns: 1fr;
  }

  .trade-category-column {
    min-height: 0;
  }

  .trade-category-column-list {
    padding-bottom: 22px;
  }
}

.trade-product-back-link:not(.button):not(.operation-compact-action) {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #111827;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 750;
  gap: 6px;
  justify-content: center;
  box-sizing: border-box;
  height: 30px;
  min-height: 30px;
  padding: 0 12px 0 10px;
  text-decoration: none;
}

.trade-product-back-link:not(.button):not(.operation-compact-action)::before {
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: "";
  display: block;
  height: 7px;
  transform: rotate(45deg);
  width: 7px;
}

.trade-product-back-link:not(.button):not(.operation-compact-action):hover {
  background: #f8fafc;
  border-color: #98a2b3;
  color: #111827;
  text-decoration: none;
}

.layout-context-strip {
  align-items: stretch;
  display: grid;
  flex: 1 1 auto;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  min-width: 0;
}

.layout-context-item {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 6px;
  box-sizing: border-box;
  display: grid;
  gap: 2px;
  min-height: 42px;
  min-width: 0;
  padding: 6px 10px;
}

.layout-context-item span,
.layout-context-item small {
  color: #667085;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

.layout-context-item strong {
  color: #101828;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.layout-context-item :is(strong, small) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layout-inline-create-form {
  align-items: end;
  display: grid;
  flex: 1 1 320px;
  gap: 6px 8px;
  grid-template-columns: minmax(180px, 1fr) auto;
  min-width: 0;
}

.layout-inline-create-form label {
  color: #475467;
  font-size: 11px;
  font-weight: 800;
  grid-column: 1 / -1;
  margin: 0;
}

.layout-inline-create-form input {
  min-width: 0;
}

.layout-inline-create-form button {
  white-space: nowrap;
}

.trade-product-header-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
}

.trade-product-header-line .trade-top-title-row {
  flex: 1 1 auto;
  min-width: 0;
}

.trade-product-header-back-link {
  align-self: center;
  flex: 0 0 auto;
  justify-self: start;
}

.trade-product-group-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-top: 0;
}

.trade-product-group-shell .trade-top-bar {
  align-items: start;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  left: 0;
  overflow: visible;
  padding: 8px 24px 10px;
  position: relative;
  right: 0;
  top: auto;
  width: 100%;
  z-index: 24;
}

.trade-product-group-shell .trade-top-bar-main {
  display: grid;
  gap: 6px;
  grid-column: 1;
  min-width: 0;
}

.trade-product-group-shell .trade-top-actions {
  align-self: end;
  grid-column: 2;
  margin: 0;
}

.trade-product-group-shell .trade-top-kicker {
  line-height: 18px;
  min-height: 18px;
  overflow: visible;
  order: 0;
}

.trade-product-group-shell .trade-product-header-line {
  flex-wrap: nowrap;
  margin-top: 0;
  min-height: 32px;
  order: 1;
}

.trade-product-group-shell .trade-product-header-line .trade-top-title-row {
  width: auto;
}

.trade-product-group-shell .trade-product-group-toolbar-main > strong {
  display: none;
}

@media (max-width: 760px) {
  .trade-product-group-shell .trade-top-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .trade-product-group-shell .trade-top-actions {
    grid-column: 1;
    justify-content: flex-start;
  }
}

.trade-product-edit-link {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  justify-content: center;
  margin-left: auto;
  min-height: 30px;
  min-width: 72px;
  padding: 0 14px;
  text-decoration: none;
}

.trade-product-edit-link {
  background: var(--action-ghost-bg);
  border: 1px solid var(--action-ghost-border);
  color: #1d2939;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.trade-product-edit-link:hover {
  background: var(--action-ghost-bg-hover);
  border-color: var(--action-ghost-border-hover);
  color: #101828;
  text-decoration: none;
}

.trade-product-group-edit-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.trade-product-edit-summary {
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 92px minmax(220px, 280px) 140px 140px minmax(220px, 1fr);
  padding: 12px 16px;
}

.trade-product-edit-summary label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.trade-product-edit-summary span {
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
}

.trade-product-edit-summary input {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #111827;
  font: inherit;
  min-height: 36px;
  padding: 6px 10px;
  text-align: left;
}

.trade-product-edit-summary input[readonly] {
  background: #f8fafc;
  color: #475467;
  font-weight: 800;
  text-align: center;
}

.trade-product-edit-table-rail {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 0 64px;
  -webkit-overflow-scrolling: touch;
}

.trade-product-edit-table {
  --trade-product-row-height: 44px;
  --trade-product-cell-inner-height: calc(var(--trade-product-row-height) - 1px);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  min-width: 3220px;
  table-layout: fixed;
  width: 3220px;
}

.trade-product-edit-table .trade-col-id,
.trade-product-group-table .trade-col-id {
  width: 70px;
}

.trade-product-edit-table .trade-col-row-action,
.trade-product-group-table .trade-col-row-action {
  width: 142px;
}

.trade-product-edit-table .trade-col-item-code,
.trade-product-group-table .trade-col-item-code {
  width: 170px;
}

.trade-product-edit-table .trade-col-item-code-main,
.trade-product-group-table .trade-col-item-code-main {
  width: 252px;
}

.trade-product-edit-table .trade-col-item-compact,
.trade-product-group-table .trade-col-item-compact {
  width: 88px;
}

.trade-product-edit-table .trade-col-sku,
.trade-product-group-table .trade-col-sku {
  width: 112px;
}

.trade-product-edit-table .trade-col-category,
.trade-product-group-table .trade-col-category,
.trade-product-edit-table .trade-col-detail,
.trade-product-group-table .trade-col-detail {
  width: 128px;
}

.trade-product-edit-table .trade-col-name,
.trade-product-group-table .trade-col-name {
  width: 220px;
}

.trade-product-edit-table .trade-col-jan,
.trade-product-group-table .trade-col-jan {
  width: 132px;
}

.trade-product-edit-table .trade-col-image,
.trade-product-group-table .trade-col-image {
  width: 82px;
}

.trade-product-edit-table .trade-col-tag,
.trade-product-group-table .trade-col-tag {
  width: 180px;
}

.trade-product-edit-table .trade-col-date,
.trade-product-group-table .trade-col-date {
  width: 120px;
}

.trade-product-edit-table th,
.trade-product-group-head th {
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid #eef2f6;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
  height: 36px;
  line-height: 1.15;
  padding: 0 4px;
  position: sticky;
  top: 0;
  text-align: center;
  vertical-align: middle;
  z-index: 3;
}

.trade-product-edit-table td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid #eef2f6;
  height: var(--trade-product-row-height);
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.trade-product-row-action-cell {
  background: #fff;
  white-space: nowrap;
}

.trade-product-row-action-button {
  margin: 0 2px;
  min-height: 28px;
  padding: 0 8px;
}

.trade-product-row-delete-button {
  background: #fff;
  border-color: #d0d5dd;
  color: #344054;
}

.trade-product-row-delete-button:hover {
  background: #f9fafb;
  border-color: #98a2b3;
}

.trade-product-bulk-dialog {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.22);
  max-width: min(560px, calc(100vw - 32px));
  padding: 0;
  width: 560px;
}

.trade-product-bulk-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35);
}

.trade-product-bulk-dialog-head,
.trade-product-bulk-dialog-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 12px 14px;
}

.trade-product-bulk-dialog-head {
  border-bottom: 1px solid var(--line);
}

.trade-product-bulk-dialog-head strong {
  color: #101828;
  font-size: 14px;
  font-weight: 800;
}

.trade-product-bulk-dialog-head button,
.trade-product-bulk-dialog-actions button {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
}

.trade-product-bulk-dialog-actions button[type="submit"] {
  background: var(--action-create-bg);
  border-color: var(--action-create-border);
  color: #fff;
}

.trade-product-bulk-dialog-body {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.trade-product-bulk-dialog-body p {
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.trade-product-bulk-dialog-body textarea {
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  font: inherit;
  font-size: 13px;
  min-height: 180px;
  padding: 10px;
  resize: vertical;
  width: 100%;
}

.settings-dialog {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.22);
  max-width: min(520px, calc(100vw - 32px));
  padding: 0;
  width: 520px;
}

.settings-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35);
}

.settings-dialog form {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
}

.settings-dialog h2 {
  border-bottom: 1px solid var(--line);
  color: #101828;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  margin: -16px -16px 2px;
  padding: 14px 16px;
}

.settings-field {
  display: grid;
  gap: 5px;
}

.settings-field span {
  color: #475467;
  font-size: 11px;
  font-weight: 800;
}

.settings-field input,
.settings-field select,
.settings-field textarea {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  box-sizing: border-box;
  color: #101828;
  font: inherit;
  font-size: 13px;
  min-height: 34px;
  padding: 7px 10px;
  text-align: left;
  width: 100%;
}

.settings-field .workplace-setting-name-input {
  text-align: left;
}

.settings-field input[readonly] {
  background: #f8fafc;
  color: #667085;
}

.dialog-actions {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 2px -16px -16px;
  padding: 12px 16px;
}

.primary-action,
.secondary-action {
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 32px;
  min-width: 72px;
  padding: 0 12px;
  text-decoration: none;
}

.primary-action {
  background: var(--action-create-bg);
  border: 1px solid var(--action-create-border);
  color: #fff;
}

.primary-action:hover {
  background: var(--action-create-bg-hover);
  border-color: var(--action-create-bg-hover);
}

.secondary-action {
  background: var(--action-ghost-bg);
  border: 1px solid var(--action-ghost-border);
  color: #344054;
}

.secondary-action:hover {
  background: var(--action-ghost-bg-hover);
  border-color: var(--action-ghost-border-hover);
  color: #101828;
}

.danger-action {
  align-items: center;
  background: #7f1d1d;
  border: 1px solid #7f1d1d;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 32px;
  min-width: 72px;
  padding: 0 12px;
  text-decoration: none;
}

.danger-action:hover {
  background: #991b1b;
  border-color: #991b1b;
}

.danger-action:disabled {
  background: var(--action-disabled-bg);
  border-color: var(--action-disabled-border);
  color: var(--action-disabled-text);
  cursor: not-allowed;
}

.settings-dialog .ai-translate-action,
.operation-compact-dialog .ai-translate-action,
.packing-list-outbound-photo-caption-translation-actions .ai-translate-action {
  align-items: center;
  background: #eef4ff;
  border: 1px solid #84adff;
  border-radius: 6px;
  color: #1d4ed8;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  margin-right: auto;
  min-height: 32px;
  min-width: 76px;
  padding: 0 12px;
}

.settings-dialog .ai-translate-action:disabled,
.operation-compact-dialog .ai-translate-action:disabled,
.packing-list-outbound-photo-caption-translation-actions .ai-translate-action:disabled {
  cursor: wait;
  opacity: 0.72;
}

.trade-product-edit-table input {
  background: #f3f7ff;
  border: 0;
  border-radius: 0;
  color: #102a56;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  height: var(--trade-product-cell-inner-height);
  margin: 0;
  padding: 0 6px;
  text-align: center;
  width: 100%;
}

.trade-product-edit-table input:hover {
  background: #eaf2ff;
}

.trade-product-cell-picker {
  align-items: center;
  background: #f3f7ff;
  border: 0;
  color: #102a56;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  height: var(--trade-product-cell-inner-height);
  justify-content: center;
  line-height: 1.2;
  margin: 0;
  overflow: hidden;
  padding: 0 6px;
  text-align: center;
  width: 100%;
}

.trade-product-cell-picker:hover {
  background: #eaf2ff;
}

.trade-product-cell-picker span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trade-product-cell-picker.trade-fit-sm {
  font-size: 11px;
}

.trade-product-cell-picker.trade-fit-xs {
  font-size: 10px;
  line-height: 1.15;
}

.trade-product-edit-table input.is-edited {
  background: #e8f2ff;
  color: #123b73;
  box-shadow: inset 0 0 0 1px #84c5ff;
}

.trade-product-edit-table input.is-duplicate-edit {
  background: #fff3d6;
  color: #7a3d00;
  box-shadow: inset 0 0 0 2px #f79009;
}

.trade-product-edit-table td.is-duplicate-sku-cell {
  background: #fff7e6;
  box-shadow: inset 0 0 0 2px #f79009;
}

.trade-product-edit-table td.is-duplicate-sku-cell input,
.trade-product-edit-table td.is-duplicate-sku-cell .trade-product-cell-picker {
  background: #fff3d6;
  color: #7a3d00;
}

.trade-product-edit-table td:first-child input,
.trade-product-edit-table td:nth-child(3) input,
.trade-product-edit-table td:nth-child(4) input,
.trade-product-edit-table td:nth-child(5) input,
.trade-product-edit-table td:nth-child(8) input,
.trade-product-edit-table td:nth-child(9) input,
.trade-product-edit-table td:nth-child(10) input,
.trade-product-edit-table td:nth-child(17) input,
.trade-product-edit-table td:nth-child(18) input,
.trade-product-edit-table td:nth-child(19) input,
.trade-product-edit-table td:nth-child(23) input,
.trade-product-edit-table td:nth-child(24) input {
  text-align: center;
}

.trade-product-readonly-cell {
  align-items: center;
  background: #fff;
  color: #475467;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  height: var(--trade-product-cell-inner-height);
  justify-content: center;
  line-height: 1.2;
  overflow: hidden;
  padding: 0 6px;
  text-align: center;
}

.trade-product-readonly-badge-cell {
  align-items: center;
  justify-content: center;
}

.trade-product-edit-table input.trade-fit-sm,
.trade-product-readonly-cell.trade-fit-sm {
  font-size: 11px;
}

.trade-product-edit-table input.trade-fit-xs,
.trade-product-readonly-cell.trade-fit-xs {
  font-size: 10px;
  line-height: 1.15;
}

.trade-product-edit-table input:focus,
.trade-product-edit-summary input:focus {
  background: #eff8ff;
  box-shadow: inset 0 0 0 1px #2e90fa;
  outline: 0;
}

.trade-product-edit-table input.is-edited:focus {
  background: #e8f2ff;
  box-shadow: inset 0 0 0 1px #84c5ff, 0 0 0 1px rgba(46, 144, 250, .18);
}

.trade-product-edit-table input.is-duplicate-edit:focus {
  background: #fff3d6;
  box-shadow: inset 0 0 0 2px #f79009, 0 0 0 1px rgba(247, 144, 9, .2);
}

.trade-product-form-warning {
  align-items: center;
  background: #fff7e6;
  border-bottom: 1px solid #fedf89;
  color: #7a2e0e;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 16px;
}

.layout-contract-shell.trade-product-group-shell .trade-top-layout {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 248px minmax(0, 1fr);
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.layout-contract-shell.trade-product-group-shell.is-sidebar-collapsed .trade-top-layout {
  grid-template-columns: 56px minmax(0, 1fr);
}

.layout-contract-shell.trade-product-group-shell .trade-product-panel {
  display: flex;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.layout-contract-shell.trade-product-group-shell .trade-product-scroll {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.layout-contract-shell.trade-product-group-shell .trade-product-group-toolbar {
  top: auto;
  z-index: 12;
}

.layout-contract-shell.trade-product-group-shell .trade-sidebar {
  align-self: stretch;
  height: auto;
  left: auto;
  min-height: 0;
  position: relative;
  top: auto;
  width: 248px;
  z-index: 8;
}

.layout-contract-shell.trade-product-group-shell.is-sidebar-collapsed .trade-sidebar {
  align-self: stretch;
  height: auto;
  left: auto;
  min-height: 0;
  position: relative;
  top: auto;
  width: 56px;
}

.layout-contract-shell.trade-product-group-shell .trade-product-panel {
  grid-column: 2;
}

.trade-product-group-table-rail {
  flex: 1 1 auto;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.trade-product-group-table-wrap {
  background: #fff;
  border-top: 0;
  border-radius: 0;
  margin: 0;
  overflow: visible;
  width: max-content;
}

.trade-product-group-table {
  --trade-product-row-height: 44px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0;
  font-size: 13px;
  min-width: 3270px;
  table-layout: fixed;
  width: 3270px;
}

.trade-product-group-fixed-head {
  background: #fff;
  border-radius: 0;
  display: none;
}

.trade-product-edit-fixed-head {
  background: #fff;
  border-radius: 0;
  display: none;
}

.trade-product-group-fixed-head .trade-product-group-table {
  background: #fff;
}

.trade-product-edit-fixed-head .trade-product-edit-table {
  background: #fff;
}

.trade-product-group-table-wrap .trade-product-group-table thead {
  display: table-header-group;
}

.trade-product-group-section-head {
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.trade-product-group-section-head th {
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 0;
  height: 28px;
  line-height: 1.15;
  padding: 0 6px;
  position: sticky;
  top: 0;
  text-align: center;
  vertical-align: middle;
  z-index: 3;
}

.trade-product-group-section-head th:last-child {
  border-right: 0;
}

.trade-product-group-head {
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.trade-product-group-head th {
  border-radius: 0;
  position: sticky;
  top: 0;
  white-space: normal;
}

.trade-product-group-head th:last-child {
  border-right: 0;
}

.trade-product-group-row {
  color: #101828;
  font-size: 12px;
  line-height: 1.25;
}

.trade-product-group-row td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid #eef2f6;
  height: var(--trade-product-row-height);
  min-height: var(--trade-product-row-height);
  overflow: visible;
  padding: 0 6px;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
}

.trade-product-group-row td:first-child {
  text-align: center;
}

.trade-product-cell-text {
  display: block;
  font-size: 12px;
  max-width: 100%;
  text-align: center;
}

.trade-product-cell-text.trade-fit-sm {
  font-size: 11px;
  line-height: 1.18;
}

.trade-product-cell-text.trade-fit-xs {
  font-size: 10px;
  line-height: 1.15;
}

.trade-product-picture-cell {
  padding: 2px 5px !important;
  position: relative;
  text-align: center;
}

.trade-product-picture-thumb {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  display: block;
  height: 30px;
  margin: 0 auto;
  object-fit: cover;
  position: relative;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  width: 40px;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .trade-product-picture-cell:hover {
    z-index: 20;
  }

  .trade-product-picture-cell:hover .trade-product-picture-thumb {
    border-color: #98a2b3;
    box-shadow: 0 14px 38px rgba(16, 24, 40, .24);
    cursor: zoom-in;
    transform: scale(4);
    z-index: 21;
  }
}

.trade-product-image-preview {
  inset: 0;
  position: fixed;
  z-index: 2000;
}

.trade-product-image-preview-backdrop {
  background: rgba(12, 17, 29, .62);
  border: 0;
  cursor: zoom-out;
  inset: 0;
  padding: 0;
  position: absolute;
  width: 100%;
}

.trade-product-image-preview-panel {
  align-items: center;
  display: flex;
  inset: 20px;
  justify-content: center;
  pointer-events: none;
  position: absolute;
}

.trade-product-image-preview-panel img {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 24px 80px rgba(12, 17, 29, .38);
  max-height: calc(100vh - 56px);
  max-width: calc(100vw - 56px);
  object-fit: contain;
  pointer-events: auto;
}

.trade-product-image-preview-close {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(12, 17, 29, .18);
  color: #101828;
  cursor: pointer;
  display: inline-flex;
  font-size: 22px;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  line-height: 1;
  pointer-events: auto;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 40px;
}

.trade-product-image-preview-nav {
  align-items: center;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(12, 17, 29, .2);
  color: #101828;
  cursor: pointer;
  display: inline-flex;
  font-size: 34px;
  font-weight: 700;
  height: 52px;
  justify-content: center;
  line-height: 1;
  padding: 0 0 4px;
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
}

.trade-product-image-preview-nav.is-prev {
  left: 18px;
}

.trade-product-image-preview-nav.is-next {
  right: 18px;
}

.trade-product-image-preview-counter {
  background: rgba(12, 17, 29, .72);
  border-radius: 999px;
  bottom: 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  left: 50%;
  letter-spacing: 0;
  padding: 7px 12px;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
}

@media (max-width: 700px) {
  .trade-product-image-preview-panel {
    inset: 12px;
  }

  .trade-product-image-preview-panel img {
    max-height: calc(100vh - 40px);
    max-width: calc(100vw - 40px);
  }

  .trade-product-image-preview-nav {
    height: 46px;
    width: 46px;
  }

  .trade-product-image-preview-nav.is-prev {
    left: 8px;
  }

  .trade-product-image-preview-nav.is-next {
    right: 8px;
  }
}

.trade-product-group-row td:last-child {
  border-right: 0;
}

.trade-product-id-badge {
  background: #f8fafc;
  border: 1px solid #d0d5dd;
  border-radius: 0;
  align-items: center;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  min-height: 24px;
  padding: 2px 6px;
}

.trade-product-sku-browser-button {
  color: #101828;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
}

.trade-product-sku-browser-button:hover,
.trade-product-sku-browser-button:focus-visible {
  background: #eef4ff;
  border-color: #84adff;
  outline: 0;
}

.item-sku-browser-dialog {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(12, 17, 29, .24);
  color: #101828;
  max-height: min(78vh, 720px);
  max-width: min(980px, calc(100vw - 48px));
  overflow: hidden;
  padding: 0;
  width: 860px;
}

.item-sku-browser-dialog::backdrop {
  background: rgba(16, 24, 40, .38);
}

.item-sku-browser-head {
  align-items: center;
  border-bottom: 1px solid #e4e7ec;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 16px 18px;
}

.item-sku-browser-head span,
.item-sku-browser-current span {
  color: #667085;
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.item-sku-browser-head strong {
  display: block;
  font-size: 19px;
  margin-top: 3px;
}

.item-sku-browser-head button:not(.operation-compact-action) {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  color: #344054;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-height: 38px;
  padding: 0 16px;
}

.item-sku-browser-current {
  align-items: baseline;
  background: #f8fafc;
  border-bottom: 1px solid #e4e7ec;
  display: flex;
  gap: 10px;
  padding: 10px 18px;
}

.item-sku-browser-current strong {
  font-size: 15px;
}

.item-sku-browser-body {
  max-height: calc(min(78vh, 720px) - 112px);
  overflow: auto;
  padding: 16px 18px 18px;
}

.item-sku-browser-group[hidden] {
  display: none !important;
}

.item-sku-browser-item {
  align-items: baseline;
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.item-sku-browser-item span {
  background: #f2f4f7;
  border-radius: 999px;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
}

.item-sku-browser-item strong {
  font-size: 16px;
}

.item-sku-browser-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
}

.item-sku-browser-table th,
.item-sku-browser-table td {
  border-bottom: 1px solid #e4e7ec;
  font-size: 12px;
  line-height: 1.3;
  padding: 10px 9px;
  text-align: left;
  vertical-align: middle;
}

.item-sku-browser-table th {
  background: #f8fafc;
  color: #475467;
  font-weight: 800;
}

.item-sku-browser-table tr.is-current td {
  background: #fff7ed;
  border-bottom-color: #fed7aa;
}

.item-sku-browser-table tr.is-current td:first-child {
  box-shadow: inset 4px 0 0 #f97316;
}

.item-sku-browser-table td strong {
  color: #101828;
}

.trade-empty-cell {
  color: var(--muted);
  padding: 28px;
  text-align: left;
}

@media (max-width: 840px) {
  :root {
    --app-header-height: 58px;
  }

  .app-header {
    align-items: center;
    left: 0;
    justify-content: space-between;
    padding: 8px 12px;
    height: auto;
    gap: 10px;
    flex-direction: row;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 300;
  }

  .brand {
    gap: 8px;
    min-width: 0;
  }

  .brand-mark {
    height: 34px;
    width: 34px;
  }

  .brand-copy strong {
    font-size: 13px;
  }

  .brand-copy small {
    display: none;
  }

  .top-nav {
    align-self: center;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: calc(100vw - 146px);
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-end;
    width: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .top-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-pill-button {
    min-height: 50px;
    min-width: 64px;
  }

  .top-nav a.nav-pill-button {
    padding: 0 18px;
  }

  .nav-icon-button,
  .language-menu-button {
    height: 50px;
    width: 50px;
  }

  .nav-icon-svg {
    height: 40px;
    width: 40px;
  }

  .top-nav .language-menu-panel {
    position: fixed;
    right: 14px;
    top: 62px;
    z-index: 310;
  }

  .page:has(.personal-settings-shell) {
    padding-top: calc(var(--app-header-height) + 18px);
  }

  .database-top-bar {
    align-items: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    padding: 12px 16px;
    position: static;
    top: auto;
    z-index: 24;
  }

  .database-top-bar-main {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .database-top-kicker {
    font-size: 11px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .database-top-kicker::-webkit-scrollbar {
    display: none;
  }

  .database-top-title-row {
    align-items: center;
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .database-top-title-row h1 {
    font-size: 16px;
    line-height: 1.15;
  }

  .database-top-title-row span {
    min-height: 24px;
    min-width: 32px;
    padding: 0 8px;
  }

  .database-top-actions {
    align-self: end;
    justify-content: flex-end;
    width: auto;
  }

  .workplace-top-bar {
    align-items: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    padding: 12px 16px;
    position: static;
    top: auto;
    z-index: 24;
  }

  .workplace-top-bar-main {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .workplace-top-kicker {
    font-size: 11px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .workplace-top-kicker::-webkit-scrollbar {
    display: none;
  }

  .workplace-top-title-row {
    align-items: center;
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .workplace-top-title-row h1 {
    font-size: 16px;
    line-height: 1.15;
  }

  .workplace-top-title-row span {
    min-height: 24px;
    min-width: 32px;
    padding: 0 8px;
  }

  .workplace-setting-title-line {
    gap: 8px;
    width: 100%;
  }

  .workplace-setting-title-line h1 {
    font-size: 16px;
  }

  .workplace-setting-title-line span {
    min-height: 24px;
    min-width: 32px;
    padding: 0 8px;
  }

  .workplace-top-actions {
    align-self: start;
    justify-content: flex-start;
    width: 100%;
  }

  .trade-top-bar {
    align-items: end;
    display: grid;
    gap: 8px 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    height: auto;
    min-height: 0;
    padding: 12px 16px;
    position: sticky;
    top: var(--app-header-height);
    z-index: 24;
  }

  .trade-top-bar-main {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 6px 10px;
    width: 100%;
  }

  .trade-top-kicker {
    font-size: 11px;
    gap: 6px;
  }

  .trade-top-title-row {
    gap: 8px;
  }

  .trade-top-title-row h1 {
    font-size: 16px;
    line-height: 1.15;
  }

  .trade-top-title-row span {
    min-height: 24px;
    min-width: 32px;
    padding: 0 8px;
  }

  .trade-top-actions {
    align-self: end;
    justify-content: flex-end;
    width: auto;
  }
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  .app-header {
    align-items: center;
    left: 0;
    justify-content: space-between;
    padding: 8px 12px;
    height: auto;
    gap: 10px;
    flex-direction: row;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 300;
  }

  .brand {
    gap: 8px;
    min-width: 0;
  }

  .brand-mark {
    height: 34px;
    width: 34px;
  }

  .brand-copy strong {
    font-size: 13px;
  }

  .brand-copy small {
    display: none;
  }

  .top-nav {
    align-self: center;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: calc(100vw - 146px);
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-end;
    width: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .top-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-pill-button {
    min-height: 50px;
    min-width: 64px;
  }

  .top-nav a.nav-pill-button {
    padding: 0 18px;
  }

  .nav-icon-button,
  .language-menu-button {
    height: 50px;
    width: 50px;
  }

  .nav-icon-svg {
    height: 40px;
    width: 40px;
  }

  .top-nav .language-menu-panel {
    position: fixed;
    right: 14px;
    top: 62px;
    z-index: 310;
  }

  .page {
    width: min(100% - 20px, 1220px);
    padding-top: calc(var(--app-header-height) + 18px);
  }

.page:has(.trade-top-shell),
.page:has(.database-top-shell),
.page:has(.workplace-top-shell),
.page:has(.home-shell) {
  min-height: auto;
  overflow-x: hidden;
  width: 100%;
  padding-top: var(--app-header-height);
}

  .permission-launcher--home {
    grid-template-columns: 1fr;
    padding: 26px 14px 14px;
  }

  .trade-top-kicker {
    width: 100%;
  }

  .database-top-bar {
    align-items: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    padding: 12px 16px;
    position: static;
    top: auto;
    z-index: 24;
  }

  .database-top-bar-main {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100%;
  }

  .database-top-kicker {
    font-size: 11px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .database-top-kicker::-webkit-scrollbar {
    display: none;
  }

  .database-top-title-row {
    align-items: center;
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .database-top-title-row h1 {
    font-size: 16px;
    line-height: 1.15;
  }

  .database-top-title-row span {
    min-height: 24px;
    min-width: 32px;
    padding: 0 8px;
  }

  .database-top-shell {
    background: #fff;
    margin-left: 0;
    min-height: calc(100dvh - var(--app-header-height));
    padding-top: 0;
    width: 100%;
    max-width: none;
  }

  .database-top-panel {
    background: #fff;
    min-height: auto;
  }

  .database-top-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 16px;
    padding-right: 16px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .database-top-tabs::-webkit-scrollbar {
    display: none;
  }

  .database-top-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding-left: 16px;
    padding-right: 16px;
  }

  .database-top-search {
    flex-basis: auto;
    width: 100%;
  }

  .database-top-toolbar button {
    align-self: flex-start;
  }

  .database-top-table-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .database-top-actions {
    align-self: start;
    justify-content: flex-start;
    width: 100%;
  }

  .database-top-shell .database-workplace-list {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 16px;
  }

  .workplace-top-bar {
    align-items: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    padding: 12px 16px;
    position: static;
    top: auto;
    z-index: 24;
  }

  .workplace-top-bar-main {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100%;
  }

  .workplace-top-kicker {
    font-size: 11px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .workplace-top-kicker::-webkit-scrollbar {
    display: none;
  }

  .workplace-top-title-row {
    align-items: center;
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .workplace-top-title-row h1 {
    font-size: 16px;
    line-height: 1.15;
  }

  .workplace-top-title-row span {
    min-height: 24px;
    min-width: 32px;
    padding: 0 8px;
  }

  .workplace-top-actions {
    align-self: start;
    justify-content: flex-start;
    width: 100%;
  }

  .workplace-top-shell {
    padding-top: 0;
  }

  .workplace-top-tabs {
    padding-left: 16px;
    padding-right: 16px;
  }

  .workplace-top-panel .workplace-card-list {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 16px;
  }

  .database-top-shell .database-workplace-row,
  .workplace-top-panel .workplace-card {
    align-items: start;
    box-sizing: border-box;
    gap: 12px 16px;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 154px;
    padding: 14px 16px;
    width: 100%;
  }

  .database-top-shell .database-workplace-card-main {
    grid-column: 1 / -1;
    min-height: 40px;
  }

  .workplace-top-panel .workplace-card-code {
    grid-column: 1;
    grid-row: 1;
  }

  .workplace-top-panel .workplace-card-name {
    align-self: center;
    grid-column: 2;
    grid-row: 1;
  }

  .database-top-shell .database-workplace-actions,
  .workplace-top-panel .workplace-card-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .workplace-setting-tabs,
  .workplace-setting-section-head {
    padding-left: 16px;
    padding-right: 16px;
  }

  .workplace-setting-layout {
    display: block;
    min-height: auto;
  }

  .workplace-setting-drawer {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    display: flex;
    gap: 8px;
    max-height: none;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 16px;
    position: sticky;
    scrollbar-width: none;
    top: calc(var(--app-header-height) + var(--database-topbar-height));
    z-index: 22;
  }

  .workplace-setting-drawer::-webkit-scrollbar {
    display: none;
  }

  .workplace-setting-drawer a {
    flex: 0 0 auto;
    min-width: 154px;
  }

  .workplace-trade-setting-form {
    padding: 14px 16px 24px;
  }

  .workplace-trade-setting-toolbar {
    align-items: stretch;
    margin: -14px -16px 14px;
    padding: 10px 16px;
  }

  .workplace-trade-setting-groups {
    gap: 14px;
  }

  .workplace-trade-setting-basic-list {
    max-width: none;
  }

  .workplace-trade-setting-mode-options {
    grid-template-columns: 1fr;
  }

  .workplace-trade-setting-group {
    padding: 10px;
  }

  .workplace-trade-setting-grid {
    grid-template-columns: 1fr;
  }

  #inspection-setting-group .workplace-trade-setting-grid {
    grid-template-areas: none;
    grid-template-columns: 1fr;
  }

  #inspection-report-setting,
  #inspection-level-setting,
  #summary-setting,
  #aql-setting {
    grid-area: auto;
  }

  .workplace-trade-setting-card-wide {
    grid-column: auto;
  }

  .workplace-trade-setting-row,
  .workplace-trade-setting-row.is-split {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .workplace-trade-setting-row.is-split > :nth-child(3) {
    grid-column: 2;
  }

  .workplace-trade-aql-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workplace-setting-menu {
    grid-template-columns: 1fr;
    padding-left: 16px;
    padding-right: 16px;
  }

  .workplace-setting-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .workplace-setting-tabs::-webkit-scrollbar {
    display: none;
  }

  .workplace-setting-table {
    font-size: 12px;
    min-width: 920px;
  }

  .workplace-setting-table th,
  .workplace-setting-table td {
    height: 42px;
    padding: 7px 10px;
  }

  .workplace-setting-personal-dialog-grid {
    grid-template-columns: 1fr;
  }

  body:has(.trade-top-shell) {
    overflow: hidden;
  }

  .page:has(.trade-top-shell) {
    height: 100dvh;
    overflow: hidden;
  }

  .trade-top-bar {
    align-items: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    left: 0;
    min-height: 0;
    padding: 12px 16px;
    position: fixed;
    right: 0;
    top: var(--app-header-height);
    width: 100%;
    z-index: 24;
  }

  .trade-top-bar-main {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .trade-top-kicker {
    font-size: 11px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .trade-top-kicker::-webkit-scrollbar {
    display: none;
  }

  .trade-top-title-row {
    align-items: center;
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .trade-top-title-row h1 {
    font-size: 16px;
    line-height: 1.15;
  }

  .trade-top-title-row span {
    min-height: 24px;
    min-width: 32px;
    padding: 0 8px;
  }

  .trade-top-actions {
    align-items: flex-start;
    align-self: start;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  .trade-top-actions a:not(.button):not(.operation-compact-action) {
    align-self: flex-start;
    white-space: nowrap;
  }

  .trade-top-shell {
    height: calc(100dvh - var(--app-header-height));
    overflow: hidden;
    padding-top: var(--trade-topbar-height);
  }

  .trade-top-layout {
    grid-template-columns: minmax(0, 1fr);
    height: calc(100dvh - var(--app-header-height) - var(--trade-topbar-height));
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
  }

  .trade-top-shell.is-sidebar-collapsed .trade-top-layout {
    grid-template-columns: minmax(0, 1fr);
    height: calc(100dvh - var(--app-header-height) - var(--trade-topbar-height));
    min-height: 0;
    overflow: hidden;
  }

  .trade-sidebar-backdrop {
    background: rgba(15, 23, 42, .18);
    border: 0;
    display: block;
    inset: var(--drawer-mobile-top) 0 0 0;
    opacity: 1;
    padding: 0;
    pointer-events: auto;
    position: fixed;
    transition: opacity .16s ease;
    z-index: 62;
  }

  .trade-sidebar {
    background: #f8fafc;
    border-right: 1px solid var(--line);
    box-shadow: 18px 0 36px rgba(15, 23, 42, .12);
    height: calc(100dvh - var(--drawer-mobile-top) - env(safe-area-inset-bottom, 0px));
    left: 0;
    max-width: min(248px, calc(100vw - 24px));
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: var(--drawer-mobile-top);
    width: min(248px, calc(100vw - 24px));
    z-index: 64;
  }

  .trade-sidebar-panel {
    opacity: 1;
    pointer-events: auto;
  }

  .trade-sidebar-group {
    gap: 4px;
  }

  .trade-sidebar-group::before {
    top: 44px;
  }

  .trade-sidebar-group h2 {
    margin: 16px 14px 6px;
  }

  .trade-sidebar-item {
    min-height: 34px;
  }

  .trade-top-shell.is-sidebar-collapsed .trade-sidebar {
    background: transparent;
    border-right: 0;
    box-shadow: none;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
    height: auto;
    left: calc(env(safe-area-inset-left, 0px) + 16px);
    min-height: 64px;
    overflow: visible;
    pointer-events: none;
    position: fixed;
    top: auto;
    width: 64px;
    z-index: 120;
  }

  .trade-top-shell.is-sidebar-collapsed .trade-sidebar-backdrop {
    opacity: 0;
    pointer-events: none;
  }

  .trade-top-shell:not(.is-sidebar-collapsed) .trade-sidebar-panel {
    opacity: 1;
    pointer-events: auto;
  }

  .trade-top-shell:not(.layout-contract-shell) .trade-product-panel {
    border-left: 0;
    height: 100%;
    margin: 0;
    min-height: 0;
    overflow: hidden;
  }

  .trade-top-shell.is-sidebar-collapsed .trade-sidebar-toggle {
    background: rgba(255, 255, 255, .96);
    border: 2px solid rgba(71, 84, 103, .72);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
    display: inline-flex;
    min-height: 64px;
    pointer-events: auto;
    position: relative;
    width: 64px;
    z-index: 121;
  }

  .trade-top-shell.is-sidebar-collapsed .trade-sidebar-toggle-icon {
    height: 22px;
    width: 22px;
  }

  .trade-top-shell:not(.layout-contract-shell) .trade-product-scroll {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .trade-top-shell:not(.layout-contract-shell) .trade-product-category-head,
  .trade-top-shell:not(.layout-contract-shell).is-sidebar-collapsed .trade-product-category-head {
    left: 0;
    right: 0;
    top: var(--drawer-mobile-top);
  }

  .trade-product-toolbar,
  .trade-empty {
    min-width: 780px;
  }

  .trade-product-controls {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: minmax(118px, 1fr) auto auto auto;
    min-width: 0;
    width: 100%;
  }

  .trade-search {
    flex: 1 1 150px;
    min-width: 0;
  }

  .trade-product-controls button,
  .trade-product-controls a,
  .trade-product-add-form {
    flex: 0 0 auto;
  }

  .trade-product-filter-form {
    display: grid;
    flex: 1 1 100%;
    gap: 8px;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .trade-product-filter-field {
    align-items: stretch;
    display: grid;
    gap: 4px;
    width: 100%;
  }

  .trade-product-filter-field > span {
    display: block;
  }

  .trade-product-filter-form select,
  .trade-product-filter-form input[type="search"] {
    min-width: 0;
    width: 100%;
  }

  .trade-product-filter-clear {
    justify-self: end;
    width: 36px;
  }

  .trade-top-shell:not(.layout-contract-shell) .trade-product-list {
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .trade-product-head,
  .trade-product-row {
    gap: 8px;
    grid-template-columns: 48px 150px minmax(240px, 1fr) 84px 44px;
    min-width: 612px;
  }

  .trade-product-row,
  .trade-product-row-main {
    min-height: 63px;
  }

  .trade-product-row-main {
    gap: 8px;
    grid-template-columns: 48px 150px minmax(240px, 1fr) 84px;
  }

  .trade-top-shell:not(.layout-contract-shell) .trade-project-list {
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .trade-project-head,
  .trade-project-row {
    min-width: 980px;
  }

  .trade-product-group-table {
    display: table;
    min-width: 3268px;
    overflow: visible;
    width: 3268px;
  }

  body:has(.layout-contract-shell.trade-product-group-shell) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .page:has(.layout-contract-shell.trade-product-group-shell) {
    bottom: auto;
    height: auto;
    left: auto;
    min-height: 100dvh;
    overflow: visible;
    position: static;
    right: auto;
    top: auto;
  }

  .layout-contract-shell.trade-product-group-shell {
    height: auto;
    overflow: visible;
  }

  .layout-contract-shell.trade-product-group-shell .trade-top-layout,
  .layout-contract-shell.trade-product-group-shell.is-sidebar-collapsed .trade-top-layout {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: calc(100dvh - var(--shell-header-offset, var(--app-header-height)) - var(--trade-topbar-height));
    min-width: 0;
    overflow: visible;
  }

  .layout-contract-shell.trade-product-group-shell .trade-product-panel {
    grid-column: 1;
    height: auto;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    width: 100%;
  }

  .layout-contract-shell.trade-product-group-shell .trade-product-scroll {
    height: auto;
    overflow: visible;
    overscroll-behavior: auto;
    touch-action: auto;
  }

  .trade-product-group-table-rail {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    padding-top: calc(var(--trade-product-group-toolbar-height, 50px) + var(--trade-product-group-fixed-head-height, 36px));
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .trade-product-edit-table-rail {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    padding-top: calc(var(--trade-product-group-toolbar-height, 50px) + var(--trade-product-group-fixed-head-height, 36px));
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .trade-product-group-shell .trade-product-group-toolbar {
    left: 0;
    position: fixed;
    right: 0;
    top: var(--drawer-mobile-top);
    width: 100%;
    z-index: 72;
  }

  .trade-product-group-fixed-head {
    background: #fff;
    display: block;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: calc(var(--drawer-mobile-top) + var(--trade-product-group-toolbar-height, 50px));
    width: 100vw;
    z-index: 70;
  }

  .trade-product-edit-fixed-head {
    background: #fff;
    display: block;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: calc(var(--drawer-mobile-top) + var(--trade-product-group-toolbar-height, 50px));
    width: 100vw;
    z-index: 70;
  }

  .trade-product-group-fixed-head .trade-product-group-table {
    transform: translateX(var(--trade-product-group-head-offset, 0px));
  }

  .trade-product-edit-fixed-head .trade-product-edit-table {
    transform: translateX(var(--trade-product-group-head-offset, 0px));
  }

  .trade-product-group-table-wrap .trade-product-group-table thead {
    display: none;
  }

  .trade-product-edit-table-rail > .trade-product-edit-table thead {
    display: none;
  }

  .trade-product-group-table-wrap {
    margin-top: 0;
    padding-top: 0;
  }

  .layout-contract-shell.trade-product-group-shell .trade-sidebar,
  .layout-contract-shell.trade-product-group-shell.is-sidebar-collapsed .trade-sidebar {
    left: 0;
    max-width: min(248px, calc(100vw - 24px));
    position: fixed;
    top: var(--drawer-mobile-top);
    width: min(248px, calc(100vw - 24px));
    z-index: 95;
  }

  .layout-contract-shell.trade-product-group-shell.is-sidebar-collapsed .trade-sidebar {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
    left: calc(env(safe-area-inset-left, 0px) + 16px);
    top: auto;
    width: 64px;
  }

  .hero,
  .page-hero,
  .card,
  .section-card,
  .form-panel {
    padding: 14px;
  }

  .list-row,
  .record-row,
  .workplace-row,
  .trade-row {
    align-items: flex-start;
    flex-direction: column;
  }

  body:not(:has(.layout-contract-shell)) table {
    display: block;
    overflow-x: auto;
  }

  .calendar-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .calendar-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-weekdays,
  .operation-calendar {
    min-width: 760px;
  }

  .calendar-shell {
    overflow-x: auto;
  }

  .operation-detail-row,
  .operation-grid {
    grid-template-columns: 1fr;
  }

  .auto-check-add,
  .auto-check-layout,
  .checklist-group-edit,
  .checklist-add-tile,
  .checklist-picker-head,
  .checklist-group-row,
  .checklist-item-head,
  .checklist-item-row,
  .auto-check-head,
  .auto-check-row {
    grid-template-columns: 1fr;
  }

  .auto-check-add.product-target,
  .auto-check-head.product-target,
  .auto-check-row.product-target,
  .mail-recipient-grid,
  .mail-recipient-add,
  .mail-recipient-row,
  .mail-template-grid,
  .mail-token-list div,
  .factory-survey-hero,
  .factory-survey-add,
  .factory-survey-list-head,
  .factory-survey-row,
  .factory-survey-actions,
  .factory-group-head,
  .factory-group-row,
  .factory-detail-hero,
  .factory-detail-grid {
    grid-template-columns: 1fr;
  }

}

/* SU settings bridge: legacy SU pages inherit the same drawer rhythm. */
.page .su-setting-menu,
.page .su-setting-menu * {
  writing-mode: horizontal-tb;
}

.page .su-setting-menu {
  box-sizing: border-box;
  overflow-x: hidden;
}

.page .su-setting-menu .su-menu-section {
  display: grid;
  gap: 2px;
  margin: 0;
  min-width: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

.page .su-setting-menu .su-menu-section::before {
  background: #d0d5dd;
  bottom: 8px;
  content: "";
  left: 22px;
  position: absolute;
  top: 34px;
  width: 1px;
}

.page .su-setting-menu .su-menu-section-title {
  color: #344054;
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 12px 14px 4px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.page .su-setting-menu .su-menu-link {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #1f2937;
  display: flex;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  justify-content: flex-start;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 2px 0 2px var(--setting-drawer-item-indent, 38px);
  min-height: 30px;
  overflow: visible;
  padding: 5px 12px 5px 16px;
  text-align: left;
  text-decoration: none;
  text-overflow: clip;
  white-space: normal;
  width: calc(100% - var(--setting-drawer-item-indent, 38px));
}

.page .su-setting-menu .su-menu-link:hover,
.page .su-setting-menu .su-menu-link.is-active {
  background: #eceff3;
  color: #111827;
  font-weight: 700;
  text-decoration: none;
}

/* Common drawer contract v20260627-22.
   One source for shared drawer width, mobile top edge, collapsed rail, toggle, and menu spacing. */
.page [data-trade-sidebar] {
  --drawer-mobile-top: calc(var(--shell-header-offset, var(--app-header-height)) + var(--trade-mobile-topbar-height, 0px));
}

.page .common-drawer-shell {
  --common-drawer-width: 248px;
  --common-drawer-collapsed-width: 56px;
  --setting-drawer-item-indent: 38px;
  --setting-drawer-guide-x: -16px;
}

.page .common-drawer-shell.is-sidebar-collapsed .common-drawer > :not(.trade-sidebar-toggle):not(.common-drawer-toggle) {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.page .common-drawer-shell .workplace-setting-drawer.common-drawer {
  padding: 0 !important;
}

.page .trade-sidebar [data-trade-sidebar-toggle]:not(.common-drawer-toggle),
.page .common-drawer [data-trade-sidebar-toggle]:not(.common-drawer-toggle),
.page [data-trade-sidebar] [data-trade-sidebar-toggle]:not(.common-drawer-toggle) {
  display: none !important;
}

.page [data-trade-sidebar] > .trade-sidebar-toggle,
.page [data-trade-sidebar] > .common-drawer-toggle,
.page .trade-top-shell.is-sidebar-collapsed > .trade-sidebar-toggle,
.page .common-drawer-shell .common-drawer-toggle,
.page .common-drawer-shell.is-sidebar-collapsed .common-drawer-toggle {
  align-items: center;
  background: rgba(255, 255, 255, .96);
  border: 2px solid rgba(71, 84, 103, .72);
  border-radius: 999px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
  color: #344054;
  display: inline-flex;
  height: 64px;
  justify-content: center;
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  min-height: 64px;
  padding: 0;
  pointer-events: auto;
  position: fixed;
  width: 64px;
  z-index: 121;
}

.page [data-trade-sidebar] > .trade-sidebar-toggle .trade-sidebar-toggle-text,
.page [data-trade-sidebar] > .common-drawer-toggle .trade-sidebar-toggle-text,
.page .common-drawer-shell .common-drawer-toggle .trade-sidebar-toggle-text {
  display: none;
}

.page [data-trade-sidebar] > .trade-sidebar-toggle .trade-sidebar-toggle-icon,
.page [data-trade-sidebar] > .common-drawer-toggle .trade-sidebar-toggle-icon,
.page .common-drawer-shell .common-drawer-toggle .trade-sidebar-toggle-icon {
  border-color: #667085;
  height: 22px;
  width: 22px;
}

.page [data-trade-sidebar] > .trade-sidebar-toggle .trade-sidebar-toggle-icon::before,
.page [data-trade-sidebar] > .common-drawer-toggle .trade-sidebar-toggle-icon::before,
.page .common-drawer-shell .common-drawer-toggle .trade-sidebar-toggle-icon::before {
  background: #667085;
}

.page [data-trade-sidebar] > .trade-sidebar-toggle .trade-sidebar-toggle-icon::after,
.page [data-trade-sidebar] > .common-drawer-toggle .trade-sidebar-toggle-icon::after,
.page .common-drawer-shell .common-drawer-toggle .trade-sidebar-toggle-icon::after {
  background: #98a2b3;
}

.page .common-drawer-shell .workplace-setting-drawer > a,
.page .common-drawer-shell .common-drawer[data-drawer-kind="setting"] > .common-drawer-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #1f2937;
  display: flex;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  justify-content: flex-start;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 2px 0 2px var(--setting-drawer-item-indent);
  min-height: 30px;
  padding: 5px 12px 5px 16px;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  width: calc(100% - var(--setting-drawer-item-indent));
}

.page .common-drawer-shell .workplace-setting-drawer > a:hover,
.page .common-drawer-shell .workplace-setting-drawer > a.is-active,
.page .common-drawer-shell .common-drawer[data-drawer-kind="setting"] > .common-drawer-item:hover,
.page .common-drawer-shell .common-drawer[data-drawer-kind="setting"] > .common-drawer-item.is-active {
  background: #eceff3;
  color: #111827;
  font-weight: 700;
  text-decoration: none;
}

.page .common-drawer-shell .workplace-setting-drawer > a.is-child,
.page .common-drawer-shell .common-drawer[data-drawer-kind="setting"] > .common-drawer-item.is-child {
  margin: 2px 0 2px var(--setting-drawer-item-indent);
  padding: 5px 12px 5px 16px;
  width: calc(100% - var(--setting-drawer-item-indent));
}

.page .common-drawer-shell .workplace-setting-drawer > a:not(.is-child):has(+ a.is-child),
.page .common-drawer-shell .common-drawer[data-drawer-kind="setting"] > .common-drawer-item:not(.is-child):has(+ .common-drawer-item.is-child) {
  background: transparent;
  border-radius: 0;
  color: #344054;
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  margin: 16px 14px 6px;
  min-height: auto;
  padding: 0;
  width: auto;
}

.page .common-drawer-shell .workplace-setting-drawer > a:not(.is-child):has(+ a.is-child):hover,
.page .common-drawer-shell .workplace-setting-drawer > a:not(.is-child):has(+ a.is-child).is-active,
.page .common-drawer-shell .common-drawer[data-drawer-kind="setting"] > .common-drawer-item:not(.is-child):has(+ .common-drawer-item.is-child):hover,
.page .common-drawer-shell .common-drawer[data-drawer-kind="setting"] > .common-drawer-item:not(.is-child):has(+ .common-drawer-item.is-child).is-active {
  background: transparent;
  color: #344054;
  font-weight: 800;
}

.page .common-drawer-shell .workplace-setting-drawer > a:not(.is-child):has(+ a.is-child) strong,
.page .common-drawer-shell .common-drawer[data-drawer-kind="setting"] > .common-drawer-item:not(.is-child):has(+ .common-drawer-item.is-child) strong {
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.page .common-drawer-shell .workplace-setting-drawer strong,
.page .common-drawer-shell .workplace-setting-drawer a.is-child strong {
  color: inherit;
  font-size: 14px;
  font-weight: inherit;
  line-height: 1.25;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.page .common-drawer-shell .workplace-setting-drawer span {
  margin-left: auto;
}

.page .common-drawer-shell .workplace-setting-drawer > a.is-child::before,
.page .common-drawer-shell .common-drawer[data-drawer-kind="setting"] > .common-drawer-item.is-child::before {
  background: #d0d5dd;
  bottom: -8px;
  content: "";
  left: var(--setting-drawer-guide-x);
  position: absolute;
  top: -8px;
  width: 1px;
}

.page .common-drawer-shell .workplace-setting-drawer > a:not(.is-child) + a.is-child::before,
.page .common-drawer-shell .common-drawer[data-drawer-kind="setting"] > .common-drawer-item:not(.is-child) + .common-drawer-item.is-child::before {
  top: -10px;
}

.page .common-drawer-shell .workplace-setting-drawer > a.is-child:last-child::before,
.page .common-drawer-shell .workplace-setting-drawer > a.is-child:has(+ a:not(.is-child))::before,
.page .common-drawer-shell .common-drawer[data-drawer-kind="setting"] > .common-drawer-item.is-child:last-child::before,
.page .common-drawer-shell .common-drawer[data-drawer-kind="setting"] > .common-drawer-item.is-child:has(+ .common-drawer-item:not(.is-child))::before {
  bottom: 10px;
}

.page .su-setting-page .su-setting-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

@media (min-width: 761px) {
  .page [data-trade-sidebar] .trade-sidebar > [data-trade-sidebar-toggle] {
    align-items: center !important;
    background: #f8fafc !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line, #d9e1ea) !important;
    border-radius: 0 !important;
    bottom: auto !important;
    box-shadow: none !important;
    display: inline-flex !important;
    height: 50px !important;
    justify-content: flex-end !important;
    left: auto !important;
    min-height: 50px !important;
    padding: 0 12px 0 8px !important;
    pointer-events: auto !important;
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    z-index: 1 !important;
  }

  .page [data-trade-sidebar].is-sidebar-collapsed .trade-sidebar > [data-trade-sidebar-toggle] {
    justify-content: center !important;
    padding: 0 !important;
  }
}

@media (max-width: 760px) {
  .page .common-drawer-shell.is-sidebar-collapsed .su-setting-menu > :not(.trade-sidebar-toggle):not(.common-drawer-toggle) {
    display: none;
    opacity: 0;
    pointer-events: none;
  }
}


/* Drawer toggle icon refresh v20260628-01.
   Use a sidebar glyph with directional chevron instead of the old abstract bars. */
.page .trade-sidebar-toggle .trade-sidebar-toggle-icon,
.page .common-drawer-toggle .trade-sidebar-toggle-icon,
.page [data-trade-sidebar] [data-trade-sidebar-toggle] .trade-sidebar-toggle-icon {
  background: transparent !important;
  border: 1.6px solid #667085 !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  height: 22px !important;
  margin-left: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  position: relative !important;
  width: 26px !important;
}

.page .trade-sidebar-toggle .trade-sidebar-toggle-icon::before,
.page .common-drawer-toggle .trade-sidebar-toggle-icon::before,
.page [data-trade-sidebar] [data-trade-sidebar-toggle] .trade-sidebar-toggle-icon::before {
  background: #98a2b3 !important;
  border-radius: 999px !important;
  bottom: 4px !important;
  content: "" !important;
  left: 6px !important;
  position: absolute !important;
  top: 4px !important;
  width: 1.5px !important;
}

.page .trade-sidebar-toggle .trade-sidebar-toggle-icon::after,
.page .common-drawer-toggle .trade-sidebar-toggle-icon::after,
.page [data-trade-sidebar] [data-trade-sidebar-toggle] .trade-sidebar-toggle-icon::after {
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid #344054 !important;
  border-top: 2px solid #344054 !important;
  bottom: auto !important;
  content: "" !important;
  height: 7px !important;
  left: 14px !important;
  position: absolute !important;
  right: auto !important;
  top: 6px !important;
  transform: rotate(-45deg) !important;
  width: 7px !important;
}

.page .is-sidebar-collapsed .trade-sidebar-toggle .trade-sidebar-toggle-icon::after,
.page .is-sidebar-collapsed .common-drawer-toggle .trade-sidebar-toggle-icon::after,
.page [data-trade-sidebar].is-sidebar-collapsed [data-trade-sidebar-toggle] .trade-sidebar-toggle-icon::after {
  left: 11px !important;
  transform: rotate(135deg) !important;
}

.page .common-drawer-shell .common-drawer-toggle,
.page .common-drawer-shell.is-sidebar-collapsed .common-drawer-toggle,
.page [data-trade-sidebar] > .trade-sidebar-toggle,
.page [data-trade-sidebar] > .common-drawer-toggle {
  border-color: rgba(102, 112, 133, .42) !important;
}

/* Trade product layout contract v20260626-43.
   Shared by trade product, category, parts, and project pages. */
.layout-contract-shell {
  --layout-header-x: 32px;
  --layout-header-button-height: 34px;
  --trade-sidebar-width: 248px;
  --trade-sidebar-collapsed-width: 56px;
  --trade-content-button-height: 36px;
  --trade-table-head-bg: #f8fafc;
  --trade-table-head-border: var(--line, #d9e1ea);
  --trade-table-head-cell-border: #eef2f6;
  --trade-table-head-color: #344054;
  --trade-table-head-font-size: 12px;
  --trade-table-head-font-weight: 650;
  --trade-table-head-height: 50px;
  --trade-category-count-width: 88px;
  --trade-category-action-width: 112px;
  --trade-parts-count-width: 88px;
  --trade-parts-action-width: 96px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body:has(.layout-contract-shell):not(.settings-page-shell) .page,
body:has(.layout-contract-shell):not(.settings-page-shell) main.page {
  height: calc(100dvh - var(--app-header-height)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

@media (min-width: 841px) {
  body.settings-page-shell .page,
  body.settings-page-shell main.page {
    height: calc(100dvh - var(--app-header-height)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
}

@media (max-width: 840px) {
  body:has(.layout-contract-shell):not(.settings-page-shell) .page,
  body:has(.layout-contract-shell):not(.settings-page-shell) main.page {
    box-sizing: border-box !important;
    height: 100dvh !important;
    padding-top: var(--app-header-height) !important;
  }
}

.layout-contract-shell > .layout-foundation-header {
  background: #fff !important;
  border-bottom: 1px solid var(--line, #d9e1ea) !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  min-height: 0 !important;
  width: 100% !important;
  z-index: 120 !important;
}

.layout-contract-shell > .layout-foundation-header.page-header-shell {
  gap: 8px 16px !important;
  min-height: var(--database-topbar-height) !important;
  padding: 14px var(--layout-header-x, 32px) 10px !important;
}

.layout-contract-shell > .layout-foundation-header .page-breadcrumb-header {
  min-height: 20px !important;
}

.layout-contract-shell .layout-breadcrumb-header {
  align-items: center !important;
  box-sizing: border-box !important;
  color: var(--muted) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  gap: 7px !important;
  line-height: 1.35 !important;
  min-height: 20px !important;
  overflow: visible !important;
  padding: 0 !important;
  white-space: normal !important;
}

.layout-contract-shell .layout-breadcrumb-header a {
  color: #344054 !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}

.layout-contract-shell .layout-breadcrumb-header strong {
  color: #101828 !important;
  font-weight: 800 !important;
}

.layout-contract-shell .layout-breadcrumb-header span {
  color: var(--muted) !important;
  font-weight: 650 !important;
}

.layout-contract-shell .layout-breadcrumb-header a:hover {
  color: var(--accent-dark) !important;
  text-decoration: none !important;
}

.layout-contract-shell .layout-page-header {
  align-items: center !important;
  box-sizing: border-box !important;
  column-gap: 16px !important;
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-rows: auto !important;
  grid-template-columns: auto minmax(0, 1fr) max-content !important;
  min-height: 38px !important;
  padding: 0 !important;
  row-gap: 0 !important;
  width: 100% !important;
}

.layout-contract-shell .layout-page-header.layout-page-header-no-back {
  grid-template-columns: minmax(0, 1fr) max-content !important;
}

.layout-contract-shell .layout-back-link {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: var(--layout-header-button-height) !important;
}

.layout-contract-shell .layout-page-title {
  align-items: center !important;
  column-gap: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  row-gap: 4px !important;
}

.layout-contract-shell .layout-page-title h1 {
  color: #101828 !important;
  flex: 0 1 auto !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.layout-contract-shell .layout-page-title span {
  flex: 0 0 auto !important;
}

.layout-contract-shell .layout-page-title .layout-page-description {
  color: #667085 !important;
  flex: 0 0 100% !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.layout-contract-shell .layout-page-actions {
  align-items: center !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  height: var(--layout-header-button-height) !important;
  justify-content: flex-end !important;
  min-width: max-content !important;
}

.layout-contract-shell .layout-page-actions > :is(a, button) {
  align-items: center !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  color: #344054 !important;
  display: inline-flex !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  height: var(--layout-header-button-height) !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: var(--layout-header-button-height) !important;
  padding: 0 11px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.layout-contract-shell .layout-page-actions > :is(a, button):hover {
  background: #f0f4f8 !important;
  color: var(--accent-dark) !important;
  text-decoration: none !important;
}

.layout-contract-shell .layout-back-link,
.layout-contract-shell .layout-page-title,
.layout-contract-shell .layout-page-actions {
  align-self: center !important;
}

.layout-contract-shell .layout-page-header-no-back > .layout-page-title {
  grid-column: 1 !important;
}

.layout-contract-shell .layout-page-header-no-back > .layout-page-actions {
  grid-column: 2 !important;
}

.layout-contract-shell .page-title-header.layout-page-header {
  align-items: center !important;
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
}

.layout-contract-shell .page-title-header > .page-title-header-main {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  min-width: 0 !important;
  width: 100% !important;
}

.layout-contract-shell .page-title-header > .page-title-actions,
.layout-contract-shell .page-title-header > .page-breadcrumb-actions {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

.layout-contract-shell .page-title-header-main > .layout-page-title {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-content: flex-start !important;
  justify-self: start !important;
}

.layout-contract-shell > .trade-top-layout {
  align-items: stretch !important;
  display: grid !important;
  grid-template-columns: var(--trade-sidebar-width) minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.layout-contract-shell.is-sidebar-collapsed > .trade-top-layout {
  grid-template-columns: var(--trade-sidebar-collapsed-width) minmax(0, 1fr) !important;
}

.layout-contract-shell .trade-sidebar {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  min-width: 0 !important;
  bottom: auto !important;
  left: auto !important;
  overflow: hidden !important;
  position: relative !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
}

.layout-contract-shell .workplace-setting-drawer.trade-sidebar,
.layout-contract-shell .su-setting-menu.trade-sidebar {
  background: #f8fafc !important;
  border: 0 !important;
  border-right: 1px solid var(--line, #d9e1ea) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  height: auto !important;
  margin: 0 !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 10px 0 0 !important;
  position: relative !important;
  top: auto !important;
}

.layout-contract-shell.is-sidebar-collapsed .trade-sidebar {
  max-width: var(--trade-sidebar-collapsed-width) !important;
}

.layout-contract-shell .trade-sidebar-panel {
  align-content: start !important;
  align-items: start !important;
  flex: 1 1 auto !important;
  grid-auto-rows: max-content !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.layout-contract-shell .trade-sidebar-group {
  align-content: start !important;
  align-items: stretch !important;
}

.layout-contract-shell:not(.settings-contract-shell) .trade-product-panel,
.layout-contract-shell:not(.settings-contract-shell) .trade-product-scroll {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.layout-contract-shell:not(.settings-contract-shell) .trade-product-panel {
  align-self: stretch !important;
  grid-column: 2 !important;
  scrollbar-gutter: auto !important;
}

.layout-contract-shell:not(.settings-contract-shell) .trade-product-scroll {
  flex: 1 1 auto !important;
  overscroll-behavior: contain !important;
  touch-action: auto !important;
}

.layout-contract-shell .layout-content-header {
  align-items: center !important;
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 12px !important;
  min-height: 42px !important;
  overflow: visible !important;
  padding: 8px var(--layout-header-x) 4px !important;
}

.layout-contract-shell .layout-content-title {
  color: #101828;
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.3;
  margin: 0;
  min-width: 0;
}

.layout-contract-shell .layout-table-area {
  align-content: start !important;
  flex: 1 1 auto !important;
  grid-auto-rows: max-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: auto !important;
  overscroll-behavior: none !important;
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: auto !important;
}

.layout-contract-shell.trade-project-shell .trade-product-tabs {
  flex: 0 0 auto !important;
}

.layout-contract-shell.trade-project-shell .trade-project-controls {
  grid-template-columns: minmax(220px, 1fr) auto !important;
}

.layout-contract-shell.trade-project-shell .trade-project-list {
  align-content: start !important;
  grid-auto-rows: max-content !important;
  padding: 0 !important;
}

.layout-contract-shell.trade-project-shell .trade-project-head {
  align-items: center !important;
  background: var(--trade-table-head-bg) !important;
  border-bottom: 1px solid var(--trade-table-head-border) !important;
  box-sizing: border-box !important;
  color: var(--trade-table-head-color) !important;
  font-size: var(--trade-table-head-font-size) !important;
  font-weight: var(--trade-table-head-font-weight) !important;
  min-height: var(--trade-table-head-height) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
}

.layout-contract-shell.trade-project-shell .trade-project-head > span {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: center !important;
  min-height: calc(var(--trade-table-head-height) - 1px) !important;
  min-width: 0 !important;
  padding: 0 8px !important;
}

.layout-contract-shell .layout-table-area > table {
  border-collapse: collapse !important;
  color: #101828 !important;
  font-size: 13px !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  width: 100% !important;
}

.layout-contract-shell .layout-table-area > table th,
.layout-contract-shell .layout-table-area > table td {
  border-bottom: 1px solid var(--line, #d9e1ea) !important;
  border-right: 1px solid var(--trade-table-head-cell-border) !important;
  box-sizing: border-box !important;
  height: 56px !important;
  padding: 0 12px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.layout-contract-shell .layout-table-area > table th {
  background: var(--trade-table-head-bg) !important;
  color: var(--trade-table-head-color) !important;
  font-size: var(--trade-table-head-font-size) !important;
  font-weight: var(--trade-table-head-font-weight) !important;
  height: var(--trade-table-head-height) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
}

.layout-contract-shell .layout-table-area > table th:last-child,
.layout-contract-shell .layout-table-area > table td:last-child {
  border-right: 0 !important;
}

.settings-contract-shell .layout-table-area > .workplace-setting-table {
  min-width: 1120px !important;
  table-layout: auto !important;
}

.settings-contract-shell .layout-table-area > .workplace-setting-table th,
.settings-contract-shell .layout-table-area > .workplace-setting-table td {
  height: 44px !important;
  padding: 8px 12px !important;
}

.layout-contract-shell .trade-product-edit-table-rail.layout-table-area > .trade-product-edit-table {
  min-width: 3220px !important;
  table-layout: fixed !important;
  width: 3220px !important;
}

.layout-contract-shell .company-floating-address-table.layout-table-area > table {
  min-width: 820px !important;
  table-layout: auto !important;
}

.trade-parts-shell .workplace-setting-table-wrap {
  padding-top: 0 !important;
}

.trade-parts-shell .workplace-parts-setting-table {
  min-width: 0 !important;
  table-layout: fixed !important;
}

.trade-parts-shell .workplace-parts-setting-table :is(th, td):nth-child(2) {
  width: var(--trade-parts-count-width) !important;
}

.trade-parts-shell .workplace-parts-setting-table :is(th, td):nth-child(3),
.trade-parts-shell .workplace-parts-setting-table :is(th, td):nth-child(4) {
  width: var(--trade-parts-action-width) !important;
}

.trade-parts-shell .workplace-parts-setting-table .workplace-parts-name {
  text-align: left !important;
}

.trade-product-group-detail-shell .layout-table-area {
  flex: 0 1 auto !important;
  max-height: calc(100% - 49px) !important;
}

.layout-contract-shell :is(.trade-product-add-form, .trade-product-add-button, .trade-product-category-add-button, .trade-product-edit-link) {
  margin-left: auto !important;
}

.layout-contract-shell :is(.trade-product-add-form > button, .trade-product-add-button, .trade-product-category-add-button, .trade-product-body-back-link, .trade-product-category-back-link, .trade-product-edit-link) {
  align-items: center !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  height: var(--trade-content-button-height) !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: var(--trade-content-button-height) !important;
  white-space: nowrap !important;
}

.layout-contract-shell :is(.trade-product-add-form > button, .trade-product-add-button, .trade-product-category-add-button) {
  background: var(--action-create-bg) !important;
  border: 1px solid var(--action-create-border) !important;
  border-radius: 6px !important;
  color: #fff !important;
  padding: 0 12px !important;
}

.layout-contract-shell :is(.trade-product-add-form > button, .trade-product-category-add-button):hover {
  background: var(--action-create-bg-hover) !important;
  border-color: var(--action-create-bg-hover) !important;
  color: #fff !important;
}

.trade-product-group-detail-shell .trade-product-group-meta-toolbar,
.trade-product-category-shell .trade-product-category-toolbar {
  justify-content: flex-start !important;
}

.trade-company-row {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: right;
  width: 100%;
}

.trade-company-row:hover {
  background: #f8fafc;
}

.trade-company-row:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .22);
  outline-offset: -3px;
}

.trade-company-row strong {
  color: #101828;
}

html.has-company-floating-panel,
body.has-company-floating-panel {
  overflow: hidden;
  overscroll-behavior: none;
}

body.has-company-floating-panel {
  left: 0;
  position: fixed;
  right: 0;
  width: 100%;
}

.company-floating-backdrop {
  background: rgba(15, 23, 42, .18);
  inset: 0;
  position: fixed;
  touch-action: none;
  z-index: 119;
}

.company-floating-panel {
  --floating-panel-edge: 24px;
  --floating-panel-max-height: 900px;
  --floating-panel-max-width: 1320px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .5);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
  box-sizing: border-box;
  color: #101828;
  display: flex;
  flex-direction: column;
  height: min(var(--floating-panel-max-height), calc(100dvh - (var(--floating-panel-edge) * 2)));
  inset: var(--floating-panel-edge);
  margin: auto;
  max-height: calc(100dvh - (var(--floating-panel-edge) * 2));
  min-height: 520px;
  position: fixed;
  transform: none;
  width: min(var(--floating-panel-max-width), calc(100vw - (var(--floating-panel-edge) * 2)));
  z-index: 120;
}

.company-address-detail-panel {
  z-index: 121;
}

.company-address-detail-panel.is-address-editing {
  pointer-events: auto;
}

.company-address-detail-panel.is-address-editing::after {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 5;
}

.company-address-detail-panel.is-address-editing [data-company-address-detail-close] {
  display: none;
}

.company-floating-panel.is-company-name-editing,
.company-floating-panel.is-company-address-editing {
  z-index: 122;
}

.company-floating-panel[hidden],
.company-floating-backdrop[hidden] {
  display: none !important;
}

.company-floating-panel [hidden],
.company-floating-panel.is-company-name-editing [data-company-edit-open],
.company-floating-panel.is-company-address-editing [data-company-address-add-open],
.company-floating-panel.is-company-address-editing [data-company-address-edit-open],
.company-floating-panel.is-company-address-editing [data-company-address-delete-open] {
  display: none !important;
}

.company-floating-header {
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px;
  flex-wrap: nowrap;
}

.company-floating-header > div:first-child {
  align-items: baseline;
  display: flex;
  flex: 1 1 auto;
  gap: 12px;
  min-width: 0;
  order: 1;
}

.company-floating-actions {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: flex-end;
  margin-left: auto;
  order: 1;
}

.company-floating-actions button {
  align-items: center;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  color: #7c2d12;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  justify-content: center;
  line-height: 1;
  min-height: 36px;
  padding: 0 12px;
}

.company-floating-header p {
  color: #667085;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  margin: 0 0 6px;
}

.company-floating-header h2 {
  color: #101828;
  flex: 0 1 auto;
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-floating-header span {
  color: #667085;
  display: inline;
  flex: 0 1 auto;
  font-size: 13px;
  margin-top: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-floating-updated {
  color: #98a2b3;
  display: inline;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 0;
  white-space: nowrap;
}

.company-floating-updated span {
  color: inherit;
  display: inline;
  font-size: inherit;
  margin: 0;
}

.company-floating-close {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 22px;
  height: 36px;
  justify-content: center;
  line-height: 1;
  margin-left: 0;
  order: 1;
  width: 36px;
}

.company-floating-body {
  display: grid;
  gap: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px 22px 22px;
  -webkit-overflow-scrolling: touch;
}

.company-floating-form {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.company-floating-form[hidden] {
  display: none !important;
}

.company-floating-dialog {
  --floating-edit-edge: 24px;
  --floating-edit-max-width: 760px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .5);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .22);
  left: 50vw;
  max-height: calc(100dvh - (var(--floating-edit-edge) * 2));
  overflow: auto;
  overscroll-behavior: contain;
  position: fixed;
  top: 50dvh;
  transform: translate(-50%, -50%);
  width: min(var(--floating-edit-max-width), calc(100vw - (var(--floating-edit-edge) * 2)));
  z-index: 130;
  -webkit-overflow-scrolling: touch;
}

.company-floating-dialog-head {
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: -12px -12px 2px;
  padding: 12px;
}

.company-floating-dialog-head strong {
  color: #101828;
  font-size: 14px;
  line-height: 1.3;
}

.company-floating-dialog-head button {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 20px;
  height: 32px;
  justify-content: center;
  line-height: 1;
  width: 32px;
}

.company-floating-dialog-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.company-floating-dialog-head span {
  color: #667085;
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.company-floating-form label {
  display: grid;
  gap: 6px;
}

.company-floating-form label span {
  color: #667085;
  font-size: 11px;
  font-weight: 750;
}

.company-floating-form input,
.company-floating-form select {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  box-sizing: border-box;
  color: #101828;
  font: inherit;
  min-height: 36px;
  padding: 8px 10px;
  width: 100%;
}

.company-floating-form-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-floating-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.company-floating-form-actions button,
.company-floating-section-head button,
.company-floating-table-action {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  justify-content: center;
  line-height: 1;
  min-height: 32px;
  padding: 0 10px;
}

.company-floating-form-actions button[type="submit"] {
  background: var(--action-edit-bg);
  border-color: var(--action-edit-border);
  color: #fff;
}

.company-floating-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.company-floating-stats > div,
.company-floating-empty {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
}

.company-floating-stats span {
  color: #667085;
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 6px;
}

.company-floating-stats strong {
  color: #101828;
  display: block;
  font-size: 17px;
  line-height: 1.25;
}

.company-floating-section {
  display: grid;
  gap: 10px;
}

.company-floating-section-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.company-floating-section h3 {
  color: #101828;
  font-size: 15px;
  margin: 0;
}

.company-floating-empty {
  color: #667085;
  font-size: 13px;
}

.company-floating-address-table {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  overflow: auto;
}

.company-floating-address-table table {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 820px;
  width: 100%;
}

.company-floating-address-table th,
.company-floating-address-table td {
  border-bottom: 1px solid #e5e7eb;
  color: #101828;
  line-height: 1.45;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.company-floating-address-table th {
  background: #f8fafc;
  color: #344054;
  font-weight: 750;
  position: sticky;
  top: 0;
  z-index: 1;
}

.company-floating-address-table th:nth-child(1) {
  width: 28%;
}

.company-floating-address-table th:nth-child(2) {
  width: 46%;
}

.company-floating-address-table th:nth-child(3) {
  width: 16%;
}

.company-floating-address-table th:nth-child(4),
.company-floating-address-table td:nth-child(4),
.company-floating-address-table th:nth-child(5),
.company-floating-address-table td:nth-child(5) {
  text-align: right;
  white-space: nowrap;
}

.company-floating-table-action {
  min-height: 28px;
  padding: 0 8px;
}

.company-floating-table-action + .company-floating-table-action {
  margin-left: 6px;
}

.company-floating-table-action-danger {
  border-color: #fecaca;
  color: #b42318;
}

.company-floating-address-row {
  cursor: pointer;
}

.company-floating-address-row:hover td,
.company-floating-address-row:focus-visible td {
  background: #f8fafc;
}

.company-floating-address-row:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

.company-floating-address-table tbody tr:last-child td {
  border-bottom: 0;
}

.company-address-page-head,
.company-address-page-section,
.company-address-page-group {
  border-bottom: 1px solid #e5e7eb;
}

.company-floating-body > .company-address-page-head {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.company-floating-body > .company-address-page-list {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.company-address-detail-summary {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.company-address-detail-summary > div {
  align-items: baseline;
  display: flex;
  gap: 8px;
  min-height: 34px;
  min-width: 0;
  padding: 7px 10px;
}

.company-address-detail-summary > div:not(:nth-child(4n)) {
  border-right: 1px solid #e5e7eb;
}

.company-address-detail-summary > div:nth-child(n+5) {
  border-top: 1px solid #e5e7eb;
}

.company-address-detail-summary span {
  color: #667085;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.company-address-detail-summary strong {
  color: #101828;
  font-size: 12px;
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-address-detail-summary-compact {
  align-items: center;
  border: 0;
  display: flex;
  gap: 14px;
  grid-template-columns: none;
  overflow: visible;
  padding: 0 0 2px;
}

.company-address-detail-summary-compact strong {
  color: #667085;
  flex: 0 1 auto;
  font-size: 12px;
  font-weight: 650;
}

.company-address-detail-summary-compact strong + strong::before {
  color: #d0d5dd;
  content: "/";
  margin-right: 14px;
}

.company-address-detail-summary-compact button {
  align-items: center;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  color: #7c2d12;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 750;
  justify-content: center;
  line-height: 1;
  margin-left: auto;
  min-height: 30px;
  padding: 0 10px;
}

.company-address-detail-sections {
  display: grid;
  gap: 12px;
}

.company-address-detail-layout {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 320px;
  overflow: hidden;
}

.company-address-detail-drawer-toggle {
  display: none;
}

.company-address-detail-drawer {
  background: #f8fafc;
  border-right: 1px solid #e5e7eb;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 14px;
}

.company-address-detail-drawer section {
  display: grid;
  gap: 6px;
}

.company-address-detail-drawer h3 {
  color: #344054;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0;
  min-height: 34px;
  padding: 7px 10px;
}

.company-address-detail-drawer button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #475467;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  min-height: 34px;
  padding: 7px 10px;
  text-align: left;
}

.company-address-detail-drawer button.is-child {
  color: #98a2b3;
  font-weight: 650;
  margin-left: 18px;
  margin-top: 3px;
  padding-left: 14px;
}

.company-address-detail-drawer button:hover,
.company-address-detail-drawer button:focus-visible,
.company-address-detail-drawer button.is-active {
  background: #eef2f7;
  color: #101828;
}

.company-address-detail-drawer button.is-child:hover,
.company-address-detail-drawer button.is-child:focus-visible,
.company-address-detail-drawer button.is-child.is-active {
  color: #667085;
}

.company-address-detail-page {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.company-address-detail-page-head h3 {
  color: #101828;
  font-size: 16px;
  line-height: 1.35;
  margin: 0;
}

.company-address-detail-section {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.company-address-detail-section-head {
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
}

.company-address-detail-section-actions {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.company-address-detail-section-actions button {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  min-height: 30px;
  padding: 5px 10px;
}

.company-address-detail-section-head h3 {
  color: #101828;
  font-size: 14px;
  line-height: 1.35;
  margin: 0 0 3px;
}

.company-address-detail-section-head p {
  color: #667085;
  font-size: 11px;
  line-height: 1.35;
  margin: 0;
}

.company-address-detail-section-head strong {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  color: #344054;
  display: inline-flex;
  font-size: 12px;
  justify-content: center;
  min-width: 28px;
  padding: 3px 8px;
}

.company-address-detail-table {
  overflow: auto;
}

.company-address-detail-table table {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 760px;
  width: 100%;
}

.company-address-detail-table th,
.company-address-detail-table td {
  border-bottom: 1px solid #e5e7eb;
  color: #101828;
  line-height: 1.45;
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}

.company-address-detail-table th {
  background: #fff;
  color: #344054;
  font-weight: 750;
  position: sticky;
  top: 0;
}

.company-address-detail-table tr:last-child td {
  border-bottom: 0;
}

.company-address-detail-account-delete-form {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.company-address-detail-account-delete-form button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #667085;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 650;
  justify-content: center;
  line-height: 1;
  min-height: 28px;
  padding: 0 6px;
  white-space: nowrap;
}

.company-address-detail-account-delete-form button:hover {
  background: #fef3f2;
  color: #b42318;
  padding: 3px 8px;
}

.company-address-detail-account-delete-cell {
  text-align: right !important;
}

.company-address-detail-account-row {
  cursor: pointer;
}

.company-address-detail-account-row:hover td,
.company-address-detail-account-row:focus-visible td {
  background: #f8fafc;
}

.company-address-detail-account-row:focus-visible {
  outline: 2px solid rgba(29, 78, 216, .34);
  outline-offset: -2px;
}

.workplace-setting-account-detail-button {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  margin: 0;
  padding: 0;
  text-align: left;
}

.workplace-setting-account-detail-button:hover,
.workplace-setting-account-detail-button:focus-visible {
  color: #175cd3;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.company-account-detail-dialog {
  --floating-edit-max-width: 520px;
}

.company-account-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.company-account-detail-list > div {
  border-bottom: 1px solid #eef2f7;
  display: grid;
  gap: 4px;
  padding: 10px 2px;
}

.company-account-detail-list > div:last-child {
  border-bottom: 0;
}

.company-account-detail-list dt {
  color: #667085;
  font-size: 11px;
  font-weight: 750;
  margin: 0;
}

.company-account-detail-list dd {
  color: #101828;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.company-account-detail-list > div.company-account-detail-action-row {
  padding: 6px 2px 12px;
}

.company-account-detail-action-row dt {
  display: none;
}

.company-account-detail-action-row dd {
  display: flex;
}

.company-account-contact-list {
  display: grid;
  gap: 6px;
}

.company-account-contact-item {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.company-account-contact-item > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.company-account-contact-item form {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.company-account-contact-item button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #667085;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 650;
  justify-content: center;
  line-height: 1;
  min-height: 28px;
  padding: 0 6px;
  white-space: nowrap;
}

.company-account-contact-item button:hover {
  background: #fef3f2;
  color: #b42318;
  padding: 3px 8px;
}

.company-account-contact-open {
  align-items: center;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  color: #9a3412;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  justify-content: center;
  justify-self: flex-start;
  line-height: 1;
  min-height: 32px;
  padding: 0 10px;
}

.company-account-local-detail {
  align-items: start;
  display: grid;
  gap: 8px;
}

.company-account-memo-list,
.company-account-card-list {
  display: grid;
  gap: 10px;
  width: 100%;
}

.company-account-memo-item,
.company-account-card-item {
  display: grid;
  gap: 4px;
}

.company-account-local-delete-form {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.company-account-local-delete-form button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #667085;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 650;
  justify-content: center;
  line-height: 1;
  min-height: 28px;
  padding: 0 6px;
  white-space: nowrap;
}

.company-account-local-delete-form button:hover {
  background: #fef3f2;
  color: #b42318;
}

.company-account-memo-text {
  color: #101828;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
  margin: 0;
  min-height: 20px;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.company-account-local-meta {
  color: #98a2b3;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.company-account-detail-created {
  color: #98a2b3;
  display: block;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  margin-top: 2px;
}

.company-account-detail-created[hidden] {
  display: none !important;
}

.company-account-card-link {
  color: #175cd3;
  font-size: 13px;
  font-weight: 750;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.company-account-card-link:hover {
  text-decoration: underline;
}

.company-account-card-preview {
  background: #f8fafc;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  margin: 0;
  max-width: 360px;
  overflow: hidden;
  padding: 8px;
  text-decoration: none;
}

.company-account-card-preview[hidden] {
  display: none !important;
}

.company-account-card-preview:hover,
.company-account-card-preview:focus-visible {
  border-color: #98a2b3;
  box-shadow: 0 0 0 3px rgba(20, 104, 168, 0.12);
  outline: none;
}

.company-account-card-preview img {
  background: #fff;
  border-radius: 6px;
  display: block;
  max-height: 220px;
  object-fit: contain;
  width: 100%;
}

.company-account-card-preview figcaption {
  color: #667085;
  font-size: 11px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.company-account-local-open {
  align-items: center;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  color: #9a3412;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  justify-content: center;
  justify-self: flex-start;
  line-height: 1;
  min-height: 30px;
  padding: 0 10px;
}

.company-account-contact-form {
  display: grid;
  gap: 10px;
}

.company-account-contact-dialog,
.company-account-memo-dialog,
.company-account-card-dialog {
  --floating-edit-max-width: 560px;
  z-index: 1045 !important;
}

.company-account-contact-form[hidden],
.company-account-memo-dialog[hidden],
.company-account-card-dialog[hidden] {
  display: none !important;
}

.company-account-contact-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-account-contact-fields label,
.company-account-memo-field,
.company-account-card-field {
  display: grid;
  gap: 6px;
}

.company-account-contact-fields span,
.company-account-memo-field span,
.company-account-card-field span {
  color: #667085;
  font-size: 11px;
  font-weight: 750;
}

.company-account-contact-fields input,
.company-account-memo-field textarea,
.company-account-card-field input {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  box-sizing: border-box;
  color: #101828;
  font: inherit;
  padding: 8px 10px;
  width: 100%;
}

.company-account-contact-fields input,
.company-account-card-field input {
  min-height: 36px;
}

.company-account-memo-field textarea {
  min-height: 120px;
  resize: vertical;
}

.company-address-detail-empty {
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 14px;
}

.company-address-page-head {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(180px, .5fr);
}

.company-address-page-head > div {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
}

.company-address-page-head > div + div {
  border-left: 1px solid #e5e7eb;
}

.company-address-page-head span,
.company-address-page-link small,
.company-address-page-section-head p {
  color: #667085;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
  margin: 0;
}

.company-address-page-head strong {
  color: #101828;
  font-size: 14px;
  line-height: 1.45;
}

.company-address-page-head small {
  color: #667085;
  font-size: 12px;
  line-height: 1.4;
}

.company-address-page-list {
  display: grid;
}

.company-address-page-group {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}

.company-address-page-group h2 {
  background: #f8fafc;
  border-right: 1px solid #e5e7eb;
  color: #101828;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  padding: 18px;
}

.company-address-page-links {
  display: grid;
}

.company-address-page-link {
  align-items: center;
  color: #101828;
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 12px 18px;
  text-decoration: none;
}

.company-address-page-link + .company-address-page-link {
  border-top: 1px solid #e5e7eb;
}

.company-address-page-link:hover,
.company-address-page-link:focus-visible {
  background: #f8fafc;
}

.company-address-page-link span {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}

.company-address-page-section {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.company-address-page-section-head {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.company-address-page-section-head h2 {
  color: #101828;
  font-size: 18px;
  line-height: 1.35;
  margin: 0 0 4px;
}

.company-address-page-section-head a {
  color: #344054;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.company-address-page-empty {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #667085;
  font-size: 13px;
  line-height: 1.6;
  padding: 14px;
}

@media (max-width: 760px) {
  .company-floating-panel {
    --floating-panel-mobile-edge: 8px;
    border-radius: 8px;
    bottom: max(var(--floating-panel-mobile-edge), env(safe-area-inset-bottom, 0px));
    height: auto;
    inset:
      max(var(--floating-panel-mobile-edge), env(safe-area-inset-top, 0px))
      var(--floating-panel-mobile-edge)
      max(var(--floating-panel-mobile-edge), env(safe-area-inset-bottom, 0px))
      var(--floating-panel-mobile-edge);
    left: var(--floating-panel-mobile-edge);
    margin: 0;
    max-height: none;
    max-width: none;
    min-height: 0;
    right: var(--floating-panel-mobile-edge);
    top: max(var(--floating-panel-mobile-edge), env(safe-area-inset-top, 0px));
    transform: none;
    width: auto;
  }

  .company-floating-header {
    align-items: center;
    display: grid;
    gap: 8px 10px;
    grid-template-columns: minmax(0, 1fr) 44px;
    padding: 16px 16px 12px;
  }

  .company-floating-header > div:first-child {
    grid-column: 1;
    min-width: 0;
  }

  .company-floating-actions {
    display: flex;
    flex: 0 1 auto;
    grid-column: 1 / -1;
    justify-content: flex-end;
    justify-self: stretch;
    min-width: 0;
    order: 2;
    width: 100%;
  }

  .company-floating-actions button {
    max-width: 100%;
    min-height: 36px;
    min-width: 0;
    white-space: nowrap;
  }

  .company-floating-close {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .company-floating-body {
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .company-floating-form-grid {
    grid-template-columns: 1fr;
  }

  .company-floating-dialog {
    --floating-panel-mobile-edge: 8px;
    border-radius: 8px;
    bottom: max(var(--floating-panel-mobile-edge), env(safe-area-inset-bottom, 0px));
    left: var(--floating-panel-mobile-edge);
    max-height: none;
    right: var(--floating-panel-mobile-edge);
    top: max(var(--floating-panel-mobile-edge), env(safe-area-inset-top, 0px));
    transform: none;
    width: auto;
  }

  .company-floating-stats {
    grid-template-columns: 1fr;
  }

  .company-address-page-head,
  .company-address-page-group {
    grid-template-columns: 1fr;
  }

  .company-address-page-head > div + div,
  .company-address-page-group h2 {
    border-left: 0;
    border-right: 0;
  }

  .company-address-page-group h2 {
    border-bottom: 1px solid #e5e7eb;
  }

  .company-address-detail-summary {
    grid-template-columns: 1fr;
  }

  .company-address-detail-summary > div:not(:nth-child(4n)) {
    border-right: 0;
  }

  .company-address-detail-summary > div:nth-child(n+2) {
    border-top: 1px solid #e5e7eb;
  }

  .company-address-detail-layout {
    grid-template-columns: 1fr;
  }

  .company-address-detail-drawer-toggle {
    align-items: center;
    background: #f8fafc;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    color: #101828;
    display: flex;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 12px;
    text-align: left;
    width: 100%;
  }

  .company-address-detail-drawer-toggle span:last-child {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    display: block;
    height: 8px;
    margin-left: 10px;
    transform: rotate(45deg);
    transition: transform .16s ease;
    width: 8px;
  }

  .company-address-detail-panel.is-address-detail-drawer-open .company-address-detail-drawer-toggle span:last-child {
    transform: rotate(225deg);
  }

  .company-address-detail-drawer {
    display: none;
    gap: 6px;
    max-width: 100%;
    overflow-x: visible;
    padding: 8px;
    border-bottom: 1px solid #e5e7eb;
    border-right: 0;
  }

  .company-address-detail-panel.is-address-detail-drawer-open .company-address-detail-drawer {
    display: grid;
  }

  .company-address-detail-drawer section {
    display: grid;
  }

  .company-address-detail-drawer h3 {
    display: block;
  }

  .company-address-detail-drawer button {
    background: #fff;
    border: 1px solid #e5e7eb;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
    white-space: nowrap;
  }

  .company-address-detail-drawer button.is-child {
    margin-left: 18px;
    padding-left: 14px;
  }
}

.layout-contract-shell .layout-content-header > :is(.trade-product-back-link, .trade-product-body-back-link, .trade-product-category-back-link) {
  align-self: flex-start !important;
  margin-left: 0 !important;
  max-width: max-content !important;
  width: auto !important;
}

.layout-contract-shell .layout-content-header > .operation-toolbar-back {
  align-self: flex-start !important;
  margin-left: 0 !important;
}

.layout-contract-shell .operation-toolbar-edit {
  margin-left: auto !important;
}

.layout-contract-shell.trade-product-category-shell .trade-product-category-spacer {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.layout-contract-shell.trade-product-category-shell .trade-product-category-list {
  padding-top: 0 !important;
}

.layout-contract-shell.trade-product-category-shell :is(.trade-product-category-head, .trade-product-category-row),
.layout-contract-shell.trade-product-category-shell .trade-product-category-head.has-back {
  column-gap: 0 !important;
  grid-template-columns: minmax(0, 1fr) var(--trade-category-count-width) var(--trade-category-action-width) !important;
  padding: 0 16px !important;
}

.layout-contract-shell.trade-product-category-shell .trade-product-category-head {
  min-height: var(--trade-table-head-height) !important;
}

.layout-contract-shell.trade-product-category-shell .trade-product-category-head > span:first-child {
  grid-column: 1 !important;
}

.layout-contract-shell.trade-product-category-shell .trade-product-category-head > span:last-child {
  grid-column: 2 !important;
}

.layout-contract-shell :is(.trade-product-head, .trade-product-category-head) {
  align-items: center !important;
  background: var(--trade-table-head-bg) !important;
  border-bottom: 1px solid var(--trade-table-head-border) !important;
  box-sizing: border-box !important;
  color: var(--trade-table-head-color) !important;
  font-size: var(--trade-table-head-font-size) !important;
  font-weight: var(--trade-table-head-font-weight) !important;
  min-height: var(--trade-table-head-height) !important;
  padding: 0 16px !important;
  position: sticky !important;
  text-align: center !important;
  top: 0 !important;
  z-index: 3 !important;
}

.layout-contract-shell.trade-product-group-list-shell .trade-product-head {
  column-gap: 0 !important;
}

.layout-contract-shell :is(.trade-product-head > span, .trade-product-category-head > span) {
  align-items: center !important;
  border-right: 1px solid var(--trade-table-head-cell-border) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  justify-content: center !important;
  min-height: calc(var(--trade-table-head-height) - 1px) !important;
  min-width: 0 !important;
  padding: 0 8px !important;
}

.layout-contract-shell :is(.trade-product-head > span:last-child, .trade-product-category-head > span:last-child) {
  border-right: 0 !important;
}

.layout-contract-shell.trade-product-category-shell .trade-product-category-head,
.layout-contract-shell.trade-product-category-shell.is-sidebar-collapsed .trade-product-category-head {
  left: auto !important;
  right: auto !important;
}

.trade-product-group-detail-shell :is(.trade-product-group-head th, .trade-product-group-section-head th) {
  background: var(--trade-table-head-bg) !important;
  border-bottom: 1px solid var(--trade-table-head-border) !important;
  border-right: 1px solid var(--trade-table-head-cell-border) !important;
  box-sizing: border-box !important;
  color: var(--trade-table-head-color) !important;
  font-size: var(--trade-table-head-font-size) !important;
  font-weight: var(--trade-table-head-font-weight) !important;
  height: var(--trade-table-head-height) !important;
  line-height: 1.2 !important;
  padding: 0 8px !important;
  position: sticky !important;
  text-align: center !important;
  top: 0 !important;
  vertical-align: middle !important;
  z-index: 3 !important;
}

.trade-product-group-detail-shell :is(.trade-product-group-head th:last-child, .trade-product-group-section-head th:last-child) {
  border-right: 0 !important;
}

@media (max-width: 760px) {
  .layout-contract-shell {
    --layout-header-x: 16px;
  }

  .layout-contract-shell.trade-top-shell {
    height: calc(100dvh - var(--app-header-height)) !important;
    padding-top: 0 !important;
  }

  .layout-contract-shell > .trade-top-layout,
  .layout-contract-shell.is-sidebar-collapsed > .trade-top-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .layout-contract-shell .trade-product-panel {
    border-left: 0 !important;
    grid-column: 1 !important;
    width: 100% !important;
  }

  .layout-contract-shell .trade-sidebar {
    background: #f8fafc !important;
    border-right: 1px solid var(--line) !important;
    box-shadow: 18px 0 36px rgba(15, 23, 42, .12) !important;
    height: calc(100dvh - var(--drawer-mobile-top) - env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    max-width: min(248px, calc(100vw - 24px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: fixed !important;
    top: var(--drawer-mobile-top) !important;
    width: min(248px, calc(100vw - 24px)) !important;
    z-index: 95 !important;
  }

  .layout-contract-shell .workplace-setting-drawer.trade-sidebar,
  .layout-contract-shell .su-setting-menu.trade-sidebar {
    height: calc(100dvh - var(--drawer-mobile-top) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 10px 0 0 !important;
    position: fixed !important;
    top: var(--drawer-mobile-top) !important;
    width: min(var(--common-drawer-width, 248px), calc(100vw - 24px)) !important;
  }

  .layout-contract-shell:not(.is-sidebar-collapsed) .trade-sidebar-backdrop {
    background: rgba(15, 23, 42, .42) !important;
    display: block !important;
    inset: var(--drawer-mobile-top) 0 0 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    z-index: 130 !important;
  }

  .layout-contract-shell.is-sidebar-collapsed .trade-sidebar-backdrop,
  .settings-contract-shell.is-sidebar-collapsed .trade-sidebar-backdrop,
  .workplace-top-shell.is-sidebar-collapsed .trade-sidebar-backdrop {
    background: transparent !important;
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .layout-contract-shell:not(.is-sidebar-collapsed) .trade-sidebar {
    z-index: 140 !important;
  }

  .layout-contract-shell:not(.is-sidebar-collapsed) .trade-sidebar > [data-trade-sidebar-toggle] {
    align-items: center !important;
    background: #f8fafc !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line, #d9e1ea) !important;
    border-radius: 0 !important;
    bottom: auto !important;
    box-shadow: none !important;
    display: inline-flex !important;
    height: 42px !important;
    justify-content: flex-end !important;
    left: auto !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    pointer-events: auto !important;
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    z-index: 141 !important;
  }

  .layout-contract-shell.is-sidebar-collapsed .trade-sidebar > [data-trade-sidebar-toggle] {
    align-items: center !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 2px solid rgba(71, 84, 103, .72) !important;
    border-radius: 999px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 34px) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12) !important;
    display: inline-flex !important;
    height: 64px !important;
    justify-content: center !important;
    left: calc(env(safe-area-inset-left, 0px) + 16px) !important;
    min-height: 64px !important;
    padding: 0 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: auto !important;
    width: 64px !important;
    z-index: 141 !important;
  }

  .layout-contract-shell.is-sidebar-collapsed .trade-sidebar {
    background: transparent !important;
    border-right: 0 !important;
    box-shadow: none !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 34px) !important;
    height: auto !important;
    left: calc(env(safe-area-inset-left, 0px) + 16px) !important;
    min-height: 64px !important;
    overflow: visible !important;
    pointer-events: none !important;
    top: auto !important;
    width: 64px !important;
    z-index: 120 !important;
  }

  .layout-contract-shell.is-sidebar-collapsed .workplace-setting-drawer.trade-sidebar,
  .layout-contract-shell.is-sidebar-collapsed .su-setting-menu.trade-sidebar {
    height: auto !important;
    max-height: none !important;
    min-height: 64px !important;
    overflow: visible !important;
    padding: 0 !important;
    width: 64px !important;
  }

  .layout-contract-shell .layout-page-header,
  .layout-contract-shell .layout-page-header.layout-page-header-no-back {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 8px !important;
  }

  .layout-contract-shell .layout-page-header.layout-page-header-no-back {
    row-gap: 2px !important;
  }

  .layout-contract-shell :is(.layout-back-link, .layout-page-title, .layout-page-actions) {
    grid-column: 1 !important;
  }

  .layout-contract-shell .layout-page-actions {
    height: auto !important;
    justify-content: flex-start !important;
    max-height: none !important;
    min-height: var(--layout-header-button-height) !important;
    min-width: 0 !important;
  }

  .layout-contract-shell.company-list-shell .layout-page-actions {
    display: flex !important;
    gap: 6px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
    width: 100% !important;
  }

  .layout-contract-shell.company-list-shell .layout-page-actions::-webkit-scrollbar {
    display: none !important;
  }

  .layout-contract-shell.company-list-shell .layout-page-actions > :is(a, button) {
    color: #344054 !important;
    flex: 0 0 auto !important;
    font-size: 12px !important;
    min-width: max-content !important;
    padding: 0 10px !important;
    width: auto !important;
  }

  .layout-contract-shell .layout-content-header {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px var(--layout-header-x) !important;
  }

  .layout-contract-shell .layout-content-header .trade-search {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    width: 100% !important;
  }

  .layout-contract-shell .layout-content-header .trade-search input {
    min-width: 0 !important;
  }

  .layout-contract-shell .layout-content-header .trade-product-add-form {
    align-self: flex-end !important;
    flex: 0 0 auto !important;
  }

  .layout-contract-shell .layout-content-header .trade-product-filter-form {
    align-self: stretch !important;
    display: grid !important;
    flex: 1 1 100% !important;
    gap: 8px !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .layout-contract-shell .layout-content-header .trade-product-filter-field {
    align-items: stretch !important;
    display: grid !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .layout-contract-shell .layout-content-header .trade-product-filter-field > span {
    display: block !important;
  }

  .layout-contract-shell .layout-content-header .trade-product-filter-form select,
  .layout-contract-shell .layout-content-header .trade-product-filter-form input[type="search"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  .layout-contract-shell .layout-content-header .trade-product-filter-clear {
    justify-self: end !important;
    width: 36px !important;
  }

  .layout-contract-shell.company-list-shell .layout-content-header {
    align-items: end !important;
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .layout-contract-shell.company-list-shell .layout-content-header .trade-product-filter-form {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .layout-contract-shell.company-list-shell .layout-content-header .trade-product-filter-form select,
  .layout-contract-shell.company-list-shell .layout-content-header .trade-product-filter-form input[type="search"] {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .layout-contract-shell.company-list-shell .layout-content-header .trade-product-add-button {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    max-width: max-content !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  .layout-contract-shell:not(.settings-contract-shell) .trade-product-scroll {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: auto !important;
  }

  .layout-contract-shell:not(.settings-contract-shell) .layout-table-area {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: none !important;
    touch-action: pan-x pan-y !important;
    width: 100% !important;
    -webkit-overflow-scrolling: auto !important;
  }

  .layout-contract-shell :is(.trade-product-head, .trade-product-row, .trade-project-head, .trade-project-row) {
    max-width: none !important;
  }

  .layout-contract-shell .layout-content-header {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  .layout-contract-shell :is(.trade-product-head, .trade-product-category-head, .trade-project-head),
  .layout-contract-shell :is(.trade-product-group-head th, .trade-product-group-section-head th) {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
  }

  /* Compact, touch-safe mobile lists shared by trade and project pages. */
  .layout-contract-shell.trade-mobile-list-shell > .layout-foundation-header.page-header-shell {
    gap: 7px !important;
    padding: 10px 14px !important;
  }

  .layout-contract-shell.trade-mobile-list-shell .page-breadcrumb-header {
    min-height: 18px !important;
    overflow: hidden !important;
  }

  .layout-contract-shell.trade-mobile-list-shell .layout-breadcrumb-header {
    flex-wrap: nowrap !important;
    min-height: 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .layout-contract-shell.trade-mobile-list-shell .layout-breadcrumb-header::-webkit-scrollbar,
  .layout-contract-shell.trade-mobile-list-shell .layout-page-actions::-webkit-scrollbar,
  .layout-contract-shell.trade-mobile-list-shell .project-operation-summary::-webkit-scrollbar,
  .layout-contract-shell.trade-mobile-list-shell .project-operation-toolbar-main::-webkit-scrollbar {
    display: none !important;
  }

  .layout-contract-shell.trade-mobile-list-shell .layout-breadcrumb-header :is(a, strong, span) {
    flex: 0 0 auto !important;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
  }

  .layout-contract-shell.trade-mobile-list-shell .page-title-header.layout-page-header,
  .layout-contract-shell.trade-mobile-list-shell .page-title-header.layout-page-header-no-back {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    row-gap: 8px !important;
  }

  .layout-contract-shell.trade-mobile-list-shell .page-title-header > .page-title-header-main {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  .layout-contract-shell.trade-mobile-list-shell .page-title-header-main > .layout-page-title {
    display: grid !important;
    gap: 6px 8px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: 100% !important;
  }

  .layout-contract-shell.trade-mobile-list-shell .layout-page-title h1 {
    font-size: 17px !important;
    grid-column: 1 !important;
    line-height: 1.35 !important;
    overflow-wrap: break-word !important;
    width: 100% !important;
    word-break: normal !important;
  }

  .layout-contract-shell.trade-mobile-list-shell .layout-page-title > span {
    align-self: start !important;
    grid-column: 2 !important;
    min-height: 24px !important;
    min-width: 32px !important;
    padding: 0 8px !important;
  }

  .layout-contract-shell.trade-mobile-list-shell .page-title-header > :is(.page-title-actions, .page-breadcrumb-actions) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
  }

  .layout-contract-shell.trade-mobile-list-shell .layout-page-actions {
    gap: 6px !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 1px !important;
    scrollbar-width: none !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .layout-contract-shell.trade-mobile-list-shell .layout-page-actions > :is(a, button) {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    min-width: max-content !important;
    padding: 0 10px !important;
  }

  .layout-contract-shell.trade-mobile-list-shell:not(.settings-contract-shell) .trade-product-scroll {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .layout-contract-shell.trade-mobile-list-shell .layout-table-area {
    flex: 0 0 auto !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    touch-action: auto !important;
  }

  .layout-contract-shell.trade-product-group-list-shell .layout-content-header {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .layout-contract-shell.trade-product-group-list-shell .layout-content-header .trade-product-add-form {
    align-self: center !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .layout-contract-shell.trade-product-group-list-shell .trade-product-list {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 4px 12px 72px !important;
  }

  .layout-contract-shell.trade-product-group-list-shell .trade-product-head {
    display: none !important;
  }

  .layout-contract-shell.trade-product-group-list-shell .trade-product-row {
    align-items: center !important;
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 0 !important;
    padding: 10px 10px 9px !important;
  }

  .layout-contract-shell.trade-product-group-list-shell .trade-product-row-main {
    display: grid !important;
    gap: 6px 8px !important;
    grid-column: 1 !important;
    grid-template-areas:
      "id name"
      "items items"
      "date date" !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    min-width: 0 !important;
  }

  .layout-contract-shell.trade-product-group-list-shell .trade-product-row-main > strong {
    grid-area: id !important;
  }

  .layout-contract-shell.trade-product-group-list-shell .trade-product-row-main > span {
    grid-area: name !important;
    line-height: 1.4 !important;
  }

  .layout-contract-shell.trade-product-group-list-shell .trade-product-row-main > small {
    display: -webkit-box !important;
    grid-area: items !important;
    line-height: 1.45 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  .layout-contract-shell.trade-product-group-list-shell .trade-product-row-main > time {
    color: #98a2b3 !important;
    font-size: 11px !important;
    grid-area: date !important;
    justify-self: end !important;
  }

  .layout-contract-shell.trade-product-group-list-shell :is(.trade-product-delete-form, .trade-product-delete-placeholder) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-workplace-shell,
  .layout-contract-shell.trade-project-shell .project-operation-report-list {
    min-width: 0 !important;
    overflow: visible !important;
    width: 100% !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-toolbar {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-toolbar-main {
    display: flex !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    padding-bottom: 1px !important;
    scrollbar-width: none !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-toolbar-main > * {
    flex: 0 0 auto !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-summary {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 8px 14px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-summary > * {
    flex: 0 0 auto !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-report-list {
    display: grid !important;
    gap: 8px !important;
    padding: 8px 12px 72px !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-report-list .trade-project-head {
    display: none !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-report-list .trade-project-row {
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-report-list .trade-project-row-main {
    display: grid !important;
    gap: 0 !important;
    grid-template-areas:
      "meta name"
      "products products"
      "check output" !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-report-meta {
    border-right: 1px solid var(--line) !important;
    grid-area: meta !important;
    min-height: 70px !important;
    padding: 10px 8px !important;
  }

  .layout-contract-shell.trade-project-shell .trade-project-name {
    align-items: center !important;
    display: flex !important;
    grid-area: name !important;
    min-height: 70px !important;
    padding: 10px 12px !important;
  }

  .layout-contract-shell.trade-project-shell .trade-project-name strong {
    font-size: 13px !important;
    line-height: 1.45 !important;
    overflow-wrap: break-word !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-products {
    border-top: 1px solid var(--line) !important;
    display: grid !important;
    gap: 5px !important;
    grid-area: products !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    justify-items: start !important;
    min-height: 58px !important;
    padding: 8px 12px !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-products::before,
  .layout-contract-shell.trade-project-shell .project-operation-check::before,
  .layout-contract-shell.trade-project-shell .project-operation-output::before {
    color: #667085 !important;
    font-size: 11px !important;
    font-weight: 650 !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-products::before {
    content: "商品一覧" !important;
    grid-column: 1 / -1 !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-card-main {
    line-height: 1.4 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-card-count {
    align-self: center !important;
    bottom: auto !important;
    grid-column: 2 !important;
    position: static !important;
    right: auto !important;
  }

  .layout-contract-shell.trade-project-shell :is(.project-operation-check, .project-operation-output) {
    align-content: center !important;
    border-top: 1px solid var(--line) !important;
    display: grid !important;
    gap: 5px !important;
    justify-items: start !important;
    min-height: 58px !important;
    padding: 8px 12px !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-check {
    border-right: 1px solid var(--line) !important;
    grid-area: check !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-check::before {
    content: "確認" !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-output {
    grid-area: output !important;
  }

  .layout-contract-shell.trade-project-shell .project-operation-output::before {
    content: "出力" !important;
  }
}

.layout-contract-shell .layout-content-header:has(> :is(.trade-product-back-link, .trade-product-body-back-link, .trade-product-category-back-link, .operation-toolbar-back)) {
  align-items: center !important;
  flex-direction: row !important;
  gap: 8px !important;
  justify-content: space-between !important;
}

/* Setting drawer contract.
   data-page-classification="setting-drawer" is the classification key.
   settings-contract-shell remains as the legacy compatibility class. */
.layout-contract-shell[data-page-classification="setting-drawer"] {
  --trade-sidebar-width: var(--common-drawer-width, 248px);
  --trade-sidebar-collapsed-width: var(--common-drawer-collapsed-width, 56px);
  --settings-foundation-header-height: 81px;
  --setting-drawer-line: var(--line, #d9e1ea);
  --trade-table-head-border: var(--setting-drawer-line);
  --trade-table-head-cell-border: var(--setting-drawer-line);
  border-radius: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.layout-contract-shell[data-page-classification="setting-drawer"] > .workplace-setting-layout {
  align-items: stretch !important;
  background: #fff !important;
  border-radius: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

@media (min-width: 761px) {
  .layout-contract-shell[data-page-classification="setting-drawer"] > .workplace-setting-layout {
    height: 100% !important;
    min-height: 0 !important;
  }

  .layout-contract-shell[data-page-classification="setting-drawer"] .workplace-setting-drawer,
  .layout-contract-shell[data-page-classification="setting-drawer"] .settings-panel {
    min-height: 0 !important;
  }

  .layout-contract-shell[data-page-classification="setting-drawer"] .workplace-setting-drawer {
    align-self: stretch !important;
    border-radius: 0 !important;
    height: 100% !important;
  }
}

.layout-contract-shell[data-page-classification="setting-drawer"] .settings-panel,
.layout-contract-shell[data-page-classification="setting-drawer"] .settings-scroll {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.layout-contract-shell[data-page-classification="setting-drawer"] .settings-panel {
  align-self: stretch !important;
  border-radius: 0 !important;
  grid-column: 2 !important;
  padding: 0 !important;
  width: 100% !important;
}

.layout-contract-shell[data-page-classification="setting-drawer"] .settings-scroll {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  width: 100% !important;
}

.layout-contract-shell[data-page-classification="setting-drawer"] :is(
  .workplace-setting-panel,
  .workplace-setting-layout,
  .workplace-setting-content,
  .settings-panel,
  .settings-scroll,
  .settings-form-panel,
  .workplace-setting-section,
  .workplace-setting-content-header,
  .workplace-trade-setting-group,
  .workplace-trade-setting-card,
  .checklist-picker,
  .checklist-item-editor,
  .auto-check-layout,
  .auto-check-list,
  .workplace-trade-auto-check-section,
  .workplace-trade-auto-check-list
) {
  border-radius: 0 !important;
}

.settings-contract-shell .workplace-basic-page {
  border-bottom: 0 !important;
}

.settings-contract-shell .workplace-basic-page .workplace-basic-input {
  display: block !important;
  max-width: 420px !important;
  text-align: left !important;
}

.settings-contract-shell > .layout-foundation-header {
  display: grid !important;
  grid-template-rows: auto auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.settings-contract-shell > .layout-foundation-header.page-header-shell {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.settings-contract-shell > .layout-foundation-header.page-header-shell > :is(.page-breadcrumb-header, .page-title-header) {
  box-sizing: border-box !important;
  padding-left: var(--layout-header-x, 32px) !important;
  padding-right: var(--layout-header-x, 32px) !important;
}

.settings-contract-shell .layout-breadcrumb-header {
  min-height: 30px !important;
  padding-bottom: 0 !important;
  padding-top: 14px !important;
}

.settings-contract-shell .layout-page-header,
.settings-contract-shell .layout-page-header.layout-page-header-no-back {
  min-height: 50px !important;
  padding-bottom: 8px !important;
  padding-top: 6px !important;
}

.settings-contract-shell :is(.layout-back-link, .workplace-setting-back-link, .su-back-button) {
  display: none !important;
}

.settings-contract-shell .settings-form-panel {
  box-sizing: border-box !important;
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 100% !important;
}

.settings-contract-shell .workplace-setting-content-header {
  align-items: center !important;
  border-bottom: 1px solid #e4e7ec !important;
  gap: 12px !important;
  min-height: 48px !important;
  padding-bottom: 6px !important;
  padding-top: 6px !important;
}

.settings-contract-shell .workplace-setting-content {
  min-height: 0 !important;
}

.settings-contract-shell .workplace-trade-setting-form {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-height: min-content !important;
  padding-top: 16px !important;
  width: min(100%, 1120px) !important;
}

.settings-contract-shell .workplace-trade-setting-toolbar {
  flex: 0 0 auto !important;
}

.settings-contract-shell .workplace-trade-setting-groups,
.settings-contract-shell .workplace-trade-setting-group,
.settings-contract-shell .workplace-trade-setting-basic-list,
.settings-contract-shell .workplace-trade-setting-grid {
  box-sizing: border-box !important;
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
}

.settings-contract-shell .workplace-trade-setting-basic-list {
  max-width: 920px !important;
}

.settings-contract-shell .workplace-trade-setting-grid,
.settings-contract-shell #inspection-setting-group .workplace-trade-setting-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

.settings-contract-shell .settings-scroll > .workplace-trade-setting-form {
  flex: 0 0 auto !important;
}

.settings-contract-shell .workplace-trade-summary-card {
  max-width: 920px !important;
}

.settings-contract-shell .workplace-trade-summary-grid {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
  width: 100% !important;
}

.settings-contract-shell .workplace-trade-summary-row {
  margin-top: 0 !important;
}

.settings-contract-shell .workplace-trade-summary-row.is-split {
  grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr) !important;
}

.settings-contract-shell .workplace-trade-summary-row.is-textarea {
  align-items: start !important;
}

.settings-contract-shell .workplace-trade-summary-row-stacked {
  align-items: start !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
}

.settings-contract-shell .workplace-trade-summary-row-stacked > :nth-child(3) {
  grid-column: 2 !important;
}

.settings-contract-shell .workplace-trade-summary-contact-row {
  grid-template-columns: 112px minmax(0, 1fr) 56px minmax(0, 1fr) !important;
}

.settings-contract-shell .workplace-trade-summary-contact-row label:nth-of-type(2) {
  text-align: right !important;
}

.settings-contract-shell .workplace-setting-section {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.settings-contract-shell .workplace-setting-section-head {
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  padding-bottom: 6px !important;
  padding-left: var(--layout-header-x) !important;
  padding-right: var(--layout-header-x) !important;
  padding-top: 6px !important;
}

.settings-contract-shell .workplace-setting-table-wrap {
  height: auto !important;
  max-height: none !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.layout-contract-shell[data-page-classification="setting-drawer"] .workplace-setting-table-section {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.layout-contract-shell[data-page-classification="setting-drawer"] .workplace-setting-table-section > .workplace-setting-table-wrap.layout-table-area {
  border-radius: 0 !important;
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: auto !important;
  position: relative !important;
}

.layout-contract-shell[data-page-classification="setting-drawer"] .workplace-setting-table-section > .workplace-setting-table-wrap.layout-table-area > .workplace-setting-table {
  border-radius: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.layout-contract-shell[data-page-classification="setting-drawer"] .workplace-setting-table-section > .workplace-setting-table-wrap.layout-table-area > .workplace-setting-table thead th {
  background: var(--trade-table-head-bg) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

@media (min-width: 841px) {
  body.settings-page-shell .layout-contract-shell[data-page-classification="setting-drawer"] .settings-table-scroll {
    overflow: hidden !important;
  }

  body.settings-page-shell .layout-contract-shell[data-page-classification="setting-drawer"] .settings-table-scroll > .workplace-setting-table-section {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.settings-page-shell .layout-contract-shell[data-page-classification="setting-drawer"] .settings-table-scroll > .workplace-setting-table-section > .workplace-setting-table-wrap.layout-table-area {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
    position: relative !important;
  }

  body.settings-page-shell .layout-contract-shell[data-page-classification="setting-drawer"] .settings-table-scroll > .workplace-setting-table-section > .workplace-setting-table-wrap.layout-table-area > .workplace-setting-table thead th {
    background: var(--trade-table-head-bg) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
  }
}

.settings-contract-shell .factory-survey-setting-form,
.settings-contract-shell .factory-survey-detail-form {
  box-sizing: border-box !important;
  margin: 0 !important;
  width: 100% !important;
}

.settings-contract-shell .factory-survey-setting-form {
  align-items: end !important;
  border-bottom: 1px solid #e4e7ec !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  padding: 12px var(--layout-header-x) !important;
}

.settings-contract-shell .factory-survey-item-add-form {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.settings-contract-shell .factory-survey-setting-form label,
.settings-contract-shell .factory-survey-detail-grid label {
  color: #344054 !important;
  display: grid !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.settings-contract-shell .factory-survey-setting-form input[type="text"],
.settings-contract-shell .factory-survey-setting-form textarea,
.settings-contract-shell .factory-survey-detail-grid input[type="text"],
.settings-contract-shell .factory-survey-detail-grid textarea,
.settings-contract-shell .factory-survey-setting-table input[type="text"] {
  background: #fff !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  color: #101828 !important;
  font: inherit !important;
  min-height: 36px !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
  width: 100% !important;
}

.settings-contract-shell .factory-survey-setting-form textarea,
.settings-contract-shell .factory-survey-detail-grid textarea {
  min-height: 84px !important;
  resize: vertical !important;
}

.settings-contract-shell .factory-survey-setting-actions,
.settings-contract-shell .factory-survey-detail-actions,
.settings-contract-shell .workplace-setting-head-actions {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

.settings-contract-shell .factory-survey-detail-grid {
  box-sizing: border-box !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 900px !important;
  min-width: 0 !important;
  padding: 16px var(--layout-header-x) !important;
  width: 100% !important;
}

.settings-contract-shell .factory-survey-detail-actions {
  border-top: 1px solid #e4e7ec !important;
  padding: 12px var(--layout-header-x) !important;
}

.settings-contract-shell .workplace-setting-action-link {
  align-items: center !important;
  background: #fff !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 6px !important;
  color: #101828 !important;
  display: inline-flex !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  text-decoration: none !important;
}

.settings-contract-shell .workplace-setting-action-link.is-active {
  background: #101828 !important;
  border-color: #101828 !important;
  color: #fff !important;
}

.database-setting-shell .database-setting-search {
  align-items: center !important;
  display: flex !important;
  gap: 8px !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: min(100%, 620px) !important;
}

.database-setting-shell .database-setting-search label {
  align-items: center !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 6px !important;
  display: flex !important;
  flex: 1 1 auto !important;
  gap: 8px !important;
  min-height: 36px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
}

.database-setting-shell .database-setting-search label span {
  color: #667085 !important;
  flex: 0 0 auto !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.database-setting-shell .database-setting-search input[type="search"] {
  background: transparent !important;
  border: 0 !important;
  color: #101828 !important;
  flex: 1 1 auto !important;
  font: inherit !important;
  min-width: 0 !important;
  outline: none !important;
}

.database-setting-shell .database-setting-table {
  min-width: 920px !important;
}

.page .settings-contract-shell.database-setting-shell {
  background: #f8fafc !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  margin-left: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 100% !important;
}

.page .settings-contract-shell.database-setting-shell > .workplace-setting-layout {
  align-items: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.page .settings-contract-shell.database-setting-shell .settings-scroll {
  align-content: start !important;
  justify-content: flex-start !important;
}

.page .settings-contract-shell.database-setting-shell .workplace-setting-section {
  margin: 0 !important;
  min-height: 0 !important;
}

.settings-contract-shell .checklist-edit-header {
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}

.settings-contract-shell .checklist-edit-header .checklist-group-edit {
  flex: 1 1 520px !important;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto !important;
  max-width: 780px !important;
}

.settings-contract-shell .checklist-edit-scroll {
  gap: 14px !important;
  padding: 16px var(--layout-header-x) 24px !important;
}

.settings-contract-shell .checklist-group-edit span {
  color: #475467 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-align: left !important;
}

.settings-contract-shell .checklist-add-tile {
  border-bottom: 1px solid #e4e7ec !important;
  padding-bottom: 14px !important;
}

.settings-contract-shell .checklist-add-tile input[type="text"],
.settings-contract-shell .checklist-add-tile textarea,
.settings-contract-shell .checklist-group-edit input,
.settings-contract-shell .checklist-item-row input[type="text"],
.settings-contract-shell .checklist-item-row textarea {
  background: #fff !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 6px !important;
  color: #101828 !important;
  font: inherit !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
}

.settings-contract-shell .checklist-add-tile label,
.settings-contract-shell .checklist-flags,
.settings-contract-shell .checklist-row-actions {
  background: #fff !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 6px !important;
  color: #344054 !important;
}

.settings-contract-shell .checklist-item-editor {
  border-color: #e4e7ec !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.layout-contract-shell[data-page-classification="setting-drawer"] > .layout-foundation-header {
  border-bottom-color: var(--setting-drawer-line) !important;
}

.layout-contract-shell[data-page-classification="setting-drawer"] .workplace-setting-drawer.trade-sidebar {
  border-right-color: var(--setting-drawer-line) !important;
}

.layout-contract-shell[data-page-classification="setting-drawer"] :is(
  .workplace-setting-content-header,
  .workplace-setting-section-head,
  .workplace-trade-setting-toolbar,
  .workplace-trade-setting-group-head,
  .workplace-trade-setting-card-head,
  .factory-survey-setting-form,
  .checklist-add-tile,
  .checklist-edit-header,
  .auto-check-add,
  .auto-check-head,
  .auto-check-row,
  .workplace-trade-auto-check-list
) {
  border-bottom-color: var(--setting-drawer-line) !important;
}

.layout-contract-shell[data-page-classification="setting-drawer"] :is(
  .workplace-trade-setting-actions,
  .factory-survey-detail-actions,
  .workplace-trade-auto-check-empty
) {
  border-top-color: var(--setting-drawer-line) !important;
}

.layout-contract-shell[data-page-classification="setting-drawer"] :is(
  .workplace-trade-setting-card,
  .workplace-trade-setting-toggle-box,
  .workplace-trade-setting-subhead,
  .checklist-picker,
  .checklist-add-tile label,
  .checklist-flags,
  .checklist-row-actions,
  .checklist-item-editor
) {
  border-color: var(--setting-drawer-line) !important;
}

@media (max-width: 760px) {
  .settings-contract-shell > .workplace-setting-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .settings-contract-shell .settings-panel {
    border-left: 0 !important;
    grid-column: 1 !important;
    width: 100% !important;
  }

  .settings-contract-shell .workplace-trade-setting-row,
  .settings-contract-shell .workplace-trade-setting-row.is-split {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .settings-contract-shell .workplace-trade-summary-row.is-split {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .settings-contract-shell .workplace-trade-summary-row-stacked,
  .settings-contract-shell .workplace-trade-summary-contact-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .settings-contract-shell .workplace-trade-setting-row > label {
    text-align: left !important;
  }

  .settings-contract-shell .workplace-trade-setting-row.is-split > :nth-child(3) {
    grid-column: 1 !important;
  }

  .settings-contract-shell .workplace-trade-summary-row-stacked > :nth-child(3) {
    grid-column: 1 !important;
  }

  .settings-contract-shell .workplace-trade-summary-contact-row label:nth-of-type(2) {
    text-align: left !important;
  }

  .settings-contract-shell .checklist-edit-header .checklist-group-edit,
  .settings-contract-shell .checklist-add-tile,
  .settings-contract-shell .checklist-item-head,
  .settings-contract-shell .checklist-item-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .settings-contract-shell .checklist-edit-scroll {
    padding-left: var(--layout-mobile-x) !important;
    padding-right: var(--layout-mobile-x) !important;
  }
}

/* Settings mobile viewport contract.
   The app header and page header stay fixed; .settings-scroll owns vertical
   movement. Tables may still scroll horizontally inside that body lane. */
@media (max-width: 840px) {
  html:has(body.settings-page-shell),
  body.settings-page-shell {
    --app-header-height: 74px;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    width: 100% !important;
  }

  body.settings-page-shell .app-header {
    height: var(--app-header-height) !important;
    left: 0 !important;
    max-height: var(--app-header-height) !important;
    min-height: var(--app-header-height) !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 300 !important;
  }

  body.settings-page-shell .page,
  body.settings-page-shell main.page {
    bottom: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    left: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    overscroll-behavior-y: contain !important;
    padding-top: 0 !important;
    position: fixed !important;
    right: 0 !important;
    top: var(--app-header-height) !important;
    touch-action: pan-y !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.settings-page-shell .settings-contract-shell {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    touch-action: auto !important;
  }

  body.settings-page-shell .settings-contract-shell > .workplace-setting-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.settings-page-shell .settings-contract-shell .settings-panel {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.settings-page-shell .settings-contract-shell .settings-scroll {
    display: block !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.settings-page-shell .settings-contract-shell .settings-scroll > .workplace-setting-section,
  body.settings-page-shell .settings-contract-shell .workplace-trade-setting-form,
  body.settings-page-shell .settings-contract-shell .workplace-time-page .workplace-time-shell {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.settings-page-shell .settings-contract-shell .workplace-setting-table-wrap.layout-table-area {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    touch-action: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.settings-page-shell .layout-contract-shell[data-page-classification="setting-drawer"] .workplace-setting-table-section {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  body.settings-page-shell .layout-contract-shell[data-page-classification="setting-drawer"] .workplace-setting-table-section > .workplace-setting-table-wrap.layout-table-area {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

}

/* SU taxonomy settings run on the shared setting shell/drawer/table lanes. */
body.settings-page-shell .layout-contract-shell[data-page-classification="setting-drawer"] .settings-table-scroll {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.settings-page-shell .layout-contract-shell[data-page-classification="setting-drawer"] .settings-table-scroll > .workplace-setting-table-section {
  display: grid !important;
  flex: 1 1 auto !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.settings-page-shell .layout-contract-shell[data-page-classification="setting-drawer"] .settings-table-scroll > .workplace-setting-table-section > .workplace-setting-table-wrap.layout-table-area {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding-bottom: 48px !important;
}

.su-setting-page.layout-contract-shell {
  --trade-sidebar-width: var(--common-drawer-width, 248px);
  --trade-sidebar-collapsed-width: var(--common-drawer-collapsed-width, 56px);
}

.su-setting-page .su-taxonomy-panel {
  background: #fff !important;
}

.su-ai-setting-panel {
  margin: 0;
  max-width: 720px;
  padding: 20px;
}

.su-ai-setting-form {
  display: grid;
  gap: 16px;
  padding-top: 18px;
}

.su-ai-setting-form > label {
  display: grid;
  gap: 7px;
}

.su-ai-setting-form > label > span {
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.su-ai-setting-form select {
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 400;
  max-width: 520px;
  min-height: 38px;
  width: 100%;
}

.su-ai-setting-form .operation-compact-action {
  font-size: 12px !important;
}

.su-ai-setting-form [data-su-ai-setting-save][hidden] {
  display: none !important;
}

.su-ai-setting-status {
  color: #667085;
  font-size: 12px;
  margin: 0;
  min-height: 18px;
}

.su-setting-page .su-api-layout-heading {
  align-items: center !important;
  display: flex !important;
  flex: 1 1 auto !important;
  gap: 16px !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  width: auto !important;
}

.su-setting-page .su-api-layout-heading > div {
  min-width: 0 !important;
}

.su-setting-page .su-api-layout-heading h2 {
  align-items: center !important;
  display: inline-flex !important;
  gap: 10px !important;
}

.su-setting-page .su-taxonomy-body-count {
  align-items: center !important;
  background: #f2f4f7 !important;
  border-radius: 999px !important;
  color: #344054 !important;
  display: inline-flex !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  min-height: 24px !important;
  min-width: 32px !important;
  padding: 0 10px !important;
}

.su-setting-page .su-api-table {
  table-layout: fixed !important;
  width: 100% !important;
}

.su-setting-page .su-api-table-api_Set_Country {
  min-width: 1280px !important;
}

.su-setting-page .su-api-table-api_Set_StatePref,
.su-setting-page .su-api-table-api_Set_CityArea {
  min-width: 1160px !important;
}

.su-setting-page .su-api-table-api_Language_management {
  min-width: 1320px !important;
}

.su-setting-page .su-api-table-api_Language_management :is(th, td).su-api-column-label_scope {
  width: 148px !important;
}

.su-setting-page .su-api-table-api_Language_management :is(th, td).su-api-column-label_key {
  width: 240px !important;
}

.su-setting-page .su-api-table-api_Language_management :is(th, td).su-api-column-label_en,
.su-setting-page .su-api-table-api_Language_management :is(th, td).su-api-column-label_ja,
.su-setting-page .su-api-table-api_Language_management :is(th, td).su-api-column-label_zh,
.su-setting-page .su-api-table-api_Language_management :is(th, td).su-api-column-label_vi {
  width: 232px !important;
}

.su-setting-page .su-api-table-api_Set_Language :is(th, td).su-api-column-legacy_sn {
  width: 96px !important;
}

.su-setting-page .su-api-table-api_Set_Language :is(th, td).su-api-column-code {
  width: 72px !important;
}

.su-setting-page .su-api-table-api_Set_Language :is(th, td).su-api-column-label,
.su-setting-page .su-api-table-api_Set_Language :is(th, td).su-api-column-english_name {
  width: 220px !important;
}

.su-setting-page .su-api-table-api_Set_Language :is(th, td).su-api-column-aliases {
  width: auto !important;
}

.su-setting-page .su-api-table :is(th, td).su-api-column-country_sn,
.su-setting-page .su-api-table :is(th, td).su-api-column-state_pref_sn,
.su-setting-page .su-api-table :is(th, td).su-api-column-city_area_sn {
  width: 72px !important;
}

.su-setting-page .su-api-table :is(th, td).su-api-column-name_english,
.su-setting-page .su-api-table :is(th, td).su-api-column-name_japanese,
.su-setting-page .su-api-table :is(th, td).su-api-column-name_chinese,
.su-setting-page .su-api-table :is(th, td).su-api-column-name_original {
  width: 180px !important;
}

.su-setting-page .su-api-table :is(th, td).su-api-column-display_name {
  width: 280px !important;
}

.su-setting-page .su-api-table :is(th, td).su-api-column-order {
  width: 80px !important;
}

.su-setting-page .su-api-table :is(th, td).su-api-column-actions {
  width: 132px !important;
}

.su-setting-page .su-api-row-actions {
  width: 100% !important;
}

.su-setting-page .su-api-dialog-note {
  color: #475467 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.layout-contract-shell .layout-table-area > table tr[data-row-href],
.layout-contract-shell .layout-table-area > table tr[data-row-href] > td {
  cursor: pointer !important;
}

.layout-contract-shell .layout-table-area > table tbody tr:hover > td,
.layout-contract-shell .layout-table-area > table tr[data-row-href]:hover > td,
.layout-contract-shell .layout-table-area > table tr[data-row-href]:focus > td {
  background: #f8fafc !important;
}

.layout-contract-shell .layout-table-area > table tr[data-row-href]:focus {
  outline: none !important;
}

.layout-contract-shell .layout-table-area > table tr[data-row-href]:focus-visible > td {
  box-shadow: inset 0 0 0 2px #667085 !important;
}

.su-setting-page .su-category-create {
  align-items: end !important;
  background: #fff !important;
  border-bottom: 1px solid var(--line, #d9e1ea) !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  min-height: 50px !important;
  padding: 8px var(--layout-header-x) !important;
}

.su-setting-page .su-category-create label {
  color: #475467 !important;
  display: grid !important;
  flex: 1 1 180px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  gap: 4px !important;
  max-width: 220px !important;
  min-width: 160px !important;
}

.su-setting-page .su-category-create input {
  background: #fff !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  color: #101828 !important;
  font: inherit !important;
  height: 36px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  width: 100% !important;
}

.su-setting-page .su-category-create .trade-product-category-add-button {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

.su-setting-page .su-taxonomy-table,
.su-setting-page .su-item-list {
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.su-setting-page .su-taxonomy-grid {
  min-width: 920px !important;
  table-layout: fixed !important;
}

.su-setting-page .su-taxonomy-grid.has-search-keywords {
  min-width: 1160px !important;
}

.su-setting-page .su-taxonomy-col-language {
  width: 20% !important;
}

.su-setting-page .su-taxonomy-grid.has-search-keywords .su-taxonomy-col-language {
  width: 17% !important;
}

.su-setting-page .su-taxonomy-col-search-keywords {
  width: 17% !important;
}

.su-setting-page .su-taxonomy-grid.has-search-keywords .su-taxonomy-col-pin {
  width: 7% !important;
}

.su-setting-page .su-taxonomy-grid.has-search-keywords .su-taxonomy-col-times {
  width: 6% !important;
}

.su-setting-page .su-taxonomy-grid.has-search-keywords .su-taxonomy-col-trade {
  width: 9% !important;
}

.su-setting-page .su-taxonomy-grid.has-search-keywords .su-taxonomy-col-actions {
  width: 10% !important;
}

.su-setting-page .su-taxonomy-col-symbol-image {
  width: 7% !important;
}

.su-setting-page .su-taxonomy-col-code {
  width: 6% !important;
}

.su-setting-page .su-taxonomy-col-pin {
  width: 9% !important;
}

.su-setting-page .su-taxonomy-col-order {
  width: 7% !important;
}

.su-setting-page .su-taxonomy-col-times {
  width: 8% !important;
}

.su-setting-page .su-taxonomy-col-trade {
  width: 12% !important;
}

.su-setting-page .su-taxonomy-col-actions {
  width: 11% !important;
}

.su-setting-page .su-taxonomy-grid th,
.su-setting-page .su-taxonomy-grid td {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.su-setting-page .su-taxonomy-search-keywords-cell {
  color: #475467 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  white-space: pre-line !important;
}

.su-setting-page .su-taxonomy-search-keywords-field textarea {
  min-height: 92px !important;
  resize: vertical !important;
}

.su-setting-page .su-taxonomy-symbol-image-cell {
  text-align: center !important;
}

.su-setting-page .su-taxonomy-symbol-image {
  display: block !important;
  height: 42px !important;
  margin: 0 auto !important;
  max-width: 54px !important;
  object-fit: contain !important;
  width: auto !important;
}

.su-setting-page .su-taxonomy-symbol-missing {
  color: #667085 !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 750 !important;
}

.su-setting-page .su-taxonomy-image-upload-field {
  align-items: start !important;
}

.su-setting-page .su-taxonomy-dialog-symbol-image {
  background: #f8fafc !important;
  border: 1px solid #eaecf0 !important;
  border-radius: 6px !important;
  display: block !important;
  height: 64px !important;
  max-width: 96px !important;
  object-fit: contain !important;
  padding: 6px !important;
  width: auto !important;
}

.su-setting-page .su-taxonomy-order-cell,
.su-setting-page .su-taxonomy-times-cell {
  color: #344054 !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 750 !important;
}

.su-setting-page .su-taxonomy-order-form {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: center !important;
  margin: 0 !important;
  width: 100% !important;
}

.su-setting-page .su-taxonomy-order-input {
  background: #fff !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 6px !important;
  color: #101828 !important;
  font: inherit !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 750 !important;
  height: 32px !important;
  padding: 0 6px !important;
  text-align: center !important;
  width: 64px !important;
}

.su-setting-page .su-taxonomy-order-input:focus {
  border-color: #667085 !important;
  box-shadow: 0 0 0 2px rgba(102, 112, 133, 0.14) !important;
  outline: none !important;
}

.su-setting-page .su-taxonomy-pin-form {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: center !important;
  margin: 0 !important;
}

.su-setting-page .su-taxonomy-pin-switch {
  cursor: pointer !important;
  display: inline-flex !important;
  height: 24px !important;
  position: relative !important;
  width: 44px !important;
}

.su-setting-page .su-taxonomy-pin-switch input {
  height: 1px !important;
  opacity: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.su-setting-page .su-taxonomy-pin-switch span {
  background: #d0d5dd !important;
  border: 1px solid #98a2b3 !important;
  border-radius: 999px !important;
  inset: 0 !important;
  position: absolute !important;
  transition: background 120ms ease, border-color 120ms ease !important;
}

.su-setting-page .su-taxonomy-pin-switch span::after {
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2) !important;
  content: "" !important;
  height: 18px !important;
  left: 2px !important;
  position: absolute !important;
  top: 2px !important;
  transition: transform 120ms ease !important;
  width: 18px !important;
}

.su-setting-page .su-taxonomy-pin-switch input:checked + span {
  background: #344054 !important;
  border-color: #344054 !important;
}

.su-setting-page .su-taxonomy-pin-switch input:checked + span::after {
  transform: translateX(20px) !important;
}

.su-setting-page .su-taxonomy-pin-switch input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(52, 64, 84, 0.18) !important;
}

.su-setting-page .su-taxonomy-trade-button {
  background: #f2f4f7 !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 6px !important;
  color: #344054 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  justify-content: center !important;
  line-height: 1.35 !important;
  max-width: 100% !important;
  min-height: 30px !important;
  padding: 5px 10px !important;
  text-align: center !important;
}

.su-setting-page .su-taxonomy-trade-button:hover,
.su-setting-page .su-taxonomy-trade-button:focus-visible {
  background: #e4e7ec !important;
  border-color: #98a2b3 !important;
  outline: none !important;
}

.su-setting-page .su-taxonomy-row-actions {
  align-items: center !important;
  display: inline-flex !important;
  gap: 6px !important;
  justify-content: center !important;
}

.su-setting-page .su-taxonomy-edit-button {
  background: #344054 !important;
  border: 1px solid #344054 !important;
  border-radius: 6px !important;
  color: #fff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  justify-content: center !important;
  line-height: 1.35 !important;
  min-height: 30px !important;
  padding: 5px 10px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.su-setting-page .su-taxonomy-edit-button:hover,
.su-setting-page .su-taxonomy-edit-button:focus-visible {
  background: #1d2939 !important;
  border-color: #1d2939 !important;
  outline: none !important;
}

.su-setting-page .su-taxonomy-delete-button,
.su-setting-page .danger-action {
  background: #7f1d1d !important;
  border: 1px solid #7f1d1d !important;
  border-radius: 6px !important;
  color: #fff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  justify-content: center !important;
  line-height: 1.35 !important;
  min-height: 30px !important;
  padding: 5px 10px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.su-setting-page .su-taxonomy-delete-button:hover,
.su-setting-page .su-taxonomy-delete-button:focus-visible,
.su-setting-page .danger-action:hover,
.su-setting-page .danger-action:focus-visible {
  background: #991b1b !important;
  border-color: #991b1b !important;
  outline: none !important;
}

.su-setting-page .su-taxonomy-delete-button:disabled,
.su-setting-page .su-taxonomy-delete-button.is-disabled {
  background: #e4e7ec !important;
  border-color: #d0d5dd !important;
  color: #98a2b3 !important;
  cursor: not-allowed !important;
}

.su-setting-page .su-taxonomy-empty {
  color: #667085 !important;
  height: 160px !important;
  text-align: center !important;
}

.su-setting-page .su-taxonomy-clickable-row {
  cursor: pointer !important;
}

.su-setting-page .su-taxonomy-clickable-row:hover,
.su-setting-page .su-taxonomy-clickable-row:focus {
  background: #f8fafc !important;
  outline: none !important;
}

.su-setting-page .su-taxonomy-clickable-row:focus-visible {
  box-shadow: inset 0 0 0 2px #667085 !important;
}

.su-setting-page .su-taxonomy-display-name {
  color: #1f2937 !important;
  font-weight: 800 !important;
}

@media (max-width: 760px) {
  .su-setting-page .su-category-create {
    padding-left: var(--layout-mobile-x) !important;
    padding-right: var(--layout-mobile-x) !important;
  }

  .su-setting-page .su-category-create label {
    flex: 1 1 100% !important;
    max-width: none !important;
  }

  .su-setting-page .su-category-create .trade-product-category-add-button {
    margin-left: 0 !important;
  }
}

/* Breadcrumb states: links must be visibly different from the current page. */
.page-header-shell .layout-breadcrumb-header a,
.layout-contract-shell .layout-breadcrumb-header a {
  color: #667085 !important;
  font-weight: 750 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(102, 112, 133, 0.62) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

.page-header-shell .layout-breadcrumb-header a:hover,
.layout-contract-shell .layout-breadcrumb-header a:hover {
  color: #475467 !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 2px !important;
}

.page-header-shell .layout-breadcrumb-header strong,
.layout-contract-shell .layout-breadcrumb-header strong {
  color: #101828 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.page-header-shell .layout-breadcrumb-header > span,
.layout-contract-shell .layout-breadcrumb-header > span {
  color: #98a2b3 !important;
}

/* Floating window contract: full-screen backdrop and fixed work panel. */
html:has(.floating-contract-panel),
body.has-floating-contract-panel {
  overflow: hidden;
  overscroll-behavior: none;
}

body.has-floating-contract-panel {
  inset: 0;
  position: fixed;
  width: 100%;
}

.floating-contract-backdrop {
  background: rgba(15, 23, 42, .18);
  inset: 0;
  position: fixed;
  touch-action: none;
  z-index: 1000;
}

.floating-contract-panel {
  --floating-panel-edge: 24px;
  --floating-panel-max-height: 900px;
  --floating-panel-max-width: 1320px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .5);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
  box-sizing: border-box;
  color: #101828;
  display: flex;
  flex-direction: column;
  height: min(var(--floating-panel-max-height), calc(100dvh - (var(--floating-panel-edge) * 2)));
  inset: var(--floating-panel-edge);
  margin: auto;
  max-height: calc(100dvh - (var(--floating-panel-edge) * 2));
  min-height: 520px;
  overflow: hidden;
  position: fixed;
  width: min(var(--floating-panel-max-width), calc(100vw - (var(--floating-panel-edge) * 2)));
  z-index: 1010;
}

.floating-contract-backdrop:has(+ .operation-index-shell) {
  background: transparent;
  pointer-events: none;
}

.floating-contract-panel.operation-index-shell {
  --floating-panel-edge: 6px;
  --floating-panel-max-height: none;
  --floating-panel-max-width: none;
  border-radius: 6px;
  height: calc(100dvh - (var(--floating-panel-edge) * 2));
  max-height: calc(100dvh - (var(--floating-panel-edge) * 2));
  width: calc(100vw - (var(--floating-panel-edge) * 2));
}

.floating-contract-panel.operation-index-shell .floating-contract-body {
  background: #fff;
  padding-top: 0;
}

.floating-contract-header {
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  display: grid;
  flex: 0 0 auto;
  gap: 10px 12px;
  grid-template-columns: minmax(0, 1fr) auto 36px;
  min-height: 58px;
  padding: 12px 16px;
}

.floating-contract-heading {
  align-items: baseline;
  display: flex;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

.floating-contract-heading h2 {
  color: #101828;
  flex: 0 1 auto;
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-contract-heading span {
  color: #667085;
  flex: 0 1 auto;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-contract-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.floating-contract-close {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  display: inline-flex;
  font-size: 22px;
  height: 36px;
  justify-content: center;
  line-height: 1;
  width: 36px;
}

.floating-contract-close:hover {
  background: #f2f4f7;
  text-decoration: none;
}

.floating-contract-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px 22px 22px;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
  .floating-contract-panel {
    --floating-panel-mobile-edge: 8px;
    bottom: max(var(--floating-panel-mobile-edge), env(safe-area-inset-bottom, 0px));
    border-radius: 8px;
    height: auto;
    left: var(--floating-panel-mobile-edge);
    margin: 0;
    max-height: none;
    max-width: none;
    min-height: 0;
    right: var(--floating-panel-mobile-edge);
    top: max(var(--floating-panel-mobile-edge), env(safe-area-inset-top, 0px));
    width: auto;
  }

  .floating-contract-header {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .floating-contract-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .floating-contract-actions {
    display: none;
  }

  .floating-contract-close {
    grid-column: 2;
  }

  .floating-contract-body {
    padding: 12px;
  }
}

/* Floating selection contract: reusable add/select dialogs with table bodies. */
.floating-selection-dialog {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.22);
  color: #101828;
  max-height: min(82vh, 860px);
  max-width: min(980px, calc(100vw - 64px));
  overflow: hidden;
  padding: 0;
  width: min(980px, calc(100vw - 64px));
}

.floating-selection-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35);
}

.floating-selection-layout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  margin: 0;
  max-height: min(82vh, 860px);
}

.floating-selection-layout:has(.floating-selection-control-row) {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.floating-selection-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.floating-selection-header h2 {
  color: #101828;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
}

.floating-selection-header-actions {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.floating-selection-search {
  align-items: center;
  display: flex;
  flex: 0 1 320px;
  min-width: 180px;
}

.floating-selection-control-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 16px;
}

.floating-selection-control-left,
.floating-selection-control-right {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.floating-selection-control-left {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.floating-selection-control-right {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.floating-selection-control-left > label {
  align-items: center;
  display: flex;
  flex: 0 1 180px;
  min-width: 140px;
}

.floating-selection-control-left > label > span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.floating-selection-filter {
  align-items: center;
  display: flex;
  flex: 0 0 180px;
  min-width: 150px;
}

.floating-selection-search span,
.floating-selection-filter span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.floating-selection-search input,
.floating-selection-filter select,
.floating-selection-control-left select {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  height: 32px;
  min-width: 0;
  padding: 0 10px;
  width: 100%;
}

.floating-selection-search input:focus,
.floating-selection-filter select:focus,
.floating-selection-control-left select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
  outline: none;
}

.floating-selection-body {
  max-height: min(66vh, 700px);
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px 16px;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.floating-selection-table {
  border-collapse: separate;
  border-spacing: 0;
  color: #101828;
  font-size: 13px;
  table-layout: fixed;
  width: 100%;
}

.floating-selection-table th,
.floating-selection-table td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid #eef2f7;
  height: 44px;
  padding: 8px 12px;
  text-align: center;
  vertical-align: middle;
}

.floating-selection-table th:first-child,
.floating-selection-table td:first-child {
  border-left: 1px solid #eef2f7;
}

.floating-selection-table thead th {
  background: var(--trade-table-head-bg);
  color: #344054;
  font-size: 12px;
  font-weight: 750;
  position: sticky;
  top: 0;
  z-index: 2;
}

.floating-selection-action-column {
  width: 112px;
}

.floating-selection-table td.floating-selection-action-column {
  text-align: right;
}

.floating-selection-name-column {
  text-align: left;
}

.floating-selection-table td.floating-selection-name-column {
  font-weight: 750;
  overflow-wrap: anywhere;
}

/* The outbound-product picker prioritizes ITEM; the three SKU details share a compact width. */
.outbound-packing-product-selection-detail-column {
  width: 12%;
}

.outbound-packing-product-selection-available-column {
  width: 104px;
}

.floating-selection-empty-cell {
  color: #667085;
  font-weight: 750;
  text-align: center !important;
}

.floating-selection-actions {
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 12px 16px;
}

.floating-selection-actions--end {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.operation-client-account-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.operation-client-account-actions form {
  margin: 0;
}

.operation-client-account-actions .floating-selection-button {
  width: auto;
}

#operation-client-account-dialog .floating-selection-layout,
#operation-staff-dialog .floating-selection-layout,
#operation-client-department-dialog .floating-selection-layout {
  position: relative;
}

.operation-client-account-add-dialog,
.operation-client-department-add-dialog {
  align-items: center;
  background: rgba(15, 23, 42, .28);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: absolute;
  z-index: 2;
}

.operation-client-account-add-dialog[hidden],
.operation-client-department-add-dialog[hidden] {
  display: none;
}

.operation-client-account-add-card,
.operation-client-department-add-card {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, .24);
  display: grid;
  gap: 14px;
  margin: 0;
  max-width: 100%;
  padding: 16px;
  width: 420px;
}

.operation-client-account-add-head,
.operation-client-account-add-actions,
.operation-client-department-add-head,
.operation-client-department-add-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.operation-client-account-add-head button,
.operation-client-department-add-head button {
  background: transparent;
  border: 0;
  color: #475467;
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 6px;
}

.operation-client-account-add-fields {
  display: grid;
  gap: 10px;
}

.operation-client-department-add-field {
  display: grid;
  gap: 5px;
}

.operation-client-account-add-fields label {
  display: grid;
  gap: 5px;
}

.operation-client-account-add-fields span,
.operation-client-department-add-field span {
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.operation-client-account-add-fields input,
.operation-client-account-add-fields select,
.operation-client-department-add-field input {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  min-height: 36px;
  min-width: 0;
  padding: 0 10px;
  width: 100%;
}

.operation-client-account-add-actions {
  justify-content: flex-end;
}

.operation-client-account-add-actions .floating-selection-button {
  width: auto;
}

.floating-selection-button {
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 32px;
  min-width: 72px;
  padding: 0 12px;
  text-decoration: none;
  white-space: nowrap;
}

.floating-selection-button--primary {
  background: var(--action-select-bg);
  border: 1px solid var(--action-select-border);
  color: #fff;
}

.floating-selection-button--primary:hover {
  background: var(--action-select-bg-hover);
  border-color: var(--action-select-bg-hover);
}

.floating-selection-button--secondary {
  background: var(--action-create-bg);
  border: 1px solid var(--action-create-border);
  color: #fff;
}

.floating-selection-button--secondary:hover {
  background: var(--action-create-bg-hover);
  border-color: var(--action-create-bg-hover);
}

.floating-selection-button--ghost {
  background: var(--action-ghost-bg);
  border: 1px solid var(--action-ghost-border);
  color: #344054;
}

.floating-selection-button--ghost:hover {
  background: var(--action-ghost-bg-hover);
  border-color: var(--action-ghost-border-hover);
  color: #101828;
}

.floating-selection-button:disabled {
  background: var(--action-disabled-bg);
  border-color: var(--action-disabled-border);
  color: var(--action-disabled-text);
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .floating-selection-dialog {
    max-height: calc(100vh - 32px);
    max-width: calc(100vw - 24px);
    width: calc(100vw - 24px);
  }

  .floating-selection-layout {
    max-height: calc(100vh - 32px);
  }

  .floating-selection-body {
    max-height: calc(100vh - 150px);
    padding: 10px;
  }

  .floating-selection-header {
    align-items: stretch;
    flex-direction: column;
  }

  .floating-selection-header-actions {
    width: 100%;
  }

  .floating-selection-control-row {
    align-items: stretch;
    flex-direction: column;
  }

  .floating-selection-control-left,
  .floating-selection-control-right {
    flex-wrap: wrap;
    width: 100%;
  }

  .floating-selection-control-right {
    justify-content: flex-end;
  }

  .floating-selection-control-left > label {
    flex: 1 1 100%;
    min-width: 0;
  }

  .floating-selection-search {
    flex: 1 1 auto;
    min-width: 0;
  }

  .floating-selection-filter {
    flex: 1 1 auto;
    min-width: 0;
  }

  .floating-selection-action-column {
    width: 92px;
  }

  .outbound-packing-product-selection-detail-column,
  .outbound-packing-product-selection-available-column {
    width: 92px;
  }
}

/* Floating contract shell: final mobile/lock guarantees. Keep this at the end
   so route-specific legacy panel rules cannot turn overlays into bottom sheets. */
html.has-company-floating-panel,
body.has-company-floating-panel {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.has-company-floating-panel {
  left: 0 !important;
  position: fixed !important;
  right: 0 !important;
  width: 100% !important;
}

.floating-contract-shell .company-floating-backdrop {
  inset: 0 !important;
  position: fixed !important;
  touch-action: none !important;
  z-index: 1000 !important;
}

.floating-contract-shell .company-floating-panel {
  z-index: 1010 !important;
}

.floating-contract-shell .company-address-detail-panel {
  z-index: 1020 !important;
}

.floating-contract-shell .company-floating-panel.is-company-name-editing,
.floating-contract-shell .company-floating-panel.is-company-address-editing {
  z-index: 1030 !important;
}

.floating-contract-shell .company-floating-dialog {
  z-index: 1040 !important;
}

.floating-contract-shell .company-floating-header {
  align-items: center !important;
  display: grid !important;
  gap: 10px 12px !important;
  grid-template-columns: minmax(0, 1fr) auto 36px !important;
  padding: 12px 16px !important;
}

.floating-contract-shell .company-floating-header > div:first-child {
  align-items: baseline !important;
  display: flex !important;
  gap: 12px !important;
  grid-column: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.floating-contract-shell .company-floating-header h2,
.floating-contract-shell .company-floating-header span,
.floating-contract-shell .company-floating-updated {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.floating-contract-shell .company-floating-actions {
  display: flex !important;
  grid-column: 2 !important;
  justify-content: flex-end !important;
  margin-left: 0 !important;
  min-width: 0 !important;
  width: auto !important;
}

.floating-contract-shell .company-floating-actions[hidden] {
  display: none !important;
}

.floating-contract-shell .company-floating-actions button {
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.floating-contract-shell .company-floating-close {
  grid-column: 3 !important;
  justify-self: end !important;
  margin-left: 0 !important;
}

.floating-contract-shell .company-address-detail-panel .company-floating-body {
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.floating-contract-shell .company-address-detail-layout {
  min-height: 0 !important;
  overflow: hidden !important;
}

.floating-contract-shell .company-address-detail-page {
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.floating-contract-shell.is-company-floating-active > :not(.company-floating-backdrop):not(.company-floating-panel):not(.company-floating-dialog) {
  pointer-events: none !important;
  touch-action: none !important;
}

.floating-contract-shell.is-company-floating-active .trade-product-scroll,
.floating-contract-shell.is-company-floating-active .trade-top-layout,
.floating-contract-shell.is-company-floating-active .layout-table-area {
  overscroll-behavior: none !important;
}

.floating-contract-shell.is-company-floating-active .trade-product-scroll {
  overflow: hidden !important;
}

.floating-contract-shell.is-company-floating-active .company-floating-backdrop,
.floating-contract-shell.is-company-floating-active .company-floating-panel,
.floating-contract-shell.is-company-floating-active .company-floating-dialog {
  pointer-events: auto !important;
}

@media (max-width: 760px) {
  .floating-contract-shell .company-floating-panel {
    --floating-panel-mobile-edge: 8px;
    border-radius: 8px !important;
    bottom: max(var(--floating-panel-mobile-edge), env(safe-area-inset-bottom, 0px)) !important;
    left: var(--floating-panel-mobile-edge) !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    position: fixed !important;
    right: var(--floating-panel-mobile-edge) !important;
    top: max(var(--floating-panel-mobile-edge), env(safe-area-inset-top, 0px)) !important;
    transform: none !important;
    width: auto !important;
  }

  .floating-contract-shell .company-floating-panel {
    height: auto !important;
  }

  .floating-contract-shell .company-floating-header {
    align-items: center !important;
    display: grid !important;
    gap: 8px 10px !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    padding: 12px !important;
  }

  .floating-contract-shell .company-floating-header > div:first-child {
    align-items: start !important;
    display: grid !important;
    gap: 2px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  .floating-contract-shell .company-floating-header h2 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
  }

  .floating-contract-shell .company-floating-header span,
  .floating-contract-shell .company-floating-updated {
    font-size: 11px !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
  }

  .floating-contract-shell .company-floating-actions {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-content: flex-end !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .floating-contract-shell .company-floating-actions[hidden] {
    display: none !important;
  }

  .floating-contract-shell .company-floating-actions button {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    min-height: 36px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 12px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .floating-contract-shell .company-floating-close {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 40px !important;
    justify-self: end !important;
    width: 40px !important;
  }

  .floating-contract-shell .company-floating-dialog {
    --floating-dialog-mobile-edge: 12px;
    border-radius: 8px !important;
    bottom: auto !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .22) !important;
    gap: 10px !important;
    left: var(--floating-dialog-mobile-edge) !important;
    margin: 0 !important;
    max-height: min(340px, 48dvh) !important;
    max-width: none !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 10px !important;
    position: fixed !important;
    right: var(--floating-dialog-mobile-edge) !important;
    top: max(var(--floating-dialog-mobile-edge), env(safe-area-inset-top, 0px)) !important;
    transform: none !important;
    width: auto !important;
  }

  .floating-contract-shell .company-floating-dialog-head {
    margin: -10px -10px 0 !important;
    padding: 10px !important;
  }

  .floating-contract-shell .company-floating-dialog-head strong {
    font-size: 15px !important;
  }

  .floating-contract-shell .company-floating-dialog .company-floating-form-grid {
    gap: 8px !important;
  }

  .floating-contract-shell .company-floating-dialog label {
    gap: 6px !important;
  }

  .floating-contract-shell .company-floating-dialog label span {
    font-size: 12px !important;
  }

  .floating-contract-shell .company-floating-dialog input,
  .floating-contract-shell .company-floating-dialog select {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
  }

  .floating-contract-shell .company-floating-dialog .company-floating-form-actions {
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
  }

  .floating-contract-shell .company-floating-dialog .company-floating-form-actions button {
    min-height: 44px !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    width: 100% !important;
  }

  .floating-contract-shell .company-floating-body,
  .floating-contract-shell .company-floating-dialog {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .floating-contract-shell .company-address-detail-panel .company-floating-body {
    display: grid !important;
    gap: 10px !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .floating-contract-shell .company-address-detail-summary-compact {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 8px 10px !important;
  }

  .floating-contract-shell .company-address-detail-summary-compact strong {
    display: block !important;
    font-size: 11px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .floating-contract-shell .company-address-detail-summary-compact strong + strong::before {
    content: none !important;
    margin: 0 !important;
  }

  .floating-contract-shell .company-address-detail-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .floating-contract-shell .company-address-detail-drawer-toggle {
    align-items: center !important;
    background: #f8fafc !important;
    border: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #101828 !important;
    display: flex !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    justify-content: space-between !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    text-align: left !important;
    width: 100% !important;
  }

  .floating-contract-shell .company-address-detail-drawer-toggle span:last-child {
    border-bottom: 2px solid currentColor !important;
    border-right: 2px solid currentColor !important;
    display: block !important;
    height: 8px !important;
    margin-left: 10px !important;
    transform: rotate(45deg) !important;
    transition: transform .16s ease !important;
    width: 8px !important;
  }

  .floating-contract-shell .company-address-detail-panel.is-address-detail-drawer-open .company-address-detail-drawer-toggle span:last-child {
    transform: rotate(225deg) !important;
  }

  .floating-contract-shell .company-address-detail-drawer {
    align-content: stretch !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-right: 0 !important;
    display: none !important;
    gap: 6px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: visible !important;
    padding: 8px !important;
  }

  .floating-contract-shell .company-address-detail-panel.is-address-detail-drawer-open .company-address-detail-drawer {
    display: grid !important;
  }

  .floating-contract-shell .company-address-detail-drawer section {
    display: grid !important;
  }

  .floating-contract-shell .company-address-detail-drawer h3 {
    display: block !important;
  }

  .floating-contract-shell .company-address-detail-drawer button {
    background: transparent !important;
    border: 0 !important;
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    white-space: nowrap !important;
  }

  .floating-contract-shell .company-address-detail-drawer button.is-child {
    color: #98a2b3 !important;
    margin-left: 18px !important;
    padding-left: 14px !important;
  }

  .floating-contract-shell .company-address-detail-page {
    min-height: 0 !important;
    overflow: auto !important;
    padding: 10px !important;
  }
}
.operation-item-inbound-board {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 0;
  overflow-y: auto;
  padding: 0;
}

.operation-inbound-heading {
  align-items: center;
  background: #f8fafc;
  border: 0;
  box-sizing: border-box;
  gap: 8px;
  height: 42px;
  padding: 7px 12px;
}

.operation-inbound-heading > span {
  align-items: center;
  border: 0;
  display: flex;
  justify-content: center;
  min-height: 28px;
  padding: 0 8px;
}

.operation-inbound-row {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e7edf4;
  border-radius: 0;
  box-sizing: border-box;
  gap: 8px;
  height: 52px;
  min-height: 52px;
  padding: 7px 12px;
}

.operation-inbound-row > :not(input[type="hidden"]):not(.operation-inbound-action-button) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  box-shadow: none;
  color: var(--text, #243447);
  min-height: 36px;
  padding: 5px 8px;
}

.operation-inbound-row > input[type="number"] {
  align-self: center;
  background: #fff;
  border: 1px solid #9fb2c8;
  border-radius: var(--radius, 6px);
  display: block;
  margin: 0;
  min-height: 36px;
  padding: 6px 8px;
  text-align: center;
  width: 100%;
}

.operation-inbound-row > input.operation-inbound-editable {
  align-self: center;
  background: #fff;
  border: 1px solid #9fb2c8;
  border-radius: var(--radius, 6px);
  box-sizing: border-box;
  box-shadow: none;
  display: block;
  margin: 0;
  min-height: 36px;
  padding: 6px 8px;
  width: 100%;
}

.operation-inbound-row.is-editable > input.operation-inbound-editable {
  background: #fff;
  border: 1px solid #9fb2c8;
  border-radius: var(--radius, 6px);
}

.operation-inbound-row.is-editable > .operation-inbound-date-control > input.operation-inbound-editable {
  background: #fff;
  border: 1px solid #9fb2c8;
  border-radius: var(--radius, 6px);
}


.operation-inbound-row > input.operation-inbound-editable:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(11, 111, 133, .14);
  outline: 0;
}

.operation-inbound-date,
.operation-inbound-quantity {
  font-variant-numeric: tabular-nums;
}

.operation-item-date-summary a span,
.operation-item-date-summary a strong,
.operation-inbound-row.is-readonly > .operation-inbound-date,
.operation-inbound-row.is-readonly > .operation-inbound-quantity {
  font-size: 16px;
  font-weight: 400;
}

.operation-inbound-row > input[type="date"].operation-inbound-date {
  text-align: center;
}

.operation-inbound-row > input[type="date"].operation-inbound-date::-webkit-datetime-edit-fields-wrapper {
  display: flex;
  justify-content: center;
}

.operation-inbound-date-control {
  align-self: center;
  box-sizing: border-box;
  display: block;
  grid-column: 1;
  grid-row: 1;
  min-height: 36px;
  padding: 0 !important;
  position: relative;
}

.operation-inbound-date-control > .operation-inbound-date {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

.operation-inbound-mobile-date-display {
  display: none;
}

.operation-inbound-date-mobile {
  display: none;
}

.operation-inbound-row > input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.operation-inbound-row > input[type="number"]::-webkit-inner-spin-button,
.operation-inbound-row > input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.operation-compact-action,
.layout-contract-shell .operation-compact-action {
  align-items: center !important;
  background: #eef1f4 !important;
  border: 1px solid #101828 !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  color: #101828 !important;
  display: inline-flex !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  height: 34px !important;
  justify-content: center !important;
  line-height: 1 !important;
  max-height: 34px !important;
  min-height: 34px !important;
  min-width: 72px !important;
  padding: 0 6px !important;
  text-decoration: none !important;
  width: auto !important;
}

/* Trade page-header actions use the same compact control as back/edit actions. */
.page-header-shell .trade-top-actions > a {
  align-items: center !important;
  background: #eef1f4 !important;
  border: 1px solid #101828 !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  color: #101828 !important;
  display: inline-flex !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  height: 34px !important;
  justify-content: center !important;
  line-height: 1 !important;
  max-height: 34px !important;
  min-height: 34px !important;
  min-width: 72px !important;
  padding: 0 6px !important;
  width: auto !important;
}

.page-header-shell .trade-top-actions > a:hover,
.page-header-shell .trade-top-actions > a:focus-visible {
  background: #e4e7ec !important;
  border-color: #101828 !important;
  color: #101828 !important;
  text-decoration: none !important;
}

.operation-compact-action:hover,
.operation-compact-action:focus-visible,
.layout-contract-shell .operation-compact-action:hover,
.layout-contract-shell .operation-compact-action:focus-visible {
  background: #e4e7ec !important;
  border-color: #101828 !important;
  color: #101828 !important;
}

.operation-compact-action--create,
.operation-compact-action--create:hover,
.operation-compact-action--create:focus-visible,
.layout-contract-shell .operation-compact-action--create,
.layout-contract-shell .operation-compact-action--create:hover,
.layout-contract-shell .operation-compact-action--create:focus-visible {
  background: var(--action-create-bg) !important;
  border-color: var(--action-create-border) !important;
  color: #fff !important;
}

.operation-compact-action--create:hover,
.operation-compact-action--create:focus-visible,
.layout-contract-shell .operation-compact-action--create:hover,
.layout-contract-shell .operation-compact-action--create:focus-visible {
  background: var(--action-create-bg-hover) !important;
  border-color: var(--action-create-bg-hover) !important;
}

.operation-compact-action:disabled,
.layout-contract-shell .operation-compact-action:disabled {
  background: var(--action-disabled-bg) !important;
  border-color: var(--action-disabled-border) !important;
  color: var(--action-disabled-text) !important;
  cursor: not-allowed !important;
}

.operation-inbound-row > .operation-inbound-action-button {
  align-self: center;
  justify-self: center;
}

/* The inbound row baseline must not turn the shared delete text control into a button. */
.operation-inbound-row > .packing-list-outbound-delete-link.operation-inbound-action-button {
  background: transparent;
  border: 0;
  color: #b42318;
  height: auto;
  min-height: 0;
  padding: 0;
}

.operation-reportonly-picture-button.operation-compact-action span {
  color: #101828 !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

.operation-compact-action--icon,
.layout-contract-shell .operation-compact-action--icon {
  flex: 0 0 34px !important;
  font-size: 18px !important;
  height: 34px !important;
  max-height: 34px !important;
  max-width: 34px !important;
  min-height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  width: 34px !important;
}

/* Icon-only dialog dismiss controls must not inherit the text-action minimum width. */
button[data-dialog-close][aria-label] {
  align-items: center !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 34px !important;
  height: 34px !important;
  justify-content: center !important;
  max-height: 34px !important;
  max-width: 34px !important;
  min-height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  width: 34px !important;
}

.operation-save-button,
.operation-save-button:hover,
.operation-save-button:focus-visible {
  align-items: center !important;
  background: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  color: #fff !important;
  display: inline-flex !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  height: 34px !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-width: 72px !important;
  padding: 0 6px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.operation-save-button[hidden] {
  display: none !important;
}

/* Product-group edit: back/save on the left, creation commands on the right. */
.layout-contract-shell.trade-product-group-edit-shell .trade-product-group-primary-actions {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
}

.layout-contract-shell.trade-product-group-edit-shell .trade-product-group-primary-actions > .operation-save-button {
  align-self: center !important;
  height: 34px !important;
  max-height: 34px !important;
  min-height: 34px !important;
}

/* Operation index: settings action uses the same fixed button width as the shared action style. */
.operation-index-actions--with-settings {
  grid-template-columns: 72px 78px 78px;
}

.operation-inbound-row > .operation-inbound-row-placeholder {
  visibility: hidden;
}

.operation-inbound-row > .operation-inbound-date {
  grid-column: 1;
  grid-row: 1;
}

.operation-inbound-row > .operation-inbound-quantity {
  grid-column: 2;
  grid-row: 1;
}

.operation-inbound-row > .operation-inbound-remark-input,
.operation-inbound-row > .operation-inbound-remark-text,
.operation-inbound-row > .operation-inbound-remark-toggle {
  grid-column: 3;
  grid-row: 1;
}

.operation-inbound-row > .operation-inbound-packing,
.operation-inbound-row > .operation-inbound-packing-link {
  grid-column: 4;
  grid-row: 1;
}

.operation-inbound-row.is-editable > .operation-inbound-action-button,
.operation-inbound-row > .operation-inbound-row-placeholder {
  grid-column: 5;
  grid-row: 1;
}

.operation-inbound-mobile-label {
  display: none !important;
}

.operation-inbound-portal-actions > button,
.operation-item-inbound-add-actions > button {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  width: 72px;
  min-width: 72px;
  height: 34px !important;
  max-height: 34px !important;
  min-height: 34px !important;
  justify-content: center;
  padding: 0 6px !important;
  font-size: 10px !important;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* The result title is intentionally omitted on inspection screens. Keep the
   remaining add action aligned with the shared portal action position. */
.operation-item-inspection-layout .operation-inbound-portal--entries .operation-inbound-portal-actions {
  margin-left: auto;
}

.operation-item-inbound-layout .operation-item-work-datebar--portal {
  border: 0;
  height: 34px;
  margin: 0;
  padding: 0;
}

.operation-item-inbound-layout .operation-item-work-datebar--portal label {
  height: 34px;
}

.operation-item-inbound-layout .operation-item-work-datebar--portal input[type="date"] {
  height: 34px;
}

.operation-inbound-portal--dates > .operation-inbound-portal-header {
  justify-content: flex-end;
}

.operation-inbound-portal--dates > .operation-inbound-portal-header .operation-inbound-show-all {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #2f80ed !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  min-height: 0 !important;
  padding: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.operation-item-work-datebar-actions {
  display: flex;
  margin-left: auto;
}

.operation-item-work-datebar-actions > [data-dirty-save] {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  min-width: 72px;
}

.operation-item-inspection-page {
  min-height: 0;
}

.operation-item-reinspection-round-cell {
  min-width: 144px;
}

.operation-item-reinspection-round-control {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  white-space: nowrap;
}

.operation-item-reinspection-round-control select {
  margin: 0;
  min-width: 96px;
}

.operation-item-inspection-panel {
  background: #fff;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
}

.operation-item-inspection-panel-header {
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid #d7dee8;
  display: flex;
  justify-content: space-between;
  min-height: 50px;
  padding: 8px 12px;
}

.operation-item-inspection-panel-header > div {
  align-items: baseline;
  display: flex;
  gap: 8px;
}

.operation-item-inspection-panel-header span {
  color: #667085;
  font-size: 11px;
}

.operation-item-inspection-summary {
  border-bottom: 1px solid #d7dee8;
  display: grid;
  grid-template-columns: repeat(4, minmax(86px, 1fr));
}

.operation-item-inspection-summary > span {
  align-items: center;
  border-right: 1px solid #e4e9f0;
  display: flex;
  gap: 10px;
  justify-content: center;
  min-height: 46px;
  padding: 6px 10px;
}

.operation-item-inspection-summary > span:last-child {
  border-right: 0;
}

.operation-item-inspection-summary small {
  color: #667085;
  font-size: 11px;
}

.operation-item-inspection-summary strong {
  color: #101828;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.operation-item-inspection-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.operation-item-inspection-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.operation-item-inspection-table.is-classified {
  min-width: 1040px;
}

.operation-item-inspection-table th,
.operation-item-inspection-table td {
  border-bottom: 1px solid #e4e9f0;
  box-sizing: border-box;
  height: 48px;
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}

.operation-item-inspection-table thead th {
  background: #f8fafc;
  color: #475467;
  font-size: 11px;
  font-weight: 700;
  height: 38px;
  white-space: nowrap;
}

.operation-item-inspection-table tbody td,
.operation-item-inspection-table tfoot td,
.operation-item-inspection-table tfoot th {
  color: #101828;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.operation-item-inspection-table th:first-child,
.operation-item-inspection-table td:first-child {
  width: 132px;
}

.operation-item-inspection-table th:last-child,
.operation-item-inspection-table td:last-child {
  width: 88px;
}

.operation-item-inspection-table input {
  background: #fff;
  border: 1px solid #9fb2c8;
  border-radius: 6px;
  box-sizing: border-box;
  color: #101828;
  font: inherit;
  height: 34px;
  margin: 0;
  max-width: 100%;
  padding: 4px 7px;
  text-align: center;
  width: 100%;
}

.operation-item-inspection-table input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(11, 111, 133, .14);
  outline: 0;
}

.operation-item-inspection-table .is-calculated {
  background: #f8fafc;
}

.operation-item-inspection-table .operation-item-inspection-edit-trigger {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #101828;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-variant-numeric: tabular-nums;
  height: 34px;
  justify-content: center;
  min-width: 100%;
  padding: 4px 6px;
  width: 100%;
}

.operation-item-inspection-table .operation-item-inspection-edit-trigger:hover,
.operation-item-inspection-table .operation-item-inspection-edit-trigger:focus-visible {
  background: #e8f3f4;
  outline: 0;
}

.operation-item-inspection-delete-form {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0;
}

.operation-item-inspection-table tfoot th,
.operation-item-inspection-table tfoot td {
  background: #f8fafc;
  border-bottom: 0;
  font-weight: 700;
}

.operation-item-inspection-empty {
  color: #667085 !important;
  height: 96px !important;
}

.operation-item-inspection-error {
  background: #fff4f3;
  border: 1px solid #f5b7b1;
  border-radius: 6px;
  color: #a11b1b;
  margin: 0;
  padding: 9px 12px;
}

.operation-item-inspection-add-dialog {
  width: min(520px, calc(100vw - 28px));
}

.operation-item-inspection-add-form {
  display: grid;
  gap: 12px;
}

.operation-item-inspection-add-form label {
  color: #344054;
  display: grid;
  font-size: 11px;
  font-weight: 700;
  gap: 5px;
}

.operation-item-inspection-add-form input {
  background: #fff;
  border: 1px solid #9fb2c8;
  border-radius: 6px;
  box-sizing: border-box;
  font: inherit;
  height: 38px;
  padding: 6px 9px;
}

.operation-item-inspection-add-levels {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.operation-item-inspection-level-group {
  display: grid;
  gap: 7px;
}

.operation-item-inspection-level-group > strong {
  color: #344054;
  font-size: 12px;
}

.operation-item-inspection-edit-dialog {
  width: min(560px, calc(100vw - 28px));
}

.operation-item-inspection-edit-form {
  display: grid;
  gap: 14px;
}

.operation-item-inspection-edit-form label {
  color: #344054;
  display: grid;
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
}

.operation-item-inspection-date-field {
  justify-self: start;
  width: 140px;
}

.operation-item-inspection-edit-form input {
  background: #fff;
  border: 1px solid #9fb2c8;
  border-radius: 6px;
  box-sizing: border-box;
  font: inherit;
  height: 38px;
  padding: 6px 9px;
}

.operation-item-inspection-edit-calculated,
.operation-item-inspection-edit-quantities {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operation-item-inspection-quantity-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.operation-item-inspection-quantity-grid > label {
  line-height: 18px;
  min-width: 0;
}

.operation-item-inspection-quantity-grid > .operation-item-inspection-insufficient {
  grid-column: 3;
}

.operation-item-inspection-edit-calculated > span {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e4e9f0;
  border-radius: 6px;
  color: #475467;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  padding: 9px 10px;
}

.operation-item-inspection-quantity-grid > .operation-item-inspection-calculated-label > strong {
  align-items: center;
  background: #eef1f5;
  border: 1px solid #c8d0db;
  border-radius: 6px;
  box-sizing: border-box;
  display: flex;
  font-size: 14px;
  height: 38px;
  justify-content: flex-start;
  padding: 6px 9px;
  color: #667085;
  cursor: not-allowed;
}

.operation-item-inspection-quantity-grid > label > input {
  font-size: 14px;
}

.operation-item-inspection-edit-form [data-operation-inspection-keypad-input].is-operation-inspection-keypad-selected,
.operation-item-inspection-add-form [data-operation-inspection-keypad-input].is-operation-inspection-keypad-selected {
  border-color: #2b72d6;
  box-shadow: 0 0 0 2px rgba(43, 114, 214, .18);
  outline: 0;
}

.operation-item-inspection-edit-calculated strong {
  color: #667085;
  cursor: not-allowed;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.operation-item-inspection-keypad {
  display: grid;
  gap: 6px;
  justify-self: center;
  margin-inline: auto;
  max-width: 282px;
  width: min(282px, 100%);
}

.operation-item-inspection-keypad > strong {
  color: #475467;
  font-size: 12px;
}

.operation-item-inspection-keypad > div {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.operation-item-inspection-keypad button {
  align-items: center;
  background: #eef1f4;
  border: 1px solid #9fb2c8;
  border-radius: 6px;
  color: #101828;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  height: 34px;
  justify-content: center;
  padding: 0;
}

.operation-item-inspection-keypad button:hover,
.operation-item-inspection-keypad button:focus-visible {
  background: #e2e8f0;
}

.operation-item-inspection-add-dialog .operation-compact-dialog-actions {
  border-top: 1px solid #e4e9f0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 2px -16px -16px;
  padding: 12px 16px;
}

@media (max-width: 720px) {
  .operation-item-inspection-page {
    gap: 8px;
  }

  .operation-item-inspection-summary {
    grid-template-columns: repeat(4, minmax(64px, 1fr));
  }

  .operation-item-inspection-summary > span {
    gap: 4px;
    min-height: 42px;
    padding: 5px 4px;
  }

  .operation-item-inspection-table {
    min-width: 650px;
  }

  .operation-item-inspection-table.is-classified {
    min-width: 980px;
  }

  .operation-item-inspection-add-levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.operation-item-shell .floating-contract-actions > [data-dirty-save],
.operation-settings-shell .floating-contract-actions > [data-dirty-save] {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  min-width: 72px;
}

.operation-add-button,
.operation-add-button:hover,
.operation-add-button:focus-visible {
  align-items: center !important;
  background: var(--action-add-bg) !important;
  border: 1px solid var(--action-add-border) !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(15, 98, 201, .25) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  height: 34px !important;
  justify-content: center !important;
  line-height: 1 !important;
  max-height: 34px !important;
  min-height: 34px !important;
  min-width: 72px !important;
  padding: 0 6px !important;
  text-align: center !important;
  white-space: nowrap !important;
  width: auto !important;
}

.operation-add-button:hover,
.operation-add-button:focus-visible {
  background: var(--action-add-bg-hover) !important;
  border-color: #0b57b8 !important;
}

/* Shared drawer toggle contract for work, project, setting, and SU drawers. */
.page [data-trade-sidebar]:not(.is-sidebar-collapsed) .trade-sidebar > [data-trade-sidebar-toggle] {
  align-items: center !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 2px solid rgba(71, 84, 103, .72) !important;
  border-radius: 999px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  height: 64px !important;
  justify-content: center !important;
  left: calc(var(--trade-sidebar-width, var(--common-drawer-width, 248px)) - 76px) !important;
  margin: 0 !important;
  min-height: 64px !important;
  padding: 0 !important;
  position: fixed !important;
  top: auto !important;
  width: 64px !important;
}

.page [data-trade-sidebar]:not(.is-sidebar-collapsed) .trade-sidebar-panel {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
}

.page [data-trade-sidebar].is-sidebar-collapsed .trade-sidebar > [data-trade-sidebar-toggle] {
  align-items: center !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 2px solid rgba(71, 84, 103, .72) !important;
  border-radius: 999px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12) !important;
  display: inline-flex !important;
  height: 64px !important;
  justify-content: center !important;
  left: calc(env(safe-area-inset-left, 0px) + 16px) !important;
  min-height: 64px !important;
  padding: 0 !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: auto !important;
  width: 64px !important;
  z-index: 141 !important;
}

/* Shared drawer glyph: use one standard arrow rather than a hand-built mark. */
.page [data-trade-sidebar] .trade-sidebar > [data-trade-sidebar-toggle] {
  color: #667085 !important;
}

.page [data-trade-sidebar] .trade-sidebar > [data-trade-sidebar-toggle] .trade-sidebar-toggle-icon {
  background: #667085 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  height: 22px !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  position: relative !important;
  transform: none !important;
  width: 22px !important;
}

.page [data-trade-sidebar] .trade-sidebar > [data-trade-sidebar-toggle] .trade-sidebar-toggle-icon::before {
  display: none !important;
}

.page [data-trade-sidebar] .trade-sidebar > [data-trade-sidebar-toggle] .trade-sidebar-toggle-icon::after {
  display: none !important;
}

.page [data-trade-sidebar].is-sidebar-collapsed .trade-sidebar > [data-trade-sidebar-toggle] .trade-sidebar-toggle-icon::after {
  display: none !important;
}

.page [data-trade-sidebar].is-sidebar-collapsed .trade-sidebar > [data-trade-sidebar-toggle] .trade-sidebar-toggle-icon {
  transform: scaleX(-1) !important;
}

@media (max-width: 760px) {
  .page [data-trade-sidebar]:not(.is-sidebar-collapsed) .trade-sidebar > [data-trade-sidebar-toggle] {
    left: calc(min(248px, calc(100vw - 24px)) - 76px) !important;
  }
}

/* Project headers otherwise override shared add-button rules. */
.layout-contract-shell .trade-product-add-form > .operation-add-button,
.layout-contract-shell .trade-product-add-form > .operation-add-button:hover,
.layout-contract-shell .trade-product-add-form > .operation-add-button:focus-visible {
  background: var(--action-add-bg) !important;
  border: 1px solid var(--action-add-border) !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  height: 34px !important;
  min-height: 34px !important;
  min-width: 72px !important;
  padding: 0 6px !important;
  width: auto !important;
}

.layout-contract-shell .trade-product-add-form > .operation-add-button:hover,
.layout-contract-shell .trade-product-add-form > .operation-add-button:focus-visible {
  background: var(--action-add-bg-hover) !important;
  border-color: #0b57b8 !important;
}

.operation-inbound-portal-title {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.operation-inbound-portal-title > strong {
  flex: 0 0 auto;
  white-space: nowrap;
}

.operation-inbound-date-filter {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: var(--text, #243447);
  font: inherit;
  font-size: 12px;
  height: 34px;
  max-width: 180px;
  min-width: 132px;
  padding: 0 28px 0 9px;
}

/* Compact operation dialogs share this contract (for example, inbound add and inspection quantity). */
.operation-compact-dialog {
  box-sizing: border-box;
  width: min(420px, calc(100vw - 32px));
  border: 1px solid var(--border-color, #d4deeb);
  border-radius: 8px;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  padding: 0;
  color: var(--text-color, #1b2638);
}

.operation-compact-dialog::backdrop {
  background: rgb(31 41 55 / 42%);
}

.operation-compact-dialog-header,
.operation-compact-dialog-body,
.operation-compact-dialog-actions {
  display: flex;
  align-items: center;
}

.operation-compact-dialog-header {
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color, #d4deeb);
}

.operation-compact-dialog-body {
  box-sizing: border-box;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin: 0;
  min-width: 0;
  padding: 16px;
}

.operation-compact-dialog-body p {
  margin: 0;
  color: var(--muted-text-color, #61708a);
}

.outbound-packing-carton-confirmation {
  display: grid;
  gap: 6px;
  margin: 0;
}

.outbound-packing-carton-confirmation > div {
  display: grid;
  gap: 8px;
  grid-template-columns: 92px minmax(0, 1fr);
}

.outbound-packing-carton-confirmation dt {
  color: var(--muted-text-color, #61708a);
}

.outbound-packing-carton-confirmation dd {
  margin: 0;
  font-weight: 700;
}

.operation-compact-dialog-body label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.operation-compact-dialog-body .operation-inbound-add-quantity-control,
.operation-compact-dialog-body input {
  box-sizing: border-box;
  min-width: 0;
}

.operation-inbound-add-quantity-control {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 34px;
}

.operation-inbound-add-quantity-control > input {
  min-width: 0;
  width: 100%;
}

/* Defect browser rows retain their list layout while using the shared add action. */
.operation-random-defect-browser-list > .operation-random-defect-browser-choice {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e4e7ec;
  color: #101828;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(150px, 0.8fr) minmax(260px, 1.8fr) auto;
  min-height: 58px;
  padding: 10px 18px;
}

.operation-random-defect-browser-list > .operation-random-defect-browser-choice:hover {
  background: #f9fafb;
}

.operation-random-defect-browser-list > .operation-random-defect-browser-choice[hidden] {
  display: none;
}

.operation-random-defect-browser-choice > span {
  color: #667085;
  font-size: 12px;
  font-weight: 500;
}

.operation-random-defect-browser-choice > strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.operation-random-defect-browser-choice > .operation-add-button {
  justify-self: end;
}

@media (max-width: 980px) {
  .operation-random-defect-browser-list > .operation-random-defect-browser-choice {
    grid-template-columns: minmax(110px, 0.7fr) minmax(180px, 1.5fr) auto;
  }
}

.operation-quantity-calculator-control--active > input {
  border-color: #1677a6;
  box-shadow: 0 0 0 3px rgb(22 119 166 / 18%);
}

.operation-quantity-calculator-control--active .operation-inbound-calculator-toggle {
  background: #e8f4f8;
  border-color: #1677a6;
  color: #0b5c83 !important;
}

.operation-inbound-calculator-toggle {
  color: #344054 !important;
}

.operation-inbound-calculator-icon {
  border: 1.5px solid currentColor;
  border-radius: 2px;
  box-sizing: border-box;
  display: block;
  height: 17px;
  position: relative;
  width: 13px;
}

.operation-inbound-calculator-icon::before {
  border-bottom: 1.5px solid currentColor;
  content: "";
  left: 2px;
  position: absolute;
  right: 2px;
  top: 4px;
}

.operation-inbound-calculator-icon::after {
  background: currentColor;
  box-shadow: 4px 0 currentColor, 0 4px currentColor, 4px 4px currentColor;
  content: "";
  height: 2px;
  left: 3px;
  position: absolute;
  top: 9px;
  width: 2px;
}

.operation-inbound-calculator {
  background: #f8fafc;
  border: 1px solid var(--border-color, #d4deeb);
  border-radius: 6px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.operation-inbound-calculator[hidden] {
  display: none;
}

.operation-inbound-calculator-header,
.operation-inbound-calculator-actions,
.operation-inbound-calculator-result {
  align-items: center;
  display: flex;
}

.operation-inbound-calculator-header {
  justify-content: space-between;
}

.operation-inbound-calculator-expression-label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.operation-inbound-calculator-expression-label output {
  align-items: center;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-sizing: border-box;
  display: flex;
  font-variant-numeric: tabular-nums;
  justify-content: flex-end;
  min-height: 38px;
  overflow: hidden;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-inbound-calculator-result {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 10px;
}

.operation-inbound-calculator-result span {
  color: #61708a;
  font-size: 12px;
}

.operation-inbound-calculator-result strong {
  font-variant-numeric: tabular-nums;
}

.operation-inbound-calculator-message {
  color: #b42318;
  font-size: 12px;
  margin: -4px 0 0;
  min-height: 16px;
}

.operation-inbound-calculator-keypad {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.operation-inbound-calculator-keypad button {
  align-items: center;
  background: #eef1f4;
  border: 1px solid #9fb2c8;
  border-radius: 6px;
  color: #101828;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  height: 34px;
  justify-content: center;
  padding: 0;
}

.operation-inbound-calculator-keypad button:hover,
.operation-inbound-calculator-keypad button:focus-visible {
  background: #e2e8f0;
}

.operation-inbound-calculator-actions {
  justify-content: flex-end;
}

/* PackingList_Inbound_Browser: MUSYSTEM standard record header plus inbound-item portal. */
.packing-list-inbound-browser-shell .floating-contract-header {
  background: #fff;
  border-bottom: 1px solid #d0d5dd;
  box-sizing: border-box;
  color: #101828;
  min-height: 48px;
  padding-block: 6px;
}

.packing-list-inbound-browser-shell .floating-contract-heading h2 {
  color: #101828;
  font-size: 15px;
  letter-spacing: .01em;
}

.packing-list-inbound-browser-shell .floating-contract-body {
  background: #f8fafc;
  padding: 0;
}

.packing-list-inbound-browser {
  background: #f8fafc;
  color: #101828;
  display: grid;
  gap: 14px;
  min-height: 100%;
  padding: 14px;
}

.packing-list-inbound-browser-record {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(16 24 40 / 6%);
  overflow: hidden;
}

.packing-list-inbound-browser-record-header {
  align-items: stretch;
  background: #f8fafc;
  border-bottom: 1px solid #eaecf0;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 82px;
  padding: 10px 12px;
}

.packing-list-inbound-browser-record-fields {
  display: grid;
  gap: 10px;
  /* Keep the date at the same compact width as the Operation header so the
   * native calendar button remains adjacent to its displayed value. */
  grid-template-columns: minmax(106px, 148px) minmax(108px, 126px) minmax(180px, 1fr);
  margin: 0;
}

.packing-list-inbound-browser-record-fields > div {
  align-content: start;
  display: grid;
  grid-template-rows: auto minmax(36px, 1fr);
  min-width: 0;
}

/* The edit header uses labels and inputs, but it shares the same visual scale
 * as the read-only record fields. */
.packing-list-inbound-browser-record-fields > label {
  align-content: start;
  color: #475467;
  display: grid;
  font-size: 11px;
  font-weight: 700;
  gap: 3px;
  grid-template-rows: auto minmax(36px, 1fr);
  margin: 0;
  min-width: 0;
}

.packing-list-inbound-browser-record-fields > label > input {
  border-color: #b8c7da;
  box-sizing: border-box;
  font-size: 13px;
  min-height: 36px;
  padding: 5px 7px;
}

.packing-list-inbound-browser-record-fields dt {
  color: #475467;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 3px;
}

.packing-list-inbound-browser-record-fields dd {
  align-items: center;
  background: #fff;
  border: 1px solid #b8c7da;
  border-radius: 6px;
  color: #101828;
  display: flex;
  font-size: 13px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  padding: 5px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.packing-list-outbound-browser .packing-list-inbound-browser-record-fields .packing-list-outbound-header-editable dd {
  background: transparent;
  border: 0;
  gap: 2px;
  padding-left: 0;
  padding-right: 0;
}

.packing-list-outbound-header-editable dd > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.packing-list-outbound-header-editable .operation-product-edit-button--header {
  flex: 0 0 26px;
  height: 26px;
  margin-left: 2px;
  width: 26px;
}

/* Match Operation's directly selectable calendar rather than a boxed text field. */
.packing-list-inbound-browser-record-fields > label.packing-list-outbound-date-picker {
  gap: 3px;
}

.packing-list-inbound-browser-record-fields > label.packing-list-outbound-date-picker > input[type="date"] {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #111827;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  min-height: 0;
  outline: 0;
  padding: 1px 2px;
  text-align: left;
  width: 100%;
}

.packing-list-inbound-browser-record-fields > label.packing-list-outbound-date-picker > input[type="date"]:focus {
  background: #fff;
  box-shadow: inset 0 0 0 1px #98a2b3;
}

/* Keep the native calendar glyph identical to the browser page while locking
 * the date on the packing-list edit page. */
.packing-list-inbound-browser-record-fields > label.packing-list-outbound-date-picker > input.packing-list-outbound-date-picker-input--readonly {
  pointer-events: none;
}

.packing-list-inbound-browser-record-actions {
  align-self: end;
  display: flex;
  gap: 8px;
}

.packing-list-inbound-browser-approval {
  display: flex;
  margin: 0;
}

.packing-list-inbound-browser-approval button,
.packing-list-inbound-browser-approval-status {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 36px;
  min-width: 64px;
  white-space: nowrap;
}

.packing-list-inbound-browser-approval .packing-list-outbound-approval-button {
  align-items: center;
  align-self: center;
  background: #fff;
  border: 1px solid #2f80ed;
  border-radius: 999px;
  box-sizing: border-box;
  color: #2f80ed;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 40px;
  min-width: 0;
  padding: 0 13px;
  width: 78px;
}

.packing-list-inbound-browser-approval .packing-list-outbound-approval-button:hover,
.packing-list-inbound-browser-approval .packing-list-outbound-approval-button:focus-visible {
  background: #eff6ff;
  border-color: #1d6fd8;
  color: #1d6fd8;
}

.packing-list-inbound-browser-approval .packing-list-outbound-approval-button.is-confirmed {
  background: #dbeafe;
  border-color: #2f80ed;
  color: #1d6fd8;
}

.packing-list-inbound-browser-approval .packing-list-outbound-approval-button.is-confirmed:hover,
.packing-list-inbound-browser-approval .packing-list-outbound-approval-button.is-confirmed:focus-visible {
  background: #bfdbfe;
  border-color: #1d6fd8;
  color: #1559ad;
}

.packing-list-inbound-browser-approval-status {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.packing-list-inbound-browser-product {
  background: #fff;
  border-bottom: 1px solid #eaecf0;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(94px, 1fr));
  padding: 10px 14px;
}

.packing-list-inbound-browser-product[data-inbound-packing-target] {
  grid-template-columns: minmax(360px, 1.5fr) minmax(300px, 1.25fr) minmax(180px, .75fr);
}

/* Outbound PL input is a single left-to-right workflow: Operation, product, label, add. */
.packing-list-outbound-browser .packing-list-inbound-browser-product {
  align-items: end;
  grid-template-columns: 76px minmax(300px, 1fr) auto minmax(0, 1.35fr) auto;
}

.packing-list-outbound-browser .outbound-packing-product-choice-field,
.packing-list-outbound-browser .outbound-packing-product-display-field,
.packing-list-outbound-browser .outbound-packing-add-action-field {
  align-self: end;
  min-height: 36px;
}

.packing-list-outbound-browser .outbound-packing-product-choice-field {
  display: flex;
}

.packing-list-outbound-browser .outbound-packing-operation-field select.is-outbound-packing-selection-required,
.packing-list-outbound-browser .outbound-packing-product-choice-button.is-outbound-packing-selection-required {
  background: #eaf3ff !important;
  border-color: #1570ef !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 1px 2px rgba(21, 112, 239, .16) !important;
  color: #175cd3 !important;
}

.packing-list-outbound-browser .outbound-packing-operation-field select.is-outbound-packing-selection-required:focus,
.packing-list-outbound-browser .outbound-packing-product-choice-button.is-outbound-packing-selection-required:hover,
.packing-list-outbound-browser .outbound-packing-product-choice-button.is-outbound-packing-selection-required:focus-visible {
  background: #dcecff !important;
  border-color: #0b57d0 !important;
}

.packing-list-outbound-browser .outbound-packing-product-display-field {
  display: flex;
  min-width: 0;
}

.packing-list-outbound-browser .outbound-packing-product-choice-field[hidden],
.packing-list-outbound-browser .outbound-packing-product-display-field[hidden] {
  display: none;
}

.packing-list-outbound-browser .outbound-packing-product-display-field strong {
  display: grid;
  gap: 2px;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.packing-list-outbound-browser .outbound-packing-product-display-name {
  color: #101828;
  font-weight: 750;
}

.packing-list-outbound-browser .outbound-packing-product-display-details {
  color: #667085;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
}

.packing-list-outbound-browser .outbound-packing-add-action-field {
  display: flex;
  justify-content: flex-end;
  justify-self: end;
}

.packing-list-outbound-browser .outbound-packing-add-action-field [data-outbound-packing-add-wrap] {
  align-self: end;
}

.packing-list-inbound-browser-product > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.packing-list-inbound-browser-product span {
  color: #667085;
  font-size: 10px;
  font-weight: 700;
}

.packing-list-inbound-browser-product strong {
  color: #101828;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.packing-list-inbound-browser-product select,
.packing-list-inbound-browser-product .outbound-packing-group-field input {
  background: #fff;
  border: 1px solid #b8c7da;
  border-radius: 6px;
  box-sizing: border-box;
  color: #182230;
  font: inherit;
  font-size: 12px;
  min-height: 36px;
  padding: 7px 9px;
  width: 100%;
}

.packing-list-inbound-browser-product .operation-summary-setting-input-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.packing-list-inbound-browser-product[data-inbound-packing-target] .operation-add-button {
  justify-self: end;
  min-width: 96px;
  width: auto;
}

.packing-list-inbound-browser-product[data-inbound-packing-target] .operation-add-button[hidden] {
  display: none !important;
}

.packing-list-inbound-browser-portal {
  overflow-x: auto;
  padding: 12px 14px 16px;
}

.packing-list-inbound-browser-selection-toolbar {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.packing-list-inbound-browser-selection-toolbar form {
  display: flex;
}

.packing-list-inbound-browser-portal-head,
.packing-list-inbound-browser-portal-row {
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(150px, 1.5fr) minmax(80px, .8fr) minmax(72px, .7fr) minmax(98px, 1fr) minmax(76px, .7fr) minmax(72px, .6fr) minmax(160px, 1.5fr) minmax(104px, .9fr) minmax(64px, .55fr);
  min-width: 970px;
}

.packing-list-inbound-browser-portal-head {
  color: #475467;
  font-size: 10px;
  font-weight: 700;
  padding: 0 6px 4px;
  text-align: center;
}

.packing-list-inbound-browser-portal-row > span,
.packing-list-inbound-browser-portal-row > strong {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 5px;
  color: #101828;
  display: flex;
  font-size: 12px;
  font-weight: 500;
  min-height: 34px;
  min-width: 0;
  overflow: hidden;
  padding: 4px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.packing-list-inbound-browser-portal-row > strong {
  font-weight: 800;
  justify-content: flex-end;
}

/* Editable outbound lines retain the read-only browser's row density and
 * typography; the border is the only affordance that changes. */
.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > input {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 5px;
  box-sizing: border-box;
  color: #101828;
  font-size: 12px;
  font-weight: 500;
  min-height: 34px;
  min-width: 0;
  padding: 4px 7px;
}

.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > input[name$="-quantity"] {
  font-weight: 800;
  text-align: right;
}

.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > input[data-outbound-packing-aggregate-field="quantity"],
.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > output[data-outbound-packing-aggregate-total] {
  font-weight: 800;
  text-align: right;
}

.packing-list-outbound-browser .packing-list-outbound-total-row {
  border-top: 1px solid #98a2b3;
  margin-top: 8px;
  padding-top: 6px;
}

.packing-list-outbound-browser .packing-list-outbound-total-row > :is(span, strong) {
  background: transparent;
  border: 0;
  border-radius: 0;
  font-variant-numeric: tabular-nums;
  min-height: 0;
}

.packing-list-outbound-browser .packing-list-outbound-total-label {
  color: #475467;
  grid-column: span 2;
  justify-content: flex-start;
}

/* 箱数は明細・合計とも数値列として右端を揃える。 */
.packing-list-outbound-browser .packing-list-inbound-browser-portal-row:not(.packing-list-outbound-total-row) > :nth-child(3),
.packing-list-outbound-browser .packing-list-outbound-total-row > strong:nth-child(2) {
  justify-content: flex-end;
  text-align: right;
}

/* 識別項目は列の中心に、数量・重量・体積は右端に揃える。 */
.packing-list-outbound-browser .packing-list-inbound-browser-portal-row:not(.packing-list-outbound-total-row) > :is(:nth-child(1), :nth-child(2), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7)) {
  justify-content: center;
  text-align: center;
}

/* 閲覧用PLは入力画面ではないため、セル単位のカード枠を使わない。 */
.packing-list-outbound-browser--readonly .packing-list-inbound-browser-portal-row:not(.packing-list-outbound-total-row) {
  border-bottom: 1px solid #eaecf0;
}

.packing-list-outbound-browser:not(.packing-list-outbound-browser--readonly) .packing-list-inbound-browser-portal-row:not(.packing-list-outbound-total-row) {
  border-bottom: 1px solid #eaecf0;
}

.packing-list-outbound-browser--readonly .packing-list-inbound-browser-portal-row:not(.packing-list-outbound-total-row) > :is(span, strong) {
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* 閲覧・編集とも、見出しと明細の間を同じ一本線で区切る。 */
.packing-list-outbound-browser .packing-list-inbound-browser-portal-head {
  box-shadow: inset 0 -1px #d0d5dd;
}

/* 閲覧時の基本情報は入力欄ではないため、カード枠を使わない。 */
.packing-list-outbound-browser--readonly .packing-list-inbound-browser-record-fields dd {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

/* The edit page shares the browser header presentation; only the detail grid
 * below it is editable. */
.packing-list-outbound-browser:not(.packing-list-outbound-browser--readonly):not(.packing-list-outbound-carton-detail-page) .packing-list-inbound-browser-record-fields dd {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.packing-list-outbound-browser:not(.packing-list-outbound-browser--readonly) .packing-list-outbound-continuation-blank {
  background: transparent;
  border: 0;
  border-radius: 0;
  min-height: 0;
  padding: 0;
}

.packing-list-outbound-browser:not(.packing-list-outbound-browser--readonly) .packing-list-outbound-readonly-field {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.packing-list-outbound-browser:not(.packing-list-outbound-browser--readonly) .packing-list-outbound-readonly-field[data-outbound-packing-aggregate-total] {
  font-weight: 800;
  justify-content: flex-end;
  text-align: right;
}

.packing-list-outbound-browser:not(.packing-list-outbound-browser--readonly) .packing-list-inbound-browser-portal-row[data-row-href] {
  cursor: pointer;
}

.packing-list-outbound-browser:not(.packing-list-outbound-browser--readonly) .packing-list-inbound-browser-portal-row[data-row-href]:focus-visible {
  outline: 2px solid #667085;
  outline-offset: 2px;
}

.packing-list-outbound-browser:not(.packing-list-outbound-browser--readonly) .packing-list-inbound-browser-portal-row[data-row-href] :is(input, button, select, textarea, a) {
  cursor: auto;
}

.packing-list-outbound-carton-detail-page .packing-list-inbound-browser-record-fields {
  align-items: center;
  gap: 28px;
  grid-template-columns: auto auto;
  justify-content: start;
  width: max-content;
}

.packing-list-outbound-carton-detail-page .packing-list-inbound-browser-record-header {
  min-height: 52px;
  padding-block: 8px;
}

/* Carton detail is a temporary-edit surface: only return to the parent PL. */
.packing-list-outbound-carton-detail-page .packing-list-outbound-carton-detail-return-header {
  grid-template-columns: 1fr;
}

.packing-list-outbound-carton-detail-page .packing-list-outbound-carton-detail-return-header .packing-list-inbound-browser-record-actions {
  align-self: center;
  justify-self: start;
}

.packing-list-outbound-carton-detail-page .packing-list-inbound-browser-record-fields > div {
  align-items: baseline;
  display: flex;
  gap: 8px;
}

.packing-list-outbound-carton-detail-page .packing-list-inbound-browser-record-fields dt {
  margin: 0;
}

.packing-list-outbound-carton-detail-page .packing-list-inbound-browser-record-fields dd {
  background: transparent;
  border: 0;
  border-radius: 0;
  min-height: 0;
  padding: 0;
}

.packing-list-outbound-carton-detail-page .packing-list-inbound-browser-record-actions {
  align-self: center;
}

.packing-list-inbound-browser-portal [hidden] {
  display: none !important;
}

.packing-list-inbound-browser-row-action {
  align-items: center;
  display: flex;
  justify-content: center;
}

.packing-list-inbound-browser-row-action .operation-compact-action {
  min-width: 64px;
}

.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > .packing-list-outbound-row-action-links {
  background: transparent;
  border: 0;
  gap: 10px;
  min-height: 34px;
  padding: 0;
}

.packing-list-outbound-edit-link {
  color: #344054;
  font-size: 12px;
  line-height: 1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.packing-list-outbound-edit-link:hover,
.packing-list-outbound-edit-link:focus-visible {
  color: #101828;
}

/* The action cell itself must not add the generic cell padding around its
 * 34px button; otherwise every carton-detail row grows to 44px. */
.packing-list-outbound-carton-detail-page .packing-list-inbound-browser-portal-row > .packing-list-inbound-browser-row-action {
  align-self: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  height: 34px;
  min-height: 34px;
  padding: 0;
}

.packing-list-outbound-delete-link {
  align-items: center;
  background: transparent;
  border: 0;
  color: #b42318;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  height: 100%;
  justify-content: center;
  line-height: 1;
  padding: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.packing-list-outbound-delete-link:hover,
.packing-list-outbound-delete-link:focus-visible {
  color: #912018;
}

.packing-list-inbound-browser-row-check.is-selected {
  background: #15803d !important;
  border-color: #166534 !important;
  color: #fff;
}

.packing-list-inbound-browser-portal-row.is-selected > span,
.packing-list-inbound-browser-portal-row.is-selected > strong {
  background: #f0fdf4;
  border-color: #86efac;
}

/* Outbound packing lines: a carton number is compact while the product name
 * needs the dominant column.  There is no empty action column. */
.packing-list-outbound-browser .packing-list-inbound-browser-portal-head,
.packing-list-outbound-browser .packing-list-inbound-browser-portal-row {
  grid-template-columns:
    minmax(72px, .45fr)
    minmax(240px, 2.1fr)
    repeat(3, minmax(92px, .72fr))
    minmax(82px, .55fr)
    minmax(160px, 1.3fr)
    minmax(78px, .5fr);
  min-width: 1080px;
}

/* The read-only browser does not repeat the packing-list's shipping date for
 * every line, so use the released space for the actual line details. */
.packing-list-outbound-browser--readonly .packing-list-inbound-browser-portal-head,
.packing-list-outbound-browser--readonly .packing-list-inbound-browser-portal-row {
  grid-template-columns:
    46px
    minmax(82px, .5fr)
    52px
    minmax(260px, 2.35fr)
    repeat(3, minmax(92px, .78fr))
    repeat(2, minmax(72px, .52fr))
    minmax(190px, 1.6fr)
    repeat(2, 76px)
    repeat(3, 56px)
    repeat(2, 66px);
  min-width: 1490px;
}

.packing-list-outbound-browser:not(.packing-list-outbound-browser--readonly) .packing-list-inbound-browser-portal-head,
.packing-list-outbound-browser:not(.packing-list-outbound-browser--readonly) .packing-list-inbound-browser-portal-row {
  grid-template-columns:
    46px
    minmax(82px, .5fr)
    52px
    minmax(240px, 2.1fr)
    repeat(3, minmax(92px, .72fr))
    repeat(2, minmax(72px, .52fr))
    minmax(160px, 1.3fr)
    repeat(2, 76px)
    repeat(3, 56px)
    repeat(2, 66px);
  min-width: 1560px;
}

/* A physical-carton row has no quantity or total-M3 aggregate: each repeats
 * an already displayed per-carton value.  This comes after the process grid
 * so the 15 displayed cells keep their corresponding widths. */
.packing-list-outbound-browser.packing-list-outbound-carton-detail-page .packing-list-inbound-browser-portal-head,
.packing-list-outbound-browser.packing-list-outbound-carton-detail-page .packing-list-inbound-browser-portal-row {
  grid-template-columns:
    46px
    minmax(82px, .5fr)
    52px
    minmax(240px, 2.1fr)
    repeat(3, minmax(92px, .72fr))
    minmax(72px, .52fr)
    minmax(160px, 1.3fr)
    repeat(2, 76px)
    repeat(3, 56px)
    66px
    76px;
  min-width: 1498px;
}

.packing-list-outbound-carton-detail-page .packing-list-inbound-browser-portal-row > input[type="hidden"] {
  display: none !important;
}

.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > input[type="number"]::-webkit-inner-spin-button,
.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > output {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 5px;
  box-sizing: border-box;
  color: #101828;
  display: flex;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  justify-content: flex-end;
  min-height: 34px;
  min-width: 0;
  overflow: hidden;
  padding: 4px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > input[name$="-net_weight"],
.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > input[name$="-gross_weight"],
.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > input[name$="-width"],
.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > input[name$="-depth"],
.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > input[name$="-height"],
.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > input[name$="-m3"],
.packing-list-outbound-browser .packing-list-outbound-measurement {
  font-variant-numeric: tabular-nums;
  justify-content: flex-end;
  text-align: right;
}

.packing-list-outbound-browser .packing-list-inbound-browser-portal-row > input[name$="-item_code"] {
  font-weight: 700;
}

.project-inbound-packing-list .trade-project-head,
.project-inbound-packing-list .trade-project-row {
  grid-template-columns: minmax(120px, .7fr) minmax(0, 1.6fr) minmax(84px, .4fr) 64px;
}

.project-inbound-packing-list .trade-project-row-main {
  grid-column: 1 / 4;
  grid-template-columns: minmax(120px, .7fr) minmax(0, 1.6fr) minmax(84px, .4fr);
}

.project-inbound-packing-list .trade-project-delete-form {
  grid-column: 4;
  justify-self: center;
  position: static;
  transform: none;
}

/* Projects_OperationOutbound_WorkPlace_PC: the DDR portal exposes quantity,
 * carton, photo, check-item and task columns for each outbound packing list. */
.project-outbound-packing-list .trade-project-head,
.project-outbound-packing-list .trade-project-row-main {
  grid-template-columns:
    minmax(120px, .72fr)
    minmax(160px, 1.55fr)
    minmax(78px, .48fr)
    minmax(72px, .42fr)
    minmax(64px, .38fr)
    minmax(108px, .68fr)
    minmax(120px, .75fr);
}

.project-outbound-packing-list .project-operation-card-count {
  font-variant-numeric: tabular-nums;
}

.project-outbound-packing-list .project-operation-task {
  color: #475467;
  font-size: 12px;
  overflow-wrap: anywhere;
  text-align: center;
}

.packing-list-inbound-browser-empty {
  color: #667085;
  margin: 0;
  padding: 34px 10px;
  text-align: center;
}

@media (max-width: 760px) {
  .floating-contract-panel.operation-item-shell .floating-contract-header,
  .floating-contract-panel.operation-settings-shell .floating-contract-header {
    grid-template-columns: minmax(0, 1fr) auto 36px;
  }

  .floating-contract-panel.operation-item-shell .floating-contract-actions,
  .floating-contract-panel.operation-settings-shell .floating-contract-actions {
    display: flex;
  }

  .operation-compact-dialog {
    box-sizing: border-box;
    margin: auto;
    max-height: calc(100dvh - 24px);
    max-width: calc(100vw - 24px);
    overflow: hidden;
    width: calc(100vw - 24px);
  }

  .operation-compact-dialog-header,
  .operation-compact-dialog-body {
    padding: 12px;
  }

  .operation-compact-dialog-body {
    gap: 10px;
  }

  .operation-compact-dialog-actions {
    margin: 0 -12px -12px;
    padding: 12px;
  }

  .operation-inbound-calculator {
    gap: 8px;
    max-width: 100%;
    padding: 10px;
  }

  .operation-inbound-calculator-keypad button {
    height: 32px;
  }
}

.operation-inbound-add-date-control {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 34px;
}

.operation-inbound-add-date-control > input {
  min-width: 0;
  width: 100%;
}

.operation-inbound-add-date-control > [hidden] {
  display: none !important;
}

.operation-inbound-add-reset-today {
  align-items: center;
  background: transparent;
  border: 0;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  font-size: 22px;
  height: 34px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 34px;
}

.operation-inbound-add-reset-today:hover,
.operation-inbound-add-reset-today:focus-visible {
  background: transparent;
  color: #101828;
}

.operation-inbound-add-reset-today:focus-visible {
  outline: 2px solid #0e7490;
  outline-offset: 2px;
}

.operation-inbound-add-date.is-not-today {
  background: #fff5f4;
  border-color: #fecdca;
  color: #b42318;
}

.operation-compact-dialog-actions {
  align-items: center;
  border-top: 1px solid var(--border-color, #d4deeb);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 -16px -16px;
  padding: 12px 16px;
}

@media (max-width: 760px) {
  .operation-compact-dialog-actions {
    margin: 0 -12px -12px;
    padding: 12px;
  }
}

.operation-inbound-row > .operation-inbound-remark-toggle {
  display: none;
}

.operation-item-inbound-remark-dialog {
  border: 1px solid var(--border-color, #d4deeb);
  border-radius: 8px;
  color: var(--text-color, #1b2638);
  padding: 0;
  width: min(420px, calc(100vw - 32px));
}

.operation-item-inbound-remark-dialog::backdrop {
  background: rgb(31 41 55 / 42%);
}

.operation-item-inbound-remark-dialog-header,
.operation-item-inbound-remark-dialog-body,
.operation-item-inbound-remark-dialog-actions {
  align-items: center;
  display: flex;
}

.operation-item-inbound-remark-dialog-header {
  border-bottom: 1px solid var(--border-color, #d4deeb);
  justify-content: space-between;
  padding: 14px 16px;
}

.operation-item-inbound-remark-dialog-body {
  align-items: stretch;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

.operation-item-inbound-remark-dialog-body label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.operation-item-inbound-remark-dialog-body textarea {
  box-sizing: border-box;
  min-height: 112px;
  resize: vertical;
  width: 100%;
}

.operation-item-inbound-remark-dialog-actions {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .operation-item-inbound-layout {
    gap: 12px;
    padding: 0 10px 20px;
  }

  .operation-item-inbound-board {
    max-height: none;
    overflow: visible;
    padding: 0;
    scrollbar-gutter: auto;
  }

  .operation-inbound-heading {
    display: grid;
    gap: 4px;
    grid-template-columns: minmax(120px, 1.3fr) 66px 42px minmax(0, .7fr) 48px;
    justify-content: start;
  }

  .operation-item-inbound-board .operation-inbound-heading {
    height: 36px;
    min-height: 36px;
    padding: 4px 8px;
  }

  .operation-inbound-row {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e7edf4;
    border-radius: 0;
    gap: 4px;
    grid-template-columns: minmax(120px, 1.3fr) 66px 42px minmax(0, .7fr) 48px;
    justify-content: start;
    height: 48px;
    margin: 0;
    min-height: 48px;
    padding: 6px 8px;
  }

  .operation-inbound-portal-header {
    align-items: center;
    flex-direction: row;
    height: 48px;
    min-height: 48px;
  }

  .operation-inbound-portal-title {
    flex: 1 1 auto;
    width: auto;
  }

  .operation-inbound-date-filter {
    flex: 1 1 auto;
    max-width: none;
  }

  .operation-inbound-portal-actions {
    justify-content: flex-end;
    width: auto;
  }

  .operation-inbound-row > .operation-inbound-row-placeholder {
    display: none !important;
  }

  .operation-inbound-row > input.operation-inbound-editable {
    box-sizing: border-box !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
  }

  .operation-inbound-row > input.operation-inbound-remark-input {
    display: none;
  }

  .operation-inbound-row > .operation-inbound-remark-toggle {
    align-items: center;
    background: #eef1f4 !important;
    border: 1px solid #9fb2c8 !important;
    border-radius: 6px !important;
    color: #475467 !important;
    cursor: pointer;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    justify-self: center;
    margin: 0;
    padding: 0;
    width: 34px;
  }

  .operation-inbound-heading > span:nth-child(3) {
    justify-self: center;
    padding: 0;
    white-space: nowrap;
    width: 34px;
  }

  .operation-inbound-row > .operation-inbound-remark-toggle span {
    border: 1.5px solid currentColor;
    border-radius: 2px;
    box-sizing: border-box;
    display: block;
    height: 17px;
    position: relative;
    width: 13px;
  }

  .operation-inbound-row > .operation-inbound-remark-toggle span::before,
  .operation-inbound-row > .operation-inbound-remark-toggle span::after {
    background: currentColor;
    content: "";
    height: 1.5px;
    left: 2px;
    position: absolute;
    width: 7px;
  }

  .operation-inbound-row > .operation-inbound-remark-toggle span::before {
    top: 5px;
  }

  .operation-inbound-row > .operation-inbound-remark-toggle span::after {
    top: 9px;
  }

  .operation-inbound-row > .operation-inbound-remark-toggle.has-remark {
    background: #fff3e0 !important;
    border-color: #d97706 !important;
    color: #9a6700 !important;
  }

  .operation-inbound-row > .operation-inbound-remark-toggle:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
  }

  .operation-inbound-row > .operation-inbound-action-button {
    justify-self: center;
    max-width: 48px !important;
    min-width: 48px !important;
    padding: 0 4px !important;
    width: 48px !important;
  }

  .operation-inbound-row > .operation-inbound-packing-link {
    grid-column: 4;
    justify-self: stretch;
    max-width: none !important;
    min-width: 0 !important;
    overflow: hidden;
    padding: 0 6px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100% !important;
  }

  .operation-inbound-row.is-readonly > .operation-inbound-date,
  .operation-inbound-row.is-readonly > .operation-inbound-quantity {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .operation-inbound-heading,
  .operation-inbound-row {
    grid-template-columns: minmax(100px, 1.2fr) 60px 42px minmax(0, .8fr) 44px;
  }

  .operation-inbound-row > .operation-inbound-action-button {
    max-width: 44px !important;
    min-width: 44px !important;
    width: 44px !important;
  }
}

@media (max-width: 480px) {
  .operation-inbound-row > .operation-inbound-date,
  .operation-inbound-row > .operation-inbound-quantity,
  .operation-inbound-row.is-editable > .operation-inbound-date-control > .operation-inbound-mobile-date-display {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1;
  }

  .operation-inbound-row.is-editable > .operation-inbound-date-control {
    background: #fff !important;
    border: 1px solid #9fb2c8 !important;
    border-radius: var(--radius, 6px) !important;
    box-shadow: none !important;
    height: 36px;
    min-width: 0;
    padding: 0 !important;
  }

  .operation-inbound-row.is-editable > .operation-inbound-date-control:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(11, 111, 133, .14);
  }

  .operation-inbound-row.is-editable > .operation-inbound-date-control > .operation-inbound-date {
    inset: 0;
    min-width: 0 !important;
    opacity: 0;
    position: absolute;
    width: 100% !important;
    z-index: 1;
  }

  .operation-inbound-row.is-editable > .operation-inbound-date-control > .operation-inbound-mobile-date-display {
    align-items: center;
    color: #101828;
    display: flex;
    font-variant-numeric: tabular-nums;
    inset: 0;
    justify-content: center;
    letter-spacing: 0;
    pointer-events: none;
    position: absolute;
  }

  .operation-inbound-row.is-readonly > .operation-inbound-date .operation-inbound-date-desktop {
    display: none;
  }

  .operation-inbound-row.is-readonly > .operation-inbound-date .operation-inbound-date-mobile {
    display: inline;
  }

  .operation-inbound-row.is-editable > .operation-inbound-quantity { min-width: 0 !important; }
}

@media (max-width: 760px) {
  .packing-list-inbound-browser {
    gap: 10px;
    padding: 10px;
  }

  .packing-list-inbound-browser-record-header {
    padding: 8px;
    grid-template-columns: 1fr;
  }

  .packing-list-inbound-browser-record-fields {
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 8px;
  }

  .packing-list-inbound-browser-record-fields .packing-list-inbound-browser-name {
    grid-column: span 2;
  }

  .packing-list-inbound-browser-record-actions {
    justify-content: flex-end;
  }

  .packing-list-inbound-browser-product {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 9px 10px;
  }

  .packing-list-inbound-browser-product > div:first-child {
    grid-column: span 2;
  }

  .packing-list-outbound-browser .packing-list-inbound-browser-product {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .packing-list-outbound-browser .outbound-packing-operation-field,
  .packing-list-outbound-browser .outbound-packing-product-display-field {
    grid-column: span 2;
  }

  .packing-list-outbound-browser .outbound-packing-add-action-field {
    grid-column: 2;
  }

  .packing-list-inbound-browser-portal {
    padding: 10px;
  }
}

/* This grid owns the border on each cell.  Collapsing table borders lets the
 * product cell win a different shared border and makes row rules look offset. */
.operation-reportonly-portal {
  border-collapse: separate;
  border-spacing: 0;
}

/* Use the same selected-state marker for every Operation report tab. */
.operation-index-tabs strong::after,
.operation-index-tabs a.is-active::after {
  background: #2f6fed;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}

/* Outbound PL uses the same tab row rhythm as the Operation screen. */
.packing-list-outbound-tabs-row {
  align-items: center;
  border-bottom: 1px solid #eaecf0;
  padding-bottom: 10px;
}

.packing-list-outbound-tabs {
  box-sizing: border-box;
  flex: 0 1 auto;
  grid-template-columns: repeat(4, minmax(0, 126px));
  margin-bottom: 0;
  min-height: 48px;
  width: max-content;
}

.packing-list-outbound-members-trigger {
  background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
  border-color: #111827;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #344054;
  flex-basis: 40px;
  height: 40px;
  min-height: 40px;
  min-width: 40px;
  position: relative;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
  width: 40px;
}

.packing-list-outbound-members-trigger:hover,
.packing-list-outbound-members-trigger:focus-visible {
  background: #f0f6ff;
  border-color: #111827;
  box-shadow: 0 3px 8px rgba(21, 112, 239, 0.14), 0 0 0 3px rgba(21, 112, 239, 0.1);
  color: #175cd3;
  transform: translateY(-1px);
}

.packing-list-outbound-members-trigger:active {
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
  transform: translateY(0);
}

.packing-list-outbound-members-trigger svg {
  fill: none;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 22px;
}

.packing-list-outbound-members-trigger > .operation-index-tab-count {
  background: #e11d48;
  border: 2px solid #fff;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.18);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  height: 17px;
  line-height: 13px;
  min-width: 17px;
  padding: 0 2px;
  position: absolute;
  right: -6px;
  top: -6px;
}

.operation-index-tabs-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin-right: 16px;
}

.operation-index-tabs-actions .operation-product-edit-button--tabs {
  margin: 0;
}

.operation-index-tabs-actions .operation-index-settings-link {
  margin: 0;
}

.operation-index-header--operation-meta .operation-index-actions--report-approval {
  grid-template-columns: 78px 78px;
}

.operation-index-header--operation-meta .operation-index-actions--report-approval.operation-index-actions--with-members {
  grid-template-columns: 40px 78px 78px;
}

.operation-index-header--operation-meta .operation-index-actions > .operation-index-report-status--approval {
  align-items: center;
  align-self: center;
  background: #fff;
  border-color: #2f80ed;
  border-radius: 999px;
  box-sizing: border-box;
  color: #2f80ed;
  flex-direction: row;
  justify-content: center;
  height: 40px;
  min-height: 40px;
  min-width: 0;
  padding: 0 13px;
  text-align: center;
  white-space: nowrap;
  width: 78px;
}

.operation-index-header--operation-meta .operation-index-actions > .operation-index-report-status--approval strong {
  font-size: 12px;
  line-height: 1;
}

.operation-index-header--operation-meta .operation-index-actions > .operation-index-report-status--approval.is-report-done {
  background: #dbeafe;
  border-color: #2f80ed;
  color: #1d6fd8;
}

.operation-index-header--operation-meta .operation-index-actions > .operation-index-status-form {
  align-items: center;
  align-self: center;
  display: flex;
  width: 78px;
}

.operation-index-header--operation-meta .operation-index-actions > .operation-index-status-form > .operation-index-input-status--approval {
  align-items: center;
  background: #fff;
  border-color: #16a34a;
  border-radius: 999px;
  box-sizing: border-box;
  color: #15803d;
  flex-direction: row;
  height: 40px;
  justify-content: center;
  min-height: 40px;
  padding: 0 13px;
  text-align: center;
  white-space: nowrap;
  width: 78px;
}

.operation-index-header--operation-meta .operation-index-actions > .operation-index-status-form > .operation-index-input-status--approval strong {
  font-size: 12px;
  line-height: 1;
}

.operation-index-header--operation-meta .operation-index-actions > .operation-index-status-form > .operation-index-input-status--approval.is-input-complete {
  background: #dcfce7;
  border-color: #16a34a;
  color: #15803d;
}

.operation-index-header--operation-meta .operation-index-actions > .operation-index-status-form > .operation-index-input-status--approval:hover:not(:disabled),
.operation-index-header--operation-meta .operation-index-actions > .operation-index-status-form > .operation-index-input-status--approval:focus-visible:not(:disabled) {
  background: #f0fdf4;
  border-color: #15803d;
  color: #166534;
}

.packing-list-outbound-members-dialog {
  max-height: min(74vh, 640px);
  width: min(640px, calc(100vw - 40px));
}

.packing-list-outbound-members-dialog .floating-selection-layout {
  max-height: min(74vh, 640px);
}

.packing-list-outbound-members-summary {
  color: #667085;
  font-size: 11px;
  margin: 0;
  white-space: nowrap;
}

.packing-list-outbound-members-list {
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  overflow: hidden;
}

.packing-list-outbound-members-head,
.packing-list-outbound-member-row {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
}

.packing-list-outbound-members-head {
  background: #f8fafc;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  min-height: 34px;
  padding: 0 12px;
}

.packing-list-outbound-members-head > :last-child { text-align: center; }

.packing-list-outbound-member-row {
  background: #fff;
  border-top: 1px solid #eaecf0;
  min-height: 52px;
  padding: 0 12px;
}

.packing-list-outbound-member-row:hover { background: #f9fafb; }

.packing-list-outbound-member-choice {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 7px 0;
}

.packing-list-outbound-member-choice > input,
.packing-list-outbound-member-admin > input {
  flex: 0 0 auto;
  height: 17px;
  margin: 0;
  width: 17px;
}

.packing-list-outbound-member-avatar {
  align-items: center;
  background: #eef2f6;
  border-radius: 50%;
  color: #344054;
  display: inline-flex;
  flex: 0 0 30px;
  font-size: 12px;
  font-weight: 800;
  height: 30px;
  justify-content: center;
}

.packing-list-outbound-member-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.packing-list-outbound-member-identity strong {
  color: #101828;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.packing-list-outbound-member-identity small {
  color: #667085;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.packing-list-outbound-member-admin {
  align-items: center;
  color: #475467;
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  font-weight: 650;
  gap: 6px;
  justify-self: center;
}

.packing-list-outbound-member-admin:has(input:disabled) {
  color: #98a2b3;
  cursor: default;
}

.packing-list-outbound-members-empty {
  color: #667085;
  font-size: 12px;
  margin: 0;
  padding: 28px 12px;
  text-align: center;
}

@media (max-width: 760px) {
  .packing-list-outbound-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }
  .packing-list-outbound-members-dialog,
  .packing-list-outbound-members-dialog .floating-selection-layout {
    max-height: calc(100dvh - 24px);
  }
  .packing-list-outbound-members-summary {
    white-space: normal;
  }
}

.packing-list-outbound-tabs > :is(strong, span, a) {
  min-height: 50px;
}

.packing-list-outbound-tabs > :is(strong, a) > .operation-index-tab-count {
  bottom: 2px;
  margin-left: 0;
  position: absolute;
  right: 3px;
}

.packing-list-outbound-tabs .operation-index-tab-count {
  background: #1d2939;
  border-color: #1d2939;
  border-radius: 3px;
  color: #fff;
}

.packing-list-outbound-check-counts {
  align-items: flex-end;
  bottom: 2px;
  display: flex;
  flex-direction: column;
  font-style: normal;
  justify-content: space-between;
  position: absolute;
  right: 3px;
  top: 2px;
}

.packing-list-outbound-check-counts .operation-index-tab-count {
  font-size: 8px;
  margin-left: 0;
  min-width: 13px;
  padding: 0 3px;
}

.packing-list-outbound-check-counts .operation-index-tab-count--alert {
  background: #d92d20;
  border-color: #d92d20;
  color: #fff;
}

.project-operation-summary > a > .operation-index-tab-count {
  bottom: 2px;
  margin-left: 0;
  position: absolute;
  right: 3px;
}

.project-operation-summary.operation-index-tabs > a {
  min-height: 50px;
}

.project-operation-summary .operation-index-tab-count {
  background: #1d2939;
  border-color: #1d2939;
  border-radius: 3px;
  color: #fff;
}

.project-operation-tab-counts {
  align-items: flex-end;
  bottom: 2px;
  display: flex;
  flex-direction: column;
  font-style: normal;
  justify-content: space-between;
  position: absolute;
  right: 3px;
  top: 2px;
}

.project-operation-tab-counts .operation-index-tab-count {
  font-size: 8px;
  margin-left: 0;
  min-width: 13px;
  padding: 0 3px;
}

.project-operation-tab-counts .operation-index-tab-count--alert {
  background: #d92d20;
  border-color: #d92d20;
  color: #fff;
}

.operation-index-sticky-header .operation-index-tabs > :is(strong, span, a) {
  min-height: 50px;
}

.operation-index-sticky-header .operation-index-tabs > :is(strong, a) > .operation-index-tab-count {
  bottom: 2px;
  margin-left: 0;
  position: absolute;
  right: 3px;
}

.operation-index-sticky-header .operation-index-tabs .operation-index-tab-count {
  background: #1d2939;
  border-color: #1d2939;
  border-radius: 3px;
  color: #fff;
}

.operation-index-report-tab-counts {
  align-items: flex-end;
  bottom: 2px;
  display: flex;
  flex-direction: column;
  font-style: normal;
  justify-content: space-between;
  position: absolute;
  right: 3px;
  top: 2px;
}

.operation-index-report-tab-counts .operation-index-tab-count {
  font-size: 8px;
  margin-left: 0;
  min-width: 13px;
  padding: 0 3px;
}

.operation-index-report-tab-counts .operation-index-tab-count--alert {
  background: #d92d20;
  border-color: #d92d20;
  color: #fff;
}

.packing-list-outbound-browser-portal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 12px 8px;
}

.packing-list-outbound-browser-portal-actions--back {
  justify-content: flex-start;
}

.packing-list-outbound-barcode-back-button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: 34px !important;
  min-width: 72px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  overflow: hidden;
  padding: 0 !important;
  position: relative;
}

.packing-list-outbound-barcode-back-button > svg {
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.packing-list-outbound-barcode-back-button > svg path {
  fill: #eef1f4;
  stroke: #101828;
  stroke-width: 1;
}

.packing-list-outbound-barcode-back-button > span {
  position: relative;
  transform: translateX(3px);
}

.packing-list-outbound-barcode-back-button:hover,
.packing-list-outbound-barcode-back-button:focus-visible {
  background: transparent !important;
}

.packing-list-outbound-barcode-back-button:hover > svg path,
.packing-list-outbound-barcode-back-button:focus-visible > svg path {
  fill: #e4e7ec;
}

.packing-list-outbound-barcode-carton-panel {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  margin-top: 12px;
  overflow: hidden;
}

.packing-list-outbound-barcode-carton-heading {
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid #d0d5dd;
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
}

.packing-list-outbound-barcode-carton-heading h2 {
  font-size: 13px;
  margin: 0;
}

.packing-list-outbound-barcode-carton-heading h2 small {
  color: #027a48;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}

.packing-list-outbound-barcode-carton-heading > div {
  align-items: center;
  display: flex;
  gap: 8px;
}

.packing-list-outbound-barcode-view-switch {
  align-items: center;
  display: inline-flex;
  background: #eef1f4;
  border: 1px solid #101828;
  border-radius: 6px;
  box-sizing: border-box;
  height: 34px;
  overflow: hidden;
}

.packing-list-outbound-barcode-view-switch .operation-compact-action {
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid #101828 !important;
  border-radius: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  min-width: 84px !important;
}

.packing-list-outbound-barcode-view-switch .operation-compact-action:first-child {
  border-left: 0 !important;
}

.packing-list-outbound-barcode-view-switch .operation-compact-action:is([aria-current="page"], [aria-pressed="true"]) {
  background: #344054 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.packing-list-outbound-barcode-view-switch .operation-compact-action:is([aria-current="page"], [aria-pressed="true"]):hover,
.packing-list-outbound-barcode-view-switch .operation-compact-action:is([aria-current="page"], [aria-pressed="true"]):focus-visible {
  background: #1d2939 !important;
  color: #fff !important;
}

.packing-list-outbound-barcode-carton-heading span {
  color: #667085;
  font-size: 11px;
}

.packing-list-outbound-carton-add-fields {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: 118px minmax(0, 1fr);
}

.packing-list-outbound-carton-add-fields > label {
  min-width: 0;
}

.packing-list-outbound-carton-add-group {
  color: #667085;
  font-size: 12px;
}

.packing-list-outbound-carton-number-keypad {
  display: grid;
  gap: 6px;
  max-width: 282px;
}

.packing-list-outbound-carton-number-keypad > strong {
  color: #475467;
  font-size: 12px;
}

.packing-list-outbound-carton-number-keypad > div {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.packing-list-outbound-carton-number-keypad button {
  align-items: center;
  background: #eef1f4;
  border: 1px solid #9fb2c8;
  border-radius: 6px;
  color: #101828;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  height: 34px;
  justify-content: center;
  padding: 0;
}

.packing-list-outbound-carton-number-keypad button:hover,
.packing-list-outbound-carton-number-keypad button:focus-visible {
  background: #e2e8f0;
}

.packing-list-outbound-barcode-carton-row {
  align-items: center;
  color: #101828;
  display: grid;
  gap: 10px;
  grid-template-columns: 74px 92px minmax(0, 1fr) 72px;
  min-height: 42px;
  padding: 7px 12px;
}

a.packing-list-outbound-barcode-carton-row:hover {
  background: #f8fafc;
}

.packing-list-outbound-barcode-carton-row:not(.packing-list-outbound-barcode-carton-row--scan) > :nth-child(3) {
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
}

.packing-list-outbound-barcode-carton-row > :is(:nth-child(1), :nth-child(2)) {
  text-align: center;
}

.packing-list-outbound-barcode-carton-row:not(.packing-list-outbound-barcode-carton-row--head) > :is(:first-child, :nth-child(3), :last-child) {
  color: #667085;
  font-size: 12px;
}

.packing-list-outbound-barcode-carton-row > :last-child {
  text-align: right;
}

.packing-list-outbound-barcode-carton-row--scan {
  grid-template-columns: minmax(0, 1fr) 120px 84px 120px 72px 52px;
}

.packing-list-outbound-barcode-carton-row--scan > :nth-child(5) {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
}

.packing-list-outbound-barcode-carton-row--scan > form:last-child {
  align-items: center;
  display: flex;
  justify-content: center;
}

.packing-list-outbound-barcode-quantity-button {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 700;
  line-height: inherit;
  margin: 0;
  min-height: 26px;
  padding: 2px 0;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

.packing-list-outbound-barcode-quantity-button:hover,
.packing-list-outbound-barcode-quantity-button:focus-visible {
  color: #175cd3;
  text-decoration-color: currentColor;
}

.packing-list-outbound-barcode-quantity-button:focus-visible {
  border-radius: 3px;
  outline: 2px solid #84adf4;
  outline-offset: 2px;
}

.packing-list-outbound-barcode-size-table .packing-list-outbound-barcode-quantity-button {
  box-sizing: border-box;
  display: flex;
  height: 26px;
  justify-content: center;
  min-width: 0;
  padding-block: 0;
  width: 100%;
}

.packing-list-outbound-barcode-size-table tbody td > form {
  align-items: center;
  display: flex;
  height: 26px;
  justify-content: center;
}

.packing-list-outbound-barcode-size-table .packing-list-outbound-delete-link {
  box-sizing: border-box;
  height: 26px;
  min-height: 26px;
}

.packing-list-outbound-barcode-quantity-description {
  color: #475467;
  margin: 0;
}

.packing-list-outbound-barcode-size-table {
  overflow-x: auto;
}

.packing-list-outbound-barcode-size-table table {
  border-collapse: separate;
  border-spacing: 0;
  color: #101828;
  min-width: 100%;
  table-layout: auto;
  width: max-content;
}

.packing-list-outbound-barcode-size-table :is(th, td) {
  border-bottom: 1px solid #e4e7ec;
  box-sizing: border-box;
  font-size: 13px;
  height: 36px;
  padding: 4px 14px;
  text-align: right;
  white-space: nowrap;
}

.packing-list-outbound-barcode-size-table thead th {
  background: #f8fafc;
  color: #475467;
  font-size: 11px;
  font-weight: 700;
  height: 36px;
  padding-block: 4px;
}

.packing-list-outbound-barcode-size-table thead th:not(.packing-list-outbound-barcode-size-product):not(.packing-list-outbound-barcode-size-color):not(.packing-list-outbound-barcode-size-customer-code) {
  text-align: center;
}

.packing-list-outbound-barcode-size-table .packing-list-outbound-barcode-size-product {
  min-width: 260px;
  text-align: left;
}

.packing-list-outbound-barcode-size-table .packing-list-outbound-barcode-size-color { min-width: 96px; text-align: left; }
.packing-list-outbound-barcode-size-table .packing-list-outbound-barcode-size-customer-code { min-width: 116px; text-align: left; }

.packing-list-outbound-barcode-size-table tbody th {
  font-weight: 600;
}

.packing-list-outbound-barcode-size-table tbody td {
  font-weight: 700;
  min-width: 68px;
}

.packing-list-outbound-barcode-size-table tbody td:not(.packing-list-outbound-barcode-size-color):not(.packing-list-outbound-barcode-size-customer-code) {
  text-align: center;
}

.packing-list-outbound-barcode-size-table :is(th, td).packing-list-outbound-barcode-size-total {
  background: #fff;
  border-left: 1px solid #e4e7ec;
  color: #101828;
  font-weight: 800;
  min-width: 76px;
  text-align: center;
}

/* Keep a size row visually continuous.  Only the derived total remains
 * shaded, while the product identity and its size quantities share white. */
.packing-list-outbound-barcode-size-table tbody > tr > :is(th, td):not(.packing-list-outbound-barcode-size-total) {
  background: #fff;
}

.packing-list-outbound-barcode-carton-row--head {
  background: #f8fafc;
  border-bottom: 1px solid #e4e7ec;
  color: #475467;
  font-size: 11px;
  font-weight: 700;
  min-height: 32px;
  padding-block: 5px;
}

a.packing-list-outbound-barcode-carton-row {
  border-bottom: 1px solid #e4e7ec;
  text-decoration: none;
}

a.packing-list-outbound-barcode-carton-row:last-child {
  border-bottom: 0;
}

a.packing-list-outbound-barcode-carton-row.is-selected {
  background: #eaf3ff;
  box-shadow: inset 3px 0 0 #1570ef;
}

.packing-list-outbound-barcode-carton-empty {
  color: #667085;
  margin: 0;
  padding: 24px 12px;
  text-align: center;
}

@media (max-width: 760px) {
  .packing-list-outbound-carton-add-fields {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .packing-list-outbound-barcode-carton-row {
    gap: 6px;
    grid-template-columns: 58px 66px minmax(0, 1fr) 48px;
    padding-inline: 8px;
  }

  .packing-list-outbound-barcode-carton-row--scan {
    grid-template-columns: minmax(0, 1fr) 56px 44px 70px 42px 42px;
  }

  .packing-list-outbound-barcode-size-table :is(th, td) {
    padding-inline: 10px;
  }

  .packing-list-outbound-barcode-size-table .packing-list-outbound-barcode-size-product {
    min-width: 180px;
  }
}

/* The four outbound PackingList tabs share one browser shell.  Keep secondary
 * content flat and aligned with the quantity portal instead of adding cards. */
.packing-list-outbound-tab-page .packing-list-outbound-tabs-row {
  margin-bottom: 0;
}

.packing-list-outbound-tab-content {
  background: #fff;
  min-height: 260px;
  padding: 0 14px 20px;
}

/* A checklist may end immediately after a photo row.  It does not need the
 * generic tab's empty-state height, which otherwise leaves a blank panel below
 * the final item. */
.packing-list-outbound-checklist-content {
  min-height: 0;
  padding-bottom: 10px;
}

.packing-list-outbound-tab-content-header {
  align-items: center;
  border-bottom: 1px solid #dfe3ea;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 48px;
}

.packing-list-outbound-tab-content-header h2 {
  color: #1d2939;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.packing-list-outbound-tab-content-header span {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.packing-list-outbound-tab-content-header > div {
  align-items: baseline;
  display: flex;
  gap: 8px;
}

.packing-list-outbound-picture-upload {
  margin: 0;
}

.packing-list-outbound-picture-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.packing-list-outbound-picture-display-size {
  align-items: center;
  display: flex;
  margin-left: auto;
}

.packing-list-outbound-picture-display-size select {
  font-size: 12px;
  font-weight: 700;
  min-height: 32px;
  min-width: 72px;
}

.packing-list-outbound-picture-actions [data-outbound-packing-picture-upload][hidden],
.packing-list-outbound-picture-actions [data-outbound-packing-picture-select-all][hidden],
.packing-list-outbound-picture-actions [data-outbound-packing-picture-bulk-caption][hidden],
.packing-list-outbound-picture-actions [data-outbound-packing-picture-translate-selected][hidden],
.packing-list-outbound-picture-actions [data-outbound-packing-picture-rotate-selected][hidden],
.packing-list-outbound-picture-actions [data-outbound-packing-picture-delete-selected][hidden] {
  display: none !important;
}

.packing-list-outbound-picture-actions .packing-list-outbound-picture-upload {
  display: flex;
}

.packing-list-outbound-picture-upload input[type="file"] {
  block-size: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.packing-list-outbound-picture-upload .button {
  margin: 0;
}

.packing-list-outbound-picture-upload.is-uploading .operation-add-button {
  cursor: wait;
  pointer-events: none;
}

.packing-list-outbound-picture-upload-dialog {
  width: min(440px, calc(100vw - 32px));
}

.packing-list-outbound-picture-progress-dialog {
  width: min(400px, calc(100vw - 32px));
}

.packing-list-outbound-picture-bulk-caption-dialog {
  width: min(480px, calc(100vw - 32px));
}

.packing-list-outbound-picture-caption-dialog {
  width: min(480px, calc(100vw - 32px));
}

.packing-list-outbound-picture-bulk-caption-dialog textarea,
.packing-list-outbound-picture-caption-dialog textarea {
  box-sizing: border-box;
  min-height: 96px;
  resize: vertical;
  width: 100%;
}

.packing-list-outbound-picture-caption-dialog .operation-compact-dialog-body {
  display: grid;
  gap: 14px;
}

.packing-list-outbound-picture-caption-dialog .operation-compact-dialog-actions {
  display: flex;
  justify-content: flex-end;
}

.packing-list-outbound-picture-caption-dialog .ai-translate-action {
  margin-right: auto;
}

.packing-list-outbound-picture-caption-dialog label {
  display: grid;
  gap: 6px;
}

:is(.packing-list-outbound-picture-caption-dialog, .packing-list-outbound-checklist-dialog) .packing-list-outbound-picture-ai-check {
  align-items: center;
  display: inline-flex;
  gap: 7px;
  justify-self: start;
}

:is(.packing-list-outbound-picture-caption-dialog, .packing-list-outbound-checklist-dialog) .packing-list-outbound-picture-ai-check[hidden] {
  display: none;
}

.packing-list-outbound-picture-ai-check input {
  accent-color: #2563eb;
  height: 17px;
  margin: 0;
  width: 17px;
}

.packing-list-outbound-picture-caption-dialog label > span,
.packing-list-outbound-picture-caption > span {
  color: #667085;
  font-size: 11px;
  font-weight: 700;
}

.packing-list-outbound-picture-caption > span {
  margin-right: 6px;
}

:is(.packing-list-outbound-picture-grid, .packing-list-outbound-checklist-picture-grid) .packing-list-outbound-picture-caption > .packing-list-outbound-picture-caption-line {
  display: block;
  margin-right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.packing-list-outbound-picture-grid, .packing-list-outbound-checklist-picture-grid) .packing-list-outbound-picture-caption > .packing-list-outbound-picture-caption-line[hidden] {
  display: none;
}

:is(.packing-list-outbound-picture-grid, .packing-list-outbound-checklist-picture-grid) .packing-list-outbound-picture-caption > .packing-list-outbound-picture-caption-line + .packing-list-outbound-picture-caption-line {
  margin-top: 4px;
}

.packing-list-outbound-picture-bulk-caption-dialog .operation-compact-dialog-actions {
  flex-wrap: wrap;
}

.packing-list-outbound-picture-caption-translation-status {
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
  margin: -4px 0 0;
  min-height: 18px;
}

.packing-list-outbound-picture-upload-dialog .operation-compact-dialog-header h2 {
  font-size: 15px;
}

.packing-list-outbound-picture-upload-status {
  color: #1d2939;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.packing-list-outbound-picture-upload-size-label {
  align-items: start;
  display: grid;
  gap: 6px;
}

.packing-list-outbound-picture-upload-size-label > span {
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.packing-list-outbound-picture-upload-size-label select {
  box-sizing: border-box;
  min-height: 38px;
  width: 100%;
}

.packing-list-outbound-picture-upload-help {
  color: #667085;
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}

.packing-list-outbound-picture-progress-status {
  color: #1d2939;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.packing-list-outbound-picture-progress-bar {
  accent-color: #1673e6;
  block-size: 10px;
  inline-size: 100%;
}

.packing-list-outbound-picture-progress-percent {
  color: #667085;
  font-size: 12px;
  margin: -6px 0 0;
  text-align: right;
}

.packing-list-outbound-picture-upload-dialog[data-upload-state="uploading"] .packing-list-outbound-picture-upload-size-label,
.packing-list-outbound-picture-upload-dialog[data-upload-state="compressing"] .packing-list-outbound-picture-upload-size-label,
.packing-list-outbound-picture-upload-dialog[data-upload-state="uploading"] .packing-list-outbound-picture-upload-help,
.packing-list-outbound-picture-upload-dialog[data-upload-state="compressing"] .packing-list-outbound-picture-upload-help {
  opacity: .55;
}

/* This is later than the generic compact-action hover rule so labels such as
 * 写真追加 keep the same blue hover feedback as every other add button. */
.layout-contract-shell .operation-compact-action.operation-add-button:hover,
.layout-contract-shell .operation-compact-action.operation-add-button:focus-visible {
  background: var(--action-add-bg-hover) !important;
  border-color: #0b57b8 !important;
  color: #fff !important;
}

.packing-list-outbound-tab-empty {
  color: #667085;
  font-size: 14px;
  margin: 0;
  padding: 28px 0;
  text-align: center;
}

.packing-list-outbound-picture-grid {
  --outbound-picture-card-min-width: 180px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--outbound-picture-card-min-width)), 1fr));
  padding-top: 14px;
}

.packing-list-outbound-picture-grid[data-display-size="small"] {
  --outbound-picture-card-min-width: 120px;
}

.packing-list-outbound-picture-grid[data-display-size="large"] {
  --outbound-picture-card-min-width: 320px;
}

.packing-list-outbound-picture-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
  position: relative;
}

.packing-list-outbound-picture-card-actions {
  align-items: center;
  display: flex;
  font-size: 12px;
  gap: 12px;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 6px;
}

.packing-list-outbound-picture-card-actions label {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.packing-list-outbound-picture-card-selection {
  display: none !important;
}

[data-outbound-packing-picture-selection-scope].is-picture-selection .packing-list-outbound-picture-card-selection {
  display: inline-flex !important;
}

.packing-list-outbound-picture-card-delete {
  color: #b42318;
  cursor: pointer;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.packing-list-outbound-picture-card-caption-edit {
  color: #475467;
  cursor: pointer;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

[data-outbound-packing-picture-selection-scope].is-picture-selection :is(.packing-list-outbound-picture-card-caption-edit, .packing-list-outbound-picture-card-delete) {
  display: none;
}

.packing-list-outbound-picture-card-actions input {
  accent-color: #2563eb;
  cursor: pointer;
  height: 18px;
  margin: 0;
  width: 18px;
}

.packing-list-outbound-picture-card img {
  aspect-ratio: 4 / 3;
  background: #f8fafc;
  display: block;
  object-fit: contain;
  width: 100%;
}

.packing-list-outbound-picture-open {
  cursor: zoom-in;
  display: block;
}

[data-outbound-packing-picture-selection-scope].is-picture-selection .packing-list-outbound-picture-open {
  cursor: grab;
}

.packing-list-outbound-picture-open:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

.packing-list-outbound-picture-caption {
  box-sizing: border-box;
  color: #344054;
  display: block;
  font-size: 11px;
  line-height: 1.45;
  margin: 6px 0 0;
  min-height: 20px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  width: 100%;
}

:is(.packing-list-outbound-picture-grid, .packing-list-outbound-checklist-picture-grid) .packing-list-outbound-picture-caption {
  white-space: normal;
}

.packing-list-outbound-picture-caption .packing-list-outbound-picture-ai-badge {
  background: #eef4ff;
  border: 1px solid #84adff;
  border-radius: 999px;
  color: #175cd3;
  display: inline-flex;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  margin-left: 4px;
  padding: 2px 4px;
  vertical-align: middle;
  white-space: nowrap;
}

[data-outbound-packing-picture-selection-scope].is-picture-selection [data-outbound-packing-picture-grid].is-reordering [data-outbound-packing-picture-card] {
  cursor: grab;
  touch-action: none;
  transition: box-shadow .12s ease, opacity .12s ease, outline-color .12s ease, transform .12s ease;
  user-select: none;
}

[data-outbound-packing-picture-selection-scope].is-picture-selection [data-outbound-packing-picture-grid].is-reordering [data-outbound-packing-picture-card] img {
  -webkit-user-drag: none;
}

[data-outbound-packing-picture-selection-scope].is-picture-selection [data-outbound-packing-picture-grid].is-reordering [data-outbound-packing-picture-card].is-dragging {
  cursor: grabbing;
  display: none;
}

.packing-list-outbound-picture-placeholder {
  background: #eff6ff;
  border: 2px dashed #2563eb;
  box-sizing: border-box;
  min-width: 0;
}

[data-outbound-packing-picture-selection-scope].is-picture-selection [data-outbound-packing-picture-grid].is-reordering [data-outbound-packing-picture-card].is-drop-target {
  background: #eff6ff;
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

.packing-list-outbound-picture-drag-ghost {
  background: #fff;
  box-shadow: 0 14px 30px rgb(15 23 42 / 28%);
  cursor: grabbing;
  left: 0;
  margin: 0;
  opacity: .9;
  outline: 3px solid #2563eb;
  outline-offset: 3px;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: rotate(1deg) scale(.98);
  z-index: 9999;
}

body.outbound-packing-picture-detail-page {
  background: #111827;
  height: 100dvh;
  overflow: hidden;
}

body.outbound-packing-picture-detail-page .page {
  box-sizing: border-box;
  height: 100dvh;
  margin: 0;
  max-width: none;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.packing-list-outbound-photo-view {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 auto;
  max-width: none;
  min-height: 0;
  overflow: hidden;
  padding: 16px;
  width: 100%;
}

.packing-list-outbound-photo-stage {
  align-items: center;
  background: #111827;
  border: 0;
  border-radius: 0;
  display: flex;
  flex: 1 1 auto;
  height: auto;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.packing-list-outbound-photo-close,
.packing-list-outbound-photo-count {
  position: absolute;
  z-index: 2;
}

.packing-list-outbound-photo-close {
  align-items: center;
  background: rgb(15 23 42 / 68%);
  border: 0;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 24px;
  height: 40px;
  justify-content: center;
  line-height: 1;
  right: 14px;
  text-decoration: none;
  top: 14px;
  width: 40px;
}

.packing-list-outbound-photo-close:hover,
.packing-list-outbound-photo-close:focus-visible {
  background: rgb(15 23 42 / 90%);
  color: #fff;
}

.packing-list-outbound-photo-count {
  background: rgb(15 23 42 / 68%);
  border-radius: 999px;
  bottom: 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  left: 50%;
  margin: 0;
  padding: 5px 10px;
  transform: translateX(-50%);
}

.packing-list-outbound-photo-stage > img {
  height: 100%;
  display: block;
  max-height: none;
  max-width: none;
  object-fit: contain;
  width: 100%;
  transform-origin: center;
  transition: transform .14s ease;
  user-select: none;
}

.packing-list-outbound-photo-navigation {
  align-items: center;
  background: rgb(255 255 255 / 88%);
  border: 1px solid #98a2b3;
  border-radius: 50%;
  color: #344054;
  display: flex;
  font-size: 24px;
  height: 48px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  text-decoration: none;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
}

.packing-list-outbound-photo-navigation:hover,
.packing-list-outbound-photo-navigation:focus-visible {
  background: #fff;
  border-color: #2563eb;
  color: #175cd3;
}

.packing-list-outbound-photo-navigation.is-previous { left: 18px; }
.packing-list-outbound-photo-navigation.is-next { right: 18px; }

.packing-list-outbound-photo-editor-controls {
  align-items: center;
  border-bottom: 1px solid rgb(203 213 225 / 55%);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 960px;
  padding: 12px 16px;
  flex: 0 0 auto;
  width: 100%;
}

.packing-list-outbound-photo-editor-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.packing-list-outbound-photo-zoom-control {
  display: flex;
  flex: 0 1 220px;
  margin-left: auto;
  width: 220px;
}

.packing-list-outbound-photo-editor-controls input[type="range"] {
  accent-color: #2563eb;
  height: 32px;
  margin: 0;
  width: 100%;
}

.packing-list-outbound-photo-editor-controls select {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #1d2939;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  height: 34px;
  min-width: 144px;
  padding: 0 10px;
}

.packing-list-outbound-photo-editor-controls .operation-compact-action {
  font-size: 12px !important;
  min-width: 92px !important;
  padding: 0 12px !important;
}

.packing-list-outbound-photo-editor-controls .packing-list-outbound-photo-editor-delete {
  border-color: #d92d20;
  color: #b42318;
}

.packing-list-outbound-photo-editor-controls .packing-list-outbound-photo-editor-delete:hover,
.packing-list-outbound-photo-editor-controls .packing-list-outbound-photo-editor-delete:focus-visible {
  background: #fef3f2;
  border-color: #b42318;
  color: #912018;
}

.packing-list-outbound-photo-editor-controls .packing-list-outbound-photo-editor-icon-button {
  align-items: center;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  min-width: 38px !important;
  padding: 0 !important;
  width: 38px;
}

.packing-list-outbound-photo-editor-icon-button svg {
  fill: currentColor;
  height: 22px;
  stroke: none;
  width: 22px;
}

.packing-list-outbound-photo-editor-icon-button[data-outbound-packing-picture-crop-start] svg { fill: none; stroke: currentColor; stroke-dasharray: 2 2; stroke-linecap: butt; stroke-linejoin: miter; stroke-width: 1.8; }

.packing-list-outbound-photo-editor-icon-button:is([data-outbound-packing-picture-rotate-left], [data-outbound-packing-picture-rotate]) svg {
  fill: currentColor;
  height: 25px;
  paint-order: stroke fill;
  stroke: currentColor;
  stroke-width: .4;
  width: 25px;
}

.packing-list-outbound-photo-editor-controls [hidden] {
  display: none !important;
}

.packing-list-outbound-photo-view.is-cropping :is([data-outbound-packing-picture-rotate-left], [data-outbound-packing-picture-rotate]) {
  display: none;
}

.packing-list-outbound-photo-view.is-cropping :is(.packing-list-outbound-photo-close, .packing-list-outbound-photo-navigation) {
  display: none;
}

.packing-list-outbound-photo-caption-label {
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 700;
}

.packing-list-outbound-photo-editor-help {
  color: #cbd5e1;
  font-size: 12px;
  margin: 8px auto 0;
  max-width: 960px;
  padding: 0 16px;
  text-align: center;
  flex: 0 0 auto;
}

.packing-list-outbound-photo-crop-selection {
  background: rgb(37 99 235 / 12%);
  border: 2px solid #2563eb;
  box-sizing: border-box;
  cursor: crosshair;
  pointer-events: none;
  position: absolute;
}

.packing-list-outbound-photo-crop-selection [data-crop-handle] {
  background: #fff;
  border: 2px solid #2563eb;
  border-radius: 50%;
  height: 12px;
  position: absolute;
  width: 12px;
}

.packing-list-outbound-photo-crop-selection [data-crop-handle="nw"] { left: -8px; top: -8px; }
.packing-list-outbound-photo-crop-selection [data-crop-handle="ne"] { right: -8px; top: -8px; }
.packing-list-outbound-photo-crop-selection [data-crop-handle="se"] { bottom: -8px; right: -8px; }
.packing-list-outbound-photo-crop-selection [data-crop-handle="sw"] { bottom: -8px; left: -8px; }

.packing-list-outbound-photo-stage.is-cropping {
  cursor: crosshair;
}

.packing-list-outbound-photo-stage.is-cropping > img {
  cursor: crosshair;
}

.packing-list-outbound-photo-stage.is-cropping.is-crop-movable,
.packing-list-outbound-photo-stage.is-cropping.is-crop-movable > img {
  cursor: move;
}

.packing-list-outbound-photo-stage.is-cropping[data-crop-resize-corner="nw"],
.packing-list-outbound-photo-stage.is-cropping[data-crop-resize-corner="se"],
.packing-list-outbound-photo-stage.is-cropping[data-crop-resize-corner="nw"] > img,
.packing-list-outbound-photo-stage.is-cropping[data-crop-resize-corner="se"] > img { cursor: nwse-resize; }

.packing-list-outbound-photo-stage.is-cropping[data-crop-resize-corner="ne"],
.packing-list-outbound-photo-stage.is-cropping[data-crop-resize-corner="sw"],
.packing-list-outbound-photo-stage.is-cropping[data-crop-resize-corner="ne"] > img,
.packing-list-outbound-photo-stage.is-cropping[data-crop-resize-corner="sw"] > img { cursor: nesw-resize; }

.packing-list-outbound-photo-caption-label {
  display: block;
  margin: 10px 0 0;
  max-width: 960px;
  padding: 0;
  flex: 0 0 auto;
}

.packing-list-outbound-photo-caption-editor {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 960px;
  padding: 0 16px;
  width: 100%;
}

.packing-list-outbound-photo-ai-check {
  align-items: center;
  color: #e5e7eb;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 7px;
  margin-top: 8px;
}

.packing-list-outbound-photo-caption-translation-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.packing-list-outbound-photo-caption-translation-actions .ai-translate-action {
  flex: 0 0 auto;
}

.packing-list-outbound-photo-caption-translation-actions p {
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.packing-list-outbound-photo-ai-check[hidden] {
  display: none;
}

.packing-list-outbound-photo-ai-check input {
  accent-color: #2563eb;
  height: 17px;
  margin: 0;
  width: 17px;
}

.packing-list-outbound-photo-caption {
  box-sizing: border-box;
  display: block;
  margin: 6px auto 0;
  max-width: 960px;
  width: calc(100% - 32px);
  flex: 0 0 auto;
}

textarea.packing-list-outbound-photo-caption {
  background: #fff;
  color: #1d2939;
  min-height: 54px;
  resize: vertical;
}

@media (max-width: 760px) {
  .packing-list-outbound-picture-actions { gap: 6px; }
  .packing-list-outbound-picture-actions .operation-compact-action { min-width: 64px !important; }

  .packing-list-outbound-photo-editor-controls {
    box-sizing: border-box;
    gap: 8px;
    max-width: none;
    padding: 10px 12px;
    width: 100%;
  }

  .packing-list-outbound-photo-editor-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .packing-list-outbound-photo-zoom-control {
    flex: 0 1 180px;
    width: min(180px, 100%);
  }

  .packing-list-outbound-photo-editor-controls input[type="range"] {
    width: 100%;
  }

  .packing-list-outbound-photo-crop-aspect {
    flex: 1 1 144px;
  }

  .packing-list-outbound-photo-editor-controls select {
    width: 100%;
  }

  .packing-list-outbound-photo-stage {
    height: auto;
    min-height: 360px;
  }

  .packing-list-outbound-photo-stage > img {
    max-height: 100%;
  }

  .packing-list-outbound-photo-navigation {
    height: 40px;
    width: 40px;
  }

  .packing-list-outbound-photo-navigation.is-previous { left: 8px; }
  .packing-list-outbound-photo-navigation.is-next { right: 8px; }

  body.outbound-packing-picture-detail-page .page {
    padding: 0;
    width: 100%;
  }

  .packing-list-outbound-photo-view { padding: 0; }
  .packing-list-outbound-photo-close { right: 8px; top: 8px; }
  .packing-list-outbound-photo-count { bottom: 8px; }
}

.packing-list-outbound-checklist {
  display: grid;
  gap: 16px;
  padding: 10px 0 4px;
}

.packing-list-outbound-checklist-row {
  align-items: stretch;
  background: #f2f4f7;
  border: 1px solid #d0d5dd;
  border-left: 4px solid #98a2b3;
  border-radius: 10px;
  box-shadow: none;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(120px, 160px) minmax(180px, 1fr) minmax(400px, 440px) 44px;
  min-height: 72px;
  padding: 14px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.packing-list-outbound-checklist-row:hover { border-color: #b8c0cc; }
.packing-list-outbound-checklist-row.is-checked { background: #fff; border-color: #e4e7ec; border-left-color: #e4e7ec; }
.packing-list-outbound-checklist-check { align-items: center; align-self: stretch; color: #344054; display: flex; flex-direction: column; font-size: 12px; gap: 12px; justify-content: flex-start; padding-top: 12px; }
.packing-list-outbound-checklist-check input { accent-color: #667085; cursor: pointer; height: 21px; margin: 0; width: 21px; }
.packing-list-outbound-checklist-check .packing-list-outbound-delete-link { height: auto; line-height: 1.4; margin-top: auto; }
.packing-list-outbound-checklist-fields { display: grid; gap: 8px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.packing-list-outbound-checklist-fields label { display: grid; gap: 4px; }
.packing-list-outbound-checklist-fields label > span { color: #667085; font-size: 11px; font-weight: 700; }
.packing-list-outbound-checklist-fields :is(input, textarea) { box-sizing: border-box; font: inherit; width: 100%; }
.packing-list-outbound-checklist-fields textarea { min-height: 52px; resize: vertical; }
.packing-list-outbound-checklist-row p { color: #667085; font-size: 12px; margin: 5px 0 0; }
.packing-list-outbound-checklist-display-button { background: #fff; border: 1px solid #cfd5dd; border-radius: 8px; color: inherit; cursor: pointer; display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; padding: 12px 14px; text-align: left; transition: border-color 140ms ease, box-shadow 140ms ease; }
.packing-list-outbound-checklist-display-button > small { color: #667085; font-size: 12px; overflow-wrap: anywhere; }
.packing-list-outbound-checklist-display-button:hover { border-color: #84adff; box-shadow: 0 0 0 3px rgb(46 144 250 / 10%); }
.packing-list-outbound-checklist-display-button:focus-visible { background: #fff; border-color: #84adff; outline: 2px solid #84adff; outline-offset: 2px; }
.packing-list-outbound-checklist-display-button > :is(strong, small):not(.packing-list-outbound-checklist-field-label):not(.packing-list-outbound-checklist-edit-hint) { grid-column: 1 / -1; }
.packing-list-outbound-checklist-field-label { color: #344054; font-size: 12px; font-weight: 700; line-height: 1.4; }
.packing-list-outbound-checklist-edit-hint { color: #175cd3; font-size: 11px; font-weight: 600; }
.packing-list-outbound-checklist-cell { background: #fff; border: 1px solid #e1e5ea; border-radius: 8px; display: grid; gap: 6px; min-width: 0; padding: 12px 14px; }
.packing-list-outbound-checklist-cell > small { color: #667085; font-size: 12px; overflow-wrap: anywhere; }
.packing-list-outbound-checklist-item-cell { align-content: start; justify-items: stretch; text-align: left; }
.packing-list-outbound-checklist-item-cell > :is(strong, small):not(.packing-list-outbound-checklist-field-label) { text-align: center; }
.packing-list-outbound-checklist-content-cell { align-content: start; text-align: left; }
.packing-list-outbound-checklist-content-cell > small { white-space: pre-wrap; }
.packing-list-outbound-checklist-ai-badge {
  background: #eef4ff;
  border: 1px solid #84adff;
  border-radius: 999px;
  color: #175cd3;
  display: inline-flex;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  margin-left: 4px;
  padding: 2px 4px;
  vertical-align: middle;
  white-space: nowrap;
}
.packing-list-outbound-checklist-ai-badge[hidden] { display: none; }
.packing-list-outbound-checklist-pictures { align-content: start; background: #fff; border: 1px solid #e1e5ea; border-radius: 8px; display: grid; gap: 6px; margin: 0; min-width: 0; padding: 7px; }
.packing-list-outbound-checklist-picture-header { align-items: center; display: flex; justify-content: space-between; min-height: 28px; }
.packing-list-outbound-checklist-picture-header > span { align-items: baseline; display: flex; gap: 8px; }
.packing-list-outbound-checklist-picture-header > span > strong { font-size: 12px; }
.packing-list-outbound-checklist-picture-header > span > small { color: #667085; font-size: 11px; }
.packing-list-outbound-checklist-picture-header-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.packing-list-outbound-checklist-picture-header-actions .operation-compact-action { min-width: 72px !important; }
.packing-list-outbound-checklist-picture-header-actions > .operation-add-button { margin: 0 !important; }
.packing-list-outbound-checklist-picture-selection-menu { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.packing-list-outbound-checklist-picture-selection-menu[hidden] { display: none; }
[data-outbound-packing-picture-selection-scope].is-picture-selection .packing-list-outbound-checklist-picture-header-actions .operation-add-button { display: none !important; }
.packing-list-outbound-checklist-picture-grid { align-items: start; display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.packing-list-outbound-checklist-picture-grid:empty { display: none; }
.packing-list-outbound-checklist-picture { align-content: start; align-self: start; background: transparent; border: 0; border-radius: 0; display: grid; gap: 2px; grid-auto-rows: max-content; height: max-content; min-width: 0; overflow: hidden; padding: 0; }
.packing-list-outbound-checklist-picture > small { color: #475467; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; padding: 0 3px; }
.packing-list-outbound-checklist-pictures img { background: #f8fafc; border-radius: 5px; display: block; height: 172px; max-width: 100%; object-fit: contain; width: 100%; }
.packing-list-outbound-checklist-picture-actions { align-items: center; border-top: 0; display: flex; gap: 12px; justify-content: flex-end; min-height: 0; padding: 1px 2px 0; }
.packing-list-outbound-checklist-picture-actions .packing-list-outbound-picture-card-selection { height: 20px; margin-right: auto; width: 20px; }
.packing-list-outbound-checklist-picture-actions .packing-list-outbound-picture-card-selection input { accent-color: #2563eb; height: 17px; margin: 0; width: 17px; }
.packing-list-outbound-checklist-picture-actions :is(.packing-list-outbound-picture-card-caption-edit, .packing-list-outbound-picture-card-delete) { appearance: none; background: transparent; border: 0; font-family: inherit; font-size: 11px; font-weight: 400; height: auto; line-height: 1.4; min-height: 0; min-width: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.packing-list-outbound-checklist-picture-actions .packing-list-outbound-picture-card-caption-edit { color: #475467; }
.packing-list-outbound-checklist-picture-actions .packing-list-outbound-picture-card-delete { color: #b42318; }
.packing-list-outbound-checklist-row.has-many-pictures { grid-template-areas: "item content check" "photos photos photos"; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) 44px; }
.packing-list-outbound-checklist-row.has-many-pictures .packing-list-outbound-checklist-item-cell { grid-area: item; }
.packing-list-outbound-checklist-row.has-many-pictures .packing-list-outbound-checklist-content-cell { grid-area: content; }
.packing-list-outbound-checklist-row.has-many-pictures .packing-list-outbound-checklist-check { grid-area: check; }
.packing-list-outbound-checklist-row.has-many-pictures .packing-list-outbound-checklist-pictures { grid-area: photos; }
.packing-list-outbound-checklist-row.has-many-pictures .packing-list-outbound-checklist-picture-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.packing-list-outbound-checklist-display-button:hover strong, .packing-list-outbound-checklist-display-button:focus-visible strong { color: #175cd3; }

.packing-list-outbound-checklist-dialog--remark {
  width: min(720px, calc(100vw - 32px));
}

.packing-list-outbound-checklist-dialog--remark textarea {
  box-sizing: border-box;
  min-height: 160px;
  width: 100%;
}

.packing-list-outbound-checklist-row strong {
  color: #1d2939;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}

.packing-list-outbound-checklist-group {
  color: #667085;
  font-size: 12px;
}

@media (min-width: 761px) and (max-width: 1050px) {
  .packing-list-outbound-checklist-row,
  .packing-list-outbound-checklist-table-header { grid-template-columns: minmax(110px, 140px) minmax(160px, 1fr) minmax(280px, 320px) 44px; }
  .packing-list-outbound-checklist-row.has-many-pictures { grid-template-columns: minmax(110px, 140px) minmax(0, 1fr) 44px; }
  .packing-list-outbound-checklist-pictures img { height: 156px; }
}

.packing-list-outbound-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.packing-list-outbound-details > div {
  border-bottom: 1px solid #eaecf0;
  min-width: 0;
  padding: 11px 8px;
}

.packing-list-outbound-details dt {
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 4px;
}

.packing-list-outbound-details dd {
  color: #1d2939;
  font-size: 13px;
  margin: 0;
  overflow-wrap: anywhere;
}

.packing-list-outbound-detail-form { padding-bottom: 18px; }

.packing-list-outbound-detail-save-actions {
  align-items: center;
  display: flex;
  gap: 9px;
}

.packing-list-outbound-detail-save-status {
  color: #18794e;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.packing-list-outbound-detail-layout {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(270px, 1fr) minmax(270px, 1fr) minmax(290px, 1fr);
}

.packing-list-outbound-detail-column { display: grid; gap: 12px; min-width: 0; }

.packing-list-outbound-detail-panel {
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  min-width: 0;
  overflow: hidden;
}

.packing-list-outbound-detail-panel > h3 {
  background: #f8fafc;
  border-bottom: 1px solid #d0d5dd;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  margin: 0;
  padding: 8px 10px;
  text-align: center;
}

.packing-list-outbound-detail-fields { display: grid; }

.packing-list-outbound-detail-fields > label,
.packing-list-outbound-detail-static-row {
  align-items: center;
  border-bottom: 1px solid #eaecf0;
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(88px, 110px) minmax(0, 1fr);
  min-height: 34px;
  padding: 3px 6px;
}

.packing-list-outbound-detail-fields > label:last-child,
.packing-list-outbound-detail-static-row:last-child { border-bottom: 0; }

.packing-list-outbound-detail-fields span,
.packing-list-outbound-detail-static-row span {
  color: #475467;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

.packing-list-outbound-detail-fields input {
  box-sizing: border-box;
  font-size: 12px;
  height: 28px;
  min-width: 0;
  padding: 3px 7px;
  width: 100%;
}

.packing-list-outbound-detail-company-fields {
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  overflow: hidden;
}

.packing-list-outbound-detail-panel > textarea {
  border: 0;
  box-sizing: border-box;
  display: block;
  font-size: 12px;
  min-height: 90px;
  padding: 8px 9px;
  resize: vertical;
  width: 100%;
}

.packing-list-outbound-detail-task-head,
.packing-list-outbound-detail-task-list > div {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) 44px 36px;
}

.packing-list-outbound-detail-task-head {
  color: #667085;
  font-size: 10px;
  padding: 5px 8px 3px;
  text-align: center;
}

.packing-list-outbound-detail-task-head > span:first-child { text-align: left; }
.packing-list-outbound-detail-task-list { min-height: 116px; padding: 0 8px 6px; }
.packing-list-outbound-detail-task-list > div { border-top: 1px solid #eaecf0; min-height: 32px; }
.packing-list-outbound-detail-task-list strong { color: #344054; font-size: 11px; font-weight: 600; }
.packing-list-outbound-detail-task-list input { justify-self: center; }
.packing-list-outbound-detail-task-list p,
.packing-list-outbound-detail-documents p { color: #98a2b3; font-size: 11px; margin: 22px 8px; text-align: center; }

.packing-list-outbound-detail-terminal {
  align-items: center;
  background: #f8fafc;
  border-top: 1px solid #eaecf0;
  display: grid;
  font-size: 11px;
  gap: 8px;
  grid-template-columns: 55px 1fr;
  padding: 6px 8px;
}

.packing-list-outbound-detail-terminal span { color: #667085; font-weight: 700; }
.packing-list-outbound-detail-terminal strong,
.packing-list-outbound-detail-static-row strong { color: #344054; font-size: 12px; font-weight: 600; }

.packing-list-outbound-detail-choice { display: grid; grid-template-columns: repeat(2, 1fr); padding: 8px; }
.packing-list-outbound-detail-choice label { position: relative; }
.packing-list-outbound-detail-choice input { opacity: 0; position: absolute; }
.packing-list-outbound-detail-choice span { border: 1px solid #d0d5dd; color: #475467; display: block; font-size: 11px; padding: 7px; text-align: center; }
.packing-list-outbound-detail-choice label:first-child span { border-radius: 5px 0 0 5px; }
.packing-list-outbound-detail-choice label:last-child span { border-left: 0; border-radius: 0 5px 5px 0; }
.packing-list-outbound-detail-choice input:checked + span { background: #344054; border-color: #344054; color: #fff; font-weight: 700; }

.packing-list-outbound-detail-check {
  align-items: center;
  border-top: 1px solid #eaecf0;
  color: #475467;
  display: flex;
  font-size: 11px;
  justify-content: space-between;
  min-height: 34px;
  padding: 3px 10px;
}

.packing-list-outbound-detail-check input { height: 18px; width: 18px; }
.packing-list-outbound-detail-documents { min-height: 376px; }
.packing-list-outbound-detail-documents > div { display: grid; }
.packing-list-outbound-detail-documents a,
.packing-list-outbound-detail-documents > div > span { border-bottom: 1px solid #eaecf0; color: #344054; font-size: 11px; overflow-wrap: anywhere; padding: 8px 10px; }

@media (max-width: 980px) {
  .packing-list-outbound-detail-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .packing-list-outbound-detail-layout { grid-template-columns: 1fr; }
  .packing-list-outbound-detail-documents { min-height: 180px; }
}

@media (max-width: 760px) {
  .packing-list-outbound-tab-content { min-height: 180px; padding: 0 10px 16px; }
  .packing-list-outbound-tab-content-header { flex-wrap: wrap; min-height: 52px; padding: 8px 0; }
  .packing-list-outbound-picture-display-size { order: 2; }
  .packing-list-outbound-picture-actions { flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-end; order: 3; }
  .packing-list-outbound-checklist { gap: 10px; }
  .packing-list-outbound-checklist-row,
  .packing-list-outbound-checklist-row.has-many-pictures { gap: 10px; grid-template-areas: "item check" "content content" "photos photos"; grid-template-columns: minmax(0, 1fr) 40px; padding: 11px; }
  .packing-list-outbound-checklist-row .packing-list-outbound-checklist-item-cell { grid-area: item; }
  .packing-list-outbound-checklist-row .packing-list-outbound-checklist-content-cell { grid-area: content; }
  .packing-list-outbound-checklist-row .packing-list-outbound-checklist-check { grid-area: check; padding-top: 11px; }
  .packing-list-outbound-checklist-row .packing-list-outbound-checklist-pictures { grid-area: photos; }
  .packing-list-outbound-checklist-row .packing-list-outbound-checklist-picture-grid,
  .packing-list-outbound-checklist-row.has-many-pictures .packing-list-outbound-checklist-picture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .packing-list-outbound-checklist-pictures img { height: 140px; }
  .packing-list-outbound-checklist-fields { grid-template-columns: 1fr; }
  .packing-list-outbound-checklist-table-header { display: none; }
  .packing-list-outbound-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep process-summary tabs usable at every width.  This is intentionally
   last: the shared .tabs rule otherwise changes this grid into inline-flex. */
.operation-item-total-board.tabs.operation-item-total-tabs {
  display: grid;
  grid-template-columns: repeat(var(--operation-item-total-slot-count, 15), minmax(48px, 1fr)) !important;
  max-width: 100%;
  overflow-x: auto;
}

.operation-item-total-board.tabs.operation-item-total-tabs > .operation-item-total-group--size-1 {
  border: 0 !important;
  grid-column: span 1 !important;
}

.operation-item-total-board.tabs.operation-item-total-tabs > .operation-item-total-group--size-2 {
  border: 0 !important;
  grid-column: span 2 !important;
}

.operation-item-total-board.tabs.operation-item-total-tabs > .operation-item-total-group--size-3 {
  border: 0 !important;
  grid-column: span 3 !important;
}

@media (max-width: 680px) {
  .operation-item-total-board.tabs.operation-item-total-tabs {
    /* On phones, show every process at once.  Multi-value processes stack
       their figures vertically inside the same-width tab. */
    grid-template-columns: repeat(var(--operation-item-total-group-count, 7), minmax(0, 1fr)) !important;
    grid-auto-rows: 112px;
    overflow: hidden;
  }

  .operation-item-total-board.tabs.operation-item-total-tabs > .operation-item-total-group--size-1,
  .operation-item-total-board.tabs.operation-item-total-tabs > .operation-item-total-group--size-2,
  .operation-item-total-board.tabs.operation-item-total-tabs > .operation-item-total-group--size-3 {
    grid-column: span 1 !important;
  }

  .operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-card {
    box-sizing: border-box;
    grid-template-rows: 34px minmax(0, 1fr);
    height: 100%;
    min-height: 0;
  }

  .operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-card > h2 {
    color: #344054;
    font-size: 11px !important;
  }

  .operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-group--statistics .operation-item-total-substeps {
    display: none;
  }

  .operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-card > .operation-item-total-substeps,
  .operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-group--size-2 > .operation-item-total-card > .operation-item-total-substeps {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(var(--operation-item-total-substep-count, 1), minmax(0, 1fr));
    min-height: 0;
  }

  .operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-group--size-3 > .operation-item-total-card > .operation-item-total-substeps {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(var(--operation-item-total-substep-count, 1), minmax(0, 1fr));
    min-height: 0;
  }

  .operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-value {
    border-bottom: 0 !important;
    border-right: 0 !important;
    color: #667085 !important;
    min-height: 0;
    padding: 1px;
  }

  .operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-value span,
  .operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-value strong {
    color: #667085 !important;
  }

  .operation-item-total-board.tabs.operation-item-total-tabs .operation-item-total-value strong {
    font-size: 10px !important;
  }
}