.order-entry-attachments { display: grid; gap: 10px; padding: 16px; border: 1px solid #c8dbea; border-radius: 12px; background: #f4f9fd; }
.order-entry-attachments > small { color: #5c7489; line-height: 1.6; }
.order-entry-attachments > input[data-entry-attachment-picker] {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 6px;
  border: 1px solid #b9cfdf;
  border-radius: 8px;
  background: #fff;
  color: #526b80;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.order-entry-attachments > input[data-entry-attachment-picker]::file-selector-button {
  min-height: 36px;
  margin: 0 12px 0 0;
  padding: 0 20px;
  border: 1px solid #6599bd;
  border-bottom-color: #376e98;
  border-radius: 6px;
  background: linear-gradient(180deg, #fafdff 0%, #dcecf8 55%, #c2ddf0 100%);
  color: #204f73;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #96b7cd, 0 3px 6px rgb(32 79 115 / 12%);
}
.order-entry-attachments > input[data-entry-attachment-picker]:hover::file-selector-button {
  background: linear-gradient(180deg, #fff 0%, #cfe6f6 100%);
  border-color: #397da9;
}
.order-entry-attachments > input[data-entry-attachment-picker]:focus-visible {
  outline: 2px solid #267bac;
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .order-entry-attachments > input[data-entry-attachment-picker]::file-selector-button {
    min-height: 40px;
    padding-inline: 14px;
  }
}
.order-entry-attachment-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #dbe7ef; }
.order-entry-attachment-row strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.order-entry-attachment-row small { color: #5c7489; }
:root {
  color-scheme: light;
  --bg: #edf2f6;
  --paper: #eef3f7;
  --panel: #ffffff;
  --ink: #1c2733;
  --muted: #657487;
  --line: #d5dee7;
  --line-soft: #e6edf2;
  --line-strong: #b8c7d6;
  --blue: #2f609e;
  --blue-dark: #234b7e;
  --green: #1f7f68;
  --gold: #a36a16;
}

/* CRM performance modal */
body.client-performance-open {
  overflow: hidden;
}

.client-performance-modal {
  position: fixed;
  inset: 0;
  z-index: 3500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 20, 29, .7);
}

.client-performance-dialog {
  position: relative;
  width: min(1180px, calc(100vw - 48px));
  max-height: min(850px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid #718894;
  border-radius: 8px;
  background: #f4f6f7;
  box-shadow: 0 34px 96px rgba(3, 12, 20, .52), 0 2px 8px rgba(3, 12, 20, .26);
}

.client-performance-dialog::before {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: #3c78a7;
  content: "";
}

.client-performance-close {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #b8c9d5;
  border-radius: 50%;
  background: #fff;
  color: #4e6879;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(3, 14, 23, .2);
}

.client-performance-close:hover {
  border-color: #7396ae;
  background: #edf4f8;
  color: #1f587c;
}

.client-performance-content {
  min-height: 540px;
  color: #172b3a;
}

.client-performance-loading {
  min-height: 540px;
  display: grid;
  place-items: center;
  color: #718392;
  font-size: 14px;
  font-weight: 800;
}

.client-performance-loading.error {
  color: #a53f3f;
}

.client-performance-head {
  min-height: 122px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 72px 24px 32px;
  border-bottom: 1px solid #c6d5df;
  background: #edf3f7;
  box-shadow: inset 0 -1px 0 #fff;
}

.client-performance-title > span {
  display: block;
  margin-bottom: 7px;
  color: #3b739b;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
}

.client-performance-title h2 {
  margin: 0;
  color: #17394f;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: 0;
}

.client-performance-title p {
  margin: 8px 0 0;
  color: #637b8a;
  font-size: 12px;
  font-weight: 700;
}

.client-performance-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.client-performance-periods {
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  overflow: hidden;
  border: 1px solid #afc2cf;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 1px 0 #fff;
}

.client-performance-periods button {
  min-width: 62px;
  min-height: 36px;
  border: 0;
  border-right: 1px solid #d2dde4;
  background: transparent;
  color: #5d7381;
  font-size: 12px;
  font-weight: 850;
}

.client-performance-periods button:last-child {
  border-right: 0;
}

.client-performance-periods button:hover {
  background: #edf4f8;
  color: #285f83;
}

.client-performance-periods button.active {
  background: #3978a7;
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(19, 67, 101, .24);
}

.client-performance-refresh {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border: 1px solid #afc2cf;
  border-radius: 50%;
  background: #fff;
  color: #315f7c;
  font-size: 20px;
  font-weight: 900;
}

.client-performance-content.is-refreshing .client-performance-refresh {
  animation: client-weekly-refresh .8s linear infinite;
}

.client-performance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #c8d1d6;
  background: #fbfcfc;
  box-shadow: 0 5px 18px rgba(18, 42, 54, .06);
}

.client-performance-summary > div {
  position: relative;
  min-height: 96px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 4px 16px;
  padding: 18px 24px;
  border-right: 1px solid #d6dde1;
}

.client-performance-summary > div::before {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 0;
  width: 3px;
  background: #507f98;
  content: "";
}

.client-performance-summary > div:nth-child(2)::before { background: #b98a42; }
.client-performance-summary > div:nth-child(3)::before { background: #5c7c73; }
.client-performance-summary > div:nth-child(4)::before { background: #486f58; }

.client-performance-summary > div:hover {
  background: #f4f7f8;
}

.client-performance-summary > div:last-child {
  border-right: 0;
}

.client-performance-summary span {
  align-self: end;
  color: #526976;
  font-size: 12px;
  font-weight: 800;
}

.client-performance-summary strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: #183a49;
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.client-performance-summary small {
  color: #9a762f;
  font-size: 10px;
  font-weight: 800;
}

.client-performance-range {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 32px;
  border-bottom: 1px solid #d9dfe3;
  background: #f0f3f4;
}

.client-performance-range > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.client-performance-range span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #b8cedd;
  background: #e7f0f6;
  color: #2c6284;
  font-size: 11px;
  font-weight: 900;
}

.client-performance-range strong {
  color: #243e50;
  font-size: 14px;
}

.client-performance-range p {
  margin: 0;
  color: #7a8b97;
  font-size: 11px;
  font-weight: 700;
}

.client-performance-table-wrap {
  margin: 22px 32px 0;
  overflow-x: auto;
  border: 1px solid #b8c5cb;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(18, 40, 51, .1), inset 0 1px 0 #fff;
}

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

.client-performance-table th,
.client-performance-table td {
  height: 58px;
  padding: 10px 14px;
  border-right: 1px solid #e1e7ec;
  border-bottom: 1px solid #dce4e9;
  text-align: center;
  vertical-align: middle;
}

.client-performance-table tr > :last-child {
  border-right: 0;
}

.client-performance-table thead th {
  height: 44px;
  background: #284450;
  color: #e9f0f2;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.client-performance-table thead th:first-child,
.client-performance-table tbody th,
.client-performance-table tfoot th {
  width: 178px;
  text-align: left;
}

.client-performance-table tbody th {
  background: #f7f9f9;
}

.client-performance-table tbody tr.current th,
.client-performance-table tbody tr.current td {
  background: #eef6f1;
}

.client-performance-table tbody tr.current th {
  box-shadow: inset 4px 0 0 #3c7d60;
}

.client-performance-table tbody tr:hover th,
.client-performance-table tbody tr:hover td {
  background: #edf3f5;
}

.client-performance-person {
  color: #173744;
  font-size: 14px;
  font-weight: 950;
}

.client-performance-me {
  display: inline-flex;
  min-width: 24px;
  height: 20px;
  align-items: center;
  justify-content: center;
  margin-left: 7px;
  border-radius: 999px;
  background: #39775d;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.client-performance-table tbody td > strong {
  color: #203f4c;
  font-size: 17px;
  font-weight: 950;
}

.client-performance-table tbody td:last-child {
  white-space: nowrap;
}

.client-performance-table tbody td:last-child small {
  display: block;
  margin-top: 3px;
  color: #81909b;
  font-size: 9px;
  font-weight: 800;
}

.client-performance-rate {
  color: #315f78;
  font-size: 16px;
  font-weight: 950;
}

.client-performance-rate.good { color: #2e7652; }
.client-performance-rate.low { color: #a64b43; }
.client-performance-rate.empty { color: #8d9aa4; }

.client-performance-table tfoot th,
.client-performance-table tfoot td {
  height: 46px;
  border-bottom: 0;
  border-top: 2px solid #aebdc4;
  background: #e7ecee;
  color: #263f4a;
  font-size: 12px;
  font-weight: 950;
}

.client-performance-empty {
  height: 240px !important;
  color: #82919c;
  font-size: 13px;
  font-weight: 800;
}

.client-performance-foot {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 32px;
  border-top: 1px solid #d6dde0;
  color: #788994;
  font-size: 10px;
  font-weight: 750;
}

@media (max-width: 760px) {
  .client-performance-modal {
    padding: 10px;
  }

  .client-performance-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .client-performance-close {
    top: 12px;
    right: 12px;
  }

  .client-performance-head {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
    padding: 22px 58px 20px 20px;
  }

  .client-performance-tools {
    width: calc(100vw - 108px);
  }

  .client-performance-periods {
    width: 100%;
  }

  .client-performance-periods button {
    min-width: 0;
    padding: 0 6px;
  }

  .client-performance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-performance-summary > div {
    min-height: 82px;
    padding: 14px 16px;
  }

  .client-performance-summary > div:nth-child(2) {
    border-right: 0;
  }

  .client-performance-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid #dbe3e9;
  }

  .client-performance-summary strong {
    font-size: 24px;
  }

  .client-performance-range {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding: 14px 20px;
  }

  .client-performance-table-wrap {
    margin: 16px 20px 0;
  }

  .client-performance-foot {
    padding: 12px 20px;
  }
}

.client-performance-table-wrap {
  overflow: auto;
  overscroll-behavior: contain;
}

.client-performance-matrix {
  --client-person-width: 130px;
  --client-metric-width: 120px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.client-performance-matrix th,
.client-performance-matrix td {
  height: 38px;
  padding: 6px 10px;
  border-right: 1px solid #dce5ea;
  border-bottom: 1px solid #dfe6ea;
}

.client-performance-matrix thead th {
  position: sticky;
  z-index: 6;
  top: 0;
  height: 54px;
  background: #e4edf3;
  color: #36586d;
  box-shadow: inset 0 -1px 0 #b9cbd7;
}

.client-performance-matrix thead th:first-child {
  z-index: 9;
  left: 0;
  width: var(--client-person-width);
  min-width: var(--client-person-width);
  background: #dbe7ee;
}

.client-performance-matrix thead th:nth-child(2) {
  z-index: 9;
  left: var(--client-person-width);
  width: var(--client-metric-width);
  min-width: var(--client-metric-width);
  background: #dbe7ee;
}

.client-matrix-day-head {
  width: 104px;
  min-width: 104px;
}

.client-matrix-day-head span,
.client-matrix-day-head strong {
  display: block;
}

.client-matrix-day-head span {
  color: #5e7685;
  font-size: 10px;
  line-height: 1.1;
}

.client-matrix-day-head strong {
  margin-top: 4px;
  color: #274b61;
  font-size: 13px;
  line-height: 1;
}

.client-matrix-day-head em {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  margin-top: 4px;
  padding: 0 7px;
  border-radius: 999px;
  background: #3f7fac;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.client-performance-matrix .client-matrix-person {
  position: sticky;
  z-index: 4;
  left: 0;
  width: var(--client-person-width);
  min-width: var(--client-person-width);
  background: #f5f8fa;
  text-align: left;
  vertical-align: middle;
  box-shadow: inset -1px 0 0 #cbd8df;
}

.client-performance-matrix .client-matrix-person span {
  color: #183f56;
  font-size: 14px;
  font-weight: 950;
}

.client-performance-matrix .client-matrix-metric {
  position: sticky;
  z-index: 3;
  left: var(--client-person-width);
  width: var(--client-metric-width);
  min-width: var(--client-metric-width);
  background: #fafcfd;
  color: #587080;
  font-size: 11px;
  font-weight: 850;
  text-align: left;
  box-shadow: inset -1px 0 0 #d4dfe5;
}

.client-performance-matrix .client-matrix-value {
  width: 104px;
  min-width: 104px;
  background: #fff;
  color: #284858;
  text-align: center;
  white-space: nowrap;
}

.client-performance-matrix .client-matrix-value strong {
  display: block;
  color: #23485d;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.1;
}

.client-performance-matrix .client-matrix-value small {
  display: block;
  margin-top: 2px;
  color: #83939d;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
}

.client-performance-matrix .client-matrix-value.today,
.client-performance-matrix .client-matrix-day-head.today {
  background: #edf6fb;
  box-shadow: inset 2px 0 0 #76a8c8, inset -2px 0 0 #76a8c8;
}

.client-performance-matrix .client-matrix-value.future,
.client-performance-matrix .client-matrix-day-head.future {
  background: #f7f9fa;
  color: #a0adb5;
}

.client-matrix-dash {
  color: #9aa8b1;
  font-size: 14px;
  font-weight: 850;
}

.client-performance-matrix .client-matrix-total {
  position: sticky;
  z-index: 3;
  right: 0;
  width: 112px;
  min-width: 112px;
  background: #edf2f5;
  box-shadow: inset 2px 0 0 #bacbd5;
}

.client-performance-matrix thead .client-matrix-total {
  z-index: 9;
  background: #d9e5ec;
}

.client-matrix-person-group .group-start > th,
.client-matrix-person-group .group-start > td {
  border-top: 2px solid #b8cbd7;
}

.client-matrix-person-group.current .client-matrix-person {
  background: #eaf5ef;
  box-shadow: inset 4px 0 0 #3f7d60, inset -1px 0 0 #cbd8df;
}

.client-matrix-person-group.current .client-matrix-metric {
  background: #f1f8f4;
}

.client-performance-matrix tfoot th,
.client-performance-matrix tfoot td {
  border-top: 2px solid #88a9bc;
  background: #e8eff3;
}

.client-performance-matrix tfoot .client-matrix-person,
.client-performance-matrix tfoot .client-matrix-metric {
  background: #dfeaf0;
}

@media (max-width: 760px) {
  .client-performance-matrix {
    --client-person-width: 92px;
    --client-metric-width: 104px;
  }

  .client-performance-matrix th,
  .client-performance-matrix td {
    padding-right: 7px;
    padding-left: 7px;
  }

  .client-performance-matrix .client-matrix-person span {
    font-size: 12px;
  }

  .client-performance-matrix .client-matrix-total {
    position: static;
  }
}

/* Global factory-fee workbench. Business rules mirror the legacy finance pages. */
.factory-fee-list-view {
  min-width: 0;
  color: #173a5f;
}

.factory-fee-page-header {
  align-items: center;
  border-bottom: 1px solid #c8d9e9;
  background: #f7fbff;
}

.factory-fee-header-status,
.factory-fee-batch-actions,
.factory-fee-batch-toolbar,
.factory-fee-stage-bar,
.factory-fee-global-search {
  display: flex;
  align-items: center;
}

.factory-fee-header-status {
  gap: 12px;
}

.factory-fee-header-status strong {
  color: #153c66;
  font-size: 14px;
  white-space: nowrap;
}

.factory-fee-environment-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid #8db5d7;
  border-radius: 999px;
  background: #eaf4fc;
  color: #174f7d;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.factory-fee-environment-chip.test {
  border-color: #dfbc68;
  background: #fff8e7;
  color: #75500d;
}

.factory-fee-environment-chip.production {
  border-color: #5ea77f;
  background: #e9f7ef;
  color: #17623d;
}

.factory-fee-list-controls {
  padding: 14px 16px 12px;
  border-bottom: 1px solid #c9d9e7;
  background: #fff;
}

.factory-fee-global-search {
  position: relative;
  flex-wrap: wrap;
  gap: 6px;
}

.factory-fee-global-search select,
.factory-fee-global-search input,
.factory-fee-global-search button {
  min-height: 34px;
  box-sizing: border-box;
  font-size: 13px;
}

.factory-fee-global-search select,
.factory-fee-global-search input {
  border: 1px solid #adc7de;
  border-radius: 4px;
  background: #fbfdff;
  color: #173a5f;
}

.factory-fee-search-scope {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #a9c2d7;
  border-radius: 4px;
  background: linear-gradient(#ffffff 0%, #edf4f9 100%);
  color: #315b7d;
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 3px 8px rgba(39,74,103,.08);
  white-space: nowrap;
}

.factory-fee-search-box {
  position: relative;
  flex: 1 1 200px;
  min-width: 190px;
  max-width: 270px;
}

.factory-fee-search-box > input[type="search"] {
  width: 100%;
  min-height: 36px;
  padding: 0 34px 0 12px;
  border-color: #9fbbd2;
  background: linear-gradient(#ffffff, #f9fcfe);
  color: #183c5d;
  font-size: 13px;
  font-weight: 750;
  box-shadow: inset 0 1px 3px rgba(31,65,94,.06), 0 3px 9px rgba(39,74,103,.06);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.factory-fee-search-box > input[type="search"]:focus {
  outline: none;
  border-color: #397dac;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(57,125,172,.13), inset 0 1px 2px rgba(31,65,94,.04);
}

.factory-fee-global-search.is-searching .factory-fee-search-box::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  border: 2px solid #c5d7e5;
  border-top-color: #3478aa;
  border-radius: 50%;
  animation: factory-fee-search-spin .65s linear infinite;
  pointer-events: none;
}

@keyframes factory-fee-search-spin {
  to { transform: rotate(360deg); }
}

.factory-fee-search-command,
.factory-fee-reset-command {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 4px;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.factory-fee-search-command {
  border: 1px solid #2d70a4;
  border-bottom-color: #1c527c;
  background: linear-gradient(#4f92c4 0%, #2f78ad 55%, #286a9d 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 2px 0 #1f5d8c, 0 6px 13px rgba(34,91,135,.17);
}

.factory-fee-search-command:hover {
  border-color: #245f8e;
  background: linear-gradient(#579bcb 0%, #347fb5 55%, #2a70a3 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 3px 0 #1f5d8c, 0 9px 17px rgba(34,91,135,.2);
  transform: translateY(-1px);
}

.factory-fee-reset-command {
  border: 1px solid #a6bacb;
  border-bottom-color: #8199ad;
  background: linear-gradient(#ffffff 0%, #eef4f8 100%);
  color: #385a75;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 2px 0 #a7b9c7, 0 5px 11px rgba(39,67,91,.1);
}

.factory-fee-reset-command:hover {
  border-color: #7597b2;
  background: linear-gradient(#ffffff 0%, #e7f1f7 100%);
  color: #214f73;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 3px 0 #91a9bb, 0 8px 15px rgba(39,67,91,.14);
  transform: translateY(-1px);
}

#factoryFeeBankAccount {
  width: 112px;
}

#factoryFeeDateType {
  width: 92px;
}

.factory-fee-global-search .date-click-field.compact {
  width: 120px;
}

.factory-fee-global-search .date-click-field.compact input {
  width: 100%;
  padding: 0 8px;
}

.factory-fee-date-separator {
  color: #69839c;
  font-size: 12px;
  white-space: nowrap;
}

.factory-fee-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 7px;
  color: #496983;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.factory-fee-inline-check input {
  min-height: auto;
  width: 15px;
  height: 15px;
}

.factory-fee-search-suggestions {
  position: absolute;
  z-index: 70;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #9fbed8;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 13px 28px rgba(29, 67, 101, .18);
}

.factory-fee-search-suggestions button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 48px;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid #e3ecf3;
  border-radius: 0;
  background: #fff;
  color: #173a5f;
  text-align: left;
}

.factory-fee-search-suggestions button:hover {
  background: #edf6fd;
}

.factory-fee-search-suggestions strong {
  font-size: 13px;
}

.factory-fee-search-suggestions span {
  color: #70879b;
  font-size: 11px;
}

.factory-fee-stage-bar {
  gap: 8px;
  margin-top: 12px;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid #c8d9e7;
  border-radius: 8px;
  background: linear-gradient(#f8fbfd, #f1f6fa);
  box-shadow: inset 0 1px 0 #fff;
}

.factory-fee-stage-bar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #b9cddd;
  border-bottom-color: #9fb8cc;
  border-radius: 999px;
  background: linear-gradient(#fff, #edf4f9);
  color: #355a78;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(126, 157, 181, .34), 0 5px 10px rgba(40, 79, 111, .07);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.factory-fee-stage-bar button:hover {
  border-color: #82a9c6;
  background: linear-gradient(#fff, #e8f3fa);
  color: #174f7d;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(91, 136, 170, .35), 0 8px 14px rgba(35, 84, 122, .12);
  transform: translateY(-1px);
}

.factory-fee-stage-bar button.active {
  border-color: #2d6f9f;
  border-bottom-color: #1b567f;
  background: linear-gradient(#5a98c6 0%, #347db3 52%, #286b9e 100%);
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.42), 0 2px 0 #1d5a84, 0 7px 13px rgba(22, 74, 117, .23);
}

.factory-fee-stage-bar b {
  min-width: 25px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff;
  color: #315d80;
  font-size: 11px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(70, 116, 151, .16);
}

.factory-fee-stage-bar button.active b {
  background: rgba(255,255,255,.94);
  color: #245f8b;
  box-shadow: 0 1px 2px rgba(11, 51, 82, .18);
}

.factory-fee-stage-bar button.is-loading b {
  color: #54738d;
  animation: factory-fee-stage-loading 1s ease-in-out infinite;
}

@keyframes factory-fee-stage-loading {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

.factory-fee-finance-card.factory-fee-statement-card {
  width: min(1180px, calc(100vw - 30px));
  max-width: calc(100vw - 30px);
  max-height: calc(100vh - 28px);
}

.factory-fee-statement-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.factory-fee-statement-head > div span,
.factory-fee-statement-head > div strong {
  display: block;
}

.factory-fee-statement-head > b {
  padding: 6px 11px;
  border: 1px solid #9bbbd2;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #245d87;
  font-size: 12px;
}

.factory-fee-statement-body {
  padding: 14px 16px 8px;
  background: #f5f9fc;
}

.factory-fee-statement-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.factory-fee-statement-search {
  position: relative;
  flex: 0 1 390px;
}

.factory-fee-statement-search input {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  padding: 0 62px 0 12px;
  border: 1px solid #9ebbd1;
  border-radius: 6px;
  background: #fff;
  color: #173f61;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(36, 70, 99, .05);
}

.factory-fee-statement-search input:focus {
  border-color: #3f83b4;
  box-shadow: 0 0 0 3px rgba(55, 127, 179, .12);
}

.factory-fee-statement-search span {
  position: absolute;
  top: 50%;
  right: 10px;
  color: #6d879a;
  font-size: 11px;
  font-weight: 800;
  transform: translateY(-50%);
}

.factory-fee-statement-tip {
  margin-left: auto;
  color: #688297;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.factory-fee-statement-table-wrap {
  max-height: min(560px, calc(100vh - 250px));
  overflow: auto;
  border: 1px solid #b9cede;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(31, 70, 104, .06);
}

.factory-fee-statement-table {
  width: 100%;
  min-width: 1030px;
  table-layout: fixed;
  border-collapse: collapse;
}

.factory-fee-statement-table th:nth-child(1) { width: 32px; }
.factory-fee-statement-table th:nth-child(2) { width: 135px; }
.factory-fee-statement-table th:nth-child(3) { width: 140px; }
.factory-fee-statement-table th:nth-child(4) { width: 180px; }
.factory-fee-statement-table th:nth-child(5) { width: 82px; }
.factory-fee-statement-table th:nth-child(6) { width: 125px; }
.factory-fee-statement-table th:nth-child(7) { width: 80px; }
.factory-fee-statement-table th:nth-child(9) { width: 70px; }

.factory-fee-statement-table th,
.factory-fee-statement-table td {
  padding: 8px 9px;
  border-right: 1px solid #dce6ed;
  border-bottom: 1px solid #dce6ed;
  color: #274a65;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}

.factory-fee-statement-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.factory-fee-statement-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(#edf5fa, #dfeef7);
  color: #315a78;
  font-weight: 850;
  box-shadow: 0 1px 0 #bdd0df;
}

.factory-fee-statement-table tbody tr:nth-child(even) td { background: #fbfdff; }
.factory-fee-statement-table tbody tr:hover td { background: #eef7fd; }
.factory-fee-statement-table tbody tr.selected td { background: #e5f2fb; }
.factory-fee-statement-table td strong { color: #174e78; }
.factory-fee-statement-table td button { padding: 0; border: 0; background: none; color: #17649b; font: inherit; font-weight: 850; text-decoration: underline; cursor: pointer; }
.factory-fee-statement-amount { color: #173f61 !important; font-variant-numeric: tabular-nums; font-weight: 850; }
.factory-fee-statement-status { color: #8a6319; font-weight: 850; }

.factory-fee-statement-actions {
  justify-content: flex-end;
}

.factory-fee-statement-count {
  margin-right: auto;
  color: #657f94;
  font-size: 13px;
  font-weight: 750;
}

.factory-fee-statement-count strong {
  color: #1f6497;
  font-size: 17px;
}

@media (max-width: 900px) {
  .factory-fee-statement-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .factory-fee-statement-search { flex-basis: auto; }
  .factory-fee-statement-tip { margin-left: 0; white-space: normal; }
}

.factory-fee-batch-toolbar {
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e1eaf1;
}

.factory-fee-selection-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  color: #647e94;
  font-size: 12px;
}

.factory-fee-selection-summary strong {
  color: #165b91;
  font-size: 16px;
}

.factory-fee-selection-summary span {
  padding-left: 9px;
  border-left: 1px solid #c8d7e3;
  color: #1a4f79;
  font-weight: 800;
}

.factory-fee-batch-actions {
  justify-content: flex-end;
  gap: 8px;
}

.factory-fee-batch-actions button {
  min-width: 94px;
  min-height: 32px;
  white-space: nowrap;
}

#factoryFeeDebtButton.factory-fee-debt-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 108px;
  height: 34px;
  min-height: 34px;
  padding: 0 15px 0 20px;
  border: 1px solid #8da9bd;
  border-bottom-color: #6d8a9f;
  border-radius: 7px;
  background: linear-gradient(180deg, #fff 0%, #f2f7fa 48%, #dce8f0 100%);
  color: #244f70;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 2px 0 #809db1, 0 7px 14px rgba(38,77,106,.13);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

#factoryFeeDebtButton.factory-fee-debt-action::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 3px;
  height: 15px;
  border-radius: 3px;
  background: #c3a15e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

#factoryFeeDebtButton.factory-fee-debt-action:hover:not(:disabled) {
  border-color: #6f9ab8;
  border-bottom-color: #557b96;
  background: linear-gradient(180deg, #fff 0%, #f7fbfd 44%, #d7e8f3 100%);
  color: #174d74;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #718fa5, 0 10px 18px rgba(34,79,112,.18);
  transform: translateY(-2px);
}

#factoryFeeDebtButton.factory-fee-debt-action:active:not(:disabled) {
  box-shadow: inset 0 1px 3px rgba(36,74,103,.12), 0 1px 0 #718fa5, 0 4px 9px rgba(34,79,112,.14);
  transform: translateY(1px);
}

#factoryFeeDebtButton.factory-fee-debt-action:disabled {
  border-color: #c5d0d8;
  border-bottom-color: #b3c0ca;
  background: linear-gradient(180deg, #fbfcfd 0%, #edf1f4 100%);
  color: #8a9aa7;
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(55,76,91,.07);
  transform: none;
}

#factoryFeeDebtButton.factory-fee-debt-action:disabled::after {
  background: #c9b98f;
  opacity: .65;
}

#factoryFeeDebtButton.factory-fee-debt-action.is-busy::before {
  border-color: rgba(42,83,114,.22);
  border-top-color: #2e6b96;
}

#factoryFeeDebtButton.factory-fee-debt-action.is-busy::after {
  opacity: 0;
}

.factory-fee-list-table-wrap {
  min-height: 0;
  border-top: 0;
}

.base-data-table.factory-fee-list-table {
  min-width: 1480px;
  table-layout: fixed;
}

.factory-fee-list-table [data-factory-fee-column="order"],
.factory-fee-list-table .factory-fee-col-order { width: 184px; }

.factory-fee-list-table [data-factory-fee-column="invoiceNo"],
.factory-fee-list-table .factory-fee-col-invoiceNo { width: 156px; }

.factory-fee-list-table [data-factory-fee-column="factory"],
.factory-fee-list-table .factory-fee-col-factory { width: 154px; }

.factory-fee-list-table [data-factory-fee-column="invoice"],
.factory-fee-list-table .factory-fee-col-invoice { width: 220px; }

.factory-fee-list-table [data-factory-fee-column="bank"],
.factory-fee-list-table .factory-fee-col-bank { width: 112px; }

.factory-fee-list-table [data-factory-fee-column="etd"],
.factory-fee-list-table .factory-fee-col-etd,
.factory-fee-list-table [data-factory-fee-column="confirmed"],
.factory-fee-list-table .factory-fee-col-confirmed,
.factory-fee-list-table [data-factory-fee-column="billingTime"],
.factory-fee-list-table .factory-fee-col-billingTime,
.factory-fee-list-table [data-factory-fee-column="doneTime"],
.factory-fee-list-table .factory-fee-col-doneTime { width: 112px; }

.factory-fee-list-table [data-factory-fee-column="amount"],
.factory-fee-list-table .factory-fee-col-amount { width: 210px; }

.factory-fee-list-table [data-factory-fee-column="inquiry"],
.factory-fee-list-table td.finance-inquiry-cell {
  width: 58px;
  min-width: 58px;
  padding-right: 5px;
  padding-left: 5px;
  text-align: center;
}

.factory-fee-list-table [data-factory-fee-column="operator"],
.factory-fee-list-table .factory-fee-col-operator { width: 96px; }

.factory-fee-list-table [data-factory-fee-column="payRemark"],
.factory-fee-list-table .factory-fee-col-payRemark { width: 180px; }

.factory-fee-list-table [data-factory-fee-column="actions"],
.factory-fee-list-table .factory-fee-col-actions { width: 220px; }

.factory-fee-list-table [data-factory-fee-column="actions"],
.factory-fee-list-table td.factory-fee-col-actions {
  position: sticky;
  right: 0;
  background: #fff;
  box-shadow: -8px 0 14px -13px rgba(31, 66, 94, .8);
}

.factory-fee-list-table [data-factory-fee-column="actions"] {
  z-index: 8;
  background: #386da3;
  color: #fff;
}

.factory-fee-list-table td.factory-fee-col-actions {
  z-index: 3;
}

.factory-fee-list-table td.factory-fee-list-actions.menu-open {
  z-index: 12;
}

.factory-fee-main-row:hover td.factory-fee-col-actions,
.factory-fee-child-row:hover td.factory-fee-col-actions {
  background: #f4f9fd;
}

.factory-fee-main-row.selected td.factory-fee-col-actions {
  background: #edf7ff;
}

.factory-fee-main-row.search-hit td.factory-fee-col-actions {
  background: #fffaf0;
}

.factory-fee-list-table th {
  position: sticky;
  z-index: 4;
  top: 0;
  height: 38px;
  padding: 0 9px;
  background: #edf4f9;
  color: #2a5273;
  font-size: 12px;
  white-space: nowrap;
}

.factory-fee-list-table td {
  height: 48px;
  padding: 7px 9px;
  border-color: #d6e2ec;
  color: #254662;
  font-size: 12px;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.factory-fee-main-row:hover td,
.factory-fee-child-row:hover td {
  background: #f4f9fd;
}

.factory-fee-main-row.selected td {
  background: #edf7ff;
}

.factory-fee-main-row.search-hit td {
  background: #fffaf0;
  border-top-color: #ead7a7;
  border-bottom-color: #ead7a7;
}

.factory-fee-main-row.search-hit td:first-child {
  box-shadow: inset 4px 0 #d5a43c;
}

.factory-fee-main-row.overdue td {
  border-top-color: #e6aa9e;
  border-bottom-color: #e6aa9e;
}

.factory-fee-main-row.legacy-red td:not(.factory-fee-col-actions),
.factory-fee-child-row.legacy-red td:not(.factory-fee-col-actions) {
  color: #b64d4d;
  font-weight: 800;
}

.factory-fee-main-row.legacy-red .factory-fee-order-link,
.factory-fee-main-row.legacy-red .factory-fee-order-disabled,
.factory-fee-main-row.legacy-red .factory-fee-factory-name,
.factory-fee-main-row.legacy-red .factory-fee-amount-cell span,
.factory-fee-main-row.legacy-red .factory-fee-amount-cell em,
.factory-fee-child-row.legacy-red .factory-fee-order-link,
.factory-fee-child-row.legacy-red .factory-fee-order-disabled,
.factory-fee-child-row.legacy-red .factory-fee-factory-name,
.factory-fee-child-row.legacy-red .factory-fee-amount-cell span,
.factory-fee-child-row.legacy-red .factory-fee-amount-cell em {
  color: #b64d4d;
}

.factory-fee-main-row.legacy-blue td:not(.factory-fee-col-actions),
.factory-fee-child-row.legacy-blue td:not(.factory-fee-col-actions) {
  color: #1673ad;
  font-weight: 800;
}

.factory-fee-main-row.legacy-blue .factory-fee-order-link,
.factory-fee-main-row.legacy-blue .factory-fee-order-disabled,
.factory-fee-main-row.legacy-blue .factory-fee-factory-name,
.factory-fee-main-row.legacy-blue .factory-fee-amount-cell span,
.factory-fee-main-row.legacy-blue .factory-fee-amount-cell em,
.factory-fee-child-row.legacy-blue .factory-fee-order-link,
.factory-fee-child-row.legacy-blue .factory-fee-order-disabled,
.factory-fee-child-row.legacy-blue .factory-fee-factory-name,
.factory-fee-child-row.legacy-blue .factory-fee-amount-cell span,
.factory-fee-child-row.legacy-blue .factory-fee-amount-cell em {
  color: #1673ad;
}

.factory-fee-main-row.red-flushed td:not(.factory-fee-col-actions),
.factory-fee-child-row.red-flushed td:not(.factory-fee-col-actions),
.factory-fee-main-row.invoice-invalid td,
.factory-fee-child-row.invoice-invalid td {
  text-decoration-line: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #bd4b4b;
}

.factory-fee-main-row.red-flushed .factory-fee-col-actions,
.factory-fee-main-row.red-flushed .factory-fee-col-actions *,
.factory-fee-child-row.red-flushed .factory-fee-col-actions,
.factory-fee-child-row.red-flushed .factory-fee-col-actions *,
.factory-fee-main-row.invoice-invalid .factory-fee-col-actions,
.factory-fee-main-row.invoice-invalid .factory-fee-col-actions *,
.factory-fee-child-row.invoice-invalid .factory-fee-col-actions,
.factory-fee-child-row.invoice-invalid .factory-fee-col-actions * {
  text-decoration: none;
}

.factory-fee-child-row td {
  height: 42px;
  background: #fafcfe;
  color: #5a7185;
}

.factory-fee-child-row td:first-child {
  box-shadow: inset 3px 0 #8eb6d5;
}

.factory-fee-select-col {
  width: 38px;
  min-width: 38px;
  text-align: center;
}

.factory-fee-order-cell {
  min-width: 160px;
}

.factory-fee-order-link,
.factory-fee-order-disabled {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  color: #14568d;
  font-size: 13px;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.factory-fee-order-disabled {
  color: #7b8c99;
  text-decoration: none;
}

.factory-fee-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  margin-left: 8px;
  padding: 0 7px;
  border: 1px solid #a8c1d6;
  border-radius: 999px;
  background: #f7fbfe;
  color: #315d80;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.factory-fee-group-toggle:hover {
  border-color: #568db7;
  background: #eaf4fb;
}

.factory-fee-group-toggle span {
  font-size: 15px;
  line-height: 1;
}

.factory-fee-factory-name {
  display: block;
  max-width: 100%;
  color: #183f62;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.factory-fee-factory-line {
  display: block;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.factory-fee-factory-line .factory-fee-factory-name {
  display: inline;
}

.factory-fee-monthly-badge {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #e3b3b0;
  border-radius: 999px;
  background: #fff1ef;
  color: #aa4a45;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}

.factory-fee-invoice-title {
  min-width: 170px;
  max-width: 280px;
  line-height: 1.45;
}

.factory-fee-hit {
  padding: 1px 3px;
  border: 1px solid #e0b84d;
  border-radius: 3px;
  background: #fff0a8;
  color: #5b4105;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}

.factory-fee-amount-cell {
  min-width: 120px;
  text-align: right;
}

.factory-fee-amount-cell span {
  display: block;
  color: #123f67;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  white-space: nowrap;
}

.factory-fee-amount-cell em {
  margin-right: 5px;
  color: #6b8296;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}

.factory-fee-pay-remark {
  min-width: 150px;
  max-width: 260px;
  line-height: 1.4;
}

.factory-fee-list-actions {
  position: relative;
  min-width: 0;
  white-space: normal;
}

.factory-fee-list-actions.menu-open {
  z-index: 12;
}

.factory-fee-action-primary {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  white-space: nowrap;
}

.factory-fee-invoice-pending-actions {
  flex-wrap: wrap;
  white-space: normal;
}

.factory-fee-red-pending-state,
.factory-fee-invoice-pending-state {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.factory-fee-red-pending-state {
  border: 1px solid #dca3a3;
  background: linear-gradient(#fffafa, #fbe8e8);
  color: #a43c3c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 2px 5px rgba(128,50,50,.1);
}

.factory-fee-invoice-pending-state {
  border: 1px solid #8abbd9;
  background: linear-gradient(#f8fdff, #e2f2fb);
  color: #19719f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 2px 5px rgba(26,102,146,.1);
}

.factory-fee-main-row.red-pending td:not(.factory-fee-col-actions),
.factory-fee-child-row.red-pending td:not(.factory-fee-col-actions) {
  background: #fffafa;
}

.factory-fee-more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 54px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #9fb7cc;
  border-bottom-color: #7f9bb2;
  border-radius: 4px;
  background: linear-gradient(#ffffff 0%, #edf4f9 100%);
  color: #315a7b;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 2px 5px rgba(42,73,99,.1);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.factory-fee-more-button:hover,
.factory-fee-list-actions.menu-open .factory-fee-more-button {
  border-color: #4f88b4;
  color: #174f7d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 5px 12px rgba(34,85,125,.16);
  transform: translateY(-1px);
}

.factory-fee-more-button span {
  font-size: 10px;
  transition: transform .14s ease;
}

.factory-fee-list-actions.menu-open .factory-fee-more-button span {
  transform: rotate(180deg);
}

.factory-fee-action-menu {
  position: fixed;
  z-index: 1200;
  inset: auto;
  margin: 0;
  box-sizing: border-box;
  display: grid;
  gap: 3px;
  grid-auto-rows: max-content;
  align-content: start;
  width: 136px;
  height: auto;
  min-height: 0;
  padding: 5px;
  border: 1px solid #9eb8ce;
  border-radius: 6px;
  background: #fff;
  overflow-y: auto;
  box-shadow: 0 14px 30px rgba(25,55,82,.22), inset 0 1px 0 rgba(255,255,255,.98);
}

.factory-fee-action-menu.hidden {
  display: none;
}

.factory-fee-action-menu .mini-button,
.factory-fee-action-menu .blue-action-button.compact {
  width: 100%;
  box-sizing: border-box;
  height: 28px;
  min-height: 28px;
  justify-content: flex-start;
  margin: 0;
  padding: 0 11px;
  text-align: left;
}

.factory-fee-action-menu .mini-button.danger {
  border-color: #d7aaa4;
  background: linear-gradient(#fffefe, #fbecea);
  color: #9b3d33;
}

.factory-fee-list-actions .blue-action-button.compact,
.factory-fee-list-actions .mini-button {
  min-width: 58px;
  min-height: 28px;
  padding: 0 9px;
  font-size: 11px;
  white-space: nowrap;
}

.factory-fee-pagination {
  justify-content: center;
  gap: 5px;
  padding: 12px 16px;
  border-top: 1px solid #d3e0ea;
  background: #f8fbfd;
}

.factory-fee-pagination button {
  min-width: 34px;
  min-height: 30px;
}

.factory-fee-pagination button.active {
  border-color: #2d75ac;
  background: #397fb3;
  color: #fff;
}

.factory-fee-finance-modal {
  z-index: 3450;
}

.factory-fee-finance-card {
  width: min(760px, calc(100vw - 32px));
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

.factory-fee-finance-form {
  padding: 18px 20px 8px;
}

.factory-fee-finance-summary {
  display: grid;
  grid-template-columns: minmax(120px, .75fr) minmax(240px, 1.5fr) minmax(100px, .55fr);
  border: 1px solid #c2d5e5;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.factory-fee-finance-summary > div {
  min-width: 0;
  padding: 11px 13px;
  border-right: 1px solid #d7e3ed;
}

.factory-fee-finance-summary > div:last-child {
  border-right: 0;
}

.factory-fee-finance-summary span {
  display: block;
  margin-bottom: 4px;
  color: #6b8296;
  font-size: 11px;
  font-weight: 800;
}

.factory-fee-finance-summary strong {
  display: block;
  overflow-wrap: anywhere;
  color: #173f63;
  font-size: 14px;
  line-height: 1.45;
}

.factory-fee-receipt-money-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.factory-fee-receipt-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}

.factory-fee-finance-card .base-field input,
.factory-fee-finance-card .base-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #a9c3da;
  border-radius: 4px;
  background: #fbfdff;
  color: #173a5f;
  font-size: 14px;
  font-weight: 700;
}

.factory-fee-finance-card .base-field input {
  min-height: 38px;
  padding: 0 10px;
}

.factory-fee-finance-card .base-field textarea {
  min-height: 96px;
  padding: 10px;
  line-height: 1.55;
  resize: vertical;
}

.factory-fee-inline-error {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #d79b93;
  border-radius: 5px;
  background: #fff2f0;
  color: #a6382d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.factory-fee-single-field {
  display: block;
}

.factory-fee-single-field > span {
  display: block;
  margin-bottom: 7px;
}

.factory-fee-finance-card.factory-fee-record-card {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
}

.factory-fee-record-list {
  max-height: min(560px, calc(100vh - 220px));
  padding: 16px 20px;
  overflow: auto;
}

.factory-fee-record-item {
  display: grid;
  grid-template-columns: minmax(210px, .85fr) minmax(300px, 1.4fr) minmax(150px, auto);
  gap: 14px;
  align-items: center;
  margin-bottom: 9px;
  padding: 12px 14px;
  border: 1px solid #c4d6e5;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 3px 9px rgba(34, 70, 103, .06);
}

.factory-fee-record-pair {
  display: grid;
  gap: 7px;
  margin-bottom: 13px;
}

.factory-fee-record-pair > .factory-fee-record-item,
.factory-fee-record-list > .factory-fee-record-item {
  margin-bottom: 0;
}

.factory-fee-record-blue {
  border-color: #8eb5d1;
  background: linear-gradient(90deg, #f8fcff 0, #fff 38%);
}

.factory-fee-record-red {
  border-color: #df9b9b;
  background: linear-gradient(90deg, #fff8f8 0, #fff 42%);
}

.factory-fee-record-red.pending {
  border-style: dashed;
  background: #fffafa;
}

.factory-fee-record-red-separator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  color: #a34a4a;
  font-size: 11px;
  font-weight: 850;
}

.factory-fee-record-red-separator::before {
  content: "↓";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f8e7e7;
  color: #a23c3c;
  font-size: 14px;
}

.factory-fee-invoice-kind {
  display: inline-flex;
  width: max-content;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .025em;
}

.factory-fee-invoice-kind.blue {
  border: 1px solid #9ec4df;
  background: #eaf5fc;
  color: #245d88;
}

.factory-fee-invoice-kind.red {
  border: 1px solid #e4aaaa;
  background: #fff0f0;
  color: #a33e3e;
}

.factory-fee-record-item.invalid {
  border-color: #d9a19b;
  background: #fff8f7;
}

.factory-fee-record-main,
.factory-fee-record-meta {
  min-width: 0;
}

.factory-fee-record-main span,
.factory-fee-record-main strong,
.factory-fee-record-main em,
.factory-fee-record-meta span {
  display: block;
}

.factory-fee-record-main span {
  color: #5c7890;
  font-size: 11px;
  font-weight: 850;
}

.factory-fee-record-main strong {
  margin-top: 2px;
  overflow-wrap: anywhere;
  color: #153f65;
  font-size: 15px;
  line-height: 1.35;
}

.factory-fee-record-main em {
  margin-top: 3px;
  color: #906217;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.factory-fee-record-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #516d84;
  font-size: 12px;
  line-height: 1.4;
}

.factory-fee-record-meta span {
  overflow-wrap: anywhere;
}

.factory-fee-record-operation {
  color: #285f87;
  font-weight: 850;
}

.factory-fee-record-operation-detail {
  color: #6b7f8e;
}

.factory-fee-red-record-state {
  color: #a53d3d;
  font-weight: 900;
}

.factory-fee-record-mail {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 2px 7px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed #d5e1e9;
  color: #617a8d;
}

.factory-fee-record-mail strong {
  font-size: 12px;
}

.factory-fee-record-mail span,
.factory-fee-record-mail small {
  font-size: 11px;
  font-weight: 650;
}

.factory-fee-record-mail small {
  grid-column: 1 / -1;
  line-height: 1.45;
}

.factory-fee-record-mail-sent strong { color: #257256; }
.factory-fee-record-mail-pending strong { color: #84621f; }
.factory-fee-record-mail-failed {
  margin-top: 7px;
  padding: 7px 8px;
  border: 1px solid #e3aaaa;
  border-radius: 4px;
  background: #fff5f5;
  color: #973f3f;
}

.factory-fee-record-mail-failed strong,
.factory-fee-record-mail-failed small { color: #973f3f; }

.factory-fee-record-order-scope {
  display: grid;
  gap: 5px;
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px dashed #d7e2eb;
}

.factory-fee-record-order-scope small {
  color: #71879a;
  font-size: 11px;
  font-weight: 800;
}

.factory-fee-record-order-scope > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.factory-fee-record-order-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid #c6d8e7;
  border-radius: 999px;
  background: #f7fbfe;
  color: #315c80;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

.factory-fee-record-order-chip.current {
  border-color: #83a9c8;
  background: #eaf4fb;
  color: #184f78;
}

.factory-fee-record-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

.factory-fee-record-actions .blue-action-button.red {
  border-color: #b27777;
  background: linear-gradient(#fff, #f8eded);
  color: #8c3434;
}

.factory-fee-red-card {
  width: min(760px, calc(100vw - 32px));
}

.factory-fee-red-loading {
  display: grid;
  justify-items: center;
  gap: 9px;
  min-height: 210px;
  padding: 42px 24px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f8fbfe 0%, #eef5fa 100%);
  color: #365d7d;
  text-align: center;
}

.factory-fee-red-loading i {
  width: 34px;
  height: 34px;
  border: 3px solid #c8dae8;
  border-top-color: #2f78ae;
  border-radius: 50%;
  animation: factory-fee-spin .75s linear infinite;
}

.factory-fee-red-loading strong {
  color: #174d77;
  font-size: 17px;
  font-weight: 900;
}

.factory-fee-red-loading span {
  color: #617d93;
  font-size: 13px;
  line-height: 1.5;
}

.factory-fee-red-body {
  padding: 18px;
  background: #f5f8fb;
}

.factory-fee-red-warning {
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid #d8b46a;
  border-left: 4px solid #c38a2a;
  border-radius: 4px;
  background: #fffaf0;
  color: #704d14;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

.factory-fee-red-warning.blocked {
  border-color: #d5a2a2;
  border-left-color: #ad5353;
  background: #fff6f6;
  color: #7f3535;
}

.factory-fee-red-records {
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid #c8d8e5;
  border-radius: 5px;
  background: #fff;
}

.factory-fee-red-records > .factory-fee-red-record {
  padding: 9px 11px;
  border-bottom: 1px solid #e1e9ef;
  color: #31546e;
  font-size: 12px;
}

.factory-fee-red-records > .factory-fee-red-record:last-child {
  border-bottom: 0;
}

.factory-fee-red-record-main {
  display: grid;
  grid-template-columns: 100px minmax(140px, 1fr) minmax(120px, .8fr) 80px;
  gap: 10px;
  align-items: center;
}

.factory-fee-red-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 7px;
  color: #6b8294;
  font-size: 12px;
}

.factory-fee-red-records strong {
  color: #173f61;
  font-size: 13px;
}

.factory-fee-red-records em {
  color: #755717;
  font-style: normal;
  font-weight: 800;
}

.factory-fee-red-records b {
  color: #984444;
  text-align: right;
}

.factory-fee-record-empty {
  padding: 50px 20px;
  color: #71879a;
  text-align: center;
}

.factory-fee-invoice-card {
  width: min(1080px, calc(100vw - 64px));
  max-height: calc(100vh - 28px);
}

.factory-fee-invoice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.factory-fee-invoice-head-meta {
  display: flex;
  align-items: center;
  gap: 9px;
}

.factory-fee-invoice-head-meta em {
  font-style: normal;
}

.factory-fee-invoice-head-meta b {
  min-width: 74px;
  padding: 6px 9px;
  border: 1px solid #85abc9;
  border-radius: 4px;
  background: #f7fbfe;
  color: #194f7a;
  font-size: 12px;
  text-align: center;
}

.factory-fee-invoice-body {
  max-height: calc(100vh - 190px);
  padding: 15px 18px 8px;
  overflow-y: auto;
  background: #f5f9fc;
}

.factory-fee-invoice-buyer,
.factory-fee-invoice-lines,
.factory-fee-invoice-remarks,
.factory-fee-invoice-settings {
  margin-bottom: 12px;
  border: 1px solid #bfd2e2;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(31, 69, 103, .05);
}

.factory-fee-invoice-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid #d3e1eb;
  background: #edf5fb;
}

.factory-fee-invoice-section-title strong {
  color: #17476f;
  font-size: 13px;
}

.factory-fee-invoice-section-title span {
  color: #6a8295;
  font-size: 11px;
  font-weight: 700;
}

.factory-fee-invoice-buyer dl {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr) 125px minmax(0, 1fr);
  margin: 0;
}

.factory-fee-invoice-buyer dt,
.factory-fee-invoice-buyer dd {
  min-height: 40px;
  box-sizing: border-box;
  margin: 0;
  padding: 9px 11px;
  border-right: 1px solid #dce6ee;
  border-bottom: 1px solid #dce6ee;
  font-size: 12px;
  line-height: 1.45;
}

.factory-fee-invoice-buyer dt {
  background: #f5f8fb;
  color: #456681;
  font-weight: 850;
}

.factory-fee-invoice-buyer dd {
  color: #1e425f;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.factory-fee-invoice-settings {
  display: grid;
  grid-template-columns: 200px minmax(300px, 1fr) auto;
  gap: 16px;
  align-items: end;
  padding: 12px;
}

.factory-fee-invoice-mode {
  display: inline-flex;
  gap: 5px;
  padding: 3px;
  border: 1px solid #bdd0df;
  border-radius: 5px;
  background: #f2f7fa;
}

.factory-fee-invoice-mode button {
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #4e6b82;
  font-size: 12px;
  font-weight: 800;
}

.factory-fee-invoice-mode button.active {
  border-color: #4e87b3;
  background: #fff;
  color: #175789;
  box-shadow: 0 2px 5px rgba(38, 78, 112, .12);
}

.factory-fee-bank-remark-check {
  align-self: center;
}

.factory-fee-invoice-table-wrap {
  overflow-x: auto;
}

.factory-fee-invoice-lines table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
}

.factory-fee-invoice-lines th,
.factory-fee-invoice-lines td {
  padding: 7px 8px;
  border-right: 1px solid #d9e4ed;
  border-bottom: 1px solid #d9e4ed;
  color: #274a66;
  font-size: 12px;
}

.factory-fee-invoice-lines th {
  background: #f5f8fb;
  color: #486984;
  text-align: left;
  white-space: nowrap;
}

.factory-fee-invoice-lines th:first-child {
  width: 38%;
}

.factory-fee-invoice-lines input {
  width: 100%;
  min-height: 32px;
  box-sizing: border-box;
  border: 1px solid #b5cadb;
  border-radius: 3px;
  background: #fbfdff;
  color: #183f61;
  font-size: 12px;
  font-weight: 700;
}

.factory-fee-invoice-lines [data-invoice-line-amount] {
  color: #1a5d8f;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.factory-fee-invoice-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 0 13px;
  background: #f6fafc;
}

.factory-fee-invoice-total span {
  color: #647e93;
  font-size: 11px;
  font-weight: 750;
}

.factory-fee-invoice-total strong {
  color: #194a72;
  font-size: 13px;
}

.factory-fee-invoice-total b {
  margin-left: 4px;
  color: #b06b13;
  font-size: 18px;
}

.factory-fee-invoice-remarks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
}

.factory-fee-fixed-remark {
  min-width: 0;
}

.factory-fee-fixed-remark > span {
  display: block;
  margin-bottom: 6px;
  color: #3e617d;
  font-size: 12px;
  font-weight: 850;
}

.factory-fee-fixed-remark pre {
  min-height: 82px;
  box-sizing: border-box;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #d3dee7;
  border-radius: 4px;
  background: #f5f7f9;
  color: #687a89;
  font: 11px/1.55 "PingFang SC", "Microsoft YaHei", sans-serif;
  white-space: pre-wrap;
}

.factory-fee-invoice-actions {
  justify-content: center;
}

.factory-fee-invoice-actions > button {
  min-width: 120px;
}


.factory-fee-batch-actions button.is-busy,
.factory-fee-finance-card button.is-busy {
  position: relative;
  padding-left: 30px;
}

.factory-fee-batch-actions button.is-busy::before,
.factory-fee-finance-card button.is-busy::before {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 12px;
  height: 12px;
  margin-top: -7px;
  border: 2px solid rgba(255,255,255,.55);
  border-top-color: #fff;
  border-radius: 50%;
  content: "";
  animation: factory-fee-spin .75s linear infinite;
}

@keyframes factory-fee-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1180px) {
  .factory-fee-global-search .date-click-field.compact {
    width: 132px;
  }

  .factory-fee-batch-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .factory-fee-batch-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .factory-fee-finance-summary,
  .factory-fee-receipt-money-grid,
  .factory-fee-receipt-meta-grid {
    grid-template-columns: 1fr;
  }

  .factory-fee-finance-summary > div {
    border-right: 0;
    border-bottom: 1px solid #d7e3ed;
  }

  .factory-fee-finance-summary > div:last-child {
    border-bottom: 0;
  }

  .factory-fee-invoice-settings,
  .factory-fee-invoice-remarks,
  .factory-fee-invoice-buyer dl {
    grid-template-columns: 1fr;
  }

  .factory-fee-invoice-buyer dt,
  .factory-fee-invoice-buyer dd {
    border-right: 0;
  }
}

@media (max-width: 820px) {
  .factory-fee-record-item {
    grid-template-columns: 1fr;
  }

  .factory-fee-record-actions {
    justify-content: flex-start;
  }
}

.mbl-bill-card {
  width: min(1280px, calc(100vw - 32px));
  max-width: 1280px;
}

.mbl-bill-form .mbl-legacy-workbench {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 0;
  background: linear-gradient(180deg, #f8fbfe 0%, #eef5fb 100%);
}

.mbl-bill-card .mbl-bill-form {
  min-height: 0;
  max-height: none;
  padding: 10px 12px 12px;
}

.mbl-legacy-container {
  padding: 0;
  background: transparent;
}

.mbl-legacy-topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.mbl-type-box {
  width: 320px;
  max-width: 100%;
}

.mbl-type-box .booking-field {
  grid-template-columns: 80px minmax(0, 1fr);
}

.mbl-type-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid #bfd2e5;
  border-radius: 7px;
  background: #fff;
  padding: 0 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 12px rgba(38,78,118,.07);
}

.mbl-type-status span,
.mbl-supplier-line > span,
.mbl-paper-label,
.mbl-summary-tile span,
.mbl-cargo-subtitle,
.mbl-measure-column span,
.mbl-legacy-remark > span {
  color: #355f87;
  font-size: 12px;
  font-weight: 900;
}

.mbl-type-status strong {
  color: #11385d;
  font-size: 13px;
  font-weight: 900;
}

.mbl-upload-panel {
  margin-bottom: 12px;
}

.mbl-upload-card {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #c7d9eb;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 22px rgba(33,75,116,.08);
}

.mbl-upload-card span {
  color: #3d668d;
  font-size: 11px;
  font-weight: 900;
}

.mbl-upload-card strong {
  display: block;
  margin-top: 4px;
  color: #12385c;
  font-size: 14px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.mbl-supplier-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 5px 8px;
  border: 1px solid #c7d9eb;
  border-radius: 8px 8px 0 0;
  background: #fff;
}

.mbl-supplier-line .booking-field {
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

.mbl-supplier-line .booking-field > span {
  display: none;
}

.mbl-paper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  border: 1px solid #9fb8d3;
  border-bottom: 0;
  background: #fff;
  box-shadow: 0 10px 22px rgba(38,78,118,.08);
}

.mbl-party-main,
.mbl-paper-title,
.mbl-title-spacer {
  min-width: 0;
  border-bottom: 1px solid #9fb8d3;
}

.mbl-paper-title,
.mbl-title-spacer {
  border-left: 1px solid #9fb8d3;
}

.mbl-party-main {
  padding: 6px;
}

.mbl-party-main .booking-field,
.mbl-legacy-remark .booking-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  margin: 0;
}

.mbl-party-main .booking-field > span,
.mbl-legacy-remark .booking-field > span {
  display: none;
}

.mbl-bill-form .mbl-party-main textarea {
  display: block;
  width: 100%;
  height: 58px;
  min-height: 58px;
  padding: 5px 6px;
  font-size: 13px;
  line-height: 16px;
  overflow-y: auto;
  border: 0;
  box-shadow: none;
  background: #fdfefe;
  resize: vertical;
}

.mbl-paper-label {
  margin-bottom: 2px;
  line-height: 16px;
}

.mbl-number-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #9fb8d3;
}

.mbl-number-row > div {
  min-height: 44px;
  padding: 5px 8px;
}

.mbl-number-row > div:first-child {
  border-right: 1px solid #9fb8d3;
}

.mbl-number-row span {
  display: block;
  color: #355f87;
  font-size: 12px;
  font-weight: 900;
}

.mbl-number-row strong {
  display: block;
  margin-top: 4px;
  color: #12385c;
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.mbl-title-brand {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.mbl-title-brand img {
  width: 70px;
  height: 28px;
  object-fit: contain;
}

.mbl-title-brand strong {
  color: #12385c;
  font-size: 16px;
  font-weight: 900;
}

.mbl-route-legacy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #9fb8d3;
  border-top: 0;
  background: #fff;
}

.mbl-route-legacy-grid .mbl-summary-tile {
  min-height: 40px;
  border: 0;
  border-right: 1px solid #9fb8d3;
  border-bottom: 1px solid #9fb8d3;
  border-radius: 0;
  background: #fff;
  padding: 4px 8px;
}

.mbl-route-legacy-grid .mbl-summary-tile:nth-child(3n) {
  border-right: 0;
}

.mbl-route-legacy-grid .mbl-summary-tile:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.mbl-summary-tile strong {
  display: block;
  margin-top: 3px;
  color: #12385c;
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.mbl-stc-title {
  min-height: 22px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  border-left: 1px solid #9fb8d3;
  border-right: 1px solid #9fb8d3;
  background: #fff;
  color: #12385c;
  font-size: 13px;
  font-weight: 900;
}

.mbl-cargo-legacy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px 94px 94px;
  border: 1px solid #9fb8d3;
  background: #fff;
}

.mbl-cargo-description .mbl-cargo-editor {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: 44px;
  margin: 4px 0 6px;
  padding: 5px 6px;
  overflow-y: auto;
  resize: vertical;
  font: inherit;
  line-height: 1.5;
}

.mbl-container-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 72px;
  gap: 8px;
  width: 100%;
  max-width: 460px;
  margin-top: 10px;
}

.mbl-container-edit-row > label {
  display: grid;
  min-width: 0;
  gap: 4px;
  color: #496783;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.mbl-container-edit-row > label > input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 5px 7px;
  font-size: 13px;
}

.mbl-cargo-description,
.mbl-measure-column {
  min-width: 0;
  min-height: 0;
  border-right: 1px solid #9fb8d3;
  padding: 6px;
}

.mbl-measure-column:last-child {
  border-right: 0;
}

.mbl-cargo-description pre {
  min-height: 20px;
  margin: 2px 0 4px;
  white-space: pre-wrap;
  word-break: break-word;
  color: #173858;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}

.mbl-cargo-subtitle {
  margin-top: 4px;
}

.mbl-measure-column {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.mbl-measure-column span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  line-height: 1.35;
}

.mbl-measure-column strong {
  display: block;
  margin-top: 12px;
  min-height: 20px;
  color: #12385c;
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.mbl-measure-column b {
  display: block;
  margin-top: 8px;
  color: #12385c;
  font-size: 13px;
  font-weight: 900;
}

.mbl-legacy-remark {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid #9fb8d3;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #fff;
  padding: 6px 8px;
  margin-bottom: 0;
  box-shadow: 0 10px 22px rgba(38,78,118,.08);
}

.mbl-bill-form .mbl-legacy-remark textarea {
  display: block;
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 5px 6px;
  font-size: 13px;
  line-height: 18px;
  overflow-y: auto;
}

.mbl-remark-edit {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mbl-remark-note {
  padding: 4px 8px;
  border: 1px solid #c9d9e8;
  border-left: 4px solid #2f79b7;
  border-radius: 6px;
  background: linear-gradient(180deg, #fafdff 0%, #f1f7fc 100%);
  color: #264b6d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.mbl-remark-note strong {
  display: inline-flex;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e7f1fa;
  color: #245f92;
  font-size: 11px;
  white-space: nowrap;
}

.mbl-remark-note strong.invalid {
  background: #fff0f0;
  color: #bd2e2e;
}

.mbl-legacy-remark textarea.mbl-remark-over-limit {
  border-color: #d44b4b;
  box-shadow: 0 0 0 3px rgba(212, 75, 75, .12);
}

.mbl-legacy-remark .booking-field.wide {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.mbl-legacy-workbench .mbl-mail-dock.booking-mail-panel {
  position: static;
  width: 100%;
  max-height: none;
}

.mbl-receiver-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: #294c6c;
}

.mbl-internal-switch input:focus-visible + .ios-switch {
  outline: 2px solid #2f6db0;
  outline-offset: 3px;
}

.mbl-mail-dock input[readonly] {
  background: #edf4fa;
  color: #29597f;
}

.mbl-mail-dock textarea {
  min-height: 210px;
}

/* Field labels and values share a font family, with a consistent visual hierarchy. */
.mbl-bill-form .mbl-legacy-container :is(
  .mbl-paper-label, .mbl-cargo-subtitle, .mbl-summary-tile span,
  .mbl-number-row span, .mbl-measure-column span,
  .mbl-supplier-line > span, .mbl-legacy-remark > span,
  .mbl-container-edit-row > label, .mbl-type-box .booking-field > span
) {
  color: #355f87;
  font-size: 12px;
  font-weight: 700;
}

.mbl-bill-form .mbl-legacy-container :is(
  textarea, .mbl-cargo-description pre, .mbl-summary-tile strong,
  .mbl-number-row strong, .mbl-measure-column strong, .mbl-measure-column b,
  .mbl-container-edit-row input, .mbl-supplier-line input, .mbl-type-box select
) {
  color: #253749;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
}

/* Keep cargo quantities together; stack only when the actual viewport is narrow. */
@media (max-width: 760px) {
  .mbl-cargo-legacy-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mbl-cargo-description {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 1px solid #9fb8d3;
  }
}

@media (max-width: 600px) {
  .mbl-paper,
  .mbl-upload-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .mbl-paper-title {
    border-left: 0;
  }

  .mbl-title-spacer {
    display: none;
  }

  .mbl-legacy-topbar,
  .mbl-supplier-line {
    align-items: stretch;
    flex-direction: column;
  }

  .mbl-type-box {
    width: 100%;
  }

  .mbl-legacy-remark {
    grid-template-columns: minmax(0, 1fr);
  }

  .mbl-bill-card .mbl-bill-form {
    padding: 8px;
  }
}

@media (max-width: 420px) {
  .mbl-route-legacy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mbl-route-legacy-grid .mbl-summary-tile {
    border-right: 1px solid #9fb8d3;
    border-bottom: 1px solid #9fb8d3;
  }

  .mbl-route-legacy-grid .mbl-summary-tile:nth-child(2n) {
    border-right: 0;
  }

  .mbl-route-legacy-grid .mbl-summary-tile:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", Arial, sans-serif;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-synthesis-weight: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

/* Low-specificity safety net: unclassified legacy text controls must not fall back to browser-default chrome. */
:where(button:not([class])) {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #a9c0d3;
  border-bottom-color: #7f9db6;
  border-radius: 5px;
  background: linear-gradient(#ffffff 0%, #f1f6fa 55%, #dbe9f3 100%);
  color: #294f6d;
  font-weight: 850;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 2px 0 #aac0d1, 0 6px 12px rgba(41, 79, 109, .1);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

:where(button:not([class]):not(:disabled):hover) {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

:where(button:not([class]):disabled) {
  cursor: not-allowed;
  filter: grayscale(.25);
  opacity: .56;
}

.hidden {
  display: none !important;
}

.topbar {
  height: 58px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.brand strong {
  color: var(--blue-dark);
  font-size: 22px;
  letter-spacing: .04em;
}

.brand span,
.user-chip {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-topbar-tools {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-right: 2px;
}

.order-topbar-tools .order-tool-button {
  min-height: 30px;
  padding: 0 10px;
  white-space: nowrap;
}

.topbar-logout {
  min-width: 54px;
  height: 30px;
  border: 1px solid #9eb8d2;
  border-radius: 5px;
  background: #fff;
  color: #315b82;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.topbar-logout:hover {
  border-color: #2f609e;
  background: #eef5fb;
}

.dev-user-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.dev-user-switch select {
  width: 300px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
}

.app {
  padding: 20px 24px 28px;
  width: 100%;
  min-width: 0;
}

body.login-active {
  background:
    radial-gradient(circle at 50% 8%, rgba(92, 142, 184, .12), transparent 34%),
    linear-gradient(145deg, #f5f8fa 0%, #edf3f6 52%, #e7eef3 100%);
}

body.login-active .topbar {
  border-bottom-color: #d6e1e8;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 0 rgba(35, 75, 126, .03);
}

body.login-active .app {
  padding-top: 32px;
  padding-bottom: 40px;
}

body.login-active #customerTaskQuickOpen,
body.login-active .site-notification-notice {
  display: none !important;
}

.login-panel {
  position: relative;
  min-height: calc(100vh - 130px);
  display: grid;
  place-items: center;
}

.login-box {
  position: relative;
  width: min(460px, 100%);
  padding: 38px 38px 30px;
  background: #fff;
  border: 1px solid #d3e0e8;
  border-radius: 16px;
  box-shadow: 0 22px 56px rgba(29, 58, 83, .14), 0 2px 5px rgba(29, 58, 83, .05);
}

.login-box::before {
  position: absolute;
  top: 0;
  right: 38px;
  left: 38px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #1f5489, #4b87b8 56%, #9dbdd4);
  content: "";
}

.login-heading {
  margin-bottom: 28px;
}

.login-eyebrow {
  display: block;
  margin-bottom: 9px;
  color: #5f839d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.login-box h1 {
  margin: 0 0 9px;
  color: #173f68;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.25;
}

.login-box p {
  margin: 0;
  color: #6a7f90;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
}

.login-box label {
  display: grid;
  gap: 7px;
  margin-bottom: 17px;
  color: #486276;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .02em;
}

.login-box input {
  height: 44px;
  border: 1px solid #b9cad7;
  border-radius: 8px;
  background: #fff;
  padding: 0 13px;
  color: #1c3548;
  font-weight: 600;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.searchbar input,
.searchbar select {
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  padding: 0 10px;
}

.login-box input::placeholder {
  color: #9aacb9;
}

.login-box input:hover {
  border-color: #88a8bf;
}

.login-box input:focus {
  border-color: #3471a7;
  outline: 0;
  background: #fcfeff;
  box-shadow: 0 0 0 3px rgba(52, 113, 167, .14);
}

.login-box button {
  height: 44px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: linear-gradient(180deg, #3976aa 0%, #245f96 100%);
  color: #fff;
  font-weight: 850;
}

.searchbar button {
  height: 36px;
  border: 1px solid var(--blue);
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
}

.login-box button {
  width: 100%;
  margin-top: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 5px 11px rgba(35, 87, 133, .18);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.login-box button:not(:disabled):hover {
  filter: brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 7px 14px rgba(35, 87, 133, .23);
  transform: translateY(-1px);
}

.login-box button:not(:disabled):active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(11, 51, 86, .24), 0 2px 5px rgba(35, 87, 133, .18);
}

.message {
  min-height: 20px;
  margin-top: 13px;
  color: #a33a2b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.login-access-note {
  min-height: 18px;
  margin-top: 2px !important;
  color: #8a9aa8 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center;
}

.login-box label.password-input-method-warning { color: #a33a2b; }
.login-box label.password-input-method-warning input {
  border-color: #bd5962;
  background: #fff8f8;
  box-shadow: 0 0 0 3px rgba(189, 89, 98, .12);
}

@media (max-width: 620px) {
  body.login-active .topbar { padding: 0 16px; }
  body.login-active .app { padding: 20px 16px 28px; }
  body.login-active .brand span { display: none; }
  .login-panel { min-height: calc(100vh - 106px); }
  .login-box { padding: 32px 24px 25px; border-radius: 14px; }
  .login-box::before { right: 24px; left: 24px; }
  .login-box h1 { font-size: 25px; }
}

.workspace {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  transition: grid-template-columns .18s ease;
  min-width: 0;
}

.workspace.nav-expanded {
  grid-template-columns: 244px minmax(0, 1fr);
}

.sidebar,
.content,
.detail-panel,
.table-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
}

.sidebar {
  min-height: calc(100vh - 106px);
  padding: 10px 8px;
  border-radius: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c7d5df transparent;
}

.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 999px; background: #c7d5df; }

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: linear-gradient(#fff, #eef4f8);
  color: var(--blue-dark);
  font-weight: 900;
  cursor: pointer;
}

.nav-toggle-icon { font-size: 17px; line-height: 1; }
.nav-toggle-text { display: none; white-space: nowrap; }

.workspace.nav-expanded .nav-toggle {
  width: 100%;
  margin: 0 0 12px;
  justify-content: flex-start;
  padding: 0 12px;
}

.workspace.nav-expanded .nav-toggle-text { display: block; }

.nav-button {
  width: 34px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #f6f9fb;
  color: var(--blue-dark);
  font-weight: 800;
  text-align: center;
  padding: 0;
}

.nav-button.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.nav-button.is-refreshing {
  position: relative;
  cursor: progress;
}

.nav-button.is-refreshing::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid rgba(45, 117, 164, .56);
  border-top-color: transparent;
  border-radius: 7px;
  pointer-events: none;
  animation: navigation-refresh-ring .72s linear infinite;
}

.nav-button.active.is-refreshing::before {
  border-color: rgba(255, 255, 255, .78);
  border-top-color: transparent;
}

@keyframes navigation-refresh-ring {
  to { transform: rotate(360deg); }
}

.workspace.is-view-refreshing .content {
  position: relative;
}

.workspace.is-view-refreshing .content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(229, 242, 249, .34);
  pointer-events: none;
  animation: navigation-refresh-wash .18s ease-out;
}

.workspace.is-view-refreshing .content::after {
  content: "正在刷新数据";
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 21;
  border: 1px solid #a8c5d7;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 5px 14px rgba(35, 78, 108, .14);
  color: #2d6689;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  animation: navigation-refresh-label .18s ease-out;
}

.nav-button.muted {
  color: #98a5b3;
}

.nav-icon {
  min-width: 18px;
  text-align: center;
  font-weight: 900;
}

.nav-label {
  display: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace.nav-expanded .sidebar {
  padding: 14px;
}

.workspace.nav-expanded .nav-label {
  display: block;
}

.workspace.nav-expanded .nav-button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  padding: 0 12px;
}

.workspace.nav-expanded .nav-button .nav-icon {
  display: none;
}

.workspace.nav-expanded .nav-button.is-refreshing::after {
  content: "刷新中";
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  opacity: .76;
  white-space: nowrap;
}

/* Business navigation keeps its grouped operations and permission hooks. */
.business-navigation {
  display: grid;
  gap: 10px;
  padding-bottom: 4px;
}

.nav-group {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* A role may not have access to any entry in a whole business area.  Do not
   leave an empty category heading behind when the normal permission hooks hide
   its buttons. */
.nav-group:not(:has(.nav-button:not(.hidden):not(:disabled))) {
  display: none;
}

.nav-group + .nav-group {
  padding-top: 10px;
  border-top: 1px solid #e1e9ef;
}

.nav-group > h2 {
  display: none;
  margin: 0;
}

.nav-copy {
  display: none;
  min-width: 0;
}

.nav-meta {
  display: none;
}

.nav-button {
  position: relative;
  min-height: 38px;
  margin-bottom: 0;
  border-radius: 10px;
  border-color: #d7e2e9;
  background: linear-gradient(135deg, #ffffff 0%, #f5f8fa 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 1px 2px rgba(37, 73, 99, .035);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.nav-button:hover:not(:disabled) {
  z-index: 1;
  transform: translateY(-1px);
  border-color: #9db7c8;
  background: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 7px 15px rgba(31, 76, 108, .11);
}

.nav-button:focus-visible {
  z-index: 2;
  outline: 3px solid rgba(62, 136, 180, .24);
  outline-offset: 1px;
}

.nav-button.active {
  border-color: #1d618f;
  background: linear-gradient(135deg, #1c5f8c, #2f7dac);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 7px 16px rgba(28, 82, 120, .22);
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  min-width: 24px;
  width: 24px;
  height: 24px;
  border: 1px solid #c9d9e4;
  border-radius: 8px;
  background: #e8f1f6;
  color: #28648c;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
}

.nav-button.active .nav-icon {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.16);
  color: #fff;
}

.nav-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #c94f45;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.workspace.nav-expanded .sidebar {
  padding: 12px;
}

.workspace.nav-expanded .business-navigation {
  gap: 13px;
}

.workspace.nav-expanded .nav-group {
  gap: 5px;
}

.workspace.nav-expanded .nav-group + .nav-group {
  padding-top: 13px;
}

.workspace.nav-expanded .nav-group > h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 4px 3px;
  color: #587184;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}

.workspace.nav-expanded .nav-group > h2 small {
  color: #a3b2bd;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
}

.workspace.nav-expanded .nav-button {
  min-height: 50px;
  justify-content: flex-start;
  gap: 10px;
  padding: 7px 10px;
}

.workspace.nav-expanded .nav-button .nav-icon {
  display: inline-flex;
  flex-basis: 28px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.workspace.nav-expanded .nav-copy {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
}

.workspace.nav-expanded .nav-label {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace.nav-expanded .nav-meta {
  display: block;
  overflow: hidden;
  color: #8294a2;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace.nav-expanded .nav-button.active .nav-meta {
  color: rgba(255,255,255,.72);
}

.workspace.nav-expanded .nav-indicator {
  position: static;
  flex: 0 0 auto;
  min-width: 22px;
  height: 20px;
  margin-left: 4px;
  border: 0;
  background: #c94f45;
  font-size: 10px;
  line-height: 20px;
}

@keyframes navigation-refresh-wash {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes navigation-refresh-label {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.content {
  padding: 16px;
  border-radius: 6px;
  min-width: 0;
  overflow: hidden;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

h2,
h3,
h4 {
  margin: 0;
}

h2 {
  color: var(--blue-dark);
  font-size: 21px;
}

.searchbar {
  display: flex;
  gap: 8px;
}

.searchbar input {
  width: 260px;
}

.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 14px;
}

.table-wrap {
  min-height: calc(100vh - 190px);
  overflow: auto;
  border-radius: 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.freight-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

.freight-menu {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fafc;
}

.freight-menu button {
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  color: var(--blue-dark);
  font-weight: 900;
  text-align: left;
  padding: 0 12px;
}

.freight-menu button.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.freight-main {
  min-width: 0;
}

.freight-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.freight-summary div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.freight-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.freight-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--blue-dark);
  font-size: 20px;
}

.freight-summary .freight-rate-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.freight-rate-card label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--blue-dark);
  font-weight: 900;
}

.freight-rate-card input {
  width: 96px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 0 8px;
  font-weight: 900;
}

.freight-rate-card small {
  color: var(--muted);
  font-weight: 800;
}

.readonly-chip {
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef5fb;
  color: var(--blue-dark);
  border: 1px solid var(--line-strong);
  font-size: 12px;
  font-weight: 900;
}

.freight-table-wrap {
  max-height: calc(100vh - 260px);
}

.module-chip.danger {
  color: #9b2f24;
  border-color: #e4afa8;
  background: #fff2f0;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 38px;
  background: #f0f5f9;
  color: var(--blue-dark);
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 0 10px;
  white-space: nowrap;
}

td {
  min-height: 44px;
  border-bottom: 1px solid #e6edf3;
  padding: 8px 10px;
  vertical-align: top;
}

tbody tr {
  cursor: pointer;
}

tbody tr:hover {
  background: #f4f9fd;
}

tbody tr.selected {
  background: #fff7df;
}

tbody tr.locked {
  color: #748293;
  background: #f4f6f8;
}

small {
  color: var(--muted);
}

.bill-cell,
.track-cell {
  position: relative;
}

.bill-cell strong,
.track-cell strong {
  display: block;
}

.bill-cell:hover {
  background: #eaf3fb;
  color: var(--blue-dark);
}

.bill-cell:hover strong {
  text-decoration: underline;
}

.track-cell {
  color: var(--green);
}

.track-cell:hover {
  background: #e8f7f3;
}

.track-cell strong {
  color: var(--green);
}

.badge {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 5px;
  border-radius: 999px;
  background: #e7ebef;
  color: #697789;
  font-size: 11px;
}

.tag,
.tag-extra {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin: 0 4px 4px 0;
  padding: 0 8px;
  border: 1px solid #b8cadb;
  border-radius: 4px;
  background: linear-gradient(#fff, #edf5fb);
  color: var(--blue-dark);
  font-weight: 800;
}

.tag-extra {
  color: var(--muted);
  font-size: 12px;
}

.detail-panel {
  min-height: calc(100vh - 190px);
  max-height: calc(100vh - 190px);
  overflow: auto;
  border-radius: 4px;
}

.empty-detail,
.empty-cell {
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.detail-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.detail-head.full {
  position: static;
  border-radius: 6px 6px 0 0;
}

.detail-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mini-button {
  min-width: 72px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #78a5c8;
  border-bottom-color: #4f7798;
  border-radius: 5px;
  background: linear-gradient(#ffffff 0%, #e7f3fb 52%, #c8e1f4 100%);
  color: #174f78;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 0 #86aac4,
    0 7px 14px rgba(36, 85, 124, .14);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}

.mini-button:hover:not(:disabled) {
  border-color: #6599bf;
  border-bottom-color: #446f90;
  background: linear-gradient(#ffffff 0%, #eef8ff 48%, #d4ebfb 100%);
  filter: brightness(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #719ab8,
    0 10px 18px rgba(36, 85, 124, .18);
  transform: translateY(-2px);
}

.mini-button:active:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 #5f86a2, 0 4px 10px rgba(36, 85, 124, .13);
  transform: translateY(1px);
}

.mini-button.danger {
  border-color: #ca8d8d;
  border-bottom-color: #965a5a;
  background: linear-gradient(#fffafa 0%, #f8e1e1 52%, #e7bcbc 100%);
  color: #943333;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 0 #b97979,
    0 7px 14px rgba(127, 51, 51, .13);
}

.mini-button.danger:hover:not(:disabled) {
  border-color: #bd7777;
  border-bottom-color: #884d4d;
  background: linear-gradient(#fffdfd 0%, #fbe9e9 48%, #edc9c9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #a96b6b,
    0 10px 18px rgba(127, 51, 51, .17);
}

.mini-button:disabled {
  cursor: default;
  opacity: .48;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 0 rgba(95, 124, 150, .18);
}

.detail-head h3 {
  color: var(--blue-dark);
  font-size: 20px;
}

.write-badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: #edf4fa;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
}

.write-badge {
  border: 1px solid #9cc8b7;
  background: #edf9f4;
  color: #226a57;
}

.detail-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.detail-section h4 {
  margin-bottom: 10px;
  color: var(--blue-dark);
  font-size: 15px;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-title-row h4 {
  margin: 0;
}

.info-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  min-height: 28px;
  align-items: baseline;
}

.info-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.info-row strong {
  font-size: 13px;
}

.factory-list,
.download-list {
  display: grid;
  gap: 8px;
}

.factory-card,
.download-item {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f8fbfd;
}

.factory-card {
  display: grid;
  gap: 4px;
}

.download-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.factory-card strong {
  color: var(--blue-dark);
}

.download-item span {
  font-weight: 900;
  color: var(--green);
}

.download-item div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.download-item small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.download-action {
  min-width: 72px;
  min-height: 30px;
  flex: 0 0 auto;
}

.download-status {
  min-width: 72px;
  min-height: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b9c9d9;
  border-radius: 4px;
  background: linear-gradient(#f8fbff, #e7edf5);
  color: #53677d;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.generated-documents {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid #d6e5f1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 251, 255, .96)),
    radial-gradient(circle at top left, rgba(69, 141, 207, .11), transparent 46%);
  padding: 13px 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 16px 34px rgba(36, 73, 108, .08);
}

.generated-documents-title {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: #173e64;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.generated-documents-title::before {
  content: "";
  width: 5px;
  height: 20px;
  margin-right: 9px;
  border-radius: 999px;
  background: linear-gradient(#5fb4ec, #2178ba);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 0 0 4px rgba(47, 127, 193, .1);
}

.generated-document-list {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.generated-document-pill {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(86, 158, 165, .74);
  border-bottom-color: rgba(44, 122, 132, .9);
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eefaf9 48%, #dff2ef 100%);
  color: #123f47;
  padding: 0 13px 0 15px;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(57, 128, 133, .13),
    0 2px 0 rgba(105, 157, 162, .62),
    0 9px 18px rgba(24, 92, 100, .1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.generated-document-pill:hover {
  border-color: rgba(39, 139, 148, .9);
  border-bottom-color: rgba(24, 104, 114, .95);
  background:
    linear-gradient(180deg, #ffffff 0%, #e8fbf8 48%, #cfece7 100%);
  color: #075e66;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(57, 128, 133, .14),
    0 3px 0 rgba(78, 145, 151, .76),
    0 13px 22px rgba(24, 92, 100, .15);
}

.generated-document-pill span {
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.generated-document-pill small {
  min-width: 38px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(74, 150, 157, .4);
  border-radius: 999px;
  background: linear-gradient(#fbfffd, #e2f4f0);
  color: #3e767b;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.muted-text {
  color: var(--muted);
}

.fee-card-list {
  display: grid;
  gap: 12px;
}

.fee-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.fee-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #f7fafc;
  border-bottom: 1px solid var(--line);
}

.fee-card-head strong,
.fee-card-head span {
  display: block;
}

.fee-card-head strong {
  color: var(--blue-dark);
  font-size: 13px;
}

.fee-card-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.fee-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.table-action-link.danger {
  color: #ba3d3d;
}

.fee-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 0;
}

.fee-summary span {
  border: 1px solid #d8e3ec;
  border-radius: 3px;
  background: #f8fbfd;
  padding: 3px 8px;
  color: #324b63;
  font-weight: 900;
  font-size: 12px;
}

.mini-fee-table,
.fee-detail-edit-table {
  width: 100%;
  border-collapse: collapse;
}

.mini-fee-table {
  margin-top: 10px;
}

.mini-fee-table th,
.mini-fee-table td,
.fee-detail-edit-table th,
.fee-detail-edit-table td {
  border-top: 1px solid var(--line);
  padding: 7px 8px;
  text-align: left;
  font-size: 12px;
}

.mini-fee-table th,
.fee-detail-edit-table th {
  background: #f5f8fb;
  color: #556b80;
  font-weight: 900;
}

.fee-edit-dialog {
  width: min(1120px, calc(100vw - 44px));
}

.fee-edit-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0;
}

.fee-detail-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
}

.fee-detail-edit-table input,
.fee-detail-edit-table select {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 0 6px;
}

.factory-fee-lock {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #c8d8e7;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #eef6fd);
  color: #244a70;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.factory-fee-card {
  border-left: 4px solid #488bc1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 251, 255, .98)),
    radial-gradient(circle at top right, rgba(43, 126, 190, .1), transparent 42%);
}

.factory-fee-card.confirmed {
  border-left-color: #52a982;
}

.factory-fee-card .fee-card-head strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.factory-fee-card .fee-card-head strong em {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid #f0c8c8;
  border-radius: 999px;
  background: #fff7f7;
  color: #bd3d3d;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.factory-fee-expand-button {
  min-width: 86px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #91b4d1;
  border-bottom-color: #5d8db5;
  border-radius: 999px;
  background: linear-gradient(#ffffff 0%, #e9f3fc 54%, #d5e8f7 100%);
  color: #24567f;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 2px 0 #9bbbd5, 0 6px 12px rgba(29, 83, 124, .1);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.factory-fee-expand-button:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 3px 0 #80a8ca, 0 9px 16px rgba(29, 83, 124, .14);
}

.factory-fee-details {
  display: none;
}

.factory-fee-card.is-expanded .factory-fee-details {
  display: block;
}

.fee-state-red {
  color: #c93d3d !important;
  border-color: #efc5c5 !important;
  background: #fff6f6 !important;
}

.edit-dialog.factory-fee-edit-dialog {
  width: min(1150px, calc(100vw - 34px));
  max-height: calc(100vh - 34px);
}

.factory-fee-form {
  display: grid;
  gap: 14px;
}

.factory-fee-edit-dialog > .factory-fee-form {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
  grid-auto-rows: max-content;
}

.factory-fee-legacy-form {
  background: #eaf3fb;
  padding: 14px 18px 22px;
}

.factory-fee-legacy-form .process-form-error {
  position: sticky;
  top: 0;
  z-index: 8;
  border: 1px solid #e3a5a5;
  border-left: 5px solid #c94c4c;
  background: #fff7f7;
  color: #922f2f;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.65;
  white-space: pre-line;
  height: fit-content;
  max-height: 180px;
  overflow-y: auto;
  box-shadow: 0 6px 18px rgba(117, 35, 35, .12);
}

.factory-fee-edit-dialog > .edit-actions {
  position: static;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  border-top: 1px solid #b9cee2;
  background: rgba(239, 247, 253, .96);
  backdrop-filter: blur(8px);
  box-shadow: 0 -8px 18px rgba(24, 64, 101, .08);
}

.factory-fee-edit-dialog > .edit-actions button {
  min-width: 112px;
  min-height: 36px;
  border: 1px solid #9dbbd8;
  border-radius: 5px;
  background: linear-gradient(#ffffff, #e8f2fb);
  color: #17466f;
  font-size: 14px;
  font-weight: 1000;
}

.factory-fee-edit-dialog > .edit-actions .primary {
  border-color: #2f78b5;
  background: linear-gradient(#5eb0e2, #236fa9);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 3px 0 #185584;
}

.factory-fee-paper {
  border: 1px solid #a9c3df;
  background: linear-gradient(#ffffff, #f8fbff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 28px rgba(29, 67, 103, .1);
  color: #173b5e;
  padding: 14px 16px 18px;
}

.factory-fee-letterhead {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 16px;
  align-items: center;
}

.factory-fee-logo {
  width: 88px;
  height: 58px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f9fbff, #e7f1fb);
  border: 1px solid #b8cde3;
  color: #174d83;
  font-size: 26px;
  font-weight: 1000;
  letter-spacing: .04em;
}

.factory-fee-letterhead strong {
  display: block;
  font-size: 18px;
  font-weight: 1000;
  color: #153c62;
}

.factory-fee-letterhead span {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 900;
}

.factory-fee-letterhead em {
  display: block;
  margin-top: 3px;
  color: #54708a;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.factory-fee-adv {
  margin: 8px 0 12px 128px;
  color: #d64f4f;
  font-size: 15px;
  font-weight: 1000;
  font-style: italic;
}

.factory-fee-control-row,
.factory-fee-invoice-line,
.factory-fee-meta-grid,
.factory-fee-bank-line,
.factory-fee-date-line {
  display: grid;
  gap: 10px 14px;
  align-items: center;
}

.factory-fee-control-row {
  grid-template-columns: 250px 130px 1fr 120px;
  padding: 10px 0;
  border-top: 1px solid #c8d9ea;
  border-bottom: 1px solid #c8d9ea;
}

.factory-fee-control-row label,
.factory-fee-invoice-line label,
.factory-fee-meta-grid label,
.factory-fee-bank-line label,
.factory-fee-date-line label,
.factory-fee-mail-section label.base-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #244b70;
  font-size: 12px;
  font-weight: 900;
}

.factory-fee-control-row label > span,
.factory-fee-invoice-line label > span,
.factory-fee-meta-grid label > span,
.factory-fee-bank-line label > span,
.factory-fee-date-line label > span {
  white-space: nowrap;
}

.factory-fee-control-row input,
.factory-fee-control-row select,
.factory-fee-invoice-line select,
.factory-fee-meta-grid input,
.factory-fee-meta-grid select,
.factory-fee-bank-line select,
.factory-fee-date-line input,
.factory-fee-mail-section input,
.factory-fee-mail-section textarea {
  min-height: 32px;
  border: 1px solid #a9c3df;
  border-radius: 4px;
  background: linear-gradient(#fff, #f8fbff);
  color: #153b60;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 800;
  min-width: 0;
}

.factory-fee-control-row select,
.factory-fee-import input,
.factory-fee-invoice-line select,
.factory-fee-date-line input[name="name"],
.factory-fee-mail-section input,
.factory-fee-mail-section textarea {
  width: 100%;
}

.factory-fee-import {
  position: relative;
}

.factory-fee-autocomplete-menu {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #9fbad6;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(28, 69, 110, .18);
  padding: 4px;
}

.factory-fee-autocomplete-menu button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #173f66;
  padding: 7px 9px;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
}

.factory-fee-autocomplete-menu button:hover {
  background: linear-gradient(#eef7ff, #dcecff);
  color: #0f4f8d;
}

.factory-fee-import-status {
  margin-top: 5px;
  min-height: 18px;
  color: #1b6b37;
  font-size: 12px;
  font-weight: 900;
}

.factory-fee-detail-edit-table.factory-fee-import-flash {
  animation: factoryFeeImportFlash 1.3s ease-out;
}

@keyframes factoryFeeImportFlash {
  0% {
    box-shadow: 0 0 0 4px rgba(43, 132, 215, .28);
  }
  100% {
    box-shadow: none;
  }
}

.factory-fee-switch {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 7px !important;
  min-width: 0;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.factory-fee-switch input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}

.factory-fee-switch-track {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  width: 38px;
  height: 22px;
  padding: 2px;
  border: 1px solid #9db7d1;
  border-radius: 999px;
  background: #c9d8e7;
  box-shadow: inset 0 1px 2px rgba(33, 69, 105, .2);
  transition: background .18s ease, border-color .18s ease;
}

.factory-fee-switch-track span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(19, 55, 89, .35);
  transform: translateX(0);
  transition: transform .18s ease;
}

.factory-fee-switch input:checked + .factory-fee-switch-track {
  border-color: #1889c3;
  background: #1fa2db;
}

.factory-fee-switch input:checked + .factory-fee-switch-track span {
  transform: translateX(16px);
}

.factory-fee-switch input:focus-visible + .factory-fee-switch-track {
  outline: 2px solid #1a83bd;
  outline-offset: 2px;
}

.factory-fee-switch b {
  color: #244b70;
  font-size: 12px;
  font-weight: 900;
}

.factory-fee-radio-title input,
.factory-fee-radio-group input {
  min-height: auto;
  width: auto;
}

.factory-fee-big-title {
  margin: 16px 0 10px;
  text-align: center;
  color: #153b60;
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: .08em;
}

.factory-fee-big-title.debit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.factory-fee-big-title.debit > span {
  flex: 0 0 auto;
  margin: 0 8px;
}

.factory-fee-rate {
  min-width: 170px;
  color: #b44a4a;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  text-align: right;
}

.factory-fee-rate.updated {
  min-width: 230px;
  color: #6e8194;
  text-align: left;
}

.factory-fee-line-add {
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid #9dbbd8;
  border-radius: 4px;
  background: linear-gradient(#fff, #eaf3fc);
  color: #17466f;
  font-size: 12px;
  font-weight: 1000;
  box-shadow: 0 2px 0 #bad0e4;
}

.factory-fee-invoice-line {
  grid-template-columns: minmax(420px, 1fr) minmax(260px, .75fr);
  margin-bottom: 8px;
}

.factory-fee-taxpayer-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 32px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid #a9c3df;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #f8fbff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

.factory-fee-taxpayer-field > span {
  color: #456985;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.factory-fee-taxpayer-field > strong {
  min-width: 0;
  overflow: hidden;
  color: #102f4f;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.factory-fee-invoice-info {
  display: flex;
  gap: 8px;
  min-height: 24px;
  align-items: baseline;
  color: #244b70;
  font-size: 13px;
  font-weight: 900;
}

.factory-fee-invoice-info strong,
.factory-fee-invoice-line strong {
  color: #102f4f;
  font-size: 13px;
}

.factory-fee-meta-grid {
  grid-template-columns: minmax(380px, 1fr) minmax(260px, .8fr);
  margin-top: 16px;
}

.factory-fee-meta-grid > div {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #244b70;
  font-size: 13px;
  font-weight: 900;
}

.factory-fee-inline-label input.short {
  width: 76px;
  flex: 0 0 76px;
}

.factory-fee-inline-label input:not(.short) {
  max-width: 190px;
}

.factory-fee-cargo-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.factory-fee-cargo-line input.tiny {
  width: 72px;
  flex: 0 0 72px;
}

.factory-fee-cargo-line input.small {
  width: 88px;
  flex: 0 0 88px;
}

.factory-fee-cargo-line select {
  width: 112px;
  flex: 0 0 112px;
}

.factory-fee-cargo-line b,
.factory-fee-cargo-line em {
  color: #254b70;
  font-style: normal;
  font-weight: 1000;
}

.factory-fee-remark {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin-top: 14px;
  color: #244b70;
  font-size: 13px;
  font-weight: 900;
}

.factory-fee-remark textarea {
  min-height: 58px;
  border: 1px solid #a9c3df;
  border-radius: 4px;
  padding: 8px;
  color: #153b60;
  font-weight: 800;
}

.factory-fee-detail-edit-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.factory-fee-detail-table-wrap {
  overflow: hidden;
}

.factory-fee-detail-edit-table th,
.factory-fee-detail-edit-table td {
  border: 1px solid #bad0e4;
  padding: 5px;
}

.factory-fee-detail-edit-table th {
  color: #153b60;
  background: linear-gradient(#f7fbff, #e7f1fb);
}

.factory-fee-detail-edit-table input,
.factory-fee-detail-edit-table select {
  min-height: 30px;
  border-color: #a9c3df;
  background: #fff;
  color: #153b60;
  font-weight: 800;
}

.factory-fee-detail-edit-table .factory-fee-amount {
  background: #eef4fa;
}

.factory-fee-invoice-type.is-usd-locked {
  color: #777;
  background: #eee;
  pointer-events: none;
}

.factory-fee-invoice-type.is-non-invoice-locked {
  color: #496c84;
  background: linear-gradient(#f4f8fb, #e5eef5);
  border-color: #b9cddd;
  cursor: not-allowed;
}

/* Only emphasize the selected 6% tax label; never tint the fee row or amount. */
.factory-fee-detail-edit-table .factory-fee-invoice-type.is-six-percent {
  color: #c62828;
  font-weight: 1000;
}

.factory-fee-tax-policy-note {
  flex: 1 1 290px;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid #a9c7dc;
  border-radius: 4px;
  background: #f3f8fc;
  color: #315f7e;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.factory-fee-detail-edit-table .factory-fee-row-actions {
  padding-left: 3px !important;
  padding-right: 3px !important;
  text-align: center;
  font-size: 0;
  white-space: nowrap;
}

.factory-fee-row-actions button {
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  margin-right: 1px;
  padding: 0;
  border: 1px solid #9dbbd8;
  border-radius: 3px;
  background: linear-gradient(#fff, #edf5fc);
  color: #17466f;
  font-size: 12px;
  line-height: 18px;
  font-weight: 1000;
}

.factory-fee-detail-edit-table .factory-fee-type-name,
.factory-fee-detail-edit-table .factory-fee-row-remark {
  width: 100%;
}

.factory-fee-detail-edit-table .factory-fee-currency {
  width: 64px;
  min-width: 64px;
  padding-left: 5px;
  padding-right: 4px;
}

.factory-fee-detail-edit-table .factory-fee-invoice-type {
  width: 82px;
  min-width: 82px;
  padding-left: 4px;
  padding-right: 4px;
}

.factory-fee-subtotals {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.factory-fee-subtotals div {
  display: grid;
  grid-template-columns: 185px 1fr;
  align-items: baseline;
  color: #244b70;
  font-size: 13px;
  font-weight: 900;
}

.factory-fee-subtotals strong {
  color: #d65050;
  font-size: 16px;
}

.factory-fee-subtotals .total strong {
  font-size: 19px;
}

.factory-fee-bank-line {
  grid-template-columns: minmax(300px, 430px) 1fr;
  padding-top: 10px;
  border-top: 1px solid #c8d9ea;
}

.factory-fee-radio-group {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  color: #244b70;
  font-size: 13px;
  font-weight: 900;
}

.factory-fee-radio-group .disabled {
  color: #999;
}

.factory-fee-notes {
  margin-top: 16px;
  border: 1px solid #efc5c5;
  border-radius: 5px;
  background: #fff8f8;
  padding: 10px 12px;
  color: #884040;
}

.factory-fee-notes strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 1000;
}

.factory-fee-notes p {
  margin: 3px 0;
  font-size: 12px;
  font-weight: 800;
}

.factory-fee-date-line {
  grid-template-columns: 1fr 260px;
  margin-top: 14px;
}

.factory-fee-mail-section {
  display: grid;
  gap: 10px;
  border: 1px solid #b9cee2;
  background: linear-gradient(#f8fbff, #eef6fd);
  padding: 12px 14px;
}

.factory-fee-mail-section .base-field {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 8px;
}

.factory-fee-mail-section .base-field.wide textarea {
  min-height: 120px;
}

.factory-fee-radio-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #153b60;
  font-size: 13px;
  font-weight: 1000;
}

.factory-fee-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.factory-fee-invoice-preview textarea {
  min-height: 68px;
  background: #f8fbff;
}

.factory-fee-detail-edit-table th:nth-child(1) { width: 22.5%; }
.factory-fee-detail-edit-table th:nth-child(2) { width: 6.5%; }
.factory-fee-detail-edit-table th:nth-child(3) { width: 9.5%; }
.factory-fee-detail-edit-table th:nth-child(4) { width: 9.5%; }
.factory-fee-detail-edit-table th:nth-child(5) { width: 10.5%; }
.factory-fee-detail-edit-table th:nth-child(6) { width: 8.5%; }
.factory-fee-detail-edit-table th:nth-child(7) { width: 23%; }
.factory-fee-detail-edit-table th:nth-child(8) { width: 10%; }

.text-input-modal-field {
  margin-top: 12px;
}

.text-input-modal-field textarea {
  min-height: 92px;
}

@media (max-width: 900px) {
  .factory-fee-form-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

.timeline {
  display: grid;
  gap: 8px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 10px;
  border-left: 3px solid var(--blue);
  background: #f8fbfd;
}

.timeline-item.sub {
  margin-left: 14px;
  border-left-color: var(--gold);
  background: #fffaf0;
}

.timeline-item.timeline-text-imp {
  border-left-color: #d94c4c;
  background: linear-gradient(180deg, #fff8f8 0%, #fff1f1 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(168, 54, 54, .08);
}

.timeline-item.timeline-text-imp span {
  color: #c73d3d;
  font-weight: 950;
}

.timeline-detail-line {
  display: block;
  margin-top: 4px;
  color: #52677d;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.timeline-item.timeline-text-imp .timeline-detail-line {
  color: #9b2f2f;
}

.timeline-item time {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.timeline-item time.timeline-ship-departed-time {
  color: #c73d3d;
  font-weight: 950;
}

.timeline .order-flow-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 14px;
  vertical-align: middle;
}

.timeline .order-flow-action {
  min-width: 56px;
  min-height: 26px;
  padding: 0 11px;
  border: 1px solid #8fb0d0;
  border-bottom-color: #5f85ad;
  border-radius: 4px;
  background: linear-gradient(#ffffff 0%, #e8f3ff 48%, #c6dcf4 100%);
  color: #17436e;
  font-size: 12px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 0 #8aadd0,
    0 6px 12px rgba(20,62,102,.12);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.timeline .order-flow-action:hover {
  transform: translateY(-1px);
  border-color: #6f9bc7;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 3px 0 #779fc7,
    0 9px 16px rgba(20,62,102,.16);
}

/* Customer-portal style order list structure */
.workarea {
  position: relative;
  --detail-width: min(980px, calc(100vw - 44px));
}

.workarea.detail-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(238, 243, 247, .36), rgba(204, 216, 228, .58)),
    rgba(31, 45, 61, .08);
}

.list-pane,
.detail-panel {
  border: 1px solid var(--line);
  background: var(--panel);
}

.list-pane {
  min-height: calc(100vh - 170px);
  min-width: 0;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.main-grid {
  display: block;
}

.detail-panel {
  display: none;
  position: fixed;
  z-index: 24;
  top: 86px;
  right: 22px;
  bottom: 22px;
  width: var(--detail-width);
  min-height: 0;
  max-height: none;
  height: auto;
  overflow: hidden auto;
  border: 1px solid #7f98b2;
  border-radius: 0;
  background: #f5f8fb;
  box-shadow:
    0 30px 72px rgba(18, 34, 52, .30),
    0 12px 24px rgba(31, 48, 68, .16),
    0 0 0 4px rgba(255, 255, 255, .72);
}

.workarea.detail-open .detail-panel {
  display: block;
}

.search-form {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #f8fbfd;
}

.order-search-main,
.order-search-extra {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.order-search-extra {
  flex-wrap: wrap;
}

.order-condition-select {
  width: 82px !important;
}

.order-condition-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.order-condition-group.hidden {
  display: none;
}

.order-search-extra label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #34516d;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.search-form select,
.search-form input {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  padding: 0 9px;
  outline: 0;
}

.search-form select {
  width: 138px;
  flex: 0 0 auto;
}

.search-form #searchInput {
  width: 100%;
  flex: 0 0 auto;
}

.order-search-box {
  position: relative;
  width: 300px;
  flex: 0 0 auto;
}

.order-search-suggest {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  z-index: 40;
  width: min(460px, 72vw);
  max-height: 320px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #9fb9d2;
  border-radius: 6px;
  background: #fff;
  box-shadow:
    0 18px 38px rgba(27, 57, 87, .18),
    0 4px 12px rgba(37, 74, 110, .12);
}

.order-search-suggest.hidden {
  display: none;
}

.search-form .order-search-suggest button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #183654;
  text-align: left;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.search-form .order-search-suggest button:hover,
.search-form .order-search-suggest button.active {
  border-color: #8ab6dc;
  background: linear-gradient(#f5fbff, #e5f2ff);
  box-shadow: inset 3px 0 0 #2e86cf;
}

.search-form .order-search-suggest button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-form .order-search-suggest button em {
  color: #607b94;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.order-search-suggest-empty {
  padding: 10px 12px;
  color: #607b94;
  font-size: 12px;
  font-weight: 850;
}

.search-form #orderLoadingPortInput,
.search-form #orderDestinationPortInput {
  width: 112px;
}

.search-form #orderStartEtdInput,
.search-form #orderEndEtdInput {
  width: 132px;
}

.date-click-field {
  cursor: pointer;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  position: relative;
  cursor: pointer;
  color-scheme: light;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  position: absolute;
  inset: 0;
}

/* Keep an empty WebKit date/time field visually empty.  A shared script adds
   this class from the real input value; it never writes a business date. */
input.native-date-time-empty,
input.native-date-time-empty::-webkit-datetime-edit,
input.native-date-time-empty::-webkit-datetime-edit-fields-wrapper,
input.native-date-time-empty::-webkit-datetime-edit-text,
input.native-date-time-empty::-webkit-datetime-edit-month-field,
input.native-date-time-empty::-webkit-datetime-edit-day-field,
input.native-date-time-empty::-webkit-datetime-edit-year-field,
input.native-date-time-empty::-webkit-datetime-edit-hour-field,
input.native-date-time-empty::-webkit-datetime-edit-minute-field,
input.native-date-time-empty::-webkit-datetime-edit-ampm-field {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Safari exposes an editable hour/minute spinner even while an empty time
   field is painted with its placeholder value.  Keep the empty blur state,
   but reveal the native segments on focus so the cursor and typed digits are
   never visually swallowed. */
input[type="time"].native-date-time-empty:focus,
input[type="datetime-local"].native-date-time-empty:focus,
input[type="time"].native-date-time-empty:focus::-webkit-datetime-edit,
input[type="datetime-local"].native-date-time-empty:focus::-webkit-datetime-edit,
input[type="time"].native-date-time-empty:focus::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"].native-date-time-empty:focus::-webkit-datetime-edit-fields-wrapper,
input[type="time"].native-date-time-empty:focus::-webkit-datetime-edit-text,
input[type="datetime-local"].native-date-time-empty:focus::-webkit-datetime-edit-text,
input[type="time"].native-date-time-empty:focus::-webkit-datetime-edit-hour-field,
input[type="datetime-local"].native-date-time-empty:focus::-webkit-datetime-edit-hour-field,
input[type="time"].native-date-time-empty:focus::-webkit-datetime-edit-minute-field,
input[type="datetime-local"].native-date-time-empty:focus::-webkit-datetime-edit-minute-field {
  color: #17324d !important;
  -webkit-text-fill-color: #17324d !important;
}

/* Shared HH:mm editor.  This deliberately mirrors the ship-schedule modal:
   two compact numeric segments, auto-jump from hour to minute, and the same
   valid-range presentation.  The original native field is retained hidden
   underneath as the form/API source of truth. */
.shared-time-input-control {
  position: relative;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: inline-grid;
  grid-template-columns: minmax(0, 84px);
  gap: 4px;
  vertical-align: top;
}

.shared-date-time-input-control {
  grid-template-columns: minmax(0, 1fr) minmax(0, 84px);
  width: min(100%, 286px);
  column-gap: 8px;
}

.shared-time-input-date {
  min-width: 0;
  width: 100%;
}

.shared-time-input-segments {
  width: 84px;
  max-width: 100%;
  box-sizing: border-box;
  height: var(--shared-time-height, 44px);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 29px) 8px minmax(0, 29px);
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0 4px;
  border: 1px solid #b8ccdc;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 56%, #f0f5f9 100%);
  box-shadow: inset 0 1px 1px rgba(30, 59, 82, .045), 0 2px 0 rgba(164, 185, 200, .42), 0 6px 12px rgba(42, 76, 102, .055);
}

.shared-time-input-control:focus-within .shared-time-input-segments {
  border-color: #397dad;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(57, 125, 173, .13), 0 3px 0 rgba(57, 105, 139, .25), 0 9px 18px rgba(42, 89, 123, .1);
  transform: translateY(-1px);
}

.shared-time-input-control.invalid .shared-time-input-segments,
.shared-time-input-control.invalid:focus-within .shared-time-input-segments {
  border-color: #cc5148;
  background: linear-gradient(180deg, #fff 0%, #fff5f3 100%);
  box-shadow: 0 0 0 3px rgba(204, 81, 72, .13), 0 3px 0 rgba(174, 62, 53, .22), 0 9px 18px rgba(151, 52, 46, .09);
}

.shared-time-input-control .shared-time-input-segments > input.shared-time-input-segment {
  width: 100%;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #17324d;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
}

.shared-time-input-segments .shared-time-input-segment::placeholder {
  color: #9cacb8;
  font-weight: 700;
}

.shared-time-input-segments i {
  color: #4e718b;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.shared-time-input-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

.shared-time-input-error {
  grid-column: 1 / -1;
  color: #ba413a;
  font-size: 12px;
  line-height: 1.35;
}

.native-date-picker-fallback {
  position: fixed;
  z-index: 24000;
  width: 280px;
  box-sizing: border-box;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #a9c4d8;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(35, 79, 111, 0.22), 0 2px 7px rgba(35, 79, 111, 0.14);
  color: #21445f;
}

.employee-calendar-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #d8e5ef;
}
.employee-calendar-shortcuts button {
  min-width: 0;
  height: 32px;
  padding: 0 6px;
  border: 1px solid #9abed9;
  border-radius: 5px;
  background: linear-gradient(#fff, #edf6fc);
  color: #24638f;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.employee-calendar-shortcuts button:disabled {
  background: #f3f5f7;
  border-color: #dae2e9;
  color: #a1aebb;
  cursor: not-allowed;
}
.employee-calendar-clear {
  display: block;
  margin: 8px 0 0 auto;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #58768c;
  font-size: 12px;
  cursor: pointer;
}
.native-date-picker-fallback button:focus-visible { outline: 2px solid #2879b3; outline-offset: 1px; }

.native-date-picker-fallback.hidden {
  display: none;
}

.native-date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.native-date-picker-header strong {
  color: #214d70;
  font-size: 14px;
  font-weight: 850;
}

.native-date-picker-header button {
  display: grid;
  width: 30px;
  height: 28px;
  place-items: center;
  border: 1px solid #b8cddd;
  border-radius: 6px;
  background: #f7fbfe;
  color: #276187;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.native-date-picker-header button:hover {
  border-color: #6d9fc1;
  background: #eaf4fb;
}

.native-date-picker-weekdays,
.native-date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.native-date-picker-weekdays {
  margin-bottom: 5px;
}

.native-date-picker-weekdays span {
  color: #71879a;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.native-date-picker-empty,
.native-date-picker-day {
  height: 30px;
}

.native-date-picker-day {
  border: 1px solid transparent;
  border-radius: 6px;
  background: #f5f9fc;
  color: #25445d;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.native-date-picker-day:hover {
  border-color: #80b0cf;
  background: #e8f4fb;
}

.native-date-picker-day.today {
  border-color: #6ca8cd;
  color: #1b6e9f;
}

.native-date-picker-day.selected {
  border-color: #176da3;
  background: #2d79ad;
  color: #ffffff;
}

.native-date-picker-day:disabled,
.native-date-picker-day.disabled {
  background: #f3f5f7;
  color: #b1bec8;
  cursor: not-allowed;
}

.date-click-field input[type="date"] {
  cursor: pointer;
  color-scheme: light;
}

.date-click-field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  position: absolute;
  inset: 0;
}

.date-click-field input[type="time"]::-webkit-calendar-picker-indicator,
.date-click-field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  position: absolute;
  inset: 0;
}

.date-click-field input[type="date"] {
  position: relative;
}

.search-form #orderOperatorSelect,
.search-form #orderSalesSelect {
  width: 104px;
}

.order-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
}

.search-form button {
  height: 34px;
  border: 1px solid var(--blue-dark);
  border-radius: 3px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
}

.switches {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  color: #1f3044;
  font-size: 13px;
  font-weight: 800;
}

.switches label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.order-count-tools {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.switches strong {
  color: var(--blue);
}

.order-flow-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 48px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #eef4f9;
}

.order-flow-track {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.order-flow-support-track {
  padding-top: 8px;
  border-top: 1px solid #cfdeeb;
}

.order-flow-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 10px;
  border: 1px solid #9db8d0;
  border-bottom-color: #7799b8;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 48%, #e8f0f7 100%);
  color: #244d73;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 0 #c0d1df,
    0 5px 10px rgba(39, 76, 109, .08);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.order-flow-filter.is-primary {
  min-width: 118px;
}

.order-flow-filter.is-support {
  min-height: 32px;
  padding-inline: 11px;
  color: #49647d;
  background: linear-gradient(180deg, #ffffff 0%, #f2f6f9 100%);
}

.order-flow-filter:hover {
  border-color: #4f87b4;
  border-bottom-color: #2d6c9d;
  background: linear-gradient(180deg, #ffffff 0%, #edf7ff 48%, #dcecf8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 3px 0 #9bb9d0,
    0 8px 15px rgba(39, 76, 109, .14);
  transform: translateY(-1px);
}

.order-flow-filter.active {
  border-color: #145f96;
  border-bottom-color: #0c4773;
  background: linear-gradient(180deg, #428ec4 0%, #1f70aa 52%, #155b8e 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 3px 0 #0d4c78,
    0 8px 15px rgba(20, 83, 127, .2);
  transform: translateY(-1px);
}

.order-flow-stage {
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 21px;
  border: 1px solid #b5c9da;
  border-radius: 50%;
  background: #e6eff6;
  color: #315f84;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.order-flow-filter.active .order-flow-stage {
  border-color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.order-flow-label {
  letter-spacing: 0;
}

.order-flow-count {
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: #b94f5b;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(91, 39, 46, .16);
}

.order-flow-filter.active .order-flow-count {
  background: #fff;
  color: #175f92;
  box-shadow: 0 1px 3px rgba(8, 47, 75, .2);
}

.ios-switch-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #53677c;
  font-size: 12px;
  font-weight: 700;
  user-select: none;
}

.ios-switch-label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ios-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #c9d3df;
  box-shadow:
    inset 0 1px 3px rgba(26, 42, 58, .24),
    0 1px 0 rgba(255, 255, 255, .82);
  transition: background .18s ease, box-shadow .18s ease;
}

.ios-switch::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 2px 6px rgba(17, 34, 51, .28),
    0 0 0 1px rgba(76, 98, 120, .10);
  transition: transform .18s ease;
}

.ios-switch-label input:checked + .ios-switch {
  background: #2f6db0;
  box-shadow:
    inset 0 1px 3px rgba(20, 52, 86, .26),
    0 0 0 2px rgba(47, 109, 176, .14);
}

.ios-switch-label input:checked + .ios-switch::after {
  transform: translateX(18px);
}

.legacy-table-wrap {
  width: 100%;
  overflow: auto;
}

/* 工厂账单在待收款和已收款状态下会显示不同数量的业务列。
   横向滚动必须由表格自己的轨道承担，否则 body 的横向保护会直接裁掉右侧列。 */
.legacy-table-wrap.factory-fee-list-table-wrap {
  width: 100%;
  max-width: 100%;
  max-height: none;
  min-height: 0;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #7fa6c3 #eaf1f6;
  scrollbar-width: auto;
}

.legacy-table-wrap.factory-fee-list-table-wrap::-webkit-scrollbar {
  height: 12px;
}

.legacy-table-wrap.factory-fee-list-table-wrap::-webkit-scrollbar-track {
  border-top: 1px solid #d5e1ea;
  background: #eaf1f6;
}

.legacy-table-wrap.factory-fee-list-table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid #eaf1f6;
  border-radius: 999px;
  background: #7fa6c3;
}

.legacy-order-table {
  width: 100%;
  min-width: 1500px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.legacy-order-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 36px;
  background: var(--blue);
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, .22);
  padding: 0 9px;
  text-align: left;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.legacy-order-table th:first-child {
  border-left: 0;
}

.legacy-order-table th:nth-child(1) { width: 54px; }
.legacy-order-table th:nth-child(2) { width: 178px; }
.legacy-order-table th:nth-child(3) { width: 168px; }
.legacy-order-table th:nth-child(4) { width: 178px; }
.legacy-order-table th:nth-child(5) { width: 126px; }
.legacy-order-table th:nth-child(6) { width: 126px; }
.legacy-order-table th:nth-child(7) { width: 116px; }
.legacy-order-table th:nth-child(8) { width: 116px; }
.legacy-order-table th:nth-child(9) { width: 230px; }
.legacy-order-table th:nth-child(10) { width: 112px; }
.legacy-order-table th:nth-child(11) { width: 150px; }
.legacy-order-table th:nth-child(12) { width: 130px; }
.legacy-order-table th:nth-child(13) { width: 150px; }
.legacy-order-table th:nth-child(14) { width: 126px; }

/* Keep these widths semantic because supplier search inserts three columns
   before the operator and dynamic columns. Transport gains 17px (about 15%)
   from operator, so the table's overall width and the dynamic column stay put. */
#orderView .legacy-order-table th.order-transport-col { width: 132px; }
#orderView .legacy-order-table th.order-operator-col { width: 95px; }
#orderView .legacy-order-table th.order-dynamic-col { width: 150px; }

.legacy-order-table td {
  position: relative;
  min-height: 58px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid #cbd9e6;
  padding: 0;
  vertical-align: top;
  overflow: hidden;
}

.legacy-order-table td::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(225, 236, 246, .74), rgba(239, 246, 252, .64));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s ease;
  pointer-events: none;
}

.legacy-order-table td > * {
  position: relative;
  z-index: 1;
}

.legacy-order-table tr {
  background: #fff;
  cursor: default;
  transition: box-shadow .16s ease;
}

.legacy-order-table tr:nth-child(even) {
  background: #fbfdfe;
}

.legacy-order-table tr:hover td::before {
  transform: scaleX(1);
}

.legacy-order-table .bill-no-td:hover::before {
  background: linear-gradient(90deg, rgba(196, 221, 247, .96), rgba(222, 238, 252, .9));
}

.legacy-order-table .cargo-track-td:hover::before {
  background: linear-gradient(90deg, rgba(188, 218, 250, .98), rgba(211, 232, 252, .95));
}

.legacy-order-table .cargo-track-td:hover .cargo-track-link {
  border-color: #6ea8df;
  background: #d4e9ff;
  color: #0b4f96;
  box-shadow: 0 3px 8px rgba(11, 79, 150, .14);
}

.legacy-order-table tr.active {
  background: #fff1bf;
  box-shadow: inset 5px 0 0 #c88718;
}

.legacy-order-table tr.active td::before {
  background: #fff1bf;
  transform: scaleX(1);
}

.legacy-order-table tr.client-locked-row {
  background: #eef2f5;
}

.legacy-order-table tr.client-locked-row:nth-child(even) {
  background: #e9eef3;
}

.locked-divider td {
  height: 32px;
  background: #e1e8ef;
  color: #657487;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.locked-divider td::before {
  display: none;
}

.locked-divider span {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f6f9fb;
}

.thdxxdiv {
  min-height: 64px;
  width: 100%;
  color: #1d2c3a;
  padding: 11px 9px;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.date-text {
  color: #223c55;
  font-weight: 700;
  white-space: nowrap;
  -webkit-font-smoothing: auto;
  text-rendering: auto;
}

.date-alert {
  color: #d84949;
}

.original-ship-date {
  display: block;
  color: #8e9eb0;
  font-style: italic;
  font-weight: 700;
}

.order-badge-row {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.order-flow-row-context {
  max-width: 118px;
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  overflow: hidden;
  border: 1px solid #bed5e5;
  border-radius: 999px;
  background: #eef7fc;
  color: #44708d;
  padding: 0 6px;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-spec-icon {
  display: inline-block;
  width: 24px;
  height: 14px;
  object-fit: contain;
  flex: 0 0 auto;
}

.order-locked .order-spec-icon {
  opacity: .5;
}

.order-mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 900;
  line-height: 18px;
  letter-spacing: 0;
}

.order-mini-badge.service-3h {
  border: 1px solid #ddb45b;
  background: #fff5d9;
  color: #7a520d;
}

.order-event-cell {
  color: #284560;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.order-event-cell.event-alert {
  color: #d03434;
  font-weight: 900;
}

.select-col .thdxxdiv,
td.select-col {
  text-align: center;
}

.order-index-td .thdxxdiv {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 7px;
}

.order-index-td span {
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid #c5d4e2;
  border-radius: 999px;
  background: linear-gradient(#fff, #edf4fa);
  color: #4c6074;
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(35, 61, 88, .08);
}

td.select-col input {
  margin: 7px auto 3px;
}

td.select-col span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

td.order-index-td span {
  display: inline-flex;
  color: #4c6074;
  font-size: 13px;
  font-weight: 900;
}

.bill-no-link {
  color: #174f91;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-size: 15px;
  white-space: nowrap;
}

.legacy-order-table .bill-no-td:hover .bill-no-link {
  color: #0f3f7d;
  text-decoration-thickness: 2px;
}

.locked-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-left: 6px;
  border: 1px solid #b6c3cf;
  border-radius: 999px;
  background: #fff;
  color: #5f6c79;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 900;
  vertical-align: 1px;
}

.archived-badge {
  border-color: #c7b17a;
  background: #fff8e4;
  color: #7d5b13;
}

.factory-primary,
.port-chip,
.list-value-chip {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid #b7cadd;
  border-bottom-color: #98b1ca;
  border-radius: 4px;
  background: linear-gradient(#fff, #edf4fa);
  color: #24384e;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  overflow: visible;
  overflow-wrap: break-word;
  white-space: normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(35, 61, 88, .12);
}

.base-short-name-chip {
  min-height: 26px;
  display: inline-block;
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid #a9c2d8;
  border-left: 4px solid #5d96bd;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #edf6fc);
  color: #163f60;
  font-size: 13px;
  font-weight: 900;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(95, 124, 150, .14);
}

.base-company-name-card {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 6px 12px 6px 14px;
  border: 1px solid #c2d3e2;
  border-left: 4px solid #6f94bd;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(47, 95, 159, .07), rgba(255, 255, 255, .90)),
    linear-gradient(#ffffff, #f4f8fb);
  color: #1f354c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 2px 6px rgba(42, 70, 96, .08);
}

.base-company-name-card span {
  display: block;
  overflow: hidden;
  width: 100%;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.base-sales-person-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 30px;
  gap: 7px;
  padding: 3px 10px 3px 5px;
  border: 1px solid #b9cfe1;
  border-radius: 999px;
  background:
    linear-gradient(#ffffff, #edf5fb);
  color: #25435f;
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 1px 4px rgba(52, 82, 112, .10);
}

.base-sales-person-chip b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1px solid #6f9fc5;
  border-radius: 50%;
  background: linear-gradient(#dff0fb, #9fc5df);
  color: #164566;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70);
}

.base-sales-person-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-more {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 100%;
  width: fit-content;
  max-width: fit-content;
  margin-top: 2px;
  border: 1px solid #91abc5;
  border-bottom-color: #66829f;
  border-radius: 999px;
  background: linear-gradient(180deg, #fbfdff 0%, #e2ebf3 50%, #c0d0df 100%);
  color: #24486c;
  padding: 0 9px 0 10px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(82, 112, 142, .18),
    0 2px 0 #7089a1,
    0 7px 13px rgba(29, 53, 77, .16);
  transform: translateY(0);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease, color .14s ease;
}

.factory-more:hover {
  border-color: #6f90af;
  border-bottom-color: #557694;
  background: linear-gradient(180deg, #ffffff 0%, #e9f1f7 46%, #aec3d5 100%);
  color: #173b5e;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(82, 112, 142, .22),
    0 3px 0 #617d96,
    0 11px 18px rgba(29, 53, 77, .22);
}

.factory-summary,
.factory-cell,
.consignee-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 5px;
  min-width: 0;
}

.factory-popover {
  position: absolute;
  z-index: 70;
  min-width: 270px;
  max-width: 340px;
  border: 1px solid #a9bdcf;
  border-bottom-color: #8da4bb;
  border-radius: 7px;
  background:
    linear-gradient(180deg, #f8fbfd 0%, #ffffff 34%, #ffffff 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 14px 30px rgba(25, 48, 72, .22),
    0 2px 0 rgba(99, 125, 151, .22);
  padding: 10px;
}

.factory-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 22px;
  width: 12px;
  height: 12px;
  border-left: 1px solid #a9bdcf;
  border-top: 1px solid #a9bdcf;
  background: #f8fbfd;
  transform: rotate(45deg);
}

.factory-popover-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  margin-bottom: 8px;
  padding: 2px 2px 8px 10px;
  border-bottom: 1px solid #d9e4ee;
}

.factory-popover-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2f65a0, #8db0d1);
  box-shadow: 0 1px 2px rgba(47, 101, 160, .22);
}

.factory-popover-title strong {
  color: #253f5a;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.factory-popover-title span {
  min-height: 19px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #b4c9dd;
  border-bottom-color: #9bb5cf;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #eef5fa);
  color: #285d97;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(35,61,88,.08);
}

.factory-popover-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  max-height: 270px;
  overflow: auto;
}

.factory-popover-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid #d4e0eb;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%);
  padding: 5px 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 1px 2px rgba(35,61,88,.06);
  transition: background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}

.factory-popover-item:hover {
  border-color: #b8cce0;
  background: linear-gradient(180deg, #ffffff 0%, #edf5fb 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 4px 10px rgba(35,61,88,.10);
}

.factory-popover-item i {
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #a9bfd4;
  border-bottom-color: #829bb4;
  border-radius: 6px;
  background: linear-gradient(180deg, #fbfdff 0%, #dfe9f2 52%, #c2d2df 100%);
  color: #2d5278;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 0 #8fa5ba;
}

.factory-popover-item b {
  min-width: 0;
  overflow: hidden;
  color: #21384f;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cargo-type-cell {
  white-space: normal;
}

.cargo-chip {
  max-width: 100%;
  word-break: break-word;
}

.cargo-track-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  cursor: pointer;
}

.cargo-track-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 25px;
  padding: 0 10px;
  border: 1px solid #b8cce0;
  border-radius: 999px;
  background: #f6f9fc;
  color: #315a82;
  font-size: 13px;
  font-weight: 800;
  line-height: 23px;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.cargo-track-link b {
  font-size: 15px;
  line-height: 1;
  transform: translateY(-1px);
}

.operator-cell {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 1px 8px;
  border: 1px solid #c1d2e1;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef5fb);
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.timeline-text-td .thdxxdiv {
  color: #304153;
}

.track-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg, rgba(31, 45, 61, .22), rgba(31, 45, 61, .32)),
    rgba(20, 34, 49, .28);
}

.track-dialog {
  width: min(760px, calc(100vw - 64px));
  max-height: calc(100vh - 80px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #fff;
  border: 1px solid #9db4c9;
  border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .62), 0 24px 70px rgba(12, 25, 40, .32);
  overflow: hidden;
}

.track-head {
  min-height: 64px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(#f7fbff, #e8f1f8);
  border-bottom: 1px solid var(--line);
}

.track-head h3 {
  color: var(--blue-dark);
  font-size: 19px;
}

.track-head button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--blue-dark);
  font-size: 24px;
  line-height: 1;
}

.track-body {
  padding: 16px;
  overflow: auto;
}

.detail-page {
  min-width: 0;
  background: var(--paper);
}

.back-link {
  color: var(--blue);
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}

.detail-page-shell {
  max-width: 1420px;
  margin: 0 auto;
  padding: 22px;
}

.detail-page-card {
  display: grid;
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.legacy-order-board {
  background: #fff;
  border: 1px solid var(--line);
  padding: 12px;
  box-shadow: 0 14px 34px rgba(31, 45, 61, .08);
}

.employee-detail-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--line);
  padding: 18px 20px;
}

.employee-detail-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.employee-detail-header h1 {
  margin: 5px 0 0;
  color: #13263a;
  font-size: 28px;
  line-height: 1.15;
}

.employee-detail-order-no {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.employee-detail-header em {
  min-width: 88px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #edf5ee;
  color: var(--green);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.employee-detail-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-head-actions .blue-action-button,
.employee-detail-actions .blue-action-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.employee-detail-summary {
  margin-top: 0;
  background: #fff;
}

.employee-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 12px;
}

.detail-page-main,
.detail-side-section {
  border: 1px solid var(--line);
  background: #fff;
  padding: 12px;
}

.detail-side {
  display: grid;
  align-content: start;
  gap: 12px;
}

.detail-side-section h2 {
  height: 32px;
  display: flex;
  align-items: center;
  margin: 0 8px;
  padding: 0 10px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
}

.detail-side-section .timeline {
  padding: 12px 16px;
}

.detail-side-section .downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
}

.detail-side-section .downloads a {
  min-width: 150px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #a9bdcf;
  border-bottom-color: #7894ad;
  border-radius: 5px;
  background: linear-gradient(#fff, #edf3f8);
  color: #254f7c;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.old-detail-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px #dbe5ee;
}

.old-label-col {
  width: 120px;
}

.old-value-col {
  width: 180px;
}

.old-gap-col {
  width: 28px;
}

.old-detail-table td {
  min-height: 34px;
  border-bottom: 1px dashed #e4e9ee;
  padding: 7px 8px;
  vertical-align: middle;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: normal;
}

.full-detail-table .old-section {
  margin-top: 2px;
}

.old-section {
  min-height: 34px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  border-bottom: 0;
  border-radius: 2px;
  background: var(--blue);
  color: #fff;
  padding: 0 10px;
  font-weight: 900;
}

.old-section span {
  justify-self: start;
  padding-left: 0;
  font-size: 14px;
}

.old-section strong {
  justify-self: end;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0;
}

.old-label {
  color: #667586;
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.order-initial-schedule {
  display: inline-block;
  margin-right: 4px;
  color: #aaa;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.old-label.old-left {
  text-align: left;
  padding-left: 24px;
}

.old-value {
  color: #1d2c3a;
  font-weight: 700;
  overflow-wrap: break-word;
  white-space: normal;
}

.old-four-row > td {
  padding: 0;
}

.old-truck-date-row > td {
  padding: 0;
}

.old-four-grid {
  display: grid;
  font-size: 13px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px dashed #e4e9ee;
}

.old-four-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  padding: 7px 8px;
}

.old-four-label {
  color: #667586;
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.old-four-value {
  color: #1d2c3a;
  font-weight: 700;
  overflow-wrap: break-word;
  white-space: normal;
}

.old-truck-date-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.booking-inline, .booking-inline-editor { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: inherit; min-width: 0; }
.booking-inline [hidden] { display: none !important; }
.booking-inline [data-booking-view] { overflow-wrap: anywhere; }
.booking-inline-editor input { width: 100%; min-width: 0; font: inherit; border: 1px solid #8db1d1; border-radius: 4px; padding: 4px 6px; }
.booking-inline-button { font-size: 12px; color: #28648b; border: 1px solid #adc7da; background: #f5faff; border-radius: 4px; padding: 3px 7px; cursor: pointer; }
.booking-inline-button:hover { background: #e7f2fa; }
.booking-inline-button:disabled { opacity: .5; cursor: wait; }

@media (max-width: 1100px) {
  .old-four-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .old-four-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.old-truck-dispatch {
  grid-template-columns: 92px minmax(0, 1fr);
}

.old-value-nowrap,
.old-ship-name {
  white-space: nowrap;
  overflow-wrap: normal;
}

.old-port-value,
.old-detail-table .old-port-value {
  color: #17283b;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* The copy control stays immediately after each rendered port name.  It is
   part of normal inline flow, never positioned against a fixed cell edge. */
.employee-order-port-copy-value {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  row-gap: 3px;
  max-width: 100%;
  vertical-align: middle;
  white-space: normal;
}

.employee-order-port-copy-value > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.employee-order-port-copy-button {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  border-radius: 6px;
}

.employee-order-port-copy-button i::before,
.employee-order-port-copy-button i::after {
  width: 7px;
  height: 8px;
}

.employee-order-port-copy-button i::before {
  top: 5px;
  left: 5px;
}

.employee-order-port-copy-button i::after {
  top: 7px;
  left: 8px;
}

.employee-order-port-copy-button.copied::after {
  top: 2px;
  left: 5px;
  font-size: 14px;
}

.old-add {
  color: #9aa8b6;
  padding: 0 6px;
  font-size: inherit;
  font-weight: 900;
}

.factory-cargo-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.factory-cargo-metric b {
  color: #1d2c3a;
  font-size: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.factory-cargo-metric small {
  color: #697e90;
  font-size: 12px;
  font-weight: 700;
}

.factory-total-row > td {
  padding: 7px 8px;
  border-bottom: 1px solid #dbe5ed;
  background: #fff;
}

.factory-total-band {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 4px 10px;
  background: linear-gradient(90deg, rgba(241, 247, 251, 0), rgba(241, 247, 251, .78) 50%, rgba(241, 247, 251, 0));
}

.factory-total-heading {
  display: flex;
  align-items: baseline;
  width: min(100%, 560px);
  gap: 7px;
  color: #2a4b65;
  white-space: nowrap;
}

.factory-total-heading::before,
.factory-total-heading::after {
  content: "";
  flex: 1 1 36px;
  min-width: 18px;
  height: 1px;
  align-self: center;
  background: #d1dfe9;
}

.factory-total-heading span {
  font-size: 12px;
  font-weight: 850;
}

.factory-total-heading small {
  color: #718496;
  font-size: 11px;
  font-weight: 700;
}

.factory-total-metrics {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
}

.factory-total-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #233b50;
  white-space: nowrap;
}

.factory-total-metric b {
  color: #1d2c3a;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.factory-total-metric small {
  color: #697e90;
  font-size: 12px;
  font-weight: 700;
}

.factory-total-separator {
  width: 1px;
  height: 18px;
  margin: 0 12px;
  background: #cbd8e2;
}

.old-value-strong {
  color: #15375d;
  font-weight: 900;
}

.old-muted-inline {
  display: inline-block;
  margin-left: 18px;
  color: #98a5b3;
  font-weight: 800;
}

.old-muted-wide {
  margin-left: 64px;
}

.old-important {
  color: #d85f5f;
  font-weight: 950;
}

.old-table-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-right: 14px;
  color: #1f86c9;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}

.old-table-link:hover {
  color: #155f9f;
  transform: translateY(-1px);
}

.old-link-cell {
  padding-left: 44px !important;
  text-align: left;
}

.old-period-divider td {
  padding: 4px 8px !important;
  border-bottom: 0;
}

.old-period-divider span {
  display: block;
  height: 1px;
  border-top: 1px dotted #b9c8d5;
}

.old-multi-period-band-row > td {
  padding: 0 !important;
}

.old-multi-period-band {
  min-width: 0;
  background: #fff;
  border-bottom: 1px dashed #dce6ed;
}

.old-multi-period-band-head {
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #dce8f0;
  background: linear-gradient(90deg, #f7fbfe 0%, #ffffff 72%);
  padding: 0 16px;
}

.old-multi-period-band-head > span {
  width: 21px;
  height: 21px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #91bbd6;
  border-radius: 50%;
  background: linear-gradient(#ffffff, #dceff9);
  color: #246a95;
  font-size: 10px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(33, 87, 121, .12);
}

.old-multi-period-band-head > strong {
  color: #24577d;
  font-size: 13px;
  font-weight: 950;
}

.old-multi-period-band-head > small {
  color: #94a7b5;
  font-size: 10px;
  font-weight: 750;
}

.old-multi-period-route-line {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  position: relative;
  border-bottom: 1px dashed #e1e9ef;
  padding: 9px 16px 10px;
}

.old-multi-period-route-point {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}

.old-multi-period-route-point > span,
.old-multi-period-fact > span {
  color: #8094a3;
  font-size: 10px;
  font-weight: 850;
}

.old-multi-period-route-point > strong {
  min-width: 0;
  color: #183a59;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.old-multi-period-route-line > i {
  position: absolute;
  top: 50%;
  left: calc(50% - 8px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  color: #3380ac;
  font-size: 21px;
  font-style: normal;
  font-weight: 700;
}

.old-multi-period-time-grid,
.old-multi-period-vessel-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.old-multi-period-time-grid {
  border-bottom: 1px dashed #e1e9ef;
}

.old-multi-period-fact {
  min-width: 0;
  min-height: 41px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  padding: 7px 16px;
}

.old-multi-period-time-grid .old-multi-period-fact:first-child,
.old-multi-period-vessel-grid .old-multi-period-fact:first-child {
  border-right: 1px solid #edf1f4;
}

.old-multi-period-fact > strong {
  min-width: 0;
  color: #243949;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.old-multi-period-shared-row > td {
  padding: 0 !important;
}

.old-multi-period-shared-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  border-bottom: 1px dashed #dce6ed;
  background: #fff;
}

.old-multi-period-shared-item {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  column-gap: 9px;
  padding: 8px 18px;
}

.old-multi-period-shared-item.company {
  border-right: 1px solid #dbe7ee;
}

.old-multi-period-shared-item > span {
  color: #7890a0;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.old-multi-period-shared-item > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #1b4567;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.35;
}

.old-multi-period-shared-item.transport > strong {
  color: #256a96;
}

@media (max-width: 680px) {
  .old-multi-period-vessel-grid {
    grid-template-columns: 1fr;
  }

  .old-multi-period-time-grid .old-multi-period-fact:first-child,
  .old-multi-period-vessel-grid .old-multi-period-fact:first-child {
    border-right: 0;
  }

  .old-multi-period-time-grid .old-multi-period-fact:first-child {
    border-bottom: 1px dashed #e1e9ef;
  }

  .old-multi-period-route-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .old-multi-period-fact {
    padding-right: 12px;
    padding-left: 12px;
  }

  .old-multi-period-shared-grid {
    grid-template-columns: 1fr;
  }

  .old-multi-period-shared-item.company {
    border-right: 0;
    border-bottom: 1px solid #dbe7ee;
  }

  .old-multi-period-shared-item {
    padding-right: 12px;
    padding-left: 12px;
  }
}

.old-track-group {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  white-space: nowrap;
}

.old-remark-label {
  padding-top: 14px !important;
  vertical-align: top !important;
}

.old-remark-box {
  width: 90.5%;
  height: 150px;
  margin-top: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: linear-gradient(#fff, #f8fbfd);
  color: #1d2c3a;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
  resize: vertical;
  white-space: pre-wrap;
  box-shadow: inset 0 1px 2px rgba(31, 45, 61, .07);
}

.legacy-inline-edit {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.legacy-inline-edit .old-remark-box,
.legacy-inline-edit .old-contact-box {
  flex: 1 1 auto;
}

.legacy-edit-actions {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 8px;
}

.legacy-edit-icon {
  min-width: 50px;
  min-height: 30px;
  border: 1px solid #9db8cf;
  border-bottom-color: #6f91ad;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #e9f3fb);
  color: #1d527e;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 0 rgba(154, 180, 202, .75),
    0 7px 14px rgba(42, 82, 116, .1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.legacy-edit-icon:hover {
  border-color: #6fa1cc;
  background: linear-gradient(#ffffff, #dceefb);
  transform: translateY(-1px);
}

.legacy-edit-icon.save {
  border-color: #66a694;
  border-bottom-color: #3e7f70;
  background: linear-gradient(#ffffff, #daf3eb);
  color: #12604f;
}

.legacy-edit-icon:disabled {
  cursor: wait;
  opacity: .75;
  transform: none;
}

.legacy-edit-textarea-active {
  border-color: #4b9bcf !important;
  background: #ffffff !important;
  box-shadow:
    inset 0 1px 2px rgba(31, 45, 61, .06),
    0 0 0 3px rgba(59, 137, 197, .12) !important;
}

.old-contact-list {
  display: grid;
  gap: 12px;
  width: 90.5%;
  margin-top: 8px;
  padding-bottom: 8px;
}

.legacy-contact-more {
  width: fit-content;
  min-height: 30px;
  border: 1px solid #b8c9d9;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #f0f5fa);
  color: #315a7f;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(42, 82, 116, .08);
}

.legacy-contact-more:hover {
  border-color: #83a9c9;
  color: #1e6090;
}

.old-contact-card {
  display: grid;
  gap: 6px;
}

.old-contact-card h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 900;
}

.old-contact-source {
  color: #77879a;
  font-size: 12px;
  font-weight: 800;
}

.old-contact-box {
  width: 100%;
  min-height: 132px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: linear-gradient(#fff, #f8fbfd);
  color: #1d2c3a;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
  resize: vertical;
  white-space: pre-wrap;
  box-shadow: inset 0 1px 2px rgba(31, 45, 61, .07);
}

.employee-old-flow {
  width: 1100px;
  margin: 20px auto;
  border: 1px solid #c7d9ea;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #f7fbff);
  box-shadow:
    0 16px 32px rgba(31, 63, 96, .12),
    inset 0 1px 0 rgba(255, 255, 255, .96);
  overflow: hidden;
}

.employee-old-flow .od-tab {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 42px;
  line-height: 1;
  margin-top: 0;
  padding: 0 20px;
  border-bottom: 1px solid #c4d8ea;
  background: linear-gradient(#fafdff 0%, #e8f2fb 58%, #d8e7f6 100%);
  color: #173b61;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95);
}

.employee-old-flow .od-tab-actived {
  font-size: 14px;
}

.order-flow-shipxy {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  justify-content: flex-end;
  max-width: min(760px, 72%);
  color: #607890;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.order-flow-shipxy span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 3px;
}

.order-flow-shipxy strong {
  color: #173b61;
  font-weight: 950;
}

.order-flow-shipxy .shipxy-status {
  color: #1189bf;
}

.legacy-section-icon {
  display: inline-block;
  width: 4px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  background: #1ec5ed;
}

.order-flow-toolbar {
  position: relative;
  width: 1100px;
  min-height: 56px;
  margin: 0 auto -6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}

.order-flow-launcher {
  min-width: 116px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid #4a86b1;
  border-bottom-color: #245878;
  border-radius: 6px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.44), 0 3px 0 #285e83, 0 8px 16px rgba(26,74,109,.16);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.order-flow-launcher b {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 50%;
  background: rgba(9,56,91,.24);
  color: #fff;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.order-flow-launcher-main {
  background: linear-gradient(#83bfe0 0%, #4b93c0 52%, #2a70a1 100%);
}

.order-flow-launcher-sub {
  border-color: #78a7c7;
  border-bottom-color: #456f8c;
  background: linear-gradient(#edf8ff 0%, #cfe7f5 52%, #a8cee5 100%);
  color: #174a73;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 3px 0 #7faecb, 0 8px 16px rgba(26,74,109,.12);
}

.order-flow-launcher-sub b {
  border-color: rgba(43,101,141,.38);
  background: rgba(52,117,160,.14);
  color: #1d608f;
}

.order-flow-launcher-special {
  position: relative;
  min-width: 126px;
  border-color: #c3a05b;
  border-bottom-color: #8f6b2d;
  background: linear-gradient(#fffdf8 0%, #f7e9c5 50%, #e2c47f 100%);
  color: #624819;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 3px 0 #b68b42, 0 8px 16px rgba(105,76,25,.15);
}

.order-flow-launcher-special b {
  border-color: rgba(111,78,22,.35);
  background: rgba(140,101,29,.12);
  color: #745319;
  font-size: 15px;
}

.order-flow-launcher-special em {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  box-sizing: border-box;
  border: 1px solid #a84a39;
  border-radius: 10px;
  background: linear-gradient(#f78373, #c94635);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 2px 4px rgba(107,37,28,.26);
}

.order-flow-launcher-special:hover {
  border-color: #b88d3e;
  box-shadow: inset 0 1px 0 #fff, 0 4px 0 #a77b32, 0 12px 20px rgba(105,76,25,.21);
}

.order-flow-launcher:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 4px 0 #23577d, 0 12px 20px rgba(26,74,109,.2);
}

.order-flow-launcher:focus-visible,
.order-main-flow-menu-item:focus-visible {
  outline: 3px solid rgba(41,132,186,.28);
  outline-offset: 2px;
}

/* Order-detail workflow workspace: current work first, full history second. */
.order-workflow {
  overflow: hidden;
  border: 1px solid #bfd2e1;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(31, 66, 94, .08), inset 0 1px 0 #fff;
}

.order-workflow-topline {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 20px;
  border-bottom: 1px solid #c7d9e7;
  background: linear-gradient(105deg, #f9fcff 0%, #eef7fc 58%, #fafeff 100%);
}

.order-workflow-title > span,
.order-workflow-section-heading > div > span,
.order-special-summary-copy > small {
  display: block;
  color: #688198;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.2;
}

.order-workflow-title h3,
.order-workflow-section-heading h3 {
  margin: 3px 0 0;
  color: #1b466d;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.25;
}

.order-workflow-title p {
  margin: 5px 0 0;
  color: #60798e;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.order-workflow-command .order-flow-toolbar {
  width: auto;
  min-height: 38px;
  margin: 0;
  gap: 10px;
  justify-content: flex-end;
}

.order-workflow-command .order-flow-launcher {
  min-width: 112px;
}

.order-workflow-spine {
  padding: 18px 20px 16px;
  border-bottom: 1px solid #d6e2eb;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
}

.order-workflow-stage-list {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.order-workflow-stage-list::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 5%;
  left: 5%;
  height: 1px;
  background: #cbdce8;
}

.order-workflow-stage-slot {
  position: relative;
  z-index: 1;
  min-width: 98px;
  flex: 1 0 98px;
}

.order-workflow-stage-slot.has-inline-actions {
  min-width: 128px;
  flex-basis: 128px;
}

.order-workflow-stage {
  position: relative;
  z-index: 1;
  min-width: 98px;
  flex: 1 0 98px;
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

button.order-workflow-stage {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 4px 7px;
  font-family: inherit;
}

.order-workflow-stage:disabled { cursor: default; }

.order-workflow-stage-slot.has-inline-actions .order-workflow-stage strong {
  white-space: normal;
}

.order-workflow-inline-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 4px 3px 0;
}

.order-workflow-inline-actions.single {
  grid-template-columns: minmax(0, 1fr);
}

.order-workflow-inline-action {
  min-width: 0;
  min-height: 26px;
  overflow: hidden;
  border: 1px solid #9bbfd6;
  border-bottom-color: #6f9bb9;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #e8f4fa);
  color: #285d82;
  padding: 0 6px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 0 #c2dbe9, 0 4px 8px rgba(35, 92, 126, .10);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.order-workflow-inline-action.primary {
  border-color: #2e82b3;
  border-bottom-color: #1f628c;
  background: linear-gradient(#75b9df, #3484b5);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 2px 0 #1f628c, 0 5px 10px rgba(28, 92, 134, .2);
}

.order-workflow-inline-action.sailing-confirm {
  min-height: 28px;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 11px;
}

.order-workflow-inline-action:hover:not(:disabled) {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 3px 0 #a6c7da, 0 7px 12px rgba(35, 92, 126, .16);
}

.order-workflow-inline-action.primary:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 3px 0 #19577e, 0 8px 13px rgba(28, 92, 134, .24);
}

.order-workflow-inline-action:disabled {
  cursor: wait;
  opacity: .72;
}

.order-workflow-stage.is-actionable {
  cursor: pointer;
  border-radius: 8px;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.order-workflow-stage.is-actionable:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(227, 244, 253, .74), rgba(248, 252, 255, .28));
  box-shadow: inset 0 0 0 1px rgba(109, 166, 201, .28), 0 7px 14px rgba(36, 104, 145, .1);
}

.order-workflow-stage.is-actionable:focus-visible {
  outline: 3px solid rgba(49, 139, 195, .28);
  outline-offset: 2px;
}

.order-workflow-stage i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #bccfdd;
  border-radius: 50%;
  background: #f5f9fb;
  color: #7c92a4;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 0 0 4px #fff;
}

.order-workflow-stage strong {
  color: #587187;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.3;
  white-space: nowrap;
}

.order-workflow-stage small {
  color: #92a3b0;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

.order-workflow-stage.done i,
.order-workflow-stage.advanced i {
  border-color: #2e82b3;
  background: linear-gradient(#74b8df, #3486b6);
  color: #fff;
  box-shadow: 0 0 0 4px #fff, 0 3px 8px rgba(36, 116, 163, .18);
}

.order-workflow-stage.done strong,
.order-workflow-stage.advanced strong { color: #1e5d88; }
.order-workflow-stage.done small,
.order-workflow-stage.advanced small { color: #3f789b; }

/* A later permitted step, such as early telex, is actionable alongside the current step. */
.order-workflow-stage.current i,
.order-workflow-stage.pending.is-actionable i {
  border-color: #bd8b36;
  background: linear-gradient(#fff9e9, #f3cf85);
  color: #8a5c13;
  box-shadow: 0 0 0 4px #fff, 0 3px 9px rgba(183, 130, 38, .2);
}

.order-workflow-stage.current strong,
.order-workflow-stage.pending.is-actionable strong { color: #765016; }
.order-workflow-stage.current small,
.order-workflow-stage.pending.is-actionable small { color: #a47022; }

.order-workflow-stage.blocked i {
  border-color: #c77835;
  background: linear-gradient(#fff8e8, #f4ca87);
  color: #874813;
  box-shadow: 0 0 0 4px #fff, 0 3px 9px rgba(178, 101, 34, .2);
}

.order-workflow-stage.blocked strong { color: #824b1e; }
.order-workflow-stage.blocked small { color: #ae6733; }

.order-workflow-stage.blocked.is-actionable:hover {
  background: linear-gradient(180deg, rgba(255, 244, 219, .8), rgba(255, 250, 241, .38));
  box-shadow: inset 0 0 0 1px rgba(199, 120, 53, .32), 0 7px 14px rgba(150, 88, 31, .12);
}

.order-workflow-stage.skipped i {
  border-style: dashed;
  border-color: #c8d5df;
  background: #fafcfd;
  color: #8da0ae;
}

.order-workflow-stage.skipped strong { color: #738896; }
.order-workflow-stage.skipped small { color: #9cacb7; }

.order-workflow-spine .order-flow-shipxy {
  max-width: none;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #d5e2ea;
  justify-content: flex-start;
}

.order-workflow-content {
  display: grid;
  grid-template-columns: minmax(300px, .86fr) minmax(0, 1.64fr);
  align-items: start;
}

.order-workflow-side {
  min-width: 0;
  border-right: 1px solid #d2e0e9;
  background: #fbfdff;
}

.order-document-shelf,
.order-sub-flow-attachment-shelf,
.order-special-events,
.order-workflow-history {
  min-width: 0;
}

.order-document-shelf,
.order-sub-flow-attachment-shelf {
  border-bottom: 1px solid #d5e2eb;
}

.order-sub-flow-attachment-list {
  display: grid;
  gap: 7px;
  padding: 13px 18px 16px;
}

.order-sub-flow-attachment-link {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid #d1e1ec;
  border-radius: 6px;
  background: #fff;
  color: #244f73;
  text-decoration: none;
  box-shadow: 0 3px 9px rgba(31, 78, 111, .05);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.order-sub-flow-attachment-link.is-empty {
  background: #f9fbfd;
  box-shadow: none;
}

.order-sub-flow-attachment-link.is-empty .order-sub-flow-attachment-type {
  border-style: dashed;
  background: #f5f8fa;
  color: #72899a;
}

.order-sub-flow-attachment-link.has-files {
  border-left: 4px solid #2f83b3;
}

.order-sub-flow-attachment-link:hover {
  transform: translateY(-1px);
  border-color: #78aac8;
  background: #f4fbff;
  box-shadow: 0 6px 13px rgba(31, 78, 111, .1);
}

button.order-sub-flow-attachment-link.is-group {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.order-sub-flow-attachment-link.is-group .order-sub-flow-attachment-type {
  border-color: #91bfd6;
  background: #e7f5fc;
}

.order-sub-flow-attachment-type {
  min-height: 23px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #b8d0df;
  border-radius: 999px;
  background: #eef7fc;
  color: #2c688f;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.order-sub-flow-attachment-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.order-sub-flow-attachment-copy strong {
  overflow: hidden;
  color: #244761;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-sub-flow-attachment-copy small {
  overflow: hidden;
  color: #7890a2;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-sub-flow-attachment-action {
  color: #1676ac;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.order-sub-flow-attachment-count {
  min-width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid #9ebed2;
  border-radius: 50%;
  background: #edf6fb;
  color: #285f82;
  font-size: 10px;
  font-weight: 950;
}

.order-sub-flow-attachment-shelf.is-compact {
  margin-top: 14px;
  border: 1px solid #d5e2eb;
  border-radius: 7px;
  overflow: hidden;
}

.order-sub-flow-attachment-group-card .order-sub-flow-body {
  display: grid;
  gap: 14px;
}

.sub-flow-attachment-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid #c9dfec;
  border-radius: 7px;
  background: #f4faff;
  color: #3e657f;
}

.sub-flow-attachment-group-summary b { color: #174f75; font-size: 14px; }
.sub-flow-attachment-group-summary span { font-size: 12px; font-weight: 750; }

.sub-flow-attachment-group-list {
  display: grid;
  gap: 14px;
}

.sub-flow-attachment-group {
  overflow: hidden;
  border: 1px solid #bfd5e2;
  border-left: 4px solid #2b7ba8;
  border-radius: 7px;
  background: #fbfdff;
  box-shadow: 0 3px 10px rgba(31, 83, 115, .08);
}

.sub-flow-attachment-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px 8px 10px;
  border-bottom: 1px solid #cbdde8;
  background: #e3f0f7;
  color: #183f5c;
}

.sub-flow-attachment-group-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.sub-flow-attachment-group-title > span {
  min-width: 28px;
  padding: 3px 5px;
  border-radius: 4px;
  background: #2c78a2;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.sub-flow-attachment-group-title strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sub-flow-attachment-group-count {
  padding: 3px 8px;
  border: 1px solid #bfd5e2;
  border-radius: 999px;
  background: #f8fcff;
  color: #54748a;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.sub-flow-attachment-group-files {
  display: grid;
  padding: 4px 12px 5px 14px;
}

.sub-flow-attachment-group-file {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px 4px;
  border-bottom: 1px solid #e6eef3;
  color: #294e68;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}

.sub-flow-attachment-group-file:last-child { border-bottom: 0; }
.sub-flow-attachment-group-file:hover { background: #f0f8fc; }
.sub-flow-attachment-group-file:hover .sub-flow-attachment-group-file-name { color: #0978b5; }
.sub-flow-attachment-file-index {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #c5d9e5;
  border-radius: 50%;
  background: #f3f9fc;
  color: #6b8799;
  font-size: 9px;
  font-weight: 900;
}
.sub-flow-attachment-group-file-name { overflow: hidden; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.sub-flow-attachment-group-file b { color: #147aac; font-size: 11px; white-space: nowrap; }

.sub-flow-attachment-single-download { text-decoration: none; }

.order-workflow-section-heading {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid #d6e3ec;
  background: linear-gradient(90deg, #f9fcfe, #edf7fc);
}

.order-workflow-section-heading h3 { font-size: 15px; }

.order-workflow-section-heading > b {
  min-width: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #b2cddf;
  border-radius: 12px;
  background: #fff;
  color: #21618d;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(26, 80, 118, .08);
}

.order-history-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.order-history-mode-switch > button {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #bdd2e0;
  border-bottom-color: #9ebdce;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #eef6fa);
  color: #557286;
  padding: 0 11px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #cfdee7, 0 5px 10px rgba(30, 76, 108, .07);
  transition: transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.order-history-mode-switch > button > b {
  min-width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: #e4eef4;
  color: #638095;
  padding: 0 4px;
  font-size: 10px;
  line-height: 1;
}

.order-history-mode-switch > button:hover {
  transform: translateY(-1px);
  border-color: #7daac6;
  color: #245b80;
  background: linear-gradient(#ffffff, #e3f1f8);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #b6cfde, 0 8px 14px rgba(30, 76, 108, .11);
}
.order-history-mode-switch > button.active {
  border-color: #437fa8;
  border-bottom-color: #2d668e;
  background: linear-gradient(#5badd8, #347dac 56%, #256895);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 2px 0 #2a638a, 0 7px 13px rgba(30, 76, 108, .15);
}
.order-history-mode-switch > button.active > b { background: rgba(255,255,255,.22); color: #fff; }

.order-history-mail-audit {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #a9c9df;
  border-bottom-color: #7ba3bd;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #e9f5fb);
  color: #28618b;
  padding: 0 12px;
  font: 900 11px inherit;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c6dce9, 0 5px 11px rgba(30, 76, 108, .08);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.order-history-mail-audit i { font-size: 16px; font-style: normal; line-height: 1; }

.order-history-mail-audit:hover {
  transform: translateY(-1px);
  border-color: #68a0c2;
  background: linear-gradient(#ffffff, #dceff9);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #afd0e2, 0 8px 14px rgba(30, 76, 108, .13);
}

/* Optional destination-port delivery: separate from the origin dispatch-list workflow. */
.destination-delivery-modal { width: min(1100px, calc(100vw - 42px)); }
.destination-delivery-head { align-items: center; }
.destination-delivery-head > .destination-delivery-status { margin-left: auto; }
.destination-delivery-status {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px;
  border: 1px solid #9ac7dc; border-radius: 999px; background: #eff9fd; color: #1c7195;
  font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: inset 0 1px 0 #fff;
}
.destination-delivery-status.pending { border-color: #e6bf76; background: #fff8e6; color: #96651b; }
.destination-delivery-status.confirmed { border-color: #8fc7b0; background: #effaf4; color: #25744e; }
.destination-delivery-status.cancelled { border-color: #d4a7a7; background: #fff3f3; color: #9b4545; }
.destination-delivery-recipient {
  display: grid; grid-template-columns: minmax(260px, 1fr) minmax(240px, .85fr); align-items: end; gap: 16px;
  margin-bottom: 14px; padding: 12px 14px; border: 1px solid #d4e3f0; border-radius: 7px; background: #f7fbff;
}
.destination-delivery-recipient label, .destination-delivery-edit-row label, .destination-delivery-cancel-field { display: grid; gap: 6px; color: #315a80; font-size: 12px; font-weight: 800; }
.destination-delivery-recipient input, .destination-delivery-edit-row input, .destination-delivery-edit-row select, .destination-delivery-cancel-field textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #aac9e4; border-radius: 5px; background: #fff; color: #173e64; font: inherit; font-weight: 600; outline: none;
}
.destination-delivery-recipient input, .destination-delivery-edit-row input, .destination-delivery-edit-row select { min-height: 34px; padding: 6px 8px; }
.destination-delivery-cancel-field textarea { min-height: 60px; padding: 8px; resize: vertical; }
.destination-delivery-recipient input:focus, .destination-delivery-edit-row input:focus, .destination-delivery-edit-row select:focus, .destination-delivery-cancel-field textarea:focus { border-color: #3782bd; box-shadow: 0 0 0 3px rgba(65,139,198,.12); }
.destination-delivery-recipient > span { color: #6d8296; font-size: 12px; line-height: 1.6; }
.destination-delivery-form-intro { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #4b6c88; font-size: 12px; }
.destination-delivery-form-intro b { color: #1f527f; font-size: 14px; }
.destination-delivery-form-intro em { margin-left: auto; color: #a36b15; font-style: normal; font-weight: 800; }
.destination-delivery-edit-list { display: grid; gap: 10px; max-height: min(55vh, 620px); overflow: auto; padding-right: 4px; }
.destination-delivery-edit-row { display: grid; grid-template-columns: minmax(118px, .7fr) minmax(164px, .9fr) minmax(224px, 1.32fr) 88px minmax(280px, 1.7fr); gap: 10px; align-items: end; padding: 12px; border: 1px solid #c9ddec; border-radius: 7px; background: linear-gradient(180deg, #fcfeff, #f4f9fd); box-shadow: 0 4px 12px rgba(43,92,129,.05); }
.destination-delivery-edit-row > header { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #dce9f4; color: #204f7d; }
.destination-delivery-edit-row > header b { font-size: 13px; }
.destination-delivery-edit-row > header span { color: #7a8d9e; font-size: 12px; }
.destination-delivery-edit-row.cargo .destination-delivery-time { grid-column: 1; }
.destination-delivery-readonly { margin-bottom: 14px; padding: 11px 13px; border-left: 4px solid #d0a24d; background: #fff9ed; color: #815c20; font-size: 13px; font-weight: 700; }
.destination-delivery-button { min-height: 31px; margin-right: 8px; padding: 0 12px; border: 1px solid #93b8d7; border-bottom-color: #638eae; border-radius: 999px; background: linear-gradient(#fafdff, #d7eaf8); color: #225884; font-size: 12px; font-weight: 800; box-shadow: inset 0 1px #fff, 0 2px 0 rgba(75,132,171,.3); transition: transform .16s ease, box-shadow .16s ease; }
.destination-delivery-button:hover { transform: translateY(-1px); box-shadow: inset 0 1px #fff, 0 4px 9px rgba(54,105,143,.22); }
.destination-delivery-button.primary { border-color: #2278ad; border-bottom-color: #16577f; background: linear-gradient(#63b5e6, #267baa); color: #fff; }
.destination-delivery-button.danger { border-color: #d4a1a1; border-bottom-color: #ae6868; background: linear-gradient(#fffafa, #f5dada); color: #9a4545; }
.destination-delivery-summary { padding: 15px; border: 1px solid #c7ddea; border-radius: 8px; background: linear-gradient(180deg, #fbfdff, #f2f8fc); box-shadow: inset 0 1px 0 #fff; }
.destination-delivery-summary > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #d6e5f0; }
.destination-delivery-summary h4 { margin: 2px 0 0; color: #1f4d78; font-size: 16px; }
.destination-delivery-summary small { color: #66839b; font-size: 10px; font-weight: 900; letter-spacing: 0; }
.destination-delivery-meta { display: flex; gap: 12px; margin: 12px 0; }
.destination-delivery-meta > div { min-width: 150px; padding-right: 14px; border-right: 1px solid #d6e5f0; }
.destination-delivery-meta > div:last-child { border-right: 0; }
.destination-delivery-meta dt { color: #6c8498; font-size: 11px; }
.destination-delivery-meta dd { margin: 3px 0 0; color: #244d73; font-size: 12px; font-weight: 800; }
.destination-delivery-plan-list { display: grid; gap: 7px; }
.destination-delivery-plan-list article { display: grid; grid-template-columns: minmax(140px, .75fr) 145px minmax(240px, 1.5fr) minmax(145px, .8fr) 70px; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid #d8e6f1; border-radius: 5px; background: #fff; color: #506f88; font-size: 12px; }
.destination-delivery-plan-list b { color: #20527e; }
.destination-delivery-plan-list i { color: #7a652f; font-style: normal; font-weight: 800; }
.destination-delivery-summary > footer { margin-top: 13px; }
.destination-delivery-history { display: grid; gap: 5px; margin-top: 13px; padding-top: 10px; border-top: 1px solid #d6e5f0; }
.destination-delivery-history span { display: flex; gap: 8px; align-items: baseline; color: #657d91; font-size: 11px; }
.destination-delivery-history b { color: #315a80; }
.destination-delivery-history em { color: #8a9bab; font-style: normal; white-space: nowrap; }
.destination-delivery-history small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.destination-delivery-cancel-reason { margin: 10px 0 0; color: #9a5656; font-size: 12px; }
.destination-delivery-cancel-field { max-width: 640px; }
@media (max-width: 900px) {
  .destination-delivery-recipient { grid-template-columns: 1fr; gap: 9px; }
  .destination-delivery-edit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destination-delivery-edit-row .destination-delivery-address { grid-column: 1 / -1; }
  .destination-delivery-plan-list article { grid-template-columns: 1fr 1fr; }
  .destination-delivery-meta { flex-wrap: wrap; }
}

.order-document-shelf .generated-document-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px 17px;
}

.order-document-shelf .generated-document-pill {
  min-width: 0;
  max-width: 178px;
  flex: 0 1 auto;
  min-height: 35px;
  padding: 5px 10px 5px 12px;
  border: 1px solid #adc8dc;
  border-bottom-color: #83a9c5;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #edf7fc);
  color: #225a83;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #d0e0eb, 0 5px 10px rgba(30, 76, 108, .07);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.order-document-shelf .generated-document-pill > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-document-shelf .generated-document-pill > small {
  min-width: 31px;
  min-height: 19px;
  padding: 0 5px;
  font-size: 9px;
}

.order-document-shelf .generated-document-pill:hover {
  transform: translateY(-1px);
  border-color: #5e98bd;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #b7d1e2, 0 8px 13px rgba(30, 76, 108, .12);
}

.order-document-shelf .generated-document-pill.is-pending {
  cursor: not-allowed;
  border-color: #e0c590;
  border-bottom-color: #c5a96f;
  background: linear-gradient(#fffdf7, #fff4db);
  color: #896635;
  box-shadow: none;
}

.order-document-shelf .generated-document-pill.is-pending:hover {
  transform: none;
  border-color: #d1b276;
  box-shadow: none;
}

.order-special-panel {
  border-bottom: 1px solid #e4edf3;
  background: #fff;
}

.order-special-summary-button {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border: 0;
  border-bottom: 1px solid #e4edf3;
  background: linear-gradient(104deg, #ffffff 0%, #fbfdff 68%, #f7fbfd 100%);
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .16s ease, box-shadow .16s ease;
}

.order-special-summary-button:hover {
  background: linear-gradient(104deg, #fffefb 0%, #fffaf0 100%);
  box-shadow: inset 4px 0 0 #d5ae63;
}

.order-special-summary-button > b {
  color: #9a7028;
  font-size: 12px;
  font-weight: 950;
}

.order-special-summary-button:focus-visible {
  outline: 3px solid rgba(194,146,55,.24);
  outline-offset: -3px;
}

.order-special-event-center-modal {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(14,31,48,.44);
  backdrop-filter: blur(5px);
}

.order-special-event-center-modal.hidden { display: none; }

.order-special-event-center-card {
  position: relative;
  width: min(700px, calc(100vw - 32px));
  max-height: calc(100vh - 38px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #96b4cb;
  border-radius: 7px;
  background: #f8fbfe;
  box-shadow: 0 28px 70px rgba(10,38,63,.32), inset 0 1px 0 #fff;
}

.order-special-event-center-head {
  min-height: 90px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 16px 58px 16px 20px;
  border-bottom: 1px solid #c4d7e6;
  background: linear-gradient(108deg, #fff 0%, #edf5fb 68%, #e2eef7 100%);
}

.order-special-event-center-mark {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #b79558;
  border-radius: 6px;
  background: linear-gradient(#fffdf7, #f2e1bc);
  color: #805817;
  font-size: 23px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 #fff, 0 4px 9px rgba(96,67,23,.13);
}

.order-special-event-center-head small {
  display: block;
  color: #6b8294;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.2;
}

.order-special-event-center-head h3 {
  margin: 2px 0;
  color: #173f63;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.2;
}

.order-special-event-center-head p {
  margin: 0;
  color: #59758c;
  font-size: 12px;
  font-weight: 800;
}

.order-special-event-center-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px;
}

.order-special-event-center-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: #5e778d;
  font-size: 12px;
  font-weight: 850;
}

.order-special-event-center-progress > b {
  display: inline-grid;
  min-width: 38px;
  min-height: 22px;
  place-items: center;
  padding: 0 7px;
  border: 1px solid #d5b26c;
  border-radius: 11px;
  background: #fff8e8;
  color: #79581d;
  font-size: 11px;
  font-weight: 950;
}

.order-special-event-center-progress > em {
  margin-left: auto;
  color: #8597a5;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.order-special-center-item {
  border: 1px solid #bfd3e2;
  border-left: 4px solid #d0a654;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(29,70,101,.08), inset 0 1px 0 #fff;
}

.order-special-center-item.ready { border-left-color: #2f91c5; }

.order-special-center-item > header {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 15px;
  border-bottom: 1px solid #dfebf2;
  background: linear-gradient(100deg, #fbfdff, #f0f7fb);
}

.order-special-center-stage,
.order-special-center-type {
  color: #668298;
  font-size: 11px;
  font-weight: 900;
}

.order-special-center-type {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid #aac9dd;
  border-radius: 999px;
  background: #eef7fc;
  color: #2d7099;
  letter-spacing: .02em;
}

.order-special-center-status {
  display: inline-grid;
  min-height: 21px;
  place-items: center;
  padding: 0 8px;
  border: 1px solid #e0b76f;
  border-radius: 11px;
  background: #fff4d8;
  color: #8c611c;
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.order-special-center-item.ready .order-special-center-status {
  border-color: #73a7c6;
  background: #eaf7ff;
  color: #256c95;
}

.order-special-center-trigger {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 14px 16px 0;
  padding: 11px 13px;
  border: 1px solid #d4e3ed;
  border-radius: 5px;
  background: linear-gradient(120deg, #f8fbfd, #eef6fb);
}

.order-special-center-trigger > span {
  color: #7b8f9d;
  font-size: 10px;
  font-weight: 950;
}

.order-special-center-trigger > strong {
  color: #315b79;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.45;
}

.order-special-center-trigger.time {
  border-color: #e2c98f;
  background: linear-gradient(120deg, #fffaf0, #fff4d9);
}

.order-special-center-trigger.time > span { color: #9a742f; }
.order-special-center-trigger.time > strong { color: #76541a; }

.order-special-center-requirement {
  display: grid;
  gap: 6px;
  padding: 18px 16px 8px;
}

.order-special-center-requirement > b {
  color: #8a6a32;
  font-size: 10px;
  font-weight: 950;
}

.order-special-center-requirement > strong {
  color: #173f62;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.52;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.order-special-center-state {
  margin: 0;
  padding: 0 16px;
  color: #6d8496;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.55;
}

.order-special-center-details {
  display: grid;
  gap: 5px;
  margin: 13px 16px 0;
  padding: 11px 13px;
  border: 1px dashed #cbdbe6;
  border-radius: 4px;
  background: #f8fbfd;
}

.order-special-center-details > span {
  color: #5f7789;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.order-special-center-item > footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 17px;
  padding: 13px 16px;
  border-top: 1px solid #e1ebf1;
  background: linear-gradient(#fbfdfe, #f0f6fa);
}

.order-special-center-item > footer > span { flex: 1; }

.order-special-center-item .default-cancel-btn,
.order-special-center-item .default-confirm-btn {
  position: static;
  right: auto;
  bottom: auto;
  min-width: 108px;
}

.order-special-center-delete {
  min-height: 30px;
  border: 0;
  background: transparent;
  color: #9a6363;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.order-special-event-center-empty {
  min-height: 174px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  border: 1px dashed #c8d9e5;
  border-radius: 6px;
  background: #fbfdff;
  text-align: center;
}

.order-special-event-center-empty > b {
  color: #294f70;
  font-size: 16px;
  font-weight: 950;
}

.order-special-event-center-empty > span {
  color: #748999;
  font-size: 12px;
  font-weight: 750;
}

.order-special-event-center-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 14px 20px 20px;
  border-top: 1px solid #cfdfeb;
  background: linear-gradient(#f9fcfe, #edf4f8);
}

.order-special-event-center-actions .default-cancel-btn,
.order-special-event-center-actions .default-confirm-btn {
  position: static;
  right: auto;
  bottom: auto;
  min-width: 128px;
}

.order-special-panel > summary,
.order-special-item > summary,
.order-special-completed > summary,
.order-history-details > summary,
.order-history-action-menu > summary {
  list-style: none;
  cursor: pointer;
}

.order-special-panel > summary::-webkit-details-marker,
.order-special-item > summary::-webkit-details-marker,
.order-special-completed > summary::-webkit-details-marker,
.order-history-details > summary::-webkit-details-marker,
.order-history-action-menu > summary::-webkit-details-marker { display: none; }

.order-special-panel > summary {
  min-height: 74px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(104deg, #ffffff 0%, #fbfdff 68%, #f7fbfd 100%);
}

.order-special-summary-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #cf9d48;
  border-bottom-color: #9d6c1d;
  border-radius: 6px;
  background: linear-gradient(#fff9e9, #f0c872);
  color: #785010;
  font-size: 16px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #e2b76c;
}

.order-special-summary-copy > strong {
  display: block;
  margin-top: 2px;
  color: #234e70;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.3;
}

.order-special-summary-copy > em {
  display: block;
  margin-top: 3px;
  color: #72889a;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
}

.order-special-panel > summary > b {
  color: #58748b;
  font-size: 12px;
  font-weight: 950;
}

.order-special-panel[open] > summary > b { font-size: 0; }
.order-special-panel[open] > summary > b::after { content: "收起"; font-size: 12px; }

.order-special-panel-body {
  padding: 12px 18px 18px;
  border-top: 1px solid #e3edf3;
  background: #fff;
}

.order-special-group + .order-special-group { margin-top: 15px; }

.order-special-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 1px 7px 10px;
  border-left: 3px solid #4a98c4;
}

.order-special-group > header .order-special-group-stage {
  color: #8094a3;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.3;
}

.order-special-group > header > span:not(.order-special-group-stage),
.order-special-completed > summary span {
  color: #68869a;
  font-size: 11px;
  font-weight: 900;
}

.order-special-item {
  border: 1px solid #d9e6ee;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 #fff, 0 2px 7px rgba(25, 71, 101, .04);
}

.order-special-item + .order-special-item { margin-top: 7px; }

.order-special-item > summary {
  min-height: 68px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.order-special-state {
  display: inline-grid;
  place-items: center;
  min-height: 22px;
  border: 1px solid #e0b76f;
  border-radius: 3px;
  background: #fff4d8;
  color: #8c611c;
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.order-special-item-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.order-special-item-copy > em {
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  color: #37799f;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .03em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-special-item-copy > strong {
  min-width: 0;
  color: #173f62;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.order-special-item-copy > small {
  overflow: hidden;
  color: #7b91a0;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-special-item-copy > small > b {
  color: #8b6a31;
  font-weight: 950;
}

.order-special-item > summary > time {
  color: #8495a3;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.order-special-item > summary > i {
  color: #9a7c4b;
  font-size: 16px;
  font-style: normal;
  font-weight: 950;
  transform: rotate(0deg);
  transition: transform .16s ease;
}

.order-special-item[open] > summary > i { transform: rotate(180deg); }
.order-special-item.ready .order-special-state { border-color: #73a7c6; background: #eaf7ff; color: #256c95; }
.order-special-item.done { border-color: #d7e1e8; background: #fbfcfd; }
.order-special-item.done .order-special-state { border-color: #c5d3dd; background: #f1f5f8; color: #6d8495; }

.order-special-item-body {
  padding: 10px 12px 12px 66px;
  border-top: 1px dashed #dce7ee;
  background: #fbfdff;
}

.order-special-full-requirement {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #d6e4ed;
  border-left: 3px solid #4a98c4;
  border-radius: 4px;
  background: #fff;
}

.order-special-full-requirement > b {
  color: #7a8f9f;
  font-size: 10px;
  font-weight: 950;
}

.order-special-full-requirement > p {
  margin: 0;
  color: #173f62;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.order-special-remark {
  margin: 0;
  color: #405b6f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}

.order-special-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 8px;
}

.order-special-meta > span {
  color: #77909f;
  font-size: 10px;
  font-weight: 800;
}

.order-special-detail-list,
.order-history-details > div {
  display: grid;
  gap: 5px;
}

.order-special-detail-list span,
.order-history-details > div span {
  color: #657a8b;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
}

.order-special-item .order-flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.order-special-item .order-flow-action,
.order-history-action-menu .order-flow-action {
  min-height: 27px;
  padding: 0 10px;
  border: 1px solid #8fb0d0;
  border-bottom-color: #5f85ad;
  border-radius: 4px;
  background: linear-gradient(#ffffff 0%, #e8f3ff 48%, #c6dcf4 100%);
  color: #17436e;
  font-family: inherit;
  font-size: 11px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 0 #8aadd0, 0 5px 10px rgba(20,62,102,.1);
}

.order-special-completed {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #d8e1e7;
}

.order-special-completed > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #718695;
  font-size: 12px;
  font-weight: 900;
}

.order-special-completed > div { margin-top: 9px; }
.order-special-empty { color: #80919e; font-size: 12px; font-weight: 800; }

.order-workflow-history {
  background: #fff;
}

.order-workflow-history > .order-workflow-section-heading {
  flex-wrap: wrap;
}

.order-workflow-history > .order-workflow-section-heading > div:first-child {
  flex: 0 0 auto;
}

.order-workflow-history .order-history-mode-switch {
  flex: 1 1 360px;
  flex-wrap: wrap;
  justify-content: center;
}

.order-history-mode-switch > button:focus-visible,
.order-history-mail-audit:focus-visible,
.order-support-file-action:focus-visible,
.order-support-detail-more > summary:focus-visible {
  outline: 3px solid rgba(32, 128, 181, .26);
  outline-offset: 2px;
}

.order-history-list {
  position: relative;
  padding: 6px 20px 18px;
}

.order-history-row {
  position: relative;
  display: grid;
  grid-template-columns: 118px 16px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 10px;
  min-height: 56px;
  padding: 12px 0;
  border-bottom: 1px solid #e4edf3;
}

.order-history-row:last-child { border-bottom: 0; }

/* A history row has one action cell. Keeping the direct rollback and the
 * more-actions trigger inside it prevents the trigger from becoming an
 * implicit new grid row on narrower screens. */
.order-history-actions {
  display: inline-flex;
  align-items: flex-start;
  justify-self: end;
  align-self: start;
  gap: 6px;
  min-width: max-content;
  white-space: nowrap;
}

.order-history-actions > .order-flow-actions { margin-left: 0; }
.order-history-actions > .order-history-action-menu { margin-left: 0; }

.order-history-row > time {
  color: #718799;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.5;
  white-space: nowrap;
}

/* Core marks ship departure as the fixed terminal fact. Emphasize only the
   business time, keeping the rest of the history easy to scan. */
.order-history-row > time.timeline-ship-departed-time {
  color: #c95454;
  font-weight: 950;
}

.order-history-dot {
  position: relative;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #7ea3bd;
  box-shadow: 0 0 0 1px #a8c1d3;
}

.order-history-dot::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 3px;
  width: 1px;
  height: 44px;
  background: #d6e3eb;
}

.order-history-row:last-child .order-history-dot::after { display: none; }

.order-history-content > strong {
  display: block;
  color: #29495f;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
}

.order-history-row.timeline-text-imp .order-history-content > strong { color: #c95454; }

/* Customer-initiated requests are records from the shared Task Center, not workflow blockers. */
.order-history-row.timeline-client-task {
  grid-template-columns: 15px minmax(0, 1fr) auto;
  min-height: 62px;
  padding: 10px 0;
}

.order-history-row.timeline-client-task .order-history-dot {
  margin-top: 14px;
  background: #d39b22;
  box-shadow: 0 0 0 1px #e6bf68;
}

.order-history-row.timeline-client-task .order-history-dot::after { height: 54px; }

.order-history-row.timeline-client-task .order-history-content {
  margin-left: 8px;
  padding: 9px 13px 10px;
  border: 1px solid #ebcf91;
  border-left: 3px solid #d69a1b;
  border-radius: 5px;
  background: linear-gradient(100deg, #fffdf7 0%, #fff7e3 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 7px rgba(144,101,24,.08);
}

.order-history-client-task-time {
  display: block;
  margin-bottom: 2px;
  color: #8d6a2a;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.order-history-row.timeline-client-task .order-history-content > strong { color: #304d61; }
.order-history-row.timeline-client-task .order-history-inline-detail { color: #806c45; }

.order-history-inline-detail {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #8a9ba7;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep the completed-loading photo download on the same detail line as the
 * loading time. It is supporting evidence, not a separate workflow row. */
.order-history-detail-photo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 2px;
}

.order-history-detail-photo-row .order-history-inline-detail {
  flex: 0 1 auto;
  min-width: 0;
  margin-top: 0;
}

/* A multi-factory warehousing record is one workflow action with several
 * independent factory facts. Keep every fact visibly separate instead of
 * joining it into one long, ellipsized history sentence. */
.order-history-factory-detail-list {
  display: grid;
  grid-template-columns: fit-content(120px) max-content minmax(0, 1fr);
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
}

.order-history-factory-detail {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  column-gap: 12px;
  padding-left: 10px;
  border-left: 2px solid #8eb6cf;
  color: #647f91;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.order-history-factory-detail > span {
  min-width: 0;
}

.order-history-factory-detail.is-unstructured {
  display: block;
}

.order-history-detail-photo-row .trucking-photo-timeline-pill {
  flex: 0 0 auto;
  margin-top: 0;
}

.trucking-photo-timeline-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  margin-top: 5px;
  padding: 0 10px;
  border: 1px solid #a6c0d3;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #edf5fa 100%);
  color: #285b7e;
  font-size: 12px;
  font-weight: 800;
  line-height: 23px;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(43,80,106,.12);
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.trucking-photo-timeline-pill:hover {
  border-color: #729fbd;
  background: linear-gradient(180deg, #ffffff 0%, #e4f1f8 100%);
  color: #1f4e70;
  transform: translateY(-1px);
}

.order-sub-flow-attachment-link.is-trucking-photo {
  border-left-color: #3a91a9;
  background: linear-gradient(90deg, #f7fcfe 0%, #ffffff 58%);
}

.order-sub-flow-attachment-link.is-trucking-photo .order-sub-flow-attachment-type {
  border-color: #8bbdcc;
  background: #e8f7fa;
  color: #2d6b7c;
}

.timeline .trucking-photo-timeline-pill {
  margin-left: 8px;
}

.order-history-detail-photo-row .trucking-photo-timeline-pill {
  margin-left: 0;
}

.order-client-commission-history {
  padding-top: 14px;
  background:
    radial-gradient(circle at 94% 3%, rgba(216, 169, 73, .09), transparent 26%),
    linear-gradient(180deg, #fffdf9 0%, #f8fbfd 100%);
}

.order-client-commission-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #d7b66e;
  border-bottom-color: #bd8e31;
  background: linear-gradient(#fffdf6, #f4dfad);
  color: #805b16;
  font-weight: 950;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #e5c987, 0 5px 10px rgba(121, 85, 22, .09);
}
.order-client-commission-day + .order-client-commission-day { margin-top: 18px; }

.order-client-commission-day > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 8px;
  border-bottom: 1px solid #e5dcc9;
}

.order-client-commission-day > header > strong { color: #5f5b52; font-size: 12px; font-weight: 950; letter-spacing: .02em; }
.order-client-commission-day > header > span { color: #9a8b6d; font-size: 11px; font-weight: 800; }
.order-client-commission-list { display: grid; gap: 9px; padding-top: 9px; }

.order-client-commission-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 80px;
  padding: 13px 14px 13px 12px;
  border: 1px solid #e5d7b9;
  border-left: 3px solid #cf9a31;
  border-radius: 9px;
  background: linear-gradient(108deg, #fff 0%, #fffdfa 62%, #fff8e8 100%);
  box-shadow: inset 0 1px 0 #fff, 0 5px 13px rgba(78, 70, 53, .06);
}

.order-client-commission-mark { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; }
.order-client-commission-copy { min-width: 0; display: grid; gap: 6px; }
.order-client-commission-copy > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.order-client-commission-copy > div > strong { color: #344e60; font-size: 14px; font-weight: 950; line-height: 1.45; }
.order-client-commission-copy > div > span { min-height: 21px; display: inline-flex; align-items: center; border: 1px solid #e0c88e; border-radius: 999px; background: #fff7e2; color: #8b681f; padding: 0 8px; font-size: 10px; font-weight: 900; }
.order-client-commission-copy > p { margin: 0; color: #716a5c; font-size: 12px; font-weight: 750; line-height: 1.55; }
.order-client-commission-copy > footer { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 14px; color: #95866c; font-size: 11px; font-weight: 750; }
.order-client-commission-copy > footer time { font-style: normal; }

.order-main-destination-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #bfd3df;
}

.order-main-destination-heading { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 10px; }
.order-main-destination-heading > span { color: #8194a2; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.order-main-destination-heading > strong { color: #315f7d; font-size: 13px; font-weight: 950; }

.order-support-history {
  padding-top: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f9fc 100%);
}

.order-support-day + .order-support-day { margin-top: 18px; }

.order-support-day > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 8px;
  border-bottom: 1px solid #dce8ef;
}

.order-support-day > header > strong {
  color: #3a5e78;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
}

.order-support-day > header > span {
  color: #8296a5;
  font-size: 11px;
  font-weight: 800;
}

.order-support-card-list {
  display: grid;
  gap: 9px;
  padding-top: 9px;
}

.order-support-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  min-height: 78px;
  padding: 12px 12px 12px 11px;
  border: 1px solid #d5e3ec;
  border-left: 3px solid #7ca8c1;
  border-radius: 8px;
  background: linear-gradient(105deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: inset 0 1px 0 #fff, 0 4px 11px rgba(31, 76, 108, .06);
}

.order-support-card.document { border-left-color: #438eb6; }
.order-support-card.customer { border-left-color: #6c8fc0; }
.order-support-card.customs { border-left-color: #4a9a88; }
.order-support-card.reminder { border-left-color: #b7893a; }
.order-support-card.attention { border-left-color: #bd6c58; background: linear-gradient(105deg, #fff 0%, #fffaf8 100%); }

.order-support-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #bdd2df;
  border-bottom-color: #99b9cc;
  border-radius: 8px;
  background: linear-gradient(#f9fdff, #e7f2f8);
  color: #2d6f98;
  font-size: 13px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #d4e3ec;
}

.order-support-card.customer .order-support-mark { border-color: #c1cde0; background: linear-gradient(#fbfcff, #edf1f8); color: #526f9c; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #dfe5ef; }
.order-support-card.customs .order-support-mark { border-color: #b8d8cf; background: linear-gradient(#fbfffd, #e7f5f0); color: #287767; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #d6ebe4; }
.order-support-card.reminder .order-support-mark { border-color: #dfc994; background: linear-gradient(#fffdf7, #f8efd9); color: #88651e; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #eee1c2; }
.order-support-card.attention .order-support-mark { border-color: #ddb9ad; background: linear-gradient(#fffdfa, #f9e9e3); color: #9a4e3b; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #efdbd4; }

.order-support-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.order-support-card-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.order-support-card-title > strong {
  color: #294c65;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.45;
}

.order-support-category,
.order-support-status {
  min-height: 21px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #c8d9e4;
  border-radius: 999px;
  background: #f1f7fa;
  color: #55788e;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.order-support-status {
  border-color: #d9e2e8;
  background: #f8fafb;
  color: #768b9a;
}

.order-support-card.attention .order-support-status {
  border-color: #ddb9ad;
  background: #fff3ee;
  color: #98513e;
}

.order-support-card.actionable .order-support-status {
  border-color: #d8bd7b;
  background: #fff8e7;
  color: #8c641d;
}

.order-support-detail-list,
.order-support-detail-more > div {
  display: grid;
  gap: 3px;
}

.order-support-detail-list > span,
.order-support-detail-more > div > span {
  color: #667e90;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.order-support-detail-more > summary {
  width: fit-content;
  list-style: none;
  color: #37789f;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.5;
  cursor: pointer;
}

.order-support-detail-more > summary::-webkit-details-marker { display: none; }
.order-support-detail-more > summary::after { content: "⌄"; margin-left: 5px; }
.order-support-detail-more[open] > summary::after { content: "⌃"; }
.order-support-detail-more > div { margin-top: 6px; padding: 8px 10px; border: 1px solid #dce8ef; border-radius: 6px; background: #f7fbfd; }

.order-support-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.order-support-meta > span,
.order-support-meta > time {
  color: #8395a2;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.order-support-actions,
.order-history-inline-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.order-support-file-action {
  min-height: 30px;
  border: 1px solid #91b8cf;
  border-bottom-color: #6995b0;
  border-radius: 6px;
  background: linear-gradient(#ffffff 0%, #eaf5fb 52%, #d8eaf4 100%);
  color: #27688f;
  padding: 0 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b8d1df, 0 5px 10px rgba(30, 81, 113, .08);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.order-support-file-action:hover {
  transform: translateY(-1px);
  border-color: #679fbd;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #a9c8d9, 0 8px 13px rgba(30, 81, 113, .12);
}

.order-support-card.order-history-row-actions-up .order-history-action-menu > div {
  top: auto;
  bottom: 34px;
  transform-origin: right bottom;
}

.order-history-support-row {
  border-left: 3px solid #8eb2c8;
  padding-left: 10px;
  background: linear-gradient(90deg, rgba(239, 247, 251, .72), rgba(255, 255, 255, 0) 72%);
}

.order-history-support-row .order-history-dot {
  background: #f4f8fa;
  box-shadow: 0 0 0 1px #9eb9ca;
}

.order-history-support-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.order-history-support-heading > strong {
  color: #3a5b70;
  font-size: 13px;
  font-weight: 900;
}

.order-history-support-heading > span {
  border-radius: 999px;
  background: #edf5f9;
  color: #5d7e92;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 900;
}

.order-history-support-row .order-history-content > small {
  display: block;
  margin-top: 3px;
  color: #8395a2;
  font-size: 10px;
  font-weight: 750;
}

.order-all-history-list::before {
  content: "最近更新优先";
  display: block;
  padding: 8px 0 2px;
  color: #8294a1;
  font-size: 10px;
  font-weight: 850;
  text-align: right;
}

.order-change-log-row {
  grid-template-columns: 118px 16px minmax(0, 1fr);
  min-height: 40px;
  align-items: center;
  padding: 7px 0;
}

.order-change-log-row .order-history-dot {
  margin-top: 0;
  background: #4c92bd;
  box-shadow: 0 0 0 1px #83b4cf;
}

.order-change-log-row .order-history-dot::after {
  top: 11px;
  height: 30px;
}

.order-change-log-row .order-history-content {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.order-change-log-row .order-history-content > strong {
  flex: 0 0 auto;
  color: #285f85;
  font-size: 12px;
}

.order-change-log-actor {
  flex: 0 0 auto;
  color: #637f92;
  font-size: 10px;
  font-weight: 850;
}

.order-change-log-detail {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
  color: #748b9b;
}

.order-history-action-menu {
  position: relative;
  margin-left: 8px;
}

.order-history-action-menu > summary {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #b8ccdc;
  border-radius: 4px;
  background: linear-gradient(#fff, #edf5fa);
  color: #4c7691;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(27, 77, 110, .08);
}

.order-history-action-menu > div {
  position: absolute;
  z-index: 8;
  top: 34px;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  min-width: 94px;
  gap: 6px;
  padding: 9px;
  border: 1px solid #a8c3d7;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(24, 66, 96, .16);
}

/* Main-flow modification and rollback are peer controls.  The server still
 * emits only the final safe rollback, while every permitted modification is
 * a real text button instead of an ambiguous three-dot trigger. */
.order-history-row .order-history-actions > .order-flow-actions .order-flow-action {
  min-width: 52px;
  height: 26px;
  min-height: 26px;
  padding: 0 11px;
  border: 1px solid #9dbdd2;
  border-bottom-color: #82a8c1;
  border-radius: 999px;
  background: #f1f8fc;
  color: #2d6d94;
  font-family: inherit;
  font-size: 11px;
  font-weight: 850;
  line-height: 24px;
  letter-spacing: .02em;
  box-shadow: none;
  cursor: pointer;
}

.order-history-row .order-history-actions > .order-flow-actions .order-flow-action:hover {
  transform: none;
  border-color: #70a1be;
  background: #e4f2f9;
  box-shadow: none;
}

.order-history-row .order-history-actions > .order-flow-actions .order-flow-action[data-action^="delete"] {
  border-color: #dfb9b3;
  border-bottom-color: #dfb9b3;
  background: #fff8f7;
  color: #9a4941;
}

.order-history-row .order-history-actions > .order-flow-actions .order-flow-action[data-action^="delete"]:hover {
  transform: none;
  border-color: #c9877e;
  background: #fbedeb;
  box-shadow: none;
}

/* The final records sit against the list edge: open their action menus upward. */
.order-history-row.order-history-row-actions-up .order-history-action-menu > div {
  top: auto;
  bottom: 34px;
  transform-origin: right bottom;
}

.order-history-empty {
  padding: 24px 0;
  color: #8293a0;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 980px) {
  .order-workflow-topline { align-items: flex-start; flex-direction: column; }
  .order-workflow-command { width: 100%; }
  .order-workflow-command .order-flow-toolbar { justify-content: flex-start; }
  .order-workflow-content { grid-template-columns: 1fr; }
  .order-workflow-side { border-right: 0; border-bottom: 1px solid #d2e0e9; }
}

@media (max-width: 620px) {
  .order-workflow-topline,
  .order-workflow-spine { padding-right: 13px; padding-left: 13px; }
  .order-workflow-stage-slot { min-width: 92px; flex-basis: 92px; }
  .order-workflow-stage-slot.has-inline-actions { min-width: 122px; flex-basis: 122px; }
  .order-workflow-stage { min-width: 92px; flex-basis: 92px; }
  .order-workflow-command .order-flow-launcher { min-width: 104px; }
  .order-workflow-section-heading,
  .order-special-panel > summary,
  .order-special-panel-body,
  .order-document-shelf .generated-document-list,
  .order-sub-flow-attachment-list,
  .order-history-list { padding-right: 13px; padding-left: 13px; }
  .order-sub-flow-attachment-link { grid-template-columns: 78px minmax(0, 1fr) auto auto; }
  .order-history-row { grid-template-columns: 1fr 14px minmax(0, 1fr) auto; column-gap: 7px; }
  .order-history-row > time { font-size: 10px; }
  .order-change-log-row { grid-template-columns: 88px 14px minmax(0, 1fr); }
  .order-change-log-row .order-history-content { gap: 5px 8px; flex-wrap: wrap; }
  .order-change-log-row .order-change-log-detail { flex-basis: 100%; }
  .order-workflow-history .order-history-mode-switch { flex-basis: 100%; justify-content: flex-start; }
  .order-workflow-history > .order-workflow-section-heading { align-items: flex-start; }
  .order-support-card { grid-template-columns: 34px minmax(0, 1fr); }
  .order-support-mark { width: 31px; height: 31px; }
  .order-support-actions { grid-column: 2; justify-content: flex-start; }
  .order-support-card-title > strong { flex-basis: 100%; }
  .order-client-commission-card { grid-template-columns: 34px minmax(0, 1fr); }
  .order-client-commission-mark { width: 31px; height: 31px; }
  .order-history-inline-actions { align-items: flex-end; flex-direction: column; }
  .order-special-item > summary { grid-template-columns: 44px minmax(0, 1fr) 14px; }
  .order-special-item > summary > time { display: none; }
  .order-special-item-body { padding-left: 12px; }
}

.order-sub-flow-modal {
  position: fixed;
  inset: 0;
  z-index: 3180;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(14, 31, 48, .42);
  backdrop-filter: blur(4px);
}

.order-sub-flow-modal.hidden { display: none; }

.order-sub-flow-card {
  position: relative;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 42px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #94b4ce;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f7fb 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 25px 58px rgba(11,39,64,.28);
}

.order-sub-flow-loading {
  min-height: 160px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #275270;
  font-size: 14px;
  font-weight: 900;
}

.sub-flow-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #c3d9e9;
  border-top-color: #2f7ead;
  border-radius: 50%;
  animation: sub-flow-spin .75s linear infinite;
}

@keyframes sub-flow-spin { to { transform: rotate(360deg); } }

.order-sub-flow-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 18px 60px 17px 20px;
  border-bottom: 1px solid #b7cee0;
  background: linear-gradient(110deg, #f9fcff 0%, #e7f3fb 100%);
}

.order-sub-flow-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #5190bb;
  border-bottom-color: #2a668f;
  border-radius: 7px;
  background: linear-gradient(#6faed5, #397fb1 57%, #286d9c);
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 3px 0 #28658f, 0 8px 15px rgba(25,77,113,.13);
}

.order-sub-flow-head small,
.sub-flow-reminder-copy > span {
  display: block;
  color: #5b7690;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}

.order-sub-flow-head h3 {
  margin: 2px 0 0;
  color: #1c456b;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.25;
}

.order-sub-flow-head p {
  margin: 4px 0 0;
  color: #627f94;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.order-sub-flow-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 20px;
  overflow: auto;
}

.order-sub-flow-menu-item {
  min-height: 82px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #b3cce0;
  border-bottom-color: #8baec9;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #eff7fc);
  color: #244e70;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #d0deea, 0 7px 13px rgba(30,73,104,.07);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.order-sub-flow-menu-item:hover {
  transform: translateY(-2px);
  border-color: #5792bc;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #b8ccdc, 0 10px 18px rgba(30,73,104,.12);
}

.order-sub-flow-menu-item i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #b7cedf;
  border-radius: 50%;
  background: #edf5fa;
  color: #2874a8;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.order-sub-flow-menu-item span { min-width: 0; }
.order-sub-flow-menu-item b,
.order-sub-flow-menu-item small { display: block; }
.order-sub-flow-menu-item b { color: #1e4b70; font-size: 14px; font-weight: 950; line-height: 1.35; }
.order-sub-flow-menu-item small { margin-top: 4px; color: #6a8497; font-size: 11px; font-weight: 700; line-height: 1.4; }
.order-sub-flow-menu-item em { color: #347bac; font-size: 27px; font-style: normal; font-weight: 400; }

.order-sub-flow-body {
  min-height: 164px;
  padding: 18px 20px;
  overflow: auto;
  background: #f7fbfe;
}

.order-sub-flow-foot {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid #c6d8e6;
  background: linear-gradient(#fdfefe, #eaf3f9);
}

.order-sub-flow-foot > span { color: #698196; font-size: 11px; font-weight: 750; line-height: 1.45; }
.order-sub-flow-foot > div { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.order-sub-flow-foot .default-cancel-btn,
.order-sub-flow-foot .default-confirm-btn {
  position: static;
  min-width: 96px;
  width: auto;
  height: 36px;
  min-height: 36px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
}
.order-sub-flow-foot .default-confirm-btn:disabled {
  cursor: not-allowed;
  opacity: .52;
  filter: grayscale(.22);
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 0 rgba(45,97,135,.3);
}

.sub-flow-file-intro {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  gap: 13px;
  align-items: baseline;
  margin-bottom: 13px;
  padding: 12px 14px;
  border-left: 4px solid #2b8ec3;
  background: #e9f5fb;
}

.sub-flow-file-intro b { color: #214c6e; font-size: 14px; font-weight: 950; }
.sub-flow-file-intro span { color: #5f788b; font-size: 12px; font-weight: 700; line-height: 1.5; }
.sub-flow-file-targets { display: grid; gap: 12px; }

.sub-flow-file-target {
  border: 1px solid #b7cfe1;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 5px 12px rgba(32,70,99,.06);
}

.sub-flow-file-target > header {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 8px 12px;
  border-bottom: 1px solid #d6e3ed;
  background: linear-gradient(#fbfdff, #eef6fb);
}

.sub-flow-file-target > header span { color: #315e82; font-size: 12px; font-weight: 950; }
.sub-flow-file-target > header b { color: #1c456b; font-size: 13px; font-weight: 950; }
.sub-flow-file-target > header em {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid #bfd4e2;
  border-radius: 999px;
  background: #f8fcff;
  color: #58778d;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.sub-flow-file-list { padding: 8px 12px 0; }

.sub-flow-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 0;
  border-bottom: 1px dashed #d5e2eb;
}
.sub-flow-file-row:last-child { border-bottom: 0; }
.sub-flow-file-index {
  width: 25px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 4px;
  background: #e9f3f9;
  color: #50758e;
  font-size: 9px;
  font-weight: 950;
}
.sub-flow-file-download {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: #176ca4;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sub-flow-file-download small {
  display: block;
  margin-top: 2px;
  color: #8399a9;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}
.sub-flow-file-download:hover { color: #0b86c6; }
.sub-flow-file-download-all {
  min-height: 27px;
  margin: 0 0 6px;
  padding: 0 10px;
  border: 1px solid #78a4c4;
  border-bottom-color: #4f7f9f;
  border-radius: 999px;
  background: linear-gradient(#fafeff, #dceefa);
  color: #28618b;
  font-family: inherit;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(61,115,151,.22);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.sub-flow-file-download-all:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(61,115,151,.28), 0 5px 10px rgba(41,103,146,.13);
}
.sub-flow-file-delete {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid #c98f90;
  border-bottom-color: #a66c6d;
  border-radius: 4px;
  background: linear-gradient(#fff, #fceeee);
  color: #a6464a;
  font-family: inherit;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #dfb2b3;
}
.sub-flow-file-empty,
.sub-flow-file-fixed { margin: 0; padding: 3px 0 9px; color: #7890a2; font-size: 12px; font-weight: 700; }
.sub-flow-file-fixed { padding: 8px 12px 10px; color: #8a6737; }

.sub-flow-file-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 9px 12px;
  border-top: 1px solid #e0ebf2;
  background: #fbfdff;
}
.sub-flow-file-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sub-flow-file-pick {
  min-width: 84px;
  min-height: 29px;
  border: 1px solid #4e8bb5;
  border-bottom-color: #2c668e;
  border-radius: 4px;
  background: linear-gradient(#75b3d7, #3c84b3 56%, #2c709e);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 #2b638a, 0 5px 9px rgba(30,81,115,.12);
  transition: transform .15s ease, filter .15s ease;
}
.sub-flow-file-pick:hover { transform: translateY(-1px); filter: brightness(1.04); }
.sub-flow-file-upload span { min-width: 0; color: #647f94; font-size: 12px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sub-flow-inline-status {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #8dc5aa;
  border-left: 4px solid #2c9860;
  border-radius: 5px;
  background: #edf9f2;
  color: #226b47;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.5;
}

.sub-flow-inline-status.is-error {
  border-color: #ddb0ae;
  border-left-color: #b74d4a;
  background: #fff3f2;
  color: #8f3e3c;
}

.sub-flow-subscribe-intro,
.sub-flow-reminder-copy {
  margin-bottom: 14px;
  padding: 15px 16px;
  border: 1px solid #b7d0e2;
  border-radius: 6px;
  background: linear-gradient(135deg, #f8fcff, #e9f5fb);
}
.sub-flow-subscribe-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sub-flow-subscribe-intro > span { color: #2a83b7; font-size: 11px; font-weight: 950; }
.sub-flow-subscribe-intro b,
.sub-flow-reminder-copy b { display: block; margin-top: 4px; color: #1f4b70; font-size: 17px; font-weight: 950; }
.sub-flow-subscribe-intro p,
.sub-flow-reminder-copy p { margin: 7px 0 0; color: #60798d; font-size: 12px; font-weight: 700; line-height: 1.6; }
.sub-flow-subscribe-intro > div > span { color: #2a83b7; font-size: 11px; font-weight: 950; }
.sub-flow-subscribe-intro > strong {
  flex: 0 0 auto;
  border: 1px solid #80b5d5;
  border-radius: 999px;
  background: #fff;
  color: #1f6f9f;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}
.sub-flow-subscribe-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sub-flow-subscribe-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 11px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid #b9cfdf;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(32,70,99,.05);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sub-flow-subscribe-option:hover:not(.disabled) { border-color: #78afd1; background: #f7fbfe; transform: translateY(-1px); }
.sub-flow-subscribe-option input { position: absolute; opacity: 0; pointer-events: none; }
.sub-flow-subscribe-step {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #91b5ce;
  border-radius: 50%;
  background: #f2f8fc;
  color: #3e6b88;
  font-size: 11px;
  font-weight: 950;
}
.sub-flow-subscribe-copy b,
.sub-flow-subscribe-copy small { display: block; }
.sub-flow-subscribe-option b { color: #234f72; font-size: 13px; font-weight: 950; line-height: 1.4; }
.sub-flow-subscribe-option small { margin-top: 2px; color: #71879a; font-size: 11px; font-weight: 700; line-height: 1.45; }
.sub-flow-subscribe-option em { border: 1px solid #9ab6c8; border-radius: 999px; color: #54758b; font-size: 10px; font-style: normal; font-weight: 950; padding: 3px 7px; white-space: nowrap; }
.sub-flow-subscribe-option.is-selected { border-color: #2a83b7; background: linear-gradient(135deg, #eaf6fc, #fff); box-shadow: inset 4px 0 0 #2a83b7, 0 6px 14px rgba(42,131,183,.13); }
.sub-flow-subscribe-option.is-selected .sub-flow-subscribe-step { border-color: #2a83b7; background: #2a83b7; color: #fff; }
.sub-flow-subscribe-option.is-selected em { border-color: #2a83b7; background: #2a83b7; color: #fff; }
.sub-flow-subscribe-option.disabled { background: #f1f5f8; cursor: not-allowed; opacity: .78; }
.sub-flow-subscribe-option.disabled .sub-flow-subscribe-step { border-color: #c5d2dc; background: #e5edf2; color: #8596a4; }
.sub-flow-subscribe-option.disabled em { border-color: #c9d4dc; background: #e5edf2; color: #788995; }
.sub-flow-subscribe-recovery {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #e5b8a2;
  border-radius: 6px;
  background: linear-gradient(135deg, #fffaf3, #fff0e8);
}
.sub-flow-subscribe-recovery b { display: block; color: #a84d2d; font-size: 14px; font-weight: 950; }
.sub-flow-subscribe-recovery p { margin: 6px 0 12px; color: #795d50; font-size: 12px; font-weight: 700; line-height: 1.65; }
.sub-flow-subscribe-recovery .default-confirm-btn { min-width: 190px; }

@media (max-width: 680px) {
  .sub-flow-subscribe-intro { align-items: flex-start; flex-direction: column; gap: 10px; }
  .sub-flow-subscribe-list { grid-template-columns: 1fr; }
}

.sub-flow-reminder-meta {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  margin: 0;
  border: 1px solid #b9cfe0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.sub-flow-reminder-meta dt,
.sub-flow-reminder-meta dd { margin: 0; min-height: 41px; padding: 10px 13px; border-bottom: 1px solid #d8e5ee; font-size: 12px; line-height: 1.5; }
.sub-flow-reminder-meta dt { background: #edf5fa; color: #3b6583; font-weight: 950; }
.sub-flow-reminder-meta dd { color: #284d69; font-weight: 750; word-break: break-word; }
.sub-flow-reminder-meta dt:nth-last-of-type(1),
.sub-flow-reminder-meta dd:last-child { border-bottom: 0; }
.sub-flow-form-error { margin: 0 0 12px; padding: 9px 12px; border: 1px solid #d49b9d; border-radius: 5px; background: #fff3f3; color: #8f3438; font-size: 12px; font-weight: 900; line-height: 1.5; }
.sub-flow-form-error.hidden { display: none; }

@media (max-width: 720px) {
  .order-sub-flow-modal { padding: 10px; }
  .order-sub-flow-card { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .order-sub-flow-menu { grid-template-columns: 1fr; padding: 12px; }
  .order-sub-flow-body { padding: 12px; }
  .order-sub-flow-head { padding: 14px 52px 14px 14px; }
  .order-sub-flow-foot { align-items: flex-end; }
  .order-sub-flow-foot > span { display: none; }
  .sub-flow-file-intro { grid-template-columns: 1fr; gap: 5px; }
  .sub-flow-reminder-meta { grid-template-columns: 88px minmax(0, 1fr); }
}

.order-flow-select-modal {
  position: fixed;
  inset: 0;
  z-index: 2180;
  display: grid;
  place-items: center;
  background: rgba(14, 31, 48, .32);
  backdrop-filter: blur(4px);
}

.order-flow-select-modal.hidden {
  display: none;
}

.order-workflow-stage-modal {
  position: fixed;
  z-index: 2190;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(14, 31, 48, .34);
  backdrop-filter: blur(4px);
}

.order-workflow-stage-card {
  position: relative;
  width: min(430px, calc(100vw - 40px));
  overflow: hidden;
  border: 1px solid #8fb5d2;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #eef7fc 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.97), 0 22px 48px rgba(16, 45, 72, .24);
}

.order-workflow-stage-card > header {
  padding: 21px 58px 18px 22px;
  border-bottom: 1px solid #c6d9e8;
  background: linear-gradient(112deg, #f9fcff, #e7f3fb);
}

.order-workflow-stage-card > header > span {
  display: block;
  color: #5d7d95;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.2;
}

.order-workflow-stage-card h3 {
  margin: 4px 0 0;
  color: #1c496f;
  font-size: 19px;
  font-weight: 950;
  line-height: 1.25;
}

.order-workflow-stage-card p {
  margin: 6px 0 0;
  color: #607b90;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
}

.order-workflow-stage-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  padding: 18px 22px;
}

.order-workflow-stage-options > button {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #a6c5da;
  border-bottom-color: #7fa9c6;
  border-radius: 7px;
  background: linear-gradient(#ffffff, #ecf6fb);
  color: #245678;
  padding: 12px 13px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 950;
  text-align: left;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #cadce8, 0 7px 13px rgba(30, 73, 104, .08);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.order-workflow-stage-options > button:hover {
  transform: translateY(-2px);
  border-color: #5792bc;
  background: linear-gradient(#ffffff, #e0f0f8);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #b4d0e0, 0 10px 18px rgba(30, 73, 104, .13);
}

.order-workflow-stage-options > button > i {
  color: #317dac;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

.order-workflow-stage-card > footer {
  display: flex;
  justify-content: center;
  padding: 0 22px 18px;
}

.order-workflow-stage-card > footer .default-cancel-btn { min-width: 92px; }

.order-main-flow-card {
  position: relative;
  width: min(780px, calc(100vw - 32px));
  max-height: calc(100vh - 42px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #8fb3d4;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #edf6ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 22px 48px rgba(16, 45, 72, .24);
}

.order-main-flow-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 18px 60px 17px 20px;
  border-bottom: 1px solid #b7cee0;
  background: linear-gradient(110deg, #f9fcff 0%, #e7f3fb 100%);
}

.order-main-flow-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #4c8dbc;
  border-bottom-color: #29658f;
  border-radius: 7px;
  background: linear-gradient(#84c0e0, #4b92be 57%, #296e9e);
  color: #fff;
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46), 0 3px 0 #28628d, 0 8px 15px rgba(25,77,113,.14);
}

.order-main-flow-head small {
  display: block;
  color: #5b7690;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}

.order-main-flow-head h3 {
  margin: 2px 0 0;
  color: #1c456b;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.25;
}

.order-main-flow-head p {
  margin: 4px 0 0;
  color: #627f94;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.order-main-flow-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 20px;
  overflow: auto;
  background: linear-gradient(180deg, #fafdff 0%, #f2f8fc 100%);
}

.order-main-flow-menu-entry {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.order-main-flow-menu-item {
  min-height: 76px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #b3cce0;
  border-bottom-color: #8baec9;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #eff7fc);
  color: #244e70;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #d0deea, 0 7px 13px rgba(30,73,104,.07);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}

.order-main-flow-menu-item.is-ready:hover {
  transform: translateY(-2px);
  border-color: #5792bc;
  filter: brightness(1.01);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #b8ccdc, 0 10px 18px rgba(30,73,104,.12);
}

.order-main-flow-menu-item.is-blocked {
  border-color: #d2a060;
  border-bottom-color: #ae7937;
  background: linear-gradient(#fffdf7, #fff3d9);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #ead1ad, 0 7px 13px rgba(144, 90, 29, .09);
}

.order-main-flow-menu-item.is-blocked:hover {
  transform: translateY(-2px);
  border-color: #bd7f33;
  filter: brightness(1.01);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #dfbd8b, 0 10px 18px rgba(144, 90, 29, .14);
}

.order-main-flow-menu-item.is-locked,
.order-main-flow-menu-item:disabled {
  cursor: default;
  opacity: 1;
  border-color: #d3e0ea;
  border-bottom-color: #c4d3df;
  background: linear-gradient(#f9fbfc, #f1f5f8);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #e2eaf0;
}

.order-main-flow-menu-item i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #b7cedf;
  border-radius: 50%;
  background: #edf5fa;
  color: #2874a8;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.order-main-flow-menu-item.is-locked i {
  border-color: #d1dce5;
  background: #f0f4f7;
  color: #8095a6;
}

.order-main-flow-menu-item.is-blocked i {
  border-color: #d4a05a;
  background: linear-gradient(#fffaf0, #f8d595);
  color: #8c581d;
}

.order-main-flow-menu-item span { min-width: 0; }
.order-main-flow-menu-item b,
.order-main-flow-menu-item small { display: block; }
.order-main-flow-menu-item b { color: #1e4b70; font-size: 14px; font-weight: 950; line-height: 1.35; }
.order-main-flow-menu-item small { margin-top: 4px; color: #5b839e; font-size: 11px; font-weight: 750; line-height: 1.35; }
.order-main-flow-menu-item.is-locked b { color: #6f8495; }
.order-main-flow-menu-item.is-locked small { color: #95a6b3; }
.order-main-flow-menu-item.is-blocked b { color: #7f4b1c; }
.order-main-flow-menu-item.is-blocked small { color: #a2662e; }
.order-main-flow-menu-item em { color: #347bac; font-size: 27px; font-style: normal; font-weight: 400; }
.order-main-flow-menu-item.is-locked em { color: #a5b4bf; }
.order-main-flow-menu-item.is-blocked em { color: #a66b2b; }

.order-main-flow-blocker-order {
  justify-self: start;
  padding: 3px 8px;
  border: 1px solid #b9cee0;
  border-radius: 999px;
  background: #fff;
  color: #1e6799;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
  text-decoration: none;
}

.order-main-flow-blocker-order:hover {
  border-color: #4e92bd;
  background: #eef8ff;
  color: #12577f;
}

.order-main-flow-blocker-order:focus-visible {
  outline: 3px solid rgba(41,132,186,.28);
  outline-offset: 2px;
}

.order-main-flow-foot {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid #c6d8e6;
  background: linear-gradient(#fbfdff, #eaf3f9);
}

.order-main-flow-foot > span {
  color: #6a8497;
  font-size: 12px;
  font-weight: 800;
}

.order-main-flow-foot .default-cancel-btn { min-width: 96px; }

@media (max-width: 720px) {
  .order-flow-toolbar { min-height: 52px; }
  .order-flow-launcher { min-width: 104px; height: 36px; padding: 0 11px; font-size: 12px; }
  .order-flow-launcher-special { min-width: 116px; }
  .order-main-flow-card { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .order-main-flow-head { padding: 14px 52px 14px 14px; }
  .order-main-flow-menu { grid-template-columns: 1fr; padding: 12px; }
  .order-main-flow-foot > span { display: none; }
}

@media (max-width: 620px) {
  .order-special-event-center-modal { padding: 10px; }
  .order-special-event-center-body { padding: 14px; }
  .order-special-event-center-head { min-height: 78px; padding: 14px 50px 14px 15px; }
  .order-special-event-center-head h3 { font-size: 18px; }
  .order-special-event-center-progress > em { width: 100%; margin-left: 0; }
  .order-special-center-item > footer { flex-wrap: wrap; }
  .order-special-center-item > footer > span { display: none; }
  .order-special-center-delete { margin-right: auto; }
  .order-special-event-center-actions { padding: 13px 14px 16px; }
}

/* Order-detail main-flow: a one-order-only special-event form. */
.order-specific-event-modal {
  position: fixed;
  inset: 0;
  z-index: 3220;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(14, 31, 48, .44);
  backdrop-filter: blur(5px);
}

.order-specific-event-modal.hidden {
  display: none;
}

.order-specific-event-card {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  border: 1px solid #98b5cd;
  border-radius: 7px;
  overflow: hidden;
  background: #f8fbfe;
  box-shadow: 0 28px 70px rgba(10, 38, 63, .32), inset 0 1px 0 #fff;
}

.order-specific-event-head {
  min-height: 88px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 16px 58px 16px 20px;
  border-bottom: 1px solid #c5d8e7;
  background: linear-gradient(108deg, #fff 0%, #edf5fb 68%, #e2eef7 100%);
}

.order-specific-event-mark {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #b79558;
  border-radius: 6px;
  background: linear-gradient(#fffdf7, #f2e1bc);
  color: #805817;
  font-size: 23px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 #fff, 0 4px 9px rgba(96, 67, 23, .13);
}

.order-specific-event-head small {
  display: block;
  color: #62809a;
  font-size: 10px;
  font-weight: 900;
}

.order-specific-event-head h3 {
  margin: 2px 0;
  color: #173f63;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}

.order-specific-event-head p {
  margin: 0;
  color: #56738b;
  font-size: 12px;
  font-weight: 800;
}

.order-specific-event-form {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.order-specific-event-scope {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #bdd3e3;
  border-left: 4px solid #3d89bc;
  border-radius: 5px;
  background: #f0f7fc;
}

.order-specific-event-scope b {
  color: #23577f;
  font-size: 13px;
  font-weight: 900;
}

.order-specific-event-scope span {
  color: #59758b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.order-specific-event-form > label {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.order-specific-event-form > label.hidden {
  display: none;
}

.order-specific-event-form > label > span {
  padding-top: 10px;
  color: #294f70;
  font-size: 13px;
  font-weight: 900;
}

.order-specific-event-form > label b {
  margin-left: 3px;
  color: #c43d3d;
}

.order-specific-event-form select,
.order-specific-event-form input,
.order-specific-event-form textarea {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid #a9c5dc;
  border-radius: 5px;
  background: #fff;
  color: #173d5e;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(40, 85, 118, .05), 0 1px 0 rgba(255,255,255,.9);
}

.order-specific-event-form textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.5;
}

.order-specific-event-datetime {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(132px, .8fr);
  gap: 10px 12px;
}

.order-specific-event-datetime > span {
  display: grid;
  gap: 6px;
}

.order-specific-event-datetime small {
  color: #58768e;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .02em;
}

.order-specific-event-datetime em {
  grid-column: 1 / -1;
  position: relative;
  margin-top: 1px;
  padding-left: 15px;
  color: #637f95;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
}

.order-specific-event-datetime em::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 5px;
  width: 6px;
  height: 6px;
  border: 2px solid #3f8bbb;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(63, 139, 187, .12);
}

.order-specific-event-preview {
  margin-left: 116px;
  overflow: hidden;
  border: 1px solid #bfd3e2;
  border-radius: 7px;
  background: linear-gradient(145deg, #fbfdff, #f0f7fb);
  box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgba(38, 81, 112, .07);
}

.order-specific-event-preview.hidden {
  display: none;
}

.order-specific-event-preview > header {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid #d5e2eb;
  background: rgba(233, 243, 249, .72);
}

.order-specific-event-preview > header span {
  color: #335f7f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.order-specific-event-preview > header b {
  padding: 2px 7px;
  border: 1px solid #d7bf85;
  border-radius: 999px;
  background: #fff8e8;
  color: #8b651f;
  font-size: 9px;
  font-weight: 900;
}

.order-specific-event-preview > div {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.order-specific-event-preview > div small {
  color: #648095;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
}

.order-specific-event-preview > div strong {
  color: #1d4667;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.55;
}

.order-specific-event-preview.is-ready {
  border-color: #9ebfd5;
}

.order-specific-event-preview.is-ready > div small {
  color: #2c729e;
}

.order-specific-event-preview > p {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  padding: 9px 12px;
  border-top: 1px dashed #c8d9e5;
  color: #637f93;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.order-specific-event-preview > p i {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #3f88b8;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.order-specific-event-form select:focus,
.order-specific-event-form input:focus,
.order-specific-event-form textarea:focus {
  border-color: #4b91c2;
  box-shadow: 0 0 0 3px rgba(68, 142, 190, .13), inset 0 1px 2px rgba(40, 85, 118, .05);
}

.order-specific-event-error {
  margin: -2px 0 0 116px;
  border: 1px solid #d8aaaa;
  border-radius: 5px;
  background: #fff3f3;
  color: #a13d3d;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.order-specific-event-error.hidden {
  display: none;
}

.order-specific-event-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 14px 20px 20px;
  border-top: 1px solid #cfdfeb;
  background: linear-gradient(#f9fcfe, #edf4f8);
}

.order-specific-event-actions .default-cancel-btn,
.order-specific-event-actions .default-confirm-btn {
  min-width: 118px;
}

@media (max-width: 620px) {
  .order-specific-event-modal { padding: 10px; }
  .order-specific-event-form { padding: 16px; }
  .order-specific-event-form > label { grid-template-columns: 1fr; gap: 6px; }
  .order-specific-event-form > label > span { padding-top: 0; }
  .order-specific-event-datetime { grid-template-columns: 1fr; }
  .order-specific-event-datetime em { grid-column: 1; }
  .order-specific-event-preview { margin-left: 0; }
  .order-specific-event-error { margin-left: 0; }
}

/* Exact-minute order reminders stay visible without blocking the active form. */
.order-time-reminder-toast {
  position: fixed;
  z-index: 3180;
  top: 76px;
  right: 24px;
  width: min(392px, calc(100vw - 32px));
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(125, 157, 181, .72);
  border-radius: 10px;
  background: rgba(250, 253, 255, .98);
  box-shadow: 0 22px 58px rgba(24, 55, 80, .25), 0 7px 18px rgba(24, 55, 80, .13), inset 0 1px 0 #fff;
  color: #193f5f;
  opacity: 0;
  transform: translate3d(20px, -8px, 0) scale(.985);
  transition: opacity .2s ease, transform .24s cubic-bezier(.2, .75, .25, 1);
  pointer-events: none;
}

/* Order-detail tabs live in the upper-right content area.  Dock the reminder
   at the bottom on detail pages so a visible reminder can never intercept a
   workflow/document/notes tab click. */
body.detail-page .order-time-reminder-toast {
  top: auto;
  bottom: 24px;
}

.order-time-reminder-toast.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

.order-time-reminder-close {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #7590a5;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.order-time-reminder-close:hover {
  background: #e9f2f8;
  color: #285e84;
}

.order-time-reminder-head {
  min-height: 64px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 42px 11px 15px;
  border-bottom: 1px solid #cbdce8;
  background: linear-gradient(112deg, #ffffff 0%, #edf6fb 66%, #e4f0f7 100%);
}

.order-time-reminder-clock {
  width: 36px;
  height: 36px;
  position: relative;
  display: block;
  box-sizing: border-box;
  border: 1px solid #b99453;
  border-radius: 50%;
  background: linear-gradient(#fffdf7, #f2e2bd);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(106, 74, 25, .14);
}

.order-time-reminder-clock::before,
.order-time-reminder-clock::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 8px;
  width: 2px;
  height: 10px;
  border-radius: 2px;
  background: #805b22;
  transform-origin: 1px 10px;
}

.order-time-reminder-clock::after {
  height: 8px;
  transform: rotate(118deg);
  transform-origin: 1px 8px;
}

.order-time-reminder-clock i {
  position: absolute;
  z-index: 1;
  left: 15px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #805b22;
}

.order-time-reminder-head > div {
  display: grid;
  gap: 1px;
}

.order-time-reminder-head small {
  color: #6a879d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.order-time-reminder-head strong {
  color: #183f61;
  font-size: 15px;
  font-weight: 900;
}

.order-time-reminder-head > b {
  padding: 4px 8px;
  border: 1px solid #dfc586;
  border-radius: 999px;
  background: #fff8e7;
  color: #8b6220;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.order-time-reminder-body {
  display: grid;
  gap: 8px;
  padding: 16px 17px 14px;
}

.order-time-reminder-context {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.order-time-reminder-context span,
.order-time-reminder-meta > span {
  color: #71899b;
  font-size: 10px;
  font-weight: 850;
}

.order-time-reminder-context b {
  padding: 3px 8px;
  border: 1px solid #bed3e2;
  border-radius: 4px;
  background: #eef6fb;
  color: #326b94;
  font-size: 11px;
  font-weight: 900;
}

.order-time-reminder-notice {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid #ead29a;
  border-left: 4px solid #c99b37;
  border-radius: 6px;
  background: linear-gradient(110deg, #fffdf7, #fff7e3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

.order-time-reminder-notice > span {
  color: #987127;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.order-time-reminder-notice > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #624a1c;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.order-time-reminder-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid #e4eef4;
}

.order-time-reminder-meta time {
  color: #325f80;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.order-time-reminder-actions {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 8px;
  padding: 11px 13px 13px;
  border-top: 1px solid #cedee9;
  background: linear-gradient(#f8fbfd, #eef5f9);
}

.order-time-reminder-actions:has(.order-time-reminder-reschedule) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.18fr);
}

.order-time-reminder-actions button {
  min-height: 34px;
  border-radius: 5px;
  padding: 0 11px;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.order-time-reminder-later {
  border: 1px solid transparent;
  background: transparent;
  color: #668095;
}

.order-time-reminder-reschedule {
  border: 1px solid #9cb8cd;
  background: linear-gradient(#ffffff, #edf5fa);
  color: #315f83;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 2px 5px rgba(46, 94, 132, .09);
}

.order-time-reminder-view {
  border: 1px solid #2f7ba9;
  background: linear-gradient(#4d9aca, #2e78a5);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 3px 7px rgba(38, 100, 142, .2);
}

.order-time-reminder-actions button:hover {
  filter: brightness(.985);
  transform: translateY(-1px);
}

.order-time-reminder-actions button:focus-visible,
.order-time-reminder-close:focus-visible {
  outline: 3px solid rgba(60, 139, 190, .24);
  outline-offset: 2px;
}

/* Pre-order follow-ups share the timed-event interaction, while the teal
   heading makes their source unmistakable before an employee opens one. */
.preorder-follow-up-reminder {
  border-color: rgba(63, 145, 142, .72);
}

.preorder-follow-up-reminder .order-time-reminder-head {
  border-bottom-color: #bcdedb;
  background: linear-gradient(112deg, #ffffff 0%, #eaf8f6 66%, #dff2ef 100%);
}

.preorder-follow-up-reminder .order-time-reminder-head small,
.preorder-follow-up-reminder .order-time-reminder-head strong {
  color: #17645f;
}

.preorder-follow-up-reminder .order-time-reminder-context b {
  border-color: #b8dcd8;
  background: #edf9f7;
  color: #24746e;
}

.preorder-follow-up-reminder .order-time-reminder-view {
  border-color: #267c76;
  background: linear-gradient(#45a49c, #287e78);
}

.preorder-follow-up-reminder .order-time-reminder-reschedule {
  border-color: #84bbb5;
  background: linear-gradient(#ffffff, #eaf7f5);
  color: #246c67;
}

.reminder-reschedule-card {
  width: min(480px, calc(100vw - 32px));
}

.reminder-reschedule-body {
  display: grid;
  gap: 12px;
}

.reminder-reschedule-body > p {
  margin: 0;
  color: #61798d;
  font-size: 13px;
}

.reminder-reschedule-body > p b {
  color: #234d70;
  font-weight: 900;
}

.reminder-reschedule-body > label {
  display: grid;
  gap: 6px;
}

.reminder-reschedule-body > label > span {
  color: #4d6a82;
  font-size: 12px;
  font-weight: 900;
}

.reminder-reschedule-body > label > span b {
  margin-left: 3px;
  color: #c35048;
}

.reminder-reschedule-body input[type="datetime-local"] {
  min-height: 40px;
  border: 1px solid #9dbbd1;
  border-radius: 6px;
  background: #fff;
  color: #1e4667;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.reminder-reschedule-body > small {
  color: #7890a3;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.preorder-follow-up-reminder.is-overdue .order-time-reminder-head > b {
  border-color: #e4b0ac;
  background: #fff0ef;
  color: #a33e39;
}

.client-follow-up-reminder {
  border-color: rgba(71, 126, 173, .74);
}

.client-follow-up-reminder .order-time-reminder-head {
  border-bottom-color: #c5dbea;
  background: linear-gradient(112deg, #ffffff 0%, #eef6fc 66%, #e2eef8 100%);
}

.client-follow-up-reminder .order-time-reminder-head small,
.client-follow-up-reminder .order-time-reminder-head strong {
  color: #235d89;
}

.client-follow-up-reminder .order-time-reminder-context b {
  border-color: #bfd7e9;
  background: #f0f7fc;
  color: #285e88;
}

.client-follow-up-reminder .order-time-reminder-view {
  border-color: #326f9d;
  background: linear-gradient(#579dcc, #3377a8);
}

.client-follow-up-reminder.is-overdue .order-time-reminder-head > b {
  border-color: #e4b0ac;
  background: #fff0ef;
  color: #a33e39;
}

@media (max-width: 620px) {
  .order-time-reminder-toast {
    top: 68px;
    right: 12px;
    left: 12px;
    width: auto;
  }

  body.detail-page .order-time-reminder-toast {
    top: auto;
    bottom: 12px;
  }

  .order-time-reminder-head {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .order-time-reminder-head > b {
    grid-column: 2;
    justify-self: start;
  }

  .order-time-reminder-actions {
    grid-template-columns: 1fr;
  }

  .order-time-reminder-later {
    grid-column: auto;
    grid-row: auto;
  }
}

.employee-old-flow .od-container3 {
  width: 1100px;
  margin: 0 auto;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .72);
  background:
    linear-gradient(90deg, rgba(34, 146, 198, .07), transparent 34%, transparent),
    #ffffff;
}

.employee-old-flow .timeline-row {
  position: relative;
  min-height: 31px;
  margin-left: 50px;
  margin-right: 50px;
}

.employee-old-flow .timeline-row-odd {
  background: rgba(232, 243, 252, .66);
}

.employee-old-flow .timeline-dot {
  position: absolute;
  margin-left: -6px;
  margin-top: 9px;
}

.employee-old-flow .timeline-dot span {
  display: block;
  width: 11px;
  height: 11px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #9db0c4;
  box-shadow: 0 0 0 1px rgba(94, 128, 160, .45);
}

.employee-old-flow .timeline-text {
  min-height: 31px;
  padding: 6px 0 6px 20px;
  border-left: 1px solid #bdd0e1;
  text-align: left;
}

.employee-old-flow .timeline-text-sub {
  border-left: 0;
}

.employee-old-flow .timeline-text-last {
  border-left: 0;
}

.employee-old-flow .timeline-text-left {
  display: inline-block;
  width: 130px;
  color: #77889b !important;
  vertical-align: top;
  padding-top: 1px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.employee-old-flow .timeline-text-right {
  display: inline-block;
  width: 844px;
  color: #23384d;
  vertical-align: top;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.employee-old-flow .timeline-text-right-sub {
  color: #23384d;
}

.employee-old-flow .timeline-text-imp {
  color: #e16f6f !important;
  font-weight: 950 !important;
}

.employee-old-flow .timeline-text-hbl-updated {
  color: #e16f6f !important;
  font-size: 14px !important;
  font-weight: 950;
}

.employee-old-flow .legacy-flow-detail {
  display: inline;
  margin-left: 12px;
  color: inherit;
}

.employee-old-flow .order-flow-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  vertical-align: middle;
}

.employee-old-flow .order-flow-action {
  min-width: 42px;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid #8fb0d0;
  border-bottom-color: #5f85ad;
  border-radius: 4px;
  background: linear-gradient(#ffffff 0%, #e8f3ff 48%, #c6dcf4 100%);
  color: #17436e;
  font-size: 12px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 0 #8aadd0,
    0 6px 12px rgba(20,62,102,.12);
}

.employee-old-flow .order-flow-action:not(.is-disabled):hover {
  transform: translateY(-1px);
  border-color: #6f9bc7;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 3px 0 #779fc7,
    0 9px 16px rgba(20,62,102,.16);
}

.employee-old-flow .order-flow-action.is-disabled {
  opacity: .52;
  cursor: not-allowed;
  filter: grayscale(.15);
}

.employee-old-flow .sp-sub {
  height: 20px;
  margin: 20px 50px 0;
  border-top: 1px dashed #b8ccdf;
}

.employee-old-flow .legacy-flow-info {
  width: 16px;
  height: 16px;
  margin-left: 10px;
  border: 1px solid #77a8cf;
  border-radius: 50%;
  background: linear-gradient(#e8f6ff, #8cc6ec);
  color: #17466e;
  padding: 0;
  font-size: 11px;
  font-weight: 950;
  line-height: 14px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  vertical-align: 1px;
}

.employee-old-flow .legacy-flow-info::before {
  content: "i";
}

.employee-old-flow .legacy-flow-info.is-open {
  background: linear-gradient(#fff4e1, #d99c43);
  color: #5a3300;
}

.employee-old-flow .legacy-flow-info.is-open::before {
  content: "-";
}

.employee-old-flow .timeline-h-rows {
  display: none;
  margin-left: 140px;
}

.employee-old-flow .timeline-h-row {
  position: relative;
  min-height: 22px;
  margin-top: 6px;
  padding-left: 20px;
  color: #65778a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.employee-old-flow .timeline-h-node {
  position: absolute;
  left: 0;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8ba5bd;
}

.employee-old-flow .timeline-empty {
  margin: 0 50px;
  color: #718295;
  font-size: 13px;
  font-weight: 850;
}

.old-inline-list {
  border: 0;
  padding: 0;
}

@media (max-width: 980px) {
  .employee-detail-layout {
    grid-template-columns: 1fr;
  }

  .detail-page-shell {
    padding: 14px;
  }
}

.base-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.write-status {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid #d8b36b;
  border-radius: 4px;
  background: #fff8e8;
  color: #8a5d14;
  font-size: 12px;
  font-weight: 900;
}

.write-status.ready {
  border-color: #9cc8b7;
  background: #edf9f4;
  color: #226a57;
}

.base-data-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  min-height: calc(100vh - 170px);
}

.base-module-list,
.base-data-main {
  border: 1px solid var(--line);
  background: var(--panel);
}

.base-module-list {
  padding: 10px;
  border-radius: 4px;
  overflow: auto;
}

.base-module-button {
  width: 100%;
  min-height: 38px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: linear-gradient(#fff, #eef4f8);
  color: var(--blue-dark);
  text-align: left;
  font-weight: 800;
}

.base-module-button span {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  background: #e5eef7;
  color: var(--blue-dark);
  font-weight: 900;
}

.base-module-button.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.base-module-button.active span {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

.base-module-button.disabled {
  opacity: .48;
}

.base-data-main {
  min-width: 0;
  border-radius: 4px;
  overflow: hidden;
}

.base-list-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #c2cfda;
  background:
    linear-gradient(180deg, #ffffff 0%, #f2f6fa 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(180, 195, 210, .35);
}

.base-list-tools .base-search-form {
  flex: 1 1 auto;
  min-width: 0;
  gap: 10px;
  padding: 0;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
}

.base-list-tools .base-toolbar-actions {
  margin-left: auto;
}

.base-list-tools .mini-button {
  min-width: 76px;
  height: 38px;
  white-space: nowrap;
}

.portal-module-view {
  min-width: 0;
}

.module-list-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #c2cfda;
  background:
    linear-gradient(180deg, #ffffff 0%, #f2f6fa 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(180, 195, 210, .35);
}

.module-search-form {
  flex: 1 1 auto;
  min-width: 0;
  gap: 10px;
  padding: 0;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
}

.module-search-form select,
.module-search-form input {
  height: 38px;
  border: 1px solid #aebdcb;
  border-bottom-color: #8fa2b5;
  border-radius: 4px;
  background: linear-gradient(#ffffff 0%, #f8fbfd 48%, #edf3f8 100%);
  color: #1d2b39;
  font-size: 13px;
  font-weight: 850;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 1px 3px rgba(39, 72, 101, .08);
}

.module-search-form select {
  flex: 0 0 142px;
}

.module-search-form input {
  flex: 1 1 260px;
}

.module-search-form input::placeholder {
  color: #7a8da0;
  font-weight: 800;
}

.module-search-form button {
  min-width: 82px;
  height: 38px;
  border: 1px solid #2f6fa9;
  border-bottom-color: #1e5383;
  border-radius: 4px;
  background: linear-gradient(#4f91ca, #2d6ea8);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 2px 0 #1d5688,
    0 7px 14px rgba(36, 77, 115, .14);
}

.module-search-form button:hover {
  background: linear-gradient(#65a4d7, #337bb8);
  transform: translateY(-1px);
}

.preorder-search-form {
  flex: 0 0 auto;
  width: min(360px, 42vw);
}

.preorder-search-form select {
  flex: 0 0 112px;
}

.preorder-search-form input {
  flex: 0 0 210px;
}

#preOrderView .module-list-tools {
  flex-wrap: wrap;
}

#preOrderView .preorder-search-form {
  flex: 0 1 360px;
  width: min(360px, 100%);
  flex-wrap: nowrap;
}

#preOrderView .preorder-search-form select {
  flex: 0 0 112px;
}

#preOrderView .preorder-search-form input {
  flex: 1 1 0;
  min-width: 0;
}

.preorder-search-hit {
  display: inline;
  padding: 0 2px;
  border-radius: 3px;
  background: #ffe58a;
  color: #173b64;
  font-weight: 950;
  box-shadow: inset 0 -1px 0 rgba(157, 111, 0, .22);
}

.module-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  white-space: nowrap;
}

.module-toolbar-actions strong {
  min-width: 56px;
  color: #1e4164;
  font-size: 14px;
  font-weight: 950;
}

.module-toolbar-actions .mini-button {
  min-width: 82px;
  height: 38px;
}

.module-toolbar-actions .mini-button.active {
  border-color: #23699f;
  background: linear-gradient(#3f91ce, #23699f);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 2px 0 #1b527d;
}

.client-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #c2cfda;
  background: #e7f0f7;
}

.client-filter-row button {
  min-height: 32px;
  border: 1px solid #9fb8ce;
  border-radius: 4px;
  background: linear-gradient(#fff, #f3f8fc);
  color: #0071c8;
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 1px 4px rgba(48, 78, 104, .08);
}

.client-filter-row button.active {
  border-color: #23699f;
  background: linear-gradient(#3f91ce, #23699f);
  color: #fff;
}

.client-filter-row button.active .module-count-bubble {
  background: rgba(255, 255, 255, .94);
  color: #a3263a;
}

.module-segmented {
  display: inline-flex;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid #aebdcb;
  border-bottom-color: #8da3b8;
  border-radius: 5px;
  background: linear-gradient(#fff, #eef4f9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 2px 6px rgba(42, 70, 96, .08);
}

.module-segmented button {
  min-width: 72px;
  height: 36px;
  border: 0;
  border-right: 1px solid #bfd0df;
  background: transparent;
  color: #24435f;
  font-size: 13px;
  font-weight: 900;
}

.module-segmented button:last-child {
  border-right: 0;
}

.module-segmented button.active {
  background: linear-gradient(#4f91ca, #2d6ea8);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.module-table-wrap {
  max-height: calc(100vh - 190px);
}

.module-data-table {
  min-width: 1700px;
  font-size: 13px;
}

.pre-order-table {
  min-width: 1860px;
}

.client-table {
  min-width: 1600px;
}

.client-table tr.client-need-visit-row td {
  color: #d34e55;
  font-weight: 950;
}

.client-table tr.client-need-visit-row .module-strong,
.client-table tr.client-need-visit-row .module-chip,
.client-table tr.client-need-visit-row .module-date {
  color: #d34e55;
  font-weight: 950;
}

.module-data-table th {
  text-align: center;
}

.module-data-table td {
  vertical-align: middle;
}

.module-op-cell {
  min-width: 150px;
  text-align: center;
  white-space: nowrap;
}

.module-op-cell .blue-action-button,
.module-op-cell .mini-button {
  margin: 2px 3px;
  vertical-align: middle;
}

.module-strong {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #c2d3e2;
  border-left: 4px solid #47759f;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(47, 95, 159, .07), rgba(255, 255, 255, .92)),
    linear-gradient(#ffffff, #f4f8fb);
  color: #173b64;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.35;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 7px rgba(42, 70, 96, .08);
}

.module-chip,
.module-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid #b8c9d9;
  border-bottom-color: #91a9bf;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #edf4fa);
  color: #24435f;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 6px rgba(42, 70, 96, .08);
}

.module-date {
  min-width: 78px;
}

.module-count-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: #d73535;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(140, 36, 36, .22);
}

.module-text-clip,
.module-company-name {
  display: block;
  overflow: hidden;
  max-width: 220px;
  color: #273f58;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-muted {
  color: #687c8f;
  font-weight: 800;
}

.base-search-form {
  border-bottom: 1px solid var(--line);
}

#baseDataView[data-base-type="deliveryAgent"] .base-search-form,
#baseDataView[data-base-type="consignee"] .base-search-form,
#baseDataView[data-base-type="factory"] .base-search-form,
#baseDataView[data-base-type="supplier"] .base-search-form {
  gap: 10px;
  padding: 14px 16px;
  border-bottom-color: #c2cfda;
  background:
    linear-gradient(180deg, #ffffff 0%, #f2f6fa 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(180, 195, 210, .35);
}

#baseDataView[data-base-type="deliveryAgent"] .base-search-form select,
#baseDataView[data-base-type="deliveryAgent"] .base-search-form input,
#baseDataView[data-base-type="consignee"] .base-search-form select,
#baseDataView[data-base-type="consignee"] .base-search-form input,
#baseDataView[data-base-type="factory"] .base-search-form select,
#baseDataView[data-base-type="factory"] .base-search-form input,
#baseDataView[data-base-type="supplier"] .base-search-form select,
#baseDataView[data-base-type="supplier"] .base-search-form input {
  height: 38px;
  border: 1px solid #aebdcb;
  border-bottom-color: #8fa2b5;
  border-radius: 4px;
  background:
    linear-gradient(#ffffff 0%, #f8fbfd 48%, #edf3f8 100%);
  color: #1d2b39;
  font-size: 14px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 1px 0 rgba(255, 255, 255, .9),
    0 4px 10px rgba(38, 59, 82, .08);
  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    background .14s ease,
    color .14s ease;
}

#baseDataView[data-base-type="deliveryAgent"] .base-search-form select,
#baseDataView[data-base-type="consignee"] .base-search-form select,
#baseDataView[data-base-type="factory"] .base-search-form select,
#baseDataView[data-base-type="supplier"] .base-search-form select {
  width: 152px;
  padding: 0 12px;
  color: #244b78;
}

#baseDataView[data-base-type="deliveryAgent"] .base-search-form input,
#baseDataView[data-base-type="consignee"] .base-search-form input,
#baseDataView[data-base-type="factory"] .base-search-form input,
#baseDataView[data-base-type="supplier"] .base-search-form input {
  width: 320px;
  padding: 0 14px;
}

#baseDataView[data-base-type="deliveryAgent"] .base-search-form input::placeholder,
#baseDataView[data-base-type="consignee"] .base-search-form input::placeholder,
#baseDataView[data-base-type="factory"] .base-search-form input::placeholder,
#baseDataView[data-base-type="supplier"] .base-search-form input::placeholder {
  color: #7b8da0;
  font-size: 13px;
  font-weight: 800;
}

#baseDataView[data-base-type="deliveryAgent"] .base-search-form select:hover,
#baseDataView[data-base-type="deliveryAgent"] .base-search-form input:hover,
#baseDataView[data-base-type="consignee"] .base-search-form select:hover,
#baseDataView[data-base-type="consignee"] .base-search-form input:hover,
#baseDataView[data-base-type="factory"] .base-search-form select:hover,
#baseDataView[data-base-type="factory"] .base-search-form input:hover,
#baseDataView[data-base-type="supplier"] .base-search-form select:hover,
#baseDataView[data-base-type="supplier"] .base-search-form input:hover {
  border-color: #8fa9c2;
  background:
    linear-gradient(#ffffff 0%, #fbfdff 48%, #f1f6fb 100%);
}

#baseDataView[data-base-type="deliveryAgent"] .base-search-form select:focus,
#baseDataView[data-base-type="deliveryAgent"] .base-search-form input:focus,
#baseDataView[data-base-type="consignee"] .base-search-form select:focus,
#baseDataView[data-base-type="consignee"] .base-search-form input:focus,
#baseDataView[data-base-type="factory"] .base-search-form select:focus,
#baseDataView[data-base-type="factory"] .base-search-form input:focus,
#baseDataView[data-base-type="supplier"] .base-search-form select:focus,
#baseDataView[data-base-type="supplier"] .base-search-form input:focus {
  border-color: #2f609e;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 0 0 3px rgba(47, 96, 158, .14),
    0 7px 16px rgba(38, 59, 82, .12);
}

#baseDataView[data-base-type="deliveryAgent"] .base-search-form button,
#baseDataView[data-base-type="consignee"] .base-search-form button,
#baseDataView[data-base-type="factory"] .base-search-form button,
#baseDataView[data-base-type="supplier"] .base-search-form button {
  height: 38px;
  min-width: 76px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 2px 0 #1f4779,
    0 8px 16px rgba(35, 75, 126, .16);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    filter .14s ease;
}

#baseDataView[data-base-type="deliveryAgent"] .base-search-form button:hover,
#baseDataView[data-base-type="consignee"] .base-search-form button:hover,
#baseDataView[data-base-type="factory"] .base-search-form button:hover,
#baseDataView[data-base-type="supplier"] .base-search-form button:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 3px 0 #1f4779,
    0 11px 20px rgba(35, 75, 126, .20);
}

.base-list-tools .base-search-form select,
.base-list-tools .base-search-form input {
  height: 38px;
  border: 1px solid #aebdcb;
  border-bottom-color: #8fa2b5;
  border-radius: 4px;
  background:
    linear-gradient(#ffffff 0%, #f8fbfd 48%, #edf3f8 100%);
  color: #1d2b39;
  font-size: 14px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 1px 0 rgba(255, 255, 255, .9),
    0 4px 10px rgba(38, 59, 82, .08);
  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    background .14s ease,
    color .14s ease;
}

.base-list-tools .base-search-form select {
  width: 152px;
  padding: 0 12px;
  color: #244b78;
}

.base-list-tools .base-search-form input {
  width: 320px;
  padding: 0 14px;
}

.base-list-tools .base-search-form input::placeholder {
  color: #7b8da0;
  font-size: 13px;
  font-weight: 800;
}

.base-list-tools .base-search-form select:hover,
.base-list-tools .base-search-form input:hover {
  border-color: #8fa9c2;
  background:
    linear-gradient(#ffffff 0%, #fbfdff 48%, #f1f6fb 100%);
}

.base-list-tools .base-search-form select:focus,
.base-list-tools .base-search-form input:focus {
  border-color: #2f609e;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 0 0 3px rgba(47, 96, 158, .14),
    0 7px 16px rgba(38, 59, 82, .12);
}

.base-list-tools .base-search-form button {
  height: 38px;
  min-width: 76px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 2px 0 #1f4779,
    0 8px 16px rgba(35, 75, 126, .16);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    filter .14s ease;
}

.base-list-tools .base-search-form button:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 3px 0 #1f4779,
    0 11px 20px rgba(35, 75, 126, .20);
}

.factory-search-form {
  align-items: center;
  flex-wrap: wrap;
}

.base-list-tools .factory-search-form {
  flex-wrap: nowrap;
}

.factory-search-form #baseSearchField {
  width: 152px;
}

.factory-search-form #baseSearchInput {
  width: 260px;
}

.factory-search-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.factory-search-grid label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: #607286;
  font-size: 11px;
  font-weight: 900;
}

.factory-search-grid label span {
  white-space: nowrap;
}

.factory-search-grid select,
.factory-search-grid input {
  width: 156px !important;
}

.factory-search-grid label:first-child select {
  width: 156px !important;
}

.base-list-tools .factory-search-form #baseSearchField {
  width: 132px;
}

.base-list-tools .factory-search-form #baseSearchInput {
  width: 210px;
}

.base-list-tools .factory-search-grid {
  flex: 0 0 auto;
  gap: 6px;
}

.base-list-tools .factory-search-grid label {
  gap: 6px;
  font-size: 10px;
}

.base-list-tools .factory-search-grid select {
  width: 126px !important;
}

.base-table-wrap {
  min-height: calc(100vh - 228px);
}

.base-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: #f7fbff;
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}

.base-pagination button,
.base-pagination select {
  height: 28px;
  border: 1px solid #b7cce0;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.base-pagination button {
  padding: 0 12px;
  cursor: pointer;
}

.base-pagination button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.base-pagination label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.order-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: linear-gradient(#fbfdff, #f0f6fc);
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.order-pagination .page-message {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.order-pagination .page-message b {
  color: #0a4b86;
}

.order-pagination .page-number-input,
.order-pagination select,
.order-pagination button {
  height: 28px;
  border: 1px solid #b7cce0;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 1px 2px rgba(26, 67, 108, .08);
}

.order-pagination .page-number-input {
  width: 46px;
  text-align: center;
}

.order-pagination select {
  min-width: 70px;
  padding: 0 6px;
}

.order-pagination .page-buttons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.order-pagination button {
  min-width: 34px;
  padding: 0 10px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.order-pagination button:hover:not(:disabled) {
  border-color: #6ea8df;
  background: #e8f3ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(33, 97, 160, .13);
}

.order-pagination button.active {
  border-color: #1f6fb5;
  background: linear-gradient(#2e86cf, #1764a8);
  color: #fff;
}

.order-pagination button:disabled {
  opacity: .48;
  cursor: not-allowed;
  box-shadow: none;
}

.base-data-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.base-data-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 36px;
  padding: 0 9px;
  border-left: 1px solid rgba(255, 255, 255, .22);
  background: var(--blue);
  color: #fff;
  text-align: left;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.ship-name-card {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 6px 12px 6px 14px;
  border: 1px solid #c2d3e2;
  border-left: 4px solid #577fa7;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(47, 95, 159, .07), rgba(255, 255, 255, .92)),
    linear-gradient(#ffffff, #f4f8fb);
  color: #1f354c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 2px 6px rgba(42, 70, 96, .08);
}

.ship-name-card span {
  display: block;
  overflow: hidden;
  width: 100%;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ship-mmsi-chip {
  min-width: 112px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #b8c9d9;
  border-bottom-color: #91a9bf;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #edf4fa);
  color: #24435f;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 6px rgba(42, 70, 96, .08);
}

.supplier-type-chip {
  min-width: 78px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid #b7c8d8;
  border-bottom-color: #8ea7bd;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #eef6fb);
  color: #1d405e;
  font-size: 12px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 6px rgba(42, 70, 96, .08);
}

.reason-main-card {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid #bdcfdf;
  border-left: 4px solid #47759f;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(47, 96, 158, .08), rgba(255, 255, 255, .92)),
    linear-gradient(#ffffff, #f4f8fb);
  color: #173b64;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 7px rgba(42, 70, 96, .08);
}

.reason-main-card span {
  display: block;
  overflow: hidden;
  width: 100%;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reason-jp-card {
  max-height: 58px;
  overflow: auto;
  padding: 8px 11px;
  border: 1px solid #c5d5e4;
  border-radius: 5px;
  background:
    linear-gradient(#ffffff, #f7fafc);
  color: #31495f;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
  white-space: pre-wrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 1px 4px rgba(42, 70, 96, .07);
}

.base-data-table td {
  min-height: 48px;
  padding: 7px 9px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid #cbd9e6;
  vertical-align: top;
  background: #fff;
}

.base-data-table tr:nth-child(even) td {
  background: #fbfdfe;
}

.base-data-table tr:hover td {
  background: #f2f8fd;
}

.base-operation-col {
  width: 280px;
}

#baseDataView[data-base-type="deliveryAgent"] .base-operation-col {
  width: 310px;
  min-width: 310px;
  text-align: center;
}

#baseDataView[data-base-type="deliveryAgent"] .base-data-table {
  min-width: 1180px;
}

#baseDataView[data-base-type="deliveryAgent"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="deliveryAgent"] .base-data-table td:nth-child(2) {
  width: 250px;
}

#baseDataView[data-base-type="consignee"] .base-operation-col {
  width: 390px;
  min-width: 390px;
  text-align: center;
}

#baseDataView[data-base-type="consignee"] .base-data-table {
  min-width: 1320px;
}

#baseDataView[data-base-type="consignee"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="consignee"] .base-data-table td:nth-child(2) {
  width: 220px;
}

#baseDataView[data-base-type="consignee"] .base-data-table th:nth-child(4),
#baseDataView[data-base-type="consignee"] .base-data-table td:nth-child(4) {
  width: 170px;
}

#baseDataView[data-base-type="factory"] .base-operation-col {
  width: 390px;
  min-width: 390px;
  text-align: center;
}

#baseDataView[data-base-type="factory"] .base-data-table {
  min-width: 1160px;
}

#baseDataView[data-base-type="factory"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="factory"] .base-data-table td:nth-child(2) {
  width: 220px;
}

#baseDataView[data-base-type="factory"] .base-data-table th:nth-child(4),
#baseDataView[data-base-type="factory"] .base-data-table td:nth-child(4) {
  width: 190px;
}

#baseDataView[data-base-type="factory"] .base-data-table td:first-child {
  text-align: center;
}

.base-ops {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.promoted-base-ops,
.delivery-agent-ops {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.base-op-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.base-op-line.action-line {
  gap: 7px;
}

.promoted-base-action-row,
.delivery-agent-action-row {
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

.factory-base-ops .promoted-base-action-row {
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

#baseDataView[data-base-type="port"] .base-data-table td:first-child {
  text-align: center;
}

#baseDataView[data-base-type="shippingCompany"] .base-data-table td:first-child {
  text-align: center;
}

#baseDataView[data-base-type="shipName"] .base-data-table td:first-child {
  text-align: center;
}

#baseDataView[data-base-type="supplier"] .base-data-table td:first-child {
  text-align: center;
}

#baseDataView[data-base-type="port"] .base-operation-col {
  width: 420px;
  min-width: 420px;
  text-align: center;
}

#baseDataView[data-base-type="shippingCompany"] .base-operation-col {
  width: 340px;
  min-width: 340px;
  text-align: center;
}

#baseDataView[data-base-type="shipName"] .base-operation-col {
  width: 128px;
  min-width: 128px;
  text-align: center;
}

#baseDataView[data-base-type="supplier"] .base-operation-col {
  width: 330px;
  min-width: 330px;
  text-align: center;
}

#baseDataView[data-base-type="port"] .base-data-table {
  min-width: 860px;
}

#baseDataView[data-base-type="shippingCompany"] .base-data-table {
  min-width: 1060px;
}

#baseDataView[data-base-type="shipName"] .base-data-table {
  min-width: 760px;
}

#baseDataView[data-base-type="supplier"] .base-data-table {
  min-width: 920px;
}

#baseDataView[data-base-type="opAuth"] .base-data-table {
  min-width: 900px;
}

#baseDataView[data-base-type="feeType"] .base-data-table {
  min-width: 720px;
}

#baseDataView[data-base-type="orderUpdateReason"] .base-data-table,
#baseDataView[data-base-type="preOrderReason"] .base-data-table {
  min-width: 900px;
}

#baseDataView[data-base-type="currency"] .base-data-table {
  min-width: 620px;
}

#baseDataView[data-base-type="currencyRate"] .base-data-table {
  min-width: 760px;
}

#baseDataView[data-base-type="bankAccount"] .base-data-table {
  min-width: 980px;
}

#baseDataView[data-base-type="mailTemplate"] .base-data-table {
  min-width: 980px;
}

#baseDataView[data-base-type="invoice"] .base-data-table {
  min-width: 980px;
}

#baseDataView[data-base-type="invoiceLog"] .base-data-table {
  min-width: 1180px;
}

#baseDataView[data-base-type="addressBook"] .base-data-table {
  min-width: 1100px;
}

#baseDataView[data-base-type="addressBook"] .base-operation-col {
  width: 148px;
  min-width: 148px;
  text-align: center;
}

#baseDataView[data-base-type="addressBook"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="addressBook"] .base-data-table td:nth-child(2) {
  width: 260px;
}

#baseDataView[data-base-type="addressBook"] .base-data-table th:nth-child(3),
#baseDataView[data-base-type="addressBook"] .base-data-table td:nth-child(3) {
  width: 180px;
  white-space: normal;
  overflow-wrap: anywhere;
}

#baseDataView[data-base-type="addressBook"] .base-data-table th:nth-child(4),
#baseDataView[data-base-type="addressBook"] .base-data-table td:nth-child(4) {
  width: 150px;
  text-align: center;
}

#baseDataView[data-base-type="supplier"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="supplier"] .base-data-table td:nth-child(2) {
  width: 210px;
}

#baseDataView[data-base-type="supplier"] .base-data-table th:nth-child(3),
#baseDataView[data-base-type="supplier"] .base-data-table td:nth-child(3) {
  width: 290px;
}

#baseDataView[data-base-type="supplier"] .base-data-table th:nth-child(4),
#baseDataView[data-base-type="supplier"] .base-data-table td:nth-child(4) {
  width: 110px;
  text-align: center;
}

#baseDataView[data-base-type="opAuth"] .base-operation-col {
  width: 148px;
}

#baseDataView[data-base-type="opAuth"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="opAuth"] .base-data-table td:nth-child(2),
#baseDataView[data-base-type="opAuth"] .base-data-table th:nth-child(3),
#baseDataView[data-base-type="opAuth"] .base-data-table td:nth-child(3) {
  width: 220px;
}

#baseDataView[data-base-type="opAuth"] .base-data-table th:nth-child(4),
#baseDataView[data-base-type="opAuth"] .base-data-table td:nth-child(4) {
  width: 130px;
  text-align: center;
}

#baseDataView[data-base-type="opAuth"] .base-data-table th:nth-child(5),
#baseDataView[data-base-type="opAuth"] .base-data-table td:nth-child(5) {
  width: 180px;
}

#baseDataView[data-base-type="feeType"] .base-operation-col {
  width: 148px;
}

#baseDataView[data-base-type="orderUpdateReason"] .base-operation-col,
#baseDataView[data-base-type="preOrderReason"] .base-operation-col {
  width: 148px;
}

#baseDataView[data-base-type="currency"] .base-operation-col {
  width: 148px;
}

#baseDataView[data-base-type="currencyRate"] .base-operation-col {
  width: 148px;
}

#baseDataView[data-base-type="bankAccount"] .base-operation-col {
  width: 112px;
}

#baseDataView[data-base-type="mailTemplate"] .base-operation-col {
  width: 112px;
}

#baseDataView[data-base-type="invoice"] .base-operation-col {
  width: 128px;
  text-align: center;
}

#baseDataView[data-base-type="invoiceLog"] .base-operation-col {
  width: 76px;
  min-width: 76px;
  text-align: center;
}

#baseDataView[data-base-type="feeType"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="feeType"] .base-data-table td:nth-child(2) {
  width: 420px;
}

#baseDataView[data-base-type="orderUpdateReason"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="orderUpdateReason"] .base-data-table td:nth-child(2),
#baseDataView[data-base-type="preOrderReason"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="preOrderReason"] .base-data-table td:nth-child(2) {
  width: 330px;
}

#baseDataView[data-base-type="orderUpdateReason"] .base-data-table th:nth-child(3),
#baseDataView[data-base-type="orderUpdateReason"] .base-data-table td:nth-child(3),
#baseDataView[data-base-type="preOrderReason"] .base-data-table th:nth-child(3),
#baseDataView[data-base-type="preOrderReason"] .base-data-table td:nth-child(3) {
  width: auto;
}

#baseDataView[data-base-type="currency"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="currency"] .base-data-table td:nth-child(2) {
  width: 420px;
}

#baseDataView[data-base-type="currencyRate"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="currencyRate"] .base-data-table td:nth-child(2) {
  width: 280px;
}

#baseDataView[data-base-type="currencyRate"] .base-data-table th:nth-child(3),
#baseDataView[data-base-type="currencyRate"] .base-data-table td:nth-child(3) {
  width: 220px;
  text-align: center;
}

#baseDataView[data-base-type="bankAccount"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="bankAccount"] .base-data-table td:nth-child(2) {
  width: 260px;
}

#baseDataView[data-base-type="bankAccount"] .base-data-table th:nth-child(3),
#baseDataView[data-base-type="bankAccount"] .base-data-table td:nth-child(3) {
  width: auto;
}

#baseDataView[data-base-type="mailTemplate"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="mailTemplate"] .base-data-table td:nth-child(2) {
  width: 250px;
}

#baseDataView[data-base-type="mailTemplate"] .base-data-table th:nth-child(3),
#baseDataView[data-base-type="mailTemplate"] .base-data-table td:nth-child(3) {
  width: auto;
}

#baseDataView[data-base-type="invoice"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="invoice"] .base-data-table td:nth-child(2) {
  width: 120px;
  text-align: center;
}

#baseDataView[data-base-type="invoice"] .base-data-table th:nth-child(3),
#baseDataView[data-base-type="invoice"] .base-data-table td:nth-child(3),
#baseDataView[data-base-type="invoice"] .base-data-table th:nth-child(4),
#baseDataView[data-base-type="invoice"] .base-data-table td:nth-child(4),
#baseDataView[data-base-type="invoice"] .base-data-table th:nth-child(5),
#baseDataView[data-base-type="invoice"] .base-data-table td:nth-child(5),
#baseDataView[data-base-type="invoice"] .base-data-table th:nth-child(6),
#baseDataView[data-base-type="invoice"] .base-data-table td:nth-child(6) {
  width: 145px;
  text-align: center;
}

#baseDataView[data-base-type="invoice"] .base-data-table th:nth-child(7),
#baseDataView[data-base-type="invoice"] .base-data-table td:nth-child(7) {
  width: 130px;
  text-align: center;
}

#baseDataView[data-base-type="invoiceLog"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="invoiceLog"] .base-data-table td:nth-child(2) {
  width: 260px;
}

#baseDataView[data-base-type="invoiceLog"] .base-data-table th:nth-child(3),
#baseDataView[data-base-type="invoiceLog"] .base-data-table td:nth-child(3),
#baseDataView[data-base-type="invoiceLog"] .base-data-table th:nth-child(4),
#baseDataView[data-base-type="invoiceLog"] .base-data-table td:nth-child(4),
#baseDataView[data-base-type="invoiceLog"] .base-data-table th:nth-child(5),
#baseDataView[data-base-type="invoiceLog"] .base-data-table td:nth-child(5),
#baseDataView[data-base-type="invoiceLog"] .base-data-table th:nth-child(7),
#baseDataView[data-base-type="invoiceLog"] .base-data-table td:nth-child(7),
#baseDataView[data-base-type="invoiceLog"] .base-data-table th:nth-child(8),
#baseDataView[data-base-type="invoiceLog"] .base-data-table td:nth-child(8) {
  width: 135px;
  text-align: center;
}

#baseDataView[data-base-type="invoiceLog"] .base-data-table th:nth-child(6),
#baseDataView[data-base-type="invoiceLog"] .base-data-table td:nth-child(6) {
  width: auto;
}

#baseDataView[data-base-type="groupMail"] .base-data-table,
#baseDataView[data-base-type="groupMailFactory"] .base-data-table {
  min-width: 860px;
}

#baseDataView[data-base-type="groupMail"] .base-data-table td:first-child,
#baseDataView[data-base-type="groupMailFactory"] .base-data-table td:first-child {
  width: 150px;
  text-align: center;
}

#baseDataView[data-base-type="groupMail"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="groupMail"] .base-data-table td:nth-child(2),
#baseDataView[data-base-type="groupMailFactory"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="groupMailFactory"] .base-data-table td:nth-child(2) {
  width: auto;
}

#baseDataView[data-base-type="groupMail"] .base-data-table th:nth-child(3),
#baseDataView[data-base-type="groupMail"] .base-data-table td:nth-child(3),
#baseDataView[data-base-type="groupMailFactory"] .base-data-table th:nth-child(3),
#baseDataView[data-base-type="groupMailFactory"] .base-data-table td:nth-child(3) {
  width: 210px;
}

#baseDataView[data-base-type="feeType"] .base-data-table th:nth-child(3),
#baseDataView[data-base-type="feeType"] .base-data-table td:nth-child(3) {
  width: 140px;
  text-align: center;
}

.base-search-hit {
  display: inline;
  min-width: .45em;
  padding: 0 3px;
  border: 1px solid #d4a546;
  border-radius: 3px;
  background:
    linear-gradient(180deg, #fff8dc 0%, #f4d071 100%);
  color: #5c3b09;
  font-weight: 950;
  line-height: 1.2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 3px rgba(128, 84, 18, .16);
}

.op-auth-user-chip,
.op-auth-valid-chip {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.op-auth-user-chip {
  min-width: 104px;
  padding: 0 12px;
  border: 1px solid #b5c8da;
  background:
    linear-gradient(#ffffff, #edf5fb);
  color: #193f62;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 1px 0 rgba(58, 93, 125, .10);
}

.op-auth-valid-chip {
  min-width: 72px;
  padding: 0 10px;
  border: 1px solid #98b8d3;
  background:
    linear-gradient(#f8fcff, #dfeef9);
  color: #245072;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 1px 0 rgba(58, 93, 125, .10);
}

.op-auth-valid-chip.forever {
  border-color: #d2a85b;
  background:
    linear-gradient(#fff8e5, #f1d18a);
  color: #69460e;
}

.fee-type-name-card {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 6px 12px 6px 14px;
  border: 1px solid #c2d3e2;
  border-left: 4px solid #5f91bd;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(47, 95, 159, .07), rgba(255, 255, 255, .90)),
    linear-gradient(#ffffff, #f4f8fb);
  color: #1f354c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 2px 6px rgba(42, 70, 96, .08);
}

.fee-type-name-card span {
  display: block;
  overflow: hidden;
  width: 100%;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fee-type-invoice-chip {
  display: inline-flex;
  min-width: 64px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid #9bbad4;
  border-radius: 4px;
  background:
    linear-gradient(#f8fcff, #dfeef9);
  color: #245072;
  font-size: 13px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 1px 0 rgba(58, 93, 125, .10);
}

.fee-type-invoice-chip.type-1 {
  border-color: #d0a461;
  background:
    linear-gradient(#fff8e5, #efd18d);
  color: #66450e;
}

.fee-type-invoice-chip.type-2 {
  border-color: #91b5d3;
  background:
    linear-gradient(#ffffff 0%, #eef7fd 48%, #dceefa 100%);
  color: #1f5278;
}

.fee-type-invoice-chip.type-3 {
  border-color: #b7c8d8;
  background:
    linear-gradient(#ffffff 0%, #f4f8fb 48%, #e7eef4 100%);
  color: #31495f;
}

.invoice-number-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 102px;
  max-width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #b7cadb;
  border-bottom-color: #8fa8bf;
  border-radius: 5px;
  background:
    linear-gradient(#ffffff 0%, #f8fbfd 48%, #edf4fa 100%);
  color: #213d58;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 6px rgba(42, 70, 96, .08);
}

.invoice-number-chip.muted {
  border-color: #cfd8e1;
  background: linear-gradient(#f9fbfc, #edf1f4);
  color: #7a8794;
  font-family: inherit;
  font-size: 12px;
}

.invoice-remain-chip {
  display: inline-grid;
  min-width: 86px;
  min-height: 38px;
  place-items: center;
  padding: 4px 10px;
  border: 1px solid #9abfce;
  border-bottom-color: #739baa;
  border-radius: 5px;
  background:
    linear-gradient(#ffffff 0%, #eef9fb 48%, #d7eef4 100%);
  color: #18586b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 7px rgba(32, 83, 100, .10);
}

.invoice-remain-chip b {
  font-size: 15px;
  font-weight: 950;
  line-height: 1.05;
}

.invoice-remain-chip small {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 900;
}

.invoice-remain-chip.empty {
  border-color: #d1d8df;
  background: linear-gradient(#fbfcfd, #edf1f4);
  color: #7a8794;
}

.invoice-log-select-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  font-size: 12px;
  font-weight: 950;
}

.invoice-log-base-ops {
  justify-content: center;
}

.invoice-log-row-select {
  width: 30px;
  min-width: 30px;
}

.invoice-log-invalid-row td {
  color: #b82020;
  font-weight: 900;
  background: #fff8f8 !important;
}

.invoice-log-invalid-row:hover td {
  background: #fff0f0 !important;
}

.invoice-log-order-card,
.invoice-log-title-card {
  overflow: hidden;
  max-height: 58px;
  padding: 8px 10px;
  border: 1px solid #c4d4e2;
  border-left: 4px solid #557da4;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(47, 96, 158, .07), rgba(255, 255, 255, .94)),
    linear-gradient(#ffffff, #f6f9fc);
  color: #243e58;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 1px 5px rgba(42, 70, 96, .07);
}

.invoice-log-title-card {
  border-left-color: #6f90ad;
}

.invoice-log-date-chip,
.invoice-log-money-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #b9ccdc;
  border-bottom-color: #92aabe;
  border-radius: 5px;
  background: linear-gradient(#ffffff 0%, #f7fbfd 48%, #edf4fa 100%);
  color: #24435f;
  font-size: 12px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 6px rgba(42, 70, 96, .08);
}

.invoice-log-money-chip {
  color: #174f78;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0;
}

.invoice-log-date-chip.invalid {
  border-color: #d89a9a;
  background: linear-gradient(#fffafa, #f8dddd);
  color: #b82020;
}

.currency-name-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 118px;
  max-width: 240px;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid #bbd0e1;
  border-left: 4px solid #2f6eaa;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(48, 106, 170, .09), rgba(255, 255, 255, .90)),
    linear-gradient(#ffffff, #f3f8fc);
  color: #1f3e5d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 7px rgba(42, 70, 96, .09);
}

.currency-name-card span {
  display: block;
  overflow: hidden;
  width: 100%;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.currency-rate-currency-card {
  max-width: 200px;
}

.currency-rate-value-chip {
  display: inline-flex;
  min-width: 118px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid #a9c2d7;
  border-bottom-color: #84a5c1;
  border-radius: 5px;
  background:
    linear-gradient(#ffffff 0%, #f6fbff 48%, #e5f1fa 100%);
  color: #17456c;
  font-size: 14px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 0 rgba(141, 169, 194, .62),
    0 7px 14px rgba(42, 70, 96, .09);
}

.currency-rate-search-grid,
.group-mail-search-grid,
.invoice-log-search-grid {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(118px, 150px));
  gap: 8px;
  align-items: center;
}

.currency-rate-search-grid label,
.group-mail-search-grid label,
.invoice-log-search-grid label {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  border: 1px solid #bdd0df;
  border-radius: 5px;
  background:
    linear-gradient(#ffffff, #f4f8fc);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 1px 4px rgba(42, 70, 96, .08);
}

.currency-rate-search-grid span,
.group-mail-search-grid span,
.invoice-log-search-grid span {
  padding-left: 8px;
  color: #355b7a;
  font-size: 12px;
  font-weight: 900;
}

.currency-rate-search-grid input,
.group-mail-search-grid input,
.invoice-log-search-grid input,
.invoice-log-search-grid select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 0;
  border-left: 1px solid #d5e1eb;
  background: transparent;
  color: #1d3248;
  font-size: 13px;
  font-weight: 850;
  outline: none;
  padding: 0 8px;
}

.base-list-tools .group-mail-search-grid input {
  width: 100% !important;
}

.invoice-log-search-grid {
  grid-template-columns: repeat(4, minmax(126px, 152px));
}

.invoice-log-search-grid label {
  grid-template-columns: 68px minmax(0, 1fr);
}

.invoice-log-search-grid select {
  appearance: none;
}

.base-list-tools .invoice-log-search-grid input,
.base-list-tools .invoice-log-search-grid select {
  width: 100% !important;
}

.invoice-log-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px !important;
  padding: 0 13px;
  border: 1px solid #9bb8d2;
  border-bottom-color: #6f91ad;
  border-radius: 5px;
  background:
    linear-gradient(#ffffff 0%, #eef7fd 48%, #d7ebfa 100%);
  color: #174f78;
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 0 #8fb1cc,
    0 8px 16px rgba(48, 91, 130, .12);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.invoice-log-export:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #7ca2bf,
    0 10px 18px rgba(48, 91, 130, .16);
}

.group-mail-subject-card {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid #bdcfdf;
  border-left: 4px solid #376b9e;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(47, 96, 158, .08), rgba(255, 255, 255, .92)),
    linear-gradient(#ffffff, #f4f8fb);
  color: #173b64;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 7px rgba(42, 70, 96, .08);
}

.group-mail-subject-card span {
  display: block;
  overflow: hidden;
  width: 100%;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-mail-time-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 156px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #b8c9d9;
  border-bottom-color: #91a9bf;
  border-radius: 5px;
  background:
    linear-gradient(#ffffff 0%, #f7fbfe 48%, #e8f2fa 100%);
  color: #24435f;
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 6px rgba(42, 70, 96, .08);
}

.group-mail-base-ops .blue-action-button {
  width: 92px;
  min-width: 92px;
  height: 32px;
}

.bank-account-name-card {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px 6px 14px;
  border: 1px solid #bfd0df;
  border-left: 4px solid #446f9a;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(55, 99, 142, .08), rgba(255, 255, 255, .92)),
    linear-gradient(#ffffff, #f5f8fb);
  color: #213d58;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 7px rgba(42, 70, 96, .08);
}

.bank-account-name-card span {
  overflow: hidden;
  width: 100%;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-account-info-card {
  max-height: 86px;
  overflow: auto;
  padding: 9px 11px;
  border: 1px solid #c9d7e4;
  border-radius: 5px;
  background:
    linear-gradient(#ffffff, #f7fafc);
  color: #273d52;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
  white-space: pre-wrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 1px 4px rgba(42, 70, 96, .07);
}

.mail-template-name-card {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid #bdcfdf;
  border-left: 4px solid #47759f;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(47, 96, 158, .08), rgba(255, 255, 255, .94)),
    linear-gradient(#ffffff, #f4f8fb);
  color: #173b64;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 7px rgba(42, 70, 96, .08);
}

.mail-template-name-card span {
  display: block;
  overflow: hidden;
  width: 100%;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-template-content-card {
  max-height: 76px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid #c5d5e4;
  border-radius: 5px;
  background:
    linear-gradient(#ffffff, #f7fafc);
  color: #30475d;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
  white-space: pre-wrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 1px 4px rgba(42, 70, 96, .07);
}

#baseDataView[data-base-type="shipName"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="shipName"] .base-data-table td:nth-child(2) {
  width: 420px;
}

#baseDataView[data-base-type="shipName"] .base-data-table th:nth-child(3),
#baseDataView[data-base-type="shipName"] .base-data-table td:nth-child(3) {
  width: 190px;
}

#baseDataView[data-base-type="port"] .base-data-table th:nth-child(2),
#baseDataView[data-base-type="port"] .base-data-table td:nth-child(2) {
  width: auto;
}

.port-base-ops .promoted-base-action-row {
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

.port-base-ops .old-action-chip {
  width: 112px;
  min-width: 112px;
}

.port-base-ops .old-action-chip[data-base-related="specEvent"] {
  width: 128px;
  min-width: 128px;
}

.shipping-company-base-ops .promoted-base-action-row {
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

.shipping-company-base-ops .old-action-chip {
  width: 104px;
  min-width: 104px;
}

.shipping-company-base-ops .blue-action-button {
  width: 62px;
  min-width: 62px;
}

.ship-name-base-ops .promoted-base-action-row {
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

.ship-name-base-ops .blue-action-button {
  width: 62px;
  min-width: 62px;
}

.supplier-base-ops .promoted-base-action-row {
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

.supplier-base-ops .old-action-chip {
  width: 92px;
  min-width: 92px;
}

.supplier-base-ops .blue-action-button {
  width: 62px;
  min-width: 62px;
}

#baseDataView[data-base-type="deliveryAgent"] .base-data-table td:first-child,
#baseDataView[data-base-type="consignee"] .base-data-table td:first-child {
  text-align: center;
}

.blue-action-button {
  width: 62px;
  height: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #6e9fc4;
  border-bottom-color: #4e7391;
  border-radius: 4px;
  background: linear-gradient(#ffffff 0%, #e2f1fb 50%, #bcd9ee 100%);
  color: #174f78;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 0 #7fa5c0,
    0 7px 14px rgba(36, 85, 124, .13);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}

.blue-action-button:hover {
  border-color: #5d93bc;
  border-bottom-color: #456d89;
  background: linear-gradient(#ffffff 0%, #edf8ff 48%, #cce6f8 100%);
  color: #174f78;
  filter: brightness(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #6f98b6,
    0 10px 18px rgba(36, 85, 124, .17);
  transform: translateY(-2px);
}

.blue-action-button:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 #5d86a3, 0 4px 10px rgba(36, 85, 124, .13);
  transform: translateY(1px);
}

.blue-action-button.wide {
  width: auto;
  min-width: 86px;
  padding: 0 14px;
}

.blue-action-button.booking-order-button {
  width: auto;
  min-width: 92px;
  padding: 0 16px;
}

.booking-order-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(12, 29, 46, .42);
  backdrop-filter: blur(5px);
}

.booking-order-modal.hidden {
  display: none;
}

.booking-order-card {
  width: min(980px, calc(100vw - 34px));
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid #b8cce0;
  border-radius: 8px;
  background: #f5f9fd;
  box-shadow: 0 24px 60px rgba(20, 45, 70, .28);
}

.booking-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #cbdceb;
  background: linear-gradient(#fff, #eaf3fb);
}

.booking-order-head span {
  display: block;
  color: #5d7790;
  font-size: 11px;
  font-weight: 900;
}

.booking-order-head strong {
  color: #173b62;
  font-size: 22px;
  font-weight: 900;
}

.booking-order-form {
  overflow: auto;
  padding: 14px 18px 18px;
}

.booking-paper {
  max-width: 860px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid #d5e1ed;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(44, 83, 120, .08);
}

.booking-brand {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.booking-brand strong,
.booking-brand span,
.booking-brand b {
  display: block;
}

.booking-brand strong {
  color: #1b3045;
  font-size: 16px;
}

.booking-brand span {
  margin-top: 5px;
  color: #6b7d8d;
  font-size: 12px;
  font-weight: 800;
}

.booking-brand b {
  margin-top: 10px;
  color: #30309a;
  font-size: 22px;
}

.booking-brand em {
  align-self: start;
  color: #2f65a5;
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
}

.booking-grid {
  display: grid;
  gap: 10px 14px;
}

.booking-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-field {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.booking-field > span {
  color: #3d5874;
  font-size: 12px;
  font-weight: 900;
  line-height: 32px;
}

.booking-field b {
  color: #d84040;
  margin-left: 2px;
}

.booking-required {
  margin-left: 2px;
  color: #d84040;
  font-size: inherit;
  font-style: normal;
  font-weight: 950;
}

.booking-input-invalid {
  border-color: #d84040 !important;
  background: #fff8f7 !important;
  box-shadow: 0 0 0 3px rgba(216, 64, 64, .12) !important;
}

.booking-field input,
.booking-field select,
.booking-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #b9cfe3;
  border-radius: 4px;
  background: linear-gradient(#fff, #f8fbff);
  color: #17324d;
  font-size: 13px;
  font-weight: 800;
}

.booking-field input,
.booking-field select {
  height: 32px;
  padding: 0 9px;
}

.booking-field textarea {
  min-height: 84px;
  padding: 8px 9px;
  resize: vertical;
}

.booking-field.static strong {
  min-height: 32px;
  padding: 8px 9px;
  border: 1px solid #d4e2ee;
  border-radius: 4px;
  background: #f8fbfe;
  color: #17324d;
  font-size: 13px;
}

.booking-field.wide {
  margin-top: 10px;
  grid-template-columns: 112px minmax(0, 1fr);
}

.booking-slim-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 12px 0;
  padding-top: 12px;
  border-top: 1px solid #e0ebf4;
}

.booking-trailer-rows {
  display: grid;
  gap: 9px;
  margin: 8px 0 12px;
  padding: 13px;
  border: 1px solid #c8d9e8;
  border-radius: 7px;
  background: linear-gradient(180deg, #f8fbfe 0%, #f2f7fb 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.booking-trailer-rows.hidden {
  display: none;
}

.booking-row-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 1px 2px;
  color: #173f64;
}

.booking-trailer-group-title {
  display: grid;
  gap: 2px;
}

.booking-trailer-group-title strong {
  color: #173f64;
  font-size: 14px;
}

.booking-trailer-group-title span {
  color: #6b8499;
  font-size: 11px;
  font-weight: 750;
}

.booking-trailer-address-list {
  display: grid;
  gap: 9px;
}

.booking-trailer-workbench {
  overflow: visible;
  border: 1px solid #b8d1e3;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(24, 67, 105, .06);
}

.booking-trailer-workbench .booking-trailer-address-list {
  gap: 0;
}

.booking-trailer-workbench .booking-trailer-row {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.booking-trailer-workbench .booking-trailer-row + .booking-trailer-row {
  border-top: 1px solid #d7e5ef;
}

.booking-trailer-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 36px;
  align-items: stretch;
  overflow: visible;
  border: 1px solid #c8dbea;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(24, 67, 105, .05);
}

.booking-trailer-index {
  display: grid;
  place-items: center;
  min-height: 96px;
  border-right: 1px solid #d8e6f1;
  background: linear-gradient(180deg, #eef7fd 0%, #e2eff9 100%);
  color: #2a76ae;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}

.booking-trailer-plan {
  min-width: 0;
}

.booking-trailer-main {
  display: grid;
  grid-template-columns: minmax(104px, .62fr) minmax(220px, 1.42fr) minmax(218px, 1.05fr);
  gap: 10px;
  align-items: end;
  padding: 10px 11px 9px;
}

.booking-trailer-row .booking-field {
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
  gap: 5px;
}

.booking-trailer-row .booking-field > span {
  color: #58738d;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
}

.booking-trailer-row .booking-trailer-time-field > span small {
  margin-left: 5px;
  color: #7a92a5;
  font-size: 11px;
  font-weight: 750;
}

.booking-trailer-row .booking-field.static input {
  border-color: #d2dfe9;
  background: #f2f6f9;
  color: #60798e;
  cursor: default;
}

.booking-trailer-row .booking-field input,
.booking-trailer-row .booking-field select {
  min-width: 0;
  height: 34px;
}

.booking-trailer-time-inputs {
  display: grid;
  grid-template-columns: minmax(138px, 1fr) minmax(78px, .56fr);
  gap: 6px;
}

.booking-trailer-time-inputs input {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.booking-trailer-imported {
  display: grid;
  grid-template-columns: minmax(160px, .62fr) minmax(0, 1.7fr);
  gap: 10px;
  padding: 8px 11px 9px;
  border-top: 1px dashed #d7e4ee;
  background: #fbfdff;
}

.booking-trailer-imported-field {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  min-width: 0;
}

.booking-trailer-imported-field span {
  padding-top: 1px;
  color: #6b8499;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.booking-trailer-imported-field strong {
  min-width: 0;
  color: #385770;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.booking-trailer-address-field strong {
  color: #284b69;
}

.booking-trailer-delete {
  align-self: stretch;
  width: 36px;
  min-height: 100%;
  border: 0;
  border-left: 1px solid #dbe7f0;
  border-radius: 0 6px 6px 0;
  background: #f8fbfe;
  color: #9a554f;
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.booking-trailer-delete:hover {
  background: #fff1ee;
  color: #b3453e;
  box-shadow: inset 0 0 0 1px rgba(194, 89, 79, .16);
}

.booking-trailer-delete:focus-visible {
  outline: 2px solid #2d83bd;
  outline-offset: -3px;
}

@media (max-width: 760px) {
  .booking-trailer-row {
    grid-template-columns: 31px minmax(0, 1fr) 32px;
  }

  .booking-trailer-index {
    min-height: 0;
  }

  .booking-trailer-main,
  .booking-trailer-imported {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .booking-trailer-main {
    padding: 10px;
  }

  .booking-trailer-imported {
    padding: 8px 10px 10px;
  }

  .booking-trailer-time-inputs {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .booking-trailer-delete {
    width: 32px;
  }
}

.booking-trailer-pricing {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 13px;
  border-top: 1px solid #b8d1e3;
  background: linear-gradient(180deg, #f5faff 0%, #edf6fd 100%);
}

.booking-trailer-pricing > strong {
  color: #163b5f;
  font-size: 14px;
}

.booking-trailer-pricing > span {
  color: #61788e;
  font-size: 12px;
  line-height: 1.55;
}

.booking-trailer-pricing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.booking-trailer-pricing-head strong {
  color: #163b5f;
  font-size: 14px;
}

.booking-trailer-pricing-head span {
  color: #61788e;
  font-size: 12px;
  text-align: right;
}

.booking-trailer-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.booking-trailer-pricing .trailer-unit-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: 8px 9px;
  border: 1px solid #cbddea;
  border-radius: 5px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8fc 100%);
}

.booking-trailer-pricing .trailer-unit-price > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #315a7e;
  font-weight: 900;
}

.booking-trailer-pricing .trailer-unit-price small {
  color: #7790a6;
  font-size: 11px;
  font-weight: 750;
}

.booking-trailer-pricing .trailer-unit-price > div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid #9fc3df;
  border-radius: 4px;
  background: #fff;
}

.booking-trailer-pricing .trailer-unit-price b {
  display: grid;
  place-items: center;
  align-self: stretch;
  border-right: 1px solid #bdd4e6;
  background: #e8f2fb;
  color: #1e649b;
  font-size: 11px;
}

.booking-trailer-pricing .trailer-unit-price input {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #173b5d;
  font-weight: 900;
  text-align: right;
}

.booking-trailer-pricing .trailer-unit-price input:focus {
  outline: 2px solid rgba(35, 121, 183, .22);
  outline-offset: -2px;
}

.booking-trailer-fee-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #c6d9e8;
  border-radius: 5px;
  background: linear-gradient(90deg, #edf6fd 0%, #ffffff 100%);
}

.booking-trailer-fee-total span {
  color: #52728d;
  font-size: 12px;
  font-weight: 850;
}

.booking-trailer-fee-total strong {
  color: #1d5f95;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .booking-trailer-price-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking-trailer-pricing-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

.booking-lookup-list {
  position: fixed;
  z-index: 2600;
  display: grid;
  max-height: 210px;
  overflow: auto;
  border: 1px solid #b9cfe3;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(29, 64, 96, .18);
}

.booking-lookup-list:empty {
  display: none;
}

.booking-lookup-list button {
  border: 0;
  border-bottom: 1px solid #e5eef6;
  background: #fff;
  padding: 8px 10px;
  text-align: left;
  color: #17324d;
  font-weight: 900;
  cursor: pointer;
}

.booking-lookup-list button:hover {
  background: #edf6ff;
}

.booking-lookup-list small {
  display: block;
  margin-top: 2px;
  color: #668097;
  font-size: 11px;
}

.booking-lookup-list mark,
.factory-fee-autocomplete-menu mark,
.supplier-fee-supplier-suggest mark {
  padding: 0 2px;
  border-radius: 2px;
  background: #ffe39a;
  color: #713e00;
}

.booking-mail-panel {
  max-width: 860px;
  margin: 14px auto 0;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #caddeb;
  border-radius: 6px;
  background: #fff;
}

.booking-mail-panel:not(.is-sending-mail) .booking-mail-required-fields .booking-field b {
  visibility: hidden;
}

.booking-file-field {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.booking-file-field span {
  color: #3d5874;
  font-size: 12px;
  font-weight: 900;
}

.booking-file-field small {
  grid-column: 2;
  color: #657c91;
  font-size: 12px;
}

/* Keep native file inputs visually consistent with the portal action controls. */
.booking-file-field input[type="file"] {
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid #aec5d8;
  border-bottom-color: #8faec6;
  border-radius: 5px;
  background: linear-gradient(#ffffff 0%, #f4f8fc 100%);
  color: #38536a;
  padding: 4px 7px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 1px 2px rgba(36, 78, 111, .08);
}

.booking-file-field input[type="file"]::file-selector-button {
  min-height: 28px;
  margin-right: 9px;
  padding: 0 12px;
  border: 1px solid #4d8fbd;
  border-bottom-color: #286b9d;
  border-radius: 4px;
  background: linear-gradient(#fafdff 0%, #d9edf9 48%, #a9cfe8 100%);
  color: #1d547f;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 0 #75a9cb;
}

.booking-file-field input[type="file"]:hover::file-selector-button {
  border-color: #347caf;
  background: linear-gradient(#ffffff 0%, #e7f5fd 48%, #b9dced 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 2px 3px rgba(28, 93, 138, .16);
}

.telex-release-card .booking-paper {
  display: grid;
  gap: 14px;
}

.telex-upload-panel,
.telex-mbl-panel {
  display: grid;
  gap: 10px;
  border: 1px solid #d3e1ee;
  border-radius: 7px;
  background: linear-gradient(#ffffff, #f7fbfe);
  padding: 13px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 8px 18px rgba(38, 76, 110, .06);
}

.telex-upload-panel.hidden,
.telex-mbl-panel .hidden {
  display: none;
}

.telex-mbl-panel > label:not(.booking-file-field) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #244c72;
  font-size: 13px;
  font-weight: 900;
}

.telex-mbl-panel input[type="radio"] {
  width: 15px;
  height: 15px;
}

.telex-release-card .booking-file-field {
  grid-template-columns: 126px minmax(0, 1fr);
}

.telex-release-card .booking-file-field input[type="file"] {
  min-height: 34px;
  border: 1px dashed #abc6dc;
  border-radius: 5px;
  background: #fbfdff;
  padding: 6px 8px;
}

.telex-mbl-upload-card {
  width: min(820px, calc(100vw - 34px));
}

.telex-mbl-upload-card .booking-order-form {
  display: grid;
  gap: 14px;
}

.telex-mbl-upload-card .booking-paper,
.telex-mbl-upload-card .telex-mbl-upload-mail {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
}

.telex-mbl-upload-context {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
  border: 1px solid #c9ddec;
  border-left: 4px solid #2d77b5;
  border-radius: 6px;
  background: linear-gradient(115deg, #fafdff, #edf6fd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96);
}

.telex-mbl-upload-context span {
  color: #3a6f99;
  font-size: 11px;
  font-weight: 900;
}

.telex-mbl-upload-context strong {
  color: #1a3858;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.7;
}

.telex-mbl-upload-summary {
  padding-top: 2px;
}

.telex-mbl-upload-file {
  display: grid;
  grid-template-columns: 112px auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 14px 0 2px;
}

.telex-mbl-upload-file > span:first-child {
  color: #3d5874;
  font-size: 12px;
  font-weight: 900;
}

.telex-mbl-upload-file b {
  margin-left: 2px;
  color: #d84040;
}

.telex-mbl-upload-file small {
  min-width: 0;
  color: #627c93;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telex-mbl-upload-mail {
  margin-top: 0;
}

.telex-mbl-upload-mail-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #dce7f1;
}

.telex-mbl-upload-mail-title span {
  color: #183d62;
  font-size: 14px;
  font-weight: 900;
}

.telex-mbl-upload-mail-title small {
  color: #6b8296;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 680px) {
  .telex-mbl-upload-file {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .telex-mbl-upload-mail-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

.booking-order-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid #cbdceb;
  background: #eef5fb;
}

.dispatch-sticky-error {
  flex: 0 0 min(760px, 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  margin: 0 auto 2px;
  padding: 8px 12px;
  border: 1px solid #dc9b9b;
  border-left: 5px solid #cf3f3f;
  border-radius: 6px;
  background: linear-gradient(#fffdfd, #fff1f1);
  color: #8d2828;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 8px 18px rgba(148, 44, 44, .12);
}

.dispatch-sticky-error.hidden {
  display: none;
}

.dispatch-sticky-error strong {
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.dispatch-sticky-error span {
  min-width: 0;
  color: #6f2020;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.booking-order-actions .default-cancel-btn,
.booking-order-actions .default-confirm-btn {
  position: static;
  right: auto;
  bottom: auto;
  min-width: 96px;
  width: 96px;
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.booking-order-actions .hbl-preview-btn {
  position: static;
  min-width: 118px;
  width: 118px;
  height: 36px;
  min-height: 36px;
  margin-left: 118px;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}

.dispatch-list-card {
  width: min(1080px, calc(100vw - 40px));
}

.dispatch-list-form {
  padding-bottom: 18px;
}

.dispatch-type-bar {
  padding: 14px 18px 4px;
}

.dispatch-type-bar label {
  display: grid;
  grid-template-columns: 92px minmax(180px, 260px);
  align-items: center;
  gap: 12px;
  color: #244763;
  font-size: 13px;
  font-weight: 900;
}

.dispatch-type-bar select,
.dispatch-inline-grid select {
  min-height: 34px;
  border: 1px solid #9eb8d1;
  border-radius: 4px;
  background: #fff;
  color: #173b60;
  font-weight: 850;
}

.dispatch-panel {
  padding: 12px 18px 0;
}

.dispatch-panel.hidden {
  display: none;
}

.dispatch-form-error {
  margin: 8px 18px 0;
  padding: 10px 12px;
  border: 1px solid #df9b9b;
  border-left: 4px solid #d94c4c;
  border-radius: 5px;
  background: linear-gradient(#fff9f9, #fff0f0);
  color: #9c2d2d;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(154, 48, 48, .08);
}

.dispatch-form-error.hidden {
  display: none;
}

.dispatch-required-error input,
.dispatch-required-error select,
input.dispatch-required-error,
select.dispatch-required-error {
  border-color: #d94c4c !important;
  background: #fffafa !important;
  box-shadow: 0 0 0 3px rgba(217, 76, 76, .16);
}

.dispatch-trailer-rows {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #d5e1ed;
  border-radius: 6px;
  background: #f8fbfe;
}

.dispatch-paper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.dispatch-trailer-title {
  align-items: center;
  gap: 12px;
}

.dispatch-trailer-title > div {
  display: grid;
  gap: 2px;
}

.dispatch-trailer-title span {
  color: #698096;
  font-size: 11px;
  font-weight: 650;
}

.dispatch-trailer-row {
  display: grid;
  grid-template-columns: minmax(135px, .68fr) minmax(345px, 2.1fr) minmax(240px, 1.08fr) 48px;
  grid-template-areas:
    "factory company time remove"
    "factory addr contact remove";
  gap: 10px;
  align-items: start;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #cfe0ef;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #f6fbff);
  box-shadow: 0 8px 18px rgba(35, 74, 109, .07);
}

.dispatch-trailer-factory {
  grid-area: factory;
  min-width: 0;
}

.dispatch-trailer-time-group {
  grid-area: time;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 4px 7px;
}

.dispatch-trailer-time-group > span {
  grid-column: 1 / -1;
  color: #3d5874;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.dispatch-trailer-time-group > span b {
  display: none;
  margin-left: 2px;
  color: #d64646;
}

.dispatch-trailer-time-group > span b.is-required {
  display: inline;
}

.dispatch-trailer-time-group input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  border: 1px solid #b9cfe3;
  border-radius: 4px;
  background: linear-gradient(#fff, #f8fbff);
  color: #17324d;
  font-size: 13px;
  font-weight: 800;
}

.dispatch-trailer-time-group input:disabled {
  cursor: not-allowed;
  border-color: #d3dde6;
  background: linear-gradient(#f4f6f8, #e7edf2);
  color: #7a8c9d;
  -webkit-text-fill-color: #7a8c9d;
  opacity: 1;
}

.dispatch-summary-time-field input[disabled] {
  cursor: not-allowed;
  border-color: #d3dde6;
  background: linear-gradient(#f4f6f8, #e7edf2);
  color: #6c7f91;
  -webkit-text-fill-color: #6c7f91;
  box-shadow: inset 0 1px 2px rgba(63, 87, 108, .08);
  opacity: 1;
}

.dispatch-trailer-row .booking-field {
  min-width: 0;
  grid-template-columns: 1fr;
  gap: 4px;
}

.dispatch-trailer-row .booking-field > span {
  line-height: 1.2;
}

.dispatch-trailer-company-field {
  grid-area: company;
}

.dispatch-trailer-contact-field {
  grid-area: contact;
  align-self: start;
}

.booking-field.dispatch-trailer-address-field {
  grid-area: addr;
  grid-template-columns: 1fr;
  /* `.booking-field.wide` adds a generic top margin.  In the dispatch-row
     grid that made the address label sit one step below the contact label. */
  margin-top: 0;
  align-self: start;
}

.dispatch-trailer-row select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #9eb8d1;
  border-radius: 4px;
  background: #fff;
  color: #173b60;
  font-weight: 850;
}

.dispatch-trailer-row input[readonly] {
  background: linear-gradient(#fafdff, #f3f8fc);
  color: #274b6a;
}

.dispatch-row-remove {
  grid-area: remove;
  align-self: end;
  min-height: 34px;
  border: 1px solid #d7a5a5;
  border-bottom-color: #b36f6f;
  border-radius: 4px;
  background: linear-gradient(#fff, #fff1f1);
  color: #9b3333;
  font-size: 12px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 #d7a5a5;
  cursor: pointer;
}

.dispatch-row-remove:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.dispatch-inline-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.7fr) minmax(190px, .6fr);
  gap: 12px;
  align-items: start;
  margin: 12px 0;
}

.dispatch-inline-grid .booking-field,
.dispatch-so-control {
  grid-template-columns: 1fr;
  gap: 4px;
}

.dispatch-inline-grid .booking-field > span,
.dispatch-so-control > span {
  line-height: 1.2;
}

.dispatch-so-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.dispatch-so-control {
  display: grid;
  align-content: start;
  min-width: 0;
}

.dispatch-so-control input:not([type="checkbox"]):not([type="file"]) {
  box-sizing: border-box;
  min-height: 34px;
}

.dispatch-so-file-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 34px;
}

.dispatch-so-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.dispatch-so-file-trigger {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid #5a9cc9;
  border-bottom-color: #3679aa;
  border-radius: 999px;
  background: linear-gradient(#ffffff 0%, #e4f3fb 52%, #c5e5f4 100%);
  color: #1d638f;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(34, 101, 145, .14);
}

.dispatch-so-file-trigger:hover {
  border-color: #347cad;
  background: linear-gradient(#ffffff 0%, #edf8fd 48%, #b6ddef 100%);
}

.dispatch-so-file-input:focus-visible + .dispatch-so-file-trigger {
  outline: 2px solid #237eb6;
  outline-offset: 2px;
}

.dispatch-so-selected-file {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: #6d8193;
  font-size: 12px;
  font-weight: 750;
  line-height: 34px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-so-selected-file.has-file {
  color: #2c668b;
  font-weight: 850;
}

.dispatch-so-file-status {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  min-height: 18px;
  color: #617a91;
  font-size: 12px;
  font-weight: 750;
}

.dispatch-so-file-status small {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-so-file-status.is-replacing {
  opacity: .56;
}

.dispatch-so-remove {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 1px solid #e3a8a8;
  border-radius: 999px;
  background: #fff8f8;
  color: #b04d4d;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.dispatch-so-remove:hover {
  border-color: #c97575;
  background: #fff0f0;
  color: #943333;
}

.dispatch-notes {
  display: grid;
  gap: 5px;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid #dce6ef;
  border-radius: 6px;
  background: #fbfdff;
  color: #435f78;
  font-size: 12px;
  line-height: 1.55;
}

.dispatch-notes strong {
  color: #173f63;
  font-size: 13px;
}

@media (max-width: 900px) {
  .dispatch-paper-grid,
  .dispatch-trailer-row,
  .dispatch-inline-grid {
    grid-template-columns: 1fr;
  }

  .dispatch-so-fields {
    grid-template-columns: 1fr;
  }

  .dispatch-trailer-row {
    grid-template-areas:
      "factory"
      "company"
      "time"
      "contact"
      "addr"
      "remove";
  }

  .dispatch-trailer-time-group {
    grid-template-columns: 1fr 1fr;
  }
}

.client-tel-card {
  width: min(520px, calc(100vw - 36px));
}

.client-tel-form {
  display: grid;
  gap: 14px;
  padding: 18px 18px 8px;
}

.client-tel-form label {
  display: grid;
  gap: 6px;
  color: #274864;
  font-size: 13px;
  font-weight: 950;
}

.client-tel-form input {
  height: 38px;
  border: 1px solid #9fb4c8;
  border-radius: 4px;
  background: #fff;
  color: #1d2b39;
  font-size: 14px;
  font-weight: 850;
  padding: 0 10px;
}

.client-tel-form p {
  margin: 0;
  color: #60788e;
  font-size: 12px;
  font-weight: 800;
}

.client-mail-card {
  width: min(1160px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.client-mail-head {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 58px 16px 22px;
  border-bottom: 1px solid #c6d7e5;
  background: linear-gradient(#fafdff, #eaf4fb);
}

.client-mail-head span {
  display: block;
  color: #64798c;
  font-size: 12px;
  font-weight: 900;
}

.client-mail-head strong {
  display: block;
  margin-top: 3px;
  color: #173f63;
  font-size: 21px;
  font-weight: 950;
}

.client-mail-head em {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #abc4d8;
  border-radius: 999px;
  background: #fff;
  color: #2c587b;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.client-mail-form {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(390px, .9fr) minmax(430px, 1.1fr);
  gap: 0;
  overflow: hidden;
}

.client-mail-compose {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 18px;
  border-right: 1px solid #cfdae5;
  background: #f7fafc;
}

.client-mail-compose label,
.client-mail-file-box {
  display: grid;
  gap: 6px;
}

.client-mail-compose span,
.client-mail-file-box span,
.client-mail-receiver-head span {
  color: #60778c;
  font-size: 12px;
  font-weight: 950;
}

.client-mail-compose b {
  margin-left: 2px;
  color: #b14141;
}

.client-mail-compose input,
.client-mail-compose select,
.client-mail-compose textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid #b8cbdd;
  border-radius: 6px;
  background: #fff;
  color: #20384d;
  font-size: 13px;
  font-weight: 850;
}

.client-mail-compose input,
.client-mail-compose select {
  padding: 0 10px;
}

.client-mail-content-field textarea {
  min-height: 230px;
  padding: 10px;
  resize: vertical;
  line-height: 1.6;
}

.client-mail-file-box {
  min-height: 56px;
  padding: 10px 12px;
  border: 1px dashed #a9c0d4;
  border-radius: 7px;
  background: #fff;
}

.client-mail-file-box input {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.client-mail-file-box em {
  color: #587188;
  font-style: normal;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.client-mail-receiver-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: #fff;
}

.client-mail-scope-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #d4e0ea;
  background: #f8fbfd;
}

.client-mail-scope-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.client-mail-scope-title span {
  display: block;
  color: #60778c;
  font-size: 12px;
  font-weight: 950;
}

.client-mail-scope-title strong {
  display: block;
  margin-top: 3px;
  color: #173f63;
  font-size: 15px;
  font-weight: 950;
}

.client-mail-scope-title em {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid #b8cbdd;
  border-radius: 999px;
  background: #fff;
  color: #315c7b;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.client-mail-filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.client-mail-filter {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid #b8ccdc;
  border-radius: 6px;
  background: #fff;
  color: #24435b;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.client-mail-filter:has(input:checked) {
  border-color: #2f74aa;
  background: #e7f2fb;
  color: #143f63;
  box-shadow: inset 0 0 0 1px rgba(47, 116, 170, .2);
}

.client-mail-filter input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.client-mail-receiver-head {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #d4e0ea;
}

.client-mail-receiver-head strong {
  display: block;
  margin-top: 3px;
  color: #173f63;
  font-size: 15px;
  font-weight: 950;
}

.client-mail-receiver-head strong i {
  font-style: normal;
}

.client-mail-receiver-tools {
  display: inline-flex;
  gap: 7px;
}

.client-mail-receiver-tools button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid #a8bed1;
  border-radius: 5px;
  background: linear-gradient(#fff, #edf5fb);
  color: #2b5475;
  font-size: 12px;
  font-weight: 900;
}

.client-mail-receivers {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding: 14px 16px 18px;
  background: #fbfdff;
}

.client-mail-receiver {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(120px, .36fr) minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid #c5d5e2;
  border-radius: 7px;
  background: #fff;
  color: #23394d;
}

.client-mail-receiver input {
  width: 16px;
  height: 16px;
}

.client-mail-receiver span {
  color: #173f63;
  font-size: 13px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-mail-receiver em {
  color: #5a7288;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.client-mail-receiver small {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.client-mail-receiver small:empty {
  display: none;
}

.client-mail-receiver small b {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border: 1px solid #bed0df;
  border-radius: 999px;
  background: #f2f7fb;
  color: #3f617c;
  font-size: 11px;
  font-weight: 900;
}

.client-mail-empty,
.client-mail-loading {
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px dashed #bdd0df;
  border-radius: 7px;
  background: #fff;
  color: #5b7288;
  text-align: center;
  font-size: 13px;
  font-weight: 850;
}

.client-mail-empty.error {
  border-color: #dfb8b8;
  color: #a34444;
  background: #fff8f8;
}

.client-edit-dialog {
  width: min(920px, calc(100vw - 48px));
  max-height: calc(100vh - 56px);
}

.client-edit-form {
  display: block;
  padding: 0;
  overflow: auto;
  background: #f8fbfd;
}

.client-form-section {
  padding: 17px 22px 19px;
  border-bottom: 1px solid #d5e0e9;
  background: #fff;
}

.client-form-section:nth-of-type(even) {
  background: #fbfdff;
}

.client-form-section-last {
  border-bottom: 0;
}

.client-form-section h4 {
  margin: 0 0 13px;
  color: #183e64;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.4;
}

.client-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 16px;
}

.client-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.client-contact-secondary {
  display: grid;
  gap: 13px;
  min-width: 0;
}

.client-profile-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.client-edit-form label,
.client-record-form label {
  display: grid;
  gap: 6px;
  color: #274864;
  font-size: 13px;
  font-weight: 950;
}

.client-edit-form label > span,
.client-record-form label > span,
.client-toggle-field > span,
.client-repeat-head > span,
.client-port-title {
  color: #1c3d5c;
}

.client-edit-form b {
  margin-left: 3px;
  color: #bc4b48;
}

.client-edit-form input,
.client-edit-form select,
.client-edit-form textarea,
.client-record-form input,
.client-record-form select,
.client-record-form textarea {
  min-height: 36px;
  border: 1px solid #9fb4c8;
  border-radius: 4px;
  background: #fff;
  color: #1d2b39;
  font-size: 13px;
  font-weight: 800;
  padding: 0 10px;
}

.client-edit-form input:focus,
.client-edit-form select:focus,
.client-edit-form textarea:focus {
  outline: 0;
  border-color: #4c83ae;
  box-shadow: 0 0 0 3px rgba(69, 128, 174, .13);
}

.client-edit-form textarea,
.client-record-form textarea {
  min-height: 84px;
  padding: 10px;
  resize: vertical;
}

.client-edit-form .wide,
.client-record-form .wide {
  grid-column: 1 / -1;
}

.client-repeat-field {
  min-width: 0;
}

.client-repeat-head {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: #1c3d5c;
  font-size: 13px;
  font-weight: 950;
}

.client-repeat-add,
.client-repeat-remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.client-repeat-add {
  width: 28px;
  height: 28px;
  border: 1px solid #6f99b9;
  border-bottom-color: #4f7d9f;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #e7f2fa 100%);
  color: #285d84;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #bdcfdd;
}

.client-repeat-add:hover {
  border-color: #4c82ab;
  background: #edf7fe;
}

.client-repeat-rows {
  display: grid;
  gap: 8px;
}

.client-repeat-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
}

.client-repeat-row:not(:has(.client-repeat-remove)) {
  grid-template-columns: 28px minmax(0, 1fr);
}

.client-repeat-index {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c4d3df;
  border-radius: 50%;
  background: #f3f7fa;
  color: #557087;
  font-size: 11px;
  font-weight: 950;
}

.client-repeat-remove {
  width: 28px;
  height: 28px;
  border: 1px solid #d0b8b5;
  border-radius: 50%;
  background: #fffafa;
  color: #a44d49;
  font-size: 17px;
  line-height: 1;
}

.client-repeat-remove:hover {
  border-color: #bd7772;
  background: #fff1f0;
}

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

.client-port-fieldset {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid #bfd0df;
  border-radius: 6px;
  background: #f7fafc;
}

.client-port-fieldset .client-repeat-head {
  margin-bottom: 9px;
}

.client-port-title {
  padding: 0;
  color: #1c3d5c;
  font-size: 13px;
  font-weight: 950;
}

.client-port-row .client-port-lookup-menu {
  top: calc(100% + 4px);
  right: 36px;
  left: 36px;
}

.client-toggle-field {
  display: grid;
  gap: 6px;
  color: #274864;
  font-size: 13px;
  font-weight: 950;
}

.client-toggle-options {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-check-line {
  display: inline-flex !important;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #b9cad8;
  border-radius: 999px;
  background: #f8fbfd;
  color: #34536c;
  font-weight: 900;
  cursor: pointer;
}

.client-check-line input {
  min-height: auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #3977aa;
}

.client-check-line:has(input:checked) {
  border-color: #4e82aa;
  background: #eaf5fc;
  color: #1e567f;
}

@media (max-width: 820px) {
  .client-edit-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .client-profile-grid,
  .client-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .client-edit-dialog {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .client-form-section {
    padding: 15px 14px 17px;
  }

  .client-form-grid,
  .client-contact-grid,
  .client-profile-grid,
  .client-route-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-toggle-options {
    flex-wrap: wrap;
  }
}

.client-contract-dialog {
  width: min(1500px, calc(100vw - 48px));
  max-height: calc(100vh - 56px);
}

.client-contract-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  padding: 18px;
}

.client-contract-summary > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  border-bottom: 1px solid #d7e2ec;
}

.client-contract-summary > div.wide {
  grid-column: 1 / -1;
  align-items: flex-start;
}

.client-contract-summary span {
  color: #60788e;
  font-weight: 900;
}

.client-contract-summary strong {
  color: #1d2b39;
  font-weight: 900;
  white-space: pre-wrap;
}

.client-contract-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px 14px;
}

.client-contract-actions label {
  margin-right: auto;
  color: #1d2b39;
  font-weight: 950;
}

.client-record-list {
  padding: 0 18px 18px;
  overflow: auto;
}

.client-record-table {
  min-width: 980px;
}

.client-record-important td {
  color: #d34e55;
  font-weight: 950;
}

.client-record-card {
  width: min(560px, calc(100vw - 36px));
}

.client-record-form {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.client-record-reminder {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #c5d8e6;
  border-radius: 6px;
  background: linear-gradient(135deg, #fbfdff, #f0f7fc);
}

.client-record-reminder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.client-record-reminder-head > span {
  color: #274864;
  font-size: 13px;
  font-weight: 950;
}

.client-record-reminder-toggle {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px 0 8px;
  border: 1px solid #aebfd0;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #edf4f9);
  color: #4b687f;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 2px 5px rgba(46, 94, 132, .08);
}

.client-record-reminder-toggle > i {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border: 1px solid #9baebe;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-size: 0;
}

.client-record-reminder-toggle.is-enabled {
  border-color: #3d7dad;
  background: linear-gradient(#fafdff, #dceefa);
  color: #235f8e;
}

.client-record-reminder-toggle.is-enabled > i {
  border-color: #2f78aa;
  background: #438ec2;
  box-shadow: inset 0 0 0 3px #e8f4fc;
}

.client-record-reminder-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 106px auto;
  align-items: center;
  gap: 9px;
}

.client-record-reminder-options > span,
.client-record-reminder-lock {
  color: #6a8397;
  font-size: 11px;
  font-weight: 800;
}

.client-record-reminder-options input[type="time"] {
  min-height: 34px;
  padding: 0 8px;
}

.client-record-reminder-quick {
  display: inline-flex;
  gap: 5px;
}

.client-record-reminder-quick button {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid #b7cad9;
  border-radius: 999px;
  background: #fff;
  color: #37617f;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.client-record-reminder-quick button.is-selected {
  border-color: #3f83b4;
  background: linear-gradient(#eff8fe, #d9edf9);
  color: #1f5f8d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 1px 3px rgba(44, 102, 146, .14);
}

.client-record-reminder-quick button:hover,
.client-record-reminder-toggle:hover {
  filter: brightness(.985);
  transform: translateY(-1px);
}

.client-record-reminder-toggle:focus-visible,
.client-record-reminder-quick button:focus-visible {
  outline: 3px solid rgba(60, 139, 190, .24);
  outline-offset: 2px;
}

.client-record-reminder-status {
  color: #2f719d;
  font-style: normal;
}

.client-record-reminder-status.completed,
.client-record-reminder-status.cancelled {
  color: #7a8b98;
}

.client-record-meta .client-record-reminder-status.pending {
  padding: 5px 10px;
  border: 1px solid #d99a37;
  border-radius: 999px;
  background: #fff2d5;
  color: #855007;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(133, 80, 7, .12);
}

@media (max-width: 620px) {
  .client-record-reminder-options {
    grid-template-columns: minmax(0, 1fr) 106px;
  }

  .client-record-reminder-quick {
    grid-column: 1 / -1;
  }
}

.base-row-select {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #b8c9d9;
  border-radius: 3px;
  background: #fff;
}

.base-row-select input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--blue);
}

.table-action-link {
  min-height: 26px;
  border: 0;
  background: transparent;
  color: #174f91;
  text-decoration: underline;
  font-weight: 900;
}

.old-action-chip {
  width: 82px;
  height: 30px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 6px;
  border: 1px solid #b8c9d9;
  border-radius: 3px;
  background: linear-gradient(#ffffff, #dcebf6);
  color: #333;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

.old-action-chip:hover {
  background: #fff;
}

/* Palette and elevation mirror the visible order-list .order-special-event-button.has-events state;
   dimensions stay local so every base-data management table keeps its layout. */
.old-action-chip.yellow {
  width: 92px;
  height: 32px;
  min-width: 92px;
  min-height: 32px;
  box-sizing: border-box;
  border: 1px solid #bc8c45;
  border-bottom-color: #8d642c;
  border-radius: 5px;
  background: linear-gradient(#fffdf7 0%, #f9eed7 52%, #ecd7ad 100%);
  color: #69491f;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 0 #b58b51,
    0 7px 14px rgba(111, 77, 30, .14);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}

.old-action-chip.yellow.small {
  width: 92px;
}

.old-action-chip.yellow:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
}

.old-action-chip.blue {
  width: 92px;
  height: 32px;
  min-width: 92px;
  min-height: 32px;
  border: 1px solid #78a6c7;
  border-bottom-color: #4e7391;
  border-radius: 4px;
  background: linear-gradient(#ffffff 0%, #e8f5fd 50%, #c7e0f2 100%);
  color: #174f78;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 0 #7fa5c0,
    0 7px 14px rgba(36, 85, 124, .13);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}

.old-action-chip.blue:hover {
  border-color: #5d93bc;
  border-bottom-color: #456d89;
  background: linear-gradient(#ffffff 0%, #f0f9ff 48%, #d3ebfb 100%);
  color: #174f78;
  filter: brightness(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #6f98b6,
    0 10px 18px rgba(36, 85, 124, .17);
  transform: translateY(-2px);
}

.old-action-chip.muted {
  width: auto;
  color: #718093;
  background: #f5f7f9;
}

.port-base-ops .old-action-chip.blue {
  width: 112px;
  min-width: 112px;
}

.port-base-ops .blue-action-button {
  width: 62px;
  min-width: 62px;
}

.old-action-chip b {
  min-width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #e16f6f;
  color: #eee;
  font-size: 11px;
  font-weight: 400;
}

.old-action-chip.yellow b {
  box-sizing: border-box;
  border: 1px solid #9c2e35;
  background: linear-gradient(#df666d, #ba3740);
  color: #fff;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 2px 4px rgba(119, 31, 37, .2);
}

.base-ops .old-action-chip[data-base-related="files"] {
  width: 60px;
}

.base-multiline {
  max-height: 52px;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.45;
}

.factory-done-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid #b6c9da;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #eaf3fa);
  color: #244b78;
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95);
}

.factory-done-chip.muted {
  color: #728196;
  background: #f5f8fb;
}

.yesno-chip {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #c8d2dd;
  border-radius: 999px;
  background: #f3f6f9;
  color: #68798a;
  font-weight: 900;
}

.yesno-chip.on {
  border-color: #92c7b1;
  background: #edf9f4;
  color: #226a57;
}

.edit-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(20, 37, 55, .28), rgba(8, 18, 30, .46));
  backdrop-filter: blur(2px);
}

.edit-backdrop.stacked-edit {
  z-index: 90;
  background:
    linear-gradient(180deg, rgba(12, 27, 42, .25), rgba(6, 15, 26, .42));
}

.freight-upload-dialog {
  width: min(500px, calc(100vw - 32px));
  overflow: hidden;
}

.freight-upload-frame-wrap {
  min-height: 310px;
  background: #f5f9fc;
}

.freight-upload-frame-wrap iframe {
  display: block;
  width: 100%;
  min-height: 310px;
  border: 0;
  background: #f5f9fc;
}

.freight-history-frame-dialog {
  width: min(760px, calc(100vw - 32px));
}

.freight-history-frame-wrap {
  min-height: 360px;
  background: #f5f9fc;
}

.freight-history-frame-wrap iframe {
  display: block;
  width: 100%;
  min-height: 360px;
  border: 0;
  background: #f5f9fc;
}

.edit-dialog {
  width: min(980px, calc(100vw - 52px));
  max-height: calc(100vh - 62px);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #7e9db8;
  border-radius: 8px;
  background:
    linear-gradient(#ffffff, #fbfdff 42%, #f2f6fa);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 2px 0 rgba(255, 255, 255, .38),
    0 18px 38px rgba(7, 22, 38, .22),
    0 34px 90px rgba(7, 22, 38, .34);
}

.edit-dialog::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #2f609e, #6aa8ce 48%, #d9b15e);
  pointer-events: none;
}

.edit-dialog > .track-head {
  min-height: 76px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid #c2d0de;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(237, 244, 250, .96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 1px 0 rgba(255, 255, 255, .8);
}

.edit-dialog > .track-head .eyebrow {
  color: #6b7f92;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.edit-dialog > .track-head h3 {
  margin: 4px 0 0;
  color: #173b64;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.22;
  text-shadow: 0 1px 0 #fff;
}

.edit-dialog > .track-head button {
  width: 34px;
  height: 34px;
  border: 1px solid #a9bdcf;
  border-bottom-color: #7d97ad;
  border-radius: 5px;
  background: linear-gradient(#ffffff, #edf4f9);
  color: #38566f;
  font-size: 22px;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 2px 0 #c9d6e2,
    0 7px 14px rgba(31, 55, 75, .12);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.edit-dialog > .track-head button:hover {
  background: linear-gradient(#ffffff, #f6fbff);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #b7c8d7,
    0 10px 18px rgba(31, 55, 75, .16);
}

.related-dialog {
  width: min(1180px, calc(100vw - 44px));
}

.freight-history-dialog {
  width: min(900px, calc(100vw - 44px));
}

.freight-rule-dialog {
  width: min(1040px, calc(100vw - 44px));
}

.freight-rule-body {
  min-height: 300px;
}

.freight-rule-form {
  display: grid;
  gap: 12px;
}

.freight-rule-form label {
  display: grid;
  gap: 5px;
  color: var(--blue-dark);
  font-weight: 900;
}

.freight-rule-form input,
.freight-rule-form select {
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 0 9px;
  background: #fff;
  color: var(--text);
  font-weight: 800;
}

.freight-rule-form small {
  color: var(--muted);
  font-weight: 800;
}

.freight-rule-port-field small {
  min-height: 16px;
  color: #51708b;
  font-size: 11px;
  letter-spacing: 0;
}

.freight-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
}

.related-body {
  min-height: 360px;
  overflow: auto;
  padding: 14px;
  background: #f8fbfd;
}

.freight-history-body {
  min-height: 260px;
}

.freight-history-table th,
.freight-history-table td {
  white-space: nowrap;
}

.related-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.related-summary-item {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #b9c9d8;
  border-radius: 3px;
  background: #fff;
}

.related-summary-item span {
  color: #61758a;
  font-weight: 900;
}

.related-summary-item strong {
  color: var(--blue-dark);
}

.related-table-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  background: #fff;
}

.related-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.spec-event-panel {
  max-height: 700px;
}

.spec-event-add {
  margin: 2px 0 6px;
  text-align: right;
}

.legacy-add-icon {
  width: 24px;
  height: 24px;
  border: 1px solid #7ca8c8;
  border-radius: 3px;
  background: linear-gradient(#f8fcff, #d9ecfa);
  color: #24628f;
  font-size: 18px;
  line-height: 20px;
  font-weight: 900;
}

.legacy-add-button {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid #7ca8c8;
  border-radius: 3px;
  background: linear-gradient(#f8fcff, #d9ecfa);
  color: #24628f;
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 0 #bfd7e8;
  cursor: pointer;
}

.legacy-add-button:hover {
  background: linear-gradient(#fff, #e7f4fc);
  transform: translateY(-1px);
}

.biz-file-panel {
  max-height: 700px;
}

.biz-file-toolbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid #c6d6e5;
  background: linear-gradient(#fff, #f0f7fc);
}

.biz-file-toolbar strong {
  display: block;
  color: #1f5279;
  font-size: 15px;
  font-weight: 900;
}

.biz-file-toolbar span {
  color: #6c7d8d;
  font-size: 12px;
  font-weight: 800;
}

.biz-file-list {
  display: grid;
  gap: 10px;
}

.biz-file-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 92px;
  gap: 10px;
  padding: 10px;
  border: 1px solid #c3d2df;
  border-left: 4px solid #2f77a7;
  background: linear-gradient(#fff, #f8fbfd);
  box-shadow: 0 8px 18px rgba(30, 69, 98, .08);
}

.employee-subscribe {
  max-width: 820px;
  margin: 0 auto;
}

.subscribe-related .related-dialog {
  width: min(1040px, calc(100vw - 44px));
  max-height: calc(100vh - 28px);
}

.subscribe-related .related-body {
  min-height: 0;
  max-height: calc(100vh - 112px);
  padding: 14px 18px 18px;
}

.subscribe-related .edit-footer {
  display: none;
}

.subscribe-related .employee-subscribe {
  max-width: 820px;
}

.action-confirm-card {
  position: relative;
  display: grid;
  gap: 14px;
  border: 1px solid #c4d5e3;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff, #f4f8fb);
  padding: 18px 18px 17px;
  box-shadow:
    0 10px 24px rgba(32, 56, 82, .10),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.action-confirm-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(#2f5f9f, #6f94bd);
}

.action-confirm-badge {
  width: fit-content;
  border: 1px solid #b9cce0;
  border-radius: 999px;
  background: #eef5fb;
  color: #2f5f9f;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.action-confirm-card strong {
  color: #203852;
  font-size: 17px;
}

.subscribe-card {
  gap: 16px;
}

.subscribe-intro {
  display: grid;
  gap: 4px;
  border: 1px solid #d6e2ec;
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(47, 95, 159, .09), rgba(255, 255, 255, .90)),
    #ffffff;
  padding: 12px 14px;
}

.subscribe-intro b {
  color: #203852;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.subscribe-intro span {
  color: #607187;
  font-size: 12px;
  font-weight: 800;
}

.subscribe-timeline {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 2px 0 2px 1px;
}

.subscribe-timeline::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 22px;
  width: 2px;
  background: linear-gradient(#9fb8cf, #d9e4ee);
  border-radius: 999px;
}

.subscribe-option {
  position: relative;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: stretch !important;
  gap: 12px !important;
  min-height: 72px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 !important;
  cursor: pointer;
  box-shadow: none;
  transition: transform .16s ease;
}

.subscribe-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding-top: 12px;
}

.subscribe-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.subscribe-step {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #9fb5c8;
  border-radius: 50%;
  background: linear-gradient(#ffffff, #eef4f8);
  color: #40576f;
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    0 4px 10px rgba(32, 56, 82, .11),
    0 0 0 5px rgba(255, 255, 255, .92);
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}

.subscribe-check {
  position: absolute;
  right: 1px;
  top: 37px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid #b8c8d6;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(28, 46, 64, .12);
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.subscribe-check::after {
  content: "";
  width: 5px;
  height: 8px;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(38deg) translateY(-1px);
}

.subscribe-option input:checked + .subscribe-node .subscribe-step {
  border-color: #2f5f9f;
  background: linear-gradient(#4f83bd, #2f5f9f);
  color: #ffffff;
  transform: scale(1.08);
  box-shadow:
    0 10px 22px rgba(47, 95, 159, .34),
    0 0 0 6px rgba(217, 233, 247, .98),
    inset 0 1px 0 rgba(255, 255, 255, .25);
}

.subscribe-option input:checked + .subscribe-node .subscribe-check {
  border-color: #2f5f9f;
  background: #ffffff;
  transform: scale(1.08);
}

.subscribe-option input:checked + .subscribe-node .subscribe-check::after {
  border-color: #2f5f9f;
}

.subscribe-copy {
  position: relative;
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  border: 1px solid #cfdde8;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff, #f7fafc);
  padding: 13px 15px;
  box-shadow:
    0 7px 18px rgba(32, 56, 82, .08),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.subscribe-copy::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-left: 1px solid #cfdde8;
  border-bottom: 1px solid #cfdde8;
  background: #ffffff;
  transform: rotate(45deg);
}

.subscribe-option:hover .subscribe-copy {
  border-color: #9fb8cf;
  background:
    linear-gradient(90deg, rgba(47, 95, 159, .06), rgba(255, 255, 255, .95)),
    #ffffff;
}

.subscribe-option input:checked ~ .subscribe-copy {
  transform: translateX(4px);
  border-color: #2f5f9f;
  background:
    linear-gradient(90deg, rgba(47, 95, 159, .16), rgba(255, 255, 255, .96)),
    #ffffff;
  box-shadow:
    0 13px 28px rgba(47, 95, 159, .20),
    inset 7px 0 0 #2f5f9f,
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.subscribe-status {
  position: absolute;
  top: 10px;
  right: 12px;
  display: none;
  border: 1px solid #2f5f9f;
  border-radius: 999px;
  background: #2f5f9f;
  color: #ffffff;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}

.subscribe-option input:checked ~ .subscribe-copy .subscribe-status {
  display: inline-flex;
}

.subscribe-copy b {
  color: #203852;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.subscribe-option input:checked ~ .subscribe-copy b {
  color: #18324d;
  padding-right: 64px;
}

.subscribe-copy em {
  color: #607187;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.subscribe-option input:checked ~ .subscribe-copy em {
  color: #425d76;
}

.action-modal-note {
  border: 1px solid #d8e4ee;
  border-radius: 6px;
  background: #f7fafc;
  color: #607187;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.employee-subscribe-footer {
  display: flex;
  justify-content: flex-end;
}

.employee-subscribe-save {
  min-width: 132px;
  height: 38px;
  border: 1px solid #b6c5d3;
  border-radius: 4px;
  background: linear-gradient(#fff, #edf3f8);
  color: #33485f;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(30, 48, 66, .08);
  transition: transform .16s ease, box-shadow .16s ease;
}

.employee-subscribe-save.primary {
  border-color: var(--blue-dark);
  background: linear-gradient(#467bbd, #2f5f9f);
  color: #fff;
  box-shadow:
    0 3px 8px rgba(47, 95, 159, .24),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

.employee-subscribe-save:hover {
  transform: translateY(-1px);
  box-shadow:
    0 5px 12px rgba(47, 95, 159, .28),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}

.subscribe-related .action-confirm-card {
  gap: 11px;
  padding: 16px 17px 15px;
}

.subscribe-related .subscribe-intro {
  padding: 10px 13px;
}

.subscribe-related .subscribe-timeline {
  gap: 7px;
}

.subscribe-related .subscribe-option {
  min-height: 61px;
}

.subscribe-related .subscribe-node {
  padding-top: 9px;
}

.subscribe-related .subscribe-step {
  width: 36px;
  height: 36px;
}

.subscribe-related .subscribe-check {
  top: 33px;
}

.subscribe-related .subscribe-copy {
  padding: 10px 14px;
}

.subscribe-related .subscribe-copy::before {
  top: 20px;
}

.subscribe-related .action-modal-note {
  padding: 8px 11px;
}

.subscribe-related .employee-subscribe-save {
  height: 36px;
}

.action-notice {
  position: fixed;
  z-index: 3600;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(rgba(232, 239, 247, .22), rgba(208, 220, 233, .32)),
    rgba(16, 29, 45, .46);
  backdrop-filter: blur(3px);
  color: #203852;
  font-weight: 800;
  line-height: 1.55;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility 0s linear .18s;
}

.action-notice-card {
  position: relative;
  width: min(620px, 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  border: 1px solid #8faac2;
  border-left: 6px solid #2f65a7;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(47, 101, 167, .08), rgba(255, 255, 255, .96)),
    #f8fbff;
  padding: 24px 28px 24px 26px;
  text-align: left;
  box-shadow:
    0 30px 76px rgba(14, 29, 46, .36),
    0 0 0 6px rgba(255, 255, 255, .50),
    inset 0 1px 0 rgba(255, 255, 255, .96);
  transform: translateY(8px);
  transition: transform .18s ease;
}

.action-notice-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #86b1cf;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .28) 42%, transparent 43%),
    linear-gradient(180deg, #3a86c3 0%, #23659f 100%);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .46),
    0 8px 16px rgba(31, 94, 145, .20);
}

.action-notice-body {
  min-width: 0;
  padding-right: 34px;
}

.action-notice-body em {
  display: block;
  margin-bottom: 4px;
  color: #2f65a7;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
}

.action-notice-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid #bfd0df;
  border-radius: 4px;
  background: linear-gradient(#fff, #eef4f8);
  color: #617389;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.action-notice-close:hover {
  border-color: #87a7c0;
  background: linear-gradient(#fff, #e6f0f7);
  color: #254d70;
  transform: translateY(-1px);
}

.action-notice-card strong {
  display: block;
  color: #1e3854;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.35;
}

.action-notice-card span {
  display: block;
  margin-top: 7px;
  color: #5d6f84;
  font-size: 14px;
  font-weight: 800;
  white-space: pre-wrap;
}

.action-notice-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
}

.action-notice-ok {
  min-width: 106px;
  height: 36px;
  border: 1px solid #5b91ba;
  border-bottom-color: #326b9a;
  border-radius: 5px;
  background: linear-gradient(#ffffff 0%, #e7f4fc 45%, #b9d9ef 100%);
  color: #174f78;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 0 #6d99bb,
    0 8px 16px rgba(36, 85, 124, .16);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.action-notice-ok:hover {
  background: linear-gradient(#ffffff 0%, #f0f9ff 48%, #cbe7f8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #5f8fb2,
    0 11px 18px rgba(36, 85, 124, .18);
  transform: translateY(-2px);
}

.action-notice.success .action-notice-card {
  border-color: #8fafc2;
  border-left-color: #2f65a7;
}

.action-notice.success .action-notice-icon {
  border-color: #7eb0d3;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .28) 42%, transparent 43%),
    linear-gradient(180deg, #3a86c3 0%, #23659f 100%);
}

.action-notice.error .action-notice-card {
  border-color: #c9a2a2;
  border-left-color: #a75757;
  background:
    linear-gradient(90deg, rgba(167, 87, 87, .08), rgba(255, 255, 255, .96)),
    #fffafa;
}

.action-notice.error .action-notice-card strong {
  color: #6f2f2f;
}

.action-notice.error .action-notice-icon {
  border-color: #cf9292;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .90), rgba(255, 255, 255, .22) 42%, transparent 43%),
    linear-gradient(180deg, #c66a6a 0%, #984545 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .44),
    0 8px 16px rgba(146, 66, 66, .19);
}

.action-notice.error .action-notice-body em {
  color: #984545;
}

.action-notice.warn .action-notice-card {
  border-color: #d8bd78;
  border-left-color: #b88928;
  background:
    linear-gradient(90deg, rgba(184, 137, 40, .08), rgba(255, 255, 255, .96)),
    #fffdf7;
}

.action-notice.warn .action-notice-icon {
  border-color: #d3aa4b;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .90), rgba(255, 255, 255, .22) 42%, transparent 43%),
    linear-gradient(180deg, #e4b64f 0%, #b88928 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .44),
    0 8px 16px rgba(154, 112, 32, .17);
}

.action-notice.warn .action-notice-body em {
  color: #9b6b18;
}

.action-notice.info .action-notice-icon {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

.action-notice.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.action-notice.show .action-notice-card {
  transform: translateY(0);
}

.mail-result-modal {
  z-index: 3300;
}

.mail-result-card {
  width: min(560px, calc(100vw - 44px));
  border-left: 7px solid #2f76b7;
}

.mail-result-card.success {
  border: 1px solid #8fb8d4;
  border-left: 7px solid #2f76b7;
}

.mail-result-card.error {
  border: 1px solid #d4a4a4;
  border-left: 7px solid #b84f55;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
}

.mail-result-card.error .mail-confirm-head span,
.mail-result-card.error .mail-confirm-head strong {
  color: #7c3035;
}

.mail-result-card.error .mail-confirm-body dt {
  color: #8d3d42;
}

.mail-result-card.attention {
  border: 1px solid #d7bd82;
  border-left: 7px solid #bd8732;
  background: linear-gradient(180deg, #fffef9 0%, #fff8e9 100%);
}

.mail-result-card.attention .mail-confirm-head span,
.mail-result-card.attention .mail-confirm-head strong,
.mail-result-card.attention .mail-confirm-body dt {
  color: #80591f;
}

.mail-result-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(180deg, #58a7d9 0%, #2379b8 52%, #176199 100%);
  color: #fff;
  font-size: 25px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 9px 18px rgba(31, 105, 166, .28);
}

.mail-result-dialog.error .mail-result-icon {
  background:
    linear-gradient(180deg, #e48688 0%, #c95f64 52%, #a9444a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .36),
    0 9px 18px rgba(171, 73, 78, .24);
}

.mail-result-content span {
  display: block;
  color: #4e7ca4;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
}

.mail-result-content h3 {
  margin: 3px 34px 0 0;
  color: #173a5d;
  font-size: 23px;
  font-weight: 950;
  line-height: 1.28;
}

.mail-result-dialog.error .mail-result-content h3 {
  color: #7c3035;
}

.mail-result-content p {
  margin: 10px 0 0;
  color: #3e5871;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.7;
  white-space: pre-wrap;
}

.mail-result-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

.mail-result-actions button {
  min-width: 118px;
  height: 38px;
  border: 1px solid #2c6da8;
  border-bottom-color: #1d4f82;
  border-radius: 5px;
  background: linear-gradient(#67a6d2 0%, #3c83bd 46%, #2b669f 100%);
  color: #fff;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 3px 0 #1d4f82,
    0 10px 18px rgba(28, 82, 128, .18);
}

.mail-result-actions button:hover {
  background: linear-gradient(#78b4dc 0%, #438cc4 46%, #2d70a9 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .48),
    0 4px 0 #1d4f82,
    0 13px 22px rgba(28, 82, 128, .22);
}

.mail-result-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 31px;
  height: 31px;
  border: 1px solid #bfd0df;
  border-radius: 4px;
  background: linear-gradient(#fff, #eef4f8);
  color: #617389;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.mail-result-close:hover {
  border-color: #8faec8;
  background: linear-gradient(#fff, #e5eff7);
  color: #244f78;
  transform: translateY(-1px);
}

.hbl-bill-card {
  width: min(1340px, calc(100vw - 34px));
  background: #edf4fa;
}

.hbl-bill-form {
  max-height: min(74vh, 760px);
  overflow: auto;
  padding: 16px 18px 110px;
  background:
    linear-gradient(180deg, rgba(239,247,253,.98) 0%, rgba(248,251,254,.98) 100%);
}

.hbl-workbench-head {
  background:
    linear-gradient(180deg, #ffffff 0%, #edf6fd 100%);
}

.hbl-workbench-head > div:first-child small {
  display: block;
  margin-top: 4px;
  color: #41617e;
  font-size: 12px;
  font-weight: 900;
}

.hbl-head-status {
  margin-left: auto;
  margin-right: 42px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
}

.hbl-head-status em,
.hbl-head-status b {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid #b9d2e8;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.hbl-head-status em {
  background: linear-gradient(#f9fcff, #e9f3fb);
  color: #315b81;
}

.hbl-head-status b {
  background: linear-gradient(#fffdf6, #f2dfa5);
  color: #6b4a10;
}

.hbl-workbench-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(306px, 348px);
  gap: 16px;
  align-items: start;
}

.hbl-workbench-main {
  min-width: 0;
}

.hbl-control-strip {
  display: grid;
  grid-template-columns: minmax(230px, 340px);
  gap: 10px;
  margin-bottom: 12px;
}

.hbl-mail-dock-head span,
.hbl-mail-summary span {
  display: block;
  color: #42617d;
  font-size: 11px;
  font-weight: 950;
}

.hbl-mail-dock-head strong,
.hbl-mail-summary strong {
  display: block;
  margin-top: 6px;
  color: #15395d;
  font-size: 14px;
  font-weight: 950;
}

.hbl-type-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.hbl-type-row .booking-field {
  margin: 0;
  min-height: 50px;
  border: 1px solid #bfd5e8;
  border-radius: 7px;
  background: #fff;
  padding: 8px 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 8px 18px rgba(43, 82, 116, .08);
}

.hbl-type-row .booking-field > span {
  line-height: 32px;
}

.hbl-document-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  border: 1px solid #9fbad4;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 16px 32px rgba(32, 78, 119, .14),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.hbl-party-card,
.hbl-title-card {
  min-height: 172px;
  border-right: 1px solid #b8cce0;
  border-bottom: 1px solid #b8cce0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
  padding: 10px;
}

.hbl-party-card .booking-field,
.hbl-title-card .booking-field {
  margin: 0;
}

.hbl-party-card textarea {
  min-height: 118px;
  border-color: #c4d8e9;
  background: #fff;
  font-family: "Times New Roman", Georgia, serif;
  font-weight: 800;
  line-height: 1.35;
}

.hbl-title-card {
  border-right: 0;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: space-between;
  padding: 12px 14px;
}

.hbl-number-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.hbl-number-row > label {
  min-height: 60px;
  border: 1px solid #b8d0e6;
  border-radius: 6px;
  background: linear-gradient(#fff, #f3f8fc);
  padding: 8px 10px;
}

.hbl-number-row > .booking-field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  min-height: 60px;
  margin: 0;
  border: 1px solid #b8d0e6;
  border-radius: 6px;
  background: linear-gradient(#fff, #f3f8fc);
  padding: 8px 10px;
  box-shadow: none;
}

.hbl-number-row > .booking-field > span {
  line-height: 1.2;
}

.hbl-number-row > .booking-field input {
  height: 31px;
  margin: 0;
}

.hbl-number-row > label > span,
.hbl-section-title {
  display: block;
  color: #315b81;
  font-size: 12px;
  font-weight: 950;
}

.hbl-number-row > label > strong {
  display: block;
  margin-top: 7px;
  color: #15395d;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .2px;
}

.hbl-logo-block {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 92px;
  border: 1px solid #d3e2ef;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f2f7fb 100%);
  padding: 12px;
}

.hbl-logo-block img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(17, 56, 93, .14));
}

.hbl-logo-block strong {
  display: block;
  color: #12375a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: .6px;
}

.hbl-logo-block span {
  display: block;
  margin-top: 3px;
  color: #315b81;
  font-size: 13px;
  font-weight: 850;
}

.hbl-logo-block small {
  display: block;
  margin-top: 8px;
  color: #6d8399;
  font-size: 11px;
  line-height: 1.35;
}

.hbl-shipper-card {
  grid-row: span 1;
}

.hbl-release-card {
  border-right: 0;
}

.hbl-release-card .booking-field {
  grid-template-columns: 1fr;
  gap: 6px;
}

.hbl-release-card .booking-field > span {
  line-height: 1.2;
}

.hbl-upload-panel {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid #c1d7e9;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
  box-shadow: 0 10px 22px rgba(32, 78, 119, .08);
}

.hbl-make-panel {
  margin-top: 0;
}

.hbl-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #9fbad4;
  border-top: 0;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
}

.hbl-route-grid:has(.hbl-port-lookup-menu:not(.hidden)) {
  overflow: visible;
  position: relative;
  z-index: 36;
}

.hbl-route-grid .booking-field {
  margin: 0;
  border: 0;
  border-right: 1px solid #b8cce0;
  border-bottom: 1px solid #b8cce0;
  border-radius: 0;
  box-shadow: none;
}

.hbl-route-grid .booking-field:nth-child(3n) {
  border-right: 0;
}

.hbl-route-grid .booking-field:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.hbl-route-grid .hbl-readonly-port strong {
  min-height: 34px;
  display: flex;
  align-items: center;
  border: 1px solid #d6e4f2;
  border-radius: 6px;
  background: linear-gradient(180deg, #f9fcff 0%, #eef5fb 100%);
  color: #183b5c;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.hbl-route-grid .hbl-port-lookup {
  position: relative;
}

.hbl-route-grid .hbl-port-lookup-menu {
  z-index: 2400;
}

.hbl-row-mid {
  margin-top: 12px;
  border: 1px solid #9fbad4;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #315f8e 0%, #204a76 100%);
  color: #fff;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .8px;
  line-height: 34px;
}

.hbl-cargo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 142px 142px;
  gap: 0;
  margin-top: 0;
  border: 1px solid #9fbad4;
  border-top: 0;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
}

.hbl-cargo-grid section,
.hbl-cargo-grid aside {
  border: 0;
  border-right: 1px solid #b8cce0;
  border-radius: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
  padding: 12px;
  box-shadow: none;
}

.hbl-cargo-grid aside:last-child {
  border-right: 0;
}

.hbl-goods-head {
  width: min(260px, 100%);
  margin-bottom: 10px;
}

.hbl-goods-head .booking-field {
  margin: 0;
}

.hbl-cargo-main-label {
  margin: 10px 0 4px;
  color: #315b81;
  font-size: 12px;
  font-weight: 950;
}

.hbl-measure-card .booking-field {
  display: block;
  margin: 0 0 5px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.hbl-measure-readonly strong {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin-top: 6px;
  border: 1px solid #d3e2ef;
  border-radius: 5px;
  background: linear-gradient(180deg, #fbfdff 0%, #eef6fd 100%);
  color: #173a5d;
  padding: 0 9px;
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}

.hbl-measure-card .booking-field span {
  display: block;
  min-height: 28px;
  line-height: 1.2;
}

.hbl-measure-card input,
.hbl-measure-card select {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 6px;
}

.hbl-packages-card .hbl-unit-select {
  margin-top: 5px;
  margin-bottom: 0;
}

.hbl-packages-card .hbl-unit-select select {
  height: 25px;
  margin-top: 0;
  padding: 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 950;
}

.hbl-unit-text {
  margin-top: 5px;
  color: #173a5d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 950;
}

.hbl-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 7px;
  border-left: 4px solid #2d87c7;
  padding-left: 8px;
}

.hbl-section-title button,
.hbl-repeat-row button {
  width: 31px;
  height: 29px;
  border: 1px solid #8fb3d2;
  border-bottom-color: #5986ae;
  border-radius: 5px;
  background: linear-gradient(#fff, #e7f1f9);
  color: #1d4f7d;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 2px 0 #8aaccc;
}

.hbl-repeat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
}

.hbl-repeat-panel {
  border: 1px solid #d0e0ee;
  border-radius: 6px;
  background: #f8fbfe;
  padding: 8px;
}

.hbl-repeat-row textarea,
.hbl-repeat-row input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #b8d0e6;
  border-radius: 5px;
  background: #fff;
  color: #173a5d;
  font-weight: 850;
}

.hbl-repeat-row textarea {
  min-height: 74px;
  padding: 9px 10px;
  resize: vertical;
  font-family: "Times New Roman", Georgia, serif;
  line-height: 1.32;
}

.hbl-shipper-row {
  grid-template-columns: 1fr 1fr 92px 34px;
}

.hbl-issue-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  border: 1px solid #9fbad4;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 34px rgba(32, 78, 119, .12);
}

.hbl-issue-left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-right: 1px solid #b8cce0;
}

.hbl-issue-cell {
  min-height: 64px;
  border-right: 1px solid #b8cce0;
  border-bottom: 1px solid #b8cce0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
  padding: 9px 10px;
}

.hbl-issue-cell:nth-child(2n) {
  border-right: 0;
}

.hbl-issue-cell:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.hbl-issue-cell > span,
.hbl-issue-cell .booking-field > span {
  display: block;
  color: #315b81;
  font-size: 12px;
  font-weight: 950;
}

.hbl-issue-cell > strong {
  display: block;
  margin-top: 10px;
  color: #173a5d;
  font-size: 14px;
  font-weight: 950;
}

.hbl-issue-cell .booking-field {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.hbl-issue-cell input,
.hbl-issue-cell select {
  width: 100%;
  min-width: 0;
  height: 32px;
  margin-top: 6px;
}

.hbl-specified-board-date strong {
  display: block;
  margin-top: 6px;
  color: #c73d3d;
  font-size: 15px;
  font-weight: 950;
}

.hbl-specified-board-date em {
  display: block;
  margin-top: 4px;
  color: #7e4b4b;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.35;
}

.hbl-terms-text {
  min-height: 192px;
  padding: 13px 15px;
  color: #2b4b68;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  line-height: 1.42;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}

.hbl-mail-dock.booking-mail-panel {
  position: sticky;
  top: 0;
  max-width: none;
  margin: 0;
  gap: 12px;
  padding: 14px;
  border: 1px solid #b8d0e6;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%);
  box-shadow:
    0 16px 32px rgba(32, 78, 119, .14),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.hbl-mail-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid #d5e4f0;
}

.hbl-mail-dock-head strong {
  margin-top: 0;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #93b8d8;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #e5f2fd);
  padding: 0 11px;
  color: #1b5689;
}

.hbl-mail-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hbl-mail-toggle label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid #c2d8ea;
  border-radius: 6px;
  background: #fff;
  padding: 0 9px;
  color: #244563;
  font-size: 12px;
  font-weight: 900;
}

.hbl-mail-summary {
  border: 1px solid #d2e1ee;
  border-radius: 7px;
  background: linear-gradient(180deg, #fbfdff 0%, #eef6fd 100%);
  padding: 9px 11px;
}

.hbl-mail-dock .booking-field,
.hbl-mail-dock .booking-field.wide {
  grid-template-columns: 1fr;
  gap: 5px;
  margin: 0;
}

.hbl-mail-dock .booking-field > span {
  line-height: 1.2;
}

.hbl-mail-dock textarea {
  min-height: 132px;
}

@media (max-width: 900px) {
  .hbl-type-row,
  .hbl-route-grid,
  .hbl-document-shell,
  .hbl-number-row,
  .hbl-cargo-grid,
  .hbl-issue-grid,
  .hbl-issue-left,
  .hbl-workbench-layout,
  .hbl-control-strip,
  .hbl-mail-toggle {
    grid-template-columns: 1fr;
  }

  .hbl-party-card,
  .hbl-title-card,
  .hbl-route-grid .booking-field {
    border-right: 0;
  }

  .hbl-mail-dock.booking-mail-panel {
    position: static;
  }
}

.biz-file-index {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #aac3d8;
  border-radius: 3px;
  background: #edf6fc;
  color: #24628f;
  font-weight: 900;
}

.biz-file-main {
  min-width: 0;
}

.biz-file-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.biz-file-head strong {
  color: #1e3950;
  font-size: 15px;
  font-weight: 900;
}

.biz-file-head span {
  color: #718093;
  font-size: 12px;
  white-space: nowrap;
}

.biz-file-content {
  max-height: 72px;
  overflow: auto;
  margin-bottom: 9px;
  color: #354a5d;
  line-height: 1.5;
  white-space: pre-wrap;
}

.biz-file-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.biz-file-chip {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  max-width: 360px;
  padding: 0 9px;
  border: 1px solid #c6d6e5;
  border-radius: 3px;
  background: #fff;
  color: #32546c;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.biz-file-chip.link:hover {
  border-color: #7ca8c8;
  background: #edf6fc;
  color: #174f91;
}

.biz-file-actions {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 6px;
}

.biz-file-form {
  display: grid;
  gap: 12px;
}

.biz-file-form-grid {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(420px, 1.28fr);
  gap: 16px;
  align-items: stretch;
  padding: 16px 18px 18px 20px;
}

.biz-file-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 13px 14px 14px;
  border: 1px solid #b9cfe0;
  border-radius: 7px;
  background: linear-gradient(#ffffff, #f7fbfe);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 5px 14px rgba(35, 80, 118, .08);
}

.biz-file-field span {
  display: flex;
  align-items: center;
  min-height: 18px;
  color: #244964;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.biz-file-field b {
  margin-left: 3px;
  color: var(--red);
}

.biz-file-field input,
.biz-file-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #93b2cc;
  border-radius: 5px;
  background: #fff;
  color: #172f43;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  box-shadow: inset 0 1px 2px rgba(28, 62, 93, .08), 0 1px 0 rgba(255, 255, 255, .88);
}

.biz-file-field input {
  min-height: 42px;
  padding: 0 11px;
}

.biz-file-field textarea {
  min-height: 136px;
  max-height: 260px;
  padding: 10px 11px;
  resize: vertical;
}

.biz-file-field input:focus,
.biz-file-field textarea:focus {
  outline: none;
  border-color: #4f8bb9;
  box-shadow: 0 0 0 3px rgba(79, 139, 185, .18), inset 0 1px 2px rgba(28, 62, 93, .08);
}

.biz-file-field.title-field {
  border-left: 5px solid #5d96bd;
}

.biz-file-field.content-field {
  border-left: 5px solid #c6a758;
}

.biz-upload-box {
  position: relative;
  min-height: 118px;
  display: grid;
  place-items: center;
  gap: 9px;
  padding: 18px;
  border: 1px dashed #78a7c9;
  border-radius: 8px;
  background: linear-gradient(#ffffff 0%, #f2f8fc 100%);
  color: #24628f;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 8px 18px rgba(35, 80, 118, .08);
  cursor: pointer;
}

.biz-upload-box strong {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid #82aecd;
  border-bottom-color: #5d88a8;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #dfeff9);
  color: #1f5d8a;
  font-size: 15px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 0 #aac8dd;
}

.biz-upload-box em {
  color: #6b7f91;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.biz-upload-box input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.biz-upload-hint {
  margin: 9px 0 12px;
  padding: 8px 10px;
  border: 1px solid #d9e5ee;
  border-radius: 5px;
  background: #fff;
  color: #66798a;
  font-size: 12px;
  font-weight: 800;
}

.biz-upload-selected {
  display: grid;
  gap: 7px;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid #d9e5ee;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #f7fbfe);
  color: #687a89;
  font-size: 12px;
  font-weight: 800;
}

.biz-upload-selected.has-files {
  border-color: #a8c6dd;
  background: linear-gradient(#ffffff, #eef7fd);
  color: #1f557c;
}

.biz-upload-selected strong,
.biz-upload-selected span {
  min-height: 28px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 10px;
  border: 1px solid #c5d8e7;
  border-radius: 4px;
  background: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95);
}

.biz-file-existing {
  display: grid;
  gap: 7px;
}

.biz-file-existing-row {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 8px;
  border: 1px solid #d6e2ec;
  background: #fff;
}

@media (max-width: 900px) {
  .biz-file-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .biz-file-field textarea {
    min-height: 120px;
  }
}

.spec-event-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.spec-event-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 86px;
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid #c8d8e5;
  border-radius: 7px;
  background: linear-gradient(#ffffff, #f7fbfe);
  box-shadow: 0 6px 16px rgba(34, 68, 99, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.spec-event-card-index {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  align-self: start;
  border: 1px solid #aec5d8;
  border-radius: 50%;
  background: #edf6fb;
  color: #245d88;
  font-size: 12px;
  font-weight: 900;
}

.spec-event-card-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.spec-event-card-head {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
}

.spec-event-card-head strong {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 12px;
  border: 1px solid #91b4cf;
  border-left: 5px solid #2f78ad;
  border-radius: 6px;
  background: linear-gradient(#f8fcff, #e7f2fa);
  color: #0f3658;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 4px 10px rgba(39, 89, 128, .12);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
}

.spec-event-card-head strong small {
  color: #4d7696;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.spec-event-card-head span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid #cfdde8;
  border-radius: 999px;
  background: #f0f6fb;
  color: #506b82;
  font-size: 11px;
  font-weight: 900;
}

.spec-event-card-remark {
  color: #2f4f68;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  word-break: break-word;
}

.spec-event-card-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.spec-condition-badge,
.spec-condition-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
}

.spec-condition-badge {
  border: 1px solid #d4c28d;
  background: linear-gradient(#fffdf5, #f8edc8);
  color: #5e4918;
}

.spec-condition-badge b {
  color: #8a681c;
  font-weight: 900;
}

.spec-condition-all {
  border: 1px solid #dce6ee;
  background: #f7fafc;
  color: #8a99a7;
}

.spec-event-card-actions {
  display: grid;
  align-content: start;
  gap: 8px;
  justify-items: end;
}

@media (max-width: 760px) {
  .spec-event-card {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .spec-event-card-actions {
    grid-column: 2;
    display: flex;
    justify-content: flex-start;
  }
}

.delivery-agent-fee-edit-dialog { width: min(1180px, calc(100vw - 34px)); max-height: calc(100vh - 28px); overflow: hidden; }
.delivery-agent-fee-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-height: calc(100vh - 165px); padding: 16px 18px; overflow: auto; background: #eef5fb; }
.delivery-agent-fee-form .daf-form-error { grid-column: 1 / -1; position: sticky; top: 0; z-index: 9; min-height: 20px; padding: 10px 14px; border: 1px solid #dfa0a0; border-left: 5px solid #c94c4c; border-radius: 5px; background: linear-gradient(180deg,#fffafa,#fff1f1); color: #922f2f; font-size: 13px; font-weight: 900; line-height: 1.5; white-space: pre-line; box-shadow: 0 7px 18px rgba(126,42,42,.11); }
.delivery-agent-fee-form .daf-form-error.hidden { display: none; }
.daf-edit-paper { min-width: 0; border: 1px solid #b9cfe2; border-radius: 6px; padding: 16px; background: #fff; box-shadow: 0 10px 24px rgba(32,75,115,.09); }
.daf-import-toolbar { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; margin: 13px 0 0; }
.daf-import-actions { display: flex; gap: 8px; }
.daf-import-actions button { display: grid; gap: 2px; min-width: 122px; padding: 7px 13px; border: 1px solid #78a5ca; border-bottom-color: #467da8; border-radius: 5px; background: linear-gradient(#fff 0%,#edf5fb 50%,#dbeaf6 100%); color: #24577f; text-align: left; box-shadow: inset 0 1px 0 #fff,0 2px 0 #83a9c7,0 7px 14px rgba(35,82,122,.1); cursor: pointer; transition: transform .16s ease,box-shadow .16s ease,filter .16s ease; }
.daf-import-actions button:hover { transform: translateY(-2px); filter: brightness(1.02); box-shadow: inset 0 1px 0 #fff,0 3px 0 #6e98b9,0 10px 18px rgba(35,82,122,.15); }
.daf-import-actions button span { font: 900 13px/1.2 "Microsoft YaHei",sans-serif; }
.daf-import-actions button small { color: #6e879c; font: 700 10px/1.2 "Microsoft YaHei",sans-serif; }
.daf-live-profit { display: grid; grid-template-columns: auto minmax(135px,auto) auto; align-items: center; gap: 9px; min-width: 285px; padding: 8px 10px 8px 13px; border: 1px solid #9fbfd9; border-left: 4px solid #2c78b2; border-radius: 5px; background: linear-gradient(135deg,#f8fcff,#edf6fc); box-shadow: inset 0 1px #fff,0 7px 16px rgba(32,83,124,.09); }
.daf-live-profit > span { color: #5b7892; font-size: 11px; font-weight: 900; }
.daf-live-profit strong { color: #1c5c8e; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.daf-live-profit strong small { margin-right: 3px; color: #66839d; font-size: 9px; }
.daf-live-profit.is-negative { border-left-color: #c84d4d; background: linear-gradient(135deg,#fffafa,#fff0ef); }
.daf-live-profit.is-negative strong { color: #bd3f3f; }
.daf-live-profit.is-error strong { color: #a36a22; font-size: 11px; white-space: normal; }
.daf-live-profit.is-loading strong { opacity: .65; }
.daf-live-profit button { min-width: 52px; height: 29px; border: 1px solid #719cbd; border-radius: 4px; background: linear-gradient(#fff,#e4eff7); color: #285b82; font-size: 11px; font-weight: 900; box-shadow: inset 0 1px #fff,0 2px 0 #8eabc2; cursor: pointer; }
.daf-live-profit button:disabled { opacity: .55; cursor: wait; }
.daf-import-rule { margin: 9px 0 0; padding: 8px 11px; border: 1px solid #c8d8e5; border-left: 3px solid #5a91bb; border-radius: 4px; background: #f7fbfe; color: #526f88; font-size: 11px; font-weight: 700; line-height: 1.5; }
.daf-edit-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 14px 0; overflow: hidden; border: 1px solid #c2d5e6; border-radius: 5px; background: #d7e4ef; }
.daf-edit-order-grid div { min-width: 0; padding: 9px 11px; background: #fafdff; }
.daf-edit-order-grid .wide { grid-column: 1 / -1; }
.daf-edit-order-grid span, .daf-edit-order-grid strong { display: block; }
.daf-edit-order-grid span { color: #6c8297; font-size: 10px; font-weight: 800; }
.daf-edit-order-grid strong { margin-top: 3px; overflow-wrap: anywhere; color: #183d61; font-size: 13px; }
.daf-edit-tools { display: flex; justify-content: space-between; align-items: center; margin: 15px 0 8px; }
.daf-edit-tools strong { color: #183e64; font-size: 15px; }
.daf-edit-tools strong i { color: #c39032; font-style: normal; }
.daf-edit-tools button { min-width: 72px; height: 30px; border: 1px solid #86a9c9; border-radius: 4px; background: linear-gradient(#fff,#eaf2f9); color: #285a84; font-weight: 800; cursor: pointer; }
.daf-fee-table-spacer { min-height: 24px; }
.daf-detail-table { min-width: 790px; table-layout: fixed; }
.daf-detail-table th { font-size: 11px; white-space: nowrap; }
.daf-detail-table thead th { border: 1px solid #c4d1dc; background: #e9f0f5; color: #2c4c63; }
.daf-detail-table .daf-col-description { width: 127px; }
.daf-detail-table .daf-col-currency { width: 68px; }
.daf-detail-table .daf-col-collect-price,.daf-detail-table .daf-col-payout-price { width: 102px; }
.daf-detail-table .daf-col-collect-quantity,.daf-detail-table .daf-col-payout-quantity { width: 45px; }
.daf-detail-table .daf-col-remark { width: 200px; }
.daf-detail-table .daf-col-actions { width: 100px; }
.daf-detail-table thead th:nth-child(5),.daf-detail-table tbody td:nth-child(5) { border-left: 2px solid #adbfcc; }
.daf-detail-table .delivery-agent-fee-row-actions { text-align: right; padding-right: 7px; }
.daf-detail-table td { padding: 5px; transition: background .15s ease,box-shadow .15s ease; }
.factory-fee-row-actions,.delivery-agent-fee-row-actions { white-space: nowrap; }
.factory-fee-row-actions button,.delivery-agent-fee-row-actions button { width: 24px; min-width: 24px; height: 24px; min-height: 24px; margin-right: 3px; padding: 0; border: 1px solid #9dbbd8; border-radius: 4px; background: linear-gradient(#fff,#edf5fc); color: #17466f; font-size: 12px; font-weight: 900; line-height: 22px; }
.factory-fee-row-actions button[aria-label="删除"],.delivery-agent-fee-row-actions button[aria-label="删除"] { margin-left: 7px; border-color: #dfb2b2; background: #fff7f7; color: #a44646; }
.daf-detail-table tr.is-different td { border-top-color: #e9b5ad; border-bottom-color: #e9b5ad; background: #fff3f1; }
.daf-detail-table tr.is-different td:first-child { box-shadow: inset 4px 0 #c74e43; }
.daf-detail-table input, .daf-detail-table select { width: 100%; height: 32px; box-sizing: border-box; border: 1px solid #b7cce0; border-radius: 4px; padding: 0 6px; color: #183752; font-size: 12px; font-weight: 700; }
.daf-detail-table input.is-price-different { border-color: #cf6b5e; background: #fff; color: #a5362c; box-shadow: inset 0 0 0 1px rgba(207,107,94,.14),0 0 0 2px rgba(207,107,94,.08); }
.daf-edit-totals { display: flex; justify-content: flex-end; gap: 10px; min-height: 42px; padding: 10px 0 4px; color: #70859a; font-size: 12px; }
.daf-edit-totals div { display: flex; align-items: baseline; gap: 6px; min-width: 130px; padding: 7px 10px; border: 1px solid #cfdeeb; border-radius: 4px; background: #f8fbfe; }
.daf-edit-totals strong { color: #b54848; font-size: 15px; font-variant-numeric: tabular-nums; }
.daf-edit-meta { display: grid; grid-template-columns: 1fr 190px; gap: 12px; margin-top: 8px; }
.daf-edit-meta label, .daf-edit-mail > label, .daf-edit-mail .mobile-bill-section-body > label { display: grid; gap: 6px; color: #315675; font-size: 12px; font-weight: 800; }
.daf-edit-meta input, .daf-edit-mail input, .daf-edit-mail textarea { width: 100%; box-sizing: border-box; border: 1px solid #afc6dc; border-radius: 5px; padding: 8px 10px; background: #fff; color: #183752; font: 700 13px/1.45 "Segoe UI","Microsoft YaHei",sans-serif; }
.daf-edit-meta input, .daf-edit-mail input { height: 38px; }
.daf-edit-mail { align-self: stretch; display: grid; grid-column: 1; gap: 10px; min-width: 0; border: 1px solid #b9cee2; border-radius: 6px; padding: 12px 14px; background: linear-gradient(#f8fbff,#eef6fd); }
.daf-edit-mail textarea { min-height: 120px; resize: vertical; }
@media (min-width: 901px) { .daf-edit-mail .mobile-bill-section-body > label { grid-template-columns: 82px minmax(0,1fr); align-items: start; gap: 8px; } }
.daf-edit-mail .daf-send-switch { display: flex; align-items: center; gap: 8px; padding: 10px 11px; border: 1px solid #9fc2df; border-radius: 5px; background: #eef7ff; color: #1e5687; }
.daf-send-switch input { width: 17px; height: 17px; }
#deliveryAgentFeeModal .edit-actions { display: flex; justify-content: center; gap: 12px; padding: 14px 20px 16px; border-top: 1px solid #c7d8e7; background: #fff; }
#deliveryAgentFeeModal .edit-actions button { min-width: 108px; height: 38px; border: 1px solid #a6bdd2; border-bottom-color: #7f9db8; border-radius: 5px; background: linear-gradient(#fff,#e8f0f7); color: #315778; font: 900 13px/1 "Microsoft YaHei",sans-serif; box-shadow: inset 0 1px #fff,0 2px 0 #9db3c7; cursor: pointer; }
#deliveryAgentFeeModal .edit-actions button.primary { border-color: #2672af; border-bottom-color: #15578c; background: linear-gradient(#64aade,#2878b7); color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.45),0 2px 0 #18598e,0 8px 16px rgba(34,91,140,.14); }
#deliveryAgentFeeModal .edit-actions button:hover { transform: translateY(-1px); filter: brightness(1.03); }
.delivery-agent-import-modal { z-index: 180; background: rgba(14,37,57,.55); backdrop-filter: blur(3px); }
.delivery-agent-import-dialog { width: min(920px,calc(100vw - 40px)); max-height: calc(100vh - 50px); overflow: hidden; border: 1px solid #8fb0cc; border-radius: 6px; box-shadow: 0 28px 70px rgba(10,34,55,.28); }
.delivery-agent-import-dialog .track-head p { margin: 4px 0 0; color: #658099; font-size: 11px; font-weight: 700; }
.delivery-agent-import-body { display: grid; gap: 12px; min-height: 260px; max-height: calc(100vh - 190px); padding: 15px 17px; overflow: auto; background: #eef5fa; }
.delivery-agent-import-filter { display: grid; grid-template-columns: auto minmax(260px,1fr); align-items: end; gap: 12px; padding: 12px; border: 1px solid #bdd0df; border-radius: 6px; background: #fff; box-shadow: 0 6px 16px rgba(37,76,110,.07); }
.delivery-agent-import-scopes { display: flex; gap: 5px; }
.delivery-agent-import-scopes button { height: 34px; padding: 0 12px; border: 1px solid #a9bfd2; border-radius: 4px; background: linear-gradient(#fff,#eaf1f7); color: #466781; font: 800 11px/1 "Microsoft YaHei",sans-serif; cursor: pointer; }
.delivery-agent-import-scopes button.active { border-color: #2776ae; background: linear-gradient(#62a9dc,#2775ad); color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.45),0 2px 0 #185b8d; }
.delivery-agent-import-scopes button:disabled { opacity: .42; cursor: not-allowed; }
.delivery-agent-import-search { display: grid; gap: 5px; color: #496981; font-size: 10px; font-weight: 900; }
.delivery-agent-import-search input { width: 100%; height: 35px; box-sizing: border-box; border: 1px solid #9fbbd1; border-radius: 4px; padding: 0 11px; color: #193f60; font: 700 12px/1 "Microsoft YaHei",sans-serif; outline: none; }
.delivery-agent-import-search input:focus { border-color: #2f82bd; box-shadow: 0 0 0 3px rgba(47,130,189,.13); }
.delivery-agent-import-port-filters { grid-column: 1 / -1; display: flex; gap: 16px; padding-top: 9px; border-top: 1px solid #e1eaf1; color: #456883; font-size: 11px; font-weight: 800; }
.delivery-agent-import-port-filters label { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 9px; border-radius: 5px; cursor: pointer; }
.delivery-agent-import-port-filters label:hover { background: #eef6fb; color: #245f84; }
.delivery-agent-import-port-filters input[type="checkbox"] { width: 17px; height: 17px; margin: 0; flex: 0 0 17px; accent-color: #2879b1; cursor: pointer; }
.delivery-agent-import-summary { display: flex; align-items: center; gap: 9px; min-height: 30px; padding: 0 3px; color: #6b8295; font-size: 11px; }
.delivery-agent-import-summary strong { color: #204f75; font-size: 12px; }
.delivery-agent-import-summary em { margin-left: auto; color: #356c94; font-style: normal; font-weight: 900; }
.delivery-agent-import-list { display: grid; gap: 8px; }
.delivery-agent-import-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(145px,auto) 68px; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #b9cfe0; border-left: 4px solid #4a8bbb; border-radius: 5px; background: #fff; box-shadow: 0 7px 16px rgba(31,73,108,.07); }
.delivery-agent-import-row-main { display: grid; min-width: 0; gap: 3px; }
.delivery-agent-import-row-main strong { color: #173f63; font-size: 13px; overflow-wrap: anywhere; }
.delivery-agent-import-row-main strong em { display: inline-flex; margin-left: 8px; padding: 2px 7px; border: 1px solid #7cb397; border-radius: 999px; background: #eefaf4; color: #317152; font-size: 9px; font-style: normal; vertical-align: 1px; }
.delivery-agent-import-row-main span { color: #3f6581; font-size: 11px; font-weight: 800; }
.delivery-agent-import-row-main small { color: #768b9d; font-size: 10px; font-weight: 700; }
.delivery-agent-import-row-main mark { padding: 0 1px; background: #ffe39b; color: #754a00; }
.delivery-agent-import-row-value { display: grid; gap: 3px; text-align: right; }
.delivery-agent-import-row-value strong { color: #254f6f; font-size: 11px; font-variant-numeric: tabular-nums; }
.delivery-agent-import-row-value span { color: #788c9d; font-size: 10px; font-weight: 700; }
.delivery-agent-container-quote-row { grid-template-columns: minmax(180px,1.15fr) minmax(280px,1.2fr) minmax(92px,auto) 68px; }
.delivery-agent-container-quote-row .delivery-agent-import-row-main strong { font-size: 15px; }
.delivery-agent-container-quote-row .delivery-agent-import-row-main span { font-size: 12px; }
.delivery-agent-container-quote-row .delivery-agent-import-row-main small { font-size: 11px; }
.delivery-agent-container-freights { display: grid; grid-template-columns: repeat(3,minmax(78px,1fr)); gap: 7px; min-width: 0; }
.delivery-agent-container-freights > div { display: grid; gap: 3px; min-width: 0; padding: 7px 8px 6px; border: 1px solid #b8d0e2; border-radius: 4px; background: linear-gradient(180deg,#fbfdff 0%,#eef6fb 100%); box-shadow: inset 0 1px rgba(255,255,255,.9),0 2px 5px rgba(34,87,126,.06); }
.delivery-agent-container-freights span { color: #5d7991; font-size: 10px; font-weight: 900; letter-spacing: .2px; }
.delivery-agent-container-freights strong { overflow: hidden; color: #174f7b; font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.delivery-agent-import-row > button { min-width: 64px; height: 33px; border: 1px solid #2775ac; border-bottom-color: #155988; border-radius: 4px; background: linear-gradient(#62a9dc,#2877af); color: #fff; font: 900 11px/1 "Microsoft YaHei",sans-serif; box-shadow: inset 0 1px rgba(255,255,255,.45),0 2px 0 #195b8b,0 6px 12px rgba(35,91,134,.12); cursor: pointer; }
.delivery-agent-import-row > button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.delivery-agent-import-row.disabled { border-left-color: #a8b5bf; background: #f4f6f8; opacity: .64; box-shadow: none; }
.delivery-agent-import-row > button:disabled { box-shadow: none; cursor: not-allowed; filter: grayscale(.7); }
.delivery-agent-quote-note { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #d6c08a; border-left: 4px solid #be8b25; border-radius: 5px; background: #fffaf0; color: #705523; }
.delivery-agent-quote-note strong { font-size: 12px; }
.delivery-agent-quote-note span { font-size: 11px; font-weight: 700; }
.delivery-agent-import-loading,.delivery-agent-import-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 250px; padding: 20px; background: #f2f7fb; color: #496981; text-align: center; }
.delivery-agent-import-empty.compact { min-height: 145px; border: 1px dashed #b8ccdc; border-radius: 6px; background: rgba(255,255,255,.66); }
.delivery-agent-import-empty strong { color: #224f73; font-size: 15px; }
.delivery-agent-import-empty span { max-width: 560px; color: #71879a; font-size: 11px; font-weight: 700; line-height: 1.6; }
.delivery-agent-import-dialog > .edit-actions { display: flex; justify-content: center; padding: 12px 18px 15px; border-top: 1px solid #c8d7e3; background: #fff; }
.delivery-agent-import-dialog > .edit-actions button { min-width: 100px; height: 36px; border: 1px solid #9fb5c8; border-radius: 4px; background: linear-gradient(#fff,#e7eef4); color: #355b78; font-weight: 900; box-shadow: inset 0 1px #fff,0 2px 0 #a8bac9; cursor: pointer; }
@media (max-width: 900px) { .delivery-agent-fee-form { grid-template-columns: 1fr; } .daf-edit-mail textarea { min-height: 150px; } .daf-import-toolbar { flex-direction: column; } .daf-live-profit { min-width: 0; } .delivery-agent-import-filter { grid-template-columns: 1fr; } .delivery-agent-import-row { grid-template-columns: 1fr 70px; } .delivery-agent-import-row-value { grid-column: 1; text-align: left; } .delivery-agent-container-quote-row .delivery-agent-import-row-main { grid-column: 1; } .delivery-agent-container-quote-row .delivery-agent-container-freights { grid-column: 1 / -1; grid-row: 2; } .delivery-agent-container-quote-row .delivery-agent-import-row-value { grid-column: 1; grid-row: 3; } .delivery-agent-container-quote-row > button { grid-column: 2; grid-row: 3; } }
.delivery-agent-fee-resend-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 0 10px; border: 1px solid #e5a17e; border-radius: 999px; background: linear-gradient(180deg,#fff8f3 0%,#ffe7d9 100%); color: #a0491b; box-shadow: inset 0 1px 0 #fff,0 2px 0 rgba(183,79,30,.18),0 6px 12px rgba(160,73,27,.09); font-size: 12px; font-weight: 900; white-space: nowrap; }
.delivery-agent-fee-resend-alert { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 15px; border: 1px solid #e8b092; border-left: 4px solid #c15a28; border-radius: 6px; background: linear-gradient(90deg,#fff5ef 0%,#fffdf9 100%); box-shadow: inset 0 1px 0 #fff,0 7px 16px rgba(160,73,27,.08); color: #7d421f; }
.delivery-agent-fee-resend-alert.is-modal { margin: 0 0 14px; }
.delivery-agent-fee-resend-alert strong { flex: none; color: #a0491b; font-size: 13px; font-weight: 900; }
.delivery-agent-fee-resend-alert span { font-size: 12px; font-weight: 700; line-height: 1.55; }

/* Mobile bill sections are layout-neutral on desktop. */
.mobile-bill-section-header { display: none; }
.mobile-bill-section-body { display: contents; }
.daf-mobile-overview-section { display: none; }

/* Mobile billing editors: task-focused accordion sections, fixed actions and
 * horizontally scrollable, single-line fee rows. Desktop remains unchanged. */
@media (max-width: 760px) {
  #factoryFeeModal.edit-backdrop,
  #deliveryAgentFeeModal.edit-backdrop {
    place-items: stretch;
    padding: 8px;
  }

  #factoryFeeModal .factory-fee-edit-dialog,
  #deliveryAgentFeeModal .delivery-agent-fee-edit-dialog {
    width: 100%;
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    max-height: none;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-radius: 10px;
  }

  #factoryFeeModal .track-head,
  #deliveryAgentFeeModal .track-head {
    min-width: 0;
    padding: 12px 13px;
  }

  #factoryFeeModal .track-head h3,
  #deliveryAgentFeeModal .track-head h3 {
    overflow: hidden;
    font-size: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #factoryFeeModal .track-head h3::after,
  #deliveryAgentFeeModal .track-head h3::after {
    content: attr(data-mobile-title);
    font-size: 17px;
  }

  #factoryFeeModal .factory-fee-form,
  #deliveryAgentFeeModal .delivery-agent-fee-form {
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
  }

  #factoryFeeModal .factory-fee-form,
  #deliveryAgentFeeModal .delivery-agent-fee-form {
    display: block;
    background: #edf4fa;
  }

  #factoryFeeModal .factory-fee-edit-dialog > .edit-actions,
  #deliveryAgentFeeModal .edit-actions {
    min-height: 0;
    gap: 9px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  #factoryFeeModal .factory-fee-edit-dialog > .edit-actions button,
  #deliveryAgentFeeModal .edit-actions button {
    min-width: 0;
    min-height: 42px;
    flex: 1 1 0;
  }

  .factory-fee-paper,
  .daf-edit-paper,
  .daf-edit-mail,
  .factory-fee-mail-section {
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .factory-fee-paper { margin: 0; }
  .daf-edit-paper { display: block; }
  .daf-mobile-overview-section { display: block; }
  .desktop-bill-only { display: none !important; }

  .mobile-bill-section {
    display: block;
    margin: 0 0 10px;
    overflow: hidden;
    border: 1px solid #b8ccdd;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(29, 70, 105, .07);
  }

  .mobile-bill-section-header {
    display: flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    gap: 10px;
    border: 0;
    padding: 9px 11px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f8fc 100%);
    color: #173f62;
    text-align: left;
    cursor: pointer;
  }

  .mobile-bill-section-header[aria-expanded="true"] {
    border-bottom: 1px solid #c8d9e6;
    background: linear-gradient(180deg, #f7fbff 0%, #e7f2fa 100%);
  }

  .mobile-bill-section-step {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border: 1px solid #83acd0;
    border-radius: 8px;
    background: #edf6fd;
    color: #276892;
    font-size: 11px;
    font-weight: 950;
  }

  .mobile-bill-section-header[aria-expanded="true"] .mobile-bill-section-step {
    border-color: #2875a8;
    background: linear-gradient(180deg, #4a99cb, #2674a8);
    color: #fff;
    box-shadow: inset 0 1px rgba(255,255,255,.35), 0 2px 5px rgba(35,102,150,.2);
  }

  .mobile-bill-section-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 3px;
  }

  .mobile-bill-section-copy strong {
    overflow: hidden;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-bill-section-copy small {
    overflow: hidden;
    color: #6b8295;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-bill-section-chevron {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin: 0 4px;
    border-right: 2px solid #56778e;
    border-bottom: 2px solid #56778e;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .16s ease;
  }

  .mobile-bill-section-header[aria-expanded="true"] .mobile-bill-section-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
  }

  .mobile-bill-section-body {
    display: block;
    min-width: 0;
    padding: 12px;
  }

  .mobile-bill-section.is-collapsed > .mobile-bill-section-body { display: none; }

  .factory-fee-letterhead {
    margin-bottom: 10px;
    padding: 0 2px 9px;
    border-bottom: 1px solid #c8d9e6;
  }

  .factory-fee-letterhead {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }

  .factory-fee-logo {
    width: 52px;
    height: 38px;
    border-radius: 6px;
    font-size: 18px;
  }

  .factory-fee-letterhead strong { font-size: 16px; }
  .factory-fee-letterhead span { font-size: 13px; }
  .factory-fee-letterhead em,
  .daf-edit-letterhead small { overflow-wrap: anywhere; }
  .factory-fee-adv { display: none; }

  .factory-fee-control-row,
  .factory-fee-invoice-line,
  .factory-fee-meta-grid,
  .factory-fee-bank-line,
  .factory-fee-date-line,
  .daf-edit-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .factory-fee-control-row,
  .factory-fee-invoice-line,
  .factory-fee-meta-grid,
  .factory-fee-bank-line,
  .factory-fee-date-line { gap: 9px; }

  .factory-fee-control-row label:not(.ios-switch-label),
  .factory-fee-invoice-line label,
  .factory-fee-meta-grid label,
  .factory-fee-bank-line label,
  .factory-fee-date-line label {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 5px;
  }

  .factory-fee-control-row label > span,
  .factory-fee-invoice-line label > span,
  .factory-fee-meta-grid label > span,
  .factory-fee-bank-line label > span,
  .factory-fee-date-line label > span {
    color: #5b7489;
    font-size: 10px;
    letter-spacing: .035em;
  }

  .factory-fee-mail-section .base-field {
    grid-template-columns: minmax(0, 1fr);
  }

  .factory-fee-cargo-line {
    flex-wrap: wrap;
    gap: 6px;
  }

  .factory-fee-cargo-line > span { flex: 0 0 100%; }
  .factory-fee-cargo-line input.tiny,
  .factory-fee-cargo-line input.small,
  .factory-fee-cargo-line select {
    width: auto;
    min-width: 0;
    flex: 1 1 74px;
  }

  .factory-fee-big-title.debit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    letter-spacing: .04em;
  }

  .factory-fee-big-title.debit > span {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 18px;
  }

  .factory-fee-rate,
  .factory-fee-rate.updated {
    min-width: 0;
    grid-column: 1 / -1;
    font-size: 11px;
    text-align: center;
  }

  .factory-fee-line-add { width: 100%; }
  .factory-fee-subtotals div { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .factory-fee-radio-group { flex-wrap: wrap; gap: 10px 18px; }

  .fee-detail-mobile-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin: 9px 0 6px;
    border: 1px solid #c5d8e7;
    border-radius: 999px;
    background: #f5f9fc;
    color: #4f718a;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
  }

  .fee-detail-mobile-scroll-hint.daf-fee-table-spacer {
    border-color: transparent;
    background: transparent;
  }

  .factory-fee-detail-table-wrap,
  #deliveryAgentFeeModal .fee-detail-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #9dbbd2;
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 -1px 0 #d8e4ed, 0 4px 12px rgba(31, 73, 109, .07);
    scrollbar-color: #769fbe #e7f0f7;
    scrollbar-width: thin;
  }

  .factory-fee-detail-table-wrap::-webkit-scrollbar,
  #deliveryAgentFeeModal .fee-detail-table-wrap::-webkit-scrollbar {
    height: 8px;
  }

  .factory-fee-detail-table-wrap::-webkit-scrollbar-track,
  #deliveryAgentFeeModal .fee-detail-table-wrap::-webkit-scrollbar-track {
    background: #e7f0f7;
  }

  .factory-fee-detail-table-wrap::-webkit-scrollbar-thumb,
  #deliveryAgentFeeModal .fee-detail-table-wrap::-webkit-scrollbar-thumb {
    border: 2px solid #e7f0f7;
    border-radius: 999px;
    background: #769fbe;
  }

  .factory-fee-detail-edit-table,
  .daf-detail-table {
    display: table;
    width: 980px;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .daf-detail-table {
    width: 992px;
    min-width: 992px;
  }

  .factory-fee-detail-edit-table thead,
  .daf-detail-table thead {
    display: table-header-group;
  }

  .factory-fee-detail-edit-table tbody,
  .daf-detail-table tbody {
    display: table-row-group;
  }

  .factory-fee-detail-edit-table tr,
  .daf-detail-table tr {
    display: table-row;
  }

  .factory-fee-detail-edit-table th,
  .daf-detail-table th {
    height: 36px;
    padding: 0 7px;
    border: 1px solid #a9c1d5;
    background: linear-gradient(180deg, #35739f 0%, #245d89 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  .factory-fee-detail-edit-table th:nth-child(1) { width: 210px; }
  .factory-fee-detail-edit-table th:nth-child(2) { width: 82px; }
  .factory-fee-detail-edit-table th:nth-child(3),
  .factory-fee-detail-edit-table th:nth-child(4),
  .factory-fee-detail-edit-table th:nth-child(5) { width: 105px; }
  .factory-fee-detail-edit-table th:nth-child(6) { width: 100px; }
  .factory-fee-detail-edit-table th:nth-child(7) { width: 190px; }
  .factory-fee-detail-edit-table th:nth-child(8) { width: 170px; }

  .daf-detail-table .daf-col-description { width: 153px; }
  .daf-detail-table .daf-col-currency { width: 80px; }
  .daf-detail-table .daf-col-collect-price,
  .daf-detail-table .daf-col-payout-price { width: 121px; }
  .daf-detail-table .daf-col-collect-quantity,
  .daf-detail-table .daf-col-payout-quantity { width: 60px; }
  .daf-detail-table .daf-col-remark { width: 227px; }
  .daf-detail-table .daf-col-actions { width: 170px; }

  .factory-fee-detail-edit-table td,
  .daf-detail-table td {
    display: table-cell;
    height: 48px;
    padding: 5px !important;
    border: 1px solid #c5d6e3 !important;
    background: #fff !important;
    vertical-align: middle;
    white-space: nowrap;
  }

  .factory-fee-detail-edit-table tbody tr:nth-child(even) td,
  .daf-detail-table tbody tr:nth-child(even) td {
    background: #f7fbfe !important;
  }

  .daf-detail-table tbody td:nth-child(5) { border-left: 2px solid #adbfcc !important; }

  .factory-fee-detail-edit-table td::before,
  .daf-detail-table td::before {
    content: none;
  }

  #factoryFeeModal .factory-fee-detail-edit-table .factory-fee-currency,
  #factoryFeeModal .factory-fee-detail-edit-table .factory-fee-invoice-type,
  #factoryFeeModal .factory-fee-detail-edit-table input,
  #deliveryAgentFeeModal .daf-detail-table input,
  #deliveryAgentFeeModal .daf-detail-table select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 36px;
  }

  .factory-fee-detail-edit-table .factory-fee-row-actions,
  .daf-detail-table .delivery-agent-fee-row-actions {
    display: table-cell;
    vertical-align: middle;
  }

  .factory-fee-detail-edit-table .factory-fee-row-actions { text-align: center; }
  .daf-detail-table .delivery-agent-fee-row-actions { text-align: right; }

  .factory-fee-row-actions button,
  .delivery-agent-fee-row-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 50px;
    min-height: 32px;
    margin: 0;
    border: 1px solid #aac2d6;
    border-radius: 6px;
    padding: 0 10px;
    background: #f6fafe;
    color: #315d7d;
    font-size: 0;
    line-height: 1;
  }

  .factory-fee-row-actions button::after,
  .delivery-agent-fee-row-actions button::after {
    content: attr(aria-label);
    font-size: 12px;
    font-weight: 850;
  }

  .factory-fee-row-actions button[aria-label="删除"],
  .delivery-agent-fee-row-actions button[aria-label="删除"] {
    margin-left: 8px;
    border-color: #dfb2b2;
    background: #fff7f7;
    color: #a44646;
  }

  .daf-import-toolbar { align-items: stretch; flex-direction: column; }
  .daf-import-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .daf-import-actions button { width: 100%; min-width: 0; }
  .daf-live-profit { grid-template-columns: auto minmax(0, 1fr) auto; width: auto; }
  .daf-edit-tools { align-items: stretch; flex-wrap: wrap; gap: 8px; }
  .daf-edit-tools strong { flex: 1 0 100%; order: -1; text-align: center; font-size: 13px; }
  .daf-edit-tools button { flex: 1 1 0; }
  .daf-edit-letterhead { gap: 8px; }
  .daf-edit-letterhead strong { font-size: 15px; }
  .daf-edit-letterhead em { padding: 6px 8px; font-size: 13px; }
  .daf-edit-order-grid { margin: 10px 0 0; }
  .daf-edit-order-grid div { padding: 8px 9px; }
  .daf-edit-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .daf-edit-totals div { min-width: 0; }
  .daf-edit-mail textarea { min-height: 150px; }

  .factory-fee-mail-section .mobile-bill-section-body,
  .daf-edit-mail .mobile-bill-section-body {
    display: grid;
    gap: 11px;
  }

  .factory-fee-mail-section.is-collapsed .mobile-bill-section-body,
  .daf-edit-mail.is-collapsed .mobile-bill-section-body { display: none; }
}

/* Comprehensive rating premium controls and centered dialogs */
.rating-page,
.rating-modal-backdrop {
  font-family: "SF Pro Display", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
}

.rating-page button,
.rating-modal-backdrop button,
.rating-modal-backdrop input,
.rating-modal-backdrop select {
  font: inherit;
}

.rating-refresh-button,
.rating-primary-button,
.rating-secondary-button,
.rating-modal-close,
.rating-row-actions button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 5px;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.rating-refresh-button::before,
.rating-primary-button::before,
.rating-secondary-button::before,
.rating-modal-close::before,
.rating-row-actions button::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1px 1px auto;
  height: 46%;
  border-radius: 4px 4px 40% 40%;
  background: linear-gradient(rgba(255, 255, 255, .58), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.rating-refresh-button {
  min-height: 38px;
  padding: 0 17px;
  border: 1px solid #5e87a5;
  border-bottom-color: #345f7e;
  background: linear-gradient(180deg, #ffffff 0%, #edf5fa 45%, #d9e8f1 100%);
  color: #285c7d;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .03em;
  text-shadow: 0 1px 0 #fff;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(44, 82, 108, .12), 0 2px 0 #a8bdcb, 0 7px 15px rgba(33, 72, 101, .14);
}

.rating-refresh-button:hover {
  border-color: #3f7397;
  background: linear-gradient(180deg, #ffffff 0%, #e5f0f6 44%, #cbdfea 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(44, 82, 108, .15), 0 3px 0 #8faabd, 0 9px 18px rgba(33, 72, 101, .18);
  transform: translateY(-1px);
}

.rating-refresh-button:active,
.rating-primary-button:active,
.rating-secondary-button:active,
.rating-modal-close:active,
.rating-row-actions button:active {
  box-shadow: inset 0 2px 5px rgba(31, 61, 82, .16);
  transform: translateY(2px);
}

.rating-page .rating-tabs {
  padding: 7px;
  gap: 7px;
  overflow-x: auto;
  background: linear-gradient(180deg, #e7eef3, #f8fafc);
  box-shadow: inset 0 1px 2px rgba(42, 69, 89, .10), 0 6px 17px rgba(38, 67, 91, .06);
}

.rating-page .rating-tabs button {
  min-height: 49px;
  border: 1px solid #c8d5df;
  border-bottom-color: #aebfcb;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff, #f5f8fa 55%, #e9f0f4);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c5d1d9, 0 4px 9px rgba(37, 67, 89, .07);
  text-shadow: 0 1px 0 #fff;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.rating-page .rating-tabs button:last-child {
  border-right: 1px solid #c8d5df;
}

.rating-page .rating-tabs button:hover {
  border-color: #94afc2;
  background: linear-gradient(180deg, #ffffff, #eff5f8 54%, #e0ebf1);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #aec1ce, 0 7px 13px rgba(37, 67, 89, .11);
  transform: translateY(-1px);
}

.rating-page .rating-tabs button.active {
  border-color: #477a9d;
  border-bottom-color: #315f80;
  background: linear-gradient(180deg, #f8fcfe 0%, #dfedf5 55%, #ccdee9 100%);
  color: #173f5d;
  box-shadow: inset 0 2px 4px rgba(42, 85, 114, .12), inset 0 0 0 1px rgba(255, 255, 255, .72), 0 2px 0 #7394aa, 0 6px 13px rgba(35, 72, 99, .15);
  transform: translateY(1px);
}

.rating-detail-link,
.rating-detail-link.concise {
  min-width: 86px;
  min-height: 35px;
  padding: 5px 23px 5px 10px;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #b8ccd9;
  border-bottom-color: #8faabe;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff, #f0f6f9 56%, #e2edf3);
  color: #285f80;
  text-align: left;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c2d0d9, 0 5px 10px rgba(41, 75, 99, .08);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.rating-detail-link::after {
  content: ">";
  position: absolute;
  top: 50%;
  right: 9px;
  color: #6d8ca1;
  font-family: Georgia, serif;
  font-size: 12px;
  transform: translateY(-53%);
}

.rating-detail-link > span {
  display: block;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}

.rating-detail-link small {
  display: block;
  margin-top: 3px;
  color: #748c9d;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.1;
  white-space: nowrap;
}

.rating-detail-link:hover {
  border-color: #6f99b5;
  background: linear-gradient(180deg, #ffffff, #e9f3f8 54%, #d8e8f1);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #9eb6c6, 0 8px 15px rgba(39, 79, 108, .13);
  transform: translateY(-1px);
}

.rating-detail-link:active {
  box-shadow: inset 0 2px 5px rgba(32, 72, 99, .14);
  transform: translateY(2px);
}

.rating-detail-link.danger-link {
  border-color: #d4b2ae;
  border-bottom-color: #bc8882;
  background: linear-gradient(180deg, #fffdfd, #fbf2f1 55%, #f3e3e1);
  color: #9b4944;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #d8bcb9, 0 5px 10px rgba(126, 61, 56, .07);
}

.rating-leave-trigger {
  border-color: #c4b17e !important;
  border-bottom-color: #9e874c !important;
  background: linear-gradient(180deg, #fffefa, #f8f3e8 55%, #eee4ce) !important;
  color: #705927 !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #cabb94, 0 5px 11px rgba(108, 87, 38, .10) !important;
}

.rating-leave-trigger small {
  color: #8a774d;
}

body.rating-modal-open {
  overflow: hidden;
}

.rating-modal-backdrop {
  position: fixed;
  z-index: 1400;
  inset: 0;
  padding: 34px;
  display: grid;
  place-items: center;
  background: rgba(27, 47, 63, .38);
  backdrop-filter: blur(7px) saturate(.92);
}

.rating-modal-backdrop.hidden {
  display: none;
}

.rating-modal-dialog {
  width: min(1160px, calc(100vw - 68px));
  height: min(760px, calc(100vh - 68px));
  min-height: 470px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #aebfcb;
  border-radius: 13px;
  background: #f8fafc;
  box-shadow: 0 34px 80px rgba(19, 42, 58, .30), 0 8px 24px rgba(19, 42, 58, .18), inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: rating-dialog-in .2s ease-out both;
}

@keyframes rating-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.rating-modal-header,
.rating-leave-editor-header {
  min-height: 84px;
  padding: 17px 20px 15px 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #bfcfda;
  background: linear-gradient(118deg, #edf5f9 0%, #ffffff 48%, #f4f7f9 100%);
  box-shadow: inset 0 1px 0 #fff, 0 4px 13px rgba(41, 71, 92, .06);
}

.rating-modal-header > div,
.rating-leave-editor-header > div {
  min-width: 0;
}

.rating-modal-header span,
.rating-leave-editor-header span {
  color: #8a7341;
  font-family: Georgia, serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .18em;
}

.rating-modal-header h3,
.rating-leave-editor-header h3 {
  margin: 3px 0 0;
  color: #1f465f;
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
}

.rating-modal-header p,
.rating-leave-editor-header p {
  margin: 3px 0 0;
  color: #84939f;
  font-size: 9px;
}

.rating-modal-close,
.rating-secondary-button {
  min-width: 70px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #aebfca;
  border-bottom-color: #8ba2b1;
  background: linear-gradient(180deg, #ffffff, #eef3f6 58%, #dfe8ed);
  color: #4f6d82;
  font-size: 10px;
  font-weight: 850;
  text-shadow: 0 1px 0 #fff;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c1ccd4, 0 5px 10px rgba(36, 67, 88, .09);
}

.rating-modal-close:hover,
.rating-secondary-button:hover {
  border-color: #7f9bad;
  background: linear-gradient(180deg, #ffffff, #e8f0f4 55%, #d6e2e9);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #aebdc7, 0 7px 13px rgba(36, 67, 88, .12);
  transform: translateY(-1px);
}

.rating-modal-dialog .rating-detail-tools {
  min-height: 58px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #d0dce4;
  background: linear-gradient(180deg, #ffffff, #f4f7f9);
}

.rating-modal-dialog .rating-detail-tools > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.rating-modal-dialog .rating-detail-tools span,
.rating-modal-dialog .rating-detail-tools label {
  color: #7c8e9b;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .03em;
}

.rating-modal-dialog .rating-detail-tools strong {
  color: #284d66;
  font-size: 12px;
  font-weight: 900;
}

.rating-modal-dialog .rating-detail-tools label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rating-modal-dialog .rating-detail-tools select {
  height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid #b7c7d2;
  border-radius: 5px;
  background-color: #fff;
  color: #395a71;
  font-size: 10px;
  font-weight: 750;
  box-shadow: inset 0 1px 2px rgba(39, 68, 88, .07), 0 2px 4px rgba(39, 68, 88, .05);
}

.rating-modal-dialog .rating-detail-scroll {
  min-height: 0;
  overflow: auto;
  background: #fff;
}

.rating-modal-dialog .rating-detail-table {
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
  color: #3c5365;
  font-size: 11px;
}

.rating-modal-dialog .rating-detail-table th {
  position: sticky;
  z-index: 3;
  top: 0;
  height: 42px;
  padding: 0 13px;
  border-right: 1px solid #d7e0e7;
  border-bottom: 1px solid #b8cbd8;
  background: linear-gradient(180deg, #edf3f7, #dfeaf1);
  color: #35566d;
  font-size: 10px;
  font-weight: 850;
  text-align: left;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 #fff;
}

.rating-modal-dialog .rating-detail-table td {
  height: 49px;
  padding: 8px 13px;
  border-right: 1px solid #e3e9ee;
  border-bottom: 1px solid #dfe6eb;
  background: #fff;
  color: #465d6e;
  font-size: 10px;
  vertical-align: middle;
  white-space: nowrap;
}

.rating-modal-dialog .rating-detail-table tbody tr:nth-child(even) td {
  background: #f8fafb;
}

.rating-modal-dialog .rating-detail-table tbody tr:hover td {
  background: #eef5f9;
}

.rating-modal-dialog .rating-detail-table tr.important td {
  color: #a6534d;
  font-weight: 800;
}

.rating-primary-button {
  min-height: 36px;
  padding: 0 17px;
  border: 1px solid #3c6e90;
  border-bottom-color: #244f6d;
  background: linear-gradient(180deg, #6f9fbd 0%, #477d9f 46%, #2f6689 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .03em;
  text-shadow: 0 1px 1px rgba(17, 52, 76, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(20, 51, 72, .23), 0 2px 0 #244f6b, 0 7px 14px rgba(31, 75, 106, .19);
}

.rating-primary-button:hover {
  border-color: #2f6285;
  background: linear-gradient(180deg, #7aa8c4 0%, #4f86a8 46%, #326e93 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 3px 0 #214b66, 0 10px 18px rgba(31, 75, 106, .23);
  transform: translateY(-1px);
}

.rating-primary-button:disabled {
  cursor: wait;
  filter: grayscale(.35);
  opacity: .68;
}

.rating-row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.rating-row-actions button {
  min-width: 48px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #aebfca;
  border-bottom-color: #8da4b3;
  background: linear-gradient(180deg, #ffffff, #edf3f6);
  color: #3d6681;
  font-size: 9px;
  font-weight: 850;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c0ccd4, 0 4px 7px rgba(36, 66, 87, .08);
}

.rating-row-actions button.danger {
  border-color: #d2aaa6;
  border-bottom-color: #b97d77;
  background: linear-gradient(180deg, #fffdfd, #f7e9e7);
  color: #9b4944;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #d8bab7, 0 4px 7px rgba(117, 55, 50, .07);
}

.rating-leave-editor-backdrop {
  z-index: 1510;
  background: rgba(22, 39, 53, .49);
}

.rating-leave-editor {
  width: min(590px, calc(100vw - 40px));
  overflow: hidden;
  border: 1px solid #a8bbc8;
  border-radius: 13px;
  background: #f8fafb;
  box-shadow: 0 35px 90px rgba(14, 34, 49, .38), 0 8px 22px rgba(14, 34, 49, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: rating-dialog-in .2s ease-out both;
}

.rating-leave-form {
  padding: 22px 24px 0;
  display: grid;
  gap: 17px;
  background: linear-gradient(180deg, #fbfcfd, #f4f7f9);
}

.rating-leave-person {
  min-height: 66px;
  padding: 12px 15px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #c5d3dd;
  border-radius: 7px;
  background: linear-gradient(125deg, #edf5f9, #ffffff);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(39, 69, 90, .05);
}

.rating-leave-person span,
.rating-leave-form label > span {
  color: #687f90;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}

.rating-leave-person strong {
  color: #224b66;
  font-family: Georgia, "Songti SC", serif;
  font-size: 18px;
  font-weight: 700;
}

.rating-leave-person small,
.rating-leave-form label > small {
  color: #8b9aa5;
  font-size: 9px;
}

.rating-leave-form label {
  display: grid;
  gap: 7px;
}

.rating-leave-form label b {
  color: #ae5c56;
}

.rating-leave-form input,
.rating-leave-form select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #b8c8d3;
  border-radius: 6px;
  background: #fff;
  color: #304f65;
  font-size: 12px;
  font-weight: 700;
  outline: none;
  box-shadow: inset 0 2px 4px rgba(36, 65, 85, .07), 0 1px 0 #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.rating-leave-form input:focus,
.rating-leave-form select:focus {
  border-color: #5c88a5;
  box-shadow: inset 0 2px 4px rgba(36, 65, 85, .06), 0 0 0 3px rgba(73, 122, 154, .13);
}

.rating-leave-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.rating-leave-days-field {
  position: relative;
}

.rating-leave-days-field input {
  padding-right: 50px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
}

.rating-leave-days-field em {
  position: absolute;
  top: 50%;
  right: 15px;
  color: #718898;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  transform: translateY(-50%);
}

.rating-leave-form-error {
  margin: -4px 0 0;
  padding: 10px 12px;
  border: 1px solid #dfb2ad;
  border-radius: 5px;
  background: #fff4f2;
  color: #a44f49;
  font-size: 10px;
  font-weight: 750;
}

.rating-leave-actions {
  margin: 2px -24px 0;
  padding: 15px 24px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #d2dde5;
  background: linear-gradient(180deg, #f5f8fa, #eaf0f4);
  box-shadow: inset 0 1px 0 #fff;
}

@media (max-width: 760px) {
  .rating-modal-backdrop {
    padding: 12px;
  }

  .rating-modal-dialog {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    min-height: 0;
  }

  .rating-modal-header,
  .rating-leave-editor-header {
    min-height: 76px;
    padding: 13px 14px 12px 16px;
  }

  .rating-modal-header h3,
  .rating-leave-editor-header h3 {
    font-size: 17px;
  }

  .rating-modal-dialog .rating-detail-tools {
    align-items: flex-start;
    flex-direction: column;
  }

  .rating-leave-form {
    padding-right: 16px;
    padding-left: 16px;
  }

  .rating-leave-date-grid {
    grid-template-columns: 1fr;
  }

  .rating-leave-actions {
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 16px;
    padding-left: 16px;
  }
}

.spec-event-form {
  display: grid;
  gap: 14px;
}

.spec-edit-section {
  border: 1px solid #d9e4ee;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.spec-edit-section.primary {
  position: relative;
  border-color: #8fb1cf;
  background:
    linear-gradient(135deg, rgba(239, 247, 253, .96), rgba(255, 255, 255, .98) 42%, rgba(255, 250, 239, .9)),
    #fff;
  box-shadow: 0 14px 32px rgba(26, 62, 96, .15), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.spec-edit-section.primary::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(#2f78ad, #d6aa52);
}

.spec-primary-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 12px 20px;
  border-bottom: 1px solid rgba(143, 177, 207, .55);
}

.spec-primary-mark {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #8fb1cf;
  border-radius: 7px;
  background: linear-gradient(#ffffff, #e4f0f8);
  color: #1d5b88;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 5px 12px rgba(35, 84, 125, .14);
  font-size: 13px;
  font-weight: 900;
}

.spec-primary-head h4 {
  padding: 0;
  border: 0;
  background: transparent;
  color: #123d62;
  font-size: 18px;
  line-height: 1.2;
}

.spec-primary-head p {
  margin: 5px 0 0;
  color: #60788d;
  font-size: 12px;
  font-weight: 800;
}

.spec-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(180px, .65fr);
  gap: 14px;
  padding: 16px 18px 18px 20px;
}

.spec-primary-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.spec-primary-field span {
  color: #294c69;
  font-size: 12px;
  font-weight: 900;
}

.spec-primary-field b {
  margin-left: 3px;
  color: var(--red);
}

.spec-primary-field select,
.spec-primary-field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #9db9d1;
  border-radius: 5px;
  background: #fff;
  padding: 0 10px;
  color: #152f45;
  font-size: 14px;
  font-weight: 800;
  box-shadow: inset 0 1px 2px rgba(28, 62, 93, .08), 0 1px 0 rgba(255, 255, 255, .85);
}

.spec-primary-field.trigger select {
  min-height: 44px;
  border-color: #7fa8c8;
  font-size: 15px;
  box-shadow: 0 0 0 3px rgba(126, 168, 201, .12), inset 0 1px 2px rgba(28, 62, 93, .08);
}

.spec-primary-field.remark {
  grid-column: 1 / -1;
}

.spec-primary-field.remark input {
  min-height: 44px;
  border-color: #cfbd8a;
  background: linear-gradient(#fffef9, #fff);
}

.spec-primary-field select:focus,
.spec-primary-field input:focus {
  outline: none;
  border-color: #4f8bb9;
  box-shadow: 0 0 0 3px rgba(79, 139, 185, .18), inset 0 1px 2px rgba(28, 62, 93, .08);
}

.spec-edit-section h4 {
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid #e3ebf2;
  background: linear-gradient(#f8fbfe, #edf4fa);
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .spec-primary-grid {
    grid-template-columns: 1fr;
  }
}

.spec-edit-grid {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.spec-edit-grid.two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.spec-edit-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.spec-edit-grid .base-field {
  grid-template-columns: 92px minmax(0, 1fr);
}

.spec-edit-grid .base-field.wide {
  grid-column: 1 / -1;
}

.spec-edit-grid .base-field.compact {
  grid-template-columns: 74px minmax(0, 1fr);
}

.spec-condition-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8fc 100%);
}

.spec-condition-group {
  min-width: 0;
  border: 1px solid #c9d9e6;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(35, 67, 96, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
  overflow: hidden;
}

.spec-condition-head {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #dbe7f0;
  background: linear-gradient(#ffffff, #edf5fb);
}

.spec-condition-head strong {
  display: block;
  color: #173f65;
  font-size: 13px;
  font-weight: 900;
}

.spec-condition-head span {
  display: block;
  margin-top: 3px;
  color: #6f8192;
  font-size: 11px;
  font-weight: 800;
}

.spec-condition-add,
.spec-condition-remove {
  flex: 0 0 auto;
  border: 1px solid #91b3ce;
  border-radius: 5px;
  background: linear-gradient(#ffffff, #dbeefa);
  color: #1d5b88;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 2px 4px rgba(36, 86, 124, .12);
  font-weight: 900;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.spec-condition-add {
  width: 32px;
  height: 30px;
  font-size: 20px;
  line-height: 1;
}

.spec-condition-add:hover,
.spec-condition-remove:hover {
  background: linear-gradient(#ffffff, #cde6f7);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 4px 8px rgba(36, 86, 124, .16);
}

.spec-condition-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.spec-condition-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 28px;
  align-items: end;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e0e9f1;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #f7fbfe);
  box-shadow: 0 1px 3px rgba(28, 54, 78, .05);
}

.spec-condition-index {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  align-self: center;
  border: 1px solid #c4d5e3;
  border-radius: 50%;
  background: #eef6fb;
  color: #315e82;
  font-size: 11px;
  font-weight: 900;
}

.spec-condition-row label {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.spec-condition-row label > span {
  color: #68798a;
  font-size: 11px;
  font-weight: 900;
}

.spec-condition-row input {
  width: 100%;
  min-height: 32px;
  border: 1px solid #b9cad8;
  border-radius: 4px;
  background: #fff;
  padding: 0 8px;
  box-shadow: inset 0 1px 2px rgba(30, 60, 90, .06);
}

.spec-condition-row input:focus {
  outline: none;
  border-color: #6d9ec2;
  box-shadow: 0 0 0 3px rgba(109, 158, 194, .16), inset 0 1px 2px rgba(30, 60, 90, .06);
}

.spec-condition-row select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #b9cad8;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #f7fbfe);
  padding: 0 30px 0 9px;
  color: #173b5b;
  font-size: 12px;
  font-weight: 850;
  box-shadow: inset 0 1px 2px rgba(30, 60, 90, .06);
}

.spec-condition-row select:focus {
  outline: none;
  border-color: #6d9ec2;
  box-shadow: 0 0 0 3px rgba(109, 158, 194, .16), inset 0 1px 2px rgba(30, 60, 90, .06);
}

.spec-condition-remove {
  width: 28px;
  height: 32px;
  color: #8a3d34;
  border-color: #d2a19a;
  background: linear-gradient(#fffafa, #f5ded9);
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 980px) {
  .spec-condition-board {
    grid-template-columns: 1fr;
  }
}

/* Special-event workflow: consistent with the employee portal's white business theme. */
.spec-event-add {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.spec-event-create-button,
.spec-event-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.spec-event-create-button {
  min-height: 36px;
  gap: 7px;
  padding: 0 15px;
  border: 1px solid #377ba9;
  border-bottom-color: #20577f;
  background: linear-gradient(#67b0d7 0%, #348cc0 52%, #2072a8 100%);
  color: #fff;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 3px 0 #235f88, 0 9px 18px rgba(29, 87, 128, .18);
}

.spec-event-create-button span {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.spec-event-create-button:hover,
.spec-event-card-button:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.spec-event-card-actions {
  min-width: 92px;
}

.spec-event-card-button {
  width: 84px;
  min-height: 32px;
  border: 1px solid #7fa5c5;
  border-bottom-color: #547da2;
  background: linear-gradient(#ffffff 0%, #e7f2fb 48%, #c8dff0 100%);
  color: #174b76;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 2px 0 #85a8c5, 0 7px 13px rgba(26, 70, 106, .12);
}

.spec-event-card-button.delete {
  border-color: #cfaaa4;
  border-bottom-color: #aa746c;
  background: linear-gradient(#fffefe 0%, #f9ece9 50%, #eed3ce 100%);
  color: #8c352d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 2px 0 #c79a93, 0 7px 13px rgba(126, 51, 42, .1);
}

.timeline-item.timeline-spec-event-ready,
.employee-old-flow .timeline-spec-event-ready {
  color: #155a86;
  font-weight: 900;
}

.timeline-item.timeline-spec-event-pending,
.employee-old-flow .timeline-spec-event-pending {
  color: #415a6f;
  font-weight: 850;
}

.timeline-item.timeline-spec-event-done,
.employee-old-flow .timeline-spec-event-done {
  color: #a2473f;
  font-weight: 900;
}

.order-flow-action.spec-event-complete-action {
  border-color: #4f9a78;
  border-bottom-color: #2f7657;
  background: linear-gradient(#ffffff 0%, #e5f7ee 48%, #bfe4d0 100%);
  color: #1c6848;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 2px 0 #72ad8f, 0 7px 13px rgba(31, 105, 72, .13);
}

.order-flow-action.spec-event-delete-action {
  border-color: #cfaaa4;
  border-bottom-color: #aa746c;
  background: linear-gradient(#fffefe 0%, #f9ece9 50%, #eed3ce 100%);
  color: #8c352d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 2px 0 #c79a93, 0 7px 13px rgba(126, 51, 42, .1);
}

.special-event-confirm-modal,
.order-telex-block-modal {
  z-index: 4200;
  background: rgba(13, 29, 44, .54);
  backdrop-filter: blur(5px);
}

.special-event-completion-modal {
  z-index: 4300;
  background: rgba(13, 29, 44, .58);
  backdrop-filter: blur(5px);
}

.special-event-confirm-card {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 38px);
  display: flex;
  flex-direction: column;
  border-color: #789dbb;
  background: #f6f9fc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 28px 68px rgba(7, 26, 43, .38);
}

.special-event-confirm-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 62px 20px 22px;
  border-bottom: 1px solid #b9cede;
  background: linear-gradient(135deg, #fdfefe 0%, #e7f2fa 72%, #fff8e8 100%);
}

.special-event-confirm-emblem {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d1aa55;
  border-bottom-color: #a87d2d;
  border-radius: 8px;
  background: linear-gradient(#fffdf7, #f4d790 55%, #daa847);
  color: #66430b;
  font-size: 28px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 0 #bd8b30, 0 10px 18px rgba(111, 76, 16, .16);
}

.special-event-confirm-head div {
  min-width: 0;
}

.special-event-confirm-head em {
  display: block;
  color: #54738e;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.special-event-confirm-head strong {
  display: block;
  margin-top: 3px;
  color: #153e62;
  font-size: 22px;
  font-weight: 950;
}

.special-event-confirm-head p {
  margin: 7px 0 0;
  color: #516a80;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

.special-event-confirm-list {
  min-height: 92px;
  display: grid;
  gap: 10px;
  padding: 16px 20px;
  overflow: auto;
}

.special-event-confirm-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #c6d8e6;
  border-left: 4px solid #3d83b5;
  border-radius: 7px;
  background: linear-gradient(#ffffff, #f7fbfe);
  box-shadow: 0 7px 16px rgba(34, 72, 105, .08), inset 0 1px 0 rgba(255,255,255,.96);
}

.special-event-confirm-index {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #9bbbd2;
  border-radius: 50%;
  background: #edf6fb;
  color: #245f8a;
  font-size: 12px;
  font-weight: 950;
}

.special-event-confirm-copy small,
.special-event-confirm-copy span,
.special-event-confirm-copy strong,
.special-event-confirm-copy p {
  display: block;
}

.special-event-confirm-copy small {
  color: #6b8498;
  font-size: 11px;
  font-weight: 900;
}

.special-event-confirm-copy strong {
  margin-top: 5px;
  color: #123b5e;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.45;
}

.special-event-confirm-copy .special-event-confirm-stage {
  margin-top: 3px;
  color: #8294a3;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.4;
}

.special-event-confirm-copy .special-event-confirm-requirement {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.order-process-special-event-list {
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
}

.order-process-special-event-item {
  align-items: start;
}

.order-process-special-event-item.is-completed {
  border-color: #a7cdb9;
  border-left-color: #3d9168;
  background: linear-gradient(#ffffff, #f3fbf7);
}

.order-process-special-event-item.is-completed .special-event-confirm-index {
  border-color: #7db496;
  background: #e8f6ee;
  color: #27744f;
}

.order-process-special-event-item.is-current {
  border-color: #82acd0;
  border-left-color: #236faa;
  box-shadow: 0 9px 20px rgba(31, 94, 145, .13), inset 0 1px 0 rgba(255,255,255,.96);
}

.order-process-special-event-item-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #d7e4ed;
}

.order-process-special-event-item-actions > span {
  margin-right: auto;
  color: #8c611c;
  font-size: 11px;
  font-weight: 950;
}

.order-process-special-event-item.is-completed .order-process-special-event-item-actions > span {
  color: #27744f;
}

.order-process-special-event-card .special-event-confirm-head,
.order-process-special-event-card .order-special-event-center-progress,
.order-process-special-event-card .special-event-confirm-note,
.order-process-special-event-card .special-event-confirm-actions {
  flex: 0 0 auto;
}

.order-process-special-event-card .special-event-confirm-actions {
  justify-content: space-between;
  border-top: 1px solid #cfdfeb;
  background: linear-gradient(#f9fcfe, #edf4f8);
}

.order-process-special-event-card .special-event-confirm-actions .default-cancel-btn,
.order-process-special-event-card .special-event-confirm-actions .special-event-confirm-submit {
  position: static;
  right: auto;
  bottom: auto;
  width: auto;
  min-width: 126px;
}

.special-event-confirm-copy p {
  margin: 6px 0 0;
  color: #293f52;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.special-event-confirm-empty {
  display: grid;
  place-items: center;
  min-height: 76px;
  border: 1px dashed #b9cbd9;
  border-radius: 6px;
  color: #637b8f;
  font-size: 13px;
  font-weight: 850;
}

.special-event-confirm-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 20px;
  padding: 10px 12px;
  border: 1px solid #dbc58e;
  border-radius: 6px;
  background: #fffaf0;
  color: #664e1c;
  font-size: 12px;
}

.special-event-confirm-note b {
  white-space: nowrap;
  font-weight: 950;
}

.special-event-confirm-actions {
  justify-content: center;
  padding-top: 16px;
}

.special-event-confirm-actions .special-event-confirm-submit {
  min-width: 166px;
}

/* Completion is a secondary confirmation above the event center. Keep it
   visibly smaller and denser than the primary special-event dialog. */
.special-event-confirm-card.special-event-completion-card {
  width: min(500px, calc(100vw - 40px));
  max-height: calc(100vh - 72px);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 20px 48px rgba(7, 26, 43, .32);
}

.special-event-completion-card .special-event-confirm-head {
  gap: 12px;
  padding: 15px 50px 14px 17px;
}

.special-event-completion-card .special-event-confirm-emblem {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  font-size: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 #bd8b30, 0 7px 13px rgba(111, 76, 16, .14);
}

.special-event-completion-card .special-event-confirm-head em {
  font-size: 10px;
}

.special-event-completion-card .special-event-confirm-head strong {
  margin-top: 2px;
  font-size: 18px;
}

.special-event-completion-card .special-event-confirm-head p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.special-event-completion-card .special-event-confirm-list {
  min-height: 0;
  padding: 12px 16px;
}

.special-event-completion-card .special-event-confirm-item {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  padding: 10px 11px;
  border-left-width: 3px;
  box-shadow: 0 5px 12px rgba(34, 72, 105, .07), inset 0 1px 0 rgba(255,255,255,.96);
}

.special-event-completion-card .special-event-confirm-index {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.special-event-completion-card .special-event-confirm-copy small,
.special-event-completion-card .special-event-confirm-copy .special-event-confirm-stage {
  font-size: 10px;
}

.special-event-completion-card .special-event-confirm-copy strong {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.4;
}

.special-event-completion-card .special-event-confirm-note {
  gap: 8px;
  margin: 0 16px;
  padding: 8px 10px;
  font-size: 11px;
}

.special-event-completion-card .special-event-confirm-actions {
  gap: 10px;
  padding: 12px 16px 15px;
}

.special-event-completion-card .special-event-confirm-actions .special-event-confirm-submit {
  min-width: 128px;
}

@media (max-width: 640px) {
  .special-event-confirm-modal,
  .order-telex-block-modal {
    padding: 12px;
  }

  .special-event-confirm-head {
    align-items: flex-start;
    padding-left: 16px;
  }

  .special-event-confirm-emblem {
    width: 42px;
    height: 42px;
  }

  .special-event-confirm-head strong {
    font-size: 18px;
  }

  .special-event-confirm-note {
    align-items: flex-start;
    flex-direction: column;
  }
}

.legacy-index-col {
  width: 32px;
  text-align: center !important;
}

.legacy-op-col {
  width: 90px;
  text-align: center !important;
}

.legacy-op-col .table-action-link {
  min-height: 22px;
  padding: 0 2px;
  font-size: 12px;
}

.related-table th {
  height: 34px;
  padding: 0 8px;
  border-right: 1px solid rgba(255, 255, 255, .18);
  background: var(--blue);
  color: #fff;
  text-align: left;
  font-weight: 900;
  white-space: nowrap;
}

.related-table td {
  min-height: 42px;
  padding: 7px 8px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid #d9e4ef;
  vertical-align: top;
  background: #fff;
}

.related-table tr:nth-child(even) td {
  background: #fbfdfe;
}

.free-time-panel {
  display: grid;
  gap: 12px;
}

.free-time-toolbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #b8c9d9;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef5fb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 10px 24px rgba(31, 55, 75, .08);
}

.free-time-toolbar strong {
  display: block;
  color: var(--blue-dark);
  font-size: 15px;
  font-weight: 900;
}

.free-time-toolbar span {
  display: block;
  margin-top: 3px;
  color: #607286;
  font-size: 12px;
  font-weight: 800;
}

.free-time-table-wrap {
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(31, 55, 75, .08);
}

.free-time-table {
  min-width: 1120px;
}

.free-time-op-col {
  width: 150px;
  text-align: center !important;
  white-space: nowrap;
}

.free-time-op-col .blue-action-button,
.free-time-op-col .mini-button {
  width: 58px;
  min-width: 58px;
  height: 30px;
  margin: 0 2px;
  font-size: 12px;
}

.free-time-edit-board {
  display: grid;
  gap: 14px;
}

.free-time-edit-hero,
.shipping-company-hero,
.ship-name-hero,
.supplier-hero,
.op-auth-hero,
.fee-type-hero,
.reason-hero,
.currency-hero,
.currency-rate-hero,
.bank-account-hero,
.group-mail-hero,
.mail-template-hero,
.invoice-hero,
.address-book-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #abc2d8;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f0f7fc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 12px 28px rgba(31, 55, 75, .08);
}

.free-time-edit-hero strong,
.shipping-company-hero strong,
.ship-name-hero strong,
.supplier-hero strong,
.op-auth-hero strong,
.fee-type-hero strong,
.reason-hero strong,
.currency-hero strong,
.currency-rate-hero strong,
.bank-account-hero strong,
.group-mail-hero strong,
.mail-template-hero strong,
.invoice-hero strong,
.address-book-hero strong {
  display: block;
  color: var(--blue-dark);
  font-size: 18px;
  font-weight: 900;
}

.free-time-edit-hero span,
.shipping-company-hero span,
.ship-name-hero span,
.supplier-hero span,
.op-auth-hero span,
.fee-type-hero span,
.reason-hero span,
.currency-hero span,
.currency-rate-hero span,
.bank-account-hero span,
.group-mail-hero span,
.mail-template-hero span,
.invoice-hero span,
.address-book-hero span {
  display: block;
  margin-top: 4px;
  color: #607286;
  font-size: 12px;
  font-weight: 800;
}

.shipping-company-mark,
.ship-name-mark,
.supplier-mark,
.op-auth-mark,
.fee-type-mark,
.reason-mark,
.currency-mark,
.currency-rate-mark,
.bank-account-mark,
.group-mail-mark,
.mail-template-mark,
.invoice-mark,
.address-book-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid #88aac8;
  border-radius: 8px;
  background: linear-gradient(#ffffff, #d7ebfa);
  color: #174f78;
  font-size: 18px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 5px 14px rgba(36, 85, 124, .14);
}

.ship-name-mark {
  background: linear-gradient(#ffffff, #dceefa);
}

.supplier-mark {
  background: linear-gradient(#ffffff, #e2f0fb);
}

.op-auth-mark {
  background: linear-gradient(#ffffff, #dbeaf7);
}

.fee-type-mark {
  background: linear-gradient(#ffffff, #e7f0f8);
}

.mail-template-mark {
  background: linear-gradient(#ffffff, #dceefa);
}

.invoice-mark {
  background: linear-gradient(#ffffff, #dbeefa);
}

.address-book-mark {
  background: linear-gradient(#ffffff, #d8ecfb);
}

.shipping-company-basic-grid {
  grid-template-columns: minmax(320px, 720px);
  align-items: stretch;
}

.ship-name-basic-grid,
.supplier-basic-grid {
  grid-template-columns: minmax(320px, 720px);
  align-items: stretch;
}

.op-auth-edit-board {
  display: grid;
  gap: 14px;
}

.op-auth-rule-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #c8d7e4;
  border-radius: 5px;
  background:
    linear-gradient(#ffffff, #f2f6fa);
  color: #597086;
  font-size: 12px;
  font-weight: 800;
}

.op-auth-rule-line b {
  color: #244f78;
  font-weight: 950;
}

.op-auth-edit-grid {
  grid-template-columns: minmax(320px, 720px);
  align-items: stretch;
}

.op-auth-field select {
  min-height: 38px;
  border: 1px solid #aebdcb;
  border-bottom-color: #8fa2b5;
  border-radius: 4px;
  background:
    linear-gradient(#ffffff 0%, #f8fbfd 48%, #edf3f8 100%);
  color: #1d2b39;
  font-size: 14px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 4px 10px rgba(38, 59, 82, .08);
}

.op-auth-current-time {
  justify-self: start;
  padding: 7px 11px;
  border: 1px solid #c4d3df;
  border-radius: 4px;
  background: #f8fbfd;
  color: #50677c;
  font-size: 12px;
  font-weight: 850;
}

.fee-type-edit-board,
.reason-edit-board,
.currency-edit-board,
.currency-rate-edit-board,
.bank-account-edit-board,
.group-mail-edit-board,
.mail-template-edit-board,
.invoice-edit-board,
.address-book-edit-board {
  display: grid;
  gap: 14px;
}

.fee-type-rule-line,
.reason-rule-line,
.currency-rule-line,
.currency-rate-rule-line,
.bank-account-rule-line,
.group-mail-rule-line,
.mail-template-rule-line,
.invoice-rule-line,
.address-book-rule-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #c8d7e4;
  border-radius: 5px;
  background:
    linear-gradient(#ffffff, #f2f6fa);
  color: #597086;
  font-size: 12px;
  font-weight: 800;
}

.fee-type-rule-line b,
.reason-rule-line b,
.currency-rule-line b,
.currency-rate-rule-line b,
.bank-account-rule-line b,
.group-mail-rule-line b,
.mail-template-rule-line b,
.invoice-rule-line b,
.address-book-rule-line b {
  color: #244f78;
  font-weight: 950;
}

.group-mail-rule-line em {
  margin-left: auto;
  color: #315f80;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.fee-type-edit-grid,
.reason-edit-grid,
.currency-edit-grid,
.currency-rate-edit-grid,
.bank-account-edit-grid,
.group-mail-edit-grid,
.mail-template-edit-grid,
.invoice-edit-grid,
.address-book-edit-grid {
  grid-template-columns: minmax(320px, 720px);
  align-items: stretch;
}

.address-book-edit-grid {
  grid-template-columns: minmax(190px, 220px) minmax(280px, 1fr) minmax(300px, 1.2fr);
}

.address-book-field select,
.address-book-field input {
  min-height: 38px;
  border: 1px solid #aebdcb;
  border-bottom-color: #8fa2b5;
  border-radius: 4px;
  background:
    linear-gradient(#ffffff 0%, #f8fbfd 48%, #edf3f8 100%);
  color: #1d2b39;
  font-size: 14px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 4px 10px rgba(38, 59, 82, .08);
}

.reason-base-ops .promoted-base-action-row {
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

.reason-base-ops .blue-action-button {
  width: 62px;
  min-width: 62px;
}

.reason-edit-grid textarea {
  min-height: 118px;
  resize: vertical;
}

.bank-account-edit-grid {
  grid-template-columns: minmax(360px, 840px);
}

.bank-account-edit-grid .bank-account-category-fixed[readonly] {
  background: #f1f6fa;
  border-color: #b8cad8;
  border-style: dashed;
  color: #315878;
  cursor: default;
  font-weight: 700;
}

.bank-account-edit-grid textarea {
  min-height: 170px;
  resize: vertical;
}

.mail-template-base-ops .blue-action-button {
  width: 62px;
  min-width: 62px;
}

.mail-template-readonly-name {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #c3d3e1;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #f4f8fb);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 8px 20px rgba(39, 72, 104, .07);
}

.mail-template-readonly-name span,
.mail-template-readonly-name strong {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
}

.mail-template-readonly-name span {
  border-right: 1px solid #d5e1eb;
  background: linear-gradient(#fafdff, #edf5fb);
  color: #315a7c;
  font-size: 13px;
  font-weight: 950;
}

.mail-template-readonly-name strong {
  color: #173f63;
  font-size: 15px;
  font-weight: 950;
}

.mail-template-edit-grid {
  grid-template-columns: minmax(420px, 920px);
}

.mail-template-content-field textarea {
  min-height: 360px;
  resize: vertical;
  line-height: 1.65;
}

.invoice-base-ops .blue-action-button {
  width: 62px;
  min-width: 62px;
}

.address-book-base-ops .promoted-base-action-row {
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

.address-book-base-ops .blue-action-button {
  width: 62px;
  min-width: 62px;
}

.address-book-user-card,
.address-book-email-card {
  min-height: 38px;
  display: grid;
  align-content: center;
  gap: 0;
  padding: 7px 10px;
  border: 1px solid #c4d5e4;
  border-bottom-color: #a9bfd3;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f9fc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 5px 12px rgba(39, 72, 104, .06);
}

.address-book-user-card strong {
  color: #173f63;
  font-size: 14px;
  font-weight: 950;
}

.address-book-user-card span {
  color: #687c8f;
  font-size: 11px;
  font-weight: 800;
}

.address-book-email-card {
  color: #234b70;
  font-size: 13px;
  font-weight: 850;
  word-break: break-all;
}

.address-book-role-chip {
  min-width: 72px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid #b9cddd;
  border-bottom-color: #93acc2;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #eaf4fb);
  color: #1e557f;
  font-size: 12px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 4px 10px rgba(36, 85, 124, .08);
}

.address-book-role-chip.role-2 {
  border-color: #c6d4c4;
  border-bottom-color: #9fb69c;
  background: linear-gradient(#ffffff, #edf7ec);
  color: #376236;
}

.address-book-role-chip.role-3 {
  border-color: #d4c7a8;
  border-bottom-color: #b69d68;
  background: linear-gradient(#ffffff, #f7f1df);
  color: #6a5524;
}

.invoice-base-ops .base-readonly-chip {
  min-width: 72px;
}

.invoice-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
}

.invoice-status-grid div {
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid #bed0df;
  border-bottom-color: #9bb4c8;
  border-radius: 6px;
  background:
    linear-gradient(#ffffff 0%, #f6fafc 48%, #edf5fb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 6px 16px rgba(39, 72, 104, .08);
}

.invoice-status-grid div.empty {
  background: linear-gradient(#fafbfc, #edf1f4);
}

.invoice-status-grid span {
  display: block;
  color: #607286;
  font-size: 12px;
  font-weight: 900;
}

.invoice-status-grid strong {
  display: block;
  margin-top: 7px;
  color: #173f63;
  font-size: 20px;
  font-weight: 950;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0;
}

.invoice-status-grid div.empty strong {
  color: #7a8794;
  font-family: inherit;
  font-size: 18px;
}

.invoice-edit-grid {
  grid-template-columns: minmax(220px, 280px) minmax(240px, 1fr) minmax(240px, 1fr);
  align-items: stretch;
}

.invoice-type-field select {
  min-height: 38px;
  border: 1px solid #aebdcb;
  border-bottom-color: #8fa2b5;
  border-radius: 4px;
  background:
    linear-gradient(#ffffff 0%, #f8fbfd 48%, #edf3f8 100%);
  color: #1d2b39;
  font-size: 14px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 4px 10px rgba(38, 59, 82, .08);
}

.group-mail-receiver-panel {
  min-height: 330px;
  display: grid;
  grid-template-rows: auto auto minmax(190px, 1fr) auto;
  border: 1px solid #bfd0df;
  border-radius: 7px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 10px 24px rgba(39, 72, 104, .08);
  overflow: hidden;
}

.group-mail-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #d6e2ed;
  background: linear-gradient(#ffffff, #edf5fb);
}

.group-mail-panel-head strong {
  color: #1f4f79;
  font-size: 14px;
  font-weight: 950;
}

.group-mail-panel-head span {
  color: #61768a;
  font-size: 12px;
  font-weight: 800;
}

.group-mail-receiver-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  padding: 10px 12px;
  border-bottom: 1px solid #d6e2ed;
  background: #f8fbfd;
}

.group-mail-receiver-tools label {
  min-width: 0;
}

.group-mail-receiver-tools label > span {
  display: block;
  margin-bottom: 4px;
  color: #526c82;
  font-size: 11px;
  font-weight: 900;
}

.group-mail-receiver-tools input {
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  border: 1px solid #aac0d2;
  border-radius: 5px;
  background: #fff;
  padding: 0 10px;
  color: #20394e;
  font-size: 12px;
  font-weight: 800;
}

.group-mail-filter-buttons,
.group-mail-select-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.group-mail-filter-buttons button,
.group-mail-select-buttons button {
  min-height: 34px;
  border: 1px solid #a9bfd1;
  border-radius: 5px;
  background: linear-gradient(#fff, #eaf3f9);
  padding: 0 10px;
  color: #345a78;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.group-mail-filter-buttons button.active {
  border-color: #2c77aa;
  background: linear-gradient(#4b9ace, #2674aa);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.group-mail-receiver-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  min-height: 190px;
  max-height: 280px;
  overflow: auto;
  padding: 12px;
}

.group-mail-receiver-card {
  display: grid;
  grid-template-columns: 18px minmax(100px, 1fr);
  gap: 9px 10px;
  align-items: start;
  min-height: 72px;
  padding: 10px;
  border: 1px solid #c5d5e4;
  border-bottom-color: #a9bfd3;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #f3f8fc);
  color: #25394b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 5px 12px rgba(36, 68, 99, .06);
}

.group-mail-receiver-card input {
  margin-top: 3px;
}

.group-mail-receiver-card strong,
.group-mail-receiver-card em,
.group-mail-receiver-card small {
  display: block;
}

.group-mail-receiver-card strong {
  color: #163f62;
  font-size: 13px;
  font-weight: 950;
}

.group-mail-receiver-card em {
  margin-top: 3px;
  color: #6a7d8e;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.group-mail-receiver-card small {
  grid-column: 2;
  color: #526a80;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.group-mail-receiver-card.email-unavailable {
  border-color: #e1bd91;
  background: linear-gradient(#fffdf9, #f8efe3);
  opacity: .82;
}

.group-mail-receiver-card.email-unavailable small {
  color: #a24c2f;
  font-weight: 950;
}

.group-mail-selection-summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 7px 12px;
  border-top: 1px solid #d6e2ed;
  background: #edf5fa;
  color: #244f70;
  font-size: 11px;
  font-weight: 950;
}

.group-mail-empty {
  padding: 18px;
  border: 1px dashed #b9cad9;
  border-radius: 6px;
  color: #62778a;
  font-weight: 850;
  text-align: center;
}

.group-mail-content-field textarea {
  min-height: 180px;
  resize: vertical;
}

.group-mail-file-box {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px 14px;
  align-items: center;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid #bdd0e0;
  border-radius: 7px;
  background: linear-gradient(#ffffff, #f4f8fb);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 8px 18px rgba(36, 66, 94, .07);
}

.group-mail-file-box span {
  color: #1f4f79;
  font-size: 13px;
  font-weight: 950;
}

.group-mail-file-box input {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid #aec5d8;
  border-bottom-color: #8faec6;
  border-radius: 5px;
  background: linear-gradient(#ffffff 0%, #f4f8fc 100%);
  padding: 4px 7px;
  color: #263849;
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(36,78,111,.08);
}

.client-record-upload input[type="file"]::file-selector-button,
.preorder-wide-field input[type="file"]::file-selector-button,
.group-mail-file-box input[type="file"]::file-selector-button {
  min-height: 28px;
  margin-right: 9px;
  padding: 0 12px;
  border: 1px solid #4d8fbd;
  border-bottom-color: #286b9d;
  border-radius: 4px;
  background: linear-gradient(#fafdff 0%, #d9edf9 48%, #a9cfe8 100%);
  color: #1d547f;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 0 #75a9cb;
}

.client-record-upload input[type="file"]:hover::file-selector-button,
.preorder-wide-field input[type="file"]:hover::file-selector-button,
.group-mail-file-box input[type="file"]:hover::file-selector-button {
  border-color: #347caf;
  background: linear-gradient(#ffffff 0%, #e7f5fd 48%, #b9dced 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 2px 3px rgba(28,93,138,.16);
}

.group-mail-file-box b {
  grid-column: 2;
  color: #5d7184;
  font-size: 12px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

/* Customer-facing notice preview: keep the same paper width and type rhythm as the client portal. */
.group-mail-client-preview-editor .edit-dialog {
  width: min(1540px, calc(100vw - 52px));
  height: min(850px, calc(100vh - 62px));
}

.group-mail-client-preview-editor .base-edit-form {
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.group-mail-client-workbench {
  min-height: 0;
  height: 100%;
  display: grid;
  /* 680px paper + 64px reader padding + desktop scrollbar allowance. */
  grid-template-columns: minmax(440px, 1fr) minmax(760px, .98fr);
}

.group-mail-client-workbench > .group-mail-composer {
  min-width: 0;
  align-content: start;
  overflow: auto;
  padding: 18px 22px 88px;
  background: linear-gradient(180deg, #f7fafc, #eef4f8);
}

@media (max-width: 1380px) {
  .group-mail-receiver-tools {
    grid-template-columns: minmax(180px, 1fr) auto;
  }

  .group-mail-select-buttons {
    grid-column: 1 / -1;
  }
}

.group-mail-client-preview-pane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-left: 1px solid #b8c8d4;
  background-color: #e6edf2;
  background-image:
    linear-gradient(rgba(59, 86, 108, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 86, 108, .032) 1px, transparent 1px),
    linear-gradient(180deg, rgba(243, 247, 250, .84) 0%, rgba(222, 232, 239, .92) 100%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
}

.group-mail-client-preview-head {
  min-height: 62px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #c5d2db;
  background: #f8fafc;
  padding: 10px 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 3px 9px rgba(37, 62, 83, .06);
}

.group-mail-client-preview-head span,
.group-mail-client-preview-head strong {
  display: block;
}

.group-mail-client-preview-head span {
  color: #6c8192;
  font-size: 10px;
  font-weight: 800;
}

.group-mail-client-preview-head strong {
  margin-top: 3px;
  color: #244f72;
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 14px;
  font-weight: 760;
}

.group-mail-client-preview-scroll {
  min-height: 0;
  overflow: auto;
  padding: 26px 32px 38px;
}

.group-mail-client-paper {
  position: relative;
  box-sizing: border-box;
  width: min(680px, 100%);
  min-height: 530px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #c8c9c6;
  border-top: 4px solid #315a7d;
  border-radius: 2px;
  background-color: #fffdfa;
  background-image:
    linear-gradient(90deg, rgba(190, 201, 207, .07) 0%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(190, 201, 207, .06) 100%),
    repeating-linear-gradient(0deg, rgba(72, 88, 99, .018) 0, rgba(72, 88, 99, .018) 1px, transparent 1px, transparent 6px),
    linear-gradient(180deg, rgba(255, 255, 255, .74) 0%, rgba(252, 249, 244, .46) 100%);
  color: #243746;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", Arial, sans-serif;
  padding: 42px 52px 32px;
  box-shadow:
    0 24px 52px rgba(28, 48, 63, .16),
    0 7px 18px rgba(38, 53, 64, .08),
    0 0 0 6px rgba(255, 255, 255, .27),
    inset 0 0 0 1px rgba(255, 255, 255, .9);
}

.group-mail-client-paper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  width: 1px;
  background: #e5d7d5;
  opacity: .72;
}

.group-mail-client-letterhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #b9c5ce;
  padding-bottom: 15px;
}

.group-mail-client-letterhead > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.group-mail-client-letterhead strong {
  color: #244f72;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
}

.group-mail-client-letterhead span {
  color: #768894;
  font-size: 9px;
  font-weight: 700;
}

.group-mail-client-letterhead time {
  color: #667b8b;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.group-mail-client-paper > h2 {
  margin: 28px 0 12px;
  color: #1f3548;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Yu Gothic UI", Meiryo, serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.group-mail-client-paper > h2.is-placeholder,
.group-mail-client-content.is-placeholder {
  color: #8796a2;
}

.group-mail-client-paper-rule {
  width: 48px;
  height: 2px;
  margin: 0 auto 27px;
  background: #6686a0;
}

.group-mail-client-content {
  min-height: 260px;
  color: #293b49;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Yu Gothic", Meiryo, serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.88;
  overflow-wrap: anywhere;
}

.group-mail-client-attachments {
  margin-top: 28px;
  border-top: 1px solid #ccd5dc;
  padding-top: 18px;
}

.group-mail-client-attachments h3 {
  margin: 0 0 10px;
  color: #526a7c;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.group-mail-client-attachments > div {
  display: grid;
  gap: 8px;
}

.group-mail-client-attachments > div > div {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #aebfcb;
  border-radius: 4px;
  background: #f4f7f9;
  color: #294d69;
  padding: 7px 11px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(43, 67, 85, .08);
}

.group-mail-client-attachments > div > div > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #315f82;
  color: #fff;
  font-size: 13px;
}

.group-mail-client-attachments > div > div > strong {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", Arial, sans-serif;
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (max-width: 1240px) {
  .group-mail-client-preview-editor .edit-dialog {
    width: min(980px, calc(100vw - 52px));
  }

  .group-mail-client-workbench {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(620px, .95fr);
  }

  .group-mail-client-preview-pane {
    border-top: 1px solid #b8c8d4;
    border-left: 0;
  }
}

.group-mail-notice-record-viewer .edit-dialog {
  width: min(1140px, calc(100vw - 52px));
  height: min(790px, calc(100vh - 62px));
}

.group-mail-notice-record-viewer .base-edit-form {
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.group-mail-notice-record-shell {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  background-color: #dfe8ef;
  background-image:
    linear-gradient(rgba(59, 86, 108, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 86, 108, .032) 1px, transparent 1px),
    linear-gradient(180deg, #eef3f7 0%, #e2eaf0 100%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
}

.group-mail-notice-audit {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-right: 1px solid #b8c8d4;
  background: rgba(247, 250, 252, .94);
  color: #294053;
  padding: 18px 17px 24px;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, .78),
    6px 0 18px rgba(41, 65, 83, .055);
}

.group-mail-notice-audit > header {
  border-bottom: 1px solid #c7d4de;
  padding: 2px 2px 15px;
}

.group-mail-notice-audit > header span,
.group-mail-notice-audit > header strong,
.group-mail-notice-audit > header time {
  display: block;
}

.group-mail-notice-audit > header span {
  color: #7a8d9c;
  font-size: 9px;
  font-weight: 850;
}

.group-mail-notice-audit > header strong {
  margin-top: 4px;
  color: #244f72;
  font-size: 18px;
  font-weight: 900;
}

.group-mail-notice-audit > header time {
  margin-top: 7px;
  color: #62798b;
  font-size: 11px;
  font-weight: 700;
}

.group-mail-notice-audit-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid #d1dce4;
  padding: 14px 0;
}

.group-mail-notice-audit-metrics > div {
  min-width: 0;
  padding: 0 10px;
}

.group-mail-notice-audit-metrics > div + div {
  border-left: 1px solid #d1dce4;
}

.group-mail-notice-audit-metrics b,
.group-mail-notice-audit-metrics span {
  display: block;
}

.group-mail-notice-audit-metrics b {
  color: #214e70;
  font-size: 20px;
  font-weight: 900;
}

.group-mail-notice-audit-metrics span {
  margin-top: 2px;
  color: #6d8191;
  font-size: 10px;
  font-weight: 750;
}

.group-mail-notice-audit > section {
  border-bottom: 1px solid #d7e0e7;
  padding: 15px 2px;
}

.group-mail-notice-audit > section h4 {
  margin: 0 0 9px;
  color: #526b7d;
  font-size: 11px;
  font-weight: 850;
}

.group-mail-notice-audit-list {
  display: grid;
  gap: 6px;
}

.group-mail-notice-audit-list span {
  display: block;
  overflow-wrap: anywhere;
  border-left: 3px solid #8ba8bd;
  background: rgba(232, 239, 244, .78);
  color: #314b60;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.group-mail-notice-audit-list em {
  color: #80909c;
  font-size: 11px;
  font-style: normal;
}

.group-mail-notice-record-reader {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background-color: #e6edf2;
  background-image:
    linear-gradient(rgba(59, 86, 108, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 86, 108, .032) 1px, transparent 1px),
    linear-gradient(180deg, rgba(243, 247, 250, .84) 0%, rgba(222, 232, 239, .92) 100%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
  padding: 26px 32px 38px;
  box-shadow:
    inset 12px 0 24px rgba(48, 73, 92, .055),
    inset 0 1px 0 rgba(255, 255, 255, .74);
}

.group-mail-notice-record-paper .group-mail-client-content div,
.group-mail-notice-record-paper .group-mail-client-content p {
  margin: 0;
}

.group-mail-notice-record-paper .group-mail-client-content table {
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
}

.group-mail-notice-record-paper .group-mail-client-content th,
.group-mail-notice-record-paper .group-mail-client-content td {
  border: 1px solid #cbd3d9;
  padding: 7px 9px;
  text-align: left;
}

.group-mail-notice-record-paper .group-mail-client-content img {
  max-width: 100%;
  height: auto;
}

.group-mail-notice-record-paper .group-mail-client-content a {
  color: #245e88;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

@media (max-width: 900px) {
  .group-mail-notice-record-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .group-mail-notice-record-reader {
    padding: 20px;
  }

  .group-mail-notice-record-paper {
    padding: 34px 34px 28px 43px;
  }
}

.group-mail-record-board {
  display: grid;
  gap: 14px;
}

.group-mail-record-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #abc2d8;
  border-radius: 7px;
  background:
    linear-gradient(180deg, #ffffff 0%, #edf6fc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 12px 28px rgba(31, 55, 75, .08);
}

.group-mail-record-hero strong {
  display: block;
  overflow: hidden;
  max-width: 720px;
  color: #173b64;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-mail-record-hero span {
  display: block;
  margin-top: 4px;
  color: #607286;
  font-size: 12px;
  font-weight: 850;
}

.group-mail-record-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.group-mail-record-metrics div {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #c2d3e1;
  border-radius: 6px;
  background:
    linear-gradient(#ffffff, #f3f8fc);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 6px 16px rgba(42, 70, 96, .07);
}

.group-mail-record-metrics b,
.group-mail-record-metrics span {
  display: block;
}

.group-mail-record-metrics b {
  color: #174f78;
  font-size: 17px;
  font-weight: 950;
}

.group-mail-record-metrics span {
  margin-top: 3px;
  color: #66798b;
  font-size: 12px;
  font-weight: 850;
}

.group-mail-record-section {
  overflow: hidden;
  border: 1px solid #c1d2e0;
  border-radius: 7px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 8px 20px rgba(39, 72, 104, .07);
}

.group-mail-record-section h4 {
  margin: 0;
  padding: 11px 14px;
  border-bottom: 1px solid #d7e3ed;
  background:
    linear-gradient(#ffffff, #edf5fb);
  color: #1f4f79;
  font-size: 14px;
  font-weight: 950;
}

.group-mail-record-content {
  max-height: 330px;
  overflow: auto;
  padding: 16px;
  color: #25394b;
  font-size: 13px;
  line-height: 1.7;
  background: #fff;
}

.group-mail-record-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 180px;
  overflow: auto;
  padding: 13px;
}

.group-mail-record-tags span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #b9ccdc;
  border-radius: 4px;
  background:
    linear-gradient(#ffffff, #edf5fb);
  color: #24435f;
  font-size: 12px;
  font-weight: 850;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 5px rgba(42, 70, 96, .06);
}

.group-mail-record-tags.receiver-tags span {
  background:
    linear-gradient(#ffffff, #f5f8fb);
  color: #31495f;
}

.group-mail-record-tags em,
.group-mail-record-empty {
  color: #728196;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.mail-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 31, 48, .42);
  backdrop-filter: blur(3px);
}

.mail-confirm-modal.mail-result-modal {
  z-index: 3300;
}

/* Reused confirmations may have been created before the business modal they
   protect. Keep them above every workbench modal regardless of DOM order. */
.mail-confirm-modal.default-confirm-modal,
.mail-confirm-modal.special-event-completion-modal {
  z-index: 3700;
}

.factory-fee-revision-confirm-card,
.factory-fee-revision-history-card {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
}

.factory-fee-revision-body,
.factory-fee-revision-history-body {
  max-height: min(620px, calc(100vh - 250px));
  overflow: auto;
}

.factory-fee-revision-body > p {
  margin: 0 0 12px;
  color: #516c84;
  font-size: 13px;
  font-weight: 700;
}

.factory-fee-revision-group,
.factory-fee-revision-total,
.factory-fee-revision-history-item {
  margin: 12px 0;
  border: 1px solid #cbddeb;
  border-radius: 6px;
  background: #fbfdff;
}

.factory-fee-revision-group h4 {
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid #d7e5f0;
  color: #234e76;
  font-size: 13px;
}

.factory-fee-revision-row,
.factory-fee-revision-detail,
.factory-fee-revision-history-item > div {
  display: grid;
  grid-template-columns: minmax(82px, .65fr) minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px 12px;
  border-bottom: 1px solid #e3edf5;
  color: #355068;
  font-size: 12px;
  line-height: 1.55;
}

.factory-fee-revision-group > :last-child,
.factory-fee-revision-history-item > :last-child { border-bottom: 0; }
.factory-fee-revision-row b,
.factory-fee-revision-detail b,
.factory-fee-revision-history-item b { color: #24547d; }
.factory-fee-revision-row i,
.factory-fee-revision-detail i,
.factory-fee-revision-history-item i,
.factory-fee-revision-total i { color: #7b9ab4; font-style: normal; text-align: center; }
.factory-fee-revision-row strong,
.factory-fee-revision-detail strong,
.factory-fee-revision-history-item strong { color: #124f7e; }
.factory-fee-revision-total { display: flex; gap: 10px; align-items: center; padding: 10px 12px; color: #314f67; font-size: 13px; font-weight: 800; }
.factory-fee-revision-total strong { color: #0b6a4d; }
.factory-fee-revision-error { margin: 8px 0 0; color: #c23b3b; font-size: 12px; font-weight: 800; }
.factory-fee-revision-history-item { overflow: hidden; }
.factory-fee-revision-history-item header { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #eef6fb; color: #24547d; font-size: 13px; }
.factory-fee-revision-history-item header span { color: #6d8498; font-weight: 700; }
.factory-fee-revision-history-item > p { margin: 0; padding: 9px 12px; border-bottom: 1px solid #e3edf5; color: #526b81; font-size: 12px; }

@media (max-width: 760px) {
  .factory-fee-revision-row,
  .factory-fee-revision-detail,
  .factory-fee-revision-history-item > div { grid-template-columns: 1fr; gap: 4px; }
  .factory-fee-revision-row i,
  .factory-fee-revision-detail i,
  .factory-fee-revision-history-item i { text-align: left; }
}

.mail-confirm-card {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  border: 1px solid #9fb8d0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 22px 52px rgba(10, 30, 50, .28);
  overflow: hidden;
}

.dispatch-booking-prompt-card {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: #fff;
  color: #193f5f;
}
.dispatch-booking-prompt-card > header { position: relative; padding: 22px 28px 12px; font-size: 21px; }
.dispatch-booking-prompt-body { padding: 16px 28px 28px; }
.dispatch-booking-prompt-warning { padding: 14px 16px; border: 1px solid #ffd9a5; border-radius: 6px; background: #fff2df; color: #9f351a; font-weight: 750; line-height: 1.6; }
.dispatch-booking-prompt-order { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 20px 0; }
.dispatch-booking-prompt-order > span { margin-left: 12px; padding: 3px 9px; border: 1px solid #c3d9ec; border-radius: 4px; background: #f1f6fc; font-size: 12px; }
.dispatch-booking-prompt-body > label { display: block; font-weight: 750; margin-bottom: 8px; }
.dispatch-booking-prompt-body > label i { color: #c22; font-style: normal; }
.dispatch-booking-prompt-body > input { display: block; box-sizing: border-box; width: 100%; height: 44px; padding: 8px 12px; border: 1px solid #96b3cc; border-radius: 5px; font: inherit; color: inherit; }
.dispatch-booking-prompt-body > input:focus { outline: 2px solid #448dce; outline-offset: 1px; }
.dispatch-booking-prompt-remark { margin-top: 22px; padding: 16px 18px; border-radius: 5px; background: #eef4fa; }
.dispatch-booking-prompt-remark > strong { display: block; margin-bottom: 12px; }
.dispatch-booking-prompt-remark > div { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.dispatch-booking-prompt-error { margin-top: 14px; color: #b42318; white-space: pre-wrap; overflow-wrap: anywhere; }
.dispatch-booking-prompt-card > footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 18px 28px; border-top: 1px solid #dce5ee; }
.dispatch-booking-prompt-card > footer button { position: static; flex: 0 0 auto; width: auto; min-width: 92px; min-height: 38px; height: auto; margin: 0; padding: 7px 20px; white-space: nowrap; }
.dispatch-booking-prompt-card [hidden] { display: none !important; }
.dispatch-booking-prompt-card button:disabled { opacity: .6; cursor: wait; }
@media (max-width: 520px) {
  .dispatch-booking-prompt-card > header { padding: 18px 16px 8px; }
  .dispatch-booking-prompt-body { padding: 12px 16px 20px; }
  .dispatch-booking-prompt-card > footer { padding: 14px 16px; }
}

.mail-confirm-card.client-mail-card {
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
}

.hbl-update-mail-confirm-card {
  width: min(720px, calc(100vw - 32px));
}

.hbl-update-mail-confirm-body {
  display: grid;
  gap: 12px;
  padding-bottom: 14px;
}

.hbl-update-mail-intro {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #c9ddeb;
  border-left: 4px solid #2e6da4;
  border-radius: 7px;
  background: linear-gradient(120deg, #f8fcff, #edf6fc);
}

.hbl-update-mail-intro b {
  color: #1f527b;
  font-size: 14px;
  font-weight: 900;
}

.hbl-update-mail-intro span {
  color: #597287;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.65;
}

.hbl-update-mail-toggle {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 11px 14px;
  border: 1px solid #b9d1e3;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 4px 12px rgba(38, 81, 116, .06);
}

.hbl-update-mail-toggle > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hbl-update-mail-toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  flex: 0 0 40px;
  border: 1px solid #9eb5c6;
  border-radius: 999px;
  background: #c6d3dc;
  box-shadow: inset 0 1px 2px rgba(22, 52, 76, .16);
  transition: background .18s ease, border-color .18s ease;
}

.hbl-update-mail-toggle-track::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(19, 50, 74, .26);
  content: "";
  transition: transform .18s ease;
}

.hbl-update-mail-toggle > input:checked + .hbl-update-mail-toggle-track {
  border-color: #1f679d;
  background: linear-gradient(90deg, #2b83bd, #23669b);
}

.hbl-update-mail-toggle > input:checked + .hbl-update-mail-toggle-track::after {
  transform: translateX(18px);
}

.hbl-update-mail-toggle > input:focus-visible + .hbl-update-mail-toggle-track {
  outline: 3px solid rgba(53, 132, 187, .28);
  outline-offset: 2px;
}

.hbl-update-mail-toggle > span:last-child {
  display: grid;
  gap: 2px;
}

.hbl-update-mail-toggle strong {
  color: #234863;
  font-size: 14px;
  font-weight: 900;
}

.hbl-update-mail-toggle em {
  color: #647c8e;
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.45;
}

.hbl-update-mail-recipient-panel {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid #c6d8e6;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
  transition: opacity .18s ease, filter .18s ease;
}

.hbl-update-mail-recipient-panel.is-disabled {
  opacity: .52;
  filter: grayscale(.28);
}

.hbl-update-mail-toggle.is-locked,
.hbl-update-mail-recipient-panel.is-locked {
  border-color: #d9be7b;
  background: linear-gradient(120deg, #fffdf7, #fff8e8);
}

.hbl-update-mail-toggle.is-locked .hbl-update-mail-toggle-track {
  border-color: #a97a22;
  background: linear-gradient(90deg, #c58b27, #a8701b);
}

.hbl-update-mail-recipient-panel.is-locked header small {
  border-color: #e0c48a;
  background: #fff4d8;
  color: #825c18;
}

.hbl-update-mail-recipient-panel header,
.hbl-update-mail-internal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hbl-update-mail-recipient-panel header > span,
.hbl-update-mail-internal > span {
  color: #315d80;
  font-size: 13px;
  font-weight: 900;
}

.hbl-update-mail-recipient-panel header small {
  padding: 3px 8px;
  border: 1px solid #bdd4e4;
  border-radius: 999px;
  background: #edf6fc;
  color: #39739c;
  font-size: 11px;
  font-weight: 850;
}

.hbl-update-mail-recipient-panel textarea {
  width: 100%;
  min-height: 68px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid #9fbcd2;
  border-radius: 5px;
  background: #fff;
  color: #213f55;
  font: 650 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  box-shadow: inset 0 1px 3px rgba(27, 65, 94, .07);
}

.hbl-update-mail-recipient-panel textarea:focus {
  border-color: #3c88bd;
  outline: 3px solid rgba(74, 144, 190, .16);
}

.hbl-update-mail-recipient-panel p {
  margin: 0;
  color: #647b8b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
}

.hbl-update-mail-internal {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px dashed #c1d4e2;
  border-radius: 5px;
  background: #f1f7fb;
}

.hbl-update-mail-internal strong {
  color: #45687f;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-align: right;
}

.hbl-update-mail-error {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #e3aaaa;
  border-radius: 5px;
  background: #fff4f4;
  color: #b43136;
  font-size: 12px;
  font-weight: 800;
}

.hbl-update-mail-confirm-body dl small {
  display: block;
  margin-top: 4px;
  color: #60798c;
  font-size: 11px;
  font-weight: 650;
}

.factory-fee-mail-confirm-card {
  width: min(660px, calc(100vw - 32px));
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

.factory-fee-mail-confirm-card .mail-confirm-head {
  background: linear-gradient(180deg, #fbfdff 0%, #e6f1fa 100%);
}

.factory-fee-mail-confirm-card .mail-confirm-head span {
  color: #5a7590;
  letter-spacing: .08em;
}

.factory-fee-mail-confirm-card .mail-confirm-head strong {
  font-size: 21px;
  font-weight: 850;
  letter-spacing: 0;
}

.factory-fee-mail-confirm-card .mail-confirm-body dt,
.factory-fee-mail-confirm-card .mail-confirm-body dd {
  font-size: 14px;
  line-height: 1.55;
}

.factory-fee-mail-confirm-card .mail-confirm-body dd {
  font-weight: 650;
}

.mail-confirm-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 1px solid #abc2d7;
  border-radius: 5px;
  background: linear-gradient(#ffffff, #edf5fb);
  color: #204b70;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(36, 66, 94, .12);
}

.mail-confirm-head {
  padding: 18px 56px 16px 20px;
  border-bottom: 1px solid #c6d7e5;
  background: linear-gradient(#fafdff, #eaf4fb);
}

.mail-confirm-head span {
  display: block;
  color: #5f7487;
  font-size: 12px;
  font-weight: 900;
}

.mail-confirm-head strong {
  display: block;
  margin-top: 3px;
  color: #173f63;
  font-size: 20px;
  font-weight: 950;
}

.mail-confirm-body {
  padding: 18px 20px 12px;
}

.mail-confirm-target {
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid #d3e0ea;
  border-radius: 5px;
  background: #f8fbfd;
  color: #315069;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.65;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.mail-confirm-body dl {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  margin: 0;
  border: 1px solid #c8d8e5;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.mail-confirm-body dt,
.mail-confirm-body dd {
  min-height: 42px;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #dce7f0;
  font-size: 13px;
}

.mail-confirm-body dt {
  background: #eef6fb;
  color: #315a7c;
  font-weight: 950;
}

.mail-confirm-body dd {
  color: #23394d;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.default-confirm-modal .mail-confirm-body dd {
  white-space: pre-line;
  font-weight: 650;
  line-height: 1.7;
  letter-spacing: .01em;
}

.default-confirm-impact-card {
  border: 1px solid #c7d8e6;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}

.default-confirm-impact-intro,
.default-confirm-impact-detail {
  margin: 0;
  color: #29475f;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.7;
}

.default-confirm-impact-intro {
  padding: 14px 16px 12px;
  border-bottom: 1px solid #e0e9f0;
  background: #f8fbfd;
}

.default-confirm-impact-card ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.default-confirm-impact-card li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 10px 16px;
  border-bottom: 1px solid #e5edf3;
}

.default-confirm-impact-card li:last-child {
  border-bottom: 0;
}

.default-confirm-impact-card li > span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid #b8cfdf;
  border-radius: 999px;
  background: #edf6fc;
  color: #27658f;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.default-confirm-impact-card li > strong {
  color: #263f54;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.65;
}

.default-confirm-impact-card li.danger > span {
  border-color: #e5b0b0;
  background: #fff0f0;
  color: #b83232;
}

.default-confirm-impact-card li.info > span {
  border-color: #b7d3e6;
  background: #eef7fd;
  color: #23658e;
}

.default-confirm-impact-card li.action > span {
  border-color: #c7c2e6;
  background: #f3f1ff;
  color: #5b4fa4;
}

.default-confirm-impact-detail {
  padding: 12px 16px;
  border-top: 1px solid #e0e9f0;
  background: #fbfdff;
  color: #60788c;
  font-size: 12px;
}

@media (max-width: 560px) {
  .hbl-update-mail-confirm-card {
    width: min(100vw - 18px, 720px);
    max-height: calc(100vh - 18px);
    overflow-y: auto;
  }

  .hbl-update-mail-confirm-body {
    padding: 14px 12px 12px;
  }

  .hbl-update-mail-internal {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .hbl-update-mail-internal strong {
    text-align: left;
  }

  .default-confirm-impact-card li {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .default-confirm-impact-card li > span {
    justify-self: start;
  }
}

.mail-confirm-body dt:last-of-type,
.mail-confirm-body dd:last-of-type {
  border-bottom: 0;
}

.mail-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
}

.mail-confirm-actions .default-confirm-btn,
.mail-confirm-actions .default-cancel-btn {
  position: static;
  right: auto;
  bottom: auto;
  width: auto;
  min-width: 96px;
  height: 36px;
  min-height: 36px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 900;
}

.mail-confirm-actions .default-cancel-btn {
  border: 1px solid #aebfd0;
  border-bottom-color: #8da1b4;
  background: linear-gradient(#ffffff 0%, #f2f7fb 52%, #ddeaf4 100%);
  color: #294761;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 0 #a9bed1,
    0 8px 16px rgba(42, 70, 96, .1);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.mail-confirm-actions .default-cancel-btn:hover,
.mail-confirm-actions .default-confirm-btn:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
}

.base-readonly-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #bac9d7;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #edf3f8);
  color: #5c7083;
  font-size: 12px;
  font-weight: 900;
}

.fee-type-field select,
.currency-rate-field select {
  min-height: 38px;
  border: 1px solid #aebdcb;
  border-bottom-color: #8fa2b5;
  border-radius: 4px;
  background:
    linear-gradient(#ffffff 0%, #f8fbfd 48%, #edf3f8 100%);
  color: #1d2b39;
  font-size: 14px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 4px 10px rgba(38, 59, 82, .08);
}

.supplier-mbl-board {
  display: grid;
  gap: 14px;
}

.supplier-mbl-card {
  padding: 14px;
  border: 1px solid #b7cbe0;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(244, 249, 253, .96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 8px 18px rgba(31, 55, 75, .07);
}

.supplier-mbl-card h4 {
  margin: 0 0 12px;
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 900;
}

.supplier-mbl-grid {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  align-items: stretch;
}

.supplier-mbl-grid .factory-field:last-child {
  grid-column: 1 / -1;
}

.free-time-edit-grid {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
}

.free-time-dest-section {
  padding: 14px;
  border: 1px solid #c4d3e1;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(31, 55, 75, .06);
}

.free-time-dest-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.free-time-dest-head strong {
  color: var(--blue-dark);
  font-size: 15px;
  font-weight: 900;
}

.free-time-dest-head span {
  color: #6b7f93;
  font-size: 12px;
  font-weight: 800;
}

.free-time-dest-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.related-list {
  border: 1px solid var(--line);
  background: #fff;
}

.related-list-row {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 12px;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid #d9e4ef;
}

.related-list-row:last-child {
  border-bottom: 0;
}

.related-list-row span {
  color: #2e3f52;
  font-weight: 800;
}

.related-list-row strong {
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #c8d2dd;
  border-radius: 999px;
  background: #f3f6f9;
  color: #68798a;
  font-size: 12px;
}

.related-list-row strong.on {
  border-color: #92c7b1;
  background: #edf9f4;
  color: #226a57;
}

.legacy-subscribe {
  position: relative;
  min-height: 300px;
  padding: 8px 0 62px;
  background: #fff;
}

.subscribe-row {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 26px;
  color: #333;
  font-size: 14px;
}

.subscribe-row-imp {
  color: #c0392b;
  font-weight: 900;
}

.bigcbk {
  width: 18px;
  height: 18px;
  transform: scale(1.8);
  transform-origin: center;
  margin-right: 8px;
}

.default-confirm-btn {
  position: absolute;
  right: 22px;
  bottom: 14px;
  width: 88px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #3f85b4;
  border-bottom-color: #1d638e;
  border-radius: 5px;
  background: linear-gradient(#66add8 0%, #3c91c4 52%, #2878ad 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -2px 0 rgba(13, 80, 123, .22),
    0 2px 0 #1e668f,
    0 7px 13px rgba(31, 94, 135, .17);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.default-confirm-btn span {
  font-weight: 900;
}

/* Fallback for legacy modal actions that were previously rendered as browser-default controls. */
.default-cancel-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid #a7bfd2;
  border-bottom-color: #7897af;
  border-radius: 5px;
  background: linear-gradient(#ffffff 0%, #f1f6fa 54%, #dce9f2 100%);
  color: #294c68;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 2px 0 #a5bbce,
    0 7px 13px rgba(45, 79, 106, .11);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.default-confirm-btn:not(:disabled):hover,
.default-cancel-btn:not(:disabled):hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.default-confirm-btn:not(:disabled):active,
.default-cancel-btn:not(:disabled):active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 2px rgba(20, 70, 104, .18),
    0 1px 0 rgba(72, 122, 155, .72);
}

.default-confirm-btn:focus-visible,
.default-cancel-btn:focus-visible {
  outline: 3px solid rgba(50, 137, 190, .26);
  outline-offset: 2px;
}

.default-confirm-btn:disabled,
.default-cancel-btn:disabled {
  cursor: not-allowed;
  filter: grayscale(.28);
  opacity: .58;
  transform: none;
}

.base-edit-form {
  min-height: 420px;
  overflow: auto;
  padding: 18px 22px 88px;
  background:
    linear-gradient(180deg, #f7fafc, #eef4f8);
}

.base-edit-tabs {
  position: sticky;
  top: -18px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -18px -22px 18px;
  padding: 14px 22px 12px;
  border-bottom: 1px solid #c9d7e3;
  background: linear-gradient(#fdfefe, #edf4f9);
  box-shadow: 0 6px 14px rgba(37, 64, 86, .06);
}

.base-edit-tabs button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #a9bdcf;
  border-bottom-color: #7894ad;
  border-radius: 5px;
  background: linear-gradient(#ffffff, #edf4f8);
  color: #284f78;
  padding: 0 14px;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 0 #c5d2df;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.base-tab-badge {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(47, 96, 158, .36);
  border-radius: 999px;
  background: linear-gradient(#ffffff, #e9f2fb);
  color: #1f578e;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.base-edit-tabs button.active .base-tab-badge {
  border-color: rgba(255, 255, 255, .65);
  background: linear-gradient(#ffffff, #dcecff);
  color: #204c80;
  text-shadow: none;
}

.base-edit-tabs button.active {
  border-color: #2f609e;
  border-bottom-color: #204c80;
  background: linear-gradient(#4c86bd, #2f609e);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 2px 0 #204c80,
    0 8px 15px rgba(47, 96, 158, .18);
}

.base-edit-tabs button:not(.active):hover {
  transform: translateY(-1px);
  background: linear-gradient(#ffffff, #f7fbff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #b7c8d7,
    0 9px 15px rgba(37, 64, 86, .12);
}

.base-edit-tab {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #d2dde7;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 252, 254, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 10px 22px rgba(29, 54, 76, .07);
}

.consignee-mail-forwarding {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.consignee-forwarding-setting {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 38px;
}

.consignee-forwarding-setting > span {
  color: #405b73;
  font-weight: 900;
  text-align: right;
}

@media (max-width: 600px) {
  .consignee-mail-forwarding .base-field,
  .consignee-forwarding-setting {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .consignee-mail-forwarding .base-field > span,
  .consignee-forwarding-setting > span {
    justify-content: flex-start;
    text-align: left;
    min-height: 24px;
  }
}

.consignee-task-routing {
  display: grid;
  gap: 16px;
}

.consignee-task-routing-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid #c7d7e5;
  border-left: 4px solid #bd842c;
  border-radius: 6px;
  background: linear-gradient(135deg, #ffffff, #f2f7fb);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 6px 14px rgba(27, 57, 82, .08);
}

.consignee-task-routing-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #c99a52;
  border-radius: 50%;
  background: linear-gradient(#fffdf8, #f1dfb7);
  color: #8d5d17;
  font-size: 18px;
  font-weight: 1000;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #d4b477;
}

.consignee-task-routing-head span {
  display: block;
  color: #a06c21;
  font-size: 11px;
  font-weight: 900;
}

.consignee-task-routing-head strong {
  display: block;
  margin-top: 2px;
  color: #1d4167;
  font-size: 18px;
}

.consignee-task-routing-head p {
  margin: 5px 0 0;
  color: #68809a;
  font-size: 12px;
  line-height: 1.6;
}

.consignee-task-routing-head > b {
  align-self: start;
  border: 1px solid #d4b47b;
  border-radius: 999px;
  background: #fff8e8;
  color: #94641d;
  padding: 5px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.consignee-task-routing-head > b.ready {
  border-color: #8dc3a8;
  background: #effaf4;
  color: #277653;
}

.consignee-task-routing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.consignee-task-routing-person {
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid #d1deea;
  border-radius: 6px;
  background: linear-gradient(#fff, #f6f9fc);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(38, 71, 98, .05);
}

.consignee-task-routing-person > span {
  color: #66809b;
  font-size: 12px;
  font-weight: 800;
}

.consignee-task-routing-person > span b {
  color: #c74b45;
  margin-left: 3px;
}

.consignee-task-routing-person strong {
  color: #204c79;
  font-size: 17px;
}

.consignee-task-routing-person small {
  color: #7188a0;
  font-size: 12px;
}

.consignee-task-routing-person select {
  min-height: 36px;
  border: 1px solid #9cb8d2;
  border-radius: 5px;
  background: #fff;
  color: #234f7d;
  padding: 0 10px;
  font-weight: 800;
  box-shadow: inset 0 1px 3px rgba(46, 91, 130, .08), 0 1px 0 #fff;
}

.consignee-task-routing-actions {
  display: flex;
  justify-content: flex-end;
}

.consignee-task-routing-actions .blue-action-button {
  min-width: 172px;
}

@media (max-width: 720px) {
  .consignee-task-routing-head,
  .consignee-task-routing-grid {
    grid-template-columns: 1fr;
  }

  .consignee-task-routing-head > b {
    justify-self: start;
  }
}

.factory-edit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.factory-field input,
.factory-field select,
.factory-field textarea {
  font-weight: 800;
}

.factory-stack-list {
  display: grid;
  gap: 14px;
}

.factory-repeat-shell,
.factory-related-layout,
.factory-guarantee-panel {
  display: grid;
  gap: 14px;
}

.factory-repeat-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #c6d6e4;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff, #f5f9fc);
  padding: 12px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 8px 18px rgba(30, 61, 90, .07);
}

.factory-repeat-toolbar strong {
  display: block;
  color: #173b64;
  font-size: 14px;
  font-weight: 1000;
}

.factory-repeat-toolbar span {
  display: block;
  margin-top: 3px;
  color: #65798c;
  font-size: 12px;
  font-weight: 800;
}

.factory-repeat-toolbar button,
.factory-repeat-remove,
.factory-upload-button {
  min-width: 34px;
  min-height: 34px;
  border: 1px solid #a9bdcf;
  border-bottom-color: #7894ad;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #edf4f8);
  color: #284f78;
  font-size: 17px;
  font-weight: 1000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 0 #c5d2df;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.factory-repeat-toolbar button:hover,
.factory-repeat-remove:hover,
.factory-upload-button:hover {
  transform: translateY(-1px);
  background: linear-gradient(#ffffff, #f7fbff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #b7c8d7,
    0 9px 15px rgba(37, 64, 86, .12);
}

.factory-repeat-toolbar button:disabled,
.factory-repeat-remove:disabled,
.factory-upload-button.disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
}

.factory-repeat-toolbar em {
  color: #536a81;
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
}

.factory-edit-card {
  border: 1px solid #d2dde7;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 252, 254, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 8px 18px rgba(29, 54, 76, .06);
  padding: 14px 16px 16px;
}

.factory-edit-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  margin: -2px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dbe5ee;
  color: #284f78;
}

.factory-repeat-remove {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  color: #8a3a32;
}

.factory-edit-card-head strong {
  font-size: 14px;
  font-weight: 1000;
}

.factory-id-list {
  display: grid;
  gap: 10px;
}

.factory-id-list-body {
  display: grid;
  gap: 10px;
}

.factory-id-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 56px;
  gap: 10px;
  align-items: start;
}

.factory-id-row .base-field {
  margin: 0;
}

.factory-id-row > .factory-repeat-remove {
  width: 56px;
}


.factory-upload-control {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: center;
}

.factory-guarantee-download {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #c6d6e4;
  border-radius: 7px;
  background: linear-gradient(#ffffff, #f4f8fb);
  padding: 10px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 6px 14px rgba(30, 61, 90, .07);
}

.factory-guarantee-download span {
  min-width: 0;
  color: #173b64;
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-guarantee-download .blue-action-button {
  width: auto;
  min-width: 128px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.factory-guarantee-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.factory-guarantee-delete {
  min-width: 114px;
  height: 36px;
  padding: 0 13px;
  border: 1px solid #d97070;
  border-radius: 6px;
  background: #fff8f8;
  color: #b63e3e;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.factory-guarantee-delete:hover:not(:disabled) {
  background: #fde9e9;
}

.factory-guarantee-delete:disabled {
  cursor: wait;
  opacity: .62;
}

.factory-upload-button {
  position: relative;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 12px;
  font-size: 13px;
  text-align: center;
}

.factory-upload-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.factory-guarantee-badge {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #2f609e;
  border-radius: 50%;
  background: linear-gradient(#4c86bd, #2f609e);
  color: #fff;
  font-size: 15px;
  font-weight: 1000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 4px 10px rgba(47, 96, 158, .22);
}

.factory-guarantee-flow-list {
  display: grid;
  gap: 9px;
}

.factory-release-card {
  width: min(1120px, calc(100vw - 32px));
}

.factory-release-card.is-compact .booking-order-form {
  padding-top: 12px;
}

.factory-release-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 13px 16px;
  border: 1px solid #bcd2e5;
  border-radius: 9px;
  background: linear-gradient(135deg, #f8fcff 0%, #edf6fc 100%);
  box-shadow: inset 4px 0 0 #2f78aa;
}

.factory-release-summary div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.factory-release-summary span,
.factory-release-summary small {
  color: #5a738a;
  font-size: 12px;
  font-weight: 850;
}

.factory-release-summary strong {
  color: #164c74;
  font-size: 17px;
  font-weight: 1000;
}

.factory-release-readonly {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -3px 0 14px;
  padding: 9px 12px;
  border: 1px solid #d4dee8;
  border-radius: 7px;
  background: #f8fafc;
  color: #5d7082;
  font-size: 12px;
  font-weight: 800;
}

.factory-release-readonly b {
  flex: none;
  color: #315c80;
}

.factory-release-list-head,
.factory-guarantee-flow-head {
  display: grid;
  grid-template-columns: minmax(170px, 1.7fr) minmax(130px, 1.1fr) 112px 72px 126px 34px;
  align-items: center;
  gap: 10px;
}

.factory-release-list-head {
  min-height: 32px;
  padding: 0 13px;
  color: #708398;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .02em;
}

.factory-guarantee-flow-row {
  overflow: hidden;
  border: 1px solid #c4d7e8;
  border-radius: 8px;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 5px 14px rgba(31, 69, 104, .06);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.factory-guarantee-flow-row.is-expanded {
  border-color: #8fb7d4;
  box-shadow: 0 9px 22px rgba(31, 69, 104, .1);
}

.factory-guarantee-flow-head {
  min-height: 56px;
  padding: 8px 13px;
  background: linear-gradient(180deg, #fff 0%, #f8fbfd 100%);
}

.factory-release-factory {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.factory-release-factory strong {
  overflow: hidden;
  color: #143f68;
  font-size: 14px;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-release-factory small {
  color: #8697a7;
  font-size: 10px;
  font-weight: 850;
}

.factory-release-cell {
  min-width: 0;
  overflow: hidden;
  color: #47647d;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-release-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b9cfe2;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #eef6fb);
  color: #315c83;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.factory-release-status.is-authorized {
  border-color: #9ccbb5;
  background: linear-gradient(#f4fff9, #e2f5eb);
  color: #17613e;
}

.factory-release-status.is-waiting {
  border-color: #dfc58d;
  background: linear-gradient(#fffdf7, #fff3d9);
  color: #835a14;
}

.factory-release-toggle {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #b8cede;
  border-radius: 6px;
  background: linear-gradient(#fff, #edf5fa);
  color: #2c6289;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  transform: rotate(90deg);
  transition: transform .16s ease, background .16s ease;
}

.factory-guarantee-flow-row.is-expanded .factory-release-toggle {
  transform: rotate(-90deg);
  background: #e7f3fa;
}

.factory-release-detail {
  display: none;
  padding: 15px 16px 17px;
  border-top: 1px solid #dce8f2;
  background: linear-gradient(180deg, #fbfdff, #f6fafd);
}

.factory-guarantee-flow-row.is-expanded .factory-release-detail {
  display: block;
}

.factory-release-detail select:disabled,
.factory-release-detail input:disabled {
  opacity: 1;
  color: #435a70;
  -webkit-text-fill-color: #435a70;
  cursor: default;
}

.factory-release-long-note,
.factory-release-evidence {
  margin-top: 11px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.65;
}

.factory-release-long-note {
  border: 1px solid #c6d9e8;
  background: #f4f9fd;
  color: #41657f;
  padding: 9px 12px;
}

.factory-release-evidence {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #587189;
}

.factory-release-evidence span {
  font-weight: 950;
}

.factory-release-evidence a {
  max-width: 300px;
  overflow: hidden;
  border: 1px solid #aac8df;
  border-radius: 999px;
  background: #f6fbff;
  color: #1b608e;
  padding: 4px 10px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-release-evidence a:hover {
  border-color: #5f9cc5;
  background: #eaf6fd;
}

.factory-guarantee-flow-row .booking-file-field small {
  min-height: 18px;
  color: #55718b;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-release-row-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

@media (max-width: 860px) {
  .factory-repeat-toolbar,
  .factory-upload-control,
  .factory-id-row {
    grid-template-columns: 1fr;
  }

  .factory-release-list-head {
    display: none;
  }

  .factory-guarantee-flow-head {
    grid-template-columns: minmax(0, 1fr) auto 32px;
  }

  .factory-release-cell {
    display: none;
  }

  .factory-release-summary {
    align-items: flex-start;
    flex-direction: column;
  }

}

@media (max-width: 560px) {
  .factory-guarantee-flow-head {
    grid-template-columns: minmax(0, 1fr) auto 30px;
  }

  .factory-release-status {
    grid-column: 2;
    justify-self: start;
  }

  .factory-release-toggle {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

.base-field {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.base-field span {
  min-height: 38px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #405b73;
  font-weight: 900;
  text-align: right;
}

.base-field b {
  margin-left: 2px;
  color: #b03535;
}

.base-field input,
.base-field select,
.base-field textarea {
  min-height: 38px;
  border: 1px solid #aebfd0;
  border-radius: 5px;
  background: linear-gradient(#ffffff, #fbfdff);
  padding: 0 11px;
  color: #22364a;
  box-shadow:
    inset 0 1px 2px rgba(28, 52, 74, .08),
    0 1px 0 rgba(255, 255, 255, .9);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.base-field textarea {
  min-height: 108px;
  padding: 10px 11px;
  resize: vertical;
}

.base-field input:focus,
.base-field select:focus,
.base-field textarea:focus {
  outline: none;
  border-color: #3c7fbb;
  background: #fff;
  box-shadow:
    inset 0 1px 2px rgba(28, 52, 74, .06),
    0 0 0 3px rgba(63, 132, 190, .16),
    0 6px 14px rgba(47, 96, 158, .08);
}

.base-field em {
  align-self: center;
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.legacy-fieldset {
  display: grid;
  gap: 10px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--line);
}

.legacy-port-row {
  display: grid;
  grid-template-columns: 150px 110px minmax(90px, 160px) 110px 130px;
  gap: 10px;
  align-items: center;
}

.legacy-port-row label {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  color: #53677c;
  font-weight: 900;
  text-align: right;
}

.legacy-port-row input,
.legacy-port-row select {
  min-height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: #fff;
  padding: 0 8px;
}

.legacy-port-row select {
  width: 74px;
}

.legacy-port-row span {
  color: #42586f;
  font-weight: 800;
}

.freight-editor {
  display: grid;
  gap: 13px;
}

.freight-hero {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 118px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid #b8cde0;
  border-radius: 8px;
  background:
    linear-gradient(100deg, rgba(47, 96, 158, .12), rgba(255, 255, 255, .80) 52%),
    linear-gradient(#ffffff, #eef6fb);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 14px 34px rgba(27, 58, 88, .12);
}

.freight-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(#2f609e, #76a7ca);
}

.freight-hero-mark {
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid #8eb0cd;
  border-radius: 7px;
  background:
    linear-gradient(#ffffff, #e7f1f8);
  color: #1f527f;
  font-size: 16px;
  font-weight: 950;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 5px 12px rgba(35, 76, 112, .14);
}

.freight-hero-copy {
  min-width: 0;
}

.freight-hero-copy span {
  display: block;
  color: #668099;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.freight-hero-copy strong {
  display: block;
  margin-top: 4px;
  color: #173b64;
  font-size: 21px;
  font-weight: 950;
  line-height: 1.25;
}

.freight-hero-copy p {
  margin: 5px 0 0;
  color: #5f7285;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.freight-status {
  justify-self: end;
  min-width: 98px;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #c5d2df;
  border-radius: 7px;
  background: linear-gradient(#ffffff, #eef3f7);
  color: #708196;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 4px 10px rgba(35, 64, 90, .08);
}

.freight-status.on {
  border-color: #83b99f;
  background:
    linear-gradient(100deg, rgba(40, 132, 95, .14), rgba(255, 255, 255, .94)),
    #f4fbf7;
  color: #247258;
}

.freight-status span {
  font-size: 18px;
  font-weight: 950;
}

.freight-status b {
  font-size: 12px;
  font-weight: 900;
}

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

.freight-control-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.freight-control {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #cad9e6;
  border-radius: 7px;
  background:
    linear-gradient(#ffffff, #f7fafc);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 8px 18px rgba(28, 58, 86, .07);
}

.freight-control span {
  color: #536a81;
  font-size: 12px;
  font-weight: 950;
}

.freight-control input,
.freight-control select,
.freight-port-row input,
.freight-port-row select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid #9fb6ca;
  border-radius: 5px;
  background: linear-gradient(#ffffff, #fbfdff);
  color: #22364a;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 800;
  box-shadow:
    inset 0 1px 2px rgba(28, 52, 74, .08),
    0 1px 0 rgba(255, 255, 255, .9);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.freight-control input:focus,
.freight-control select:focus,
.freight-port-row input:focus,
.freight-port-row select:focus {
  outline: none;
  border-color: #3c7fbb;
  background: #ffffff;
  box-shadow:
    inset 0 1px 2px rgba(28, 52, 74, .06),
    0 0 0 3px rgba(63, 132, 190, .15);
}

.freight-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.freight-input-wrap em {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d6e2ec;
  border-radius: 999px;
  background: #eef5fb;
  color: #55718a;
  padding: 0 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.freight-port-board {
  overflow: hidden;
  border: 1px solid #c4d5e3;
  border-radius: 8px;
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 12px 28px rgba(30, 61, 90, .10);
}

.freight-port-head {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid #d5e2ec;
  background:
    linear-gradient(90deg, rgba(47, 96, 158, .10), rgba(255, 255, 255, .90)),
    #f7fbfd;
}

.freight-port-head strong {
  display: block;
  color: #1d456d;
  font-size: 16px;
  font-weight: 950;
}

.freight-port-head span {
  display: block;
  margin-top: 4px;
  color: #687b8d;
  font-size: 12px;
  font-weight: 800;
}

.freight-port-tools {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.freight-port-head b {
  min-width: 86px;
  border: 1px solid #b9cce0;
  border-radius: 999px;
  background: #eef5fb;
  color: #2f5f9f;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 950;
  text-align: center;
  white-space: nowrap;
}

.freight-port-head b span {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.freight-port-tools button,
.freight-port-remove {
  display: inline-grid;
  place-items: center;
  border: 1px solid #9fb9d0;
  border-bottom-color: #789ab6;
  border-radius: 5px;
  background: linear-gradient(#ffffff, #eaf3f9);
  color: #285981;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 0 #c0d2e1,
    0 6px 12px rgba(35, 76, 112, .10);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.freight-port-tools button {
  width: 34px;
  height: 30px;
  font-size: 18px;
  line-height: 1;
}

.freight-port-remove {
  width: 30px;
  height: 34px;
  font-size: 19px;
}

.freight-port-tools button:hover,
.freight-port-remove:hover {
  background: linear-gradient(#ffffff, #f6fbff);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #b4c8d8,
    0 9px 16px rgba(35, 76, 112, .14);
}

.freight-port-tools button:disabled,
.freight-port-remove:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.freight-port-grid {
  display: grid;
  gap: 7px;
  padding: 10px;
  background:
    linear-gradient(#ffffff, #f7fafc);
}

.freight-port-grid-head,
.freight-port-row {
  display: grid;
  gap: 8px;
  align-items: center;
}

.freight-port-grid-jx .freight-port-grid-head,
.freight-port-row-jx {
  grid-template-columns: 44px 98px 112px minmax(120px, 1fr) minmax(100px, .8fr) minmax(120px, .9fr) 34px;
}

.freight-port-grid-px .freight-port-grid-head,
.freight-port-row-px {
  grid-template-columns: 44px 98px 112px minmax(120px, 1fr) minmax(130px, .9fr) 34px;
}

.freight-port-grid-head {
  padding: 0 8px;
  color: #718397;
  font-size: 11px;
  font-weight: 950;
}

.freight-port-row {
  min-height: 46px;
  padding: 7px;
  border: 1px solid #d5e2ec;
  border-radius: 7px;
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 4px 10px rgba(30, 61, 90, .05);
}

.freight-port-row:hover {
  border-color: #adc6dc;
  background:
    linear-gradient(90deg, rgba(47, 96, 158, .05), rgba(255, 255, 255, .96)),
    #ffffff;
}

.freight-rule-no {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #adc6dc;
  border-radius: 50%;
  background: linear-gradient(#ffffff, #eaf2f8);
  color: #2d5d88;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 3px 8px rgba(33, 67, 98, .10);
}

.freight-port-name {
  min-height: 34px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d8e4ee;
  border-radius: 5px;
  background: #f8fbfd;
  color: #42586f;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.freight-port-lookup {
  display: block;
  min-width: 0;
}

.freight-port-lookup input[type="text"] {
  display: block;
}

.port-portal-cell {
  display: grid;
  gap: 3px;
  max-width: 180px;
  overflow: hidden;
}

.port-portal-cell strong {
  display: block;
  overflow: hidden;
  color: #1d456d;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.port-portal-cell span {
  display: block;
  overflow: hidden;
  color: #6a7f92;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.port-edit-hero {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #b8cde0;
  border-radius: 8px;
  background:
    linear-gradient(100deg, rgba(47, 96, 158, .12), rgba(255, 255, 255, .86) 54%),
    linear-gradient(#ffffff, #eef6fb);
  padding: 14px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 14px 34px rgba(27, 58, 88, .12);
}

.port-edit-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(#2f609e, #76a7ca);
}

.port-edit-code {
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid #8eb0cd;
  border-radius: 7px;
  background: linear-gradient(#ffffff, #e7f1f8);
  color: #1f527f;
  font-size: 16px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 5px 12px rgba(35, 76, 112, .14);
}

.port-edit-hero strong {
  display: block;
  color: #173b64;
  font-size: 21px;
  font-weight: 950;
}

.port-edit-hero span {
  display: block;
  margin-top: 5px;
  color: #5f7285;
  font-size: 13px;
  font-weight: 850;
}

.port-basic-grid,
.port-gps-grid {
  margin-top: 14px;
}

.port-portal-board,
.port-gps-board,
.port-gps-preview {
  display: grid;
  gap: 14px;
}

.port-portal-card .factory-edit-grid {
  grid-template-columns: minmax(160px, .8fr) minmax(260px, 1.2fr);
}

.port-gps-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #c4d5e3;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(47, 96, 158, .10), rgba(255, 255, 255, .90)),
    #f7fbfd;
  padding: 12px 14px;
  box-shadow: 0 8px 18px rgba(30, 61, 90, .07);
}

.port-gps-preview-head strong {
  display: block;
  color: #1d456d;
  font-size: 16px;
  font-weight: 950;
}

.port-gps-preview-head span {
  display: block;
  margin-top: 3px;
  color: #687b8d;
  font-size: 12px;
  font-weight: 850;
}

.port-gps-preview-list {
  border: 1px solid #d5e2ec;
  border-radius: 8px;
  background: #fff;
  padding: 0 12px;
}

.store-editor {
  display: grid;
  gap: 14px;
}

.store-hero {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 92px;
  gap: 14px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #b8cde0;
  border-radius: 8px;
  background:
    linear-gradient(100deg, rgba(47, 96, 158, .12), rgba(255, 255, 255, .82) 52%),
    linear-gradient(#ffffff, #eef6fb);
  padding: 14px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 14px 34px rgba(27, 58, 88, .12);
}

.store-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(#2f609e, #76a7ca);
}

.store-hero-mark {
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid #8eb0cd;
  border-radius: 7px;
  background: linear-gradient(#ffffff, #e7f1f8);
  color: #1f527f;
  font-size: 15px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 5px 12px rgba(35, 76, 112, .14);
}

.store-hero span {
  display: block;
  color: #668099;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.store-hero strong {
  display: block;
  margin-top: 4px;
  color: #173b64;
  font-size: 21px;
  font-weight: 950;
}

.store-hero p {
  margin: 5px 0 0;
  color: #5f7285;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.store-count {
  justify-self: end;
  min-width: 82px;
  border: 1px solid #b9cce0;
  border-radius: 999px;
  background: #eef5fb;
  color: #2f5f9f;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 950;
  text-align: center;
  white-space: nowrap;
}

.store-count span {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.store-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #c4d5e3;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(47, 96, 158, .10), rgba(255, 255, 255, .90)),
    #f7fbfd;
  padding: 12px 14px;
  box-shadow: 0 8px 18px rgba(30, 61, 90, .07);
}

.store-toolbar strong {
  display: block;
  color: #1d456d;
  font-size: 16px;
  font-weight: 950;
}

.store-toolbar span {
  display: block;
  margin-top: 4px;
  color: #687b8d;
  font-size: 12px;
  font-weight: 800;
}

.store-toolbar button,
.store-address-remove {
  display: inline-grid;
  place-items: center;
  border: 1px solid #9fb9d0;
  border-bottom-color: #789ab6;
  border-radius: 5px;
  background: linear-gradient(#ffffff, #eaf3f9);
  color: #285981;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 0 #c0d2e1,
    0 6px 12px rgba(35, 76, 112, .10);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.store-toolbar button {
  width: 36px;
  height: 32px;
  font-size: 18px;
}

.store-address-remove {
  width: 32px;
  height: 34px;
  align-self: start;
  font-size: 19px;
}

.store-toolbar button:hover,
.store-address-remove:hover {
  background: linear-gradient(#ffffff, #f6fbff);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #b4c8d8,
    0 9px 16px rgba(35, 76, 112, .14);
}

.store-toolbar button:disabled,
.store-address-remove:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.store-address-list {
  display: grid;
  gap: 12px;
}

.store-address-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  gap: 12px;
  border: 1px solid #c4d5e3;
  border-radius: 8px;
  background:
    linear-gradient(#ffffff, #f7fafc);
  padding: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 10px 22px rgba(30, 61, 90, .08);
}

.store-address-index {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #adc6dc;
  border-radius: 50%;
  background: linear-gradient(#ffffff, #eaf2f8);
  color: #2d5d88;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 3px 8px rgba(33, 67, 98, .10);
}

.store-address-fields {
  display: grid;
  grid-template-columns: minmax(170px, .8fr) minmax(0, 1.4fr);
  gap: 10px;
}

.store-address-fields label,
.store-port-name {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.store-address-fields label.wide {
  grid-row: span 2;
}

.store-address-fields span,
.store-port-name span {
  color: #536a81;
  font-size: 12px;
  font-weight: 950;
}

.store-address-fields input,
.store-address-fields textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #9fb6ca;
  border-radius: 5px;
  background: linear-gradient(#ffffff, #fbfdff);
  color: #22364a;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 800;
  box-shadow:
    inset 0 1px 2px rgba(28, 52, 74, .08),
    0 1px 0 rgba(255, 255, 255, .9);
}

.store-address-fields input {
  min-height: 36px;
}

.store-address-fields textarea {
  min-height: 86px;
  padding: 9px 10px;
  resize: vertical;
}

.store-address-fields input:focus,
.store-address-fields textarea:focus {
  outline: none;
  border-color: #3c7fbb;
  background: #ffffff;
  box-shadow:
    inset 0 1px 2px rgba(28, 52, 74, .06),
    0 0 0 3px rgba(63, 132, 190, .15);
}

.store-port-name strong {
  min-height: 36px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d8e4ee;
  border-radius: 5px;
  background: #f8fbfd;
  color: #42586f;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .store-hero {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .store-count {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .store-address-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .freight-hero {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .freight-status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .freight-control-grid,
  .freight-control-grid.compact {
    grid-template-columns: 1fr;
  }

  .freight-port-board {
    overflow-x: auto;
  }

  .freight-port-grid {
    min-width: 820px;
  }
}

.base-edit-note {
  padding: 18px;
  border: 1px dashed #aebfd0;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #f3f7fb);
  color: var(--muted);
  font-weight: 800;
}

.edit-footer {
  min-height: 62px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-top: 1px solid #c2d0de;
  background:
    linear-gradient(180deg, #fbfdff, #edf4f9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 -8px 18px rgba(27, 50, 72, .06);
}

.edit-footer button {
  min-width: 96px;
  height: 38px;
  border: 1px solid #a7b9ca;
  border-bottom-color: #7d94aa;
  border-radius: 5px;
  background: linear-gradient(#ffffff, #eef4f8);
  color: #294b6f;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 0 #c0cfdd,
    0 8px 15px rgba(32, 53, 72, .1);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.edit-footer button.primary {
  border-color: #2c6da8;
  border-bottom-color: #1d4f82;
  background: linear-gradient(#67a6d2 0%, #3c83bd 46%, #2b669f 100%);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 3px 0 #1d4f82,
    0 10px 18px rgba(28, 82, 128, .18);
}

.edit-footer button:hover {
  transform: translateY(-1px);
  background: linear-gradient(#ffffff, #f8fbff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #afc0cf,
    0 10px 18px rgba(32, 53, 72, .14);
}

.edit-footer button.primary:hover {
  background: linear-gradient(#78b5dc 0%, #4a91c7 46%, #3273ad 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .46),
    0 4px 0 #1d4f82,
    0 12px 22px rgba(28, 82, 128, .24);
}

.client-edit-form input[readonly],
.client-edit-form select:disabled,
.client-edit-form input[type="checkbox"]:disabled {
  opacity: .68;
  cursor: not-allowed;
}

.client-record-files {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px dashed #aac0d2;
  border-radius: 6px;
  background: #f7fbff;
}

.client-record-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 24px;
  align-items: center;
}

.client-record-file-item {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #c5d5e2;
  border-radius: 4px;
  background: #fff;
}

.client-record-file-item button {
  border: 0;
  background: transparent;
  color: #c94040;
  cursor: pointer;
  font-weight: 900;
}

.client-record-upload {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 900;
}

.client-record-upload input[type="file"] {
  min-height: 38px;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #aec5d8;
  border-bottom-color: #8faec6;
  border-radius: 5px;
  background: linear-gradient(#ffffff 0%, #f4f8fc 100%);
  color: #38536a;
  padding: 4px 7px;
  font-size: 12px;
  font-weight: 800;
}

.order-entry-modal {
  align-items: center;
  justify-content: center;
  padding: 26px;
}

.order-entry-dialog {
  width: min(1180px, calc(100vw - 40px));
  max-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.order-update-reason-dialog {
  width: min(720px, calc(100vw - 44px));
  position: relative;
}

.order-update-reason-dialog.is-sending-mail {
  box-shadow:
    0 22px 48px rgba(20, 65, 105, .26),
    0 0 0 1px rgba(55, 127, 186, .18);
}

.order-update-reason-body {
  display: grid;
  gap: 16px;
  padding: 20px 22px 22px;
  overflow: auto;
  background:
    linear-gradient(180deg, rgba(248, 252, 255, .96), rgba(239, 246, 252, .9));
}

.order-update-message {
  border: 1px solid #bfd2e3;
  border-radius: 7px;
  background:
    linear-gradient(#ffffff, #f5f9fd);
  color: #153a5f;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 8px 18px rgba(41, 78, 112, .1);
}

.order-update-sending-state {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #8ebce0;
  border-bottom-color: #5e94c2;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eaf6ff 48%, #d8ecfa 100%);
  color: #174f82;
  padding: 13px 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 12px 22px rgba(34, 105, 164, .16);
}

.order-update-sending-state strong {
  display: block;
  font-size: 15px;
  font-weight: 950;
}

.order-update-sending-state small {
  display: block;
  margin-top: 3px;
  color: #3a6b92;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.order-update-sending-spinner,
.order-update-button-spinner {
  flex: 0 0 auto;
  border-radius: 50%;
  border: 3px solid rgba(46, 117, 178, .22);
  border-top-color: #2474b5;
  animation: order-update-spin .82s linear infinite;
}

.order-update-sending-spinner {
  width: 28px;
  height: 28px;
}

.order-update-button-spinner {
  width: 15px;
  height: 15px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, .38);
  border-top-color: #fff;
}

.order-update-reason-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  border: 1px solid #c4d6e6;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 12px 28px rgba(26, 55, 82, .11);
}

.order-update-reason-field {
  display: grid;
  gap: 7px;
}

.order-update-reason-field span {
  color: #244f78;
  font-size: 12px;
  font-weight: 950;
}

.order-update-reason-field select,
.order-update-reason-field input,
.order-update-reason-field textarea {
  width: 100%;
  border: 1px solid #afc7dc;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #f7fbff);
  color: #162f49;
  font-size: 14px;
  font-weight: 850;
  box-shadow: inset 0 1px 3px rgba(26, 64, 98, .08);
}

.order-update-reason-field select {
  min-height: 38px;
  padding: 0 10px;
}

.order-update-reason-field input {
  min-height: 38px;
  padding: 0 10px;
}

.order-update-reason-field textarea {
  min-height: 132px;
  resize: vertical;
  padding: 10px 12px;
  line-height: 1.6;
}

.order-update-reason-search {
  position: relative;
  grid-column: 1 / -1;
}

.order-update-reason-suggestions {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow: auto;
  border: 1px solid #a9c2d9;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(28, 70, 108, .18);
}

.order-update-reason-suggestions button {
  width: 100%;
  min-height: 34px;
  display: block;
  border: 0;
  border-bottom: 1px solid #e1ebf3;
  background: #fff;
  color: #173654;
  padding: 8px 11px;
  text-align: left;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.order-update-reason-suggestions button:hover {
  background: #eef6fc;
  color: #174f91;
}

.order-update-reason-suggestions mark {
  border-radius: 3px;
  background: #fff1a8;
  color: #153a5f;
  padding: 0 2px;
}

.order-update-manual {
  min-width: 92px;
  height: 36px;
  text-align: center;
}

.edit-footer button.is-sending,
.default-confirm-btn.is-sending {
  min-width: 128px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: #1e6fae;
  border-bottom-color: #154f82;
  background:
    linear-gradient(180deg, #54a4d8 0%, #237fbd 48%, #17649e 100%);
  color: #fff;
  cursor: progress;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 4px 0 #154f82,
    0 14px 24px rgba(30, 100, 160, .28);
}

.edit-footer button:disabled {
  cursor: not-allowed;
  opacity: .82;
}

@keyframes order-update-spin {
  to {
    transform: rotate(360deg);
  }
}

.order-update-manual-text,
.order-update-error {
  grid-column: 1 / -1;
}

.order-update-error {
  border: 1px solid #e6bdc0;
  border-radius: 6px;
  background: #fff6f6;
  color: #963b45;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 850;
}

.order-entry-form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.order-entry-body {
  flex: 1;
  overflow: auto;
  padding: 18px 22px 22px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
}

.order-entry-section {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #c9daeb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(39, 87, 129, .09);
}

.order-entry-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #173f67;
  font-size: 15px;
  font-weight: 900;
}

.order-entry-section-title span {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(180deg, #22b8e8 0%, #2f65a5 100%);
}

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

.order-period-panel {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.order-period-panel > label {
  grid-column: span 4;
}

.order-period-panel > .order-entry-date-pair {
  grid-column: span 3;
}

.order-period-panel > .order-transport-block {
  grid-column: span 6;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}

.order-period-panel > .order-vessel-stack {
  grid-column: 1 / -1;
}

.order-entry-grid label,
.order-period-common label,
.order-period-route-row label,
.order-period-ship-row label,
.order-entry-wide,
.order-transport-select {
  display: grid;
  gap: 6px;
  color: #355473;
  font-size: 12px;
  font-weight: 900;
}

.order-entry-grid label span,
.order-period-common label span,
.order-period-route-row label span,
.order-period-ship-row label span,
.order-entry-wide span,
.order-transport-select span {
  min-height: 18px;
}

.order-entry-grid b,
.order-period-common b,
.order-period-route-row b,
.order-period-ship-row b,
.order-entry-wide b {
  color: #dc3d3d;
  padding-left: 2px;
}

.order-entry-grid input,
.order-entry-grid select,
.order-period-common input,
.order-period-common select,
.order-period-route-row input,
.order-period-route-row select,
.order-period-ship-row input,
.order-period-ship-row select,
.order-entry-wide input,
.order-entry-wide textarea,
.order-factory-row input,
.order-factory-row select,
.order-factory-row textarea {
  width: 100%;
  min-height: 34px;
  border: 1px solid #b8cde1;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  color: #173654;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px 2px rgba(22, 61, 97, .08);
}

.order-entry-grid input:focus,
.order-entry-grid select:focus,
.order-period-common input:focus,
.order-period-common select:focus,
.order-period-route-row input:focus,
.order-period-route-row select:focus,
.order-period-ship-row input:focus,
.order-period-ship-row select:focus,
.order-entry-wide input:focus,
.order-entry-wide textarea:focus,
.order-factory-row input:focus,
.order-factory-row select:focus,
.order-factory-row textarea:focus {
  outline: none;
  border-color: #2f7fbd;
  box-shadow: 0 0 0 3px rgba(47, 127, 189, .14), inset 0 1px 2px rgba(22, 61, 97, .08);
}

.portal-lookup-field {
  position: relative;
  min-width: 0;
}

.order-entry-bound-field::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 14px;
  width: 7px;
  height: 7px;
  border-right: 2px solid #376b98;
  border-bottom: 2px solid #376b98;
  transform: rotate(45deg);
  pointer-events: none;
}

.order-entry-bound-field input[readonly] {
  padding-right: 32px;
  cursor: pointer;
  background: #f1f7fc;
}

.order-entry-bound-field:has(.order-entry-bound-select:not(.hidden))::after {
  display: none;
}

.order-entry-bound-select {
  width: 100%;
  background: #f1f7fc;
}

.order-entry-linked-port-field > span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.order-entry-linked-port-field > span em {
  color: #66829a;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}

.order-entry-linked-port-field input[readonly] {
  background: #f5f8fb;
  color: #38556e;
  cursor: default;
}

.order-entry-section:has(.portal-lookup-menu:not(.hidden)),
.order-entry-repeat:has(.portal-lookup-menu:not(.hidden)) {
  position: relative;
  overflow: visible;
  z-index: 24;
}

.import-flow-modal {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(18, 39, 64, .42);
  backdrop-filter: blur(5px);
}

.import-flow-modal.hidden {
  display: none;
}

.import-flow-card {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: hidden;
  border: 1px solid #9fbad4;
  border-radius: 7px;
  background: #f7fbff;
  box-shadow: 0 24px 60px rgba(17, 47, 78, .28), inset 0 1px 0 #fff;
}

.import-flow-head {
  border-bottom: 1px solid #bed0e1;
  background: linear-gradient(180deg, #fafdff 0%, #eaf3fb 100%);
}

.import-flow-head small {
  display: block;
  margin-top: 4px;
  color: #45647f;
  font-size: 13px;
  font-weight: 800;
}

.import-flow-form {
  max-height: calc(100vh - 230px);
  overflow: auto;
  padding: 22px 24px 18px;
}

.import-flow-error {
  margin-bottom: 14px;
  border: 1px solid #dc7e7e;
  border-left: 4px solid #c43838;
  border-radius: 5px;
  background: #fff4f4;
  color: #982c2c;
  padding: 11px 13px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(145, 42, 42, .1);
}

.import-flow-section {
  display: grid;
  gap: 15px;
  border: 1px solid #bfd3e5;
  border-radius: 7px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 8px 22px rgba(48, 83, 115, .1), inset 0 1px 0 #fff;
}

.import-flow-section.primary {
  border-top: 4px solid #2f69a4;
}

.import-flow-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid #dce7f0;
}

.import-flow-section-title strong {
  color: #173f67;
  font-size: 17px;
  font-weight: 900;
}

.import-flow-section-title span {
  color: #637c93;
  font-size: 12px;
  font-weight: 800;
}

.import-flow-field {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.import-flow-field > span {
  color: #294d6f;
  font-size: 14px;
  font-weight: 900;
}

.import-flow-field b {
  margin-left: 3px;
  color: #c73636;
}

.import-flow-field input,
.import-flow-field select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid #aac2d8;
  border-radius: 5px;
  background: #fbfdff;
  color: #173956;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: inset 0 1px 2px rgba(34, 69, 99, .07);
}

.import-flow-field input:focus,
.import-flow-field select:focus {
  outline: none;
  border-color: #3979b5;
  box-shadow: 0 0 0 3px rgba(57, 121, 181, .14), inset 0 1px 2px rgba(34, 69, 99, .05);
}

.import-flow-upload {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 76px;
  border: 1px dashed #81a9cd;
  border-radius: 6px;
  background: linear-gradient(180deg, #f9fcff 0%, #edf6fd 100%);
  padding: 12px 15px;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.import-flow-upload:hover {
  border-color: #3d78ad;
  box-shadow: 0 8px 18px rgba(42, 93, 136, .13);
  transform: translateY(-1px);
}

.import-flow-upload-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #6f9cc4;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff 0%, #dcecf9 100%);
  color: #28669e;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 3px 0 #9dbbd4;
}

.import-flow-upload-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.import-flow-upload-copy strong {
  color: #1e4d77;
  font-size: 15px;
  font-weight: 900;
}

.import-flow-upload-copy small {
  overflow: hidden;
  color: #60798f;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-flow-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.import-flow-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-top: 1px solid #c9d9e7;
  background: #eef5fb;
  padding: 14px 20px 16px;
}

.import-flow-actions button {
  min-width: 112px;
}

.import-flow-actions .default-cancel-btn,
.import-flow-actions .default-confirm-btn {
  position: static;
  right: auto;
  bottom: auto;
  width: 112px;
  min-width: 112px;
  height: 38px;
  min-height: 38px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 680px) {
  .import-flow-modal { padding: 10px; }
  .import-flow-form { padding: 16px 14px; }
  .import-flow-field { grid-template-columns: 1fr; gap: 7px; }
}

.portal-lookup-menu {
  position: absolute;
  z-index: 180;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  min-width: 260px;
  max-height: 248px;
  overflow: auto;
  padding: 5px;
  border: 1px solid #8fb2d3;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 13px 30px rgba(25, 61, 94, .24), 0 3px 8px rgba(25, 61, 94, .12);
}

.portal-lookup-menu button {
  width: 100%;
  min-height: 38px;
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  color: #183a5b;
  text-align: left;
  cursor: pointer;
}

.portal-lookup-menu button + button {
  border-top-color: #e3ebf3;
}

.portal-lookup-menu button:hover,
.portal-lookup-menu button.active {
  border-color: #8eb8de;
  background: linear-gradient(180deg, #edf7ff 0%, #dceefd 100%);
  box-shadow: inset 3px 0 0 #2f79b8, 0 2px 7px rgba(36, 91, 137, .11);
}

.portal-lookup-menu button.is-disabled,
.portal-lookup-menu button.is-disabled:hover {
  cursor: not-allowed;
  border-color: #ead5d5;
  background: #fbf7f7;
  box-shadow: none;
  color: #9a6c6c;
  opacity: 1;
}

.portal-lookup-menu button.is-disabled strong {
  color: #855c5c;
}

.portal-lookup-menu button.is-disabled em {
  color: #ae6464;
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.order-entry-fixed-field input[readonly] {
  border-color: #c8d9e9;
  background: linear-gradient(180deg, #f9fcff 0%, #edf5fc 100%);
  color: #31597e;
  font-weight: 800;
  cursor: default;
}

.portal-lookup-menu strong,
.portal-lookup-menu span {
  min-height: 0 !important;
  color: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.portal-lookup-menu span {
  color: #607991;
  font-size: 11px;
  font-weight: 700;
}

.portal-lookup-menu mark {
  border-radius: 2px;
  background: #ffe39a;
  color: #713e00;
  padding: 0 1px;
}

.search-form #orderPortsCondition label,
.client-port-fieldset label,
.freight-rule-port-field,
.freight-rule-shipping-company-field,
.base-field,
.spec-condition-row label,
.freight-port-lookup {
  position: relative;
}

.order-port-lookup-menu,
.client-port-lookup-menu,
.freight-rule-lookup-menu,
.base-lookup-menu,
.inline-lookup-menu {
  z-index: 2300;
}

.inline-lookup-host { position: relative; }

.inline-lookup-menu {
  top: calc(100% + 4px);
  min-width: 180px;
  max-width: min(460px, calc(100vw - 30px));
}

.portal-lookup-menu.inline-lookup-floating {
  position: fixed;
  box-sizing: border-box;
  min-width: 0;
  max-width: none;
  margin: 0;
  overscroll-behavior: contain;
  overflow-x: hidden;
  overflow-y: auto;
}

.inline-lookup-floating button strong,
.inline-lookup-floating button span {
  white-space: normal;
  overflow-wrap: anywhere;
}

.inline-lookup-empty {
  padding: 10px;
  color: #62768b;
  font-size: 13px;
}

.order-entry-grid label.order-entry-missing,
.order-entry-wide.order-entry-missing,
.order-factory-row label.order-entry-missing {
  position: relative;
  padding: 8px;
  margin: -8px;
  border: 1px solid #d65d56;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff8f7 0%, #fff1ef 100%);
  box-shadow: 0 0 0 3px rgba(214, 93, 86, .12);
}

.order-entry-grid label.order-entry-missing > span,
.order-entry-wide.order-entry-missing > span,
.order-factory-row label.order-entry-missing > span {
  color: #a33b35;
}

.order-entry-grid label.order-entry-missing input,
.order-entry-grid label.order-entry-missing select,
.order-entry-wide.order-entry-missing input,
.order-entry-wide.order-entry-missing textarea,
.order-factory-row label.order-entry-missing input,
.order-factory-row label.order-entry-missing select,
.order-factory-row label.order-entry-missing textarea {
  border-color: #cf4f48;
  background: #fffdfc;
}

.order-entry-field-error {
  display: block;
  color: #a33b35;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}

.order-entry-free-time-manual select {
  border-color: #c89232;
  background: linear-gradient(180deg, #fffdf6 0%, #fff6df 100%);
}

.order-entry-free-time-hint {
  display: block;
  color: #8a5c12;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.order-entry-check {
  align-self: end;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #244b70;
  font-weight: 900;
}

.order-entry-check input,
.order-entry-unknown input {
  width: 15px;
  min-height: 15px;
}

.order-entry-repeat {
  margin-top: 14px;
  border: 1px solid #d2e0ed;
  border-radius: 8px;
  overflow: hidden;
}

.order-entry-repeat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  background: #eef6fc;
  color: #244f82;
  font-weight: 900;
}

.order-entry-repeat-head button,
.order-factory-row .factory-repeat-move,
.order-factory-row .factory-repeat-remove {
  width: 34px;
  min-width: 34px;
  height: 32px;
  border: 1px solid #9ab8d3;
  border-bottom-color: #6c91b3;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #dcecf8 100%);
  color: #244f82;
  font-size: 19px;
  font-weight: 900;
  box-shadow: 0 2px 0 #8aaccc, inset 0 1px 0 rgba(255,255,255,.9);
}

.order-entry-repeat-head button:hover,
.order-factory-row .factory-repeat-move:hover:not(:disabled),
.order-factory-row .factory-repeat-remove:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 #7ca1c1, 0 8px 14px rgba(44, 91, 129, .16), inset 0 1px 0 rgba(255,255,255,.95);
}

.order-factory-cargo-head {
  display: grid;
  grid-template-columns: 1.2fr .55fr .75fr .65fr .65fr 1.2fr 110px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px 6px;
  border-top: 1px solid #dbe8f3;
  background: #f8fbfe;
  color: #355473;
  font-size: 12px;
  font-weight: 900;
}

.order-entry-form.is-create-mode .order-factory-cargo-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.order-factory-row {
  display: grid;
  grid-template-columns: 1.2fr .55fr .75fr .65fr .65fr 1.2fr 110px;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border-top: 1px solid #dbe8f3;
}

.factory-repeat-actions {
  display: inline-flex;
  gap: 4px;
  align-items: end;
  min-height: 34px;
}

.order-factory-row .factory-repeat-move,
.order-factory-row .factory-repeat-remove {
  display: inline-grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
}

.order-factory-row .factory-repeat-move {
  color: #255a86;
  font-size: 16px;
}

.order-factory-row .factory-repeat-remove {
  color: #9d3b35;
}

.order-factory-row .factory-repeat-move:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.order-factory-row label {
  display: grid;
  gap: 6px;
  color: #355473;
  font-size: 12px;
  font-weight: 900;
}

.factory-pino textarea {
  resize: vertical;
}

.order-entry-radios {
  display: inline-flex;
  gap: 14px;
  margin-bottom: 12px;
  padding: 7px;
  border: 1px solid #c7d9eb;
  border-radius: 8px;
  background: #f4f9fe;
}

.order-entry-radios label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #244f82;
  font-size: 13px;
  font-weight: 900;
}

.order-entry-date-pair {
  grid-template-columns: 116px 76px 54px;
  align-items: end;
  max-width: 264px;
}

.order-entry-date-pair input[type="date"],
.order-entry-date-pair input[type="time"] {
  box-sizing: border-box;
  height: 34px;
  min-height: 34px;
  padding: 6px 8px;
  position: relative;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
}

/* Native WebKit select controls can ignore min-height and collapse to their
   23px platform default.  These selectors already declare the corresponding
   minimum sizes in their component rules; make that existing contract
   deterministic without changing compact table controls or business logic. */
.factory-fee-global-search select,
.destination-delivery-edit-row select,
.dispatch-type-bar select,
.dispatch-inline-grid select,
.dispatch-trailer-row select,
.spec-condition-row select,
.freight-control select,
.freight-port-row select,
.order-entry-grid select,
.order-period-common select,
.order-period-route-row select,
.order-period-ship-row select,
.order-factory-row select,
.preorder-folder-member-actions select,
.preorder-folder-add-row select {
  height: 34px;
}

.client-edit-form select,
.client-record-form select,
.consignee-task-routing-person select,
.ship-schedule-mail-fields select,
.ship-schedule-reason-controls select {
  height: 36px;
}

.order-specific-event-form select,
.client-mail-compose select,
.spec-primary-field select,
.op-auth-field select,
.address-book-field select,
.invoice-type-field select,
.fee-type-field select,
.currency-rate-field select,
.base-field select,
.order-update-reason-field select,
.import-flow-field select {
  height: 38px;
}

.spec-primary-field.trigger select {
  height: 44px;
}

/* WebKit may paint today's date/time inside an actually empty native control.
   Keep the real native picker and data value, but hide that browser-only
   placeholder so an empty schedule looks empty in Safari, Chrome and Edge. */
.order-entry-form input[data-order-entry-empty="1"]::-webkit-datetime-edit {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.order-entry-date-pair input[type="date"]::-webkit-calendar-picker-indicator,
.order-entry-date-pair input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.order-entry-date-pair > span {
  grid-column: 1 / -1;
}

.order-entry-unknown {
  display: inline-flex !important;
  align-items: center;
  gap: 5px !important;
  justify-content: flex-start;
  min-width: 54px;
  padding-bottom: 7px;
  color: #607b96 !important;
  font-size: 12px !important;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

.order-period-multi {
  display: grid;
  gap: 12px;
}

.order-period-common {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid #c6d9ea;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdff 0%, #f2f8fd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 8px 18px rgba(39, 87, 129, .07);
}

.order-period-common .order-transport-block {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}

.order-period-card {
  padding: 12px;
  border: 1px solid #d2e1ef;
  border-radius: 8px;
  background: #fbfdff;
}

.order-period-card-title {
  margin-bottom: 10px;
  color: #244f82;
  font-weight: 900;
}

.order-period-route-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 264px 264px;
  gap: 12px;
  align-items: end;
}

.order-period-ship-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 264px 264px;
  gap: 12px;
  margin-top: 10px;
}

.order-transport-select {
  max-width: 112px;
}

.order-transport-select select {
  min-width: 0;
}

.order-vessel-stack {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #c6d9ea;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdff 0%, #f2f8fd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 8px 18px rgba(39, 87, 129, .07);
}

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

.order-vessel-row.single {
  grid-template-columns: minmax(0, 1fr);
}

.order-container-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-self: end;
  min-width: 0;
  max-width: none;
}

.order-container-unit {
  display: grid;
  grid-template-columns: minmax(38px, 1fr) auto 54px;
  gap: 0;
  align-items: center;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  border: 1px solid #c4d8ea;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 2px 7px rgba(39, 87, 129, .06);
}

.order-container-unit strong {
  display: inline-grid;
  min-height: 32px;
  place-items: center;
  padding: 0 5px;
  border-left: 1px solid #d4e2ef;
  border-right: 1px solid #d4e2ef;
  background: linear-gradient(180deg, #f7fbff 0%, #e5f0fa 100%);
  color: #1f4f7d;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.order-container-unit input {
  min-height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px 0 0 6px;
  background: transparent;
  text-align: center;
  -moz-appearance: textfield;
}

.order-container-unit select {
  min-height: 30px;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: transparent;
  padding: 0 4px;
  font-size: 12px;
}

.order-container-unit input::-webkit-outer-spin-button,
.order-container-unit input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.order-entry-wide {
  margin-top: 10px;
}

.order-entry-wide textarea {
  min-height: 92px;
  resize: vertical;
}

.order-entry-audit {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid #c9dced;
  border-radius: 8px;
  background: linear-gradient(180deg, #f7fbff 0%, #eef6fc 100%);
  color: #355473;
  line-height: 1.7;
}

.order-entry-audit strong {
  color: #1f4f7d;
  font-size: 13px;
}

.order-entry-audit span {
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 980px) {
  .order-factory-cargo-head {
    display: none;
  }

  .order-entry-form.is-create-mode .order-factory-cargo-label {
    position: static;
    width: auto;
    height: auto;
    padding: initial;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
  }

  .order-entry-grid,
  .order-factory-row {
    grid-template-columns: 1fr;
  }

  .order-entry-date-pair,
  .order-container-fields,
  .order-vessel-row,
  .order-period-common,
  .order-period-route-row,
  .order-period-ship-row {
    grid-template-columns: 1fr;
  }
}

#clientView.client-crm-view {
  background: #f7fafc;
}

#clientView .client-crm-header {
  align-items: center;
  border-bottom: 1px solid #c5d3df;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef5fa 100%);
}

#clientView .client-crm-header h2 {
  margin: 2px 0 0;
  color: #173b64;
}

.client-crm-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  white-space: nowrap;
}

.client-crm-header-actions strong {
  min-width: 58px;
  color: #24445f;
  font-size: 14px;
  font-weight: 950;
}

.client-sales-scope {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid #b6c8d9;
  border-radius: 5px;
  background: #fff;
  color: #49667f;
  font-size: 14px;
  font-weight: 950;
}

.client-sales-scope select {
  min-width: 166px;
  height: 30px;
  border: 1px solid #a9bdcf;
  border-radius: 4px;
  background: linear-gradient(#fff, #edf4fa);
  color: #183b5a;
  font-size: 14px;
  font-weight: 950;
}

.client-weekly-dashboard {
  --client-weekly-ink: #172531;
  --client-weekly-muted: #6b7883;
  border-top: 1px solid #d2dbe1;
  border-bottom: 1px solid #c8d2d9;
  background: #fff;
  color: var(--client-weekly-ink);
}

.client-weekly-loading {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: #687681;
  font-size: 13px;
  font-weight: 800;
}

.client-weekly-loading.error {
  color: #a33f3d;
}

.client-weekly-heading {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  border-bottom: 1px solid #e0e5e9;
  background: #f9fafb;
}

.client-weekly-heading > div:first-child {
  display: grid;
  gap: 2px;
}

.client-weekly-heading > div:first-child > span,
.client-weekly-panel-head div span {
  color: #76828c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.client-weekly-heading h3 {
  margin: 0;
  color: #14232e;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0;
}

.client-weekly-period {
  display: grid;
  grid-template-columns: auto auto 34px;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.client-weekly-period strong {
  color: #243746;
  font-size: 13px;
  font-weight: 950;
}

.client-weekly-period > span {
  color: #7a8791;
  font-size: 11px;
  font-weight: 800;
}

.client-weekly-period button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #b9c5cd;
  border-radius: 50%;
  background: #fff;
  color: #324b5d;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}

.client-weekly-period button:hover {
  border-color: #6f899a;
  background: #f2f6f8;
}

.client-weekly-dashboard.is-refreshing .client-weekly-period button {
  animation: client-weekly-refresh .8s linear infinite;
}

@keyframes client-weekly-refresh {
  to { transform: rotate(360deg); }
}

.client-weekly-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(112px, 1fr));
  border-bottom: 1px solid #dce3e7;
}

.client-weekly-kpi {
  --client-weekly-accent: #4a6f89;
  position: relative;
  min-width: 0;
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 12px 15px 11px;
  border: 0;
  border-right: 1px solid #e1e6e9;
  border-radius: 0;
  background: #fff;
  color: #192936;
  text-align: left;
}

.client-weekly-kpi:last-child {
  border-right: 0;
}

.client-weekly-kpi::before {
  content: "";
  position: absolute;
  top: 0;
  right: 14px;
  left: 14px;
  height: 3px;
  background: var(--client-weekly-accent);
  opacity: .32;
}

.client-weekly-kpi:hover,
.client-weekly-kpi.active {
  background: #f7fafb;
}

.client-weekly-kpi.active::before {
  right: 0;
  left: 0;
  height: 4px;
  opacity: 1;
}

.client-weekly-kpi.active {
  box-shadow: inset 0 -3px 0 var(--client-weekly-accent);
}

.client-weekly-kpi span {
  overflow: hidden;
  color: #5f6e79;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-weekly-kpi strong {
  color: #14232e;
  font-size: 27px;
  font-weight: 950;
  line-height: 1.1;
}

.client-weekly-kpi small {
  overflow: hidden;
  color: #88939b;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-weekly-kpi.new { --client-weekly-accent: #2f69a0; }
.client-weekly-kpi.developing { --client-weekly-accent: #aa7425; }
.client-weekly-kpi.follow { --client-weekly-accent: #ad514b; }
.client-weekly-kpi.clients { --client-weekly-accent: #2f7b6a; }
.client-weekly-kpi.converted { --client-weekly-accent: #66558d; }
.client-weekly-kpi.ontime { --client-weekly-accent: #3d7c45; }

.client-weekly-body {
  display: grid;
  grid-template-columns: minmax(520px, 1.35fr) minmax(360px, .9fr);
  min-height: 226px;
}

.client-weekly-trend,
.client-weekly-ranking {
  min-width: 0;
  padding: 14px 18px 12px;
}

.client-weekly-ranking {
  border-left: 1px solid #dce3e7;
  background: #fbfcfc;
}

.client-weekly-panel-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.client-weekly-panel-head div {
  display: grid;
  gap: 1px;
}

.client-weekly-panel-head div strong {
  color: #20313e;
  font-size: 13px;
  font-weight: 950;
}

.client-weekly-panel-head > em {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid #c9d4da;
  border-radius: 999px;
  background: #fff;
  color: #415765;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.client-weekly-chart {
  height: 162px;
  display: grid;
  grid-template-columns: repeat(7, minmax(46px, 1fr));
  align-items: end;
  gap: 10px;
  padding-top: 8px;
}

.client-weekly-day {
  height: 154px;
  display: grid;
  grid-template-rows: 20px 1fr 17px 14px;
  justify-items: center;
  gap: 1px;
}

.client-weekly-day > strong {
  color: #334957;
  font-size: 11px;
  font-weight: 950;
}

.client-weekly-bar-track {
  position: relative;
  width: 24px;
  height: 100%;
  overflow: hidden;
  border-radius: 3px 3px 0 0;
  background: #edf1f3;
}

.client-weekly-bar-track i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--client-weekly-bar-height);
  border-radius: 3px 3px 0 0;
  background: #47758c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.client-weekly-day.today .client-weekly-bar-track {
  background: #e7eee9;
}

.client-weekly-day.today .client-weekly-bar-track i {
  background: #32745f;
}

.client-weekly-day > span {
  color: #536571;
  font-size: 11px;
  font-weight: 900;
}

.client-weekly-day.today > span {
  color: #22624f;
}

.client-weekly-day > small {
  color: #98a2a9;
  font-size: 9px;
  font-weight: 800;
}

.client-weekly-rank-list {
  max-height: 166px;
  display: grid;
  gap: 7px;
  margin-top: 8px;
  padding-right: 5px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #adbac2 transparent;
}

.client-weekly-rank-row {
  min-height: 27px;
  display: grid;
  grid-template-columns: 24px minmax(76px, 118px) minmax(70px, 1fr) 44px;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  border-left: 3px solid transparent;
}

.client-weekly-rank-row.current {
  border-left-color: #32745f;
  background: #f0f6f3;
}

.client-weekly-rank-row > b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #c4cdd3;
  border-radius: 50%;
  background: #fff;
  color: #60717c;
  font-size: 10px;
  font-weight: 950;
}

.client-weekly-rank-row.rank-1 > b {
  border-color: #bb8b32;
  background: #fff5d8;
  color: #835d15;
}

.client-weekly-rank-row.rank-2 > b {
  border-color: #8798a4;
  background: #f0f3f5;
  color: #4f606a;
}

.client-weekly-rank-row.rank-3 > b {
  border-color: #aa7652;
  background: #f8ebe2;
  color: #7b4d30;
}

.client-weekly-rank-name {
  overflow: hidden;
  color: #253946;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-weekly-rank-name em {
  display: inline-flex;
  margin-left: 5px;
  padding: 1px 4px;
  border-radius: 3px;
  background: #32745f;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  vertical-align: 1px;
}

.client-weekly-rank-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #e5eaed;
}

.client-weekly-rank-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #58788a;
}

.client-weekly-rank-row.current .client-weekly-rank-bar i {
  background: #32745f;
}

.client-weekly-rank-row > strong {
  color: #203440;
  font-size: 12px;
  font-weight: 950;
  text-align: right;
}

.client-weekly-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: #7f8b93;
  font-size: 12px;
  font-weight: 800;
}

.client-weekly-foot {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 5px 18px;
  border-top: 1px solid #e2e7ea;
  background: #f7f9fa;
  color: #7a878f;
  font-size: 10px;
  font-weight: 800;
}

.client-crm-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(132px, 1fr));
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #d3dee8;
  background: #f6fafc;
}

.client-crm-card {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid #bdccda;
  border-left: 4px solid #517da6;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f0f6fb 100%);
  color: #1e3f5c;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 4px 12px rgba(40, 70, 98, .08);
}

.client-crm-card span {
  color: #66788a;
  font-size: 12px;
  font-weight: 900;
}

.client-crm-card strong {
  color: #173b64;
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
}

.client-crm-card.active {
  border-color: #23699f;
  border-left-color: #174e7a;
  background: linear-gradient(180deg, #5fa5da 0%, #347fb7 48%, #23699f 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(13, 64, 103, .24),
    0 2px 0 #174e7a,
    0 10px 18px rgba(35, 105, 159, .24);
}

.client-crm-card.active span,
.client-crm-card.active strong {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(15, 72, 114, .4);
}

.client-crm-card.a { border-left-color: #2f7f68; }
.client-crm-card.operation { border-left-color: #576f94; }
.client-crm-card.vip { border-left-color: #a36a16; }
.client-crm-card.imp { border-left-color: #a94442; }

.client-crm-tabs {
  display: flex;
  gap: 10px;
  padding: 0 16px 14px;
  border-bottom: 1px solid #c5d3df;
  background: #f6fafc;
}

.client-crm-tabs button {
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid #9fb5c9;
  border-bottom-color: #7f99af;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 42%, #dfeaf4 100%);
  color: #24435f;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(91, 129, 160, .13),
    0 2px 0 #a7bdcf,
    0 7px 14px rgba(43, 73, 99, .11);
}

.client-crm-tabs button.active {
  border-color: #23699f;
  border-bottom-color: #174e7a;
  background: linear-gradient(180deg, #5fa5da 0%, #347fb7 48%, #23699f 100%);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(15, 72, 114, .4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(13, 64, 103, .24),
    0 2px 0 #174e7a,
    0 8px 16px rgba(35, 105, 159, .24);
}

#clientView .client-crm-tools {
  padding-top: 12px;
  padding-bottom: 12px;
}

#clientView .client-crm-tools .module-search-form {
  flex: 0 0 540px;
  max-width: min(540px, 100%);
}

#clientView .client-crm-tools .module-search-form select {
  flex-basis: 96px;
}

#clientView .client-crm-tools .module-search-form input {
  flex: 1 1 118px;
  min-width: 0;
}

#clientView .client-crm-tools .module-search-form button {
  min-width: 64px;
}

#clientAddButton.mini-button {
  min-width: 78px;
  border-color: #54a579;
  border-bottom-color: #2f7652;
  background: linear-gradient(180deg, #fbfff9 0%, #dff4e7 48%, #9ed8b8 100%);
  color: #155b3a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(37, 123, 77, .16),
    0 2px 0 #4f996f,
    0 8px 16px rgba(40, 116, 76, .18);
}

#clientAddButton.mini-button:hover:not(:disabled) {
  border-color: #46986b;
  border-bottom-color: #286946;
  background: linear-gradient(180deg, #ffffff 0%, #eaf8ef 45%, #afe0c4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(37, 123, 77, .14),
    0 3px 0 #43875f,
    0 11px 20px rgba(40, 116, 76, .22);
}

#clientAddButton.mini-button:active:not(:disabled) {
  box-shadow:
    inset 0 2px 4px rgba(31, 103, 66, .2),
    0 1px 0 #43875f,
    0 5px 12px rgba(40, 116, 76, .16);
}

#clientView .client-filter-row button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #9fb8ce;
  border-bottom-color: #7899b5;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 44%, #e1edf7 100%);
  color: #1f5f91;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(93, 139, 174, .12),
    0 2px 0 #a9bed1,
    0 6px 12px rgba(48, 78, 104, .1);
}

#clientView .client-filter-row button.active {
  border-color: #23699f;
  border-bottom-color: #174e7a;
  background: linear-gradient(180deg, #5fa5da 0%, #347fb7 48%, #23699f 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(13, 64, 103, .24),
    0 2px 0 #174e7a,
    0 7px 14px rgba(35, 105, 159, .22);
}

#clientView .client-crm-table-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
}

.client-pagination {
  flex-wrap: wrap;
  border-top: 1px solid #c5d3df;
  background: #f6fafc;
}

.client-pagination .client-page-summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #2c4a63;
  font-size: 13px;
  font-weight: 900;
}

.client-pagination b {
  color: #173b64;
}

.client-pagination .client-page-number-input {
  width: 48px;
  height: 28px;
  padding: 0 5px;
  border: 1px solid #8facc5;
  border-radius: 4px;
  background: #fff;
  color: #173b64;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  box-shadow: inset 0 1px 2px rgba(30, 68, 101, .08);
}

.client-pagination .client-page-number-input:focus {
  border-color: #337eb5;
  outline: 2px solid rgba(51, 126, 181, .16);
  outline-offset: 1px;
}

.client-pagination .client-page-summary small {
  margin-left: 5px;
  color: #60798e;
  font-size: 12px;
  font-weight: 800;
}

.client-pagination .client-page-jump-button {
  min-width: 52px;
}

.client-pagination .client-page-size {
  margin-left: auto;
  color: #506b82;
  font-size: 12px;
  font-weight: 850;
}

#clientView .client-table {
  min-width: 1180px;
}

#clientView .client-table th:nth-child(1) { width: 23%; }
#clientView .client-table th:nth-child(2) { width: 9%; }
#clientView .client-table th:nth-child(3) { width: 10%; }
#clientView .client-table th:nth-child(4) { width: 15%; }
#clientView .client-table th:nth-child(5) { width: 16%; }
#clientView .client-table th:nth-child(6) { width: 14%; }
#clientView .client-table th:nth-child(7) { width: 13%; }

#clientView .client-table td {
  vertical-align: middle;
}

.client-name-button {
  width: 100%;
  min-height: 46px;
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #c0d1df;
  border-left: 4px solid #47759f;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(47, 96, 158, .08), rgba(255, 255, 255, .96));
  color: #173b64;
  text-align: left;
}

.client-name-primary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.client-name-primary > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-name-button .client-recent-operation-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid #d65960;
  border-radius: 999px;
  background: #fff0f1;
  color: #b82f39;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.client-name-button .client-delete-pending-badge,
.client-contract-pending-badge {
  flex: 0 0 auto;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid #d49a45;
  border-radius: 999px;
  background: #fff6df;
  color: #8a5714;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.client-name-button .client-delete-pending-badge {
  justify-self: start;
}

.client-contract-pending-badge {
  min-height: 34px;
  padding: 0 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 8px rgba(138, 87, 20, .12);
}

.client-name-button strong,
.client-name-button span,
.client-contact,
.client-owner,
.client-route span,
.client-route strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-name-button strong {
  font-size: 14px;
  font-weight: 950;
}

.client-name-button span {
  color: #5c6f80;
  font-size: 12px;
  font-weight: 800;
}

.client-owner,
.client-contact {
  display: inline-flex;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #c4d2df;
  border-radius: 999px;
  background: #f7fafc;
  color: #274b68;
  font-size: 13px;
  font-weight: 900;
}

.client-contact {
  vertical-align: top;
}

.client-search-snippet {
  max-width: 100%;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 0 7px;
  border: 1px solid #d2bd7a;
  border-radius: 4px;
  background: #fff9df;
  color: #5f4a12;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.client-search-snippet b {
  color: #8b6510;
}

.client-delete-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #d0aa5c;
  border-radius: 4px;
  background: #fff8e8;
  color: #8a5f11;
  font-size: 12px;
  font-weight: 900;
}

.client-delete-request-card {
  width: min(520px, calc(100vw - 32px));
}

.client-delete-reason-field {
  display: grid;
  gap: 7px;
  color: #35506a;
  font-size: 12px;
  font-weight: 900;
}

.client-delete-reason-field textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid #b7c8d8;
  border-radius: 5px;
  padding: 9px 10px;
  color: #173b64;
  font-size: 13px;
  font-weight: 800;
}

.client-delete-request-tip {
  margin: 10px 0 0;
  color: #6b7f91;
  font-size: 12px;
  font-weight: 800;
}

.client-delete-review-card {
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
}

.client-delete-review-body {
  display: grid;
  gap: 10px;
  max-height: min(62vh, 560px);
  overflow: auto;
  padding: 14px 16px;
}

.client-delete-review-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid #c7d5e2;
  border-radius: 6px;
  background: #fbfdff;
}

.client-delete-review-row strong,
.client-delete-review-row span,
.client-delete-review-row em,
.client-delete-review-row p {
  display: block;
}

.client-delete-review-row strong {
  color: #173b64;
  font-size: 14px;
  font-weight: 950;
}

.client-delete-review-row span,
.client-delete-review-row em {
  color: #60778d;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.client-delete-review-row p {
  margin: 8px 0 0;
  color: #253f58;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.client-delete-review-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.client-delete-review-empty {
  padding: 28px 16px;
  color: #60778d;
  text-align: center;
  font-weight: 900;
}

#clientView .base-search-hit {
  padding: 0 2px;
  border-radius: 3px;
  background: #ffe681;
  color: #182f45;
  font-weight: 950;
}

.client-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
}

.client-level-chip {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #bccbd8;
  border-radius: 999px;
  background: #f5f8fb;
  color: #304b63;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.client-level-chip.intention { border-color: #8fc2ad; color: #1f6d59; }
.client-level-chip.vip { border-color: #d2b16d; color: #8b5d16; }
.client-level-chip.imp { border-color: #d79a9a; color: #9a3b3b; }

#clientView td small {
  display: block;
  overflow: hidden;
  color: #6b7f92;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-follow {
  display: grid;
  gap: 3px;
  color: #536b80;
  font-size: 12px;
  font-weight: 850;
}

.client-revisit-status {
  color: #173b64;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
}

.client-revisit-status.overdue {
  width: fit-content;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #d79a9a;
  border-radius: 999px;
  background: #f5f8fb;
  color: #bb3f48;
  font-size: 12px;
}

.client-revisit-status.today {
  width: fit-content;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #ddbd7d;
  border-radius: 999px;
  background: #fff8e9;
  color: #b36b16;
  font-size: 12px;
}

.client-revisit-status.future {
  color: #365e7f;
}

.client-revisit-status.none {
  color: #8aa0b2;
}

.client-revisit-date,
.client-last-contact {
  color: #667d91;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.client-route {
  display: grid;
  gap: 4px;
  color: #536b80;
  font-size: 12px;
  font-weight: 850;
}

.client-route strong {
  color: #274b68;
}

.client-row-actions {
  text-align: center;
}

.client-record-open-button {
  width: min(132px, 100%);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 2px auto 6px;
  padding: 0 18px;
  border: 1px solid #2f78ad;
  border-bottom-color: #1f5d8c;
  border-radius: 999px;
  background: linear-gradient(180deg, #6dafdd 0%, #3f89c0 48%, #2b6da3 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(25, 74, 113, .45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(16, 72, 116, .24),
    0 2px 0 #1f5d8c,
    0 7px 14px rgba(47, 115, 168, .25);
}

.client-record-open-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.client-record-open-button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(18, 70, 112, .28),
    0 1px 0 #1f5d8c;
}

.client-record-open-button .module-count-bubble {
  height: 21px;
  min-width: 21px;
  margin-left: 5px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.client-row-secondary-button {
  width: min(118px, 100%);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 3px auto 2px;
  padding: 0 13px;
  border: 1px solid #93abc0;
  border-bottom-color: #6e8aa2;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 44%, #e3eef7 100%);
  color: #244f72;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(82, 124, 158, .12),
    0 2px 0 #9bb2c5,
    0 5px 10px rgba(42, 75, 102, .12);
}

.client-row-secondary-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.client-row-secondary-button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(60, 93, 122, .16),
    0 1px 0 #9bb2c5;
}

.client-row-actions .blue-action-button,
.client-row-actions .mini-button {
  width: 100%;
  min-width: 0;
  margin: 2px 0;
}

.client-transfer-card {
  width: min(560px, calc(100vw - 32px));
}

.client-transfer-selecting-row {
  cursor: pointer;
}

.client-recently-operated-row td {
  background: #fff6f6 !important;
}

.client-recently-operated-row td:first-child {
  box-shadow: inset 4px 0 0 #d84f57;
}

.client-recently-operated-row .client-name-button {
  border-color: #dc8d92;
  border-left-color: #cf3f49;
  background: linear-gradient(90deg, rgba(216, 79, 87, .11), rgba(255, 255, 255, .98));
}

.client-transfer-selecting-row td {
  background: #f5faff;
}

.client-transfer-selecting-row:hover td {
  background: #e8f3ff;
}

.client-transfer-selected-row td {
  background: #dff0ff !important;
  box-shadow: inset 4px 0 0 #2f6fa9;
}

.client-transfer-selected-row .client-name-button {
  border-color: #6ca3d1;
  background: linear-gradient(90deg, rgba(47, 111, 169, .18), rgba(255, 255, 255, .98));
}

.client-transfer-body {
  display: grid;
  gap: 12px;
  padding: 15px 16px;
}

.client-transfer-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #c2d1df;
  border-radius: 6px;
  background: #f7fbff;
}

.client-transfer-summary strong {
  color: #173b64;
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
}

.client-transfer-summary span {
  color: #526b82;
  font-size: 12px;
  font-weight: 900;
}

.client-transfer-body label {
  display: grid;
  gap: 6px;
  color: #35506a;
  font-size: 12px;
  font-weight: 900;
}

.client-transfer-body select,
.client-transfer-body textarea {
  width: 100%;
  border: 1px solid #b7c8d8;
  border-radius: 5px;
  background: #fff;
  color: #173b64;
  font-size: 13px;
  font-weight: 800;
}

.client-transfer-body select {
  height: 36px;
  padding: 0 9px;
}

.client-transfer-body textarea {
  min-height: 88px;
  padding: 9px 10px;
  resize: vertical;
}

.client-contract-modal {
  place-items: stretch end;
  padding: 0;
}

html.client-contract-open,
body.client-contract-open {
  overflow: hidden;
}

.client-contract-dialog {
  width: min(1120px, calc(100vw - 28px));
  height: 100vh;
  max-height: none;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 8px 0 0 8px;
}

.client-contract-head p {
  max-width: 720px;
  margin: 4px 0 0;
  overflow: hidden;
  color: #5e7284;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-contract-head {
  gap: 16px;
}

.client-contract-head-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.client-contract-more-wrap {
  position: relative;
  display: inline-flex;
}

.client-contract-pill-button {
  width: auto;
  min-width: 104px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 20px;
  border: 1px solid #8fb0cb;
  border-bottom-color: #5f87a7;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 42%, #dcecf7 100%);
  color: #214b6b;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(80, 128, 165, .16),
    0 2px 0 #7ea3c0,
    0 7px 14px rgba(37, 70, 98, .16);
}

.client-contract-pill-button.primary {
  min-width: 138px;
  border-color: #2f78ad;
  border-bottom-color: #1f5d8c;
  background: linear-gradient(180deg, #6dafdd 0%, #3f89c0 48%, #2b6da3 100%);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(25, 74, 113, .45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(16, 72, 116, .24),
    0 2px 0 #1f5d8c,
    0 8px 16px rgba(47, 115, 168, .28);
}

.client-contract-pill-button.subtle {
  min-width: 86px;
  padding: 0 17px;
}

.client-contract-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 8;
  width: 148px;
  padding: 6px;
  border: 1px solid #b9c9d7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(27, 55, 80, .18);
}

.client-contract-more-menu.hidden {
  display: none;
}

.client-contract-more-menu button {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: #fff4f4;
  color: #a33232;
  font-size: 13px;
  font-weight: 950;
  text-align: center;
}

.client-contract-more-menu button:hover {
  background: #ffe8e8;
}

.client-contract-pill-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.client-contract-pill-button.primary:hover {
  filter: brightness(1.04);
}

.client-contract-pill-button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(55, 95, 128, .16),
    0 1px 0 #7ea3c0;
}

.client-contract-pill-button.primary:active {
  box-shadow:
    inset 0 2px 4px rgba(18, 70, 112, .28),
    0 1px 0 #1f5d8c;
}

.edit-dialog > .track-head .client-contract-head-actions .client-contract-pill-button {
  width: auto;
  min-width: 104px;
  height: 34px;
  padding: 0 20px;
  border: 1px solid #8fb0cb;
  border-bottom-color: #5f87a7;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 42%, #dcecf7 100%);
  color: #214b6b;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(80, 128, 165, .16),
    0 2px 0 #7ea3c0,
    0 7px 14px rgba(37, 70, 98, .16);
}

.edit-dialog > .track-head .client-contract-head-actions .client-contract-pill-button.primary {
  min-width: 138px;
  border-color: #2f78ad;
  border-bottom-color: #1f5d8c;
  background: linear-gradient(180deg, #6dafdd 0%, #3f89c0 48%, #2b6da3 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(16, 72, 116, .24),
    0 2px 0 #1f5d8c,
    0 8px 16px rgba(47, 115, 168, .28);
}

.edit-dialog > .track-head .client-contract-head-actions .client-contract-pill-button.subtle {
  min-width: 86px;
  padding: 0 17px;
}

.edit-dialog > .track-head .client-contract-head-actions .client-contract-close-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #a9bdcf;
  border-bottom-color: #7d97ad;
  border-radius: 5px;
  background: linear-gradient(#ffffff, #edf4f9);
  color: #38566f;
  font-size: 22px;
  line-height: 1;
}

.edit-dialog > .track-head .client-contract-head-actions .client-contract-more-menu {
  width: 176px;
  padding: 8px;
  border: 1px solid #d8b2b2;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 250, 250, .96) 100%);
  box-shadow:
    0 18px 34px rgba(70, 34, 34, .18),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.edit-dialog > .track-head .client-contract-head-actions .client-contract-more-menu button {
  width: 100%;
  min-width: 0;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid #e3b8b8;
  border-bottom-color: #c68484;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdfd 0%, #fff4f4 52%, #f6dddd 100%);
  color: #8e2f2f;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 2px 0 #d3a1a1,
    0 8px 16px rgba(136, 53, 53, .16);
}

.edit-dialog > .track-head .client-contract-head-actions .client-contract-more-menu button::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 5px;
  border: 1px solid #cf8a8a;
  background:
    linear-gradient(90deg, transparent 7px, rgba(139, 39, 39, .68) 7px 9px, transparent 9px),
    linear-gradient(180deg, #fff7f7 0%, #efd0d0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.edit-dialog > .track-head .client-contract-head-actions .client-contract-more-menu button:hover {
  background: linear-gradient(180deg, #fffafa 0%, #ffe9e9 54%, #f1caca 100%);
  color: #762424;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #c99191,
    0 11px 20px rgba(136, 53, 53, .22);
}

.edit-dialog > .track-head .client-contract-head-actions .preorder-more-menu {
  border-color: #b9cddd;
  background: linear-gradient(180deg, rgba(255, 255, 255, .99) 0%, rgba(247, 251, 254, .98) 100%);
  box-shadow:
    0 18px 34px rgba(32, 69, 99, .18),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.edit-dialog > .track-head .client-contract-head-actions .preorder-more-menu .business-action {
  border-color: #a6c3d9;
  border-bottom-color: #7299b7;
  background: linear-gradient(180deg, #ffffff 0%, #f3f9fd 52%, #dcebf6 100%);
  color: #245779;
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 0 #91afc6,
    0 8px 16px rgba(42, 91, 127, .14);
}

.edit-dialog > .track-head .client-contract-head-actions .preorder-more-menu .business-action::before {
  border-color: #83a9c5;
  background:
    linear-gradient(90deg, transparent 7px, rgba(38, 91, 130, .68) 7px 9px, transparent 9px),
    linear-gradient(180deg, #fafdff 0%, #d3e6f3 100%);
}

.edit-dialog > .track-head .client-contract-head-actions .preorder-more-menu .business-action:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eaf5fc 54%, #cfe4f2 100%);
  color: #17486b;
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 0 #7fa4bf,
    0 11px 20px rgba(42, 91, 127, .2);
}

.edit-dialog > .track-head .client-contract-head-actions .preorder-more-menu .danger-action {
  margin-top: 9px;
}

.edit-dialog > .track-head .client-contract-head-actions .preorder-more-menu .danger-action::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 3px;
  right: 3px;
  height: 1px;
  background: #d9e3eb;
}

.edit-dialog > .track-head .client-contract-head-actions .preorder-more-menu .danger-action {
  position: relative;
}

.client-contract-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  gap: 0;
  align-items: start;
  overflow: hidden;
}

.client-contract-profile {
  height: calc(100vh - 77px);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px;
  border-right: 1px solid #c9d6e2;
  background: #f6fafc;
}

.client-contact-panel {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 14px 14px 12px;
  border: 1px solid #afc4d6;
  border-radius: 8px;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 8px 18px rgba(38, 68, 94, .08);
}

.client-section-title {
  margin-bottom: 8px;
  color: #6b7f92;
  font-size: 12px;
  font-weight: 950;
}

.client-contact-person {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 0 12px;
  border-bottom: 1px solid #d4e0ea;
}

.client-contact-person span,
.client-contact-method span,
.client-detail-row span {
  color: #6b7f92;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.55;
}

.client-contact-person strong {
  color: #173b64;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.client-contact-methods {
  display: grid;
  gap: 0;
}

.client-contact-method {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid #e1e9ef;
  min-width: 0;
}

.client-contact-method:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.client-contact-method strong {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #243f57;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.client-copy-value {
  position: relative;
  max-width: 100%;
  min-height: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 8px;
  align-items: center;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #174f78;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.client-copy-value.wide {
  width: 100%;
}

.client-copy-value em {
  min-width: 0;
  color: #174f78;
  font-style: normal;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.client-copy-button {
  width: 22px;
  height: 22px;
  position: relative;
  display: inline-grid;
  place-items: center;
  justify-self: end;
  border: 1px solid #9bb7ce;
  border-radius: 5px;
  background: linear-gradient(#ffffff, #eaf3f9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 1px 2px rgba(41, 74, 101, .1);
}

.client-copy-button::before,
.client-copy-button::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 10px;
  border: 1px solid #315d7c;
  border-radius: 2px;
  background: #fff;
}

.client-copy-button::before {
  top: 5px;
  left: 6px;
  opacity: .72;
}

.client-copy-button::after {
  top: 7px;
  left: 9px;
}

.client-copy-button:hover {
  border-color: #6f9dbe;
  background: linear-gradient(#ffffff, #f4faff);
}

.client-copy-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 130;
  min-width: 74px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #a8c9b6;
  border-radius: 6px;
  background: #f3fbf6;
  color: #236048;
  box-shadow: 0 6px 14px rgba(37, 77, 103, .12);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .12s ease, transform .12s ease;
}

.client-copy-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.client-contract-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.client-contract-badges span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #b8c9d9;
  border-radius: 999px;
  background: #fff;
  color: #24435f;
  font-size: 12px;
  font-weight: 950;
}

/* The contact-history dialog is mounted outside #preOrderView.  Mirror the
   list's scoped urgency/schedule-lock treatments here without changing any
   contact-history fields or status rules. */
.client-contract-badges .preorder-contract-badge.alert {
  border-color: #e6b2ad;
  background: #fff1f0;
  color: #af413b;
}

.client-contract-badges .preorder-contract-badge.locked {
  border-color: #d9bf75;
  background: #fff7df;
  color: #805915;
}

.client-detail-panel {
  display: grid;
  gap: 0;
  padding: 14px;
  border: 1px solid #c7d6e3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(38, 68, 94, .06);
}

.client-detail-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid #e1e9ef;
}

.client-detail-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.client-detail-row strong {
  color: #243f57;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.client-contract-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.client-contract-actions label {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #c7d6e3;
  border-radius: 7px;
  background: #fff;
  color: #304b63;
  font-size: 13px;
  font-weight: 900;
}

.client-contract-actions label:has(input:checked) {
  border-color: #6fa2c9;
  background: #eef7ff;
  color: #173f63;
  box-shadow: inset 0 0 0 1px rgba(47, 116, 170, .16);
}

.client-contract-actions input {
  width: 15px;
  height: 15px;
  accent-color: #2f78ad;
}

.client-contract-records {
  min-width: 0;
  height: calc(100vh - 77px);
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
}

.client-record-title {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid #d6e0e8;
  color: #687c8d;
  font-size: 12px;
  font-weight: 850;
}

.client-record-title strong {
  color: #173b64;
  font-size: 16px;
  font-weight: 950;
}

.client-record-list {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 18px 22px;
}

.client-record-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 86px;
  gap: 12px;
  padding: 14px;
  border: 1px solid #cad7e3;
  border-left: 4px solid #517da6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(38, 67, 94, .07);
}

.client-record-item + .client-record-item {
  margin-top: 12px;
}

.client-record-item.important {
  border-left-color: #b14141;
  background: #fffafa;
}

.client-record-index {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf4fa;
  color: #244f82;
  font-size: 12px;
  font-weight: 950;
}

.client-record-main {
  min-width: 0;
}

.client-record-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.client-record-meta strong {
  color: #173b64;
  font-size: 15px;
  font-weight: 950;
}

.client-record-meta span,
.client-record-meta em {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #c3d2df;
  border-radius: 999px;
  background: #f7fafc;
  color: #3a5872;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.client-record-main p {
  margin: 0 0 10px;
  color: #2d4053;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
  white-space: pre-wrap;
}

.client-record-files-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #748596;
  font-size: 12px;
  font-weight: 850;
}

.client-record-actions {
  display: grid;
  align-content: start;
  gap: 8px;
}

.client-record-actions .mini-button {
  min-width: 0;
  width: 100%;
  padding: 0 8px;
}

.client-contract-dialog .client-contract-body {
  overflow: hidden;
}

.client-contract-dialog {
  overflow: hidden;
  overflow-x: hidden;
}

.client-contract-dialog .client-contract-profile,
.client-contract-dialog .client-contract-records {
  max-height: none;
}

.client-contract-dialog .client-record-list {
  max-height: none;
}

.preorder-workbench {
  display: grid;
  grid-template-columns: 250px minmax(720px, 1fr);
  gap: 12px;
  min-height: calc(100vh - 220px);
}

.preorder-groups,
.preorder-main {
  min-width: 0;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
}

.preorder-groups {
  padding: 10px;
  overflow: visible;
}

.preorder-group-head,
.preorder-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
}

.preorder-group-head strong,
.preorder-detail-head strong {
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 900;
}

.preorder-group-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.preorder-group-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.mini-icon-button {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #b8cce0;
  border-radius: 6px;
  background: #eef6fc;
  color: var(--blue-dark);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.mini-icon-button:hover {
  border-color: var(--blue);
  background: #e2f0fb;
}

#preOrderGroups {
  display: grid;
  gap: 7px;
  padding-top: 9px;
}

#preOrderGroups button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f8fbfe;
  color: var(--ink);
  text-align: left;
  position: relative;
}

#preOrderGroups button.folder {
  margin-left: 10px;
  width: calc(100% - 10px);
  background: #fffaf0;
  border-color: #ead8ad;
}

#preOrderGroups button.active {
  border-color: var(--blue);
  box-shadow: inset 3px 0 0 var(--blue);
  background: #eef5fb;
}

#preOrderGroups button.folder.active {
  border-color: #2e72a9;
  background: linear-gradient(90deg, #e9f4ff 0%, #f7fbff 58%, #fffaf0 100%);
  box-shadow:
    inset 5px 0 0 #1f6fa8,
    0 6px 14px rgba(31, 111, 168, 0.13);
}

#preOrderGroups button.folder.active strong {
  color: #123f68;
  font-weight: 950;
  min-width: 0;
}

#preOrderGroups button.folder.active > .preorder-group-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

#preOrderGroups button.folder.active > .preorder-group-title::after {
  content: "当前";
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid rgba(31, 111, 168, 0.28);
  border-radius: 999px;
  background: #ffffff;
  color: #1f6fa8;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}

#preOrderGroups button.folder.active small {
  color: #446781;
}

#preOrderGroups strong,
#preOrderGroups em,
#preOrderGroups small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#preOrderGroups strong {
  font-size: 13px;
  font-weight: 900;
}

#preOrderGroups em,
#preOrderGroups small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

#preOrderGroups b {
  min-width: 26px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
}

#preOrderGroups .preorder-group-counts {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

#preOrderGroups .preorder-group-followup-count {
  min-width: 22px;
  height: 22px;
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border: 1px solid #a93e3a;
  border-radius: 999px;
  background: #c84d47;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(138, 43, 39, .24);
}

#preOrderGroups small {
  grid-column: 1 / -1;
}

.preorder-main {
  padding: 10px;
  overflow: visible;
}

.preorder-folder-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #b9d2e7;
  border-radius: 6px;
  background: #f3f8fc;
}

.preorder-folder-bar span,
.preorder-folder-bar em {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.preorder-folder-bar strong {
  display: block;
  margin: 2px 0;
  color: var(--blue-dark);
  font-size: 15px;
  font-weight: 950;
}

.preorder-folder-bar [data-pre-order-folder-manage],
.preorder-folder-bar [data-pre-order-folder-create] {
  box-sizing: border-box;
  width: auto;
  min-width: 136px;
  height: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(29, 95, 143, 0.16);
}

.preorder-folder-bar [data-pre-order-folder-create].active {
  border-color: #1c638f;
  background: #174d76;
  color: #fff;
}

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

.preorder-metric {
  text-align: left;
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f8fbfe;
  cursor: pointer;
}

.preorder-metric span,
.preorder-metric em {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.preorder-metric strong {
  display: block;
  margin: 2px 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
}

.preorder-metric.warn {
  border-color: #e7c27a;
  background: #fff8e9;
}

.preorder-metric.ok {
  border-color: #b9d9ca;
  background: #f0fbf6;
}

.preorder-metric.alert {
  border-color: #e3aaa4;
  background: #fff1ef;
}

.preorder-metric.locked {
  border-color: #aebfd3;
  background: #f0f5fb;
}

.preorder-metric.operation {
  border-color: #9cc8df;
  background: #eef8fc;
}

.preorder-metric.active {
  border-color: var(--blue);
  box-shadow: inset 0 -3px 0 var(--blue);
  background: #eaf4ff;
}

.preorder-card-list {
  display: grid;
  gap: 0;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.preorder-list-shell {
  display: grid;
  gap: 7px;
}

.preorder-list-head,
.preorder-row-open {
  display: grid;
  grid-template-columns: 34px minmax(190px, 1.1fr) minmax(105px, 0.55fr) minmax(330px, 1.45fr) minmax(150px, 0.8fr) 118px;
  gap: 10px;
  align-items: center;
}

.preorder-list-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 12px;
  border: 1px solid #d8e5ef;
  border-radius: 6px;
  background: #f4f8fb;
  color: #60758a;
  font-size: 11px;
  font-weight: 950;
}

.preorder-list-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-list-group,
.preorder-factory-row {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
  padding: 7px 10px;
  border: 1px solid #d9e5ef;
  border-radius: 5px;
  background: #eef4f9;
  color: var(--blue-dark);
  font-weight: 900;
}

.preorder-list-group {
  justify-content: space-between;
  margin-top: 2px;
  background: linear-gradient(90deg, #eef6fb 0%, #f8fbfd 100%);
}

.preorder-list-group div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.preorder-factory-row span {
  min-width: 0;
  flex: 1;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-list-group strong,
.preorder-list-group span,
.preorder-list-group em,
.preorder-factory-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-list-group span {
  color: var(--muted);
  font-size: 12px;
}

.preorder-list-group em,
.preorder-factory-row em {
  color: var(--gold);
  font-style: normal;
}

.preorder-seq {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  background: #edf3f8;
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

.preorder-pino {
  max-width: 230px;
}

.preorder-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 41, 64, 0.04);
  overflow: hidden;
}

.preorder-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(34, 111, 168, 0.12), 0 10px 24px rgba(15, 41, 64, 0.08);
}

.preorder-card.attention {
  border-color: #df9a92;
}

.preorder-card.folder-selectable {
  cursor: pointer;
}

.preorder-card.folder-selectable:hover {
  border-color: #78a9cc;
  box-shadow: 0 0 0 2px rgba(58, 126, 177, 0.12), 0 10px 24px rgba(15, 41, 64, 0.08);
}

.preorder-card.folder-selected {
  border-color: #1f669a;
  background: #d7ebfa;
  box-shadow: inset 0 0 0 2px rgba(31, 102, 154, 0.32), 0 10px 24px rgba(15, 41, 64, 0.1);
}

.preorder-card.folder-selected .preorder-card-open,
.preorder-card.folder-selected .preorder-card-foot {
  background: #d7ebfa;
}

.preorder-card.folder-disabled {
  cursor: not-allowed;
  opacity: 0.46;
  filter: grayscale(0.45);
  background: #f2f4f6;
  box-shadow: none;
}

.preorder-card.folder-disabled .preorder-card-open,
.preorder-card.folder-disabled .preorder-card-foot {
  background: #f2f4f6;
}

.preorder-card.folder-disabled:hover {
  border-color: var(--line);
  box-shadow: none;
}

.preorder-card-open {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.preorder-card-main,
.preorder-card-title,
.preorder-card-route-line,
.preorder-card-product-line,
.preorder-card-status,
.preorder-row-cargo,
.preorder-date-strip {
  min-width: 0;
}

.preorder-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.preorder-card-title strong {
  color: var(--blue-dark);
  font-size: 15px;
  font-weight: 900;
}

.preorder-card-title strong,
.preorder-pino-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-card-route-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: #50677e;
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.preorder-card-route-line b {
  color: #8799ab;
}

.preorder-card-product-line {
  display: flex;
  min-width: 0;
  margin-top: 2px;
  color: #50677e;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.preorder-pino-wrap {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px;
  max-width: 100%;
  flex: 1 1 auto;
}

.preorder-pino-text {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-pino-wrap.expanded {
  white-space: normal;
}

.preorder-pino-wrap.expanded .preorder-pino-text {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.preorder-expand-pill {
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid #9fb8ce;
  border-bottom-color: #7896ad;
  border-radius: 999px;
  background: linear-gradient(#ffffff 0%, #f5faff 48%, #dfeef8 100%);
  color: #245a83;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 1px 0 #8ea9bf,
    0 4px 8px rgba(41, 83, 116, .12);
}

.preorder-expand-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.preorder-row-cargo {
  display: grid;
  gap: 3px;
}

.preorder-row-cargo strong,
.preorder-row-cargo em,
.preorder-row-cargo small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-row-cargo strong {
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 950;
}

.preorder-row-cargo em,
.preorder-row-cargo small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

/* Containers carry two levels of cargo information: equipment first, volume second. */
.preorder-row-cargo.preorder-container-cargo {
  gap: 1px;
}

.preorder-row-cargo.preorder-container-cargo strong {
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 950;
}

.preorder-row-cargo.preorder-container-cargo .preorder-container-cbm {
  color: #71869a;
  font-size: 10px;
  font-weight: 850;
}

.preorder-date-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.preorder-date-strip.shipping-range {
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.24fr) minmax(0, 0.88fr) minmax(0, 0.88fr);
}

.preorder-date-block {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: #fbfdff;
}

.preorder-date-block em,
.preorder-date-block strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-date-block em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.preorder-date-block strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.preorder-date-block.empty strong {
  color: #9aa7b4;
}

.preorder-date-block.locked {
  border-color: #9fb0c4;
  background: #eef4fb;
}

.preorder-badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.preorder-status-badge {
  display: inline-grid;
  place-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
}

.preorder-status-badge.alert {
  background: #d65b5b;
}

.preorder-status-badge.locked {
  background: #6a7890;
}

.preorder-status-badge.pending {
  background: #ca8a2f;
}

.preorder-status-badge.range {
  background: #2d76a8;
}

.preorder-status-badge.fixed {
  background: #5f8a62;
}

.preorder-status-badge.follow {
  background: #226fa8;
}

.preorder-status-badge.follow-overdue {
  border: 1px solid #a93e3a;
  background: #c84d47;
  box-shadow: 0 1px 2px rgba(138, 43, 39, .24);
}

.preorder-status-badge.file {
  background: #5f7f55;
}

.preorder-status-badge.ok {
  background: #7c8a99;
}

.preorder-card-status small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.preorder-card-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-top: 1px solid var(--line-soft);
  background: #fbfcfe;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.preorder-card-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.preorder-row-open .preorder-card-actions {
  margin-left: 0;
  justify-content: flex-end;
}

.preorder-row-open .preorder-card-actions .preorder-list-record-button {
  width: 112px;
  min-width: 112px;
  min-height: 34px;
  margin: 0;
  padding: 0 12px;
  font-size: 13px;
}

.preorder-folder-manager {
  display: grid;
  gap: 12px;
  min-width: min(900px, 86vw);
}

.preorder-folder-panel {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfdff;
}

.preorder-folder-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f1f6fb;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.preorder-folder-hint strong {
  color: var(--blue-dark);
  font-weight: 950;
}

.preorder-folder-member-list {
  display: grid;
  gap: 8px;
}

.preorder-folder-member {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #d5e2ed;
  border-radius: 6px;
  background: #fff;
}

.preorder-folder-member strong,
.preorder-folder-member span,
.preorder-folder-member em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-folder-member strong {
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 950;
}

.preorder-folder-member span,
.preorder-folder-member em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.preorder-folder-member-actions,
.preorder-folder-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preorder-folder-member-actions select,
.preorder-folder-add-row select,
.preorder-folder-add-row input {
  min-height: 34px;
  border: 1px solid #c7d7e6;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-weight: 850;
}

.preorder-folder-add-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(280px, 1.45fr) minmax(136px, auto);
}

.preorder-folder-add-row input,
.preorder-folder-add-row select {
  height: 38px;
  padding: 0 11px;
  border: 1px solid #b8cad9;
  border-bottom-color: #94aabd;
  border-radius: 6px;
  background: linear-gradient(#ffffff 0%, #fbfdff 55%, #f1f6fa 100%);
  color: #173b64;
  font-size: 14px;
  font-weight: 850;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 1px 3px rgba(34, 65, 91, .08);
}

.preorder-folder-add-row select {
  appearance: auto;
}

.preorder-folder-add-row input::placeholder {
  color: #7890a5;
  font-weight: 800;
}

.preorder-folder-pill-button,
.preorder-folder-manager .mail-confirm-actions .default-confirm-btn,
.preorder-folder-manager .mail-confirm-actions .default-cancel-btn {
  min-width: 108px;
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.preorder-folder-pill-button.primary,
.preorder-folder-manager .mail-confirm-actions .default-confirm-btn {
  min-width: 136px;
  border: 1px solid #2f78ad;
  border-bottom-color: #1f5d8c;
  background: linear-gradient(180deg, #6dafdd 0%, #3f89c0 48%, #2b6da3 100%);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(25, 74, 113, .45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(16, 72, 116, .24),
    0 2px 0 #1f5d8c,
    0 8px 16px rgba(47, 115, 168, .25);
}

.preorder-folder-manager .mail-confirm-actions .default-confirm-btn {
  min-width: 108px;
}

.preorder-folder-pill-button.danger {
  min-width: 74px;
  border: 1px solid #ca8d8d;
  border-bottom-color: #965a5a;
  background: linear-gradient(#fffafa 0%, #f8e1e1 52%, #e7bcbc 100%);
  color: #943333;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 0 #b97979,
    0 7px 14px rgba(127, 51, 51, .13);
}

.preorder-folder-manager .mail-confirm-actions .default-cancel-btn {
  border: 1px solid #93abc0;
  border-bottom-color: #6e8aa2;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 44%, #e3eef7 100%);
  color: #244f72;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(82, 124, 158, .12),
    0 2px 0 #9bb2c5,
    0 6px 12px rgba(42, 75, 102, .12);
}

.preorder-folder-pill-button:hover,
.preorder-folder-manager .mail-confirm-actions .default-confirm-btn:hover,
.preorder-folder-manager .mail-confirm-actions .default-cancel-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.mail-confirm-actions [data-pre-order-folder-create-save] {
  box-sizing: border-box;
  width: auto;
  min-width: 138px;
  height: 42px;
  min-height: 42px;
  padding: 0 22px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
}

.default-cancel-btn.danger {
  border-color: #e1b5b1;
  background: #fff5f3;
  color: #aa3f37;
}

.preorder-detail {
  padding: 12px;
  overflow: auto;
}

.preorder-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.preorder-detail-head span,
.preorder-detail-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.preorder-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 0;
}

.preorder-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}

.preorder-detail-grid div,
.preorder-detail-block,
.preorder-timeline {
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: #fbfdff;
  padding: 8px 9px;
}

.preorder-detail-grid dt,
.preorder-detail-block strong,
.preorder-timeline > strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.preorder-detail-grid dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  word-break: break-word;
}

.preorder-detail-block,
.preorder-timeline {
  margin-top: 9px;
}

.preorder-detail-block p {
  margin: 5px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.55;
}

.preorder-timeline-item {
  margin-top: 7px;
  padding-left: 9px;
  border-left: 3px solid #9eb9d4;
}

.preorder-timeline-item span,
.preorder-timeline-item em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.preorder-timeline-item p {
  margin: 2px 0;
  font-size: 12px;
  font-weight: 800;
}

.pre-order-dialog {
  width: min(980px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.process-confirmation-card {
  width: min(980px, calc(100vw - 36px));
}

.process-confirmation-form {
  padding: 16px 18px 8px;
}

.warehousing-form-hint {
  margin: 0 0 10px;
  color: #65798b;
  font-size: 12px;
  line-height: 1.6;
}

.warehousing-cargo-source {
  display: block;
  width: fit-content;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f1f4f7;
  color: #708190;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.warehousing-cargo-source.is-confirmed {
  background: #e7f6ef;
  color: #247257;
}

.process-table-shell {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.process-confirmation-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.process-confirmation-table th,
.process-confirmation-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 10px;
  text-align: left;
}

.process-confirmation-table th {
  background: #eef5fb;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
}

.process-confirmation-table td strong {
  color: var(--blue-dark);
  font-weight: 900;
}

.process-confirmation-table input,
.process-confirmation-table select,
.trucking-confirmation-grid input {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  padding: 0 9px;
  font-size: 13px;
  font-weight: 800;
}

.process-packages-field {
  display: grid;
  grid-template-columns: minmax(62px, 0.7fr) minmax(100px, 1fr);
  gap: 6px;
}

.trucking-confirmation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.trucking-confirmation-grid .wide {
  grid-column: 1 / -1;
}

.preorder-edit-form,
.preorder-crm-form {
  display: grid;
  gap: 10px;
}

.preorder-form-grid,
.preorder-container-fields,
.preorder-cbm-pino-row,
.preorder-actual-cbm-row,
.preorder-shipping-mode-row,
.preorder-promise-row,
.preorder-etdeta-row,
.preorder-user-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.preorder-cbm-pino-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preorder-actual-cbm-row {
  grid-template-columns: minmax(0, 1fr) minmax(120px, .42fr);
}

.preorder-shipping-mode-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preorder-promise-inline-row {
  display: grid;
  grid-template-columns: minmax(140px, 176px) minmax(170px, 1fr);
  gap: 10px 12px;
  align-items: end;
}

.preorder-promise-inline-row .date-click-field input {
  max-width: 176px;
}

.preorder-promise-inline-row .preorder-check {
  justify-self: start;
  min-width: 178px;
}

.preorder-promise-row {
  grid-template-columns: minmax(150px, 0.34fr) minmax(150px, 0.34fr) minmax(170px, 0.32fr);
  align-items: end;
}

.preorder-etdeta-row {
  grid-template-columns: minmax(150px, 0.34fr) minmax(150px, 0.34fr) minmax(170px, 0.32fr);
  align-items: end;
}

.preorder-container-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: #fbfdff;
}

.preorder-container-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 8px;
  align-items: end;
}

.preorder-container-pair label span {
  white-space: nowrap;
}

.preorder-edit-form label,
.preorder-crm-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.preorder-edit-form label b,
.preorder-crm-form label b {
  color: #d05757;
}

.preorder-edit-form input,
.preorder-edit-form select,
.preorder-edit-form textarea,
.preorder-crm-form input,
.preorder-crm-form select {
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  padding: 0 9px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.preorder-edit-form input:disabled,
.preorder-edit-form input[readonly],
.preorder-edit-form select:disabled,
.preorder-edit-form textarea:disabled {
  border-color: #d7dde6;
  background: #eef2f6;
  color: #8b96a6;
  cursor: not-allowed;
  -webkit-text-fill-color: #8b96a6;
}

/* Factory-bound values are deliberately read-only, but remain easy to scan. */
.preorder-factory-bound-field input[readonly],
.preorder-factory-bound-field .preorder-bound-select:disabled,
.preorder-automatic-field input[readonly] {
  border-color: #b8cddd;
  background: #e8f1f8;
  color: #315777;
  font-weight: 800;
  -webkit-text-fill-color: #315777;
  opacity: 1;
}

.preorder-bound-select {
  width: 100%;
  background: #f1f7fc;
}

.preorder-factory-bound-field .preorder-bound-select:not(:disabled) {
  cursor: pointer;
}

.preorder-edit-form textarea {
  height: 82px;
  padding-top: 8px;
  resize: vertical;
}

.preorder-check {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: center;
  align-self: end;
  min-height: 34px;
}

.preorder-flag-checks {
  display: grid;
  gap: 4px;
  align-self: end;
}

.preorder-flag-checks .preorder-check {
  min-height: 28px;
}

.preorder-check input {
  width: 16px;
  height: 16px;
}

.preorder-promise-row .date-click-field input,
.preorder-etdeta-row .date-click-field input {
  max-width: 168px;
}

.preorder-wide-field {
  display: grid;
  gap: 7px;
  color: #455f76;
  font-size: 12px;
  font-weight: 900;
}

.preorder-wide-field > span {
  letter-spacing: 0;
}

.preorder-wide-field input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #b8cad9;
  border-bottom-color: #94aabd;
  border-radius: 5px;
  background: linear-gradient(#ffffff 0%, #fbfdff 55%, #f1f6fa 100%);
  color: #173b64;
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 1px 3px rgba(34, 65, 91, .08);
}

.preorder-wide-field input:focus {
  border-color: #5f91bb;
  outline: 0;
  box-shadow:
    0 0 0 3px rgba(47, 111, 169, .12),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.preorder-wide-field input[type="file"] {
  min-height: 38px;
  padding: 4px 7px;
  font-size: 12px;
}

.preorder-input-audit {
  padding: 9px 11px;
  border: 1px solid #d9e5ef;
  border-radius: 5px;
  background: #f3f8fc;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.preorder-input-audit strong {
  display: block;
  color: var(--blue-dark);
  font-size: 13px;
}

.preorder-crm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: 14px;
}

.preorder-follow-section {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: #fbfdff;
}

.preorder-follow-section > strong {
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 900;
}

.preorder-followup-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.preorder-followup-date-field {
  width: min(236px, 100%);
}

.preorder-followup-date-field input {
  max-width: 176px;
}

.preorder-followup-popup-control {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
  margin-top: 21px;
}

.preorder-followup-popup-options {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.preorder-followup-popup-options > input[type="time"] {
  width: 94px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid #b7cad9;
  border-radius: 5px;
  background: #fff;
  color: #2d536f;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.preorder-followup-popup-options .client-record-reminder-quick {
  position: relative;
  z-index: 1;
}

.preorder-followup-popup-options .client-record-reminder-quick button.is-selected {
  border-color: #3f83b4;
  background: linear-gradient(#eff8fe, #d9edf9);
  color: #1f5f8d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 1px 3px rgba(44, 102, 146, .14);
}

.preorder-follow-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.preorder-follow-mode label {
  min-height: 34px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.preorder-follow-mode input {
  width: 14px;
  height: 14px;
}

.preorder-crm-history {
  display: grid;
  gap: 8px;
  align-content: start;
}

.preorder-crm-history div {
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: #fbfdff;
}

.preorder-crm-history strong,
.preorder-crm-history span,
.preorder-crm-history em {
  display: block;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.preorder-crm-history p {
  margin: 5px 0 0;
  color: #b04c4c;
  font-size: 12px;
}

.pre-order-contract-modal {
  place-items: stretch end;
  padding: 0;
}

.preorder-contract-dialog {
  width: min(1180px, calc(100vw - 28px));
}

.preorder-contract-body {
  grid-template-columns: 430px minmax(0, 1fr);
}

.preorder-contract-profile {
  display: grid;
  gap: 12px;
  align-content: start;
  padding-top: 16px;
}

.preorder-contract-info-panel {
  margin: 0;
  gap: 0;
  padding: 11px 12px;
}

.preorder-contract-info-panel .client-detail-row {
  grid-template-columns: 96px minmax(0, 1fr);
  padding: 7px 0;
}

.preorder-contract-info-panel .client-detail-row strong {
  color: #173b64;
  font-size: 13px;
  font-weight: 950;
}

.preorder-factory-inline {
  min-width: 0;
  line-height: 1.55;
}

.preorder-factory-contact-button {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  margin-left: 7px;
  padding: 2px 9px;
  border: 1px solid #a9c6dc;
  border-radius: 13px;
  background: linear-gradient(180deg, #fff, #eaf4fb);
  box-shadow: 0 2px 0 #bfd3e2;
  color: #245c85;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: baseline;
  cursor: pointer;
}

.preorder-factory-contact-button:hover,
.preorder-factory-contact-button[aria-expanded="true"] {
  border-color: #4f91bf;
  background: linear-gradient(180deg, #e6f3fc, #cde5f5);
  color: #174c75;
}

.preorder-factory-contact-button:focus-visible {
  outline: 2px solid #2f7dad;
  outline-offset: 2px;
}

.preorder-factory-contact-popover {
  position: fixed;
  z-index: 3;
  box-sizing: border-box;
  width: min(390px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid #a9c6dc;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(22, 54, 82, .2);
  color: #173b64;
}

.preorder-factory-contact-popover > strong {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 900;
}

.preorder-factory-contact-content {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.preorder-contract-info-panel .client-detail-row.wide strong {
  line-height: 1.6;
}

.preorder-contract-info-panel .preorder-contract-remark-row {
  margin-top: 3px;
  padding: 9px 8px;
  border-bottom: 0;
  border-radius: 6px;
  background: #f2f7fb;
}

.preorder-contract-info-panel .preorder-contract-remark-row strong {
  color: #183f63;
  font-size: 13px;
  font-weight: 980;
  line-height: 1.6;
}

.preorder-contract-info-panel .preorder-contract-file-row {
  align-items: start;
  margin-top: 2px;
  padding-top: 8px;
  padding-bottom: 0;
  border-bottom: 0;
}

.preorder-contract-info-panel .preorder-contract-file-row .client-record-files-inline {
  min-width: 0;
}

.preorder-record-file-item {
  max-width: 100%;
}

.preorder-record-file-item .a-link {
  min-width: 0;
  overflow-wrap: anywhere;
}

.preorder-contract-info-panel .client-section-title {
  margin-bottom: 4px;
}

.preorder-contract-actions {
  margin-top: 0;
}

.preorder-contract-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 2px 4px 0;
}

.preorder-contract-status .preorder-status-choice {
  min-height: 48px;
  padding: 7px 10px;
}

.preorder-contract-status .preorder-status-choice-copy strong {
  font-size: 13px;
}

.preorder-contract-status .preorder-status-choice-copy small {
  font-size: 10px;
}

.preorder-inline-edit-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #c7d6e3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(38, 68, 94, .06);
}

.preorder-edit-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d5e1ea;
  border-radius: 8px;
  background: #fbfdff;
}

.preorder-edit-section:last-child {
  border-bottom: 1px solid #d5e1ea;
}

.preorder-edit-section .client-section-title {
  margin-bottom: 0;
}

.preorder-edit-check-line {
  display: flex;
  justify-content: flex-end;
}

.preorder-edit-check-line .preorder-check {
  min-width: 180px;
}

.preorder-contract-party-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.preorder-contract-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.preorder-contract-route-grid label:last-child {
  grid-column: 1 / -1;
}

.preorder-inline-edit-form .preorder-user-row {
  grid-template-columns: 1fr;
}

.preorder-inline-edit-form .preorder-promise-row,
.preorder-inline-edit-form .preorder-etdeta-row {
  grid-template-columns: minmax(0, 1fr) minmax(128px, .68fr);
}

.preorder-inline-edit-form .preorder-flag-checks {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preorder-inline-edit-form .preorder-cbm-pino-row {
  grid-template-columns: minmax(92px, .36fr) minmax(0, 1fr);
}

.preorder-inline-edit-form .preorder-container-fields {
  grid-template-columns: 1fr;
}

.preorder-file-box {
  gap: 10px;
}

.preorder-file-box .preorder-file-list {
  min-height: 30px;
}

.preorder-file-upload-button {
  width: 100%;
}

.preorder-contract-records {
  background: #fff;
}

.preorder-contract-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 18px 22px;
}

.preorder-record-form {
  padding: 14px;
}

.preorder-record-form .preorder-etdeta-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.preorder-record-form .preorder-record-flags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.preorder-status-choice {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid #c8d8e6;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  color: #294963;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 3px 9px rgba(41, 73, 99, .07);
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.client-contact-status-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.client-contact-status-actions .preorder-status-choice {
  min-width: 0;
}

.preorder-status-choice:hover:not(:disabled) {
  border-color: #6a9bc2;
  background: linear-gradient(180deg, #ffffff 0%, #edf7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 5px 12px rgba(41, 73, 99, .12);
  transform: translateY(-1px);
}

.preorder-status-choice input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.preorder-status-choice-mark {
  position: relative;
  width: 22px;
  height: 22px;
  border: 1px solid #aebfce;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(40, 70, 95, .08);
}

.preorder-status-choice-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.preorder-status-choice-copy strong {
  color: #244866;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}

.preorder-status-choice-copy small {
  color: #71879a;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

.preorder-status-choice.is-active .preorder-status-choice-mark {
  border-color: currentColor;
  background: currentColor;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}

.preorder-status-choice.is-active .preorder-status-choice-mark::after {
  position: absolute;
  top: 4px;
  left: 7px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg);
}

.preorder-status-choice-locked.is-active {
  border-color: #d4a047;
  background: linear-gradient(180deg, #fffdf7 0%, #fff4dc 100%);
  color: #ae7317;
}

.preorder-status-choice-locked.is-active .preorder-status-choice-copy strong { color: #895707; }
.preorder-status-choice-locked.is-active .preorder-status-choice-copy small { color: #9c7637; }

.preorder-status-choice-urgent.is-active {
  border-color: #d98282;
  background: linear-gradient(180deg, #fffafb 0%, #fff0f0 100%);
  color: #bd4f4f;
}

.preorder-status-choice-urgent.is-active .preorder-status-choice-copy strong { color: #a63d3d; }
.preorder-status-choice-urgent.is-active .preorder-status-choice-copy small { color: #9f6b6b; }

.preorder-status-choice:disabled {
  cursor: wait;
  opacity: .68;
  transform: none;
}

.preorder-record-form .client-record-upload {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(116px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #c2d3e1;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  color: #355773;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 4px 12px rgba(39, 72, 98, .07);
}

.preorder-record-form .client-record-upload > span {
  color: #496579;
  font-size: 12px;
  font-weight: 950;
}

.preorder-record-form .client-record-upload input[type="file"] {
  height: 38px;
  padding: 4px;
  border: 1px solid #a8bfd2;
  border-radius: 6px;
  background: #fff;
  color: #2f4b63;
  font-size: 13px;
  font-weight: 850;
}

.preorder-record-form .client-record-upload input[type="file"]::file-selector-button {
  height: 28px;
  margin-right: 10px;
  padding: 0 14px;
  border: 1px solid #5f8fb8;
  border-bottom-color: #44739b;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff 0%, #ecf5fb 42%, #cfe3f2 100%);
  color: #244f72;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 0 #7da5c3;
}

.preorder-record-list {
  padding: 16px 18px 22px;
}

.preorder-record-state {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid #c3d2df;
  border-radius: 999px;
  background: #f7fafc;
  color: #3a5872;
  font-size: 12px;
  font-weight: 900;
}

.preorder-record-pill {
  min-width: 58px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid #9bb9d1;
  border-radius: 999px;
  background: #f7fbff;
  color: #255877;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 3px 8px rgba(39, 80, 112, .08);
}

.preorder-record-pill:hover {
  border-color: #6f9fc2;
  background: #edf7ff;
}

.preorder-record-pill.danger {
  border-color: #deb4ad;
  background: #fff6f4;
  color: #a34b42;
}

.preorder-record-pill.danger:hover {
  border-color: #c98379;
  background: #fff0ed;
}

@media (max-width: 980px) {
  .client-weekly-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .client-weekly-kpi:nth-child(3) {
    border-right: 0;
  }

  .client-weekly-kpi:nth-child(-n + 3) {
    border-bottom: 1px solid #e1e6e9;
  }

  .client-weekly-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-weekly-ranking {
    border-top: 1px solid #dce3e7;
    border-left: 0;
  }

  .client-mail-card {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .client-mail-form {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .client-mail-compose {
    border-right: 0;
    border-bottom: 1px solid #cfdae5;
  }

  .client-mail-scope-title,
  .client-mail-receiver-head {
    align-items: stretch;
    flex-direction: column;
  }

  .client-mail-receivers {
    max-height: 360px;
  }

  .client-mail-receiver {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .client-mail-receiver em {
    grid-column: 2;
  }

  .client-crm-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-crm-header-actions,
  .client-crm-tabs {
    flex-wrap: wrap;
  }

  .client-contract-dialog {
    width: 100vw;
    border-radius: 0;
  }

  .client-contract-body {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .client-contract-profile,
  .client-record-list {
    overflow: visible;
  }

  .client-record-item {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .client-record-actions {
    grid-column: 2;
    grid-template-columns: 1fr 1fr;
  }

  .preorder-workbench,
  .preorder-crm-layout,
  .preorder-contract-body {
    grid-template-columns: 1fr;
  }

  .preorder-contract-dialog {
    width: 100vw;
    border-radius: 0;
  }

  .preorder-contract-profile,
  .preorder-contract-records {
    height: auto;
    overflow: visible;
  }

  .preorder-follow-mode {
    grid-template-columns: 1fr;
  }

  .preorder-summary,
  .preorder-form-grid,
  .preorder-cbm-pino-row,
  .preorder-actual-cbm-row,
  .preorder-shipping-mode-row,
  .preorder-promise-inline-row,
  .preorder-promise-row,
  .preorder-etdeta-row,
  .preorder-user-row,
  .preorder-detail-grid {
    grid-template-columns: 1fr;
  }

  .preorder-followup-row {
    align-items: stretch;
    flex-direction: column;
  }

  .preorder-followup-date-field,
  .preorder-followup-date-field input {
    max-width: none;
    width: 100%;
  }

  .preorder-followup-popup-control {
    align-items: flex-start;
    margin-top: 0;
  }

  .preorder-container-fields {
    grid-template-columns: 1fr;
  }

  .preorder-promise-row .date-click-field input,
  .preorder-etdeta-row .date-click-field input {
    max-width: none;
  }

  .preorder-list-head {
    display: none;
  }

  .preorder-card-open,
  .preorder-row-open {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .preorder-date-strip,
  .preorder-card-status,
  .preorder-row-cargo,
  .preorder-row-open .preorder-card-actions {
    grid-column: 2;
  }

  .preorder-date-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preorder-card-foot,
  .preorder-card-actions {
    flex-wrap: wrap;
  }

  .preorder-card-actions {
    width: 100%;
    margin-left: 0;
  }

  .preorder-row-open .preorder-card-actions {
    justify-content: stretch;
  }

  .preorder-row-open .preorder-card-actions .preorder-list-record-button {
    width: 100%;
  }

  .preorder-groups,
  .preorder-detail {
    max-height: none;
  }
}

@media (max-width: 680px) {
  .client-weekly-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .client-weekly-period {
    width: 100%;
    grid-template-columns: auto 1fr 34px;
    margin-left: 0;
  }

  .client-weekly-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-weekly-kpi,
  .client-weekly-kpi:nth-child(3) {
    border-right: 1px solid #e1e6e9;
    border-bottom: 1px solid #e1e6e9;
  }

  .client-weekly-kpi:nth-child(even) {
    border-right: 0;
  }

  .client-weekly-kpi:nth-child(n + 5) {
    border-bottom: 0;
  }

  .client-weekly-trend,
  .client-weekly-ranking {
    padding-right: 10px;
    padding-left: 10px;
  }

  .client-weekly-chart {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }

  .client-weekly-day {
    min-width: 0;
  }

  .client-weekly-bar-track {
    width: 18px;
  }

  .client-weekly-rank-row {
    grid-template-columns: 24px minmax(68px, 92px) minmax(54px, 1fr) 40px;
    gap: 5px;
  }

  .client-weekly-foot {
    align-items: flex-end;
    flex-direction: column;
    gap: 2px;
  }
}

/* Pre-order visual polish: preserves the existing workbench structure and data density. */
#preOrderView .preorder-workbench {
  gap: 14px;
}

#preOrderView .preorder-groups,
#preOrderView .preorder-main {
  border-color: #ccdbe7;
  background: #fcfdff;
  box-shadow: 0 8px 22px rgba(37, 66, 93, .06);
}

#preOrderView #preOrderGroups button {
  border-color: #d7e2eb;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(38, 69, 96, .03);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

#preOrderView #preOrderGroups button.folder {
  border-color: #ead8ad;
  background: #fffaf0;
}

#preOrderView #preOrderGroups button:hover {
  border-color: #9ebbd3;
  background: #f5f9fc;
}

#preOrderView #preOrderGroups button.active,
#preOrderView #preOrderGroups button.folder.active {
  border-color: #2f6fa5;
  background: #edf5fb;
  box-shadow: inset 4px 0 0 #2f6fa5, 0 5px 14px rgba(35, 89, 132, .11);
}

#preOrderView #preOrderGroups button.active > .preorder-group-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

#preOrderView #preOrderGroups button.active > .preorder-group-title::after {
  content: "当前";
  flex: 0 0 auto;
  padding: 2px 7px;
  border-color: #b7d0e3;
  border: 1px solid #b7d0e3;
  border-radius: 999px;
  background: #ffffff;
  color: #286898;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}

#preOrderView .preorder-folder-bar {
  border-color: #bfd3e4;
  background: #f5f9fc;
  box-shadow: inset 0 1px 0 #ffffff;
}

#preOrderView .preorder-metric {
  border-color: #d3e0ea;
  border-top: 3px solid #c4d6e5;
  border-radius: 6px;
  background: #fbfdff;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

#preOrderView .preorder-metric:hover {
  border-color: #a9c2d5;
  background: #f6faff;
}

#preOrderView .preorder-metric.warn { border-top-color: #d3a24f; }
#preOrderView .preorder-metric.ok { border-top-color: #5b9a70; }
#preOrderView .preorder-metric.alert { border-top-color: #c76761; }
#preOrderView .preorder-metric.locked { border-top-color: #71869e; }
#preOrderView .preorder-metric.operation { border-top-color: #4e94ba; }

#preOrderView .preorder-metric.active {
  border-color: #2f6fa5;
  border-top-color: #2f6fa5;
  background: #edf5fb;
  box-shadow: inset 0 -3px 0 #2f6fa5, 0 4px 12px rgba(34, 91, 137, .09);
}

#preOrderView .preorder-list-head {
  border-color: #cbdde9;
  background: #edf4f9;
  box-shadow: 0 2px 6px rgba(38, 72, 102, .05);
}

#preOrderView .preorder-list-group {
  border-color: #cedee9;
  background: #f3f8fb;
  box-shadow: inset 4px 0 0 #5d91b8;
}

#preOrderView .preorder-card {
  border-color: #d6e1ea;
  box-shadow: 0 5px 14px rgba(35, 65, 93, .04);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

#preOrderView .preorder-card:hover {
  border-color: #a8c2d6;
  box-shadow: 0 8px 18px rgba(35, 65, 93, .08);
}

#preOrderView .preorder-card.active {
  border-color: #2f6fa5;
  box-shadow: 0 0 0 2px rgba(47, 111, 165, .11), 0 9px 20px rgba(35, 65, 93, .09);
}

#preOrderView .preorder-card.folder-selected,
#preOrderView .preorder-card.folder-selected .preorder-card-open,
#preOrderView .preorder-card.folder-selected .preorder-card-foot {
  background: #e6f1fa;
}

#preOrderView .preorder-date-block {
  border-color: #dbe5ed;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

#preOrderView .preorder-date-block.locked {
  border-color: #b7c8d8;
  background: #eff5fa;
}

#preOrderView .preorder-status-badge {
  border: 1px solid transparent;
  color: #35516a;
  background: #edf3f8;
}

#preOrderView .preorder-status-badge.alert { border-color: #e6b2ad; background: #fff1f0; color: #af413b; }
#preOrderView .preorder-status-badge.locked { border-color: #d9bf75; background: #fff7df; color: #805915; }
#preOrderView .preorder-status-badge.pending { border-color: #e6c281; background: #fff7e8; color: #96631a; }
#preOrderView .preorder-status-badge.range,
#preOrderView .preorder-status-badge.follow { border-color: #b9d3e6; background: #edf6fc; color: #286898; }
#preOrderView .preorder-status-badge.follow-overdue { border-color: #e0a49f; background: #fff0ef; color: #a33e39; }
#preOrderView .preorder-status-badge.fixed,
#preOrderView .preorder-status-badge.file { border-color: #c0d8c6; background: #eff8f1; color: #3f764d; }
#preOrderView .preorder-status-badge.ok { border-color: #cad5df; background: #f3f6f8; color: #5d6f80; }

#preOrderView .preorder-card-foot {
  border-color: #e0e8ef;
  background: #fafcfe;
}

#preOrderView .preorder-list-record-button {
  border-color: #2c6b9f;
  border-bottom-color: #1e557f;
  background: #2f6fa5;
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 0 #1e557f, 0 5px 10px rgba(32, 86, 129, .18);
}

#preOrderView .preorder-list-record-button:hover {
  border-color: #205c8d;
  background: #286898;
  color: #ffffff;
}

/* Comprehensive rating — legacy rules presented as an executive-grade workbench. */
.comprehensive-rating-entry {
  align-items: center;
  border-color: #233c5a !important;
  background: linear-gradient(135deg, #12253d, #244c74) !important;
  color: #f8fbff !important;
  box-shadow: inset 3px 0 0 #d5af61, 0 6px 16px rgba(20, 46, 75, .18);
}

.comprehensive-rating-entry .nav-icon {
  color: #d5af61;
}

.comprehensive-rating-entry .nav-label {
  color: #f8fbff;
}

.rating-modal-open {
  overflow: hidden;
}

.rating-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(7, 18, 32, .72);
  backdrop-filter: blur(10px) saturate(115%);
}

.rating-backdrop.hidden {
  display: none;
}

.rating-dialog {
  width: min(1680px, 97vw);
  height: min(900px, 94vh);
  overflow: hidden;
  border: 1px solid rgba(177, 201, 224, .72);
  border-radius: 22px;
  background: #f5f8fc;
  box-shadow: 0 32px 90px rgba(2, 13, 27, .42), inset 0 1px 0 #fff;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.rating-header {
  min-height: 94px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #f6f9fd;
  background:
    radial-gradient(circle at 74% -30%, rgba(93, 151, 201, .38), transparent 38%),
    linear-gradient(135deg, #0c1d32 0%, #173653 58%, #1f4a70 100%);
  border-bottom: 2px solid #c9a85d;
}

.rating-header.compact {
  min-height: 78px;
  padding: 16px 22px;
}

.rating-brand,
.rating-header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.rating-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(220, 187, 111, .74);
  border-radius: 15px;
  color: #f0d292;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  font: 800 15px/1 Georgia, serif;
  letter-spacing: .12em;
}

.rating-header .eyebrow {
  color: #d7b76c;
  letter-spacing: .16em;
}

.rating-header h3 {
  margin: 2px 0 0;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: .05em;
}

.rating-header p {
  margin: 4px 0 0;
  color: #aebfd0;
  font-size: 12px;
}

.rating-updated {
  color: #bfd0df;
  font-size: 12px;
  white-space: nowrap;
}

.rating-icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(194, 213, 230, .3);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #eef5fb;
  font-size: 21px;
  cursor: pointer;
}

.rating-icon-button:hover {
  border-color: rgba(221, 190, 117, .7);
  background: rgba(255,255,255,.14);
}

.rating-icon-button.admin-refresh::after {
  content: "";
  position: absolute;
}

.rating-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 1px;
  padding: 0 24px;
  background: #d7e0e9;
  border-bottom: 1px solid #c8d5e0;
}

.rating-tabs button {
  min-height: 66px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: #eef3f8;
  color: #40566c;
  cursor: pointer;
  text-align: left;
  transition: .16s ease;
}

.rating-tabs button span,
.rating-tabs button small {
  display: block;
}

.rating-tabs button span {
  font-size: 14px;
  font-weight: 800;
}

.rating-tabs button small {
  margin-top: 4px;
  color: #7a8d9f;
  font-size: 10px;
}

.rating-tabs button:hover {
  background: #f9fbfd;
}

.rating-tabs button.active {
  border-bottom-color: #c59c45;
  background: #fff;
  color: #142f4d;
  box-shadow: 0 -6px 18px rgba(27, 59, 88, .06);
}

.rating-overview {
  padding: 16px 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  background: #f5f8fc;
}

.rating-overview article {
  min-height: 82px;
  padding: 14px 16px;
  border: 1px solid #d5e0ea;
  border-radius: 13px;
  background: linear-gradient(145deg, #fff, #f5f8fb);
  box-shadow: 0 5px 15px rgba(33, 63, 91, .05);
}

.rating-overview span,
.rating-overview small,
.rating-overview strong {
  display: block;
}

.rating-overview span {
  color: #7890a5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.rating-overview strong {
  margin-top: 5px;
  overflow: hidden;
  color: #183854;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rating-overview small {
  margin-top: 3px;
  color: #8293a2;
  font-size: 10px;
}

.rating-table-shell {
  min-height: 0;
  margin: 0 24px;
  overflow: hidden;
  border: 1px solid #cbd8e3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(28, 56, 83, .07);
}

.rating-table-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.rating-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 0;
  color: #31495e;
  font-size: 12px;
}

.rating-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 13px 12px;
  border-right: 1px solid #d8e2ea;
  border-bottom: 1px solid #c1d0dd;
  background: #eaf1f6;
  color: #29445e;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.rating-table td {
  padding: 12px;
  border-right: 1px solid #edf1f4;
  border-bottom: 1px solid #e3e9ee;
  background: #fff;
  vertical-align: middle;
  white-space: nowrap;
}

.rating-table tbody tr:nth-child(even) td {
  background: #f9fbfd;
}

.rating-table tbody tr:hover td {
  background: #f0f6fb;
}

.rating-rank-cell {
  width: 58px;
  text-align: center;
}

.rating-rank {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #cbd7e0;
  border-radius: 50%;
  background: #f5f8fa;
  color: #536a7d;
  font: 700 14px/1 Georgia, serif;
}

.rating-rank.rank-1 { border-color: #d3ae5c; background: #fff8e8; color: #946b19; box-shadow: 0 0 0 4px #fffaf0; }
.rating-rank.rank-2 { border-color: #aab9c5; background: #f4f7f9; color: #667b8b; }
.rating-rank.rank-3 { border-color: #c69776; background: #fff4ed; color: #95623e; }

.rating-person-cell span,
.rating-person-cell small {
  display: block;
}

.rating-person-cell span {
  color: #173a58;
  font-size: 13px;
  font-weight: 800;
}

.rating-person-cell small {
  margin-top: 2px;
  color: #9aa9b5;
  font-size: 9px;
}

.rating-content-chip {
  padding: 4px 8px;
  border: 1px solid #d9e3eb;
  border-radius: 999px;
  background: #f5f8fa;
  color: #557086;
}

.rating-detail-link {
  padding: 0;
  border: 0;
  border-bottom: 1px dashed #3c789f;
  background: transparent;
  color: #276887;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.rating-detail-link small {
  display: block;
  margin-top: 3px;
  color: #8394a1;
  font-size: 9px;
  font-weight: 600;
}

.rating-detail-link.concise {
  min-width: 34px;
  text-align: center;
}

.rating-detail-link.danger-link {
  border-bottom-color: #c36e67;
  color: #a94e48;
}

.rating-rate-value {
  color: #235f7d;
  font-weight: 800;
}

.rating-score {
  color: #1e6388;
  font: 700 14px/1 Georgia, serif;
}

.rating-score.negative {
  color: #b65750;
}

.rating-time-cell {
  color: #788b9b;
  font-size: 10px;
}

.rating-loading-cell,
.rating-error-cell,
.rating-empty-cell {
  height: 120px;
  color: #74899a;
  text-align: center !important;
}

.rating-error-cell {
  color: #ad4f49;
}

.rating-loader {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 6px;
  border: 2px solid #cbd9e4;
  border-top-color: #2c6f9d;
  border-radius: 50%;
  vertical-align: -3px;
  animation: rating-spin .7s linear infinite;
}

@keyframes rating-spin { to { transform: rotate(360deg); } }

.rating-footer {
  min-height: 48px;
  padding: 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #7a8c9b;
  font-size: 10px;
}

.rating-footer span:first-child {
  color: #294b67;
  font-size: 12px;
  font-weight: 800;
}

.rating-detail-backdrop {
  z-index: 4300;
  background: rgba(6, 16, 28, .56);
}

.rating-detail-dialog {
  width: min(1240px, 94vw);
  height: min(760px, 88vh);
  grid-template-rows: auto auto minmax(0, 1fr);
  border-radius: 18px;
}

.rating-detail-tools {
  min-height: 54px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d5e0e8;
  color: #657d91;
  font-size: 11px;
}

.rating-detail-tools label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rating-detail-tools select {
  height: 32px;
  border: 1px solid #bdccd8;
  border-radius: 8px;
  background: #fff;
  color: #324f67;
}

.rating-detail-scroll {
  min-height: 0;
  padding: 0 18px 18px;
}

.rating-detail-table {
  min-width: 860px;
}

.rating-detail-table tr.important td,
.rating-detail-table tr.month-settle td {
  color: #b5524c;
  font-weight: 800;
}

.rating-order-link {
  color: #1e719d;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .rating-backdrop { padding: 0; }
  .rating-dialog { width: 100vw; height: 100vh; border-radius: 0; }
  .rating-header { padding: 16px; }
  .rating-header p, .rating-updated { display: none; }
  .rating-tabs { grid-template-columns: repeat(5, minmax(116px, 1fr)); padding: 0; overflow-x: auto; }
  .rating-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .rating-table-shell { margin: 0 12px; }
  .rating-footer { padding: 0 14px; }
}
/* Ship schedule management: legacy rules with a compact operational workbench. */
.ship-schedule-view {
  min-width: 0;
}

.ship-schedule-header {
  align-items: center;
}

.ship-schedule-header-status {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ship-schedule-mail-status {
  padding: 7px 11px;
  border: 1px solid #d8dee8;
  border-radius: 999px;
  background: #f6f8fb;
  color: #526074;
  font-size: 12px;
}

.ship-schedule-mail-status.ready {
  border-color: #b8dfce;
  background: #edf9f4;
  color: #147052;
}

.ship-schedule-mail-status.blocked {
  border-color: #f0c5bd;
  background: #fff2ef;
  color: #a83a2b;
}

.ship-schedule-tools {
  position: relative;
  padding: 15px 16px 14px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-bottom-color: #b9c6d4;
  border-radius: 13px;
  background: linear-gradient(145deg, #fff 0%, #f8fbfe 58%, #f1f6fa 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 1px 2px rgba(36, 54, 76, .06),
    0 10px 24px rgba(35, 57, 82, .09);
}

.ship-schedule-tools::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #2b668f 0%, #74a8c8 42%, rgba(116, 168, 200, 0) 86%);
  content: "";
}

.ship-schedule-search {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.ship-schedule-query-shell,
.ship-schedule-date-shell {
  display: inline-flex;
  align-items: center;
  height: 38px;
  overflow: hidden;
  border: 1px solid #aebdcc;
  border-bottom-color: #91a4b8;
  border-radius: 7px;
  background: linear-gradient(#fff, #f5f8fb);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(84, 109, 134, .08),
    0 2px 0 rgba(113, 139, 163, .23),
    0 6px 12px rgba(35, 60, 84, .07);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.ship-schedule-query-shell:focus-within,
.ship-schedule-date-shell:focus-within {
  border-color: #4d89b4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 2px 0 rgba(57, 111, 153, .32),
    0 0 0 3px rgba(54, 124, 178, .13),
    0 7px 15px rgba(37, 81, 115, .1);
}

.ship-schedule-query-shell {
  width: min(430px, 36vw);
  min-width: 330px;
}

.ship-schedule-query-shell select {
  width: 124px;
  height: 100%;
  flex: none;
  padding: 0 30px 0 12px;
  border: 0;
  border-right: 1px solid #cbd5df;
  border-radius: 0;
  background-color: #edf3f8;
  color: #263f59;
  outline: 0;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.ship-schedule-query-input {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  min-width: 0;
  height: 100%;
  flex: 1;
  padding: 0 11px;
}

.ship-schedule-query-input svg,
.ship-schedule-search-primary svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.ship-schedule-query-input svg {
  color: #52708b;
}

.ship-schedule-query-input input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1f3248;
  outline: 0;
  font-size: 13px;
  font-weight: 650;
}

.ship-schedule-query-input input::placeholder {
  color: #718398;
  font-weight: 550;
}

.ship-schedule-date-shell {
  padding-left: 11px;
}

.ship-schedule-date-shell > strong {
  padding-right: 9px;
  color: #284a67;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.ship-schedule-date-shell label {
  display: inline-flex;
  align-items: center;
  height: 100%;
  border-left: 1px solid #d2dbe4;
}

.ship-schedule-date-shell input {
  width: 110px;
  height: 100%;
  padding: 0 9px;
  border: 0;
  background: rgba(255, 255, 255, .58);
  color: #273d53;
  outline: 0;
  font-size: 12px;
  font-weight: 700;
}

.ship-schedule-date-shell > span {
  padding: 0 8px;
  color: #66798d;
  font-size: 11px;
  font-weight: 800;
}

.ship-schedule-search .ship-schedule-check {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 17px;
  border: 1px solid #ddc294;
  border-bottom-color: #c5a66f;
  border-radius: 999px;
  background: linear-gradient(#fffdf8, #f8eedc);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 0 rgba(181, 143, 78, .2),
    0 6px 12px rgba(110, 79, 31, .07);
  color: #714918;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.ship-schedule-search .ship-schedule-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ship-schedule-search .ship-schedule-check:hover {
  filter: brightness(1.025);
  transform: translateY(-1px);
}

.ship-schedule-search .ship-schedule-check:has(input:checked) {
  border-color: #9c641e;
  border-bottom-color: #75450f;
  background: linear-gradient(180deg, #d59a49 0%, #bd7b27 50%, #9d5e14 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 2px 0 #7d4a12, 0 8px 15px rgba(115, 66, 11, .2);
  color: #fff;
  text-shadow: 0 1px 1px rgba(92, 50, 7, .45);
}

.ship-schedule-search .ship-schedule-check:focus-within {
  outline: 3px solid rgba(179, 118, 37, .2);
  outline-offset: 2px;
}

.ship-schedule-search-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ship-schedule-command-cluster {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.ship-schedule-search-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 37px;
  min-width: 74px;
  padding: 0 15px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, border-color .15s ease;
}

.ship-schedule-search-primary {
  border: 1px solid #1d527a;
  border-bottom-color: #153e5e;
  background: linear-gradient(#4b8ab5 0%, #34739f 48%, #245c84 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(11, 48, 76, .16),
    0 2px 0 #153f60,
    0 7px 14px rgba(29, 81, 120, .2);
  color: #fff;
  text-shadow: 0 1px 1px rgba(12, 46, 71, .4);
}

.ship-schedule-search-reset {
  border: 1px solid #9eb0c0;
  border-bottom-color: #7f94a8;
  background: linear-gradient(#fff 0%, #eef3f7 52%, #dae4ec 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 0 #a9b8c5,
    0 7px 13px rgba(43, 66, 88, .11);
  color: #2d4359;
}

.ship-schedule-search-actions button:hover {
  filter: brightness(1.045);
  transform: translateY(-1px);
}

.ship-schedule-search-actions button:active {
  box-shadow: inset 0 1px 2px rgba(23, 45, 64, .14), 0 1px 0 rgba(52, 81, 105, .6), 0 3px 7px rgba(38, 65, 88, .11);
  transform: translateY(1px);
}

.ship-schedule-search-actions button:focus-visible,
.ship-schedule-port-filters button:focus-visible,
.ship-schedule-metrics button:focus-visible {
  outline: 3px solid rgba(46, 119, 173, .22);
  outline-offset: 2px;
}

.ship-schedule-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid #d8e0e7;
}

.ship-schedule-hide-updated {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 35px;
  padding: 7px 14px 7px 16px;
  border: 1px solid #cbd8e2;
  border-bottom-color: #b4c5d3;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #f2f6fa 100%);
  color: #34485e;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(128, 151, 170, .15), 0 3px 8px rgba(46, 67, 88, .06);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  cursor: pointer;
}

.ship-schedule-reference-table button.ship-schedule-actual-time {
  padding: 2px 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #176a9b;
  font: inherit;
  text-align: left;
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  cursor: pointer;
}
.ship-schedule-reference-table button.ship-schedule-actual-time:hover,
.ship-schedule-reference-table button.ship-schedule-actual-time:focus-visible {
  color: #124a73;
  text-decoration-style: solid;
  background: #edf6fc;
}
.ship-schedule-vessel-evidence {
  padding: 12px 14px;
  background: #f6fafc;
  color: #34485e;
}
.ship-schedule-reference-table button.ship-schedule-actual-time.is-adopted {
  background: #eaf5ff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #65a9d5;
  text-decoration: none;
}
.ship-schedule-actual-time.is-adopted::after {
  content: '✓ 已填入';
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: #21668d;
}
.ship-schedule-edit-form input.ship-schedule-reference-applied,
.ship-schedule-edit-form .ship-schedule-time-segments.ship-schedule-reference-applied {
  background: #eaf5ff;
  border-color: #65a9d5;
  box-shadow: 0 0 0 1px #65a9d5;
}
.ship-schedule-reference-applied-note {
  display: block;
  color: #21668d;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 400;
  margin-top: 5px;
}
.ship-schedule-vessel-evidence h4 { margin: 16px 0 8px; font-size: 13px; }
.ship-schedule-vessel-evidence p { margin: 7px 0; line-height: 1.6; }
.ship-schedule-vessel-next { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ship-schedule-vessel-evidence .ship-schedule-reference-table-wrap { max-height: 360px; overflow: auto; }
.ship-schedule-vessel-evidence table { width: 100%; }

.ship-schedule-hide-updated input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  clip-path: inset(50%);
}

.ship-schedule-toggle-track {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 18px;
  border: 1px solid #c6d0d8;
  border-radius: 999px;
  background: #dce3e9;
  box-shadow: inset 0 1px 2px rgba(63, 85, 105, .12);
  transition: background-color 150ms ease, border-color 150ms ease;
}

.ship-schedule-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(32, 52, 69, .2);
  transition: transform 150ms ease;
}

.ship-schedule-hide-updated:hover {
  border-color: #9fbace;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(128, 151, 170, .15), 0 4px 10px rgba(46, 67, 88, .1);
}

.ship-schedule-hide-updated:has(input:checked) {
  border-color: #9ac8e3;
  border-bottom-color: #77afd0;
  background: linear-gradient(180deg, #f6fcff 0%, #e4f3fc 100%);
  color: #286183;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(97, 164, 205, .16), 0 3px 9px rgba(66, 137, 181, .08);
}

.ship-schedule-hide-updated:active {
  box-shadow: inset 0 1px 3px rgba(63, 85, 105, .13);
}

.ship-schedule-hide-updated input:checked + .ship-schedule-toggle-track {
  border-color: #348ec4;
  background: #439dd3;
}

.ship-schedule-hide-updated input:checked + .ship-schedule-toggle-track::after {
  transform: translateX(14px);
}

.ship-schedule-hide-updated:has(input:focus-visible) {
  outline: 2px solid #348ec4;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ship-schedule-hide-updated,
  .ship-schedule-toggle-track,
  .ship-schedule-toggle-track::after { transition: none; }
}

.ship-schedule-metrics > span,
.ship-schedule-metrics > button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 35px;
  padding: 7px 13px;
  border: 1px solid #cbd5df;
  border-bottom-color: #b4c1cf;
  border-radius: 999px;
  background: linear-gradient(#fff, #edf3f7);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(138, 157, 176, .22), 0 5px 10px rgba(46, 67, 88, .06);
  color: #34485e;
}

.ship-schedule-metrics > button[data-ship-schedule-abnormal] {
  border-color: #ddc294;
  border-bottom-color: #c5a66f;
  background: linear-gradient(#fffdf8, #f8eedc);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(181, 143, 78, .2), 0 6px 12px rgba(110, 79, 31, .07);
  color: #714918;
}

.ship-schedule-metrics > button[data-ship-schedule-abnormal] strong {
  color: #714918;
}

.ship-schedule-metrics em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.ship-schedule-metrics strong {
  color: #162c43;
  font-size: 13px;
  font-weight: 950;
}

.ship-schedule-metrics button {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.ship-schedule-metrics button:hover {
  border-color: #85a7c1;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(109, 142, 167, .28), 0 8px 14px rgba(41, 78, 107, .1);
  transform: translateY(-1px);
}

.ship-schedule-metrics > button[data-ship-schedule-abnormal]:hover {
  border-color: #c79b59;
  border-bottom-color: #ae7d37;
  background: linear-gradient(#fffefb, #f4e3c6);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(175, 127, 56, .27), 0 8px 14px rgba(110, 79, 31, .1);
  color: #623c0f;
}

.ship-schedule-metrics button:active {
  box-shadow: inset 0 1px 2px rgba(38, 64, 86, .12), 0 1px 0 rgba(109, 142, 167, .25);
  transform: translateY(1px);
}

.ship-schedule-port-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  padding: 13px 2px 4px;
  overflow-x: auto;
  border-top: 1px solid #e7ebf0;
  scrollbar-width: thin;
}

.ship-schedule-port-filters button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  flex: none;
  padding: 6px 10px 6px 12px;
  border: 1px solid #b8c5d2;
  border-bottom-color: #91a4b7;
  border-radius: 8px;
  background: linear-gradient(#fff 0%, #eef3f7 54%, #dce5ed 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(73, 98, 122, .08),
    0 2px 0 #adbdca,
    0 7px 13px rgba(37, 61, 83, .1);
  color: #293f56;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 0 #fff;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space: nowrap;
}

.ship-schedule-port-filters button:hover {
  border-color: #6f9bbd;
  border-bottom-color: #4f7797;
  background: linear-gradient(#fff 0%, #edf7ff 50%, #cfe5f5 100%);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #83a6c0, 0 10px 17px rgba(35, 82, 118, .16);
  color: #174e77;
  transform: translateY(-2px);
}

.ship-schedule-port-filters button:active {
  box-shadow: inset 0 2px 3px rgba(35, 65, 91, .14), 0 1px 0 #7f9db5, 0 3px 7px rgba(36, 72, 99, .1);
  transform: translateY(1px);
}

.ship-schedule-port-filters button strong {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid #c6d1dc;
  background: linear-gradient(#f6f9fb, #dfe7ef);
  box-shadow: inset 0 1px 0 #fff;
  color: #293f57;
  font-size: 10px;
  font-weight: 950;
}

.ship-schedule-port-filters button.active {
  border-color: #17486d;
  border-bottom-color: #0f3653;
  background: linear-gradient(#4a86ad 0%, #326b94 46%, #205476 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    inset 0 -1px 0 rgba(10, 43, 66, .24),
    0 2px 0 #123d5d,
    0 8px 15px rgba(30, 77, 112, .24);
  color: #fff;
  text-shadow: 0 1px 1px rgba(8, 38, 60, .55);
  transform: none;
}

.ship-schedule-port-filters button.active strong {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  color: #fff;
}

.ship-schedule-port-filters button.active:active {
  box-shadow: inset 0 2px 3px rgba(8, 38, 60, .28), 0 1px 0 #123d5d, 0 4px 8px rgba(30, 77, 112, .16);
  transform: translateY(1px);
}

.ship-schedule-port-filters button.must-arrive:not(.active) {
  border-color: #d5aa69;
  border-bottom-color: #b8863d;
  background: linear-gradient(#fffdf8 0%, #faedda 52%, #efd4ab 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #d1aa70, 0 7px 13px rgba(119, 77, 23, .12);
  color: #714510;
}

.ship-schedule-abnormal-panel {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #efc4ba;
  border-radius: 12px;
  background: #fff9f7;
}

.ship-schedule-abnormal-panel > header,
.ship-schedule-abnormal-panel article {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(360px, 1.5fr) auto;
  align-items: center;
  gap: 16px;
  padding: 11px 14px;
  border-bottom: 1px solid #f1d8d2;
}

.ship-schedule-abnormal-panel > header {
  grid-template-columns: auto 1fr;
  background: #fff0ec;
}

.ship-schedule-abnormal-panel article:last-child {
  border-bottom: 0;
}

.ship-schedule-abnormal-panel article div {
  display: grid;
  gap: 4px;
}

.ship-schedule-abnormal-panel span {
  color: #765a54;
  font-size: 12px;
}

.ship-schedule-abnormal-panel button {
  white-space: nowrap;
}

.ship-schedule-mail-fields[hidden] {
  display: none;
}

.ship-schedule-table-wrap {
  margin-top: 12px;
  max-height: none;
}

.ship-schedule-table {
  min-width: 1380px;
}

.ship-schedule-table th,
.ship-schedule-table td { font-size: 12px; }
.ship-schedule-table .ship-schedule-transport-column { width: 128px; }
.ship-schedule-transport { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ship-schedule-table .ship-schedule-sequence-column {
  /* Three digits plus the inherited cell padding. */
  width: 56px;
}

.ship-schedule-table .ship-schedule-standard-column {
  width: 106px;
}

/* Keep the complete order number visible; give remaining space to updates. */
.ship-schedule-table .ship-schedule-order-column {
  width: 250px;
}

.ship-schedule-list-order-summary { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.ship-schedule-list-order-summary > * { flex: 0 0 auto; }

.ship-schedule-table td > .ship-schedule-search-context {
  margin-top: 2px;
  color: #526d83;
  font-size: 11px;
}

.ship-schedule-table .ship-schedule-vessel-column {
  width: 182px;
}

.ship-schedule-table .ship-schedule-carrier-column {
  width: 74px;
}

.ship-schedule-table .ship-schedule-update-column {
  width: 128px;
}

.ship-schedule-table td {
  /* Keep every schedule record at the same vertical rhythm as an order-list row. */
  min-height: 34px;
  padding: 4px 6px;
  vertical-align: middle;
}

.ship-schedule-table td > strong,
.ship-schedule-table td > span,
.ship-schedule-table td > small {
  display: block;
}

.ship-schedule-table td > small {
  margin-top: 2px;
  color: #758196;
  font-size: 11px;
  line-height: 1.35;
}

.ship-schedule-order-link {
  display: inline-block;
  color: #1d4f79;
  font-weight: 800;
  text-decoration: none;
}

.ship-schedule-order-link:hover {
  color: #0a6da9;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.ship-schedule-order-link:focus-visible {
  outline: 3px solid rgba(44, 129, 182, .28);
  outline-offset: 2px;
  border-radius: 3px;
}

.ship-schedule-remark-button {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid #b4d0e2;
  border-bottom-color: #8db3cb;
  border-radius: 999px;
  background: linear-gradient(#fff, #e6f2f9);
  box-shadow: 0 2px 0 #c3d9e7;
  color: #2b6489;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.45;
  cursor: pointer;
}

.ship-schedule-remark-button:hover { background: linear-gradient(#f6fcff, #d7ecf8); color: #174b70; }
.ship-schedule-remark-button:focus-visible { outline: 3px solid rgba(44, 129, 182, .3); outline-offset: 2px; }
.ship-schedule-remark-button:disabled { opacity: .65; cursor: wait; }

.ship-schedule-remarks-card {
  width: min(820px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
  border-radius: 20px;
}

.ship-schedule-remarks-head {
  padding: 22px 26px 18px;
  background: linear-gradient(115deg, #174773, #266588 70%, #2b737a);
  color: #fff;
}

.ship-schedule-remarks-head span {
  color: #c0dfef;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
}

.ship-schedule-remarks-head h3 {
  margin: 5px 0 2px;
  font-size: 22px;
  line-height: 1.25;
}

.ship-schedule-remarks-head p {
  margin: 0;
  color: #e2f0f8;
  font-size: 12px;
}

.ship-schedule-remarks-tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 14px 20px 0;
  overflow-x: auto;
  border-bottom: 1px solid #d8e6f0;
  background: #f4f8fc;
}

.ship-schedule-remarks-tabs button {
  display: grid;
  flex: 0 0 auto;
  gap: 3px;
  min-width: 145px;
  max-width: 210px;
  padding: 9px 15px 11px;
  border: 1px solid #c7d9e7;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(#eaf3f9, #dceaf4);
  color: #416681;
  text-align: left;
  cursor: pointer;
}

.ship-schedule-remarks-tabs button[aria-selected="true"] {
  background: #fff;
  color: #174c76;
  box-shadow: 0 -3px 12px rgba(32, 80, 115, .12);
}

.ship-schedule-remarks-tabs button:focus-visible {
  outline: 3px solid #7fc1e5;
  outline-offset: -3px;
}

.ship-schedule-remarks-tabs small { font-size: 10px; font-weight: 800; }
.ship-schedule-remarks-tabs strong { font-size: 13px; overflow-wrap: anywhere; }

.ship-schedule-remarks-pages {
  min-height: 220px;
  padding: 22px 26px 26px;
  overflow: auto;
  background: #fff;
}

.ship-schedule-remarks-pages article[hidden] { display: none; }

.ship-schedule-remarks-page-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 14px;
  color: #214c70;
}

.ship-schedule-remarks-page-title span { color: #7992a7; font-size: 11px; font-weight: 850; letter-spacing: .08em; }
.ship-schedule-remarks-page-title strong { font-size: 18px; }

.ship-schedule-remarks-text {
  min-height: 130px;
  padding: 20px 22px;
  border: 1px solid #d4e1ed;
  border-left: 4px solid #3986b0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fcfeff, #f7fbfe);
  color: #29475e;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ship-schedule-remarks-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #dce8f0;
  background: #f8fbfe;
}

.ship-schedule-remarks-footer button {
  min-width: 86px;
  padding: 7px 15px;
  border: 1px solid #a9c6da;
  border-radius: 999px;
  background: linear-gradient(#fff, #e7f2f9);
  box-shadow: 0 2px 0 #a7c2d3;
  color: #24597e;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.ship-schedule-remarks-footer button:disabled { opacity: .45; cursor: default; box-shadow: none; }
.ship-schedule-remarks-footer span { min-width: 50px; text-align: center; color: #57738b; font-size: 12px; font-weight: 800; }

@media (max-width: 600px) {
  .ship-schedule-remarks-head { padding: 18px 20px 15px; }
  .ship-schedule-remarks-pages { padding: 18px; }
  .ship-schedule-remarks-text { padding: 16px; }
  .ship-schedule-remarks-tabs { padding-left: 14px; }
}

.ship-schedule-table tr.ship-schedule-important-row > td {
  background: #fffaf0;
}

.ship-schedule-table tr.ship-schedule-expanded-row > td {
  border-top-color: #b9d8e9;
  border-bottom-color: #b9d8e9;
  background: linear-gradient(180deg, #eaf6fc 0%, #e2f1f9 100%);
}

.ship-schedule-table tr.ship-schedule-expanded-row > td:first-child {
  box-shadow: inset 4px 0 0 #3d8fba;
  color: #1f6389;
  font-weight: 900;
}

.ship-schedule-table tr.ship-schedule-expanded-row:hover > td {
  background: linear-gradient(180deg, #e5f4fc 0%, #dcedf7 100%);
}

.ship-schedule-table tr.ship-schedule-child-row > td {
  border-bottom-color: #d4e4ee;
  background: #f3f9fc;
  color: #59667a;
}

.ship-schedule-table tr.ship-schedule-child-row > td:first-child {
  box-shadow: inset 4px 0 0 #a7cfe2;
  color: #4f88a6;
  font-weight: 900;
}

.ship-schedule-table tr.ship-schedule-child-row:hover > td {
  background: #eaf5fb;
}

.ship-schedule-table tr.ship-schedule-expanded-row.ship-schedule-important-row > td {
  background: linear-gradient(180deg, #edf7fb 0%, #e5f2f7 100%);
}

.ship-schedule-port {
  font-weight: 650;
  color: #244f78;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ship-schedule-factory-summary { display: flex; align-items: center; min-width: 0; }
.ship-schedule-factory-summary > .ship-schedule-group-toggle { flex: 0 0 auto; }
.ship-schedule-name-preview {
  display: block; min-width: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: inherit; font: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; cursor: pointer;
}
.ship-schedule-name-preview.ship-schedule-port {
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  word-break: normal; text-overflow: clip; line-height: 1.35;
}
.ship-schedule-name-popover {
  box-sizing: border-box; width: min(360px, calc(100vw - 32px)); max-height: min(420px, 70vh);
  padding: 16px; overflow: auto; border: 1px solid #cfd7e2; border-radius: 9px;
  background: #fff; color: #244f78; box-shadow: 0 8px 28px #173f6233;
  font-family: inherit; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; white-space: normal;
}
.ship-schedule-name-popover ol { margin: 12px 0 0; padding-left: 24px; }
.ship-schedule-name-popover li { overflow-wrap: anywhere; white-space: normal; }

.ship-schedule-date {
  color: #17233a;
  white-space: nowrap;
}

.ship-schedule-vessel-voyage {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}

.ship-schedule-carrier-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ship-schedule-table td.ship-schedule-confirmed-time > .ship-schedule-date,
.ship-schedule-table td.ship-schedule-confirmed-time > small {
  color: #c4323e;
  font-weight: 700;
}

.ship-schedule-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ship-schedule-status-stack {
  display: block;
  min-width: 0;
}

.ship-schedule-status-line {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 3px;
}

.ship-schedule-status-stack .ship-schedule-update,
.ship-schedule-update-operator {
  display: block;
  min-height: 16px;
  overflow: hidden;
  color: #758196;
  font-size: 11px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ship-schedule-update-operator {
  display: none;
}

.ship-schedule-status-stack .ship-schedule-update {
  min-width: 0;
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.ship-schedule-badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: #edf1f6;
  color: #596578;
  font-size: 10px;
  white-space: nowrap;
}

.ship-schedule-badge.important,
.ship-schedule-badge.service {
  background: #fff0d9;
  color: #9a561b;
}

.ship-schedule-badge.deadline {
  background: #f0e9fb;
  color: #69419a;
  font-weight: 750;
}

.ship-schedule-badge.sailed,
.ship-schedule-badge.arrived {
  background: #e7f6ef;
  color: #117153;
}

.ship-schedule-update.recent-update {
  color: #bc4939 !important;
  font-weight: 900;
}

.ship-schedule-actions {
  display: flex;
  justify-content: center;
  gap: 7px;
}

/* The list action stays tactile but must not make a ship row taller than an
 * order-list row.  The larger pill treatment remains in the edit dialog. */
.ship-schedule-table .ship-schedule-actions button {
  box-sizing: border-box;
  min-height: 0;
  height: 27px;
  padding: 0 7px;
  line-height: 25px;
}

.ship-schedule-actions button,
.ship-schedule-group-toggle {
  padding: 5px 8px;
  border: 1px solid #cfd7e2;
  border-radius: 7px;
  background: #fff;
  color: #28577e;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}

.ship-schedule-group-toggle {
  display: inline-flex;
  margin: 0 0 0 5px;
  vertical-align: middle;
}

.ship-schedule-expanded-row .ship-schedule-group-toggle {
  border-color: #2e789f;
  border-bottom-color: #1c5d81;
  background: linear-gradient(180deg, #61a7cb 0%, #3e88ae 52%, #2e7198 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 2px 0 #205f82, 0 5px 10px rgba(33, 99, 135, .16);
  color: #fff;
  font-weight: 850;
  text-shadow: 0 1px 1px rgba(20, 72, 101, .42);
}

.ship-schedule-actions button[data-ship-schedule-edit] {
  min-width: 84px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 17px;
  border: 1px solid #2c6d9d;
  border-bottom-color: #164d78;
  border-radius: 999px;
  background: linear-gradient(180deg, #69add8 0%, #3e88bd 48%, #286a9f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 3px 0 #1b5682, 0 8px 16px rgba(30, 83, 124, .2);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-shadow: 0 1px 1px rgba(12, 53, 84, .45);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

/* The list is intentionally as dense as the order list; retain the capsule
 * treatment without allowing its original large call-to-action height here. */
.ship-schedule-table .ship-schedule-actions button[data-ship-schedule-edit] {
  min-width: 64px;
  height: 27px;
  gap: 4px;
  padding: 0 10px;
  font-size: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 2px 0 #1b5682, 0 4px 8px rgba(30, 83, 124, .16);
}

.ship-schedule-table .ship-schedule-actions button[data-ship-schedule-edit] span {
  font-size: 12px;
}

.ship-schedule-actions button[data-ship-schedule-edit] span {
  font-size: 14px;
  line-height: 1;
}

.ship-schedule-actions button[data-ship-schedule-edit]:hover {
  filter: saturate(1.08) brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 0 #164d78, 0 11px 20px rgba(30, 83, 124, .25);
  transform: translateY(-1px);
}

.ship-schedule-actions button[data-ship-schedule-edit]:active {
  box-shadow: inset 0 2px 4px rgba(14, 52, 80, .22), 0 1px 0 #164d78, 0 4px 9px rgba(30, 83, 124, .16);
  transform: translateY(2px);
}

.ship-schedule-edit-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.ship-schedule-edit-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.ship-schedule-order-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ship-schedule-order-summary > span {
  display: grid;
  gap: 2px;
  padding: 7px 10px;
  border: 1px solid #dce2ea;
  border-radius: 8px;
  background: #f7f9fc;
}

.ship-schedule-order-summary small {
  color: #748095;
}

.ship-schedule-date-grid,
.ship-schedule-status-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ship-schedule-status-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ship-schedule-date-grid label,
.ship-schedule-date-field,
.ship-schedule-status-fields label,
.ship-schedule-mail-fields label {
  display: grid;
  gap: 5px;
  color: #536174;
  font-size: 12px;
}

.ship-schedule-date-grid input,
.ship-schedule-mail-fields select {
  min-height: 36px;
}

.ship-schedule-date-grid small,
.ship-schedule-date-field small,
.ship-schedule-status-fields small {
  color: #8a94a4;
}

.ship-schedule-field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 24px;
}

.ship-schedule-field-heading > b {
  color: #536174;
  font-size: 12px;
  font-weight: 400;
}

.ship-schedule-status-check {
  padding: 12px 14px;
  border: 1px solid #d8e0e9;
  border-radius: 10px;
  background: #f8fafc;
  cursor: pointer;
}

.ship-schedule-check-control {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
}

.ship-schedule-check-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ship-schedule-check-control i {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid #aeb9c7;
  border-radius: 5px;
  background: #fff;
  color: transparent;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ship-schedule-check-control input:focus-visible + i {
  outline: 3px solid rgba(48, 101, 155, .2);
  outline-offset: 2px;
}

.ship-schedule-check-control input:checked + i {
  border-color: #247a5b;
  background: #247a5b;
  color: #fff;
}

.ship-schedule-check-control strong {
  color: #27364b;
  font-size: 14px;
}

.ship-schedule-inline-status {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 5px !important;
  color: #245f49 !important;
  cursor: pointer;
  white-space: nowrap;
}

.ship-schedule-inline-status i {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 12px;
}

.ship-schedule-inline-status strong {
  color: #315e4d;
  font-size: 12px;
}

.ship-schedule-status-check:has(input:checked) {
  border-color: #afd8c8;
  background: #eff9f4;
}

.ship-schedule-period-list {
  display: grid;
  gap: 12px;
}

.ship-schedule-period-list article {
  padding: 13px;
  border: 1px solid #dce2ea;
  border-radius: 10px;
}

.ship-schedule-period-list article > header {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  color: #536174;
}

.ship-schedule-period-list .ship-schedule-date-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ship-schedule-mail-fields {
  display: grid;
  grid-template-columns: minmax(420px, 1.25fr) minmax(360px, .9fr);
  align-items: center;
  gap: 14px;
  padding: 13px;
  border: 1px solid #cfe0d9;
  border-radius: 10px;
  background: #f5fbf8;
}

.ship-schedule-mail-fields p {
  margin: 0 0 7px;
  color: #34705d;
  font-size: 12px;
}

.ship-schedule-must-arrive {
  padding: 10px 12px;
  border-left: 3px solid #e28a38;
  background: #fff7ec;
  color: #83501d;
}

/* Refined ship-schedule editor, retaining the complete legacy information set. */
.ship-schedule-editor-tabs {
  display: flex;
  flex: none;
  gap: 28px;
  padding: 0 24px;
  border-bottom: 1px solid #cbdce9;
  background: #f8fbfe;
}

.ship-schedule-editor-tabs > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 0 9px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #60758a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.ship-schedule-editor-tabs > button[aria-selected="true"] {
  border-bottom-color: #388ec2;
  color: #21618f;
}

.ship-schedule-editor-tabs > button > span {
  font-size: 11px;
  font-weight: 500;
  color: #7b6745;
}

.ship-schedule-reference-panel {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 22px 24px;
  overflow-y: auto;
  background: #fff;
}

.ship-schedule-edit-dialog > [hidden],
.ship-schedule-edit-footer > [hidden] {
  display: none !important;
}

.ship-schedule-reference-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
}

.ship-schedule-reference-intro strong {
  color: #264d70;
  font-size: 16px;
}

.ship-schedule-reference-intro p,
.ship-schedule-reference-note {
  margin: 6px 0 0;
  color: #6a7988;
  font-size: 12px;
  line-height: 1.7;
}

.ship-schedule-reference-intro button {
  flex: none;
  min-height: 36px;
  border: 1px solid #ced9e2;
  border-radius: 5px;
  background: #eef7fd;
  color: #245f87;
  box-shadow: 0 2px 4px #234c7014;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}

.ship-schedule-reference-intro button:hover:not(:disabled) { background: #dfedf8; box-shadow: 0 3px 6px #234c7026; }
.ship-schedule-reference-intro button:disabled { color: #7c8995; background: #f3f6f8; box-shadow: none; cursor: wait; }

.ship-schedule-reference-order {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #526d85;
}

.ship-schedule-reference-order select {
  width: min(320px, 70%);
  min-width: 0;
}

.ship-schedule-reference-route {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr .8fr;
  gap: 18px;
  padding: 16px 0 20px;
  border-top: 1px solid #e0e8ef;
}

.ship-schedule-reference-route > div {
  min-width: 0;
}

.ship-schedule-reference-route small,
.ship-schedule-reference-table small {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 400;
  color: #708397;
}

.ship-schedule-reference-route strong {
  color: #284d70;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.ship-schedule-reference-route strong span {
  font-size: 13px;
  font-weight: 500;
}

.ship-schedule-reference-route i {
  font-style: normal;
  color: #6698bb;
}

.ship-schedule-reference-table-wrap {
  overflow-x: auto;
}

.ship-schedule-reference-table {
  width: 100%;
  min-width: 800px;
  table-layout: fixed;
  border-collapse: collapse;
  color: #35536c;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ship-schedule-reference-table .reference-source-col { width: 23%; }
.ship-schedule-reference-table .reference-update-col { width: 16%; }

.ship-schedule-reference-table th,
.ship-schedule-reference-table td {
  position: static;
  padding: 13px 12px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid #e0e8ef;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ship-schedule-reference-table thead th {
  background: #eef5fb;
  border-top: 1px solid #cbdce9;
  border-bottom-color: #cbdce9;
  font-weight: 700;
}

.ship-schedule-reference-table small {
  margin: 5px 0 0;
  font-size: 11px;
}

.ship-schedule-reference-table td strong {
  font-size: 13px;
  font-weight: 600;
}

.ship-schedule-reference-table .ship-schedule-reference-registered > * {
  background: #f8fafc;
}

.ship-schedule-reference-table summary {
  margin-top: 7px;
  color: #40769c;
  font-size: 11px;
  font-weight: 400;
  cursor: pointer;
}

.ship-schedule-reference-table details p {
  margin: 7px 0 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.7;
}

.ship-schedule-reference-pending {
  color: #7b6745;
  font-size: 12px;
}

.ship-schedule-reference-note { margin-top: 14px; }

.ship-schedule-reference-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}

.ship-schedule-reference-footer > span {
  color: #6a7988;
  font-size: 12px;
}

@media (max-width: 640px) {
  .ship-schedule-editor-tabs { padding: 0 14px; gap: 20px; }
  .ship-schedule-reference-panel { padding: 16px 12px; }
  .ship-schedule-reference-intro { align-items: flex-start; flex-direction: column; }
  .ship-schedule-reference-route { grid-template-columns: 1fr; gap: 14px; }
  .ship-schedule-reference-footer { flex-wrap: wrap; }
}

.ship-schedule-edit-dialog {
  display: flex;
  flex-direction: column;
  width: min(1120px, calc(100vw - 32px));
  height: min(900px, calc(100vh - 28px));
  max-height: calc(100vh - 28px);
  overflow: hidden;
  border: 1px solid rgba(45, 68, 97, .18);
  border-radius: 18px;
  background: #f4f7fb;
  box-shadow: 0 28px 80px rgba(17, 35, 59, .28);
}

.ship-schedule-edit-dialog .ship-schedule-editor-head {
  flex: none;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(132deg, #173a61 0%, #245985 58%, #28745f 135%);
  color: #fff;
}

.ship-schedule-edit-dialog > .ship-schedule-editor-head .eyebrow {
  color: #d7edff;
  opacity: 1;
  text-shadow: 0 1px 1px rgba(5, 25, 45, .35);
  -webkit-text-fill-color: #d7edff;
  -webkit-text-stroke: 0;
  letter-spacing: .16em;
}

.ship-schedule-edit-dialog > .ship-schedule-editor-head h3 {
  margin: 3px 0 0;
  color: #fff;
  font-size: 21px;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(4, 23, 41, .38);
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 0;
}

.ship-schedule-edit-dialog > .ship-schedule-editor-head p {
  margin: 5px 0 0;
  color: #e8f4fc;
  font-size: 12px;
  opacity: 1;
  text-shadow: 0 1px 1px rgba(4, 23, 41, .28);
  -webkit-text-fill-color: #e8f4fc;
}

.ship-schedule-editor-head > button {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.ship-schedule-edit-form {
  flex: 1 1 auto;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 16px;
  min-height: 0;
  padding: 18px 22px 24px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 100% 0, rgba(76, 137, 179, .08), transparent 30%),
    #f4f7fb;
}

.ship-schedule-edit-dialog > .edit-footer {
  flex: none;
  justify-content: flex-end;
  margin: 0;
  padding: 13px 22px;
  border-top: 1px solid #dce3ec;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 24px rgba(28, 48, 75, .06);
}

.ship-schedule-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ship-schedule-edit-dialog > .ship-schedule-edit-footer button {
  min-width: 108px;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
}

.ship-schedule-edit-dialog > .ship-schedule-edit-footer .ship-schedule-update-time-button {
  min-width: 122px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: #6d9e8d;
  border-bottom-color: #477c6b;
  background: linear-gradient(180deg, #fafffd 0%, #e2f3ec 48%, #c9e5da 100%);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #8bb3a5, 0 9px 17px rgba(39, 100, 80, .14);
  color: #23654f;
}

.ship-schedule-edit-dialog > .ship-schedule-edit-footer .ship-schedule-update-time-button:hover {
  background: linear-gradient(180deg, #fff 0%, #edf9f4 46%, #d5eee4 100%);
  box-shadow: inset 0 1px 0 #fff, 0 4px 0 #76a493, 0 12px 21px rgba(39, 100, 80, .19);
}

.ship-schedule-edit-dialog > .ship-schedule-edit-footer .ship-schedule-update-time-button span {
  font-size: 17px;
  line-height: 1;
}

.ship-schedule-edit-dialog > .ship-schedule-edit-footer button:disabled {
  transform: none;
}

.ship-schedule-order-information,
.ship-schedule-editor-flags,
.ship-schedule-leg-card {
  border: 1px solid #dae2ec;
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 24px rgba(29, 52, 80, .055);
}

.ship-schedule-order-information {
  height: max-content;
  overflow: hidden;
}

.ship-schedule-order-information.multiple-orders .ship-schedule-order-summary {
  max-height: 190px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.ship-schedule-order-information.multiple-orders .ship-schedule-order-summary::-webkit-scrollbar,
.ship-schedule-edit-form::-webkit-scrollbar {
  width: 9px;
}

.ship-schedule-order-information.multiple-orders .ship-schedule-order-summary::-webkit-scrollbar-track,
.ship-schedule-edit-form::-webkit-scrollbar-track {
  background: #eef3f7;
}

.ship-schedule-order-information.multiple-orders .ship-schedule-order-summary::-webkit-scrollbar-thumb,
.ship-schedule-edit-form::-webkit-scrollbar-thumb {
  border: 2px solid #eef3f7;
  border-radius: 999px;
  background: #9fb4c5;
}

.ship-schedule-order-information.multiple-orders .ship-schedule-order-summary::-webkit-scrollbar-thumb:hover,
.ship-schedule-edit-form::-webkit-scrollbar-thumb:hover {
  background: #7898b0;
}

.ship-schedule-order-information > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid #e5eaf1;
  background: #f8fafc;
}

.ship-schedule-order-information > header div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.ship-schedule-order-information > header small {
  color: #7a8ba0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

.ship-schedule-order-information > header strong {
  color: #24364d;
  font-size: 13px;
}

.ship-schedule-order-information > header > span {
  color: #8290a1;
  font-size: 11px;
}

.ship-schedule-order-summary {
  display: grid;
  gap: 0;
}

.ship-schedule-order-summary article {
  display: grid;
  /* Keep identifiers comparable at a glance: containers may wrap inside the
     same column width, but must never stretch the order summary. */
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(130px, .65fr);
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf0f4;
}

.ship-schedule-order-summary article:last-child {
  border-bottom: 0;
}

.ship-schedule-order-summary article > div {
  min-width: 0;
}

.ship-schedule-order-summary article small {
  display: block;
  margin-bottom: 3px;
  color: #8491a2;
  font-size: 10px;
}

.ship-schedule-order-summary article span,
.ship-schedule-order-summary article strong {
  display: block;
  overflow-wrap: anywhere;
  color: #35465c;
  font-size: 12px;
}

.ship-schedule-order-owner > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ship-schedule-order-owner .ship-schedule-editor-badge {
  padding: 3px 6px;
  font-size: 9px;
}

.ship-schedule-order-summary .ship-schedule-order-number strong {
  color: #1d4f79;
  font-size: 13px;
}

.ship-schedule-order-summary article nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.ship-schedule-order-summary article nav a {
  color: #3b6b90;
  font-size: 9px;
  text-decoration: none;
  white-space: nowrap;
}

.ship-schedule-copy-value {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.ship-schedule-copy-value > strong,
.ship-schedule-copy-value > span {
  /* Let the icon follow the content rather than pinning it to a column edge. */
  flex: 0 1 auto;
  max-width: calc(100% - 32px);
  min-width: 0;
  overflow-wrap: anywhere;
}

.ship-schedule-copy-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 150;
  min-width: 70px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid #9dc8b0;
  border-radius: 6px;
  background: #f1faf5;
  box-shadow: 0 7px 16px rgba(28, 66, 49, .14);
  color: #1f6847;
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.94);
  transition: opacity .1s ease, transform .1s ease;
}

.ship-schedule-copy-toast.failed {
  border-color: #e1aaa2;
  background: #fff4f2;
  color: #9c3d32;
}

.ship-schedule-copy-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ship-schedule-editor-flags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
}

.ship-schedule-track-link,
.ship-schedule-no-link,
.ship-schedule-editor-badge {
  padding: 5px 8px;
  border: 1px solid #d5deea;
  border-radius: 999px;
  background: #f7f9fc;
  color: #3a6488;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ship-schedule-editor-badge.important,
.ship-schedule-editor-badge.service,
.ship-schedule-editor-badge.deadline {
  border-color: #efd4aa;
  background: #fff7e8;
  color: #965c18;
}

.ship-schedule-leg-card {
  overflow: hidden;
}

.ship-schedule-leg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid #e5eaf1;
  background: linear-gradient(90deg, #f7fafc, #fbfcfd);
}

.ship-schedule-prominent-route {
  min-height: 76px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  padding: 13px 18px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(65, 130, 171, .12), transparent 60%),
    linear-gradient(90deg, #f5f9fc, #ffffff, #f5faf8);
}

.ship-schedule-edit-dialog .ship-schedule-prominent-route {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.ship-schedule-period-list > .ship-schedule-prominent-route {
  overflow: hidden;
  border: 1px solid #d9e5ee;
  border-radius: 14px;
  box-shadow: 0 7px 18px rgba(35, 75, 106, .06);
}

.ship-schedule-leg-route {
  justify-content: center;
  min-height: 48px;
  text-align: center;
}

.ship-schedule-leg-route > small {
  flex: none;
  color: #71879a;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
}

.ship-schedule-leg-route > strong {
  color: #294b65;
  font-size: 15px;
}

.ship-schedule-prominent-route > small {
  color: #70889d;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
}

.ship-schedule-prominent-route > strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: #183d5a;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1.18;
}

.ship-schedule-prominent-route > strong i {
  margin: 0 .38em;
  color: #277c66;
  font-style: normal;
}

.ship-schedule-period-list article > .ship-schedule-leg-head {
  margin-bottom: 0;
  color: #536174;
}

.ship-schedule-leg-identity {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.ship-schedule-leg-identity > strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(145deg, #285f8c, #1f486d);
  box-shadow: 0 5px 12px rgba(34, 80, 119, .22);
  color: #fff;
  font-size: 13px;
}

.ship-schedule-common-card .ship-schedule-leg-identity > strong {
  width: auto;
  padding: 0 10px;
}

.ship-schedule-leg-identity div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ship-schedule-leg-identity small {
  color: #8b98a9;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

.ship-schedule-leg-identity span {
  overflow: hidden;
  color: #25384f;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ship-schedule-leg-identity i {
  margin: 0 5px;
  color: #2d7b63;
  font-style: normal;
}

.ship-schedule-carrier-chip {
  padding: 6px 9px;
  border-radius: 8px;
  background: #eaf2f8;
  color: #345f81;
  font-size: 11px;
  font-weight: 700;
}

.ship-schedule-vessel-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin: 13px 14px 0;
  padding: 11px 12px;
  border: 1px solid #dbe6ef;
  border-radius: 15px;
  background:
    radial-gradient(circle at 0 50%, rgba(71, 139, 180, .1), transparent 28%),
    linear-gradient(90deg, #f0f7fb, #f9fcfe);
  box-shadow: inset 0 1px 0 #fff, 0 5px 13px rgba(39, 81, 111, .055);
}

.ship-schedule-vessel-data {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(105px, .5fr);
  gap: 9px;
  min-width: 0;
}

.ship-schedule-vessel-data > div,
.ship-schedule-vessel-readonly {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 48px;
  align-content: center;
  padding: 7px 11px;
  border: 1px solid #d4e1eb;
  border-radius: 11px;
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 1px 0 #fff;
}

.ship-schedule-vessel-readonly > span,
.ship-schedule-vessel-data small {
  color: #7d8d9f;
  font-size: 10px;
}

.ship-schedule-vessel-readonly strong,
.ship-schedule-vessel-data strong {
  min-width: 0;
  overflow: hidden;
  color: #263d53;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ship-schedule-vessel-value {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ship-schedule-vessel-value strong {
  flex: 1;
}

.ship-schedule-vessel-lookup {
  position: relative;
}

.ship-schedule-leg-card:has(.ship-schedule-vessel-lookup) {
  overflow: visible;
}

.ship-schedule-vessel-lookup .portal-lookup-menu {
  min-width: 0;
}

.ship-schedule-vessel-value input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 4px 7px;
  border: 1px solid #c4d6e3;
  border-radius: 8px;
  background: #fff;
  color: #263d53;
  font-family: inherit;
  font-size: 14px;
  font-weight: 750;
  box-shadow: inset 0 1px 2px rgba(38, 79, 109, .06);
}

.ship-schedule-vessel-value input:focus {
  outline: 2px solid rgba(48, 115, 157, .22);
  border-color: #5792b7;
}

.ship-schedule-icon-copy-button {
  position: relative;
  width: 25px;
  height: 25px;
  flex: none;
  padding: 0;
  border: 1px solid #b6cbd9;
  border-radius: 7px;
  background: linear-gradient(#fff, #edf5fa);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(112, 146, 170, .38), 0 3px 7px rgba(38, 79, 109, .08);
  color: #35688b;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.ship-schedule-icon-copy-button:hover {
  border-color: #73a0bd;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(92, 135, 165, .4), 0 5px 9px rgba(38, 79, 109, .12);
  transform: translateY(-1px);
}

.ship-schedule-icon-copy-button i::before,
.ship-schedule-icon-copy-button i::after {
  position: absolute;
  width: 8px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 1px;
  content: "";
}

.ship-schedule-icon-copy-button i::before {
  top: 6px;
  left: 7px;
  background: #f7fbfe;
}

.ship-schedule-icon-copy-button i::after {
  top: 8px;
  left: 10px;
  background: #fff;
}

.ship-schedule-icon-copy-button.copied {
  border-color: #5f9e83;
  background: linear-gradient(#f7fffb, #dff2e8);
  color: #237553;
}

.ship-schedule-icon-copy-button.copied i::before,
.ship-schedule-icon-copy-button.copied i::after {
  display: none;
}

.ship-schedule-icon-copy-button.copied::after {
  position: absolute;
  top: 3px;
  left: 7px;
  content: "✓";
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.ship-schedule-vessel-readonly.ship-schedule-voyage-field strong {
  color: #315e80;
  font-size: 13px;
}

.ship-schedule-actual-status-alert {
  display: grid;
  gap: 3px;
  margin: 12px 0 0;
  padding: 11px 13px;
  border: 1px solid #e5b5ac;
  border-radius: 10px;
  background: #fff5f2;
  color: #9b3d30;
  font-size: 12px;
  line-height: 1.55;
}

.ship-schedule-actual-status-alert[hidden] {
  display: none;
}

.ship-schedule-actual-status-invalid {
  border-color: #d15a4b !important;
  box-shadow: 0 0 0 3px rgba(209, 90, 75, .12) !important;
}

.ship-schedule-vessel-tools {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.ship-schedule-official-links {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: end;
  gap: 6px;
}

.ship-schedule-official-links a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 9px;
  border: 1px solid #d5deea;
  border-radius: 999px;
  background: linear-gradient(#fff, #f0f6fa);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(131, 157, 178, .2), 0 4px 9px rgba(40, 79, 108, .06);
  color: #3a6488;
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.ship-schedule-track-link.disabled {
  border-color: #e1e5eb;
  color: #9aa4b0;
  pointer-events: none;
}

.ship-schedule-track-link[data-ship-schedule-track] {
  appearance: none;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: #d5deea;
  border-bottom-color: #a9bfd0;
  background: linear-gradient(#fff, #edf5fb);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c6d5e1, 0 6px 12px rgba(38, 79, 109, .09);
  color: #3a6488;
  font-family: inherit;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.ship-schedule-track-link[data-ship-schedule-track]:hover {
  border-color: #90afc6;
  background: linear-gradient(#fff, #edf5fb);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #b6c9d8, 0 8px 15px rgba(38, 79, 109, .13);
  transform: translateY(-1px);
}

.ship-schedule-vessel-motion-backdrop {
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 26px;
  background: rgba(18, 35, 52, .34);
  backdrop-filter: blur(1px);
}

.ship-schedule-vessel-motion-frame {
  display: block;
  width: min(1180px, calc(100vw - 52px));
  height: min(820px, calc(100vh - 52px));
  overflow: hidden;
  border: 1px solid #9ab4c7;
  border-radius: 18px;
  background: #edf4f8;
  box-shadow: 0 24px 64px rgba(12, 31, 49, .34), 0 4px 14px rgba(12, 31, 49, .16);
}

@media (max-width: 700px) {
  .ship-schedule-vessel-motion-backdrop { padding: 10px; }
  .ship-schedule-vessel-motion-frame {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    border-radius: 14px;
  }
}

.ship-schedule-timing-grid,
.ship-schedule-period-list .ship-schedule-timing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(247, 250, 253, .78), rgba(241, 246, 250, .92));
}

.ship-schedule-timing-grid > label,
.ship-schedule-timing-grid > .ship-schedule-date-field {
  align-content: start;
  min-width: 0;
}

.ship-schedule-timing-side {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: start;
  gap: 13px;
  padding: 13px 14px 12px 16px;
  overflow: hidden;
  border: 1px solid #d3e0e9;
  border-radius: 15px;
  background: rgba(255, 255, 255, .94);
  box-shadow: inset 0 1px 0 #fff, 0 7px 18px rgba(36, 69, 96, .065);
}

.ship-schedule-timing-side::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #4f8fbc, #2d638c);
}

.ship-schedule-day-field { min-width: 0; }
.ship-schedule-timing-side .ship-schedule-unknown {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: #526b80;
  font-size: 12px;
}
.ship-schedule-unknown input[type="checkbox"] { width: 15px; height: 15px; margin: 0; }

.ship-schedule-timing-side.arrival::before {
  background: linear-gradient(180deg, #58a58a, #2d7660);
}

.ship-schedule-date-control,
.ship-schedule-time-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

.ship-schedule-edit-dialog [data-native-picker-surface],
.ship-schedule-edit-dialog input[type="date"] {
  cursor: pointer;
}

.ship-schedule-edit-dialog input.ship-schedule-time-segment {
  cursor: text;
}

.ship-schedule-timing-side .ship-schedule-date-control {
  gap: 7px;
}

.ship-schedule-timing-side .ship-schedule-field-heading {
  min-height: 31px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 7px;
  padding: 0 2px;
  border: 0;
}

.ship-schedule-timing-side .ship-schedule-field-heading > b {
  color: #263e54;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .025em;
  line-height: 1.25;
}

.ship-schedule-timing-side.departure .ship-schedule-field-heading > b {
  color: #285f89;
}

.ship-schedule-timing-side.arrival .ship-schedule-field-heading > b {
  color: #2b725c;
}

.ship-schedule-timing-side .ship-schedule-field-heading > em {
  color: #91a0ae;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: .03em;
  line-height: 1.4;
  white-space: nowrap;
}

.ship-schedule-timing-grid input[type="date"] {
  width: 100%;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 42px 0 13px;
  border: 1px solid #b7c9d7;
  border-bottom-color: #8fa8bb;
  border-radius: 11px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 56%, #f0f5f9 100%);
  box-shadow: inset 0 1px 1px rgba(30, 59, 82, .045), 0 2px 0 rgba(164, 185, 200, .42), 0 6px 12px rgba(42, 76, 102, .055);
  color: #243b50;
  font-family: inherit;
  font-size: 13px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: .035em;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}

.ship-schedule-timing-grid input[type="date"]:hover {
  border-color: #86a8bf;
  background: #fff;
}

.ship-schedule-timing-grid input[type="date"]:focus {
  border-color: #397dad;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(57, 125, 173, .13), 0 3px 0 rgba(57, 105, 139, .25), 0 9px 18px rgba(42, 89, 123, .1);
  transform: translateY(-1px);
}

.ship-schedule-timing-side.arrival input[type="date"]:focus {
  border-color: #3b8a70;
  box-shadow: 0 0 0 3px rgba(59, 138, 112, .13), 0 3px 0 rgba(59, 117, 97, .23), 0 9px 18px rgba(42, 100, 80, .09);
}

.ship-schedule-edit-dialog input.ship-schedule-chronology-invalid {
  border-color: #cf5148;
  background: linear-gradient(180deg, #fff 0%, #fff8f7 100%);
  box-shadow: 0 0 0 3px rgba(207, 81, 72, .14), 0 3px 0 rgba(174, 62, 53, .22), 0 9px 18px rgba(151, 52, 46, .09);
}

.ship-schedule-chronology-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid #e7aaa4;
  border-left: 4px solid #c94d44;
  border-radius: 12px;
  background: linear-gradient(90deg, #fff3f1, #fff9f8);
  box-shadow: inset 0 1px 0 #fff, 0 6px 15px rgba(147, 55, 48, .08);
  color: #87403a;
}

.ship-schedule-chronology-alert[hidden] {
  display: none;
}

.ship-schedule-chronology-alert strong {
  flex: none;
  color: #a13d36;
  font-size: 12px;
  font-weight: 900;
}

.ship-schedule-chronology-alert span {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.ship-schedule-timing-grid input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 50%;
  right: 10px;
  bottom: auto;
  left: auto;
  inset: 50% 10px auto auto;
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 3px;
  border-radius: 6px;
  background-color: #e6eff6;
  cursor: pointer;
  opacity: .82;
  transform: translateY(-50%);
}

.ship-schedule-time-status-line {
  display: grid;
  grid-template-columns: 84px 84px;
  justify-content: start;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

.ship-schedule-time-segments {
  width: 84px;
  height: 44px;
  min-width: 0;
  display: grid;
  grid-template-columns: 29px 8px 29px;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 4px;
  border: 1px solid #b7c9d7;
  border-bottom-color: #8fa8bb;
  border-radius: 11px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 56%, #f0f5f9 100%);
  box-shadow: inset 0 1px 1px rgba(30, 59, 82, .045), 0 2px 0 rgba(164, 185, 200, .42), 0 6px 12px rgba(42, 76, 102, .055);
}

.ship-schedule-time-segments:focus-within {
  border-color: #397dad;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(57, 125, 173, .13), 0 3px 0 rgba(57, 105, 139, .25), 0 9px 18px rgba(42, 89, 123, .1);
  transform: translateY(-1px);
}

.ship-schedule-timing-side.arrival .ship-schedule-time-segments:focus-within {
  border-color: #3b8a70;
  box-shadow: 0 0 0 3px rgba(59, 138, 112, .13), 0 3px 0 rgba(59, 117, 97, .23), 0 9px 18px rgba(42, 100, 80, .09);
}

.ship-schedule-time-segments.invalid,
.ship-schedule-timing-side.arrival .ship-schedule-time-segments.invalid,
.ship-schedule-time-segments.invalid:focus-within,
.ship-schedule-timing-side.arrival .ship-schedule-time-segments.invalid:focus-within {
  border-color: #cc5148;
  background: linear-gradient(180deg, #fff 0%, #fff5f3 100%);
  box-shadow: 0 0 0 3px rgba(204, 81, 72, .13), 0 3px 0 rgba(174, 62, 53, .22), 0 9px 18px rgba(151, 52, 46, .09);
}

.ship-schedule-time-segments .ship-schedule-time-segment {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #243b50;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: center;
}

.ship-schedule-time-segments .ship-schedule-time-segment::placeholder {
  color: #9cacb8;
  font-weight: 700;
}

.ship-schedule-time-segments i {
  color: #4e718b;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

.ship-schedule-time-status-line .ship-schedule-time-input {
  display: none;
}

.ship-schedule-time-status-line .ship-schedule-time-segments {
  width: 84px;
  min-width: 0;
}

.ship-schedule-time-status-line .ship-schedule-inline-status {
  min-height: 32px;
  padding: 2px 3px 2px 0;
}

.ship-schedule-time-range-error {
  min-height: 14px;
  margin: 1px 2px 0;
  color: #ad3f37;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
}

.ship-schedule-time-range-error[hidden] {
  display: none;
}

.ship-schedule-timing-side .ship-schedule-time-field > small {
  min-height: 14px;
  margin: 0 2px;
  color: #8d9ba8;
  font-size: 9px;
  font-weight: 600;
  line-height: 14px;
}

.ship-schedule-period-list {
  gap: 14px;
}

.ship-schedule-period-list article {
  padding: 0;
}

.ship-schedule-edit-dialog > .ship-schedule-editor-head > button {
  border-radius: 999px;
}

.ship-schedule-edit-dialog .ship-schedule-official-links a,
.ship-schedule-edit-dialog .ship-schedule-track-link {
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(131, 157, 178, .28), 0 5px 10px rgba(40, 79, 108, .07);
}

.ship-schedule-mail-fields {
  border-color: #cbded6;
  border-radius: 12px;
  background: linear-gradient(90deg, #f4faf7, #f8fbfa);
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 9px 12px;
  padding: 10px 12px;
}

/* Floating navigation must not cover the active schedule command buttons. */
body:has(#shipScheduleEditModal) #employeeSiteNotification,
body:has(#shipScheduleEditModal) #customerTaskQuickOpen {
  visibility: hidden;
  pointer-events: none;
}

.ship-schedule-mail-fields .ship-schedule-reason-field {
  min-width: 0;
  display: grid;
  /* Keep the mail decision, selected reason, and keyword search on one
     deliberate desktop baseline. The search is intentionally compact. */
  grid-template-columns: minmax(155px, 190px) 340px;
  justify-content: start;
  align-items: center;
  gap: 8px;
  color: #42615a;
  font-size: 12px;
}

.ship-schedule-mail-fields .ship-schedule-reason-field[hidden] {
  display: none;
}

.ship-schedule-reason-field.attention select {
  border-color: #ba4e42;
  box-shadow: 0 0 0 3px rgba(186, 78, 66, .14);
}

.ship-schedule-mail-help {
  grid-column: 1 / -1;
  margin: 0;
  color: #8a4d3f;
  font-size: 10px;
}

.ship-schedule-mail-decision {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ship-schedule-mail-decision > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ship-schedule-mail-decision label {
  min-height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border: 1px solid #abc5bc;
  border-bottom-color: #87aa9e;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #f4faf7 58%, #e5f1ec 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(116, 154, 140, .36), 0 7px 13px rgba(43, 91, 74, .08);
  color: #315e50;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}

.ship-schedule-mail-decision label:hover {
  border-color: #6c9e8d;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(100, 145, 129, .4), 0 9px 16px rgba(43, 91, 74, .12);
  transform: translateY(-1px);
}

.ship-schedule-mail-decision input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ship-schedule-mail-decision i {
  width: 16px;
  height: 16px;
  flex: none;
  box-sizing: border-box;
  border: 2px solid #7f9e94;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px #fff;
}

.ship-schedule-mail-decision span {
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.ship-schedule-mail-decision label:has(input:checked) {
  border-color: #2e7b61;
  border-bottom-color: #1e644d;
  background: linear-gradient(180deg, #f4fff9, #dcefe6);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(41, 111, 87, .42), 0 9px 17px rgba(37, 103, 80, .14);
  color: #1f684f;
}

.ship-schedule-mail-decision input:checked + i {
  border-color: #247557;
  background: #247557;
}

.ship-schedule-mail-decision input:focus-visible + i {
  outline: 3px solid rgba(42, 127, 95, .2);
  outline-offset: 2px;
}

.ship-schedule-mail-decision label:has(input:disabled) {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
}

.ship-schedule-mail-decision.attention {
  padding: 8px;
  border-radius: 15px;
  background: #fff5e9;
  box-shadow: 0 0 0 3px rgba(222, 132, 47, .22);
  animation: ship-schedule-mail-attention .35s ease 2;
}

@keyframes ship-schedule-mail-attention {
  50% { transform: translateX(3px); }
}

.ship-schedule-reason-controls select,
.ship-schedule-reason-search input,
.ship-schedule-reason-field > select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 1px solid #b9cbd1;
  border-radius: 7px;
  background: #fff;
  color: #294255;
  font: inherit;
}

.ship-schedule-reason-search {
  position: relative;
  width: 340px;
  min-width: 0;
}

.ship-schedule-reason-search input {
  padding: 7px 31px 7px 10px;
  box-shadow: inset 0 1px 2px rgba(34, 62, 73, .06);
}

.ship-schedule-reason-search input:focus {
  border-color: #5e9a87;
  outline: 3px solid rgba(65, 139, 114, .13);
}

.ship-schedule-reason-suggestions {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 80;
  width: max(100%, 430px);
  max-width: min(620px, calc(100vw - 70px));
  max-height: 268px;
  overflow: auto;
  border: 1px solid #9fbdb4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(27, 58, 52, .22);
}

.ship-schedule-reason-suggestions button {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 44px;
  padding: 8px 11px;
  border: 0;
  border-bottom: 1px solid #e5eeeb;
  background: #fff;
  color: #294255;
  text-align: left;
  cursor: pointer;
}

.ship-schedule-reason-suggestions button:last-child {
  border-bottom: 0;
}

.ship-schedule-reason-suggestions button:hover,
.ship-schedule-reason-suggestions button.active {
  background: #e9f5f0;
}

.ship-schedule-reason-suggestions strong,
.ship-schedule-reason-suggestions small {
  overflow-wrap: anywhere;
  white-space: normal;
}

.ship-schedule-reason-suggestions strong {
  color: #233f51;
  font-size: 12px;
}

.ship-schedule-reason-suggestions small {
  color: #71837f;
  font-size: 10px;
}

.ship-schedule-reason-suggestions mark {
  padding: 0 2px;
  border-radius: 3px;
  background: #ffe16b;
  color: #183d36;
  font-weight: 900;
}

.ship-schedule-reason-empty {
  padding: 16px 12px;
  color: #7d8d88;
  text-align: center;
}

@media (max-width: 980px) {
  .ship-schedule-query-shell {
    width: 100%;
    min-width: 0;
  }

  .ship-schedule-search-actions {
    margin-left: auto;
  }

  .ship-schedule-date-grid,
  .ship-schedule-period-list .ship-schedule-date-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ship-schedule-mail-fields {
    grid-template-columns: 1fr;
  }

  .ship-schedule-mail-fields .ship-schedule-reason-field {
    grid-template-columns: minmax(155px, 190px) 340px;
  }

  .ship-schedule-abnormal-panel article {
    grid-template-columns: 1fr;
  }

  .ship-schedule-order-summary article,
  .ship-schedule-timing-grid,
  .ship-schedule-period-list .ship-schedule-timing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ship-schedule-vessel-overview {
    grid-template-columns: 1fr;
  }

  .ship-schedule-vessel-tools {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .ship-schedule-official-links {
    justify-content: start;
  }
}

@media (max-width: 700px) {
  .ship-schedule-tools {
    padding-right: 12px;
    padding-left: 12px;
  }

  .ship-schedule-date-shell {
    width: 100%;
  }

  .ship-schedule-date-shell label {
    min-width: 0;
    flex: 1;
  }

  .ship-schedule-date-shell input {
    width: 100%;
  }

  .ship-schedule-search .ship-schedule-check {
    flex: 1;
  }

  .ship-schedule-search-actions {
    width: 100%;
  }

  .ship-schedule-search-actions button {
    flex: 1;
  }

  .ship-schedule-mail-fields .ship-schedule-reason-field {
    grid-template-columns: 1fr;
  }

  .ship-schedule-reason-search {
    width: 100%;
  }

  .ship-schedule-mail-decision > div {
    grid-template-columns: 1fr;
  }

  .ship-schedule-reason-suggestions {
    width: 100%;
    max-width: none;
  }

  .ship-schedule-timing-grid,
  .ship-schedule-period-list .ship-schedule-timing-grid,
  .ship-schedule-timing-side {
    grid-template-columns: 1fr;
  }

  .ship-schedule-vessel-data,
  .ship-schedule-vessel-tools {
    grid-template-columns: 1fr;
  }

  .ship-schedule-official-links {
    grid-template-columns: repeat(2, max-content);
  }

  .ship-schedule-prominent-route > strong {
    font-size: 20px;
  }
}

/* Comprehensive rating as a normal workspace page, aligned with the portal palette. */
.comprehensive-rating-entry {
  border-color: #c4d7e6 !important;
  background: #edf5fb !important;
  color: #2d638e !important;
  box-shadow: inset 3px 0 0 #5d91b8, 0 3px 10px rgba(37, 83, 119, .08);
}

.comprehensive-rating-entry .nav-icon,
.comprehensive-rating-entry .nav-label {
  color: #2d638e;
}

.comprehensive-rating-entry:hover,
.comprehensive-rating-entry.active {
  border-color: #8eb1ca !important;
  background: #dfeef8 !important;
  color: #1f577f !important;
}

.rating-page:not(.hidden) {
  min-height: calc(100vh - 84px);
  display: grid;
  grid-template-rows: auto auto auto minmax(360px, 1fr) auto;
  background: #f4f7fa;
}

.rating-page-header {
  min-height: 82px;
  border-bottom: 1px solid #cfdae4;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(45, 77, 105, .05);
}

.rating-page-header .eyebrow {
  color: #5886a8;
  letter-spacing: .12em;
}

.rating-page-header h2 {
  color: #243f58;
}

.rating-page-header p {
  margin: 4px 0 0;
  color: #8495a4;
  font-size: 11px;
}

.rating-page-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rating-page .rating-updated {
  color: #718597;
}

.rating-page .rating-tabs {
  padding: 0 18px;
  border-bottom-color: #cbd8e3;
  background: #dbe4eb;
}

.rating-page .rating-tabs button {
  background: #edf3f7;
}

.rating-page .rating-tabs button.active {
  border-bottom-color: #4f87ad;
  background: #ffffff;
  color: #265777;
}

.rating-page .rating-overview {
  padding: 15px 18px;
  background: #f4f7fa;
}

.rating-page .rating-overview article {
  border-color: #d2dee8;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(40, 72, 99, .05);
}

.rating-page .rating-table-shell {
  margin: 0 18px;
  border-color: #c7d6e2;
  border-radius: 8px;
  box-shadow: 0 5px 18px rgba(42, 72, 98, .06);
}

.rating-page .rating-table th {
  background: #e9f1f6;
  color: #31546d;
}

.rating-page .rating-footer {
  padding: 0 20px;
}

.rating-detail-dialog .rating-header {
  color: #29465f;
  border-bottom: 1px solid #c9d8e4;
  background: linear-gradient(180deg, #ffffff, #edf4f9);
}

.rating-detail-dialog .rating-header .eyebrow {
  color: #5c89aa;
}

.rating-detail-dialog .rating-header h3 {
  color: #29465f;
}

.rating-detail-dialog .rating-icon-button {
  border-color: #c5d4df;
  background: #ffffff;
  color: #52728a;
}

.rating-detail-dialog .rating-icon-button:hover {
  border-color: #83aac5;
  background: #e8f2f8;
  color: #285f87;
}

@media (max-width: 900px) {
  .rating-page:not(.hidden) {
    min-height: calc(100vh - 68px);
    grid-template-rows: auto auto auto minmax(320px, 1fr) auto;
  }

  .rating-page-header {
    align-items: flex-start;
    gap: 10px;
  }

  .rating-page-actions {
    align-self: center;
  }

  .rating-page .rating-tabs {
    padding: 0;
    overflow-x: auto;
  }

  .rating-page .rating-overview {
    padding: 12px;
  }

  .rating-page .rating-table-shell {
    margin: 0 12px;
  }
}

/* Comprehensive rating executive workbench — refined light enterprise hierarchy. */
.rating-page:not(.hidden) {
  min-width: 0;
  min-height: calc(100vh - 78px);
  padding: 14px 16px 18px;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto auto minmax(420px, 1fr);
  gap: 12px;
  color: #243b4f;
  background: #edf2f6;
}

.rating-page-header {
  min-height: 86px;
  padding: 15px 20px;
  border: 1px solid #cbd8e3;
  border-radius: 10px;
  background: linear-gradient(105deg, #ffffff 0%, #fbfdff 58%, #f1f6fa 100%);
  box-shadow: inset 0 1px 0 #fff, 0 7px 22px rgba(39, 67, 91, .07);
}

.rating-title-block {
  min-width: 0;
}

.rating-breadcrumb,
.rating-title-line,
.rating-page-actions,
.rating-freshness,
.rating-tabs button,
.rating-data-meta,
.rating-inline-detail-header {
  display: flex;
  align-items: center;
}

.rating-breadcrumb {
  gap: 8px;
  color: #8293a2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

.rating-breadcrumb i {
  width: 22px;
  height: 1px;
  background: #b7c7d3;
}

.rating-breadcrumb strong {
  color: #4f718b;
  font-weight: 800;
}

.rating-title-line {
  gap: 11px;
  margin-top: 4px;
}

.rating-page-header .rating-title-line h2 {
  margin: 0;
  color: #203f59;
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .06em;
}

.rating-source-badge {
  min-height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #c8d8e4;
  border-radius: 3px;
  background: #f2f7fa;
  color: #55748c;
  font-size: 10px;
  font-weight: 800;
}

.rating-page-header p {
  margin-top: 4px;
  color: #7c8d9b;
  font-size: 11px;
}

.rating-page-actions {
  gap: 14px;
}

.rating-freshness {
  min-width: 142px;
  align-items: flex-end;
  flex-direction: column;
  gap: 3px;
}

.rating-freshness span {
  color: #8999a6;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
}

.rating-freshness strong {
  color: #3d5e78;
  font-size: 11px;
  font-weight: 800;
}

.rating-freshness small {
  max-width: 270px;
  color: #718596;
  font-size: 10px;
  line-height: 1.35;
  text-align: right;
}

.rating-refresh-button {
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid #6c94b1;
  border-bottom-color: #486f8d;
  border-radius: 4px;
  background: linear-gradient(#ffffff 0%, #e7f0f6 100%);
  color: #315f80;
  font-size: 11px;
  font-weight: 850;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b3c5d2, 0 5px 12px rgba(47, 86, 116, .10);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.rating-refresh-button:hover {
  border-color: #477c9f;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #9db5c7, 0 8px 15px rgba(47, 86, 116, .14);
  transform: translateY(-1px);
}

.rating-leadership {
  min-height: 112px;
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(320px, 1.1fr) minmax(430px, 1.5fr);
  overflow: hidden;
  border: 1px solid #c7d5e0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 7px 20px rgba(38, 67, 91, .06);
}

.rating-leader-primary {
  position: relative;
  padding: 18px 22px 16px 25px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-right: 1px solid #d8e1e8;
  background: linear-gradient(120deg, #f7fbfe, #edf5fa);
}

.rating-leader-primary::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(#3b7097, #b79a5c);
}

.rating-leader-primary > span {
  color: #71889a;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}

.rating-leader-primary > strong {
  margin-top: 6px;
  color: #173f5d;
  font-family: Georgia, "Songti SC", serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .03em;
}

.rating-leader-primary > small {
  margin-top: 4px;
  color: #8193a1;
  font-size: 10px;
}

.rating-top-three {
  min-width: 0;
  margin: 0;
  padding: 16px 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  list-style: none;
  border-right: 1px solid #d8e1e8;
}

.rating-top-three li {
  min-width: 0;
  padding: 8px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border-right: 1px solid #e1e8ee;
}

.rating-top-three li:last-child {
  border-right: 0;
}

.rating-top-three b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #c3d0da;
  border-radius: 50%;
  background: #f6f9fb;
  color: #526d81;
  font-family: Georgia, serif;
  font-size: 12px;
}

.rating-top-three .rank-1 b {
  border-color: #cbb06e;
  background: #fffaf0;
  color: #8b681f;
}

.rating-top-three .rank-2 b {
  border-color: #aebfca;
  background: #f6f8fa;
  color: #607786;
}

.rating-top-three .rank-3 b {
  border-color: #c8a081;
  background: #fff7f1;
  color: #8a6041;
}

.rating-top-three span {
  overflow: hidden;
  color: #294c66;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rating-leadership-context {
  min-width: 0;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: .55fr 1.35fr 1fr;
  align-items: center;
}

.rating-leadership-context dl {
  min-width: 0;
  margin: 0;
  padding: 3px 16px;
  border-right: 1px solid #e0e7ed;
}

.rating-leadership-context dl:last-child {
  border-right: 0;
}

.rating-leadership-context dt {
  color: #8495a2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}

.rating-leadership-context dd {
  margin: 7px 0 0;
  overflow: hidden;
  color: #294a63;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rating-page .rating-tabs {
  min-height: 64px;
  padding: 0 8px;
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid #c9d6e1;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 5px 16px rgba(38, 67, 91, .05);
}

.rating-page .rating-tabs button {
  position: relative;
  min-height: 62px;
  padding: 10px 14px;
  gap: 10px;
  border: 0;
  border-right: 1px solid #e0e7ed;
  border-bottom: 3px solid transparent;
  background: #ffffff;
  color: #536d81;
  text-align: left;
}

.rating-page .rating-tabs button:last-child {
  border-right: 0;
}

.rating-page .rating-tabs button > b {
  color: #a1afba;
  font-family: Georgia, serif;
  font-size: 10px;
  font-weight: 700;
}

.rating-page .rating-tabs button > span {
  min-width: 0;
  font-size: 12px;
  font-weight: 850;
}

.rating-page .rating-tabs button small {
  margin-top: 4px;
  overflow: hidden;
  color: #8c9ba7;
  font-size: 9px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rating-page .rating-tabs button:hover {
  background: #f7fafc;
}

.rating-page .rating-tabs button.active {
  border-bottom-color: #b79a5c;
  background: linear-gradient(#f7fbfe, #ffffff);
  color: #204e6e;
  box-shadow: inset 0 3px 0 #3d7399;
}

.rating-page .rating-tabs button.active > b {
  color: #a5833f;
}

.rating-workbench {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.rating-workbench.detail-open {
  grid-template-columns: minmax(520px, 1.2fr) minmax(420px, .8fr);
}

.rating-data-panel,
.rating-inline-detail {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #c5d3de;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(37, 65, 88, .07);
}

.rating-data-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.rating-data-header {
  min-height: 61px;
  padding: 11px 15px 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #cfdbe4;
  background: linear-gradient(#ffffff, #f6f9fb);
}

.rating-section-kicker {
  color: #8193a1;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
}

.rating-data-header h3 {
  margin: 3px 0 0;
  color: #214862;
  font-size: 15px;
  font-weight: 850;
}

.rating-data-meta {
  justify-content: flex-end;
  gap: 12px;
}

.rating-data-meta span {
  max-width: 350px;
  overflow: hidden;
  color: #7b8d9b;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rating-data-meta strong {
  min-height: 27px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #c4d4df;
  border-radius: 3px;
  background: #f0f6fa;
  color: #3d6682;
  font-size: 10px;
  font-weight: 850;
}

.rating-page .rating-table-shell {
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.rating-page .rating-table {
  min-width: 1060px;
  color: #324b5e;
  font-size: 11px;
}

.rating-page .rating-table th {
  height: 42px;
  padding: 0 12px;
  border-right: 1px solid #d8e2e9;
  border-bottom: 1px solid #bdceda;
  background: #eaf1f6;
  color: #35546b;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .015em;
}

.rating-page .rating-table td {
  height: 53px;
  padding: 0 12px;
  border-right-color: #e5ebf0;
  border-bottom-color: #dfe6eb;
  color: #3c5365;
  font-size: 11px;
}

.rating-page .rating-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.rating-page .rating-table tbody tr:hover td,
.rating-page .rating-table tbody tr.detail-active td {
  background: #edf5fa;
}

.rating-page .rating-table th:first-child,
.rating-page .rating-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 54px;
  min-width: 54px;
  text-align: center;
}

.rating-page .rating-table th:nth-child(2),
.rating-page .rating-table td:nth-child(2) {
  position: sticky;
  left: 78px;
  z-index: 3;
  min-width: 112px;
  box-shadow: 6px 0 10px rgba(32, 62, 84, .045);
}

.rating-page .rating-table th:first-child,
.rating-page .rating-table th:nth-child(2) {
  z-index: 5;
  background: #e4edf3;
}

.rating-rank {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  font-size: 11px;
  box-shadow: none;
}

.rating-person-cell span {
  color: #244b66;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .025em;
}

.rating-content-cell span {
  color: #667e90;
  font-size: 10px;
  font-weight: 700;
}

.rating-number-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rating-metric-cell {
  min-width: 135px;
}

.rating-detail-link {
  min-width: 88px;
  padding: 5px 24px 5px 0;
  border: 0;
  background: transparent;
  color: #255f82;
  font-weight: 850;
  cursor: pointer;
}

.rating-detail-link > span {
  display: block;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.rating-detail-link small {
  margin-top: 2px;
  color: #7890a2;
  font-size: 8px;
  font-weight: 700;
}

.rating-detail-link:hover > span,
.rating-detail-link:hover small {
  color: #174e72;
}

.rating-detail-link.concise {
  min-width: 42px;
  padding-right: 0;
  border-bottom: 1px solid #88a9bf;
}

.rating-detail-link.danger-link {
  border-bottom-color: #ca8c87;
  color: #a44f49;
}

.rating-rate-value,
.rating-score {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.rating-time-cell {
  color: #82929e !important;
  font-size: 9px !important;
  font-variant-numeric: tabular-nums;
}

.rating-page .rating-footer {
  min-height: 38px;
  padding: 0 14px;
  border-top: 1px solid #d5e0e8;
  background: #fafcfd;
  color: #7f909d;
  font-size: 9px;
}

.rating-page .rating-footer span:first-child {
  color: #657e91;
  font-size: 9px;
  font-weight: 750;
}

.rating-inline-detail {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  border-left-color: #8faec3;
  box-shadow: -10px 0 28px rgba(35, 65, 88, .08), 0 8px 22px rgba(37, 65, 88, .06);
}

.rating-inline-detail.hidden {
  display: none;
}

.rating-inline-detail-header {
  min-height: 61px;
  padding: 10px 13px 9px 16px;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #cbd8e2;
  background: linear-gradient(110deg, #f3f8fb, #ffffff);
}

.rating-inline-detail-header span {
  color: #8293a0;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
}

.rating-inline-detail-header h3 {
  margin: 3px 0 0;
  color: #214b68;
  font-size: 14px;
  font-weight: 850;
}

.rating-inline-detail-header button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #aebfcb;
  border-radius: 3px;
  background: #ffffff;
  color: #557187;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.rating-inline-detail-header button:hover {
  border-color: #779bb4;
  background: #edf5fa;
  color: #285e82;
}

.rating-inline-detail .rating-detail-tools {
  min-height: 45px;
  padding: 7px 12px;
  background: #f9fbfc;
}

.rating-inline-detail .rating-detail-tools select {
  height: 30px;
  border-radius: 3px;
  font-size: 10px;
}

.rating-inline-detail .rating-detail-scroll {
  padding: 0;
}

.rating-inline-detail .rating-detail-table {
  min-width: 760px;
}

.rating-inline-detail .rating-table th:first-child,
.rating-inline-detail .rating-table td:first-child,
.rating-inline-detail .rating-table th:nth-child(2),
.rating-inline-detail .rating-table td:nth-child(2) {
  position: static;
  min-width: 0;
  box-shadow: none;
}

.rating-order-link {
  color: #21698f;
  font-size: 10px;
  font-weight: 850;
  text-underline-offset: 2px;
}

@media (max-width: 1280px) {
  .rating-leadership {
    grid-template-columns: minmax(200px, .7fr) minmax(280px, 1fr) minmax(350px, 1.3fr);
  }

  .rating-leadership-context {
    padding-right: 10px;
    padding-left: 10px;
  }

  .rating-workbench.detail-open {
    grid-template-columns: minmax(470px, 1fr) minmax(390px, .82fr);
  }
}

@media (max-width: 1080px) {
  .rating-leadership {
    grid-template-columns: minmax(200px, .7fr) minmax(300px, 1fr);
  }

  .rating-leadership-context {
    grid-column: 1 / -1;
    border-top: 1px solid #d8e1e8;
  }

  .rating-workbench.detail-open {
    grid-template-columns: minmax(0, 1fr);
  }

  .rating-inline-detail {
    min-height: 520px;
    box-shadow: 0 8px 22px rgba(37, 65, 88, .07);
  }
}

@media (max-width: 760px) {
  .rating-page:not(.hidden) {
    padding: 10px;
    grid-template-rows: auto auto auto minmax(380px, 1fr);
  }

  .rating-page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .rating-page-actions {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .rating-freshness {
    min-width: 0;
    align-items: flex-start;
  }

  .rating-refresh-button {
    padding-right: 11px;
    padding-left: 11px;
    white-space: nowrap;
  }

  .rating-leadership {
    grid-template-columns: 1fr;
  }

  .rating-leader-primary,
  .rating-top-three {
    border-right: 0;
    border-bottom: 1px solid #d8e1e8;
  }

  .rating-top-three {
    padding: 6px 16px;
    grid-template-columns: 1fr;
  }

  .rating-top-three li {
    padding: 8px 4px;
    border-right: 0;
    border-bottom: 1px solid #e3e9ee;
  }

  .rating-top-three li:last-child {
    border-bottom: 0;
  }

  .rating-leadership-context {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .rating-leadership-context dl {
    padding: 7px 4px;
    border-right: 0;
    border-bottom: 1px solid #e3e9ee;
  }

  .rating-page .rating-tabs {
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    overflow-x: auto;
  }

  .rating-data-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .rating-data-meta {
    width: 100%;
    justify-content: space-between;
  }
}

/* Final comprehensive-rating control layer: keep after legacy rating rules. */
.rating-refresh-button {
  min-height: 38px;
  padding: 0 17px;
  border: 1px solid #5e87a5;
  border-bottom-color: #345f7e;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff 0%, #edf5fa 45%, #d9e8f1 100%);
  color: #285c7d;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .03em;
  text-shadow: 0 1px 0 #fff;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(44, 82, 108, .12), 0 2px 0 #a8bdcb, 0 7px 15px rgba(33, 72, 101, .14);
}

.rating-refresh-button:hover {
  border-color: #3f7397;
  background: linear-gradient(180deg, #ffffff 0%, #e5f0f6 44%, #cbdfea 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(44, 82, 108, .15), 0 3px 0 #8faabd, 0 9px 18px rgba(33, 72, 101, .18);
  transform: translateY(-1px);
}

.rating-page .rating-tabs {
  min-height: 64px;
  padding: 7px;
  gap: 7px;
  overflow-x: auto;
  background: linear-gradient(180deg, #e7eef3, #f8fafc);
  box-shadow: inset 0 1px 2px rgba(42, 69, 89, .10), 0 6px 17px rgba(38, 67, 91, .06);
}

.rating-page .rating-tabs button,
.rating-page .rating-tabs button:last-child {
  min-height: 49px;
  border: 1px solid #c8d5df;
  border-bottom-color: #aebfcb;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff, #f5f8fa 55%, #e9f0f4);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c5d1d9, 0 4px 9px rgba(37, 67, 89, .07);
  text-shadow: 0 1px 0 #fff;
}

.rating-page .rating-tabs button:hover {
  border-color: #94afc2;
  background: linear-gradient(180deg, #ffffff, #eff5f8 54%, #e0ebf1);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #aec1ce, 0 7px 13px rgba(37, 67, 89, .11);
  transform: translateY(-1px);
}

.rating-page .rating-tabs button.active {
  border-color: #477a9d;
  border-bottom-color: #315f80;
  background: linear-gradient(180deg, #f8fcfe 0%, #dfedf5 55%, #ccdee9 100%);
  color: #173f5d;
  box-shadow: inset 0 2px 4px rgba(42, 85, 114, .12), inset 0 0 0 1px rgba(255, 255, 255, .72), 0 2px 0 #7394aa, 0 6px 13px rgba(35, 72, 99, .15);
  transform: translateY(1px);
}

.rating-page .rating-detail-link,
.rating-page .rating-detail-link.concise {
  position: relative;
  min-width: 86px;
  min-height: 35px;
  padding: 5px 23px 5px 10px;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #b8ccd9;
  border-bottom-color: #8faabe;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff, #f0f6f9 56%, #e2edf3);
  color: #285f80;
  text-align: left;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c2d0d9, 0 5px 10px rgba(41, 75, 99, .08);
}

.rating-page .rating-detail-link::after {
  content: ">";
  position: absolute;
  top: 50%;
  right: 9px;
  color: #6d8ca1;
  font-family: Georgia, serif;
  font-size: 12px;
  transform: translateY(-53%);
}

.rating-page .rating-detail-link > span {
  display: block;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}

.rating-page .rating-detail-link small {
  display: block;
  margin-top: 3px;
  color: #748c9d;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.1;
  white-space: nowrap;
}

.rating-page .rating-detail-link:hover {
  border-color: #6f99b5;
  background: linear-gradient(180deg, #ffffff, #e9f3f8 54%, #d8e8f1);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #9eb6c6, 0 8px 15px rgba(39, 79, 108, .13);
  transform: translateY(-1px);
}

.rating-page .rating-detail-link.danger-link {
  border-color: #d4b2ae;
  border-bottom-color: #bc8882;
  background: linear-gradient(180deg, #fffdfd, #fbf2f1 55%, #f3e3e1);
  color: #9b4944;
}

.rating-page .rating-leave-trigger {
  border-color: #c4b17e;
  border-bottom-color: #9e874c;
  background: linear-gradient(180deg, #fffefa, #f8f3e8 55%, #eee4ce);
  color: #705927;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #cabb94, 0 5px 11px rgba(108, 87, 38, .10);
}

@media (max-width: 760px) {
  .rating-refresh-button {
    padding-right: 11px;
    padding-left: 11px;
    white-space: nowrap;
  }

  .rating-page .rating-tabs {
    grid-template-columns: repeat(5, minmax(140px, 1fr));
  }
}

.rating-modal-backdrop[data-detail-type="leave"] .rating-modal-dialog {
  height: min(520px, calc(100vh - 68px));
}

@media (max-width: 760px) {
  .rating-modal-backdrop[data-detail-type="leave"] .rating-modal-dialog {
    height: min(560px, calc(100vh - 24px));
  }
}

/* Comprehensive rating typography scale — tuned for daily desktop reading. */
.rating-breadcrumb {
  font-size: 11px;
}

.rating-page-header .rating-title-line h2 {
  font-size: 30px;
  line-height: 1.2;
}

.rating-source-badge {
  min-height: 24px;
  font-size: 11px;
}

.rating-page-header p {
  font-size: 12px;
  line-height: 1.55;
}

.rating-freshness span {
  font-size: 10px;
}

.rating-freshness strong,
.rating-refresh-button {
  font-size: 12px;
}

.rating-leadership {
  min-height: 120px;
}

.rating-leader-primary > span {
  font-size: 11px;
}

.rating-leader-primary > strong {
  font-size: 29px;
  line-height: 1.15;
}

.rating-leader-primary > small {
  font-size: 11px;
}

.rating-top-three b {
  font-size: 13px;
}

.rating-top-three span {
  font-size: 13px;
}

.rating-leadership-context dt {
  font-size: 10px;
}

.rating-leadership-context dd {
  font-size: 14px;
  line-height: 1.25;
}

.rating-page .rating-tabs button > b {
  font-size: 11px;
}

.rating-page .rating-tabs button > span {
  font-size: 13px;
  line-height: 1.25;
}

.rating-page .rating-tabs button small {
  font-size: 10px;
  line-height: 1.2;
}

.rating-data-header {
  min-height: 67px;
}

.rating-section-kicker {
  font-size: 10px;
}

.rating-data-header h3 {
  font-size: 17px;
  line-height: 1.25;
}

.rating-data-meta span {
  font-size: 11px;
}

.rating-data-meta strong {
  min-height: 29px;
  font-size: 11px;
}

.rating-page .rating-table {
  font-size: 12px;
}

.rating-page .rating-table th {
  height: 46px;
  font-size: 12px;
  line-height: 1.35;
}

.rating-page .rating-table td {
  height: 58px;
  font-size: 12px;
  line-height: 1.4;
}

.rating-person-cell span {
  font-size: 13px;
}

.rating-content-cell span {
  font-size: 11px;
}

.rating-page .rating-detail-link,
.rating-page .rating-detail-link.concise {
  min-height: 40px;
}

.rating-page .rating-detail-link > span {
  font-size: 13px;
}

.rating-page .rating-detail-link small {
  font-size: 10px;
  line-height: 1.2;
}

.rating-rate-value,
.rating-score {
  font-size: 12px;
}

.rating-time-cell {
  font-size: 11px !important;
}

.rating-page .rating-footer,
.rating-page .rating-footer span:first-child {
  font-size: 10.5px;
}

.rating-modal-header span,
.rating-leave-editor-header span {
  font-size: 10px;
}

.rating-modal-header h3,
.rating-leave-editor-header h3 {
  font-size: 23px;
  line-height: 1.2;
}

.rating-modal-header p,
.rating-leave-editor-header p {
  font-size: 11px;
  line-height: 1.45;
}

.rating-modal-close,
.rating-secondary-button,
.rating-primary-button {
  font-size: 11px;
}

.rating-modal-dialog .rating-detail-tools span,
.rating-modal-dialog .rating-detail-tools label {
  font-size: 11px;
}

.rating-modal-dialog .rating-detail-tools strong {
  font-size: 13px;
}

.rating-modal-dialog .rating-detail-tools select {
  font-size: 11px;
}

.rating-modal-dialog .rating-detail-table {
  font-size: 12px;
}

.rating-modal-dialog .rating-detail-table th {
  height: 46px;
  font-size: 11.5px;
  line-height: 1.35;
}

.rating-modal-dialog .rating-detail-table td {
  height: 54px;
  font-size: 11.5px;
  line-height: 1.4;
}

.rating-order-link {
  font-size: 11px;
}

.rating-row-actions button {
  min-height: 30px;
  font-size: 10px;
}

.rating-leave-person span,
.rating-leave-form label > span {
  font-size: 11px;
}

.rating-leave-person strong {
  font-size: 20px;
}

.rating-leave-person small,
.rating-leave-form label > small {
  font-size: 10.5px;
  line-height: 1.4;
}

.rating-leave-form input,
.rating-leave-form select {
  font-size: 13px;
}

.rating-leave-days-field input {
  font-size: 15px;
}

.rating-leave-days-field em,
.rating-leave-form-error {
  font-size: 11px;
}

@media (max-width: 760px) {
  .rating-page-header .rating-title-line h2 {
    font-size: 27px;
  }

  .rating-page-header p {
    font-size: 11px;
  }

  .rating-leader-primary > strong {
    font-size: 27px;
  }

  .rating-modal-header h3,
  .rating-leave-editor-header h3 {
    font-size: 20px;
  }
}

/* Client-aligned pre-order polish: visual hierarchy only, without changing the workbench layout. */
#preOrderView #preOrderGroups {
  gap: 9px;
  padding-top: 11px;
}

#preOrderView #preOrderGroups button {
  min-height: 46px;
  border-color: #bfd2e4;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f2f7fb 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 0 rgba(148, 174, 198, .30), 0 7px 14px rgba(38, 69, 96, .07);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

#preOrderView #preOrderGroups button.client {
  border-color: #b8d0e2;
  background: linear-gradient(180deg, #fbfdff 0%, #eaf4fb 100%);
}

#preOrderView #preOrderGroups button.folder {
  border-color: #dfc28b;
  background: linear-gradient(180deg, #fffdf7 0%, #f8eed9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 2px 0 rgba(187, 146, 76, .24), 0 8px 16px rgba(113, 81, 32, .08);
}

#preOrderView #preOrderGroups button:hover {
  border-color: #9ebbd3;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fa 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 3px 0 rgba(134, 163, 190, .30), 0 10px 18px rgba(38, 69, 96, .11);
}

#preOrderView #preOrderGroups button.folder:hover {
  border-color: #cfa965;
  background: linear-gradient(180deg, #fffdf8 0%, #f4e5c9 100%);
}

#preOrderView #preOrderGroups button.active,
#preOrderView #preOrderGroups button.folder.active,
#preOrderView #preOrderGroups button.client.active {
  border-color: #245b93;
  background: linear-gradient(180deg, #3479b5 0%, #28649e 100%);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(13, 54, 91, .32), 0 3px 0 rgba(25, 78, 126, .36), 0 12px 22px rgba(40, 92, 150, .24);
}

#preOrderView #preOrderGroups button.active strong,
#preOrderView #preOrderGroups button.active em,
#preOrderView #preOrderGroups button.active small {
  color: #ffffff;
}

#preOrderView #preOrderGroups button.active b {
  background: #ffffff;
  color: #245b93;
}

#preOrderView .preorder-metric {
  min-height: 72px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 2px 0 rgba(142, 168, 192, .24), 0 8px 16px rgba(39, 70, 98, .06);
}

#preOrderView .preorder-metric:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 3px 0 rgba(128, 158, 187, .28), 0 11px 20px rgba(39, 70, 98, .10);
}

#preOrderView .preorder-metric.active {
  border-color: #245b93;
  border-top-color: #245b93;
  background: linear-gradient(180deg, #3479b5 0%, #28649e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -2px 0 rgba(13, 54, 91, .32), 0 3px 0 rgba(25, 78, 126, .36), 0 12px 22px rgba(40, 92, 150, .24);
}

#preOrderView .preorder-metric.active span,
#preOrderView .preorder-metric.active strong,
#preOrderView .preorder-metric.active em {
  color: #ffffff;
}

#preOrderView .preorder-list-head {
  border-radius: 8px;
  background: linear-gradient(180deg, #f5faff 0%, #e8f1f8 100%);
}

#preOrderView .preorder-list-group {
  border-color: #c9d9e5;
  border-left: 4px solid #4e86b1;
  border-radius: 7px;
  background: linear-gradient(90deg, #f4f9fc 0%, #fbfdff 100%);
  box-shadow: 0 3px 9px rgba(38, 69, 96, .04);
}

#preOrderView .preorder-list-group.preorder-list-group-folder {
  border-color: #e2c68f;
  border-left-color: #c58e2a;
  background: linear-gradient(90deg, #fff7e7 0%, #fffaf1 72%, #ffffff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 4px 10px rgba(117, 82, 28, .08);
}

#preOrderView .preorder-list-group.preorder-list-group-folder strong {
  color: #774d09;
  font-size: 17px;
  font-weight: 950;
}

#preOrderView .preorder-list-group .preorder-list-group-label {
  display: grid;
  align-items: center;
  gap: 2px;
}

#preOrderView .preorder-list-group .preorder-folder-title-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

#preOrderView .preorder-list-group .preorder-folder-title-key {
  flex: 0 0 auto;
  color: #9b773d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

#preOrderView .preorder-list-group .preorder-list-group-meta {
  color: #927246;
  font-size: 11px;
  font-weight: 850;
}

#preOrderView #preOrderGroups button.folder strong {
  color: #254e72;
  font-size: 14px;
  font-weight: 950;
}

#preOrderView .preorder-card {
  border-radius: 7px;
}

#preOrderView .preorder-card:hover {
  background: #fbfdff;
  box-shadow: inset 3px 0 0 #9ec2dc, 0 8px 18px rgba(35, 65, 93, .08);
}

#preOrderView .preorder-card:has(.preorder-status-badge.locked) {
  box-shadow: inset 3px 0 0 #c9ad64, 0 5px 14px rgba(35, 65, 93, .04);
  background: #fffdf5;
}

#preOrderView .preorder-card:has(.preorder-status-badge.pending),
#preOrderView .preorder-card:has(.preorder-status-badge.range) {
  box-shadow: inset 3px 0 0 #d3a35c, 0 5px 14px rgba(35, 65, 93, .04);
  background: #fffdf8;
}

#preOrderView .preorder-card.attention {
  box-shadow: inset 3px 0 0 #cf7871, 0 5px 14px rgba(35, 65, 93, .04);
  background: #fffafa;
}

#preOrderView .preorder-card.follow-up-due .preorder-card-title strong,
#preOrderView .preorder-card.follow-up-due .preorder-card-route-line,
#preOrderView .preorder-card.follow-up-due .preorder-card-product-line,
#preOrderView .preorder-card.follow-up-due .preorder-card-status small {
  color: #a33e39;
}

#preOrderView .preorder-card.follow-up-due .preorder-card-route-line b {
  color: #c37a75;
}

#preOrderView .preorder-date-block {
  border-color: #d6e2eb;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%);
}

#preOrderView .preorder-date-block.empty {
  border-color: #e2d2ae;
  background: linear-gradient(180deg, #fffdf9 0%, #fff7e9 100%);
}

#preOrderView .preorder-date-block.locked {
  border-color: #c1ccd8;
  background: linear-gradient(180deg, #ffffff 0%, #eef4fa 100%);
}

#preOrderView .preorder-row-open .preorder-card-actions .preorder-list-record-button {
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(13, 54, 91, .28), 0 2px 0 #1e557f, 0 6px 12px rgba(32, 86, 129, .18);
}

.order-lock-header-button {
  min-width: 124px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #9aafc2;
  border-bottom-color: #6f879d;
  border-radius: 5px;
  background: linear-gradient(#fff, #e8f0f6 58%, #d6e2ec);
  color: #36566f;
  padding: 0 13px;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #9caebe, 0 7px 14px rgba(40, 66, 88, .12);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.order-lock-header-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #8499ac, 0 10px 17px rgba(40, 66, 88, .16);
}

.order-lock-header-button.locked {
  border-color: #b7864c;
  border-bottom-color: #825f36;
  background: linear-gradient(#fffaf1, #f0d7ad 58%, #ddbc83);
  color: #68451e;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #af8958, 0 7px 14px rgba(102, 68, 28, .13);
}

.order-lock-header-button.sending {
  cursor: wait;
  opacity: .78;
  transform: none;
}

.order-lock-header-button > .order-lock-symbol,
.order-lock-symbol {
  position: relative;
  width: 26px;
  height: 18px;
  flex: 0 0 26px;
  display: inline-block;
}

.order-lock-header-button > .order-lock-symbol::before,
.order-lock-symbol::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 12px;
  height: 11px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  box-sizing: border-box;
}

.order-lock-header-button.unlocked > .order-lock-symbol::before,
.order-lock-symbol.unlocked::before { transform: translateX(6px) rotate(18deg); transform-origin: 0 100%; }

.order-lock-header-button > .order-lock-symbol::after,
.order-lock-symbol::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 18px;
  height: 12px;
  border-radius: 3px;
  background: currentColor;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.order-lock-symbol > i {
  position: absolute;
  z-index: 1;
  left: 8px;
  bottom: 3px;
  width: 4px;
  height: 6px;
  border-radius: 4px 4px 2px 2px;
  background: rgba(255,255,255,.8);
}

.order-lock-symbol.unlocked > i { opacity: .38; }

.order-lock-header-button [data-order-lock-label] {
  flex: 0 0 auto;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
}

.order-lock-backdrop {
  z-index: 1800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(22, 42, 62, .48);
  backdrop-filter: blur(4px);
}

.order-lock-dialog {
  width: min(670px, calc(100vw - 36px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid #91aec8;
  border-radius: 7px;
  background: #f8fbfd;
  box-shadow: 0 26px 70px rgba(13, 38, 62, .34), inset 0 1px 0 #fff;
  color: #173b5b;
}

.order-lock-head {
  position: relative;
  min-height: 86px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border-bottom: 1px solid #b6cbe0;
  background: linear-gradient(#fbfdff, #eaf2f9);
}

.order-lock-symbol {
  width: 42px;
  height: 42px;
  border: 1px solid #a8bdd0;
  border-radius: 6px;
  background: #fff;
  color: #52718c;
  box-shadow: inset 0 1px 0 #fff, 0 4px 9px rgba(33, 71, 105, .11);
}

.order-lock-symbol::before { left: 12px; top: 8px; width: 17px; height: 15px; }
.order-lock-symbol::after { left: 8px; bottom: 7px; width: 26px; height: 17px; }
.order-lock-symbol.unlocked::before { left: 11px; }
.order-lock-symbol.locked { color: #9a6b2d; border-color: #c6a46f; background: #fffbf4; }
.order-lock-head small { display: block; color: #66839d; font-size: 10px; font-weight: 900; }
.order-lock-head h3 { margin: 2px 0 1px; color: #173e64; font-size: 22px; font-weight: 900; letter-spacing: 0; }
.order-lock-head strong { color: #436684; font-size: 12px; }
.order-lock-head > button { width: 34px; height: 34px; border: 1px solid #a6bbce; border-radius: 5px; background: linear-gradient(#fff, #e6eef5); color: #365b78; font-size: 24px; line-height: 1; box-shadow: 0 2px 5px rgba(38, 70, 98, .13); }

.order-lock-body { padding: 18px 20px 8px; }
.order-lock-status { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid #b8ccde; border-left: 4px solid #5489b5; border-radius: 5px; background: #f1f7fc; }
.order-lock-status.locked { border-left-color: #bb8546; background: #fff9ef; }
.order-lock-status b { font-size: 14px; color: #224a6e; }
.order-lock-status.locked b { color: #754e20; }
.order-lock-status span { color: #5c748a; font-size: 12px; line-height: 1.6; }

.order-lock-reasons { display: grid; gap: 8px; margin: 17px 0 0; padding: 12px; border: 1px solid #bacdde; border-radius: 6px; background: #fff; }
.order-lock-reasons legend { padding: 0 7px; color: #355b7c; font-size: 12px; font-weight: 900; }
.order-lock-reasons legend span { margin-right: 12px; }
.order-lock-reasons legend small { color: #64809e; font-size: 12px; font-weight: 700; }
.order-lock-reasons label { min-height: 42px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid #d2dee9; border-radius: 5px; background: #fbfdff; padding: 7px 10px; cursor: pointer; transition: border-color .14s ease, background .14s ease, transform .14s ease; }
.order-lock-reasons label:hover { border-color: #80a9cc; background: #f2f8fd; transform: translateY(-1px); }
.order-lock-reasons input { width: 17px; height: 17px; accent-color: #2f78b0; }
.order-lock-reasons label > span { display: flex; align-items: center; gap: 9px; color: #274c6d; font-size: 13px; font-weight: 700; line-height: 1.45; }
.order-lock-reasons label i { min-width: 25px; height: 23px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #b5c9db; border-radius: 4px; background: #edf4fa; color: #50728e; font-size: 10px; font-style: normal; }
.order-lock-archive-note { margin-top: 12px; border: 1px solid #d3b078; border-radius: 5px; background: #fff8e9; color: #815b25; padding: 9px 12px; font-size: 12px; font-weight: 800; }

.order-lock-result { margin-top: 13px; border: 1px solid #a7c9b9; border-radius: 5px; background: #eff9f4; color: #1d7454; padding: 10px 12px; font-size: 13px; font-weight: 900; }
.order-lock-result.error { border-color: #d4a4a4; background: #fff3f3; color: #a33e3e; }

.order-lock-footer { display: flex; justify-content: center; padding: 15px 20px 20px; }
.order-lock-confirm { min-width: 136px; min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #2c71aa; border-bottom-color: #174c75; border-radius: 5px; background: linear-gradient(#5ca1d5, #317bb4 55%, #25699f); color: #fff; padding: 0 18px; font-size: 14px; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255,255,255,.43), 0 3px 0 #1d5684, 0 9px 16px rgba(25, 78, 118, .18); }
.order-lock-confirm.unlock { border-color: #a47638; border-bottom-color: #775321; background: linear-gradient(#e9c783, #cc9e4d 58%, #b98938); color: #4b320d; box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 3px 0 #966b2d, 0 9px 16px rgba(91, 62, 20, .16); }
.order-lock-confirm i { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.42); border-top-color: #fff; border-radius: 50%; }
.order-lock-confirm.sending i { display: inline-block; animation: order-lock-spin .72s linear infinite; }
.order-lock-confirm:disabled { cursor: wait; opacity: .8; }
@keyframes order-lock-spin { to { transform: rotate(360deg); } }

/* Order-center special events: legacy behavior with the new portal visual language. */
.order-special-event-button {
  position: relative;
  min-width: 112px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #7799b7;
  border-bottom-color: #486f91;
  border-radius: 5px;
  background: linear-gradient(#ffffff 0%, #e9f2f9 53%, #d8e7f2 100%);
  color: #244f73;
  padding: 0 13px;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 2px 0 #7898b2, 0 7px 14px rgba(31, 75, 110, .14);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}

.order-special-event-button::before {
  content: "!";
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #86a6c0;
  border-radius: 50%;
  background: #f7fbfe;
  color: #376b94;
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 #fff;
}

.order-special-event-button:hover {
  transform: translateY(-1px);
  border-color: #5f88aa;
  filter: brightness(1.02);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #6687a2, 0 10px 17px rgba(31, 75, 110, .18);
}

.order-special-event-button.has-events {
  border-color: #bc8c45;
  border-bottom-color: #8d642c;
  background: linear-gradient(#fffdf7 0%, #f9eed7 52%, #ecd7ad 100%);
  color: #69491f;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b58b51, 0 7px 14px rgba(111, 77, 30, .14);
}

.order-special-event-button.has-events::before {
  border-color: #caa463;
  background: #fffaf0;
  color: #98671f;
}

.order-special-event-button > b {
  min-width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #9c2e35;
  border-radius: 999px;
  background: linear-gradient(#df666d, #ba3740);
  color: #fff;
  padding: 0 6px;
  font-size: 11px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 2px 4px rgba(119, 31, 37, .2);
}

.order-special-event-modal {
  z-index: 3190;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 40, 61, .52);
  backdrop-filter: blur(5px);
}

.order-special-event-card {
  position: relative;
  width: min(1120px, calc(100vw - 42px));
  min-height: min(610px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #8faec8;
  border-radius: 7px;
  background: #f7fafc;
  color: #173d5e;
  box-shadow: 0 28px 78px rgba(9, 33, 55, .36), inset 0 1px 0 #fff;
}

.order-special-event-card > .mail-confirm-close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
}

.order-special-event-head {
  min-height: 104px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 17px 70px 17px 21px;
  border-bottom: 1px solid #b9cfe1;
  background: linear-gradient(105deg, #ffffff 0%, #edf5fb 70%, #e3eef7 100%);
}

.order-special-event-title-mark {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid #b99961;
  border-radius: 6px;
  background: linear-gradient(#fffdf8, #f4e5c7);
  color: #885d1d;
  box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(99, 69, 27, .13);
}

.order-special-event-title-mark span {
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
}

.order-special-event-head em {
  display: block;
  color: #6c879e;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.order-special-event-head strong {
  display: block;
  margin-top: 2px;
  color: #173f64;
  font-size: 23px;
  font-weight: 900;
}

.order-special-event-head p {
  margin: 4px 0 0;
  color: #55728a;
  font-size: 12px;
  font-weight: 700;
}

.order-special-event-total {
  min-width: 92px;
  min-height: 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #9bb7ce;
  border-radius: 999px;
  background: #fff;
  color: #355f81;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(39, 78, 109, .09);
}

.order-special-event-body {
  min-height: 260px;
  flex: 1;
  overflow: auto;
  padding: 17px 19px;
  background: #f4f8fb;
}

.order-special-event-tabs {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  gap: 10px;
  margin: 0 0 17px;
  padding: 0 0 14px;
  border-bottom: 1px solid #c6d8e5;
  background: #f4f8fb;
}

.order-special-event-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 168px;
  padding: 12px 20px;
  border: 1px solid #bed0df;
  border-radius: 6px;
  background: #edf3f8;
  color: #52718a;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.order-special-event-tab[aria-selected="true"] {
  border-color: #3f78a3;
  background: #fff;
  color: #184c75;
  box-shadow: inset 0 -3px #3f78a3;
}

.order-special-event-tab:focus-visible {
  outline: 2px solid #3f78a3;
  outline-offset: 2px;
}

.order-special-event-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 50%;
  background: #c84b4b;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  .order-special-event-tabs { gap: 6px; }
  .order-special-event-tab { flex: 1; min-width: 0; padding: 10px 5px; font-size: 12px; gap: 5px; }
  .order-special-event-card { min-height: 0; }
}

.order-special-event-loading,
.order-special-event-empty {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #c7d7e5;
  border-radius: 6px;
  background: #fff;
  color: #55748d;
  text-align: center;
}

.order-special-event-loading i {
  width: 28px;
  height: 28px;
  border: 3px solid #d7e5ef;
  border-top-color: #337caf;
  border-radius: 50%;
  animation: order-lock-spin .72s linear infinite;
}

.order-special-event-empty-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #8fc3aa;
  border-radius: 50%;
  background: #eff9f4;
  color: #28805a;
  font-size: 24px;
  font-weight: 900;
}

.order-special-event-empty strong { color: #2c5575; font-size: 16px; }
.order-special-event-empty span:last-child { font-size: 12px; }
.order-special-event-empty.error { border-color: #d9adad; background: #fff8f8; color: #a04646; }
.order-special-event-empty.error strong { color: #9c3535; }

.order-special-event-table-wrap {
  overflow: auto;
  border: 1px solid #aac2d6;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(29, 67, 98, .08);
}

.order-special-event-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: #1b405f;
}

.order-special-event-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  height: 42px;
  border-right: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(#3c78a9, #28638f);
  color: #fff;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
}

.order-special-event-table th:nth-child(1) { width: 165px; }
.order-special-event-table th:nth-child(2) { width: 150px; }
.order-special-event-table th:nth-child(3) { width: 190px; }
.order-special-event-table th:nth-child(5) { width: 190px; text-align: center; }

.order-special-event-table td {
  min-height: 58px;
  border-right: 1px solid #d6e2ec;
  border-bottom: 1px solid #d6e2ec;
  background: #fff;
  padding: 11px 12px;
  font-size: 12px;
  vertical-align: middle;
}

.order-special-event-table tr:nth-child(even) td { background: #f8fbfd; }
.order-special-event-table tr:hover td { background: #f0f7fc; }
.order-special-event-table th:last-child,
.order-special-event-table td:last-child { border-right: 0; }
.order-special-event-table tbody tr:last-child td { border-bottom: 0; }

.order-special-event-order {
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: #145d96;
  padding: 2px 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.order-special-event-order:hover { color: #0d79bc; }
.order-special-company { color: #274d6c; font-weight: 900; line-height: 1.5; }
.order-special-company.factory { color: #4c6579; }

.order-special-event-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.5;
}

.order-special-event-copy .order-special-event-stage {
  color: #35769e;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.35;
}
.order-special-event-copy .order-special-event-requirement {
  color: #183f62;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.5;
  white-space: pre-wrap;
}
.order-special-event-copy small { color: #8b632a; font-size: 11px; font-weight: 800; }
.order-special-event-copy .order-special-event-trigger { color: #667f91; font-size: 10px; font-weight: 850; }

.order-special-event-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.order-special-event-actions.is-client-request { flex-direction: column; }
.order-special-event-actions.is-client-request .order-special-action { width: 100%; }
.order-special-action.client-remind {
  border-color: #a98243;
  border-bottom-color: #866027;
  background: linear-gradient(#fff7dc, #f4d991 58%, #e8c36e);
  color: #684b20;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #ad854b, 0 5px 9px rgba(105, 73, 31, .13);
}
.client-action-reminder-shortcuts { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
.client-action-reminder-shortcuts button {
  border: 1px solid #b2c7d7;
  border-radius: 999px;
  background: #eef6fb;
  color: #315d7c;
  padding: 5px 10px;
  font: inherit;
  cursor: pointer;
}

.order-special-action,
.order-special-event-task-state {
  min-width: 72px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 11px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.order-special-action {
  border: 1px solid #3776a5;
  border-bottom-color: #20557d;
  background: linear-gradient(#67a5d1, #347cad 56%, #286a99);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 2px 0 #245b83, 0 5px 10px rgba(28, 83, 123, .14);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.order-special-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #205476, 0 7px 12px rgba(28, 83, 123, .18);
}

.order-special-action.action-0,
.order-special-action.action-1,
.order-special-action.action-3 {
  border-color: #3c8a6c;
  border-bottom-color: #236146;
  background: linear-gradient(#6bb798, #419576 56%, #337c60);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 2px 0 #2c6e52, 0 5px 10px rgba(35, 104, 77, .14);
}

.order-special-action.hide-today {
  border-color: #a8b8c6;
  border-bottom-color: #718697;
  background: linear-gradient(#fff, #edf2f6 58%, #dce6ed);
  color: #4b667b;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #98aab8, 0 5px 9px rgba(42, 66, 84, .1);
}

.order-special-event-task-state {
  border: 1px solid #c6d1db;
  background: #edf2f6;
  color: #6b7f90;
}

.order-special-event-foot {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid #c1d3e1;
  background: #fff;
  padding: 12px 20px;
}

.order-special-event-foot span { color: #667f93; font-size: 11px; font-weight: 700; }
.order-special-event-foot .default-cancel-btn { min-width: 92px; }

/* The event feed mirrors the popup hierarchy without changing its workflow actions. */
.order-special-event-list {
  display: grid;
  gap: 10px;
}

.order-special-event-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 104px;
  border: 1px solid #c7d9e7;
  border-left: 4px solid #5d93bb;
  border-radius: 6px;
  background: linear-gradient(105deg, #ffffff, #f7fbfe);
  box-shadow: 0 5px 15px rgba(27, 66, 97, .055), inset 0 1px 0 #fff;
  padding: 13px 15px 13px 16px;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease, background .14s ease;
}

.order-special-event-item:hover {
  border-color: #85b0cf;
  background: linear-gradient(105deg, #ffffff, #eef7fc);
  box-shadow: 0 8px 20px rgba(27, 66, 97, .10), inset 0 1px 0 #fff;
  transform: translateY(-1px);
}

.order-special-event-item.is-time { border-left-color: #bf8e3d; }
.order-special-event-item.is-client { border-left-color: #c59042; background: linear-gradient(105deg, #fff, #fffaf0); }
.order-special-event-item.is-mail { border-left-color: #c14d56; background: linear-gradient(105deg, #fff, #fff8f8); }
.order-special-event-item.is-mail:hover { border-color: #d17b81; background: linear-gradient(105deg, #fff, #fff3f4); }

.order-special-event-item-main {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.order-special-event-item-topline {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.order-special-event-item .order-special-event-order,
.order-special-event-item .order-special-event-no {
  min-width: 142px;
  box-sizing: border-box;
}

.order-special-event-kind {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.order-special-event-kind {
  border: 1px solid #9fc0d7;
  background: #ecf6fc;
  color: #296f9b;
}

.order-special-event-kind.is-time {
  border-color: #d6b56f;
  background: #fff8e8;
  color: #8b641f;
}

.order-special-event-kind.is-client {
  border-color: #dbba79;
  background: #fff4d8;
  color: #855b20;
}

.order-special-event-kind.is-mail {
  border-color: #d9989d;
  background: #fff0f1;
  color: #a13f49;
}

.order-special-event-item .order-special-event-requirement {
  color: #183f62;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.order-special-event-meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  border-top: 1px dashed #d4e1ea;
  padding-top: 7px;
  color: #6a8294;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.45;
}

.order-special-event-meta span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-special-event-meta b {
  margin-right: 4px;
  color: #4f7089;
  font-weight: 900;
}

/* Client requests show current order dates separately from click/deadline times. */
.order-special-event-item.is-client .order-special-event-meta > span {
  flex-basis: 100%;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

.order-special-event-meta .order-special-event-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 32px;
  padding: 3px 0 2px;
}

.order-special-event-schedule > span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.order-special-event-schedule b {
  margin: 0;
  color: #7a8b9a;
  font-size: 11px;
  font-weight: 700;
}

.order-special-event-schedule strong {
  color: #284d6b;
  font-size: 13px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.order-special-event-item .order-special-event-actions {
  min-width: 120px;
  align-self: stretch;
  justify-content: center;
  align-content: center;
  border-left: 1px solid #d7e4ed;
  padding-left: 15px;
}

.order-special-event-item.is-mail .order-special-event-actions { border-left-color: #efd6d8; }

@media (max-width: 720px) {
  .order-special-event-item {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 12px;
  }
  .order-special-event-item .order-special-event-actions {
    min-width: 0;
    align-self: auto;
    justify-content: flex-end;
    border-top: 1px solid #d7e4ed;
    border-left: 0;
    padding: 10px 0 0;
  }
  .order-special-event-item.is-mail .order-special-event-actions { border-top-color: #efd6d8; }
  .order-special-event-item .order-special-event-order,
  .order-special-event-item .order-special-event-no { min-width: 0; }
}

@media (max-width: 720px) {
  .order-special-event-modal { padding: 10px; }
  .order-special-event-card { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .order-special-event-head { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 14px 52px 14px 14px; }
  .order-special-event-title-mark { width: 40px; height: 40px; }
  .order-special-event-head strong { font-size: 18px; }
  .order-special-event-head p { display: none; }
  .order-special-event-total { grid-column: 2; justify-self: start; min-height: 28px; }
  .order-special-event-body { padding: 10px; }
  .order-special-event-foot { justify-content: flex-end; }
  .order-special-event-foot span { display: none; }
}

/* Order workbench visual hierarchy. Business fields, permissions and actions stay unchanged. */
#orderView .search-form {
  min-height: 62px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid #cbd9e5;
  border-bottom-color: #b9cbd9;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  box-shadow: inset 0 1px 0 #fff, 0 4px 11px rgba(31, 69, 101, .06);
  overflow: visible;
}

#orderView .order-search-main {
  min-width: 0;
  gap: 0;
}

#orderView .order-search-main > select {
  width: 118px;
  height: 38px;
  border-radius: 5px 0 0 5px;
  border-right: 0;
  background: #f7fafc;
  color: #294a68;
  font-size: 13px;
  font-weight: 800;
}

#orderView .order-search-box {
  width: 210px;
  min-width: 180px;
}

#orderView .search-form #searchInput {
  height: 38px;
  border-radius: 0;
  border-color: #b7cadb;
  background: #fff;
  padding: 0 13px;
  color: #18344e;
  font-size: 13px;
  box-shadow: inset 0 1px 2px rgba(32, 70, 101, .04);
}

#orderView .search-form #searchInput:focus {
  position: relative;
  z-index: 2;
  border-color: #4f87b4;
  box-shadow: 0 0 0 3px rgba(64, 126, 177, .11), inset 0 1px 2px rgba(32, 70, 101, .04);
}

#orderView #reloadButton {
  min-width: 72px;
  height: 38px;
  border: 1px solid #236492;
  border-bottom-color: #174b70;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(180deg, #438fc2 0%, #2874a8 54%, #1e6394 100%);
  color: #fff;
  padding: 0 15px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 2px 0 #184e73, 0 7px 13px rgba(27, 87, 131, .16);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

#orderView #reloadButton:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 3px 0 #16486a, 0 9px 16px rgba(27, 87, 131, .2);
}

.order-flow-support-group > summary {
  list-style: none;
}

.order-flow-support-group > summary::-webkit-details-marker,
.employee-billing-group > summary::-webkit-details-marker {
  display: none;
}

.order-flow-support-group > summary > i {
  width: 8px;
  height: 8px;
  justify-self: center;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .16s ease;
}

.order-flow-support-group[open] > summary > i {
  transform: rotate(225deg) translate(-1px, -1px);
}

#orderView .order-filter-inline {
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
}

#orderView .order-filter-inline .order-search-extra {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
}

#orderView .order-search-extra label:not(.order-check) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#orderView .order-inline-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#orderView .order-inline-date-separator {
  color: #5e7487;
  font-size: 11px;
  font-weight: 800;
}

#orderView .order-search-extra input,
#orderView .order-search-extra select {
  height: 38px;
  border-color: #b5c8d8;
  border-radius: 4px;
  font-family: var(--chamshine-ui-font-sc);
  font-size: 13px;
  font-weight: 800;
}

#orderView .order-search-extra .order-condition-select {
  width: 104px !important;
  color: #294a68;
}

#orderView .order-search-extra #orderLoadingPortInput,
#orderView .order-search-extra #orderDestinationPortInput {
  width: 112px;
}

#orderView .order-search-extra #orderStartEtdInput,
#orderView .order-search-extra #orderEndEtdInput {
  width: 112px;
}

#orderView .order-search-extra #orderOperatorSelect,
#orderView .order-search-extra #orderSalesSelect {
  width: 80px;
}

#orderView .order-search-extra .order-inline-action {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 12px;
  white-space: nowrap;
}

#orderView .order-search-extra #orderEntryButton {
  min-width: 104px;
  margin-left: auto;
  border: 1px solid #78a5c8;
  border-bottom-color: #4f7798;
  border-radius: 5px;
  background: linear-gradient(#ffffff 0%, #e7f3fb 52%, #c8e1f4 100%);
  color: #174f78;
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 0 #86aac4,
    0 7px 14px rgba(36, 85, 124, .14);
}

#orderView .order-search-extra #orderSpecialEventButton {
  margin-right: 12px;
}

#orderView .switches {
  display: none;
  min-height: 38px;
  border-right: 1px solid #d7e2eb;
  border-left: 1px solid #d7e2eb;
  background: #fbfcfd;
}

#orderView .order-flow-filters {
  gap: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid #ccdbe7;
  border-top: 0;
  background: #f4f8fb;
}

.order-flow-workbench {
  overflow: hidden;
  background: #fff;
}

.order-flow-workbench-head {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 0 15px;
  border-bottom: 1px solid #d8e4ec;
  background: linear-gradient(180deg, #fff 0%, #f8fbfd 100%);
}

.order-flow-workbench-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.order-flow-workbench-title strong {
  position: relative;
  padding-left: 10px;
  color: #244e70;
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
}

.order-flow-workbench-title strong::before {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: #2c84b9;
  content: "";
}

.order-flow-current {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid #d2e0e9;
  border-radius: 999px;
  background: #fff;
  color: #71889a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-flow-current small {
  color: #7b91a1;
  font-size: 9px;
  font-weight: 850;
}

.order-flow-current b {
  overflow: hidden;
  color: #365f7d;
  font-size: 11px;
  font-weight: 950;
  text-overflow: ellipsis;
}

.order-flow-current.has-filter {
  border-color: #8eb8d3;
  background: #edf7fd;
  box-shadow: inset 0 1px 0 #fff;
}

.order-flow-current.has-filter b { color: #176594; }

.order-flow-reset {
  min-width: 82px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid #9ab8ce;
  border-bottom-color: #7599b5;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #edf4f8 100%);
  color: #315d7c;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c4d4df, 0 4px 8px rgba(39,76,109,.08);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.order-flow-reset:hover {
  border-color: #6d9dbf;
  background: linear-gradient(180deg, #fff 0%, #e4f2fa 100%);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #a8c3d5, 0 7px 12px rgba(39,76,109,.13);
  transform: translateY(-1px);
}

.order-flow-reset.active {
  border-color: #4f8db6;
  background: linear-gradient(180deg, #f4fbff 0%, #dceef8 100%);
  color: #175f8c;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #8cb2c9, 0 5px 10px rgba(36,96,137,.12);
}

.order-flow-reset:focus-visible {
  outline: 3px solid rgba(50,126,181,.22);
  outline-offset: 2px;
}

#orderView .order-flow-primary-track.order-flow-live-queue {
  display: grid;
  grid-template-columns: repeat(var(--order-flow-columns, 10), minmax(92px, 1fr));
  gap: 2px;
  overflow-x: auto;
  padding: 11px 12px 13px;
  background: linear-gradient(180deg, #f8fbfd 0%, #f1f6fa 100%);
}

.order-flow-filter.order-flow-queue {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  grid-template-areas: "stage label count";
  align-items: center;
  justify-content: stretch;
  gap: 2px;
  border: 1px solid #b6cfdf;
  border-bottom-color: #90b1c6;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 52%, #e8f1f7 100%);
  padding: 3px;
  color: #315f80;
  font-family: -apple-system, "system-ui", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", Arial, sans-serif;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 2px 0 #c4d5e0,
    0 6px 11px rgba(38,73,101,.09);
  transform: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.order-flow-filter.order-flow-queue:hover {
  border-color: #5798c0;
  border-bottom-color: #367da9;
  background: linear-gradient(180deg, #ffffff 0%, #eef8fd 53%, #dbeef8 100%);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #a9c8da, 0 9px 15px rgba(38,91,128,.14);
  transform: translateY(-1px);
}

.order-flow-filter.order-flow-queue.active {
  border-color: #176b9f;
  border-bottom-color: #0b456e;
  background: linear-gradient(180deg, #78bee5 0%, #3a92c3 47%, #176796 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 0 0 1px rgba(255,255,255,.2),
    0 3px 0 #0d4f7a,
    0 9px 16px rgba(16,81,123,.25),
    0 0 0 2px rgba(82,169,214,.16);
  transform: translateY(-2px);
}

.order-flow-filter.order-flow-queue.is-waiting:not(.active) {
  background: linear-gradient(180deg, #fff 0%, #f9faf8 100%);
  color: #637b8a;
}

.order-flow-copy {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.order-flow-filter.order-flow-queue .order-flow-label {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-flow-filter.order-flow-queue .order-flow-stage {
  grid-area: stage;
  width: 13px;
  height: 13px;
  flex-basis: 13px;
  border-color: #bfd4e2;
  background: linear-gradient(180deg, #f8fcff 0%, #e0eef6 100%);
  color: #3f7599;
  font-size: 6px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(38,73,101,.1);
}

.order-flow-filter.order-flow-queue.active .order-flow-stage {
  border-color: rgba(255,255,255,.82);
  background: linear-gradient(180deg, #ffffff 0%, #dff2fc 100%);
  color: #12618f;
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(5,52,84,.25);
}

.order-flow-filter.order-flow-queue .order-flow-count {
  grid-area: count;
  justify-self: end;
  min-width: 24px;
  height: 28px;
  margin-left: 0;
  padding: 0 2px;
  border: 1px solid #edc2c6;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffafa 0%, #fff0f1 100%);
  color: #bc3947;
  font-size: 15px;
  font-weight: 950;
  line-height: 26px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(137,50,60,.09);
}

.order-flow-filter.order-flow-queue .order-flow-count::after {
  display: none;
}

.order-flow-filter.order-flow-queue .order-flow-copy { grid-area: label; }

.order-flow-filter.order-flow-queue.is-waiting .order-flow-count { color: #bc5862; }
.order-flow-filter.order-flow-queue .order-flow-count.is-zero { color: #c97a80; opacity: .76; }
.order-flow-filter.order-flow-queue.active .order-flow-count {
  border-color: rgba(255,255,255,.88);
  background: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%);
  color: #b72f3e;
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(5,52,84,.22);
}

.order-flow-filter.order-flow-queue.active .order-flow-count::after { color: #aa7178; }

.order-flow-auxiliary-layout {
  display: grid;
  grid-template-columns: minmax(610px, 1.32fr) minmax(460px, 1fr);
  border-top: 1px solid #d8e4ec;
  background: #f8fbfd;
}

.order-flow-aux-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 5px;
  min-width: 0;
  padding: 9px 12px;
  border-right: 1px solid #dbe6ed;
}

.order-flow-aux-group:last-child { border-right: 0; }
.order-flow-aux-group.order-flow-aux-other { grid-column: 1 / -1; border-top: 1px solid #dbe6ed; border-right: 0; }

.order-flow-aux-group > header {
  display: flex;
  align-items: center;
  min-height: 18px;
  margin: 0;
}

.order-flow-aux-group > header strong {
  position: relative;
  padding-left: 9px;
  color: #607a8c;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.order-flow-aux-group > header strong::before {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: #c28b2e;
  content: "";
}

.order-flow-aux-cargo > header strong::before { background: #3b927f; }

#orderView .order-flow-aux-track {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}

.order-flow-filter.order-flow-finance,
.order-flow-filter.order-flow-cargo,
.order-flow-filter.order-flow-service,
.order-flow-filter.order-flow-other {
  width: auto;
  min-width: 142px;
  min-height: 42px;
  justify-content: flex-start;
  gap: 7px;
  border-color: #bfd4e1;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #f4f8fb 100%);
  color: #496a81;
  font-family: -apple-system, "system-ui", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", Arial, sans-serif;
  padding: 5px 9px 5px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 2px 0 #d2dfe7, 0 5px 9px rgba(38,73,101,.08);
}

.order-flow-filter.order-flow-finance { border-color: #ddcda9; background: linear-gradient(180deg, #fff 0%, #fcf8ef 100%); color: #775d2e; }
.order-flow-filter.order-flow-cargo { border-color: #bad8cf; background: linear-gradient(180deg, #fff 0%, #f0f8f5 100%); color: #356f63; }

.order-flow-filter.order-flow-finance:hover,
.order-flow-filter.order-flow-cargo:hover,
.order-flow-filter.order-flow-service:hover,
.order-flow-filter.order-flow-other:hover {
  border-color: #88b4d0;
  background: #f4fbff;
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(38,73,101,.1);
  transform: translateY(-1px);
}

.order-flow-filter.order-flow-finance.active,
.order-flow-filter.order-flow-cargo.active,
.order-flow-filter.order-flow-service.active,
.order-flow-filter.order-flow-other.active {
  z-index: 1;
  border-color: #5f9ec6;
  background: #eaf6fd;
  color: #1d5d89;
  font-weight: 950;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(70,136,180,.2), 0 7px 13px rgba(38,83,115,.15);
  transform: translateY(-1px);
}

.order-flow-filter.order-flow-finance.active {
  border-color: #b48532;
  border-bottom-color: #865e1d;
  background: linear-gradient(180deg, #fffdf7 0%, #f6e6bd 47%, #e6bd69 100%);
  color: #61420e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 3px 0 #a97928, 0 8px 15px rgba(116,82,25,.17);
}

.order-flow-filter.order-flow-cargo.active {
  border-color: #438e7d;
  border-bottom-color: #2d6f61;
  background: linear-gradient(180deg, #f9fffc 0%, #d8eee5 47%, #9dcebd 100%);
  color: #1d584b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 3px 0 #5a9f8d, 0 8px 15px rgba(38,103,87,.15);
}

.order-flow-filter.order-flow-finance.active::before,
.order-flow-filter.order-flow-cargo.active::before {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
}

.order-flow-filter.order-flow-finance.active::before {
  background: #b98127;
  box-shadow: 0 1px 4px rgba(104,70,17,.32);
}

.order-flow-filter.order-flow-cargo.active::before {
  background: #34816f;
  box-shadow: 0 1px 4px rgba(26,81,67,.28);
}

.order-flow-filter.order-flow-finance .order-flow-label,
.order-flow-filter.order-flow-cargo .order-flow-label,
.order-flow-filter.order-flow-service .order-flow-label,
.order-flow-filter.order-flow-other .order-flow-label {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-flow-filter.order-flow-finance .order-flow-count,
.order-flow-filter.order-flow-cargo .order-flow-count,
.order-flow-filter.order-flow-service .order-flow-count,
.order-flow-filter.order-flow-other .order-flow-count {
  margin-left: auto;
  min-width: 30px;
  height: 28px;
  padding: 0 4px;
  border: 1px solid #edc1c5;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffafa 0%, #fff0f1 100%);
  color: #bb3b48;
  font-size: 15px;
  font-weight: 950;
  line-height: 26px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(137,50,60,.08);
}

.order-flow-filter.order-flow-finance .order-flow-count.is-zero,
.order-flow-filter.order-flow-cargo .order-flow-count.is-zero,
.order-flow-filter.order-flow-service .order-flow-count.is-zero,
.order-flow-filter.order-flow-other .order-flow-count.is-zero { opacity: .56; }

.order-flow-filter.order-flow-finance.active .order-flow-count,
.order-flow-filter.order-flow-cargo.active .order-flow-count,
.order-flow-filter.order-flow-service.active .order-flow-count,
.order-flow-filter.order-flow-other.active .order-flow-count {
  border-color: #e8b8bd;
  background: linear-gradient(180deg, #fff 0%, #fff0f1 100%);
  color: #b93241;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(137,50,60,.12);
}

.order-flow-filter.order-flow-finance .order-flow-count,
.order-flow-filter.order-flow-cargo .order-flow-count { border-color: #edc1c5; background: linear-gradient(180deg, #fffafa 0%, #fff0f1 100%); color: #bb3b48; }
.order-flow-filter.order-flow-finance.active .order-flow-count,
.order-flow-filter.order-flow-cargo.active .order-flow-count { background: linear-gradient(180deg, #fff 0%, #fff0f1 100%); color: #b93241; }

.order-flow-filter.order-flow-finance:focus-visible,
.order-flow-filter.order-flow-cargo:focus-visible {
  outline: 3px solid rgba(47,126,176,.28);
  outline-offset: 2px;
}

.order-flow-empty {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border-bottom: 1px solid #d0e0eb;
  background: rgba(255,255,255,.62);
  color: #678297;
}

.order-flow-empty > span {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #9fcfb7;
  border-radius: 50%;
  background: #e8f7ee;
  color: #2e8560;
  font-size: 13px;
  font-weight: 900;
}

.order-flow-empty strong { color: #3b667f; font-size: 12px; }
.order-flow-empty small { color: #8299aa; font-size: 11px; font-weight: 700; }

.order-flow-deferred-group {
  padding: 8px 12px;
  border-bottom: 1px solid #d0e0eb;
  background: #f8fbfd;
}

.order-flow-deferred-group > summary,
.order-flow-support-group > summary {
  width: fit-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #536f84;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
  list-style: none;
}

.order-flow-deferred-group > summary::-webkit-details-marker,
.order-flow-support-group > summary::-webkit-details-marker { display: none; }

.order-flow-deferred-group > summary small,
.order-flow-support-group > summary small {
  color: #7d95a7;
  font-size: 10px;
  font-weight: 800;
}

.order-flow-deferred-group > summary i,
.order-flow-support-group > summary i {
  width: 7px;
  height: 7px;
  border-right: 1px solid #607f95;
  border-bottom: 1px solid #607f95;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .16s ease;
}

.order-flow-deferred-group[open] > summary i,
.order-flow-support-group[open] > summary i { transform: rotate(225deg) translate(-1px, -2px); }

.order-flow-deferred-track { padding-top: 7px; }

.order-flow-filter.order-flow-deferred {
  min-width: 124px;
  min-height: 32px;
  border-radius: 4px;
  padding: 4px 8px;
}

.order-flow-filter.order-flow-deferred .order-flow-label { font-size: 11px; }

.order-flow-support-group {
  padding: 8px 12px;
  background: #f4f8fb;
}

#orderView .order-flow-support-track {
  margin-top: 9px;
  padding: 10px;
  border: 1px solid #d3e0e9;
  border-radius: 5px;
  background: #fff;
}

#orderView .legacy-table-wrap {
  border-color: #b8cad9;
  box-shadow: 0 7px 16px rgba(29, 64, 94, .06);
}

#orderView .legacy-order-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.18);
}

#orderView .legacy-order-table tbody tr {
  transition: background .14s ease, box-shadow .14s ease;
}

#orderView .legacy-order-table tbody tr.order-row td {
  transition: background-color .14s ease, border-color .14s ease;
}

#orderView .legacy-order-table tbody tr.order-row:not(.active):not(.client-locked-row):hover td {
  background: #eef6fb;
  border-right-color: transparent;
}

/* The old sweep was painted once per cell, so a row looked like a strip of
   unrelated tiles. Order hover is one calm band; selected and locked rows
   keep their own semantic colours and the interactive links remain visible. */
#orderView .legacy-order-table tbody tr.order-row:not(.active):not(.client-locked-row):hover td::before {
  transform: scaleX(0);
}

/* Full-page order detail: fixed summary, four visual sections, no business-rule changes. */
.detail-page .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 4px 12px rgba(27, 54, 79, .06);
}

.detail-page-shell {
  max-width: 1500px;
  padding: 18px 22px 36px;
}

.detail-page-card {
  gap: 0;
}

.employee-detail-header {
  min-height: 92px;
  box-sizing: border-box;
  align-items: center;
  border-color: #cbd8e3;
  border-radius: 6px 6px 0 0;
  padding: 17px 20px;
  box-shadow: 0 7px 18px rgba(29, 63, 91, .07);
}

.employee-detail-header h1 {
  font-size: 27px;
}

.employee-detail-header > div:first-child > span {
  display: block;
  color: #718598;
  font-size: 10px;
  text-transform: uppercase;
}

.employee-detail-header.is-locked {
  border-color: #b9c3cd;
  background: linear-gradient(135deg, #ffffff 0%, #f1f4f6 72%, #e8edf1 100%);
  box-shadow: 0 7px 18px rgba(48, 67, 83, .1), inset 4px 0 0 #6e8292;
}

#detailPageBody.is-order-locked .employee-detail-sticky-summary {
  border-color: #c6d0d8;
  background: rgba(248,250,252,.98);
  box-shadow: 0 10px 22px rgba(48, 65, 80, .1);
}

#detailPageBody.is-order-locked .employee-detail-summary-grid {
  background: #f2f5f7;
}

#detailPageBody.is-order-locked .employee-detail-summary-grid > div {
  border-right-color: #d4dde4;
}

#detailPageBody.is-order-locked .employee-detail-summary-grid strong {
  color: #314b60;
}

#detailPageBody.is-order-locked .employee-detail-workspace {
  --detail-section-accent: #718596;
  --detail-section-border: #c8d2da;
  --detail-section-tint: #eef2f5;
  background: linear-gradient(145deg, #edf1f4 0%, #f5f7f8 37%, #fafbfc 100%);
  box-shadow: 0 18px 36px rgba(42, 61, 76, .09), inset 0 3px 0 #718596;
}

#detailPageBody.is-order-locked .employee-detail-tab.active {
  border-bottom-color: #667d8f;
  background: linear-gradient(180deg, #ffffff 0%, #e8eef2 100%);
  color: #36566d;
}

#detailPageBody.is-order-locked .employee-detail-tab.active .employee-detail-tab-index,
#detailPageBody.is-order-locked .employee-detail-tab.active .employee-detail-tab-copy small {
  color: #72889a;
}

.employee-detail-sticky-summary {
  position: sticky;
  top: 58px;
  z-index: 14;
  border: 1px solid #c4d4e1;
  border-top: 0;
  background: rgba(255,255,255,.97);
  box-shadow: 0 10px 22px rgba(26, 60, 89, .1);
  backdrop-filter: blur(9px);
}

.employee-detail-summary-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) repeat(2, minmax(92px, .56fr)) minmax(110px, .66fr) minmax(170px, 1fr) minmax(160px, .92fr);
  align-items: stretch;
  background: #f8fafc;
}

.employee-detail-summary-grid > div {
  min-width: 0;
  min-height: 64px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-right: 1px solid #d8e2ea;
  padding: 9px 13px;
}

.employee-detail-summary-grid > div:last-child {
  border-right: 0;
}

.employee-detail-summary-grid span {
  color: #718497;
  font-size: 10px;
  font-weight: 800;
}

.employee-detail-summary-grid strong {
  min-width: 0;
  overflow: hidden;
  color: #1e3d59;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-summary-route strong {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #163f63;
  font-size: 15px;
}

.employee-summary-route strong i {
  color: #b18136;
  font-size: 17px;
  font-style: normal;
}

.employee-detail-tabs {
  min-height: 62px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #d1dee8;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  padding: 4px 10px 0;
}

.employee-detail-tab {
  position: relative;
  min-width: 0;
  min-height: 57px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 8px;
  align-items: center;
  column-gap: 8px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #5e7285;
  padding: 0 15px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.employee-detail-tab:not(:last-child)::after {
  position: absolute;
  top: 14px;
  right: 0;
  bottom: 13px;
  width: 1px;
  background: #dbe5ec;
  content: "";
}

.employee-detail-tab-index {
  color: #93a7b6;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .06em;
}

.employee-detail-tab-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.employee-detail-tab:hover {
  background: linear-gradient(180deg, #fdfefe 0%, #eff7fb 100%);
  color: #24577f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 2px 7px rgba(35, 88, 125, .07);
  transform: translateY(-1px);
}

.employee-detail-tab.active {
  border-bottom-color: #266b9e;
  background: linear-gradient(180deg, #ffffff 0%, #e9f4fa 100%);
  color: #174d78;
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 8px rgba(31, 86, 122, .1);
}

.employee-detail-tab.active .employee-detail-tab-index {
  color: #216697;
}

.employee-detail-tab-copy strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-detail-tab-copy small {
  min-width: 0;
  overflow: hidden;
  color: #8797a6;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-detail-tab.active .employee-detail-tab-copy small {
  color: #5e7990;
}

.employee-detail-tab.tab-overview.active {
  border-bottom-color: #287aa6;
  background: linear-gradient(180deg, #ffffff 0%, #e7f4fa 100%);
  color: #18557e;
}

.employee-detail-tab.tab-process.active {
  border-bottom-color: #197d87;
  background: linear-gradient(180deg, #ffffff 0%, #e5f5f4 100%);
  color: #12616a;
}

.employee-detail-tab.tab-billing.active {
  border-bottom-color: #ad7620;
  background: linear-gradient(180deg, #ffffff 0%, #fff4de 100%);
  color: #805311;
}

.employee-detail-tab.tab-notes.active {
  border-bottom-color: #43806d;
  background: linear-gradient(180deg, #ffffff 0%, #e8f5ee 100%);
  color: #296251;
}

.employee-detail-tab.tab-process.active .employee-detail-tab-index,
.employee-detail-tab.tab-process.active .employee-detail-tab-copy small { color: #357f86; }
.employee-detail-tab.tab-billing.active .employee-detail-tab-index,
.employee-detail-tab.tab-billing.active .employee-detail-tab-copy small { color: #9a702d; }
.employee-detail-tab.tab-notes.active .employee-detail-tab-index,
.employee-detail-tab.tab-notes.active .employee-detail-tab-copy small { color: #4d806f; }

.employee-detail-tab-status {
  width: 7px;
  height: 7px;
  justify-self: end;
  border: 1px solid #d6ad57;
  border-radius: 50%;
  background: #efc75f;
  box-shadow: 0 0 0 3px rgba(239,199,95,.15);
}

.employee-detail-tab.locked .employee-detail-tab-status {
  border-color: #a7b7c4;
  background: #7e96a8;
  box-shadow: 0 0 0 3px rgba(126,150,168,.13);
}

.employee-detail-workspace {
  --detail-section-accent: #287aa6;
  --detail-section-border: #bdd7e7;
  --detail-section-tint: #edf7fb;
  min-height: 520px;
  border: 1px solid #cbd9e4;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: #f4f7fa;
  padding: 18px;
  box-shadow: 0 18px 36px rgba(28, 59, 85, .09), inset 0 3px 0 var(--detail-section-accent);
  transition: background .2s ease, box-shadow .2s ease;
}

.employee-detail-workspace[data-active-panel="overview"] {
  --detail-section-accent: #287aa6;
  --detail-section-border: #bdd7e7;
  --detail-section-tint: #edf7fb;
  background: linear-gradient(145deg, #edf7fb 0%, #f4f7fa 34%, #f7fafc 100%);
}

.employee-detail-workspace[data-active-panel="process"] {
  --detail-section-accent: #197d87;
  --detail-section-border: #b9ddd9;
  --detail-section-tint: #eaf8f6;
  background: linear-gradient(145deg, #eaf8f6 0%, #f4f8f8 34%, #f8fbfb 100%);
}

.employee-detail-workspace[data-active-panel="billing"] {
  --detail-section-accent: #ad7620;
  --detail-section-border: #ead6ad;
  --detail-section-tint: #fff5e1;
  background: linear-gradient(145deg, #fff5e1 0%, #faf8f3 34%, #fdfbf7 100%);
}

.employee-detail-workspace[data-active-panel="notes"] {
  --detail-section-accent: #43806d;
  --detail-section-border: #c5dfd4;
  --detail-section-tint: #ebf7f0;
  background: linear-gradient(145deg, #ebf7f0 0%, #f4f8f6 34%, #f8fbf9 100%);
}

.employee-detail-panel {
  min-width: 0;
}

.employee-detail-panel.is-active-panel {
  animation: employee-detail-panel-in .18s ease-out both;
}

@keyframes employee-detail-panel-in {
  from { opacity: .45; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .employee-detail-tab,
  .employee-detail-panel.is-active-panel,
  .employee-billing-detail-panel { transition: none; animation: none; }
}

@media (max-width: 760px) {
  .employee-detail-tabs { min-height: 56px; padding: 3px 4px 0; }
  .employee-detail-tab { min-height: 52px; grid-template-columns: minmax(0, 1fr); padding: 5px 6px 3px; text-align: center; }
  .employee-detail-tab:not(:last-child)::after { top: 11px; bottom: 10px; }
  .employee-detail-tab-index,
  .employee-detail-tab-status,
  .employee-detail-tab-copy small { display: none; }
  .employee-detail-tab-copy { display: block; }
  .employee-detail-tab-copy strong { white-space: normal; font-size: 12px; line-height: 1.25; }
}

.employee-detail-panel-heading {
  position: relative;
  min-width: 0;
  overflow: hidden;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-sizing: border-box;
  margin-bottom: 14px;
  border: 1px solid var(--detail-section-border);
  border-bottom-color: color-mix(in srgb, var(--detail-section-border) 82%, #9daebb);
  border-radius: 6px;
  background: linear-gradient(90deg, #ffffff 0%, var(--detail-section-tint) 100%);
  padding: 11px 18px 11px 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 5px 14px rgba(31, 65, 91, .06);
}

.employee-detail-panel-heading::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 5px;
  border-radius: 0 4px 4px 0;
  background: var(--detail-section-accent);
  box-shadow: 2px 0 8px color-mix(in srgb, var(--detail-section-accent) 22%, transparent);
  content: "";
}

.employee-detail-panel-heading::after {
  position: absolute;
  top: -33px;
  right: 32px;
  width: 86px;
  height: 86px;
  border: 1px solid var(--detail-section-border);
  border-radius: 50%;
  box-shadow: 0 0 0 13px color-mix(in srgb, var(--detail-section-tint) 68%, transparent);
  content: "";
  opacity: .55;
  pointer-events: none;
}

.employee-detail-panel-heading > * {
  position: relative;
  z-index: 1;
}

.employee-detail-panel-heading span {
  display: block;
  color: var(--detail-section-accent);
  font-size: 9px;
  font-weight: 900;
}

.employee-detail-panel-heading h2 {
  margin-top: 3px;
  color: #1c4668;
  font-size: 19px;
}

.employee-detail-panel-heading p {
  margin: 0;
  color: color-mix(in srgb, var(--detail-section-accent) 58%, #6e8090);
  font-size: 11px;
  font-weight: 700;
}

.employee-billing-panel-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.employee-billing-panel-heading > p {
  justify-self: end;
  text-align: right;
}

.employee-billing-panel-profit {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  justify-self: center;
  gap: 7px;
  color: #0e687d;
  font-size: 17px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 1px 0 #fff;
  white-space: nowrap;
}

.employee-detail-panel-heading .employee-billing-panel-profit > span {
  display: inline;
  color: #4e798c;
  font-size: 12px;
  font-weight: 900;
}

.employee-billing-panel-profit > b,
.employee-billing-panel-profit .profit-amount-with-currency,
.employee-billing-panel-profit .profit-amount {
  display: inline-flex;
  align-items: baseline;
  font: inherit;
}

.employee-billing-panel-profit .profit-amount-with-currency { gap: 5px; }
.employee-billing-panel-profit .profit-amount-with-currency em {
  color: #5c8796;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}
.employee-billing-panel-profit .profit-amount-integer {
  display: inline;
  color: #0d6478;
  font-size: 17px;
  font-weight: 900;
}
.employee-billing-panel-profit .profit-amount-decimal {
  display: inline;
  margin-left: 1px;
  color: #1f7386;
  font-size: 10px;
  font-weight: 850;
}

.employee-billing-panel-profit.negative,
.employee-billing-panel-profit.negative .profit-amount-integer,
.employee-billing-panel-profit.negative .profit-amount-decimal { color: #ab4c4c; }
.employee-billing-panel-profit.negative .profit-amount-with-currency em { color: #a36f6f; }

.employee-detail-panel[data-detail-panel="overview"] .old-route-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-right: 10px;
}

.old-route-section > span { flex: 0 0 auto; }

.route-tool-rail {
  min-width: 0;
  max-width: 72%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.route-tool-pill,
.route-tool-overflow > summary {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #9cc2da;
  border-bottom-color: #6c9ab9;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #dceef8 100%);
  color: #1c5b84;
  padding: 0 9px;
  font-family: inherit;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 1px 0 #a7c6d9, 0 4px 8px rgba(31, 88, 124, .12);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

button.route-tool-pill { cursor: pointer; }

.route-tool-pill:hover,
.route-tool-overflow > summary:hover {
  border-color: #5b98c1;
  background: linear-gradient(180deg, #ffffff 0%, #c7e3f4 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #8fb8d2, 0 7px 12px rgba(31, 88, 124, .16);
  transform: translateY(-1px);
}

.route-tool-pill.route-tool-pill-tracking {
  border-color: #8cb9d8;
  border-bottom-color: #6798b9;
  background: linear-gradient(#ffffff 0%, #e6f5ff 54%, #c9e7f7 100%);
  color: #17628d;
}

.route-tool-pill.route-tool-pill-tracking:hover {
  border-color: #5c9ac3;
  border-bottom-color: #427fa8;
  background: linear-gradient(#ffffff 0%, #eefdff 50%, #bde3f5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 2px 0 #85b9d8, 0 7px 12px rgba(28, 112, 158, .17);
}

.route-tool-pill span {
  overflow: hidden;
  font-size: 11px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-tool-pill i {
  flex: 0 0 auto;
  color: #3d7fa8;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.route-tool-overflow {
  position: relative;
  flex: 0 0 auto;
}

.route-tool-overflow > summary {
  cursor: pointer;
  color: #2c709b;
  font-size: 11px;
  font-weight: 950;
  list-style: none;
}

.route-tool-overflow > summary::-webkit-details-marker { display: none; }

.route-tool-overflow[open] > summary {
  border-color: #4d91bd;
  background: linear-gradient(180deg, #f7fcff 0%, #c6e3f4 100%);
}

.route-tool-pill:focus { outline: none; }

.route-tool-pill:focus-visible,
.route-tool-overflow > summary:focus-visible {
  outline: 2px solid #3b89b8;
  outline-offset: 2px;
}

.order-vessel-motion-backdrop {
  z-index: 110;
  display: block;
  padding: 0;
  background: rgba(18, 35, 52, .42);
  backdrop-filter: blur(2px);
}

/* Keep the order entry on the identical vessel window structure used by live schedules. */
.order-schedule-vessel-dialog {
  position: absolute;
  top: 0;
  right: 0;
  width: min(1180px, 94vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid #9eb2c4;
  background: #fff;
  box-shadow: -22px 0 46px rgba(22, 44, 68, .28);
}

.order-schedule-vessel-head {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #183e68;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%),
    linear-gradient(180deg, #315f91 0%, #254f7c 48%, #1d426b 100%);
  padding: 14px 18px;
}

.order-schedule-vessel-head span,
.order-schedule-vessel-head small {
  display: block;
  color: #cbdced;
  font-size: 11px;
  font-weight: 900;
}

.order-schedule-vessel-head strong {
  display: block;
  color: #fff;
  font-size: 19px;
  font-weight: 950;
}

.order-schedule-vessel-head small {
  max-width: min(780px, 70vw);
  overflow: hidden;
  color: #d9e8f4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-schedule-vessel-head button {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 6px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform .14s ease, background .14s ease;
}

.order-schedule-vessel-head button:hover { transform: translateY(-1px); background: rgba(255,255,255,.26); }

.order-schedule-vessel-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  background: linear-gradient(180deg, #f4f8fb 0%, #edf4f8 100%);
  padding: 16px;
}

.order-tracking-pages {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  overflow-x: auto;
  padding: 12px 16px 0;
  border-bottom: 1px solid #afc8dc;
  background: #eaf1f7;
}
.order-tracking-pages [role="tab"] {
  position: relative;
  flex: 0 0 auto;
  min-height: 43px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: #526d84;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.order-tracking-pages [role="tab"]:hover { background: #f6f9fc; color: #255b83; }
.order-tracking-pages [aria-selected="true"] {
  background: #fff;
  color: #155a91;
  border-color: #afc8dc;
  box-shadow: inset 0 3px #4486b5;
}
.order-tracking-pages [role="tab"]:focus-visible { outline: 2px solid #4486b5; outline-offset: -3px; }
.order-tracking-pages [data-tracking-alert] { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #c73535; }
.order-tracking-pages [data-tracking-alert][hidden], [data-tracking-page][hidden] { display: none !important; }
.order-tracking-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; border-bottom: 1px solid #d5e1eb; padding-bottom: 12px; }
.order-tracking-toolbar p { margin: 0; color: #3f5e76; font-size: 13px; overflow-wrap: anywhere; }
.order-tracking-toolbar button { flex: 0 0 auto; border: 1px solid #abc4d8; background: #fff; color: #255b83; border-radius: 5px; padding: 8px 12px; cursor: pointer; }
.order-tracking-toolbar button:hover { background: #e8f3fa; }
.order-tracking-toolbar button:disabled { opacity: .45; cursor: wait; }
.order-tracking-reference { background: #fff; }
@media (max-width: 600px) {
  .order-tracking-pages { padding: 6px 8px 0; }
  .order-tracking-pages [role="tab"] { padding: 10px 12px; }
  .order-tracking-toolbar { align-items: flex-start; }
}

.order-air-tracking-dialog { width: min(940px, 94vw); }
.order-air-tracking-body { display: grid; align-content: start; gap: 16px; }
.order-air-tracking-search { display: flex; align-items: end; gap: 10px; border-bottom: 1px solid #cbdce8; padding-bottom: 14px; }
.order-air-tracking-search label { align-self: center; color: #294a65; font-size: 13px; font-weight: 900; white-space: nowrap; }
.order-air-tracking-search input { width: min(300px, 100%); min-height: 38px; border: 1px solid #a9c4d9; border-radius: 5px; background: #fff; color: #18384f; padding: 8px 11px; font: inherit; font-variant-numeric: tabular-nums; }
.order-air-tracking-search input:focus { outline: 2px solid #77b7df; outline-offset: 1px; }
.order-air-tracking-search button { min-height: 38px; border: 1px solid #387eae; border-radius: 5px; background: linear-gradient(180deg, #55a8d2, #2376a7); box-shadow: 0 3px 0 #14557e; color: #fff; padding: 7px 18px; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.order-air-tracking-search button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.order-air-tracking-search button:disabled { cursor: wait; filter: grayscale(.5); opacity: .62; transform: none; }
.order-air-tracking-content { display: grid; gap: 18px; color: #183a56; }
.order-air-tracking-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 22px; border: 1px solid #b8d1e4; border-left: 4px solid #3489bd; border-radius: 6px; background: #fff; padding: 17px 20px; }
.order-air-tracking-summary > div:first-child { display: grid; gap: 3px; }
.order-air-tracking-summary small { color: #708aa0; font-size: 11px; font-weight: 800; }
.order-air-tracking-summary strong { color: #153c5c; font-size: 21px; font-weight: 950; }
.order-air-tracking-summary span { color: #55738b; font-size: 12px; font-weight: 800; }
.order-air-tracking-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.order-air-tracking-route i { color: #c29a5c; font-style: normal; }
.order-air-tracking-airport { display: grid; align-content: center; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.order-air-tracking-airport b { color: #163d5c; font-size: 15px; font-weight: 900; line-height: 1.35; }
.order-air-tracking-airport small { color: #66859c; font-size: 11px; font-weight: 800; line-height: 1.2; }
.order-air-tracking-summary > p { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 16px; margin: 0; border-top: 1px solid #e3ecf3; padding-top: 12px; font-size: 13px; font-weight: 800; }
.order-air-tracking-summary > p small { margin-left: auto; }
.order-air-tracking-warnings { border-left: 3px solid #c16d3c; background: #fff8f1; padding: 12px 16px; }
.order-air-tracking-warnings h3, .order-air-tracking-section h3 { margin: 0 0 11px; color: #244e70; font-size: 15px; font-weight: 950; }
.order-air-tracking-section h3 small { margin-left: 8px; color: #7b91a3; font-size: 11px; font-weight: 750; }
.order-air-tracking-warnings p { margin: 5px 0 0; color: #7c472e; font-size: 12px; font-weight: 800; }
.order-air-tracking-section { min-width: 0; }
.order-air-tracking-legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 10px; }
.order-air-tracking-leg { display: grid; gap: 7px; border: 1px solid #c6d8e6; border-radius: 6px; background: #fff; padding: 14px; }
.order-air-tracking-leg > small { color: #3478a7; font-size: 11px; font-weight: 900; }
.order-air-tracking-leg > div:first-of-type { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 9px; }
.order-air-tracking-leg strong { color: #163d5c; font-size: 17px; font-weight: 950; }
.order-air-tracking-leg i { color: #83a9c1; font-style: normal; }
.order-air-tracking-leg-times { display: grid; gap: 7px; border-top: 1px solid #e2ebf2; padding-top: 10px; }
.order-air-tracking-call { display: grid; grid-template-columns: 30px 32px minmax(0, 1fr); align-items: baseline; gap: 8px; color: #375c77; font-size: 12px; }
.order-air-tracking-call > span { font-weight: 900; }
.order-air-tracking-call > b { color: #2477a6; font-size: 11px; font-weight: 900; }
.order-air-tracking-call.estimated > b, .order-air-tracking-call.scheduled > b { color: #70889a; }
.order-air-tracking-call time { color: #173e5d; font-variant-numeric: tabular-nums; font-weight: 900; }
.order-air-tracking-call em { grid-column: 2 / -1; color: #73899b; font-style: normal; font-weight: 750; }
.order-air-tracking-events { overflow: hidden; border: 1px solid #c6d8e6; border-radius: 6px; background: #fff; }
.order-air-tracking-event { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 68px; border-bottom: 1px solid #e5edf3; padding: 9px 14px; }
.order-air-tracking-event:last-child { border-bottom: 0; }
.order-air-tracking-event > span { border-radius: 3px; background: #d8edf9; color: #176b9d; padding: 4px 0; text-align: center; font-size: 11px; font-weight: 900; }
.order-air-tracking-event.estimated > span { background: #eef2f5; color: #667b8d; }
.order-air-tracking-event > div { display: grid; gap: 3px; min-width: 0; }
.order-air-tracking-event strong { font-size: 13px; font-weight: 900; }
.order-air-tracking-event small { overflow-wrap: anywhere; color: #6b8295; font-size: 11px; }
.order-air-tracking-event time { color: #1f658f; font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 900; }
.order-air-tracking-empty { margin: 0; border: 1px dashed #c2d5e3; padding: 20px; color: #6c8395; font-size: 12px; }
@media (max-width: 680px) {
  .order-air-tracking-dialog { width: 100vw; }
  .order-air-tracking-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .order-air-tracking-search label { grid-column: 1 / -1; }
  .order-air-tracking-search input { width: 100%; box-sizing: border-box; }
  .order-air-tracking-summary { grid-template-columns: 1fr; }
  .order-air-tracking-summary > p { grid-column: 1; }
  .order-air-tracking-summary > p small { margin-left: 0; }
  .order-air-tracking-event { grid-template-columns: 42px minmax(0, 1fr); }
}

.order-schedule-vessel-drawer { display: grid; gap: 16px; min-width: 0; padding: 2px; }

.order-schedule-vessel-hero {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(480px, 1.18fr);
  align-items: center;
  gap: 14px 18px;
  border: 1px solid rgba(112, 146, 176, .68);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(244,249,252,.94) 46%, rgba(226,238,247,.92) 100%);
  padding: 16px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 16px 34px rgba(30, 61, 91, .12);
}

.order-schedule-vessel-title { display: grid; min-width: 0; gap: 5px; }
.order-schedule-vessel-kicker { color: #2d74ad; font-size: 11px; font-weight: 900; }
.order-schedule-vessel-title strong { color: #102d46; font-size: 24px; font-weight: 950; line-height: 1.2; }
.order-schedule-vessel-title span:last-child { color: #506b82; font-size: 13px; font-weight: 800; }
.order-schedule-vessel-motion-hero { min-width: 0; }
.order-schedule-vessel-motion-hero .vessel-motion-status { margin: 0; padding: 8px 10px; }
.order-schedule-vessel-motion-hero .vessel-motion-visual { grid-template-columns: minmax(158px, 1fr) minmax(120px, .72fr) minmax(178px, 1.08fr); gap: 8px; min-height: 82px; }
.order-schedule-vessel-motion-hero .vessel-motion-port { min-height: 44px; padding: 8px 10px; }
.order-schedule-vessel-motion-hero .vessel-motion-port strong { max-width: 148px; overflow: hidden; font-size: 19px; text-overflow: ellipsis; }
.order-schedule-vessel-motion-hero .vessel-motion-port small { font-size: 10px; }
.order-schedule-vessel-motion-hero .vessel-motion-ship { top: 28px; width: 58px; height: 25px; }
.order-schedule-vessel-motion-hero .vessel-motion-label { top: 0; font-size: 11px; padding: 6px 11px; }

.order-vessel-future-section {
  min-width: 0;
  border: 1px solid #b9cbd8;
  border-radius: 6px;
  background: #fff;
  padding: 16px 18px 20px;
  box-shadow: 0 8px 22px rgba(30, 61, 91, .07);
}
.order-vessel-future-heading { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.order-vessel-future-heading strong { color: #193c5e; font-size: 16px; font-weight: 900; }
.order-vessel-future-heading span { color: #8296a7; font-size: 11px; }
.order-vessel-future-scroll { overflow-x: auto; overflow-y: hidden; padding: 16px 0 6px; }
.order-vessel-future-grid {
  display: grid;
  grid-template-columns: repeat(var(--future-columns), 296px);
  grid-template-rows: 78px 78px;
  column-gap: 0;
  row-gap: 24px;
  width: max-content;
  padding: 0 26px 0 0;
}
.order-vessel-future-grid:not(.has-return) { grid-template-rows: 78px; }
.order-vessel-future-call {
  position: relative;
  grid-row: var(--future-row);
  grid-column: var(--future-column);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 22px 14px 0 0;
  color: #193c5e;
}
.order-vessel-future-call strong { max-width: 146px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 900; }
.order-vessel-future-call small { color: #74899a; font-size: 10px; white-space: nowrap; }
.order-vessel-future-flags { position: absolute; top: -15px; left: 0; display: flex; gap: 4px; z-index: 2; }
.order-vessel-future-flags b { border: 1px solid #b7d1e2; border-radius: 3px; background: #eff6fb; color: #286387; padding: 1px 6px; font-size: 10px; line-height: 15px; }
.order-vessel-future-flags .pod { border-color: #e5cda7; background: #fff7ea; color: #916525; }
.order-vessel-future-call.origin:not(.previous) .order-vessel-future-dot { border-color: #1e6a9b; box-shadow: 0 0 0 3px #e3f0f9; }
.order-vessel-future-call.destination:not(.previous) .order-vessel-future-dot { border-color: #c69346; box-shadow: 0 0 0 3px #fbf2e4; }
.order-vessel-future-call.destination:not(.previous) strong { color: #80561c; }
.order-vessel-future-time { color: #345f7a; font-size: 12px; font-weight: 700; white-space: nowrap; }
.order-vessel-future-call.previous .order-vessel-future-time,
.order-vessel-future-call.unconfirmed .order-vessel-future-time { color: #94a1aa; }
.order-vessel-future-dot {
  position: absolute;
  top: 4px;
  left: 2px;
  z-index: 1;
  width: 11px;
  height: 11px;
  border: 3px solid #2382bd;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px #e7f3f9;
}
.order-vessel-future-call.next .order-vessel-future-dot { border-color: #e2a63b; box-shadow: 0 0 0 3px #fff2db; }
.order-vessel-future-call.previous strong { color: #728493; }
.order-vessel-future-call.previous small { color: #94a1aa; }
.order-vessel-future-call.previous .order-vessel-future-dot { border-color: #9caebc; box-shadow: 0 0 0 3px #edf1f4; }
.order-vessel-future-call.previous::after { border-color: #b8c4cd !important; }
.order-vessel-future-call.arrived .order-vessel-future-dot { border-color: #2d8ea5; box-shadow: 0 0 0 3px #e3f3f5; }
.order-vessel-future-call.unconfirmed .order-vessel-future-dot { border-color: #aab8c2; box-shadow: 0 0 0 3px #f0f3f5; }
.order-vessel-future-call:not(.end):not(.turn)::after {
  position: absolute;
  top: 9px;
  left: 9px;
  width: calc(100% - 9px);
  border-top: 2px solid #98c9e7;
  content: "";
}
.order-vessel-future-call.bottom:not(.end)::after { left: auto; right: calc(100% - 9px); width: 100%; }
.order-vessel-future-call.before-unconfirmed::after { border-top-style: dotted !important; border-color: #b9c5cd !important; }
.order-vessel-future-call.turn::after {
  position: absolute;
  top: 9px;
  left: 9px;
  width: calc(100% - 3px);
  height: 102px;
  border-top: 2px solid #98c9e7;
  border-right: 2px solid #98c9e7;
  border-bottom: 2px solid #98c9e7;
  border-radius: 0 32px 32px 0;
  content: "";
}
.order-vessel-future-pending { display: flex; gap: 18px; align-items: center; min-height: 58px; color: #70879b; font-size: 13px; }
.order-vessel-future-pending span { color: #244d70; font-weight: 800; }

.order-schedule-vessel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid rgba(151, 181, 207, .9);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #edf6fb 100%);
  padding: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(98, 132, 162, .10), 0 12px 26px rgba(38, 71, 103, .11);
}

.order-schedule-vessel-tabs button {
  display: inline-flex;
  min-width: 122px;
  min-height: 35px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(129, 165, 196, .92);
  border-bottom-color: rgba(82, 122, 157, .95);
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #edf5fb 48%, #d0e0eb 100%);
  color: #203f5c;
  padding: 0 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(74, 111, 143, .16), 0 3px 0 rgba(91, 125, 154, .75), 0 9px 18px rgba(29, 53, 77, .15);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease, color .14s ease;
}

.order-schedule-vessel-tabs button span {
  display: inline-grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid rgba(45, 127, 184, .18);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(211,232,245,.92) 100%);
  color: #1f75ac;
  font-size: 12px;
  line-height: 1;
}

.order-schedule-vessel-tabs button.active,
.order-schedule-vessel-tabs button:hover {
  border-color: #17699e;
  border-bottom-color: #0d4f7e;
  background: linear-gradient(180deg, #3b9ed0 0%, #1977ad 48%, #0c5b91 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(9, 53, 86, .28), 0 4px 0 rgba(13, 75, 116, .82), 0 13px 22px rgba(22, 94, 145, .28);
  transform: translateY(-2px);
}

.order-schedule-vessel-tabs button.active span,
.order-schedule-vessel-tabs button:hover span { border-color: rgba(255,255,255,.38); background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.14) 100%); color: #fff; }
.order-schedule-vessel-tabs button:active { transform: translateY(1px); }

.order-schedule-vessel-panel { display: none; }
.order-schedule-vessel-panel.active {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(200, 216, 228, .95);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 12px 28px rgba(28, 55, 82, .08);
}

.order-schedule-vessel-coordinate-map {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(112, 158, 191, .88);
  border-radius: 8px;
  background: #eaf4f8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 18px 38px rgba(31, 57, 82, .16);
}

.order-schedule-vessel-coordinate-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #eaf4f8;
  background-image:
    linear-gradient(rgba(69, 132, 173, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69, 132, 173, .16) 1px, transparent 1px);
  background-size: 42px 42px;
}

.order-schedule-vessel-coordinate-grid::before {
  content: "AIS COORDINATE GRID";
  position: absolute;
  top: 16px;
  right: 18px;
  color: rgba(40, 92, 128, .46);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 1px;
}

.order-schedule-vessel-coordinate-marker {
  position: absolute;
  z-index: 2;
  left: var(--vessel-map-x);
  top: var(--vessel-map-y);
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
}

.order-schedule-vessel-coordinate-marker::before {
  content: "";
  position: absolute;
  inset: -11px;
  border: 2px solid rgba(35, 126, 180, .52);
  border-radius: 50%;
  animation: order-schedule-vessel-coordinate-pulse 2.2s ease-out infinite;
}

.order-schedule-vessel-coordinate-marker i { position: absolute; inset: 2px; display: block; border: 3px solid #fff; border-radius: 50%; background: #197daf; box-shadow: 0 5px 12px rgba(20, 91, 135, .32); }
.order-schedule-vessel-coordinate-marker b { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); border: 1px solid rgba(20, 102, 151, .55); border-radius: 4px; background: #fff; color: #125b88; padding: 3px 5px; font-size: 9px; font-weight: 950; line-height: 1; box-shadow: 0 4px 10px rgba(24, 80, 116, .16); }

.order-schedule-vessel-coordinate-info {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: grid;
  gap: 5px;
  max-width: 500px;
  border: 1px solid rgba(110, 157, 191, .8);
  border-left: 4px solid #2785ba;
  border-radius: 6px;
  background: rgba(255,255,255,.95);
  padding: 13px 15px;
  box-shadow: 0 10px 26px rgba(31, 73, 105, .17), inset 0 1px 0 #fff;
}

.order-schedule-vessel-coordinate-info > span { color: #2f79a5; font-size: 10px; font-weight: 950; letter-spacing: 1px; }
.order-schedule-vessel-coordinate-info strong { color: #153e5d; font-size: 20px; font-weight: 950; line-height: 1.2; }
.order-schedule-vessel-coordinate-info p { margin: 0; color: #3c6079; font-size: 12px; font-weight: 850; line-height: 1.5; }
.order-schedule-vessel-coordinate-info small { color: #678094; font-size: 11px; font-weight: 800; line-height: 1.4; }

.order-schedule-vessel-coordinate-link {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  border: 1px solid #2f82b3;
  border-radius: 5px;
  background: #fff;
  color: #1b6f9f;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(22, 92, 137, .16);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.order-schedule-vessel-coordinate-link:hover { transform: translateY(-1px); border-color: #145f8e; background: #f8fcff; box-shadow: inset 0 1px 0 #fff, 0 7px 14px rgba(22, 92, 137, .22); }
.order-schedule-vessel-coordinate-map.unavailable .order-schedule-vessel-coordinate-info { border-left-color: #8a9aab; }

@keyframes order-schedule-vessel-coordinate-pulse {
  0% { transform: scale(.55); opacity: .88; }
  75%, 100% { transform: scale(1.35); opacity: 0; }
}

.order-vessel-map-stage { display: grid; gap: 12px; }
.order-vessel-fast-map { position: relative; overflow: hidden; border: 1px solid rgba(107, 154, 188, .88); border-radius: 8px; background: #edf6fa; box-shadow: inset 0 1px 0 #fff, 0 14px 30px rgba(28, 69, 98, .14); }
.order-vessel-fast-map-head { display: grid; gap: 3px; min-height: 68px; border-bottom: 1px solid rgba(117, 158, 188, .52); background: rgba(255,255,255,.88); padding: 13px 17px; }
.order-vessel-fast-map-head span { color: #2d7ca8; font-size: 10px; font-weight: 950; letter-spacing: 1.1px; }
.order-vessel-fast-map-head strong { color: #143c5b; font-size: 21px; font-weight: 950; line-height: 1.15; }
.order-vessel-fast-map-head small { color: #668095; font-size: 12px; font-weight: 800; }
.order-vessel-fast-map-canvas { position: relative; min-height: 520px; overflow: hidden; background: #dbeaf1; }
.order-vessel-fast-map-canvas::after { content: "AIS 实际航迹"; position: absolute; z-index: 460; top: 14px; right: 16px; color: #245d7d; font-size: 10px; font-weight: 950; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(255,255,255,.8); pointer-events: none; }
.order-vessel-fast-map-layer { position: absolute; inset: 0; z-index: 1; background: #dbeaf1; }
.order-vessel-fast-map-loading { position: absolute; z-index: 470; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(92,139,168,.7); border-radius: 4px; background: rgba(255,255,255,.92); color: #2a678e; padding: 6px 9px; font-size: 11px; font-weight: 900; box-shadow: 0 4px 12px rgba(25,75,109,.18); }
.order-vessel-fast-map-attribution { position: absolute; z-index: 460; right: 8px; bottom: 7px; border-radius: 3px; background: rgba(255,255,255,.86); color: #55758a; padding: 2px 5px; font-size: 9px; font-weight: 800; pointer-events: none; }
.order-vessel-fast-map-vessel { border: 0 !important; background: transparent !important; }
.order-vessel-fast-map-vessel span { display: grid; width: 34px; height: 34px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #086b9f; color: #fff; font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 18px; line-height: 1; text-shadow: 0 1px 1px rgba(0,0,0,.28); box-shadow: 0 0 0 7px rgba(21,126,180,.19), 0 5px 12px rgba(17,73,107,.42); animation: order-vessel-fast-live-ship 2.1s ease-in-out infinite; }
.order-vessel-fast-map-vessel.stale span { background: #9b6e34; box-shadow: 0 0 0 7px rgba(155,110,52,.17), 0 5px 12px rgba(91,63,29,.34); animation: none; }
.order-vessel-route-map-port { border: 0 !important; background: transparent !important; }
.order-vessel-route-map-port span { display: grid; width: 25px; height: 25px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #1877b7; color: #fff; font-size: 10px; font-weight: 950; box-shadow: 0 3px 8px rgba(18,86,129,.35); }
.order-vessel-route-map-port.current span { width: 29px; height: 29px; background: #2f8a69; box-shadow: 0 0 0 5px rgba(47,138,105,.18), 0 4px 10px rgba(28,91,66,.34); }
.order-vessel-route-map-port.planned span { background: #de6e91; font-size: 11px; box-shadow: 0 3px 8px rgba(165,60,95,.34); }
.order-vessel-route-map-label { border: 1px solid rgba(55,99,128,.35) !important; border-radius: 3px !important; background: rgba(255,255,255,.94) !important; color: #244f6a !important; padding: 2px 5px !important; font-family: inherit !important; font-size: 10px !important; font-weight: 900 !important; box-shadow: 0 2px 6px rgba(22,68,96,.18) !important; }
.order-vessel-route-map-label::before { border-top-color: rgba(255,255,255,.94) !important; }
.order-vessel-route-map-popup { display: grid; gap: 6px; min-width: 168px; color: #28516c; font-family: inherit; }
.order-vessel-route-map-popup em { color: #6b8798; font-size: 10px; font-style: normal; font-weight: 950; letter-spacing: .5px; }
.order-vessel-route-map-popup strong { color: #173f5d; font-size: 14px; }
.order-vessel-route-map-popup span { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid #dbe8ef; padding-top: 5px; font-size: 11px; font-weight: 800; }
.order-vessel-route-map-popup b { color: #6b8798; font-size: 10px; }
.order-vessel-route-map-legend { position: absolute; z-index: 460; right: 15px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 7px; max-width: calc(100% - 30px); pointer-events: none; }
.order-vessel-route-map-legend span { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(97,135,159,.42); border-radius: 3px; background: rgba(255,255,255,.94); color: #42697f; padding: 4px 6px; font-size: 9px; font-weight: 950; box-shadow: 0 3px 8px rgba(25,71,99,.12); }
.order-vessel-route-map-legend span::before { width: 16px; height: 3px; background: #1877b7; content: ""; }
.order-vessel-route-map-legend .planned::before { background: repeating-linear-gradient(90deg, #de6e91 0 5px, transparent 5px 8px); }
.order-vessel-route-map-legend .active::before { height: 4px; background: #075f99; }
.order-vessel-route-map-legend .ship::before { width: 8px; height: 8px; border-radius: 50%; background: #086b9f; box-shadow: 0 0 0 2px rgba(8,107,159,.18); }
.order-vessel-fast-map-grid { position: absolute; inset: 0; background-color: #e6f2f8; background-image: linear-gradient(rgba(73,132,171,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(73,132,171,.18) 1px, transparent 1px); background-size: 48px 48px; }
.order-vessel-fast-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.order-vessel-fast-map-route { fill: none; stroke: #2385b7; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 8; filter: drop-shadow(0 3px 3px rgba(20,96,143,.24)); animation: order-vessel-fast-route-flow 4s linear infinite; }
.order-vessel-fast-map-point { fill: #b9dceb; stroke: #fff; stroke-width: 2; }
.order-vessel-fast-map-pulse { fill: rgba(33,126,181,.2); stroke: rgba(33,126,181,.42); stroke-width: 2; animation: order-vessel-fast-map-pulse 2.3s ease-out infinite; transform-origin: center; }
.order-vessel-fast-map-ship { fill: #0a659c; stroke: #fff; stroke-width: 4; filter: drop-shadow(0 5px 8px rgba(11,75,115,.28)); }
.order-vessel-fast-map-ship-mark { fill: #f6fbfe; }
.order-vessel-fast-map-live { position: absolute; z-index: 470; top: 16px; left: 16px; border: 1px solid rgba(18,100,150,.52); border-radius: 4px; background: rgba(255,255,255,.94); color: #12608d; padding: 4px 6px; font-size: 9px; font-weight: 950; box-shadow: 0 4px 10px rgba(22,79,112,.16); }
.order-vessel-fast-map-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #5e788d; font-size: 13px; font-weight: 850; }
.order-vessel-route-rail { overflow: hidden; border-bottom: 1px solid rgba(117,158,188,.52); background: #f8fbfd; }
.order-vessel-route-rail header { display: flex; align-items: end; justify-content: space-between; gap: 14px; border-bottom: 1px solid rgba(184,207,221,.74); background: #fff; padding: 10px 16px; }
.order-vessel-route-rail header > div { display: grid; gap: 2px; }
.order-vessel-route-rail header span { color: #357da8; font-size: 9px; font-weight: 950; letter-spacing: 1px; }
.order-vessel-route-rail header strong { color: #1d4865; font-size: 13px; font-weight: 950; }
.order-vessel-route-rail header p { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; color: #3a637d; font-size: 11px; font-weight: 850; text-align: right; }
.order-vessel-route-rail header p b { color: #6a8395; font-weight: 950; }
.order-vessel-route-rail header p i { width: 1px; height: 11px; margin: 0 4px; background: #b7cad8; }
.order-vessel-route-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.order-vessel-route-scroll ol { display: flex; min-width: max-content; margin: 0; padding: 24px 16px 16px; list-style: none; }
.order-vessel-route-scroll li { position: relative; flex: 0 0 198px; min-width: 0; padding-top: 15px; padding-right: 18px; }
.order-vessel-route-scroll li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 21px; left: 20px; right: -2px; height: 2px; background: repeating-linear-gradient(90deg, #b8cad8 0 8px, transparent 8px 12px); }
.order-vessel-route-dot { position: absolute; z-index: 1; top: 15px; left: 11px; width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: #3a86b3; box-shadow: 0 0 0 1px #7ea9c1; }
.order-vessel-route-scroll li.departed .order-vessel-route-dot { background: #427a9a; }
.order-vessel-route-scroll li.planned .order-vessel-route-dot { background: #d48c37; box-shadow: 0 0 0 1px #c28a4b; }
.order-vessel-route-scroll li.current .order-vessel-route-dot { background: #3c9370; box-shadow: 0 0 0 1px #4f9d7c, 0 0 0 5px rgba(60,147,112,.12); }
.order-vessel-route-stop { display: grid; gap: 5px; min-height: 108px; border: 1px solid #c5d9e6; border-radius: 5px; background: #fff; padding: 10px 11px; box-shadow: 0 3px 8px rgba(35,75,103,.06); }
.order-vessel-route-scroll li.current .order-vessel-route-stop { border-color: #77b89d; background: #f5fbf8; }
.order-vessel-route-scroll li.planned .order-vessel-route-stop { border-color: #e0bb87; background: #fffbf4; }
.order-vessel-route-scroll li.planned { flex-basis: 222px; }
.order-vessel-route-stop em { width: fit-content; border-radius: 3px; background: #e5f1f7; color: #2f6e93; padding: 2px 5px; font-size: 9px; font-style: normal; font-weight: 950; }
.order-vessel-route-scroll li.current em { background: #e2f4eb; color: #287156; }
.order-vessel-route-scroll li.planned em { background: #fff0db; color: #9a631d; }
.order-vessel-route-stop strong { overflow: hidden; color: #1b4563; font-size: 14px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.order-vessel-route-times { display: grid; gap: 3px; }
.order-vessel-route-times small { display: grid; grid-template-columns: 35px minmax(0,1fr); gap: 4px; overflow: hidden; color: #5e778a; font-size: 10px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.order-vessel-route-scroll li.planned .order-vessel-route-times small { grid-template-columns: max-content max-content; overflow: visible; overflow-wrap: normal; white-space: nowrap; }
.order-vessel-route-times small b { color: #496a80; font-weight: 950; }
.order-vessel-route-leg { position: absolute; z-index: 2; top: -3px; left: 50px; max-width: 136px; overflow: hidden; border: 1px solid #c7d7e2; border-radius: 3px; background: #f8fbfd; color: #55758a; padding: 2px 5px; font-size: 9px; font-style: normal; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.order-vessel-fast-map .order-schedule-vessel-coordinate-link { top: 16px; right: 16px; bottom: auto; font-family: inherit; cursor: pointer; }
.order-schedule-vessel-coordinate-link:disabled { cursor: wait; opacity: .68; transform: none; }
.order-vessel-sea-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid rgba(143,177,201,.86); border-radius: 7px; background: #fff; box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(29,67,94,.09); }
.order-vessel-sea-timeline li { position: relative; display: grid; gap: 4px; min-width: 0; border-right: 1px solid rgba(183,205,221,.82); padding: 12px 13px 12px 27px; }
.order-vessel-sea-timeline li:last-child { border-right: 0; }
.order-vessel-sea-timeline li > span { position: absolute; top: 18px; left: 12px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #2e86b8; box-shadow: 0 0 0 1px rgba(47,124,169,.42); }
.order-vessel-sea-timeline li.departed > span { background: #287a9e; }
.order-vessel-sea-timeline li.planned { background: #f8fbfd; }
.order-vessel-sea-timeline li.planned > span { background: #e19942; box-shadow: 0 0 0 1px rgba(185,128,45,.42); }
.order-vessel-sea-timeline li > div { display: grid; gap: 5px; min-width: 0; }
.order-vessel-sea-timeline em { width: fit-content; border-radius: 3px; background: #e4f3fa; color: #176d9c; padding: 2px 5px; font-size: 9px; font-style: normal; font-weight: 950; letter-spacing: .4px; }
.order-vessel-sea-timeline li.departed em { background: #e5f0f5; color: #28627f; }
.order-vessel-sea-timeline li.planned em { background: #fff2dc; color: #9b631d; }
.order-vessel-sea-timeline strong { overflow: hidden; color: #1d425f; font-size: 13px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.order-vessel-sea-times { display: grid; gap: 3px; }
.order-vessel-sea-timeline small { display: flex; gap: 5px; overflow: hidden; color: #637d91; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.order-vessel-sea-timeline small b { flex: 0 0 auto; color: #4a6d85; font-weight: 950; }
.order-vessel-supplier-map { position: relative; min-height: 510px; overflow: hidden; border: 1px solid rgba(107,154,188,.88); border-radius: 8px; background: #edf6fa; box-shadow: inset 0 1px 0 #fff, 0 14px 30px rgba(28,69,98,.14); }
.order-vessel-supplier-map iframe { display: block; width: 100%; min-height: 510px; border: 0; background: #eef5f9; }
.order-vessel-supplier-back { position: absolute; z-index: 2; top: 14px; left: 14px; border: 1px solid #2f82b3; border-radius: 5px; background: rgba(255,255,255,.96); color: #1b6f9f; padding: 8px 11px; font-family: inherit; font-size: 12px; font-weight: 900; box-shadow: 0 4px 10px rgba(22,92,137,.16); cursor: pointer; }
.order-vessel-supplier-loading, .order-vessel-supplier-error { min-height: 510px; display: grid; place-content: center; justify-items: center; gap: 10px; color: #557289; font-size: 13px; font-weight: 850; text-align: center; }
.order-vessel-supplier-loading i { width: 28px; height: 28px; border: 3px solid rgba(40,125,179,.2); border-top-color: #287fb4; border-radius: 50%; animation: order-vessel-fast-map-spin .8s linear infinite; }
.order-vessel-supplier-error strong { color: #1a4666; font-size: 15px; }
.order-vessel-supplier-error button { border: 1px solid #2f82b3; border-radius: 5px; background: #fff; color: #1b6f9f; padding: 8px 11px; font-family: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
@keyframes order-vessel-fast-route-flow { to { stroke-dashoffset: -68; } }
@keyframes order-vessel-fast-map-pulse { 0% { opacity: .9; transform: scale(.45); } 75%,100% { opacity: 0; transform: scale(1.45); } }
@keyframes order-vessel-fast-live-ship { 0%, 100% { transform: translateY(0); box-shadow: 0 0 0 7px rgba(21,126,180,.19), 0 5px 12px rgba(17,73,107,.42); } 50% { transform: translateY(-3px); box-shadow: 0 0 0 10px rgba(21,126,180,.1), 0 8px 15px rgba(17,73,107,.34); } }
@keyframes order-vessel-fast-map-spin { to { transform: rotate(360deg); } }

.order-schedule-vessel-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.order-schedule-vessel-metrics span {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(160, 186, 207, .72);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
  color: #6c8296;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-schedule-vessel-metrics b { color: #193b5c; font-size: 13px; font-weight: 900; }

.vessel-motion-status {
  display: block;
  margin: 0 0 14px;
  border: 1px solid rgba(169, 199, 222, .9);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(240, 248, 253, .98) 0%, rgba(255, 255, 255, .98) 100%);
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 10px 24px rgba(31, 65, 96, .09);
}

.vessel-motion-copy { display: grid; min-width: 0; gap: 6px; margin-top: 10px; border-left: 3px solid #2d7fb8; padding: 2px 0 2px 10px; }
.vessel-motion-copy strong { color: #14334e; font-size: 15px; font-weight: 950; line-height: 1.45; }
.vessel-motion-copy span { color: #496a82; font-size: 12px; font-weight: 850; line-height: 1.55; }

.vessel-motion-visual { position: relative; display: grid; grid-template-columns: minmax(190px, auto) minmax(360px, 1fr) minmax(190px, auto); align-items: center; gap: 22px; min-height: 112px; width: 100%; }
.vessel-motion-port { position: relative; z-index: 4; display: inline-grid; box-sizing: border-box; width: 100%; min-width: 0; min-height: 52px; place-items: center; gap: 4px; border: 1px solid rgba(54, 134, 190, .30); border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(229,243,252,.96) 100%); color: #102d46; padding: 10px 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 10px 22px rgba(31, 91, 136, .12); }
.vessel-motion-port strong { display: block; color: inherit; font-size: 24px; font-weight: 950; line-height: 1.12; white-space: nowrap; }
.vessel-motion-port small { display: grid; justify-items: center; gap: 2px; width: 100%; min-width: 0; color: #5f778d; font-size: 11px; font-weight: 850; line-height: 1.2; white-space: normal; }
.vessel-motion-port small b { color: #71899c; font-size: 9px; font-weight: 950; }
.vessel-motion-port small time { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 5px; color: #4f6f87; font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: 0; }
.vessel-motion-port small time span { white-space: nowrap; }
.vessel-motion-line { position: relative; z-index: 1; height: 10px; overflow: hidden; border-radius: 999px; background: repeating-linear-gradient(90deg, rgba(90, 150, 192, .62) 0 12px, rgba(90, 150, 192, .2) 12px 20px); }
.vessel-motion-line i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.9) 45%, transparent 75%); animation: order-schedule-vessel-route-glint 2.2s linear infinite; }
.vessel-motion-ship { position: absolute; top: 31px; left: 36%; z-index: 3; width: 68px; height: 29px; border-radius: 5px 22px 13px 18px; background: linear-gradient(138deg, transparent 0 11%, #0b5c8b 11.5% 100%), linear-gradient(180deg, #2b8fc7 0%, #0a5d91 58%, #073e65 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(4, 47, 80, .38), 0 9px 16px rgba(20, 83, 125, .2); }
.vessel-motion-ship::before { content: ""; position: absolute; left: 15px; top: -16px; width: 38px; height: 20px; border-radius: 3px 4px 2px 2px; background: linear-gradient(90deg, #eaf7ff 0 28%, #c7e8f6 28% 34%, #eaf7ff 34% 62%, #c7e8f6 62% 68%, #eaf7ff 68% 100%), linear-gradient(180deg, #f9fdff 0%, #cfe8f4 100%); box-shadow: -9px 10px 0 -4px #f06d4f, 3px 10px 0 -4px #f8bb4c, 15px 10px 0 -4px #4aa7ce, 28px 16px 0 -10px #dff1fb; }
.vessel-motion-ship::after { content: ""; position: absolute; left: -8px; right: 8px; bottom: -7px; height: 4px; border-radius: 999px; background: repeating-linear-gradient(90deg, rgba(45, 127, 184, .32) 0 12px, rgba(45, 127, 184, .1) 12px 20px); }
.vessel-motion-anchor { display: none; }
.vessel-motion-label { position: absolute; top: 4px; left: 50%; z-index: 5; display: inline-flex; min-width: 92px; align-items: center; justify-content: center; transform: translateX(-50%); border: 1px solid rgba(52, 134, 190, .28); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(226,244,255,.95)); color: #0b5c8b; padding: 7px 13px; font-size: 12px; font-weight: 950; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 8px 16px rgba(27, 93, 140, .13); }
.vessel-motion-status.moving .vessel-motion-ship { animation: order-schedule-vessel-sail 4.8s ease-in-out infinite; }
.vessel-motion-status.moored .vessel-motion-line, .vessel-motion-status.waiting .vessel-motion-line { opacity: .28; }
.vessel-motion-status.moored .vessel-motion-ship { left: auto; right: 268px; animation: order-schedule-vessel-float 2.4s ease-in-out infinite; }
.vessel-motion-status.waiting .vessel-motion-ship { left: auto; right: 278px; opacity: .72; animation: order-schedule-vessel-float 2.8s ease-in-out infinite; }
.order-schedule-vessel-motion-hero .vessel-motion-status.moored .vessel-motion-ship { right: 176px; }
.order-schedule-vessel-motion-hero .vessel-motion-status.waiting .vessel-motion-ship { right: 186px; }
.vessel-motion-status.waiting .vessel-motion-line { background: repeating-linear-gradient(90deg, rgba(137, 152, 164, .36) 0 10px, rgba(137, 152, 164, .12) 10px 18px); }
.vessel-motion-status.waiting .vessel-motion-line i { animation-duration: 3.4s; opacity: .48; }
.vessel-motion-status.waiting .vessel-motion-label { border-color: rgba(186, 145, 55, .34); background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255, 245, 216, .96)); color: #8a6120; }
.vessel-motion-status.moored .vessel-motion-label { border-color: rgba(54, 154, 131, .32); background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(221, 247, 240, .96)); color: #176f61; }
@keyframes order-schedule-vessel-sail { 0% { left: 21%; transform: translateY(0); } 45% { transform: translateY(-3px); } 100% { left: calc(100% - 285px); transform: translateY(0); } }
@keyframes order-schedule-vessel-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes order-schedule-vessel-route-glint { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.order-vessel-motion-dialog {
  width: min(1040px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #86a9c2;
  border-radius: 7px;
  background: linear-gradient(#ffffff 0%, #f6fbff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .97), 0 24px 64px rgba(8, 31, 49, .36), 0 4px 12px rgba(8, 31, 49, .18);
}

.order-vessel-motion-head {
  min-height: 82px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #c8d9e6;
  background: linear-gradient(180deg, #fbfdff 0%, #e9f4fb 100%);
  padding: 12px 17px;
}

.order-vessel-motion-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #78a9c9;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #ffffff 0 18%, #dff1fb 52%, #a9d3e9 100%);
  color: #2172a2;
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(32, 95, 137, .18);
}

.order-vessel-motion-mark span { font-size: 21px; font-weight: 950; line-height: 1; }
.order-vessel-motion-head small { display: block; color: #66869d; font-size: 10px; font-weight: 950; }
.order-vessel-motion-head h3 { margin: 1px 0 2px; color: #174a72; font-size: 21px; font-weight: 950; line-height: 1.18; }
.order-vessel-motion-head p { margin: 0; overflow: hidden; color: #59758b; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.order-vessel-motion-head p b { color: #286992; font-weight: 950; }
.order-vessel-motion-head p i { color: #97afc2; font-style: normal; padding: 0 2px; }
.order-vessel-motion-head > button { width: 34px; height: 34px; border: 1px solid #a8bdcf; border-radius: 5px; background: linear-gradient(#fff, #e3edf5); color: #315b7b; font-family: inherit; font-size: 24px; line-height: 1; box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(37, 77, 105, .14); cursor: pointer; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.order-vessel-motion-head > button:hover { transform: translateY(-1px); border-color: #739abd; box-shadow: inset 0 1px 0 #fff, 0 3px 7px rgba(37, 77, 105, .17); }

.order-vessel-motion-body { min-height: 0; overflow: auto; padding: 16px 18px 20px; }
.order-vessel-motion-loading,
.order-vessel-motion-empty { min-height: 180px; display: grid; place-content: center; justify-items: center; gap: 9px; border: 1px dashed #b8cad8; border-radius: 6px; background: #fbfdff; color: #5e788c; text-align: center; }
.order-vessel-motion-loading { min-height: 312px; }
.order-vessel-motion-loading i { width: 24px; height: 24px; border: 3px solid #c4dce9; border-top-color: #2d83b5; border-radius: 50%; animation: order-vessel-motion-spin .75s linear infinite; }
.order-vessel-motion-empty strong { color: #315a78; font-size: 14px; font-weight: 950; }
.order-vessel-motion-empty span { max-width: 460px; color: #71899b; font-size: 12px; font-weight: 700; line-height: 1.65; }
@keyframes order-vessel-motion-spin { to { transform: rotate(360deg); } }

.order-vessel-motion-hero { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #bfd5e5; border-left: 4px solid #4392bf; border-radius: 6px; background: linear-gradient(120deg, #f8fcff 0%, #eaf6fc 55%, #fefefe 100%); padding: 13px 16px; }
.order-vessel-motion-kicker { display: block; color: #648aa4; font-size: 10px; font-weight: 950; letter-spacing: 0; }
.order-vessel-motion-hero strong { display: block; margin-top: 2px; color: #194f77; font-size: 19px; font-weight: 950; line-height: 1.2; }
.order-vessel-motion-hero strong em { color: #3875a0; font-size: 12px; font-style: normal; }
.order-vessel-motion-hero p { margin: 5px 0 0; color: #58758a; font-size: 12px; font-weight: 800; }
.order-vessel-motion-hero p i { color: #2f80af; font-style: normal; padding: 0 4px; }
.order-vessel-motion-state { min-width: 116px; display: grid; justify-items: end; gap: 4px; text-align: right; }
.order-vessel-motion-state b { display: inline-flex; min-height: 26px; align-items: center; border: 1px solid #85b2ce; border-radius: 999px; background: linear-gradient(#fff, #e0f2fc); color: #1f6e9b; padding: 0 11px; font-size: 12px; font-weight: 950; box-shadow: inset 0 1px 0 #fff, 0 1px 0 #a7cce0; }
.order-vessel-motion-state.moored b { border-color: #a5bd9b; background: linear-gradient(#fff, #e8f3e1); color: #527d43; }
.order-vessel-motion-state.waiting b { border-color: #d4bf89; background: linear-gradient(#fffdf8, #f8edcb); color: #89641e; }
.order-vessel-motion-state span { color: #6c8395; font-size: 11px; font-weight: 750; white-space: nowrap; }

.order-vessel-motion-live { position: relative; display: grid; grid-template-columns: minmax(78px, max-content) minmax(148px, 1fr) minmax(78px, max-content); align-items: center; gap: 8px; min-height: 32px; margin-top: 10px; }
.order-vessel-motion-live-port { position: relative; z-index: 2; max-width: 142px; overflow: hidden; color: #52738a; font-size: 10px; font-weight: 900; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.order-vessel-motion-live-port.to { text-align: right; }
.order-vessel-motion-live-lane { position: relative; height: 6px; overflow: visible; border-radius: 999px; background: repeating-linear-gradient(90deg, rgba(66, 143, 185, .62) 0 10px, rgba(66, 143, 185, .18) 10px 18px); box-shadow: inset 0 1px 1px rgba(23, 82, 117, .16); }
.order-vessel-motion-live-lane i { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.order-vessel-motion-live-lane i::after { content: ""; position: absolute; top: 0; bottom: 0; width: 42%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .86), transparent); animation: order-vessel-route-glint 2.2s linear infinite; }
.order-vessel-motion-live-lane b { position: absolute; z-index: 2; top: 50%; left: 8%; width: 38px; height: 15px; border-radius: 3px 13px 7px 10px; background: linear-gradient(138deg, transparent 0 10%, #0d638f 11% 100%), linear-gradient(180deg, #3a9bca 0%, #0b618f 58%, #07486f 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(3,48,77,.28), 0 6px 11px rgba(23, 88, 124, .22); transform: translateY(-50%); }
.order-vessel-motion-live-lane b::before { content: ""; position: absolute; left: 9px; top: -9px; width: 20px; height: 11px; border-radius: 2px 3px 1px 1px; background: linear-gradient(90deg, #edf8fe 0 28%, #bfe0ef 29% 37%, #edf8fe 38% 66%, #bfe0ef 67% 75%, #edf8fe 76% 100%); box-shadow: 3px 8px 0 -3px #e8b042; }
.order-vessel-motion-live.moving .order-vessel-motion-live-lane { background-size: 36px 6px; animation: order-vessel-route-current 1.35s linear infinite; }
.order-vessel-motion-live.moving .order-vessel-motion-live-lane b { animation: order-vessel-sail 7.2s cubic-bezier(.45, .05, .55, .95) infinite; }
.order-vessel-motion-live.moored .order-vessel-motion-live-lane { opacity: .42; }
.order-vessel-motion-live.moored .order-vessel-motion-live-lane b { left: calc(100% - 40px); animation: order-vessel-float 2.4s ease-in-out infinite; }
.order-vessel-motion-live.waiting .order-vessel-motion-live-lane { opacity: .34; background: repeating-linear-gradient(90deg, rgba(147, 157, 165, .48) 0 10px, rgba(147, 157, 165, .14) 10px 18px); }
.order-vessel-motion-live.waiting .order-vessel-motion-live-lane b { left: calc(50% - 19px); animation: order-vessel-float 2.8s ease-in-out infinite; opacity: .72; }
@keyframes order-vessel-sail { 0%, 8% { left: 8%; transform: translateY(-50%); } 42% { left: calc(50% - 19px); transform: translateY(calc(-50% - 4px)); } 84%, 100% { left: calc(100% - 46px); transform: translateY(-50%); } }
@keyframes order-vessel-float { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 4px)); } }
@keyframes order-vessel-route-current { from { background-position: 0 0; } to { background-position: 36px 0; } }
@keyframes order-vessel-route-glint { from { transform: translateX(-135%); } to { transform: translateX(290%); } }

.order-vessel-motion-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 10px 0 13px; }
.order-vessel-motion-meta span { min-width: 0; display: grid; gap: 3px; border: 1px solid #d1e0ea; border-radius: 5px; background: #fff; padding: 7px 9px; color: #385d77; font-size: 12px; font-weight: 850; overflow-wrap: anywhere; }
.order-vessel-motion-meta b { color: #7a96aa; font-size: 10px; font-weight: 950; }

.order-vessel-motion-tabs { display: flex; gap: 5px; border-bottom: 1px solid #c8d9e5; padding: 0 2px; }
.order-vessel-motion-tabs button { min-height: 32px; border: 1px solid transparent; border-bottom: 0; border-radius: 5px 5px 0 0; background: transparent; color: #6c879b; padding: 0 13px; font-family: inherit; font-size: 12px; font-weight: 900; cursor: pointer; transition: background .14s ease, color .14s ease, border-color .14s ease; }
.order-vessel-motion-tabs button:hover { color: #236c98; background: #f1f8fc; }
.order-vessel-motion-tabs button.active { border-color: #b8cfdc; background: linear-gradient(#fff, #edf6fb); color: #1d638e; box-shadow: inset 0 2px 0 #5ba5cd; }
.order-vessel-motion-panel { display: none; padding-top: 13px; }
.order-vessel-motion-panel.active { display: block; }
.order-vessel-motion-map { width: 100%; height: min(54vh, 500px); display: block; border: 1px solid #b8d0df; border-radius: 5px; background: #f7fbfe; }
.order-vessel-motion-table-wrap { overflow: auto; border: 1px solid #c8d8e4; border-radius: 5px; background: #fff; }
.order-vessel-motion-table { width: 100%; border-collapse: collapse; color: #345b77; font-size: 12px; }
.order-vessel-motion-table th { border-bottom: 1px solid #b9cedd; background: linear-gradient(#f7fbfe, #e7f1f8); color: #315f82; padding: 9px 10px; text-align: left; font-size: 11px; font-weight: 950; white-space: nowrap; }
.order-vessel-motion-table td { border-top: 1px solid #e0ebf2; padding: 9px 10px; font-weight: 700; vertical-align: top; }
.order-vessel-motion-table tbody tr:nth-child(even) { background: #fbfdff; }

@media (max-width: 700px) {
  .order-vessel-motion-backdrop { padding: 10px; }
  .order-vessel-motion-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .order-vessel-motion-head { grid-template-columns: 36px minmax(0, 1fr) 33px; gap: 9px; padding: 10px 12px; }
  .order-vessel-motion-mark { width: 33px; height: 33px; }
  .order-vessel-motion-head h3 { font-size: 18px; }
  .order-vessel-motion-body { padding: 11px; }
  .order-vessel-motion-hero { align-items: flex-start; flex-direction: column; gap: 10px; }
  .order-vessel-motion-state { justify-items: start; text-align: left; }
  .order-vessel-motion-live { width: min(100%, 520px); grid-template-columns: minmax(64px, max-content) minmax(92px, 1fr) minmax(64px, max-content); }
  .order-vessel-motion-live-port { max-width: 102px; }
  .order-vessel-motion-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-vessel-motion-tabs { overflow-x: auto; }
  .order-vessel-motion-tabs button { flex: 0 0 auto; }
  .order-vessel-motion-map { height: 46vh; }
}

@media (prefers-reduced-motion: reduce) {
  .order-vessel-motion-live-lane,
  .order-vessel-motion-live-lane i::after,
  .order-vessel-motion-live-lane b {
    animation: none !important;
  }

  .vessel-motion-line,
  .vessel-motion-line i,
  .vessel-motion-ship {
    animation: none !important;
  }
}

@media (max-width: 860px) {
  .order-schedule-vessel-dialog { width: min(100vw, 94vw); }
  .order-schedule-vessel-hero { grid-template-columns: 1fr; }
  .order-schedule-vessel-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-schedule-vessel-tabs button { flex: 1 1 150px; }
}

@media (max-width: 700px) {
  .order-vessel-motion-backdrop { padding: 0; }
  .order-schedule-vessel-dialog { width: 100vw; }
  .order-schedule-vessel-head { min-height: 68px; padding: 11px 13px; }
  .order-schedule-vessel-body { padding: 11px; }
  .order-schedule-vessel-title strong { font-size: 20px; }
  .order-schedule-vessel-motion-hero .vessel-motion-visual { grid-template-columns: minmax(92px, 1fr) minmax(76px, .65fr) minmax(104px, 1.08fr); gap: 6px; }
  .order-schedule-vessel-motion-hero .vessel-motion-port { min-width: 0; padding: 7px; }
  .order-schedule-vessel-motion-hero .vessel-motion-port strong { max-width: 94px; font-size: 15px; }
  .order-schedule-vessel-motion-hero .vessel-motion-port small { max-width: none; }
  .order-schedule-vessel-motion-hero .vessel-motion-ship { width: 48px; height: 21px; }
  .order-schedule-vessel-motion-hero .vessel-motion-ship::before { left: 12px; top: -13px; width: 30px; height: 16px; }
  .order-schedule-vessel-motion-hero .vessel-motion-status.moored .vessel-motion-ship { right: 118px; }
  .order-schedule-vessel-motion-hero .vessel-motion-status.waiting .vessel-motion-ship { right: 124px; }
  .order-schedule-vessel-coordinate-map { min-height: 360px; }
  .order-schedule-vessel-coordinate-info { right: 12px; bottom: 58px; left: 12px; }
  .order-schedule-vessel-coordinate-link { right: 12px; bottom: 12px; }
  .order-schedule-vessel-metrics { grid-template-columns: 1fr; }
  .order-vessel-fast-map-canvas { min-height: 380px; }
  .order-vessel-fast-map .order-schedule-vessel-coordinate-link { top: auto; right: 12px; bottom: 12px; }
  .order-vessel-fast-map-head { padding-bottom: 56px; }
  .order-vessel-sea-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-vessel-sea-timeline li:nth-child(2n) { border-right: 0; }
  .order-vessel-supplier-map, .order-vessel-supplier-map iframe, .order-vessel-supplier-loading, .order-vessel-supplier-error { min-height: 430px; }
}

.route-tool-overflow-menu {
  position: absolute;
  z-index: 9;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  min-width: 184px;
  max-width: min(300px, calc(100vw - 62px));
  display: grid;
  gap: 6px;
  overflow: hidden;
  border: 1px solid #a7c6d9;
  border-radius: 6px;
  background: #fff;
  padding: 8px;
  box-shadow: 0 15px 28px rgba(27, 69, 98, .2), 0 3px 8px rgba(27, 69, 98, .1);
}

.route-tool-overflow-menu .route-tool-pill {
  width: 100%;
  justify-content: space-between;
  border-radius: 4px;
}

.employee-detail-panel .legacy-order-board {
  border-color: #c6d6e2;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 7px 18px rgba(31, 66, 95, .06);
}

.employee-detail-panel .old-detail-table {
  box-shadow: 0 0 0 1px #d8e3eb;
}

.employee-detail-panel[data-detail-panel="overview"] .old-section,
.employee-notes-detail-table .old-section {
  min-height: 38px;
  border-left: 4px solid #2b719f;
  border-radius: 3px;
  background: linear-gradient(90deg, #eaf3f9 0%, #f6f9fb 58%, #fbfcfd 100%);
  color: #1b4f78;
  box-shadow: inset 0 1px 0 #fff;
}

.employee-detail-panel[data-detail-panel="overview"] .old-section span,
.employee-detail-panel[data-detail-panel="overview"] .old-section strong,
.employee-notes-detail-table .old-section span,
.employee-notes-detail-table .old-section strong {
  color: #1b4f78;
}

.employee-detail-panel[data-detail-panel="overview"] .old-detail-table td,
.employee-notes-detail-table .old-detail-table td {
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.employee-notes-detail-table .old-remark-box {
  min-height: 126px;
}

.employee-notes-detail-table .old-contact-box {
  min-height: 118px;
}

.employee-notes-workbench {
  display: grid;
  gap: 14px;
}

.employee-note-record,
.employee-contact-desk {
  min-width: 0;
  border: 1px solid #d3e0e9;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(31, 66, 94, .055);
}

.employee-note-record { overflow: hidden; }
.employee-detail-workspace > .employee-business-remark { margin-top: 18px; }

.employee-notes-workbench-heading {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #dce7ee;
  background: linear-gradient(90deg, #edf6fb 0%, #f8fbfd 62%, #ffffff 100%);
  padding: 9px 15px;
}

.employee-notes-workbench-heading > div { min-width: 0; }

.employee-notes-workbench-heading span {
  display: block;
  color: #60809a;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
}

.employee-notes-workbench-heading h3 {
  margin: 2px 0 0;
  color: #1d5177;
  font-size: 15px;
  font-weight: 950;
}

.employee-notes-workbench-heading em,
.employee-contact-source {
  flex: 0 0 auto;
  color: #5e7d91;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.employee-notes-workbench-heading em {
  border: 1px solid #c6dae8;
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  padding: 4px 9px;
  box-shadow: inset 0 1px 0 #fff;
}

.employee-note-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px 14px 14px;
}

.employee-note-editor .employee-note-textarea {
  width: 100%;
  min-height: 144px;
  height: 144px;
  margin: 0;
  border: 1px solid #c8d8e4;
  border-left: 4px solid #3d7ca4;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  color: #203a50;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.66;
  letter-spacing: 0;
  padding: 13px 15px;
  box-shadow: inset 0 1px 2px rgba(27, 68, 101, .055);
}

.employee-notes-workbench .legacy-read-surface {
  min-width: 0;
  box-sizing: border-box;
  overflow: auto;
  border: 1px solid #d4e1e9;
  border-left: 4px solid #4d8cb5;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  color: #294256;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.65;
  padding: 12px 14px;
  white-space: pre-wrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94);
}

.employee-note-editor .legacy-read-surface { min-height: 144px; }

.employee-notes-workbench .legacy-read-surface-contact {
  min-height: 76px;
  max-height: none;
  overflow: visible;
  border-left-color: #78a98e;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  color: #2b4658;
  font-size: 12px;
  line-height: 1.58;
  padding: 10px 12px;
}

.employee-notes-workbench .legacy-read-surface.is-empty {
  color: #8d9ea9;
  font-weight: 700;
}

.employee-notes-workbench .legacy-edit-textarea { display: none; }

.employee-notes-workbench .legacy-inline-edit.is-editing .legacy-read-surface { display: none; }

.employee-notes-workbench .legacy-inline-edit.is-editing .legacy-edit-textarea {
  display: block;
  animation: employee-inline-editor-reveal .18s ease both;
}

.employee-notes-workbench .legacy-inline-edit.is-editing {
  border-radius: 5px;
  background: rgba(235, 246, 252, .45);
}

.employee-notes-workbench .legacy-inline-edit.is-editing .legacy-edit-textarea {
  resize: vertical;
}

@keyframes employee-inline-editor-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes employee-inline-editor-attention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(206, 143, 43, 0); }
  45% { box-shadow: 0 0 0 4px rgba(206, 143, 43, .18); }
}

.employee-notes-workbench .legacy-inline-edit.needs-attention {
  animation: employee-inline-editor-attention .6s ease both;
}

.employee-notes-workbench .legacy-inline-edit.is-saved .legacy-read-surface {
  border-color: #a9d2ba;
  border-left-color: #4d9b70;
  background: linear-gradient(180deg, #ffffff 0%, #f0faf4 100%);
  transition: border-color .22s ease, background .22s ease;
}

.employee-contact-desk { overflow: hidden; }

.employee-contact-desk-heading {
  border-bottom-color: #d4e5df;
  background: linear-gradient(90deg, #eff8f3 0%, #fbfdfc 62%, #ffffff 100%);
}

.employee-contact-desk-heading h3 { color: #25654b; }

.employee-contact-list { display: grid; }

.employee-contact-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(205px, 245px) minmax(0, 1fr);
  border-bottom: 1px solid #dce7ec;
  background: #fff;
}

.employee-contact-strip:last-of-type { border-bottom: 0; }

.employee-contact-summary {
  min-height: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  column-gap: 9px;
  width: 100%;
  border-top: 0;
  border-bottom: 0;
  border-left: 4px solid #5d9a7b;
  border-right: 1px solid #dce8e1;
  appearance: none;
  background: linear-gradient(90deg, #f4faf6 0%, #fbfdfc 72%, #fff 100%);
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  padding: 7px 13px 7px 10px;
}

.employee-contact-summary:hover {
  background: linear-gradient(90deg, #eef8f2 0%, #f9fdfb 72%, #fff 100%);
}

.employee-contact-strip.is-collapsed {
  display: block;
}

.employee-contact-strip.is-collapsed .employee-contact-summary {
  min-height: 54px;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  border-right: 0;
}

.employee-contact-strip.is-collapsed .employee-contact-editor { display: none; }

.employee-contact-sequence {
  width: 27px;
  height: 27px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #b8d6c4;
  border-radius: 50%;
  background: #fff;
  color: #367258;
  font-size: 10px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 #fff;
}

.employee-contact-identity {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.employee-contact-identity strong,
.employee-contact-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-contact-identity strong {
  color: #245a45;
  font-size: 13px;
  font-weight: 950;
}

.employee-contact-identity small {
  color: #78918a;
  font-size: 10px;
  font-weight: 700;
}

.employee-contact-identity em {
  overflow: hidden;
  display: block;
  color: #7b958a;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-contact-disclosure {
  width: 7px;
  height: 7px;
  justify-self: center;
  border-right: 1.5px solid #4e8a69;
  border-bottom: 1.5px solid #4e8a69;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .16s ease;
}

.employee-contact-summary[aria-expanded="true"] .employee-contact-disclosure {
  transform: rotate(225deg) translate(-2px, -1px);
}

.employee-contact-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  padding: 10px 12px;
}

.employee-contact-editor .employee-contact-textarea {
  width: 100%;
  min-height: 104px;
  margin: 0;
  border: 1px solid #cbdce5;
  border-left: 3px solid #86b99b;
  border-radius: 4px;
  background: #fbfdfc;
  color: #294356;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.6;
  padding: 11px 13px;
  box-shadow: inset 0 1px 2px rgba(29, 79, 58, .045);
}

.employee-notes-workbench .legacy-edit-actions {
  align-items: center;
  align-self: start;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 156px;
  padding: 0;
}

.employee-notes-workbench .legacy-edit-icon {
  min-width: 56px;
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px;
}

.employee-notes-workbench .legacy-edit-icon.is-saving::before {
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border: 2px solid rgba(18, 96, 79, .28);
  border-top-color: #12604f;
  border-radius: 50%;
  animation: employee-inline-save-spin .72s linear infinite;
  content: "";
}

@keyframes employee-inline-save-spin {
  to { transform: rotate(360deg); }
}

.employee-notes-workbench .legacy-edit-state {
  display: none;
  min-height: 22px;
  align-items: center;
  border: 1px solid #d1dde6;
  border-radius: 999px;
  background: #f7fafc;
  color: #6b8293;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.employee-notes-workbench .legacy-inline-edit.is-editing .legacy-edit-state.editing,
.employee-notes-workbench .legacy-inline-edit.is-editing .legacy-edit-state.attention,
.employee-notes-workbench .legacy-inline-edit.is-saved .legacy-edit-state.saved {
  display: inline-flex;
}

.employee-notes-workbench .legacy-edit-state.editing {
  border-color: #bad5e7;
  background: #eff8fd;
  color: #2e779f;
}

.employee-notes-workbench .legacy-edit-state.attention {
  border-color: #e7cf98;
  background: #fff9eb;
  color: #8a651e;
}

.employee-notes-workbench .legacy-edit-state.saved {
  border-color: #b2dbc2;
  background: #eefaf3;
  color: #2f7854;
}

.employee-contact-empty {
  color: #778d9a;
  padding: 22px 16px;
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 760px) {
  .employee-notes-workbench-heading { padding: 9px 11px; }
  .employee-note-editor,
  .employee-contact-editor {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  .employee-note-editor { grid-template-columns: 1fr; }
  .employee-notes-workbench .legacy-edit-actions { max-width: none; justify-content: flex-start; }
  .employee-contact-strip { grid-template-columns: 1fr; }
  .employee-contact-summary {
    min-height: 48px;
    grid-column: 1;
    grid-template-columns: 28px minmax(0, 1fr) 29px;
    border-right: 0;
    border-bottom: 1px solid #dce8e1;
    padding-right: 10px;
  }
  .employee-contact-editor { grid-column: 1; }
  .employee-note-editor .employee-note-textarea { min-height: 174px; }
  .employee-note-editor .legacy-read-surface { min-height: 174px; }
  .legacy-inline-edit { gap: 6px; }
  .legacy-edit-actions { gap: 5px; }
}

.employee-detail-panel .generated-documents {
  margin-bottom: 14px;
  border: 1px solid #c5d7e4;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(31, 66, 94, .06);
}

.employee-detail-panel .employee-old-flow {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.employee-detail-panel .order-flow-toolbar,
.employee-detail-panel .employee-old-flow .od-container3 {
  width: 100%;
  box-sizing: border-box;
}

.employee-detail-panel .employee-old-flow .timeline-text-right {
  width: calc(100% - 150px);
}

.employee-detail-empty-panel {
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px dashed #bdccd8;
  border-radius: 5px;
  background: #fff;
  color: #7a8c9b;
  font-size: 13px;
  font-weight: 800;
}

.employee-billing-accordion {
  display: grid;
  gap: 10px;
}

/* One entry card per financial stream. The underlying fee actions remain in the selected detail panel. */
.employee-billing-routes {
  display: grid;
  gap: 13px;
}

.employee-billing-profit-spotlight {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr);
  align-items: center;
  gap: 18px;
  border: 1px solid #b9d6df;
  border-left: 4px solid #2d8195;
  border-radius: 7px;
  background: linear-gradient(105deg, #fbfeff 0%, #eef9fa 52%, #f9fcfd 100%);
  padding: 10px 17px 10px 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 6px 14px rgba(35, 103, 122, .06);
}

.employee-billing-profit-spotlight > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.employee-billing-profit-spotlight > div > span {
  color: #5e8795;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
}

.employee-billing-profit-spotlight > div > strong {
  color: #245b71;
  font-size: 14px;
  font-weight: 950;
}

.employee-billing-profit-spotlight > b {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  color: #0e687d;
  font-size: 29px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 1px 0 #fff;
  white-space: nowrap;
}

.employee-billing-profit-spotlight .profit-amount-with-currency,
.employee-billing-profit-spotlight .profit-amount {
  display: inline-flex;
  align-items: baseline;
}

.employee-billing-profit-spotlight .profit-amount-with-currency { gap: 6px; }
.employee-billing-profit-spotlight .profit-amount-with-currency em {
  color: #5c8796;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.employee-billing-profit-spotlight .profit-amount-integer { color: #0d6478; }
.employee-billing-profit-spotlight .profit-amount-decimal {
  margin-left: 1px;
  color: #1f7386;
  font-size: 14px;
  font-weight: 900;
}

.employee-billing-profit-spotlight > small {
  justify-self: end;
  color: #688896;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.employee-billing-profit-spotlight.negative {
  border-color: #e9caca;
  border-left-color: #bc5757;
  background: linear-gradient(105deg, #fffdfd 0%, #fff2f2 52%, #fffafa 100%);
}

.employee-billing-profit-spotlight.negative > div > span,
.employee-billing-profit-spotlight.negative > div > strong,
.employee-billing-profit-spotlight.negative > b,
.employee-billing-profit-spotlight.negative .profit-amount-integer,
.employee-billing-profit-spotlight.negative .profit-amount-decimal { color: #ab4c4c; }
.employee-billing-profit-spotlight.negative .profit-amount-with-currency em,
.employee-billing-profit-spotlight.negative > small { color: #a36f6f; }

.employee-billing-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.employee-billing-route-card {
  --billing-route-accent: #347fab;
  --billing-route-border: #bdd3e2;
  --billing-route-tint: #edf7fb;
  min-width: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--billing-route-border);
  border-radius: 7px;
  background: linear-gradient(145deg, #ffffff 0%, var(--billing-route-tint) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 7px 15px rgba(31, 69, 96, .065);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.employee-billing-route-card.employee-billing-supplier {
  --billing-route-accent: #43806d;
  --billing-route-border: #c5dfd4;
  --billing-route-tint: #ebf7f0;
}

.employee-billing-route-card.employee-billing-agent {
  --billing-route-accent: #a87825;
  --billing-route-border: #ead7af;
  --billing-route-tint: #fff6e4;
}

.employee-billing-route-card:hover,
.employee-billing-route-card.is-active {
  border-color: var(--billing-route-accent);
  box-shadow: inset 4px 0 0 var(--billing-route-accent), inset 0 1px 0 #fff, 0 10px 20px rgba(31, 69, 96, .11);
}

.employee-billing-route-card:hover { transform: translateY(-1px); }
.employee-billing-route-card.is-active { transform: translateY(-2px); }

/* Selected billing stream mirrors the finance-dashboard tab treatment: one clear focus, two still-available alternatives. */
.employee-billing-route-grid[data-active-billing-route] .employee-billing-route-card {
  filter: saturate(.64);
  opacity: .54;
  transform: scale(.982);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 8px rgba(31, 69, 96, .045);
}

.employee-billing-route-grid[data-active-billing-route] .employee-billing-route-card.is-active {
  z-index: 1;
  filter: none;
  opacity: 1;
  transform: translateY(-3px) scale(1.012);
  border-color: var(--billing-route-accent);
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--billing-route-accent) 15%, transparent), transparent 36%),
    linear-gradient(145deg, #ffffff 0%, var(--billing-route-tint) 100%);
  box-shadow:
    inset 4px 0 0 var(--billing-route-accent),
    inset 0 3px 0 color-mix(in srgb, var(--billing-route-accent) 84%, #ffffff),
    inset 0 1px 0 #fff,
    0 14px 25px color-mix(in srgb, var(--billing-route-accent) 21%, transparent);
}

.employee-billing-route-grid[data-active-billing-route] .employee-billing-route-card.is-active::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--billing-route-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--billing-route-accent) 22%, transparent), 0 2px 5px color-mix(in srgb, var(--billing-route-accent) 35%, transparent);
  pointer-events: none;
}

.employee-billing-route-grid[data-active-billing-route] .employee-billing-route-card.has-lock.is-active::after {
  display: none;
}

.employee-billing-route-grid[data-active-billing-route] .employee-billing-route-card.is-muted:hover,
.employee-billing-route-grid[data-active-billing-route] .employee-billing-route-card.is-muted:focus-within {
  filter: saturate(.82);
  opacity: .82;
  transform: translateY(-1px) scale(.992);
  box-shadow: inset 0 1px 0 #fff, 0 8px 16px rgba(31, 69, 96, .09);
}

.employee-billing-route-open {
  width: 100%;
  min-height: 107px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas:
    "icon copy"
    "icon amount";
  align-items: center;
  gap: 7px 10px;
  border: 0;
  background: transparent;
  color: #244c69;
  padding: 13px 14px 10px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.employee-billing-route-card.has-lock .employee-billing-route-open { padding-right: 108px; }
.employee-billing-route-card.has-receipt-status .employee-billing-route-open { padding-right: 94px; }

.employee-billing-route-receipt-status {
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 13px;
  min-width: 68px;
  min-height: 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bedfcf;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8fffb 0%, #ddf4e7 100%);
  color: #216a49;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .04em;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 9px rgba(31, 106, 73, .13);
  pointer-events: none;
  white-space: nowrap;
}

.employee-billing-route-receipt-status.unpaid {
  border-color: #ebcf92;
  background: linear-gradient(180deg, #fffdf7 0%, #fff0cb 100%);
  color: #925c14;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 3px 9px rgba(146, 92, 20, .12);
}

.employee-billing-route-alert {
  position: absolute;
  z-index: 2;
  top: 50px;
  right: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #e38b8b;
  border-radius: 5px;
  background: linear-gradient(180deg, #fffafa 0%, #fff0f0 100%);
  color: #b42318;
  padding: 5px 7px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(180, 35, 24, .1);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  pointer-events: none;
  white-space: nowrap;
}

.employee-billing-route-card.has-lock .employee-billing-route-alert { right: 121px; }
.employee-billing-route-alert > b { font-size: 13px; line-height: 1; }
.employee-billing-route-alert strong { font-size: 12px; font-variant-numeric: tabular-nums; }

.employee-billing-route-open:focus-visible,
.employee-billing-route-action:focus-visible,
.employee-billing-detail-close:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--billing-route-accent, #347fab) 32%, transparent);
  outline-offset: -3px;
}

.employee-billing-route-open .employee-billing-icon { grid-area: icon; }

.employee-billing-route-copy {
  min-width: 0;
  display: grid;
  grid-area: copy;
  gap: 3px;
}

.employee-billing-route-copy > small,
.employee-billing-detail-copy > small {
  color: var(--billing-route-accent);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .04em;
}

.employee-billing-route-copy > strong,
.employee-billing-detail-copy > strong {
  overflow: hidden;
  color: #204b69;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-billing-route-copy > em,
.employee-billing-detail-copy > em {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--billing-route-accent) 33%, #ffffff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--billing-route-tint) 74%, #ffffff);
  color: var(--billing-route-accent);
  padding: 2px 6px;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The route's business state is independent of the three account-route colors. */
.employee-billing-route-copy > .employee-billing-route-state.action { border-color: #cad8e3; background: #f2f6f9; color: #587488; }
.employee-billing-route-copy > .employee-billing-route-state.ready { border-color: #a8cce7; background: #edf7ff; color: #276b9f; }
.employee-billing-route-copy > .employee-billing-route-state.processing { border-color: #c5b8e3; background: #f5f1ff; color: #6753a1; }
.employee-billing-route-copy > .employee-billing-route-state.receivable { border-color: #e6bd78; background: #fff6e6; color: #986018; }
.employee-billing-route-copy > .employee-billing-route-state.paid { border-color: #a8d3be; background: #eefaf3; color: #317351; }
.employee-billing-route-copy > .employee-billing-route-state.revision { border-color: #e5a17e; background: #fff1e9; color: #a0491b; }

.employee-billing-route-copy > i {
  color: #476d83;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.employee-billing-route-amount {
  min-width: 0;
  display: flex;
  grid-area: amount;
  flex-wrap: wrap;
  gap: 5px;
}

.employee-billing-route-amount > b,
.employee-billing-detail-heading-side > span > b {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--billing-route-accent) 24%, #d2e0e9);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #42647c;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.employee-billing-route-amount > .employee-billing-summary-empty,
.employee-billing-detail-heading-side > span > .employee-billing-summary-empty {
  border: 0;
  background: transparent;
  color: #899ba8;
  padding-left: 0;
}

.employee-billing-route-count {
  display: grid;
  grid-area: count;
  justify-items: end;
  gap: 1px;
  color: var(--billing-route-accent);
}

.employee-billing-route-count > b {
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
}

.employee-billing-route-count > small {
  color: #748b9c;
  font-size: 9px;
  font-weight: 850;
}

.employee-billing-route-action {
  width: calc(100% - 22px);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 11px 11px;
  border: 1px solid color-mix(in srgb, var(--billing-route-accent) 68%, #ffffff);
  border-bottom-color: color-mix(in srgb, var(--billing-route-accent) 90%, #163a54);
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--billing-route-tint) 20%, #ffffff) 0%, color-mix(in srgb, var(--billing-route-accent) 78%, #ffffff) 100%);
  color: #ffffff;
  padding: 0 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 2px 0 color-mix(in srgb, var(--billing-route-accent) 78%, #173c55), 0 6px 11px color-mix(in srgb, var(--billing-route-accent) 22%, transparent);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.employee-billing-route-action:hover {
  filter: brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 3px 0 color-mix(in srgb, var(--billing-route-accent) 78%, #173c55), 0 9px 15px color-mix(in srgb, var(--billing-route-accent) 27%, transparent);
  transform: translateY(-1px);
}

.employee-billing-route-action:active { box-shadow: inset 0 2px 5px rgba(23, 54, 78, .22); transform: translateY(1px); }
.employee-billing-route-action > i { font-size: 18px; font-style: normal; font-weight: 700; line-height: 1; }
.employee-billing-route-action > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.employee-billing-route-lock {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 13px;
  min-width: 92px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #aac3d3;
  border-bottom-color: #7d9eb4;
  border-radius: 999px;
  background: linear-gradient(#ffffff 0%, #edf6fb 100%);
  color: #33627f;
  padding: 0 9px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b1cad9, 0 5px 10px rgba(32, 76, 104, .1);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.employee-billing-route-lock:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #9dbbcc, 0 8px 13px rgba(32, 76, 104, .14);
}

.employee-billing-route-lock.locked {
  border-color: #d4ab62;
  border-bottom-color: #a97924;
  background: linear-gradient(#fffdf6 0%, #f8e4b7 100%);
  color: #80561a;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c3974a, 0 5px 10px rgba(123, 81, 18, .11);
}

.employee-billing-route-lock .employee-billing-lock-symbol {
  width: 23px;
  height: 16px;
  flex: 0 0 23px;
  border-width: 2px;
  border-color: currentColor;
  background: linear-gradient(#fbfdff, #dcebf4);
}

.employee-billing-route-lock .employee-billing-lock-symbol::before {
  top: -9px;
  left: 3px;
  width: 9px;
  height: 9px;
  border-width: 2px;
  border-color: currentColor;
}

.employee-billing-route-lock.locked .employee-billing-lock-symbol { background: linear-gradient(#fffaf0, #eeca83); }

.employee-billing-lock-symbol.unlocked::before {
  transform: translateX(7px) rotate(23deg);
  transform-origin: 0 100%;
}

.employee-billing-lock-symbol > i {
  position: absolute;
  left: 6px;
  bottom: 3px;
  width: 3px;
  height: 5px;
  border-radius: 3px 3px 1px 1px;
  background: currentColor;
  opacity: .58;
}

.employee-billing-lock-symbol.unlocked > i { opacity: .32; }

.employee-billing-route-readonly {
  min-height: 35px;
  display: grid;
  place-items: center;
  border-top: 1px solid color-mix(in srgb, var(--billing-route-border) 78%, #ffffff);
  background: rgba(255,255,255,.56);
  color: #8496a4;
  font-size: 11px;
  font-weight: 850;
}

.employee-billing-detail-workspace {
  min-width: 0;
}

.employee-billing-detail-panel {
  --billing-route-accent: #347fab;
  --billing-route-border: #bdd3e2;
  --billing-route-tint: #edf7fb;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--billing-route-border);
  border-radius: 7px;
  background: #fff;
  box-shadow: inset 4px 0 0 var(--billing-route-accent), 0 9px 18px rgba(31, 69, 96, .075);
  animation: employee-billing-detail-in .18s ease-out both;
}

.employee-billing-detail-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0 14px 13px;
  background: #fff;
}

.employee-billing-detail-panel.employee-billing-supplier {
  --billing-route-accent: #43806d;
  --billing-route-border: #c5dfd4;
  --billing-route-tint: #ebf7f0;
}

.employee-billing-detail-panel.employee-billing-agent {
  --billing-route-accent: #a87825;
  --billing-route-border: #ead7af;
  --billing-route-tint: #fff6e4;
}

@keyframes employee-billing-detail-in {
  from { opacity: .35; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.employee-billing-detail-heading {
  min-height: 61px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--billing-route-border);
  background: linear-gradient(90deg, #ffffff 0%, var(--billing-route-tint) 100%);
  padding: 9px 13px 9px 17px;
}

.employee-billing-detail-heading > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.employee-billing-detail-heading .employee-billing-icon {
  flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--billing-route-accent) 34%, #d2e0e9);
  background: color-mix(in srgb, var(--billing-route-tint) 73%, #ffffff);
  color: var(--billing-route-accent);
}

.employee-billing-detail-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.employee-billing-detail-heading-side {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.employee-billing-detail-heading-side > span {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.employee-billing-detail-heading-side > b {
  min-width: 58px;
  border: 1px solid color-mix(in srgb, var(--billing-route-accent) 26%, #d2e0e9);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--billing-route-accent);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 950;
  text-align: center;
  white-space: nowrap;
}

.employee-billing-detail-heading-side > b small { font-size: 9px; }

.employee-billing-detail-close {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--billing-route-accent) 30%, #d2e0e9);
  border-radius: 50%;
  background: #fff;
  color: var(--billing-route-accent);
  padding: 0;
  font-family: inherit;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.employee-billing-detail-close:hover {
  background: var(--billing-route-accent);
  color: #fff;
  transform: rotate(90deg);
}

.employee-billing-lock-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.employee-billing-lock-control {
  min-width: 146px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #b9cedd;
  border-bottom-color: #86a9c0;
  border-radius: 6px;
  background: linear-gradient(#ffffff 0%, #eef6fb 100%);
  color: #2b5977;
  padding: 6px 12px;
  font-family: inherit;
  text-align: left;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b4cddd, 0 6px 12px rgba(28, 72, 102, .08);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}

.employee-billing-lock-control:hover {
  transform: translateY(-1px);
  border-color: #6d9cbb;
  filter: brightness(1.015);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #9ebed1, 0 9px 15px rgba(28, 72, 102, .13);
}

.employee-billing-lock-control > span:last-child { display: grid; gap: 2px; }
.employee-billing-lock-control small { color: #7590a2; font-size: 10px; font-weight: 850; line-height: 1; }
.employee-billing-lock-control strong { color: #285b7e; font-size: 12px; font-weight: 950; line-height: 1.2; }

.employee-billing-lock-symbol {
  width: 25px;
  height: 23px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border: 2px solid #5b89a8;
  border-radius: 4px;
  background: linear-gradient(#f9fcff, #dcebf4);
}

.employee-billing-lock-symbol::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 5px;
  width: 11px;
  height: 10px;
  border: 2px solid #5b89a8;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.employee-billing-lock-control.locked { border-color: #d0a861; border-bottom-color: #a87722; background: linear-gradient(#fffdf7, #f9e5b9); }
.employee-billing-lock-control.locked strong { color: #795115; }
.employee-billing-lock-control.locked .employee-billing-lock-symbol { border-color: #a97924; background: linear-gradient(#fff9e7, #f0cb7a); }
.employee-billing-lock-control.locked .employee-billing-lock-symbol::before { border-color: #a97924; }

.employee-billing-group {
  border: 1px solid #c2d2df;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(29, 62, 89, .06);
  overflow: hidden;
}

.employee-billing-group > summary {
  min-height: 64px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 34px minmax(160px, 1fr) auto auto 20px;
  align-items: center;
  gap: 11px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fa 100%);
  color: #244861;
  padding: 0 17px;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}

.employee-billing-group > summary:hover {
  background: #f7fbfd;
  box-shadow: inset 4px 0 0 #4f84ab;
}

.employee-billing-group[open] > summary {
  border-bottom: 1px solid #d0dde7;
  background: #eef5fa;
  box-shadow: inset 4px 0 0 #2c6f9e;
}

.employee-billing-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #bdd0df;
  border-radius: 50%;
  background: #eaf2f8;
  color: #2b668f;
}

.employee-billing-icon::before {
  content: "¥";
  font-size: 13px;
  font-weight: 900;
}

.employee-billing-supplier .employee-billing-icon {
  border-color: #c9d6c7;
  background: #edf5ec;
  color: #4d7450;
}

.employee-billing-agent .employee-billing-icon {
  border-color: #decda9;
  background: #faf4e8;
  color: #896832;
}

.employee-billing-group > summary > strong {
  font-size: 14px;
  font-weight: 900;
}

.employee-billing-group > summary > b {
  min-width: 30px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #bfd0de;
  border-radius: 999px;
  background: #fff;
  color: #2c5f84;
  padding: 0 7px;
  font-size: 11px;
  line-height: 1;
}

.employee-billing-group > summary > em {
  min-width: 92px;
  color: #718395;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.employee-billing-group > summary > i {
  width: 9px;
  height: 9px;
  justify-self: end;
  border-right: 2px solid #5c7488;
  border-bottom: 2px solid #5c7488;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .16s ease;
}

.employee-billing-group[open] > summary > i {
  transform: rotate(225deg) translate(-1px, -1px);
}

.employee-billing-content {
  padding: 0;
}

.employee-billing-content .employee-detail-fee-section {
  border-bottom: 0;
  padding: 15px 17px 18px;
}

.employee-billing-content .section-title-row {
  min-height: 34px;
  justify-content: flex-end;
  border-bottom: 1px solid #e0e8ee;
  padding-bottom: 10px;
}

.employee-billing-content .section-title-row h4 {
  margin-right: auto;
  color: #607589;
  font-size: 11px;
  text-transform: uppercase;
}

.employee-billing-content .muted-text {
  min-height: 70px;
  display: grid;
  place-items: center;
  border: 1px dashed #d0dce5;
  border-radius: 5px;
  background: #fafcfd;
}

/* Billing presentation only: legacy settlement rules and actions stay unchanged. */
.employee-billing-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(292px, .47fr);
  gap: 0;
  overflow: hidden;
  margin: 0 0 14px;
  border: 1px solid #bdcfdd;
  border-radius: 7px;
  background: linear-gradient(135deg, #fbfdff 0%, #eef5fa 100%);
  box-shadow: 0 10px 22px rgba(35, 72, 103, .08), inset 0 1px 0 #fff;
}

.employee-billing-workbench-main {
  min-width: 0;
  padding: 16px 18px 15px;
}

.employee-billing-workbench-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  margin-bottom: 13px;
}

.employee-billing-workbench-title > span {
  color: #5f8198;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
}

.employee-billing-workbench-title > strong {
  color: #1e4c6f;
  font-size: 15px;
  font-weight: 950;
}

.employee-billing-workbench-title > small {
  min-width: 0;
  overflow: hidden;
  color: #7890a2;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-billing-overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.employee-billing-metric {
  min-width: 0;
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid #d5e1e9;
  border-radius: 5px;
  background: rgba(255, 255, 255, .86);
  padding: 9px 10px;
  box-shadow: inset 0 1px 0 #fff;
}

.employee-billing-metric > span {
  color: #7890a1;
  font-size: 10px;
  font-weight: 850;
}

.employee-billing-metric > strong {
  overflow: hidden;
  color: #254f70;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-billing-metric > small {
  overflow: hidden;
  color: #8a9cab;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-billing-metric-factory { border-top: 3px solid #4489bd; }
.employee-billing-metric-supplier { border-top: 3px solid #65936c; }
.employee-billing-metric-agent { border-top: 3px solid #b68b3f; }
.employee-billing-profit {
  position: relative;
  border-color: #b7d3df;
  border-top: 3px solid #2e779b;
  background: linear-gradient(135deg, #f8fcfd 0%, #e7f4f5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 3px 10px rgba(38, 112, 143, .10);
}

.employee-billing-profit::after {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #59a391;
  box-shadow: 0 0 0 3px rgba(89, 163, 145, .12);
  content: "";
}

.employee-billing-profit > span {
  color: #2a637f;
  font-weight: 950;
}

.employee-billing-profit > strong {
  color: #12637a;
  font-size: 16px;
  letter-spacing: .015em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .88);
}

.employee-billing-profit .profit-amount-with-currency,
.employee-billing-profit .profit-amount {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.employee-billing-profit .profit-amount-with-currency {
  gap: 4px;
}

.employee-billing-profit .profit-amount-with-currency em {
  color: #62839a;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.employee-billing-profit .profit-amount-integer {
  color: #12637a;
  font-size: inherit;
  font-weight: inherit;
}

.employee-billing-profit .profit-amount-decimal {
  margin-left: 1px;
  color: #12637a;
  font-size: 11px;
  font-weight: 850;
}

.employee-billing-profit > small { color: #67889a; }

.employee-billing-profit.negative {
  border-color: #e7c7c7;
  border-top-color: #bd5555;
  background: linear-gradient(135deg, #fffafa 0%, #fff0f0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 3px 10px rgba(175, 69, 69, .08);
}

.employee-billing-profit.negative::after {
  background: #c46363;
  box-shadow: 0 0 0 3px rgba(196, 99, 99, .12);
}

.employee-billing-profit.negative > span { color: #9e4d4d; }
.employee-billing-profit.negative > strong { color: #af4545; }
.employee-billing-profit.negative > small { color: #a87878; }
.employee-billing-profit.negative .profit-amount-with-currency em { color: #a87878; }
.employee-billing-profit.negative .profit-amount-integer,
.employee-billing-profit.negative .profit-amount-decimal { color: #af4545; }

.employee-billing-workbench-side {
  display: grid;
  align-content: center;
  gap: 11px;
  border-left: 1px solid #cfdee8;
  background: linear-gradient(180deg, rgba(240, 247, 251, .92), rgba(229, 239, 247, .92));
  padding: 15px 16px;
}

.employee-billing-status-line {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
}

.employee-billing-status-dot {
  width: 7px;
  height: 7px;
  grid-row: span 2;
  border-radius: 50%;
  background: #46a783;
  box-shadow: 0 0 0 3px rgba(70, 167, 131, .13);
}

.employee-billing-status-dot.locked { background: #bf8a28; box-shadow: 0 0 0 3px rgba(191, 138, 40, .14); }
.employee-billing-status-line strong { overflow: hidden; color: #315c7d; font-size: 12px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.employee-billing-status-line small { overflow: hidden; color: #788fa0; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.employee-billing-workbench .employee-billing-lock-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.employee-billing-workbench .employee-billing-lock-control {
  min-width: 0;
  min-height: 44px;
  gap: 7px;
  padding: 5px 8px;
}

.employee-billing-workbench .employee-billing-lock-control small { font-size: 9px; }
.employee-billing-workbench .employee-billing-lock-control strong { font-size: 11px; }
.employee-billing-workbench .employee-billing-lock-symbol { width: 20px; height: 19px; transform: scale(.82); transform-origin: center; }

.employee-billing-group {
  border-color: #c1d1dc;
  border-radius: 7px;
  box-shadow: 0 8px 17px rgba(29, 62, 89, .06);
}

.employee-billing-group > summary {
  grid-template-columns: 34px minmax(145px, .9fr) minmax(0, 1.45fr) auto auto 20px;
  min-height: 68px;
  gap: 12px;
  padding: 0 17px;
}

.employee-billing-summary-name { min-width: 0; display: grid; gap: 2px; }
.employee-billing-summary-name > small { color: #7c91a1; font-size: 9px; font-weight: 850; }
.employee-billing-group > summary .employee-billing-summary-name > strong { overflow: hidden; color: #244c6b; font-size: 14px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.employee-billing-summary-amount { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.employee-billing-group > summary > .employee-billing-summary-amount > b { min-width: 0; height: auto; display: inline-flex; align-items: center; border: 1px solid #cedde6; border-radius: 999px; background: #fff; color: #42627a; padding: 3px 8px; font-size: 10px; font-weight: 900; line-height: 1.25; white-space: nowrap; }
.employee-billing-group > summary > .employee-billing-summary-amount > .employee-billing-summary-empty { color: #91a1ad; font-weight: 750; }
.employee-billing-group > summary > .employee-billing-summary-count { min-width: 48px; height: 25px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.employee-billing-summary-count small { font-size: 9px; font-weight: 850; }
.employee-billing-group > summary > .employee-billing-summary-state { min-width: 100px; color: #6f8596; text-align: right; }

.employee-billing-content .section-title-row {
  min-height: 39px;
  align-items: center;
  background: #fbfdfe;
  padding: 0 0 10px;
}

.employee-billing-content .section-title-row h4 {
  color: #3c627c;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.employee-billing-content .mini-button {
  min-width: 60px;
  min-height: 30px;
  border-radius: 999px;
  font-weight: 900;
}

.employee-bill-entity {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 7px;
  row-gap: 3px;
}

.employee-bill-entity-kind {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  border: 1px solid #c8d8e4;
  border-radius: 999px;
  background: #edf5fa;
  color: #547790;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.employee-bill-entity strong {
  min-width: 0;
  overflow: hidden;
  color: #244b6c;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-bill-entity em {
  border: 1px solid #ead1a5;
  border-radius: 999px;
  background: #fff8e9;
  color: #9a6b1e;
  padding: 2px 6px;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

.employee-bill-entity small {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  color: #7d91a1;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-bill-card-heading { min-width: 0; }
.fee-card-head .employee-bill-card-heading > span { display: block; margin-top: 4px; }
.supplier-fee-main .employee-bill-entity { flex: 1 1 auto; }

.employee-bill-status {
  display: inline-flex !important;
  align-items: center;
  min-height: 23px;
  border: 1px solid #cedde7;
  border-radius: 999px;
  background: #f7fafc;
  color: #597389;
  padding: 0 8px;
  font-size: 10px !important;
  font-weight: 900 !important;
  white-space: nowrap;
}

.employee-bill-status.action { border-color: #cad8e3; background: #f2f6f9; color: #587488; }
.employee-bill-status.ready { border-color: #a8cce7; background: #edf7ff; color: #276b9f; }
.employee-bill-status.processing { border-color: #c5b8e3; background: #f5f1ff; color: #6753a1; }
.employee-bill-status.receivable { border-color: #e6bd78; background: #fff6e6; color: #986018; }
.employee-bill-status.paid { border-color: #a8d3be; background: #f0faf4; color: #317351; }
.employee-bill-status.revision { border-color: #e5a17e; background: #fff1e9; color: #a0491b; }
.employee-bill-status.communication { border-color: #a8cce7; background: #f1f8ff; color: #276b9f; }
.employee-bill-status.attention { border-color: #e8c08a; background: #fff7eb; color: #8f5b1b; }
/* Aliases preserve harmless legacy markup while all current bill renderers use semantic tones. */
.employee-bill-status.pending { border-color: #cad8e3; background: #f2f6f9; color: #587488; }
.employee-bill-status.done { border-color: #a8d3be; background: #f0faf4; color: #317351; }
.employee-bill-status.danger { border-color: #e8b3b3; background: #fff5f5; color: #ad4141; }

.employee-billing-content .fee-card,
.employee-billing-content .supplier-fee-card {
  border-color: #cad9e4;
  box-shadow: 0 5px 13px rgba(31, 70, 102, .05);
}

.employee-billing-content .fee-card-head { padding: 11px 12px; }
.employee-billing-content .fee-actions,
.employee-billing-content .supplier-fee-actions { gap: 6px; }
.employee-billing-content .table-action-link {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b8cddd;
  border-bottom-color: #8aaac0;
  border-radius: 999px;
  background: linear-gradient(#fff 0%, #eff6fb 100%);
  color: #2d638a;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #abc5d7;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.employee-billing-content .table-action-link:hover { filter: brightness(1.02); transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 2px 0 #90b2ca, 0 5px 10px rgba(34, 85, 121, .12); }
.employee-billing-content .table-action-link.danger { border-color: #e2b9b9; border-bottom-color: #cd9999; background: linear-gradient(#fff, #fff4f4); color: #ae4141; }
.employee-billing-content .factory-fee-confirm-action {
  gap: 5px;
  border-color: #2479ad;
  border-bottom-color: #15567f;
  background: linear-gradient(180deg, #4ba2d0 0%, #2e83b8 54%, #206f9f 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .33), 0 2px 0 #15567f, 0 5px 11px rgba(32, 111, 159, .2);
  text-shadow: 0 1px 0 rgba(15, 72, 108, .28);
}

.employee-billing-content .factory-fee-confirm-action:hover {
  border-color: #1b6897;
  background: linear-gradient(180deg, #58add8 0%, #378fc1 54%, #2476a5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 0 #15567f, 0 7px 13px rgba(32, 111, 159, .24);
}

.employee-billing-content .factory-fee-edit-action {
  border-color: #9dbfd4;
  border-bottom-color: #6f9dbb;
  background: linear-gradient(180deg, #fff 0%, #edf6fb 100%);
  color: #245f84;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #9ab9cc, 0 4px 8px rgba(43, 95, 130, .1);
}

.employee-billing-content .factory-fee-edit-action:hover {
  border-color: #70a2c1;
  background: linear-gradient(180deg, #fff 0%, #e4f1f8 100%);
  color: #174f73;
}

.factory-fee-confirm-action > span,
.factory-fee-confirmed-state > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.factory-fee-confirm-action > span {
  background: rgba(255, 255, 255, .23);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.factory-fee-confirmed-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 27px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid #a8d4ba;
  border-radius: 999px;
  background: linear-gradient(180deg, #f7fffa 0%, #eaf8f0 100%);
  color: #28734e;
  box-shadow: inset 0 1px 0 #fff;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.factory-fee-confirmed-state > span {
  background: #3a9d6c;
  color: #fff;
}
.employee-billing-content .fee-summary { gap: 7px; padding: 11px 12px 1px; }
.employee-billing-content .fee-summary > span:not(.employee-bill-status) { border-radius: 999px; color: #345c78; padding: 4px 9px; }
.employee-billing-content .supplier-fee-meta { align-items: center; }
.employee-billing-content .supplier-fee-meta > .employee-bill-status { margin: 0; }

.supplier-fee-ledger {
  overflow: hidden;
  border: 1px solid #c5d7e4;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 7px 17px rgba(29, 62, 89, .05);
}

.supplier-fee-ledger-head {
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(155px, 1fr) minmax(0, 1.25fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #d7e5ee;
  background: linear-gradient(90deg, #f5fbff 0%, #fbfdff 55%, #f3faf7 100%);
  padding: 8px 12px;
}

.supplier-fee-ledger-title { min-width: 0; display: grid; gap: 1px; }
.supplier-fee-ledger-title > small { color: #758da1; font-size: 9px; font-weight: 950; letter-spacing: .65px; }
.supplier-fee-ledger-title > strong { color: #285777; font-size: 14px; font-weight: 950; }

.supplier-fee-ledger-totals {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}

.supplier-fee-ledger-totals .employee-billing-summary-money,
.supplier-fee-ledger-totals .employee-billing-summary-empty {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid #cbdce8;
  border-radius: 999px;
  background: #fff;
  color: #3d617a;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.supplier-fee-ledger-count {
  min-width: 100px;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: end;
  align-items: baseline;
  column-gap: 3px;
  color: #617b8f;
  text-align: right;
}

.supplier-fee-ledger-count > b { color: #24658c; font-size: 17px; font-weight: 950; line-height: 1; }
.supplier-fee-ledger-count > span { font-size: 10px; font-weight: 850; white-space: nowrap; }
.supplier-fee-ledger-count > em { grid-column: 1 / -1; color: #9a6e22; font-size: 9px; font-style: normal; font-weight: 850; white-space: nowrap; }

.supplier-fee-ledger-list { display: grid; }

.supplier-fee-ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border-bottom: 1px solid #e2ecf2;
  background: #fff;
  transition: background .16s ease, box-shadow .16s ease;
}

.supplier-fee-ledger-row:last-child { border-bottom: 0; }
.supplier-fee-ledger-row:hover { z-index: 1; background: #fafdff; box-shadow: inset 3px 0 0 #5b9bc4; }
.supplier-fee-ledger-row.is-expanded { background: #fbfdff; box-shadow: inset 3px 0 0 #c29135; }

.supplier-fee-ledger-open {
  min-width: 0;
  min-height: 61px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(122px, auto) 18px;
  align-items: center;
  gap: 13px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 8px 13px;
  text-align: left;
}

/* Supplier rows are read-only summaries: every operational field is visible without a second click. */
.supplier-fee-ledger-static {
  grid-template-columns: minmax(0, 1fr) minmax(122px, auto);
  min-height: 68px;
  cursor: default;
}

.supplier-fee-ledger-static .supplier-fee-ledger-line-primary {
  display: grid;
  grid-template-columns: minmax(160px, .85fr) minmax(150px, 1fr) minmax(180px, 1.15fr);
  align-items: center;
  gap: 11px;
}

.supplier-fee-ledger-static .supplier-fee-ledger-line-meta { gap: 0; }
.supplier-fee-ledger-static .supplier-fee-ledger-line-meta > span + span::before { display: none; }

.supplier-fee-ledger-static .supplier-fee-ledger-entity,
.supplier-fee-ledger-account,
.supplier-fee-ledger-direct-files {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.supplier-fee-ledger-static .supplier-fee-ledger-entity > strong { max-width: 145px; }
.supplier-fee-ledger-static .supplier-fee-ledger-entity > .employee-bill-status { margin-left: auto; }

.supplier-fee-ledger-account,
.supplier-fee-ledger-direct-files {
  overflow: hidden;
  color: #4d6c82;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.supplier-fee-ledger-account > small,
.supplier-fee-ledger-direct-files > small {
  flex: 0 0 auto;
  color: #8298a9;
  font-size: 11px;
  font-weight: 900;
}

.supplier-fee-ledger-account > b {
  min-width: 0;
  overflow: hidden;
  color: #385c73;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
}

.supplier-fee-ledger-direct-files > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

.supplier-fee-ledger-direct-files a {
  min-width: 0;
  overflow: hidden;
  color: #246b99;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  text-overflow: ellipsis;
}

.supplier-fee-ledger-direct-files a:hover { color: #ad751f; text-decoration: underline; }
.supplier-fee-ledger-direct-files em {
  flex: 0 0 auto;
  color: #537c94;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.supplier-fee-ledger-direct-files i { color: #99aab6; font-size: 11px; font-style: normal; font-weight: 750; }

.supplier-fee-ledger-copy { min-width: 0; display: grid; gap: 4px; }
.supplier-fee-ledger-line { min-width: 0; display: flex; align-items: center; gap: 7px; }
.supplier-fee-ledger-line-primary { min-height: 22px; }
.supplier-fee-ledger-line-meta { overflow: hidden; color: #657f92; font-size: 11px; font-weight: 800; white-space: nowrap; }
.supplier-fee-ledger-line-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier-fee-ledger-line-meta > span + span::before { content: "•"; color: #b1c2ce; margin-right: 7px; }
.supplier-fee-ledger-line-meta .supplier-fee-ledger-file-count { color: #477b9b; }

.supplier-fee-ledger-entity { min-width: 0; display: inline-flex; align-items: center; gap: 7px; }
.supplier-fee-ledger-entity > em { border: 1px solid #c8d8e4; border-radius: 999px; background: #edf5fa; color: #547790; padding: 2px 6px; font-size: 9px; font-style: normal; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.supplier-fee-ledger-entity > em.factory-fee-ledger-status-month-settle { border-color: #b8d9cb; background: #edf9f3; color: #38745b; }
.supplier-fee-ledger-entity > em.factory-fee-ledger-status-danger { display: inline-flex; align-items: center; gap: 3px; border-color: #e79a9a; background: linear-gradient(180deg, #fff2f2 0%, #ffe4e4 100%); box-shadow: 0 1px 3px rgba(181, 54, 54, .17); color: #ad3434; }
.supplier-fee-ledger-entity > em.factory-fee-ledger-status-danger > span { display: inline-grid; width: 10px; height: 10px; place-items: center; border-radius: 50%; background: #c84848; color: #fff; font-size: 8px; font-weight: 950; line-height: 1; }
.supplier-fee-ledger-entity > strong { min-width: 0; overflow: hidden; color: #244b6c; font-size: 13px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }

.supplier-fee-ledger-amount { min-width: 122px; overflow: hidden; color: #46708c; font-size: 11px; font-weight: 850; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.supplier-fee-ledger-amount > b { color: #1f5275; font-size: 16px; font-weight: 950; }

.supplier-fee-ledger-chevron {
  width: 8px;
  height: 8px;
  justify-self: end;
  border-right: 2px solid #8da9bb;
  border-bottom: 2px solid #8da9bb;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .16s ease, border-color .16s ease;
}

.supplier-fee-ledger-row.is-expanded .supplier-fee-ledger-chevron { border-color: #a87522; transform: rotate(225deg) translate(-1px, -1px); }

.supplier-fee-ledger-more { position: relative; align-self: center; margin-right: 10px; }
.supplier-fee-ledger-more > summary {
  width: 29px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #c7d9e5;
  border-bottom-color: #9cb9cb;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef6fb);
  color: #517896;
  cursor: pointer;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  list-style: none;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #aec6d7;
}
.supplier-fee-ledger-more > summary::-webkit-details-marker { display: none; }
.supplier-fee-ledger-more > summary:hover { filter: brightness(1.02); transform: translateY(-1px); }
.supplier-fee-ledger-more-menu {
  position: absolute;
  z-index: 8;
  top: 34px;
  right: 0;
  min-width: 74px;
  display: grid;
  gap: 5px;
  border: 1px solid #bfd3e1;
  border-radius: 6px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 10px 22px rgba(31, 67, 95, .18);
}
.supplier-fee-ledger-more-menu .table-action-link { width: 100%; }
/* The final supplier row has no space below it: open its action menu upward so it stays clickable. */
.supplier-fee-ledger-static-row:last-child .supplier-fee-ledger-more-menu { top: auto; bottom: 34px; }
.supplier-fee-ledger-static-row:has(.supplier-fee-ledger-more[open]) { z-index: 9; }

.supplier-fee-ledger-detail {
  grid-column: 1 / -1;
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .7fr);
  gap: 12px;
  border-top: 1px solid #e4edf3;
  background: linear-gradient(90deg, #f7fbfe, #fbfdff);
  padding: 10px 13px 12px;
}
.supplier-fee-ledger-row.is-expanded .supplier-fee-ledger-detail { display: grid; }

.supplier-fee-ledger-detail-meta { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.supplier-fee-ledger-detail-meta > span,
.supplier-fee-ledger-files { min-width: 0; display: grid; gap: 3px; }
.supplier-fee-ledger-detail small { color: #7c93a5; font-size: 9px; font-weight: 900; }
.supplier-fee-ledger-detail b { min-width: 0; overflow: hidden; color: #34566e; font-size: 11px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.supplier-fee-ledger-files > div { display: flex; flex-wrap: wrap; gap: 5px; }
.supplier-fee-ledger-files > span { color: #93a4b0; font-size: 10px; font-weight: 750; }
.supplier-fee-ledger-files .table-action-link { min-height: 25px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.supplier-fee-ledger-modern { overflow: visible; }
.supplier-fee-ledger-modern:has(.supplier-fee-ledger-action-more[open]) {
  position: relative;
  z-index: 20;
}

.supplier-fee-ledger-modern-row:hover { box-shadow: inset 3px 0 0 #5b9bc4; }
.supplier-fee-ledger-modern-row:has(.supplier-fee-ledger-action-more[open]) { z-index: 9; }

.supplier-fee-ledger-summary {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 61px;
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(0, auto) minmax(150px, auto);
  align-items: center;
  gap: 12px;
  padding: 8px 13px;
}

.supplier-fee-ledger-summary-main { min-width: 0; }
.supplier-fee-ledger-static-summary { cursor: default; }

.supplier-fee-ledger-modern-row .supplier-fee-ledger-line-primary { min-height: 24px; }
.supplier-fee-ledger-modern-row .supplier-fee-ledger-entity { max-width: 100%; }
.supplier-fee-ledger-modern-row .supplier-fee-ledger-entity > strong { flex: 0 0 auto; }
.supplier-fee-ledger-full-name {
  min-width: 0;
  max-width: 300px;
  overflow: hidden;
  color: #6d8495;
  font-size: 11px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-fee-ledger-modern-row .employee-bill-status.action {
  border-color: #e3c381;
  background: #fff7e6;
  color: #91601b;
}

.supplier-fee-ledger-modern-row .employee-bill-status.receivable {
  border-color: #a9cce5;
  background: #eef7fd;
  color: #286b98;
}

.supplier-fee-ledger-total-copy {
  min-width: 150px;
  display: grid;
  justify-items: end;
  gap: 2px;
}

.supplier-fee-ledger-total-copy > small {
  color: #7890a2;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}

.supplier-fee-ledger-modern-row .supplier-fee-ledger-amount {
  min-width: 0;
  color: #174f77;
  font-size: 16px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.supplier-fee-ledger-quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 0;
}

.supplier-fee-ledger-quick-actions .table-action-link {
  min-height: 29px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
}

.employee-billing-content .supplier-fee-ledger-edit-action {
  border-color: #9dbfd4;
  border-bottom-color: #6f9dbb;
  background: linear-gradient(180deg, #fff 0%, #edf6fb 100%);
  color: #245f84;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #9ab9cc, 0 4px 8px rgba(43, 95, 130, .1);
}

.employee-billing-content .supplier-fee-ledger-edit-action:hover {
  border-color: #70a2c1;
  background: linear-gradient(180deg, #fff 0%, #e4f1f8 100%);
  color: #174f73;
}

.supplier-fee-ledger-action-more {
  align-self: center;
  margin-right: 0;
}

.supplier-fee-ledger-action-more > summary {
  width: auto;
  min-width: 56px;
  height: 32px;
  border-color: #b8cede;
  border-bottom-color: #8fb1c7;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #edf6fb 100%);
  color: #315f7d;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(47, 92, 123, .12);
}

.supplier-fee-ledger-action-more > summary:hover {
  border-color: #80abc5;
  background: linear-gradient(180deg, #fff 0%, #e4f2f9 100%);
  color: #1f5779;
}

.supplier-fee-ledger-action-more[open] > summary {
  border-color: #6f9fbd;
  background: linear-gradient(180deg, #e7f4fb 0%, #d9ebf6 100%);
  color: #174f72;
  box-shadow: inset 0 1px 3px rgba(47, 92, 123, .13);
}

.supplier-fee-ledger-action-more .supplier-fee-ledger-more-menu {
  width: min(180px, calc(100vw - 40px));
  min-width: 150px;
  max-height: min(360px, calc(100vh - 120px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.supplier-fee-ledger-modern-row:last-child .supplier-fee-ledger-more-menu {
  top: auto;
  bottom: 36px;
}

@media (max-width: 980px) {
  .supplier-fee-ledger-static .supplier-fee-ledger-line-primary {
    grid-template-columns: minmax(150px, .9fr) minmax(145px, 1fr);
  }

  .supplier-fee-ledger-static .supplier-fee-ledger-direct-files { grid-column: 1 / -1; }
}

.factory-fee-ledger .supplier-fee-ledger-head {
  background: linear-gradient(90deg, #f5faff 0%, #fbfdff 54%, #f7fbff 100%);
}

.factory-fee-ledger { overflow: visible; }
.factory-fee-ledger:has(.factory-fee-ledger-more[open]) {
  position: relative;
  z-index: 20;
}

.factory-fee-ledger .supplier-fee-ledger-title > strong,
.factory-fee-ledger .supplier-fee-ledger-count > b { color: #24638b; }
.factory-fee-ledger .supplier-fee-ledger-count > em { color: #53748a; }
.factory-fee-ledger-row:hover { box-shadow: inset 3px 0 0 #4b93be; }
.factory-fee-ledger-row.is-expanded { background: #f7fbfd; box-shadow: inset 3px 0 0 #247daa, 0 8px 18px rgba(37, 91, 126, .08); }
.factory-fee-ledger-row.is-danger.is-expanded { box-shadow: inset 3px 0 0 #bd5a5a, 0 8px 18px rgba(133, 65, 65, .08); }

.factory-fee-ledger-invoice {
  min-width: 0;
  overflow: hidden;
  color: #5c7588;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-fee-ledger-row .supplier-fee-ledger-amount {
  min-width: 0;
  color: #174f77;
  font-size: 16px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.factory-fee-ledger-summary {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 61px;
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(0, auto) minmax(150px, auto);
  align-items: center;
  gap: 12px;
  padding: 8px 13px;
}

.factory-fee-ledger-static-main {
  min-width: 0;
  min-height: 42px;
  display: grid;
  align-items: center;
  padding: 0;
  text-align: left;
}

.factory-fee-ledger-static-amount {
  display: grid;
  grid-template-columns: minmax(122px, auto);
  align-items: center;
  padding: 0;
  text-align: right;
}

.factory-fee-ledger-toggle,
.delivery-agent-fee-ledger-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.factory-fee-ledger-toggle:hover,
.delivery-agent-fee-ledger-toggle:hover { background: rgba(89, 144, 179, .06); }

.factory-fee-ledger-toggle:focus-visible,
.delivery-agent-fee-ledger-toggle:focus-visible {
  outline: 3px solid rgba(47, 126, 180, .28);
  outline-offset: 2px;
}

.factory-fee-ledger-total-copy {
  min-width: 150px;
  display: grid;
  justify-items: end;
  gap: 2px;
}

.factory-fee-ledger-total-copy > small {
  color: #7890a2;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}

.factory-fee-ledger-detail {
  position: relative;
  grid-template-columns: 1fr;
  gap: 11px;
  border-top-color: #b8cedd;
  background:
    radial-gradient(circle at 100% 0, rgba(99, 151, 181, .13), transparent 34%),
    linear-gradient(135deg, #edf5f9 0%, #f8fbfd 48%, #e8f1f6 100%);
  padding: 14px 16px 16px;
  box-shadow: inset 4px 0 0 #4d91b7, inset 0 1px 0 rgba(255, 255, 255, .92);
}

.factory-fee-ledger-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.factory-fee-ledger-notes > div { min-width: 0; border: 1px solid #d9cdbd; border-radius: 5px; background: rgba(255, 251, 244, .84); padding: 7px 9px; }
.factory-fee-ledger-notes small { display: block; color: #8d7559; font-size: 10px; font-weight: 900; }
.factory-fee-ledger-notes p { min-width: 0; max-height: 34px; overflow: hidden; margin: 3px 0 0; color: #6e5b45; font-size: 11px; font-weight: 800; line-height: 1.45; white-space: pre-wrap; }

.factory-fee-ledger-quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 0;
}

.factory-fee-ledger-quick-actions .table-action-link {
  min-height: 29px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
}

.factory-fee-ledger-quick-actions .table-action-link:focus-visible {
  outline: 3px solid rgba(47, 126, 180, .22);
  outline-offset: 2px;
}

.factory-fee-ledger-more {
  align-self: center;
  margin-right: 0;
}

.factory-fee-ledger-more > summary {
  width: auto;
  min-width: 56px;
  height: 32px;
  border-color: #b8cede;
  border-bottom-color: #8fb1c7;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #edf6fb 100%);
  color: #315f7d;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(47, 92, 123, .12);
}

.factory-fee-ledger-more > summary:hover {
  border-color: #80abc5;
  background: linear-gradient(180deg, #fff 0%, #e4f2f9 100%);
  color: #1f5779;
}

.factory-fee-ledger-more[open] > summary {
  border-color: #6f9fbd;
  background: linear-gradient(180deg, #e7f4fb 0%, #d9ebf6 100%);
  color: #174f72;
  box-shadow: inset 0 1px 3px rgba(47, 92, 123, .13);
}

.factory-fee-ledger-more .supplier-fee-ledger-more-menu {
  width: min(320px, calc(100vw - 40px));
  min-width: 280px;
  max-height: min(360px, calc(100vh - 120px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.factory-fee-ledger-more .supplier-fee-ledger-more-menu .table-action-link {
  min-height: 32px;
  justify-content: flex-start;
  border-radius: 5px;
  white-space: nowrap;
}

.factory-fee-ledger-row:last-child .supplier-fee-ledger-more-menu {
  top: auto;
  bottom: 36px;
}

.factory-fee-ledger-row:has(.factory-fee-ledger-more[open]) { z-index: 9; }

.factory-fee-payment-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid #d3e2ec;
  border-radius: 6px;
  background: linear-gradient(135deg, #fafdff, #edf6fb);
  padding: 10px 11px;
  color: #385d75;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.factory-fee-payment-alert input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #2d83b4;
}

.factory-fee-payment-alert > span { display: grid; gap: 2px; }
.factory-fee-payment-alert b { color: #285774; font-size: 12px; font-weight: 950; }
.factory-fee-payment-alert small { color: #7690a1; font-size: 10px; font-weight: 750; }

.factory-fee-payment-time-card { width: min(540px, calc(100vw - 32px)); }
.factory-fee-payment-time-body { display: grid; gap: 2px; }
.factory-fee-payment-time-intro {
  display: grid;
  gap: 4px;
  border-left: 3px solid #4192bf;
  margin: 0 0 8px;
  padding: 3px 0 3px 10px;
}
.factory-fee-payment-time-intro b { color: #245575; font-size: 13px; font-weight: 950; }
.factory-fee-payment-time-intro span { color: #658095; font-size: 12px; font-weight: 750; line-height: 1.55; }
.factory-fee-payment-time-card .date-click-field { cursor: pointer; }
.factory-fee-payment-time-card input[type="datetime-local"],
.factory-fee-payment-time-card input[type="date"] { min-height: 38px; cursor: pointer; }

.factory-fee-payment-time-error {
  margin: 8px 0 0;
  border: 1px solid #edc2c2;
  border-radius: 4px;
  background: #fff6f6;
  color: #aa4949;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 8px;
}

.factory-fee-ledger-table {
  overflow: auto;
  max-height: min(440px, 60vh);
  border: 1px solid #c6dbe7;
  border-radius: 7px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 7px 18px rgba(46, 92, 121, .09), inset 0 1px 0 #fff;
}

.factory-fee-ledger-table .mini-fee-table {
  min-width: 900px;
  margin: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.factory-fee-ledger-table .mini-fee-table th,
.factory-fee-ledger-table .mini-fee-table td {
  padding: 9px 11px;
  vertical-align: middle;
}

.factory-fee-ledger-table .mini-fee-table th {
  color: #60798c;
  font-size: 11px;
  white-space: nowrap;
}

.factory-fee-ledger-table .mini-fee-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #edf5fa;
  box-shadow: inset 0 -1px 0 #c6dbe7;
}

.factory-fee-ledger-table .mini-fee-table th:nth-child(1) { width: 22%; }
.factory-fee-ledger-table .mini-fee-table th:nth-child(2) { width: 9%; }
.factory-fee-ledger-table .mini-fee-table th:nth-child(3) { width: 13%; }
.factory-fee-ledger-table .mini-fee-table th:nth-child(4) { width: 10%; }
.factory-fee-ledger-table .mini-fee-table th:nth-child(5) { width: 15%; }
.factory-fee-ledger-table .mini-fee-table th:nth-child(6) { width: 11%; }
.factory-fee-ledger-table .mini-fee-table th:nth-child(7) { width: 20%; }

.factory-fee-ledger-table .factory-fee-item-name {
  color: #264e6b;
  font-size: 13px;
  font-weight: 900;
}

.factory-fee-ledger-table .factory-fee-money-column {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.factory-fee-ledger-table td.factory-fee-money-column > strong {
  color: #174f77;
  font-size: 14px;
  font-weight: 950;
}

.factory-fee-ledger-table .factory-fee-currency {
  color: #4e7189;
  font-weight: 850;
  white-space: nowrap;
}

.factory-fee-tax-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid #cddce7;
  border-radius: 999px;
  background: #f5f9fc;
  color: #55738a;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.factory-fee-ledger-table .factory-fee-remark {
  color: #5c7486;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.factory-fee-ledger-table tfoot th,
.factory-fee-ledger-table tfoot td {
  border-top: 2px solid #b9cfde;
  background: linear-gradient(90deg, #f5faff, #fbfdff);
}

.factory-fee-ledger-table tfoot th {
  color: #294f6b;
  font-size: 12px;
  font-weight: 950;
}

.factory-fee-ledger-table-total {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: #174f77;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
}

.delivery-agent-fee-ledger { overflow: visible; }
.delivery-agent-fee-ledger:has(.delivery-agent-fee-ledger-more[open]) {
  position: relative;
  z-index: 20;
}

.delivery-agent-fee-ledger .supplier-fee-ledger-head {
  background: linear-gradient(90deg, #fffaf1 0%, #fffdf9 54%, #f7fbff 100%);
}

.delivery-agent-fee-ledger .supplier-fee-ledger-title > small { color: #92784e; }
.delivery-agent-fee-ledger .supplier-fee-ledger-title > strong { color: #715522; }
.delivery-agent-fee-ledger .supplier-fee-ledger-count > b { color: #94691f; }

.delivery-agent-fee-ledger-row:hover { box-shadow: inset 3px 0 0 #c29135; }
.delivery-agent-fee-ledger-row.is-expanded { background: #fffdf8; box-shadow: inset 3px 0 0 #b98931, 0 8px 18px rgba(111, 82, 34, .08); }
.delivery-agent-fee-ledger-row:has(.delivery-agent-fee-ledger-more[open]) { z-index: 9; }

.delivery-agent-fee-ledger-summary {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 61px;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(0, auto) minmax(150px, auto);
  align-items: center;
  gap: 12px;
  padding: 8px 13px;
}

.delivery-agent-fee-ledger-static-main {
  min-width: 0;
  min-height: 42px;
  display: grid;
  align-items: center;
  padding: 0;
  text-align: left;
}

.delivery-agent-fee-ledger-static-amount {
  display: grid;
  grid-template-columns: minmax(122px, auto);
  align-items: center;
  padding: 0;
  text-align: right;
}

.delivery-agent-fee-ledger-row .supplier-fee-ledger-line-primary { flex-wrap: wrap; min-height: 24px; }
.delivery-agent-fee-ledger-row .supplier-fee-ledger-entity { max-width: min(360px, 100%); }
.delivery-agent-fee-ledger-row .supplier-fee-ledger-entity > strong { flex: 0 0 auto; }
.delivery-agent-fee-ledger-row .supplier-fee-ledger-amount { min-width: 0; color: #76551b; font-size: 16px; font-weight: 950; font-variant-numeric: tabular-nums; }

.delivery-agent-fee-ledger-quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 0;
}

.delivery-agent-fee-ledger-quick-actions .table-action-link {
  min-height: 29px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
}

.employee-billing-content .delivery-agent-fee-edit-action {
  border-color: #d4ba87;
  border-bottom-color: #b4914d;
  background: linear-gradient(180deg, #fff 0%, #fff6e7 100%);
  color: #78571d;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #ccb078, 0 4px 8px rgba(121, 86, 27, .1);
}

.employee-billing-content .delivery-agent-fee-edit-action:hover {
  border-color: #bd9853;
  background: linear-gradient(180deg, #fff 0%, #ffefd3 100%);
  color: #654510;
}

.delivery-agent-fee-ledger-more { align-self: center; margin-right: 0; }
.delivery-agent-fee-ledger-more > summary {
  width: auto;
  min-width: 56px;
  height: 32px;
  border-color: #d5c096;
  border-bottom-color: #b99b61;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #fff6e8 100%);
  color: #765a28;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(111, 82, 34, .12);
}

.delivery-agent-fee-ledger-more > summary:hover {
  border-color: #c2a15e;
  background: linear-gradient(180deg, #fff 0%, #ffefd2 100%);
  color: #654914;
}

.delivery-agent-fee-ledger-more[open] > summary {
  border-color: #b68e43;
  background: linear-gradient(180deg, #fff3d8 0%, #f9e6bf 100%);
  color: #61430f;
  box-shadow: inset 0 1px 3px rgba(111, 82, 34, .13);
}

.delivery-agent-fee-ledger-more .supplier-fee-ledger-more-menu {
  width: min(190px, calc(100vw - 40px));
  min-width: 160px;
}

.delivery-agent-fee-ledger-more .supplier-fee-ledger-more-menu .table-action-link {
  min-height: 32px;
  justify-content: flex-start;
  border-radius: 5px;
  white-space: nowrap;
}

.delivery-agent-fee-ledger-row:last-child .supplier-fee-ledger-more-menu { top: auto; bottom: 36px; }

.delivery-agent-fee-ledger-detail {
  position: relative;
  grid-template-columns: 1fr;
  gap: 9px;
  border-top-color: #ddc99f;
  background:
    radial-gradient(circle at 100% 0, rgba(190, 145, 62, .13), transparent 34%),
    linear-gradient(135deg, #fff5e2 0%, #fffdf8 48%, #f5ead5 100%);
  padding: 14px 16px 16px;
  box-shadow: inset 4px 0 0 #bc8c35, inset 0 1px 0 rgba(255, 255, 255, .94);
}

.delivery-agent-fee-ledger-table {
  overflow: auto;
  border: 1px solid #dbc9a5;
  border-radius: 7px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 7px 18px rgba(111, 82, 34, .09), inset 0 1px 0 #fff;
}

.delivery-agent-fee-ledger-table .mini-fee-table { min-width: 720px; margin: 0; table-layout: fixed; }
.delivery-agent-fee-ledger-table .mini-fee-table th,
.delivery-agent-fee-ledger-table .mini-fee-table td { padding: 9px 10px; vertical-align: middle; }
.delivery-agent-fee-ledger-table .mini-fee-table th { color: #756b5b; font-size: 11px; }
.delivery-agent-fee-ledger-table .mini-fee-table th:nth-child(1) { width: 20%; }
.delivery-agent-fee-ledger-table .mini-fee-table th:nth-child(2),
.delivery-agent-fee-ledger-table .mini-fee-table th:nth-child(3) { width: 22%; }
.delivery-agent-fee-ledger-table .mini-fee-table th:nth-child(4) { width: 16%; }
.delivery-agent-fee-ledger-table .mini-fee-table th:nth-child(5) { width: 20%; }
.delivery-agent-fee-item-name { color: #5d4a2a; font-size: 13px; font-weight: 900; }
.delivery-agent-fee-ledger-calculation { font-variant-numeric: tabular-nums; }
.delivery-agent-fee-ledger-calculation > strong { display: inline-block; color: #315f7c; font-size: 13px; font-weight: 950; }
.delivery-agent-fee-ledger-calculation > small { margin-left: 5px; color: #7c8e9a; font-size: 10px; font-weight: 850; }
.delivery-agent-fee-ledger-net { text-align: right; font-variant-numeric: tabular-nums; }
.delivery-agent-fee-ledger-net > strong { color: #78571d; font-size: 14px; font-weight: 950; }
.delivery-agent-fee-ledger-remark { color: #657580; line-height: 1.45; overflow-wrap: anywhere; }
.delivery-agent-fee-ledger-table tr.fee-value-different td { background: #fffaf5; }
.delivery-agent-fee-ledger-table tr.fee-value-different .delivery-agent-fee-ledger-net { color: #9a572c; }
.delivery-agent-fee-ledger-table tfoot th,
.delivery-agent-fee-ledger-table tfoot td { border-top: 2px solid #d7c9af; background: linear-gradient(90deg, #fffaf1, #fffdf9); }
.delivery-agent-fee-ledger-table tfoot th { color: #6b5122; font-size: 12px; font-weight: 950; }

@media (max-width: 1180px) {
  .employee-billing-workbench { grid-template-columns: 1fr; }
  .employee-billing-workbench-side { border-top: 1px solid #cfdee8; border-left: 0; }
  .employee-billing-group > summary { grid-template-columns: 34px minmax(145px, 1fr) minmax(0, 1fr) auto 20px; }
  .employee-billing-group > summary > .employee-billing-summary-state { display: none; }
}

@media (max-width: 820px) {
  .employee-billing-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-billing-profit-spotlight { grid-template-columns: minmax(0, 1fr) auto; }
  .employee-billing-profit-spotlight > small { display: none; }
  .employee-billing-group > summary { grid-template-columns: 32px minmax(0, 1fr) auto 18px; }
  .employee-billing-summary-amount { display: none; }
  .employee-billing-group > summary > .employee-billing-summary-count { min-width: 38px; }
  .employee-billing-workbench-title { flex-wrap: wrap; }
  .employee-billing-route-grid { grid-template-columns: 1fr; }
  .employee-billing-route-open { min-height: 92px; }
  .employee-billing-detail-heading { align-items: flex-start; flex-direction: column; }
  .employee-billing-detail-heading-side { width: 100%; justify-content: flex-start; }
  .employee-billing-detail-heading-side > span { justify-content: flex-start; }
  .employee-billing-detail-close { margin-left: auto; }
  .supplier-fee-ledger-head { grid-template-columns: minmax(0, 1fr) auto; }
  .supplier-fee-ledger-totals { justify-content: flex-start; grid-column: 1 / -1; grid-row: 2; }
  .supplier-fee-ledger-count { grid-column: 2; grid-row: 1; }
  .supplier-fee-ledger-detail { grid-template-columns: 1fr; }
  .supplier-fee-ledger-summary { grid-template-columns: minmax(0, 1fr) minmax(150px, auto); }
  .supplier-fee-ledger-quick-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    border-top: 1px solid #dce8f0;
    margin: 0 -13px -8px;
    padding: 8px 13px;
  }
  .factory-fee-ledger-summary { grid-template-columns: minmax(0, 1fr) minmax(150px, auto); }
  .factory-fee-ledger-quick-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    border-top: 1px solid #dce8f0;
    margin: 0 -13px -8px;
    padding: 8px 13px;
  }
  .delivery-agent-fee-ledger-summary { grid-template-columns: minmax(0, 1fr) minmax(150px, auto); }
  .delivery-agent-fee-ledger-quick-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    border-top: 1px solid #eadfca;
    margin: 0 -13px -8px;
    padding: 8px 13px;
  }
}

@media (max-width: 520px) {
  .employee-billing-overview-metrics { grid-template-columns: 1fr; }
  .employee-billing-profit-spotlight { min-height: 64px; gap: 10px; padding: 9px 12px; }
  .employee-billing-profit-spotlight > b { font-size: 23px; }
  .employee-billing-profit-spotlight .profit-amount-decimal { font-size: 12px; }
  .employee-billing-workbench .employee-billing-lock-controls { grid-template-columns: 1fr 1fr; }
  .employee-bill-entity { grid-template-columns: auto minmax(0, 1fr); }
  .employee-bill-entity em { display: none; }
  .employee-billing-content .fee-card-head { align-items: flex-start; flex-direction: column; }
  .employee-billing-content .fee-actions,
  .employee-billing-content .supplier-fee-actions { flex-wrap: wrap; }
  .employee-billing-route-open { grid-template-columns: 30px minmax(0, 1fr); padding: 12px 11px 9px; }
  .employee-billing-route-card.has-lock .employee-billing-route-open { padding-right: 100px; }
  .employee-billing-route-alert { top: 49px; right: 11px; font-size: 9px; padding: 4px 6px; }
  .employee-billing-route-card.has-lock .employee-billing-route-alert { right: 105px; }
  .employee-billing-route-lock { top: 11px; right: 11px; min-width: 76px; padding: 0 7px; }
  .employee-billing-route-copy > strong { font-size: 14px; }
  .employee-billing-route-action { min-height: 36px; }
  .employee-billing-detail-heading { padding: 10px 11px 10px 15px; }
  .employee-billing-detail-heading-side > b { min-width: 51px; }
  .supplier-fee-ledger-head { gap: 7px; padding: 8px 10px; }
  .supplier-fee-ledger-open { grid-template-columns: minmax(0, 1fr) auto 14px; gap: 7px; padding: 8px 10px; }
  .supplier-fee-ledger-static { grid-template-columns: minmax(0, 1fr) auto; }
  .supplier-fee-ledger-static .supplier-fee-ledger-line-primary { grid-template-columns: 1fr; gap: 4px; }
  .supplier-fee-ledger-static .supplier-fee-ledger-direct-files { grid-column: auto; }
  .supplier-fee-ledger-static .supplier-fee-ledger-entity > strong { max-width: 120px; }
  .supplier-fee-ledger-amount { min-width: 0; font-size: 10px; }
  .supplier-fee-ledger-amount > b { font-size: 13px; }
  .supplier-fee-ledger-line-meta > span:nth-child(2) { display: none; }
  .supplier-fee-ledger-detail { padding: 9px 10px 11px; }
  .supplier-fee-ledger-detail-meta { grid-template-columns: 1fr; }
  .supplier-fee-ledger-summary { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 8px 10px; }
  .supplier-fee-ledger-full-name { display: none; }
  .supplier-fee-ledger-quick-actions { gap: 6px; margin: 0 -10px -8px; padding: 8px 10px; }
  .supplier-fee-ledger-quick-actions .table-action-link { min-height: 28px; padding: 0 10px; }
  .supplier-fee-ledger-action-more .supplier-fee-ledger-more-menu { min-width: min(170px, calc(100vw - 28px)); }
  .factory-fee-ledger-invoice { display: none; }
  .factory-fee-ledger-row .supplier-fee-ledger-amount { font-size: 11px; }
  .factory-fee-ledger-summary { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 8px 10px; }
  .factory-fee-ledger-static-amount { grid-template-columns: minmax(0, auto); }
  .factory-fee-ledger-notes { grid-template-columns: 1fr; }
  .factory-fee-ledger-quick-actions { gap: 6px; margin: 0 -10px -8px; padding: 8px 10px; }
  .factory-fee-ledger-quick-actions .table-action-link { min-height: 28px; padding: 0 10px; }
  .factory-fee-ledger-more .supplier-fee-ledger-more-menu {
    min-width: min(250px, calc(100vw - 28px));
    grid-template-columns: 1fr;
  }
  .delivery-agent-fee-ledger-summary { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 8px 10px; }
  .delivery-agent-fee-ledger-static-amount { grid-template-columns: minmax(0, auto); }
  .delivery-agent-fee-ledger-quick-actions { gap: 6px; margin: 0 -10px -8px; padding: 8px 10px; }
  .delivery-agent-fee-ledger-quick-actions .table-action-link { min-height: 28px; padding: 0 10px; }
  .delivery-agent-fee-ledger-more .supplier-fee-ledger-more-menu { min-width: min(170px, calc(100vw - 28px)); }
}

.employee-detail-tab:focus-visible,
.order-flow-support-group > summary:focus-visible,
.employee-billing-group > summary:focus-visible {
  outline: 3px solid rgba(50, 126, 181, .24);
  outline-offset: 2px;
}

@media (max-width: 1120px) {
  .employee-detail-summary-grid {
    grid-template-columns: minmax(240px, 1.5fr) repeat(2, minmax(90px, .55fr)) minmax(105px, .65fr);
  }

  .employee-detail-summary-grid > div:nth-child(5),
  .employee-detail-summary-grid > div:nth-child(6) {
    display: none;
  }
}

@media (max-width: 820px) {
  #orderView .search-form {
    display: grid;
    grid-template-columns: 1fr;
  }

  #orderView .order-filter-inline {
    width: 100%;
    overflow: visible;
  }

  #orderView .order-filter-inline .order-search-extra {
    flex-wrap: wrap;
  }

  #orderView .order-flow-primary-track {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  #orderView .order-flow-primary-track.order-flow-live-queue {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .order-flow-auxiliary-layout { grid-template-columns: 1fr; }

  .order-flow-aux-group {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 3px;
    border-right: 0;
    border-bottom: 1px solid #dbe6ed;
  }

  .order-flow-aux-group:last-child { border-bottom: 0; }
  .order-flow-aux-group > header { min-height: 18px; }
  .order-flow-workbench-head { min-height: 42px; }

  .order-flow-filter.order-flow-queue {
    border: 1px solid #cbdbe6;
    border-bottom-color: #a8c0d1;
  }

  .detail-page-shell {
    padding: 12px;
  }

  .employee-detail-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .employee-detail-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .employee-detail-summary-grid {
    grid-template-columns: minmax(0, 1fr) minmax(88px, .45fr) minmax(88px, .45fr);
  }

  .employee-detail-summary-grid > div:nth-child(4) {
    display: none;
  }

  .employee-detail-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employee-detail-tab {
    border-bottom: 1px solid #dbe4eb;
  }

  .employee-detail-panel-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .employee-detail-panel-heading p {
    display: none;
  }

  .employee-detail-panel[data-detail-panel="overview"] .old-route-section {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    padding-bottom: 8px;
  }

  .route-tool-rail {
    max-width: 100%;
    justify-content: flex-start;
  }

  .employee-detail-workspace {
    padding: 10px;
  }

  .employee-billing-group > summary {
    grid-template-columns: 32px minmax(0, 1fr) auto 18px;
  }

  .employee-billing-group > summary > em {
    display: none;
  }
}

@media (max-width: 560px) {
  body:not(.detail-page) .topbar {
    height: auto;
    min-height: 58px;
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
    padding: 9px 10px;
  }

  body:not(.detail-page) .brand {
    min-width: 0;
  }

  body:not(.detail-page) .brand strong {
    font-size: 19px;
  }

  body:not(.detail-page) .topbar-actions {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 7px;
  }

  body:not(.detail-page) #devUserSelect {
    width: 100%;
    min-width: 0;
  }

  body:not(.detail-page) .user-chip {
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.detail-page) .app {
    padding: 10px 6px 20px;
  }

  body:not(.detail-page) .workspace {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 6px;
  }

  body:not(.detail-page) .sidebar {
    padding: 7px 3px;
  }

  body:not(.detail-page) .nav-button {
    width: 32px;
  }

  body:not(.detail-page) .content {
    padding: 8px;
  }

  body:not(.detail-page) .order-topbar-tools {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }

  #orderView .module-toolbar-actions .mini-button {
    flex: 0 0 auto;
    min-width: 76px;
  }

  #orderView .search-form {
    gap: 8px;
    padding: 8px;
  }

  #orderView .order-search-main {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 58px;
  }

  #orderView .order-search-main > select,
  #orderView .order-search-box,
  #orderView #reloadButton {
    width: auto;
    min-width: 0;
  }

  #orderView .order-search-main > select {
    padding: 0 7px;
    font-size: 12px;
  }

  #orderView #reloadButton {
    min-width: 58px;
    padding: 0 8px;
  }

  #orderView .switches {
    overflow-x: auto;
  }

  #orderView .order-count-tools {
    min-width: max-content;
  }

  .order-flow-primary-group > header {
    align-items: flex-start;
  }

  .order-flow-primary-group > header > div {
    display: grid;
    gap: 2px;
  }

  #orderView .order-flow-primary-track,
  #orderView .order-flow-primary-track.order-flow-live-queue {
    grid-template-columns: 1fr;
  }

  .order-flow-filter.order-flow-queue,
  .order-flow-filter.order-flow-queue:nth-child(5n) {
    border: 1px solid #cbdbe6;
    border-bottom-color: #a8c0d1;
  }

  body > .customer-task-quick-open {
    width: 46px !important;
    min-height: 126px !important;
    padding: 10px 5px 12px 7px !important;
  }

  body > .customer-task-quick-open > span {
    width: 29px !important;
    height: 29px !important;
    font-size: 15px !important;
  }

  body > .customer-task-quick-open > small {
    font-size: 11px !important;
  }

  .employee-detail-sticky-summary {
    top: 58px;
  }

  .employee-detail-summary-grid {
    grid-template-columns: minmax(0, 1fr) 78px 78px;
  }

  .employee-detail-summary-grid > div {
    padding: 8px;
  }

  .employee-summary-route strong {
    gap: 5px;
    font-size: 12px;
  }

  .employee-detail-tab {
    min-height: 48px;
    padding: 0 6px;
  }

  .employee-detail-tab span {
    display: none;
  }

  .employee-detail-panel .legacy-order-board {
    overflow-x: auto;
  }
}

/* Keep the four order-detail zones visible as one compact workbench rail on phones. */
@media (max-width: 820px) {
  #detailPageBody.detail-page-card {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  #detailPageBody .employee-detail-sticky-summary,
  #detailPageBody .employee-detail-workspace {
    min-width: 0;
    width: 100%;
  }

  #detailPageBody .employee-detail-summary-grid {
    grid-template-columns: minmax(0, 1fr) 78px 78px;
  }

  #detailPageBody .employee-detail-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 56px;
    padding: 3px 4px 0;
  }

  #detailPageBody .employee-detail-tab {
    min-height: 52px;
    grid-template-columns: minmax(0, 1fr);
    padding: 5px 6px 3px;
    text-align: center;
  }

  #detailPageBody .employee-detail-tab:not(:last-child)::after {
    top: 11px;
    bottom: 10px;
  }

  #detailPageBody .employee-detail-tab .employee-detail-tab-index,
  #detailPageBody .employee-detail-tab .employee-detail-tab-status,
  #detailPageBody .employee-detail-tab .employee-detail-tab-copy small {
    display: none;
  }

  #detailPageBody .employee-detail-tab .employee-detail-tab-copy {
    display: block;
  }

  #detailPageBody .employee-detail-tab .employee-detail-tab-copy strong {
    white-space: normal;
    font-size: 12px;
    line-height: 1.25;
  }

}

/* Unified module workbench navigation: this layer only standardizes the way
   existing child modules are presented.  It deliberately does not alter a
   module's routes, permissions, filters or data-loading behaviour. */
.module-workbench-tabs {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  margin: 12px 0;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid #c7d8e7;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #edf4f9 100%);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(32, 73, 109, .06);
  scrollbar-width: thin;
}

.module-workbench-tabs:empty {
  display: none;
}

.module-view-tabs > button {
  display: flex;
  align-items: center;
  flex: 1 0 196px;
  min-width: 196px;
  min-height: 54px;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #b9ccdc;
  border-bottom-color: #99b2c7;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff 0%, #f3f8fc 100%);
  color: #244d70;
  text-align: left;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(102, 139, 169, .2), 0 5px 10px rgba(27, 72, 108, .06);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.module-view-tabs > button:hover {
  border-color: #75a6c9;
  background: linear-gradient(180deg, #fff 0%, #e8f4fb 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(89, 138, 173, .24), 0 8px 15px rgba(27, 72, 108, .12);
}

.module-view-tabs > button.active {
  border-color: #2b709f;
  border-bottom-color: #185778;
  background: linear-gradient(135deg, #4e95c8 0%, #2f79b0 56%, #236893 100%);
  color: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .38), 0 2px 0 #185778, 0 8px 15px rgba(31, 92, 136, .24);
}

.module-view-tabs > button.is-refreshing {
  pointer-events: none;
  opacity: .78;
}

.module-workbench-tab-icon {
  display: inline-grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #dcecf8;
  color: #21638e;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .04em;
}

.module-view-tabs > button.active .module-workbench-tab-icon {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

.module-workbench-tab-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.module-workbench-tab-copy strong {
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
}

.module-workbench-tab-copy small {
  overflow: hidden;
  color: #6b849a;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-view-tabs > button.active .module-workbench-tab-copy small {
  color: rgba(255, 255, 255, .8);
}

.module-workbench-tab-count {
  display: inline-grid;
  min-width: 24px;
  height: 22px;
  place-items: center;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: #e15743;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  box-shadow: 0 2px 5px rgba(169, 48, 32, .24);
}

.module-workbench-menu {
  border-color: #c7d8e7;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #eef5fa 100%);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(32, 73, 109, .06);
}

.module-workbench-menu-group + .module-workbench-menu-group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #d9e5ee;
}

.module-workbench-menu-group > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 2px 7px;
}

.module-workbench-menu-group > header strong {
  color: #2b597a;
  font-size: 12px;
  font-weight: 950;
}

.module-workbench-menu-group > header small {
  color: #89a3b7;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
}

.module-workbench-menu-items {
  display: grid;
  gap: 7px;
}

.module-workbench-menu .base-module-button,
.module-workbench-menu.freight-menu button {
  width: 100%;
  min-height: 53px;
  margin: 0;
  border-color: #bdcfde;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff 0%, #f4f8fb 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(101, 139, 169, .2);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.module-workbench-menu .base-module-button:hover,
.module-workbench-menu.freight-menu button:hover {
  border-color: #78a8c9;
  background: linear-gradient(180deg, #fff 0%, #eaf5fb 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(29, 78, 115, .1);
}

.module-workbench-menu .base-module-button.active,
.module-workbench-menu.freight-menu button.active {
  border-color: #2c73a3;
  background: linear-gradient(135deg, #5097cb 0%, #2f79b0 58%, #236893 100%);
  color: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .36), 0 2px 0 #185778, 0 6px 12px rgba(31, 92, 136, .2);
}

.module-workbench-menu .base-module-button.disabled {
  background: #f4f6f7;
  color: #8396a7;
}

.module-workbench-menu .base-module-button .base-module-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #dcecf8;
  color: #24638e;
}

.module-workbench-menu .base-module-button.active .base-module-icon {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

.module-workbench-menu .base-module-button .base-module-copy {
  display: grid;
  min-width: 0;
  width: auto;
  height: auto;
  place-items: initial;
  border-radius: 0;
  background: transparent;
  color: inherit;
  gap: 2px;
}

.base-module-copy strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.base-module-copy small {
  overflow: hidden;
  color: #708ba1;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.base-module-button.active .base-module-copy small {
  color: rgba(255, 255, 255, .8);
}

.base-module-button i {
  margin-left: auto;
  color: #6d91ad;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.base-module-button.active i {
  color: rgba(255, 255, 255, .86);
}

.module-workbench-menu.freight-menu {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 10px;
}

.module-workbench-menu.freight-menu button {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 950;
}

.module-workbench-menu.freight-menu button::after {
  overflow: hidden;
  color: #708ba1;
  content: attr(data-module-description);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-workbench-menu.freight-menu button.active::after {
  color: rgba(255, 255, 255, .8);
}

/* Existing concise tab sets keep their domain-specific behaviour while gaining
   the same title-and-purpose rhythm as the new workbench tab sets. */
.cp-tabs.module-workbench-tabs,
.client-crm-tabs.module-workbench-tabs,
.system-management-tabs.module-workbench-tabs {
  align-items: stretch;
}

.cp-tabs.module-workbench-tabs button[data-module-description],
.client-crm-tabs.module-workbench-tabs button[data-module-description],
.system-management-tabs.module-workbench-tabs button[data-module-description] {
  display: grid;
  align-content: center;
  min-height: 54px;
  gap: 3px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.cp-tabs.module-workbench-tabs button[data-module-description]::after,
.client-crm-tabs.module-workbench-tabs button[data-module-description]::after,
.system-management-tabs.module-workbench-tabs button[data-module-description]::after {
  overflow: hidden;
  color: #708ba1;
  content: attr(data-module-description);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-tabs.module-workbench-tabs button.active[data-module-description]::after,
.client-crm-tabs.module-workbench-tabs button.active[data-module-description]::after,
.system-management-tabs.module-workbench-tabs button.active[data-module-description]::after {
  color: rgba(255, 255, 255, .78);
}

@media (max-width: 900px) {
  .module-workbench-tabs {
    margin: 10px 0;
  }

  .module-view-tabs > button {
    flex-basis: 176px;
    min-width: 176px;
  }

  .base-data-layout,
  .freight-layout {
    grid-template-columns: 1fr;
  }

  .module-workbench-menu.base-module-list {
    max-height: 310px;
  }
}

/* Final secondary-navigation contract: the two lines deliberately mirror the
   expanded primary navigation (13px title + 10px supporting text). */
.module-workbench-tab-copy strong,
.module-workbench-menu .base-module-button .base-module-copy strong {
  font-size: 13px;
}

.module-workbench-tab-copy small,
.module-workbench-menu .base-module-button .base-module-copy small,
.module-workbench-menu.freight-menu button::after,
.cp-tabs.module-workbench-tabs button[data-module-description]::after,
.client-crm-tabs.module-workbench-tabs button[data-module-description]::after,
.system-management-tabs.module-workbench-tabs button[data-module-description]::after {
  font-size: 10px;
}

.module-workbench-menu.freight-menu button {
  font-size: 13px;
}

.factory-collection-tabs.module-workbench-tabs .factory-collection-tab-copy b {
  font-size: 13px;
}

.factory-collection-tabs.module-workbench-tabs .factory-collection-tab-copy small {
  font-size: 10px;
}

.cp-tabs.module-workbench-tabs button[data-module-description],
.client-crm-tabs.module-workbench-tabs button[data-module-description],
.system-management-tabs.module-workbench-tabs button[data-module-description] {
  font-size: 13px;
}

.rating-page .rating-tabs button > span {
  font-size: 13px;
}

.rating-page .rating-tabs button small {
  font-size: 10px;
}

/* An inactive tab is always dark on hover; an active tab stays blue even when
   the pointer is on it.  This prevents inherited legacy hover rules from
   producing a white-on-white state. */
.module-workbench-tabs > button:hover:not(.active) {
  color: #244d70;
}

.module-workbench-tabs > button.active,
.module-workbench-tabs > button.active:hover {
  border-color: #2b709f;
  border-bottom-color: #185778;
  background: linear-gradient(135deg, #4e95c8 0%, #2f79b0 56%, #236893 100%);
  color: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .38), 0 2px 0 #185778, 0 8px 15px rgba(31, 92, 136, .24);
}

.rating-page .rating-tabs button.active,
.rating-page .rating-tabs button.active:hover {
  border-color: #2b709f;
  border-bottom-color: #185778;
  background: linear-gradient(135deg, #4e95c8 0%, #2f79b0 56%, #236893 100%);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(16, 65, 99, .36);
  box-shadow: inset 0 1px rgba(255, 255, 255, .38), 0 2px 0 #185778, 0 8px 15px rgba(31, 92, 136, .24);
  transform: none;
}

.rating-page .rating-tabs button.active > b,
.rating-page .rating-tabs button.active > span,
.rating-page .rating-tabs button.active small {
  color: rgba(255, 255, 255, .88);
}

.rating-page .rating-tabs button:hover:not(.active) {
  border-color: #75a6c9;
  background: linear-gradient(180deg, #fff 0%, #e8f4fb 100%);
  color: #244d70;
}

/* Compact navigation: only the menu name is shown in both primary and
   secondary navigation.  Group labels and status counters stay available. */
.workspace.nav-expanded .nav-button {
  min-height: 42px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.workspace.nav-expanded .nav-copy,
.module-workbench-tab-copy,
.module-workbench-menu .base-module-button .base-module-copy,
.factory-collection-tabs.module-workbench-tabs .factory-collection-tab-copy {
  display: block;
}

.workspace.nav-expanded .nav-meta,
.module-workbench-tab-copy small,
.module-workbench-menu .base-module-button .base-module-copy small,
.module-workbench-menu.freight-menu button::after,
.factory-collection-tabs.module-workbench-tabs .factory-collection-tab-copy small,
.cp-tabs.module-workbench-tabs button::after,
.client-crm-tabs.module-workbench-tabs button::after,
.system-management-tabs.module-workbench-tabs button::after,
.rating-page .rating-tabs button small {
  display: none;
  content: none;
}

.module-view-tabs > button,
.module-workbench-menu .base-module-button,
.module-workbench-menu.freight-menu button,
.cp-tabs.module-workbench-tabs button,
.client-crm-tabs.module-workbench-tabs button,
.system-management-tabs.module-workbench-tabs button,
.factory-collection-tabs.module-workbench-tabs button,
.rating-page .rating-tabs button,
.rating-page .rating-tabs button:last-child {
  min-height: 42px;
}

/* Selected main-menu entries never lose their blue state on hover. */
.nav-button.active:hover:not(:disabled) {
  z-index: 1;
  border-color: #1d618f;
  background: linear-gradient(135deg, #1c5f8c, #2f7dac);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 7px 16px rgba(28, 82, 120, .22);
}

.nav-button.active:hover:not(:disabled) .nav-icon {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

/* Legacy comprehensive-rating rules used !important pale backgrounds.  Make
   this entry obey the same selected blue state as every other main menu item. */
.comprehensive-rating-entry.active,
.comprehensive-rating-entry.active:hover:not(:disabled) {
  border-color: #1d618f !important;
  background: linear-gradient(135deg, #1c5f8c, #2f7dac) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 7px 16px rgba(28, 82, 120, .22) !important;
}

.comprehensive-rating-entry.active .nav-icon,
.comprehensive-rating-entry.active:hover:not(:disabled) .nav-icon,
.comprehensive-rating-entry.active .nav-label,
.comprehensive-rating-entry.active:hover:not(:disabled) .nav-label {
  color: #fff !important;
}
:root { --order-review-border: #d5e2ed; }
.edit-backdrop.order-create-review-backdrop { z-index: 1600; padding: 12px; }
.edit-dialog.order-create-review-dialog { width: min(960px, 96vw); max-height: 92dvh; display: flex; flex-direction: column; }
.order-create-review-dialog > .track-head, .order-create-review-dialog > .edit-footer { flex-shrink: 0; }
.order-create-review-body { overflow-y: auto; padding: 24px; min-height: 0; background: linear-gradient(135deg, #eef4f8, #f9fbfd 60%, #f4f1e9); }
.order-review-notice { background: linear-gradient(110deg, #fff5dc, #fffcf4); border: 1px solid #e4cf9e; border-left: 4px solid var(--gold); border-radius: 8px; box-shadow: inset 0 1px 0 #fff, 0 3px 10px #6953210a; padding: 14px 18px; color: #724a12; }
.order-review-notice p { margin: 8px 0 0; }
.order-review-section { border: 1px solid #bdcfdf; border-radius: 10px; margin-top: 20px; overflow: hidden; background: #fff; box-shadow: inset 0 1px 0 #fff, 0 4px 14px #234b7e0b; }
.order-review-section h4 { margin: 0; padding: 13px 18px; background: linear-gradient(110deg, #e2eef6, #f4f8fb); color: var(--blue-dark); border-left: 4px solid #3980ad; letter-spacing: .04em; box-shadow: inset 0 1px 0 #fff; }
.order-review-section dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
.order-review-field { padding: 14px 18px; border-top: 1px solid var(--order-review-border); min-width: 0; background: linear-gradient(180deg, #fff, #f9fbfd); }
.order-review-field:nth-child(even) { border-left: 1px solid var(--order-review-border); }
.order-review-field dt { color: #64768a; font-size: 12px; font-weight: 400; letter-spacing: .035em; margin-bottom: 7px; line-height: 1.5; }
.order-review-field dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #243c50; font-size: 15px; font-weight: 400; line-height: 1.8; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.order-create-review-dialog > .track-head h3 { font-size: 23px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; text-shadow: none; }
.order-create-review-dialog > .track-head > div > span { font-size: 11px; font-weight: 400; letter-spacing: .12em; color: #657487; }
.order-create-review-dialog .order-review-section h4 { font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .03em; }
.order-review-notice strong { font-size: 14px; font-weight: 700; line-height: 1.7; }
.order-review-notice p { font-size: 12px; font-weight: 400; line-height: 1.7; }
.order-review-field.is-date dd { font-size: 16px; font-weight: 700; color: #234b7e; }
.order-review-field.is-empty dd { color: #7a8794; font-size: 13px; font-weight: 400; }
.order-create-review-dialog > .edit-footer button { font-size: 14px; font-weight: 400; letter-spacing: .02em; }
.order-create-review-dialog > .edit-footer button.primary { font-weight: 700; }
.order-review-field.is-warning { background: #fff0f0; }
.order-review-field.is-warning dt, .order-review-field.is-warning dd { color: #bc222b; font-weight: 700; }
@media (max-width: 640px) { .order-review-section dl { grid-template-columns: 1fr; } .order-create-review-body { padding: 12px; } .order-review-field:nth-child(even) { border-left: 0; } }

/* Compact review: one cargo ledger, clear totals, no nested decorative cards. */
.edit-dialog.order-create-review-dialog { width: min(1160px, 96vw); max-height: 90dvh; }
.order-create-review-dialog > .track-head { min-height: 62px; padding: 10px 22px; background: #fff; box-shadow: none; }
.order-create-review-body { padding: 14px 22px; background: #fff; }
.order-review-notice { padding: 9px 13px; background: #fff9eb; box-shadow: none; }
.order-review-section { margin-top: 14px; border: 0; border-top: 1px solid #dbe3eb; border-radius: 0; box-shadow: none; }
.order-create-review-dialog .order-review-section h4 { padding: 10px 0 6px; border: 0; background: none; box-shadow: none; font-size: 14px; }
.order-review-section h4 small { margin-left: 12px; color: #64768a; font-size: 12px; font-weight: 400; }
.order-review-section dl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 20px; }
.order-review-field { padding: 7px 0; border: 0; background: none; }
.order-review-field:nth-child(even) { border-left: 0; }
.order-review-field dt { margin-bottom: 3px; }
.order-review-field dd { font-size: 14px; line-height: 1.6; }
.order-review-section:last-child .order-review-field:last-child { grid-column: 1 / -1; }
.order-review-section .order-review-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); background: #f2f6fa; padding: 8px 16px; border-radius: 6px; margin: 4px 0 8px; }
.order-review-totals dd { font-size: 20px; font-weight: 700; color: #234b7e; }
.order-review-totals dd small { font-size: 11px; font-weight: 400; color: #657487; margin-left: 4px; }
.order-entry-cargo-total { padding: 12px 16px; margin-top: 10px; background: #f2f6fa; border: 1px solid #dbe5ee; border-radius: 6px; }
.order-entry-cargo-total[hidden] { display: none; }
.order-entry-cargo-total > strong { font-size: 12px; color: #526c82; }
.order-entry-cargo-total dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 4px 0 0; }
@media (max-width: 640px) { .order-entry-cargo-total dl { grid-template-columns: 1fr; } }
.order-review-factory-head, .order-review-factory-line { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(240px, 1.6fr) minmax(0, 1.8fr); gap: 18px; padding: 10px 4px; }
.order-review-factory-head { color: #64768a; font-size: 12px; padding-bottom: 6px; }
.order-review-factory-line { border-top: 1px solid #e7edf2; align-items: baseline; font-size: 14px; line-height: 1.65; }
.order-review-factory-line > div { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.order-review-factory-name { display: flex; gap: 10px; color: #234b7e; }
.order-review-factory-name > span { color: #8394a6; font-size: 11px; padding-top: 3px; }
.order-review-factory-cargo { font-variant-numeric: tabular-nums; }
.order-review-field.is-warning { background: #fff1f1; border-radius: 4px; padding-left: 8px; }
.order-create-review-dialog > .edit-footer { padding: 10px 22px; }
@media (max-width: 900px) { .order-review-section dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .order-review-factory-head, .order-review-factory-line { grid-template-columns: minmax(100px, 1fr) minmax(180px, 1.5fr) minmax(0, 1.5fr); gap: 12px; } }
@media (max-width: 640px) { .order-create-review-body { padding: 12px; } .order-review-section dl, .order-review-section .order-review-totals { grid-template-columns: 1fr; } .order-review-factory-head { display: none; } .order-review-factory-line { grid-template-columns: 1fr; gap: 5px; padding: 12px 0; } .order-review-factory-goods::before { content: "货名："; color: #64768a; } }
.factory-fee-invoice-customs-row td { background: #fff3f1; }
.factory-fee-invoice-customs-row [data-invoice-name],
.factory-fee-invoice-customs-row [data-invoice-price] { border-color: #c96b65; color: #92392f; }
.factory-fee-invoice-customs-label { display: block; margin-top: 4px; color: #92392f; font-size: 12px; }
/* Keep full vessel names and their leg-specific action separate on both screen sizes. */
.old-detail-table .old-ship-name,
.old-detail-table .old-leg-ship-name {
  white-space: normal;
  overflow-wrap: anywhere;
}
.ship-tracking-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}
.ship-tracking-layout > .ship-tracking-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.old-detail-table .ship-tracking-layout > button {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .old-detail-table .ship-tracking-layout > button { min-height: 36px; }
}
/* The selected operational owner is separate from the authenticated account chip. */
.operation-workspace-control {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  font-size:12px;
  color:#365777;
}
.operation-workspace-control > span { white-space:nowrap; }
.operation-workspace-control select {
  min-height:36px;
  max-width:230px;
  padding:6px 30px 6px 10px;
  border:1px solid #a9bfd4;
  border-radius:8px;
  background:#fff;
  color:#173b60;
  font:inherit;
  font-weight:600;
  text-overflow:ellipsis;
}
.operation-workspace-error {
  display:flex;
  align-items:center;
  gap:10px;
  max-width:min(520px, 100%);
  padding:8px 10px;
  border:1px solid #e6b4ad;
  border-radius:9px;
  background:#fff4f2;
  color:#9d2f24;
  font-size:12px;
  font-weight:650;
}
.operation-workspace-error span { min-width:0; }
.operation-workspace-error button {
  flex:0 0 auto;
  min-height:32px;
  padding:5px 10px;
  border:1px solid #c96f63;
  border-radius:7px;
  background:#fff;
  color:#8f2c23;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
@media(max-width:600px) {
  .operation-workspace-control { flex-wrap:wrap; gap:4px; }
  .operation-workspace-control select { max-width:min(180px, 54vw); }
  .operation-workspace-error { align-items:flex-start; flex-direction:column; }
}

/* Desktop workbench density contract. Phone navigation keeps its separate
   bottom-menu/drawer flow in mobile-work-mode.css. */
@media (min-width: 701px) {
  .workspace {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
  }

  .workspace.nav-expanded {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 10px;
  }

  .workspace.nav-expanded .sidebar {
    padding: 9px 8px;
  }

  .workspace.nav-expanded .business-navigation {
    gap: 9px;
  }

  .workspace.nav-expanded .nav-group {
    gap: 3px;
  }

  .workspace.nav-expanded .nav-group + .nav-group {
    padding-top: 9px;
  }

  .workspace.nav-expanded .nav-group > h2 {
    margin: 0 3px 2px;
    font-size: 11px;
    line-height: 1.2;
  }

  .workspace.nav-expanded .nav-group > h2 small {
    font-size: 7px;
  }

  .workspace.nav-expanded .nav-button {
    min-height: 34px;
    gap: 7px;
    padding: 4px 7px;
    border-radius: 6px;
  }

  .workspace.nav-expanded .nav-button .nav-icon {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 11px;
  }

  .workspace.nav-expanded .nav-label {
    font-size: 12px;
    line-height: 1.15;
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .nav-toggle { display: none; }
}

/* Order centre keeps all semantic states and actions, but returns to the
   compact ledger rhythm used by the legacy system. */
#orderView .legacy-table-wrap {
  box-shadow: none;
}

#orderView .legacy-order-table {
  min-width: 1400px;
  font-family: var(--chamshine-ui-font-sc);
  font-size: 13px;
}

#orderView .legacy-order-table th {
  height: 32px;
  padding: 0 7px;
  font-size: 13px;
  font-weight: 900;
}

#orderView .legacy-order-table tbody tr.order-row {
  background: #fff;
}

#orderView .legacy-order-table tbody tr.order-row:nth-child(even) {
  background: #f3f7fa;
}

#orderView .legacy-order-table tbody tr.order-row > td {
  background: transparent;
}

#orderView .legacy-order-table .thdxxdiv {
  min-height: 44px;
  padding: 7px;
  font-size: 13px;
  line-height: 1.35;
}

#orderView .legacy-order-table .bill-no-link,
#orderView .legacy-order-table .factory-primary,
#orderView .legacy-order-table .port-chip,
#orderView .legacy-order-table .list-value-chip,
#orderView .legacy-order-table .operator-cell {
  font-size: 13px;
}

#orderView .legacy-order-table .bill-no-link {
  font-weight: 800;
}

#orderView .legacy-order-table .factory-primary,
#orderView .legacy-order-table .port-chip,
#orderView .legacy-order-table .list-value-chip,
#orderView .legacy-order-table .date-text {
  font-weight: 700;
}

#orderView .legacy-order-table .operator-cell {
  font-weight: 900;
}

#orderView .legacy-order-table .factory-primary,
#orderView .legacy-order-table .port-chip,
#orderView .legacy-order-table .list-value-chip,
#orderView .legacy-order-table .operator-cell {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  line-height: inherit;
}

#orderView .legacy-order-table .order-index-td .thdxxdiv {
  padding: 7px 5px;
}

#orderView .legacy-order-table .order-index-td span {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 12px;
  font-weight: 400;
}

#orderView .legacy-order-table .order-event-cell {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

#orderView .legacy-order-table .order-event-cell.event-alert {
  font-weight: 900;
}

/* Desktop order-centre density: remove the redundant summary bands while
   preserving every actionable queue/range button and its selected state. */
@media (min-width: 821px) {
  #orderView .order-flow-primary-track.order-flow-live-queue {
    display: grid;
    grid-template-columns: repeat(var(--order-flow-columns, 10), minmax(104px, 1fr));
    gap: 3px;
    overflow-x: auto;
    padding: 8px 10px 10px;
  }

  #orderView .order-flow-filter.order-flow-queue {
    width: 100%;
    min-width: 0;
    min-height: 39px;
    grid-template-columns: 13px minmax(0, auto) auto;
    gap: 5px;
    padding: 3px 7px 3px 5px;
  }

  #orderView .order-flow-filter.order-flow-queue .order-flow-label,
  #orderView .order-flow-filter.order-flow-finance .order-flow-label,
  #orderView .order-flow-filter.order-flow-cargo .order-flow-label,
  #orderView .order-flow-filter.order-flow-service .order-flow-label,
  #orderView .order-flow-filter.order-flow-other .order-flow-label {
    font-size: 13px;
  }

  #orderView .order-flow-filter.order-flow-queue .order-flow-count,
  #orderView .order-flow-filter.order-flow-finance .order-flow-count,
  #orderView .order-flow-filter.order-flow-cargo .order-flow-count,
  #orderView .order-flow-filter.order-flow-service .order-flow-count,
  #orderView .order-flow-filter.order-flow-other .order-flow-count {
    min-width: 22px;
    height: 24px;
    padding: 0 3px;
    font-size: 13px;
    line-height: 22px;
  }

  #orderView .order-flow-aux-group {
    gap: 4px;
    padding: 7px 10px 8px;
  }

  #orderView .order-flow-aux-group > header {
    min-height: 17px;
  }

  #orderView .order-flow-filter.order-flow-finance,
  #orderView .order-flow-filter.order-flow-cargo,
  #orderView .order-flow-filter.order-flow-service,
  #orderView .order-flow-filter.order-flow-other {
    min-width: 124px;
    min-height: 37px;
    gap: 6px;
    padding: 4px 8px 4px 10px;
  }

  #orderView .legacy-order-table th {
    height: 29px;
  }

  #orderView .legacy-order-table .thdxxdiv {
    min-height: 34px;
    padding: 4px 6px;
    line-height: 1.25;
  }

  #orderView .legacy-order-table .order-index-td .thdxxdiv {
    padding: 4px;
  }
}
.consignee-operator-access {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #cbd9e8;
  border-radius: 14px;
  background: linear-gradient(145deg, #f8fbff 0%, #eef5fb 100%);
}

.consignee-operator-access-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.consignee-operator-access-head > div {
  display: grid;
  gap: 4px;
}

.consignee-operator-access-head span {
  color: #193b5d;
  font-size: 14px;
  font-weight: 800;
}

.consignee-operator-access-head small {
  color: #61768c;
  line-height: 1.55;
}

.consignee-operator-access-head b {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 999px;
  background: #dcecff;
  color: #245984;
  font-size: 12px;
}

.consignee-operator-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 30px;
  align-items: center;
}

.consignee-operator-chips em {
  color: #8392a2;
  font-size: 12px;
  font-style: normal;
}

.consignee-operator-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid #a9c9e6;
  border-radius: 999px;
  background: #fff;
  color: #24557d;
  font-size: 12px;
  font-weight: 750;
}

.consignee-operator-chip.inactive {
  border-color: #d7c5c5;
  color: #8d5d5d;
  background: #fff8f8;
}

.consignee-operator-search {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #b8cadc;
  border-radius: 10px;
  background: #fff;
}

.consignee-operator-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding: 2px;
}

.consignee-operator-options label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #d4e0eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.consignee-operator-options label:hover {
  border-color: #78a8d1;
  box-shadow: 0 3px 12px rgba(33, 78, 116, .08);
}

.consignee-operator-options label.inactive {
  border-style: dashed;
  background: #fffafa;
}

.consignee-operator-options label > span {
  display: grid;
  min-width: 0;
}

.consignee-operator-options strong,
.consignee-operator-options small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consignee-operator-options strong {
  color: #233f59;
  font-size: 13px;
}

.consignee-operator-options small {
  color: #8190a0;
  font-size: 11px;
}

.consignee-operator-options .hidden {
  display: none;
}

/* Factory debt mail uses the shared confirmation shell; keep the footer reachable on mobile. */
.factory-debt-mail-confirm .mail-confirm-card {
  width: min(1060px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
}
.factory-debt-mail-confirm .mail-confirm-body { overflow: auto; min-height: 0; }
.factory-debt-mail-confirm .mail-confirm-head,
.factory-debt-mail-confirm .mail-confirm-actions { flex-shrink: 0; }
.factory-debt-mail-confirm details { border-top: 1px solid #d5e0ea; padding: 12px 0; }
.factory-debt-mail-confirm summary { cursor: pointer; font-weight: 700; overflow-wrap: anywhere; }
.factory-debt-mail-confirm [data-debt-error] { color: #a83434; }
.ship-schedule-terminal-actions { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.ship-schedule-terminal-actions label { display: grid; gap: 5px; color: #536b80; font-size: 12px; }
.ship-schedule-terminal-actions select { min-height: 34px; padding: 5px 10px; border: 1px solid #b9cfdf; background: #fff; border-radius: 4px; }
.ship-schedule-terminal-results { margin-top: 18px; color: #294355; }
.ship-schedule-terminal-results h4 { margin: 0 0 8px; font-size: 15px; }
.ship-schedule-terminal-results > p { font-size: 12px; color: #61798b; line-height: 1.65; }
.ship-schedule-terminal-plan { border: 1px solid #cbdce7; border-radius: 6px; margin-top: 12px; padding: 14px; background: #fff; }
.ship-schedule-terminal-plan header { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.terminal-match { color: #247156; }
.terminal-check { color: #966311; }
.ship-schedule-terminal-summary-value .terminal-date-warning,
.ship-schedule-terminal-plan .terminal-date-warning {
  color: #c62828;
  font-weight: 700;
}
.ship-schedule-terminal-times, .ship-schedule-terminal-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.ship-schedule-terminal-times dt, .ship-schedule-terminal-fields dt { color: #6c8191; font-size: 12px; }
.ship-schedule-terminal-times dd, .ship-schedule-terminal-fields dd { margin: 6px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ship-schedule-terminal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ship-schedule-terminal-fields dt small { display: block; margin-top: 3px; }
.ship-schedule-terminal-plan summary { cursor: pointer; font-size: 12px; color: #426d8c; }
.ship-schedule-reference-table .ship-schedule-v2-row td { padding-top: 5px; padding-bottom: 5px; line-height: 1.45; vertical-align: middle; font-variant-numeric: tabular-nums; }
.ship-schedule-reference-table .ship-schedule-v2-row th { vertical-align: top; }
.ship-schedule-v2-leg { display: block; margin-bottom: 3px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .ship-schedule-terminal-times, .ship-schedule-terminal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ship-schedule-reference-intro:has(.ship-schedule-terminal-actions) { flex-wrap: wrap; }
}
/* Container evidence uses the existing schedule editor, never a second modal. */
.container-warning.dump, .container-alert.dump { color: #b42318; background: #fff1f0; border: 1px solid #f3b2ad; }
.container-warning.risk, .container-alert.risk { color: #9a5800; background: #fff8eb; border: 1px solid #e9c888; }
.container-warning { min-width: 32px; min-height: 32px; font-size: 18px; }
.container-alert { padding: 8px 12px; border-radius: 4px; font-weight: 600; }
.container-tracking-detail { margin: 12px 0; overflow-x: auto; }
.container-tracking-detail table { min-width: 560px; width: 100%; }
.ship-schedule-reference-table .container-reference-cell { padding: 12px; }
.container-reference-details { min-width: 0; color: #25384a; }
.container-reference-section { border-top: 1px solid #dce5eb; margin-top: 12px; }
.ship-schedule-reference-table .container-reference-section > summary { padding: 12px 0; font-size: 14px; font-weight: 650; color: #245c82; cursor: pointer; }
.container-reference-section > summary:hover { color: #1682b7; }
.container-reference-section-body { padding-bottom: 8px; min-width: 0; }
.ship-schedule-reference-table .container-reference-note { color: #617487; font-size: 12px; line-height: 1.8; margin: 10px 0; }
.ship-schedule-reference-table .container-reference-empty { color: #87652e; margin: 8px 0; font-size: 13px; }
.container-tracking-detail h4 { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 8px; font-size: 14px; }
.container-tracking-detail h4 span { color: #617487; font-weight: 500; }
.container-reference-scroll { width: 100%; overflow-x: auto; }
.container-reference-data { width: 100%; min-width: 740px; table-layout: fixed; border-collapse: collapse; }
.ship-schedule-reference-table .container-reference-data th { position: static; background: #f0f5f8; color: #435d70; }
.ship-schedule-reference-table .container-reference-data td { font-size: 12px; line-height: 1.65; }
.container-reference-data small { font-size: 11px; }
.container-retained-event { background: #faf8f1; }
.container-field-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.ship-schedule-reference-table .container-field-table th { position: static; width: 42%; background: #f7f9fb; font-weight: 500; }
.ship-schedule-reference-table .container-field-table td, .ship-schedule-reference-table .container-field-table th { white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
.ship-schedule-reference-table .container-field-table small { font-size: 11px; color: #718295; font-weight: 400; }
.shipment-progress-current { padding: 18px 0; border-bottom: 1px solid #d8e2eb; }
.shipment-progress-current > span { display:block; color:#677782; font-size:12px; }
.ship-schedule-reference-table .container-reference-cell .shipment-progress-current > strong { display:block; margin:8px 0; font-size:22px; color:#234d65; line-height:1.4; }
.ship-schedule-reference-table .container-reference-cell .container-alert > strong { display:block; font-size:14px; font-weight:700; color:inherit; }
.shipment-progress-current p,.shipment-progress-timeline p { margin:6px 0; color:#586976; overflow-wrap:anywhere; }
.shipment-progress-warning { padding:12px; border-left:3px solid #bc653b; background:#fff7ef; color:#8c4329; margin:12px 0; }
.shipment-progress-title { font-size:14px; margin:18px 0 12px; }
.shipment-progress-timeline { list-style:none; padding:0 0 0 18px; margin:12px 0 20px; }
.shipment-progress-timeline li { position:relative; padding:0 0 20px 22px; border-left:2px solid #a5bdcf; }
.shipment-progress-timeline li:last-child { border-left-color:transparent; padding-bottom:4px; }
.shipment-progress-timeline li::before { content:""; position:absolute; left:-6px; top:4px; width:10px; height:10px; border-radius:50%; background:#377497; border:2px solid white; box-sizing:border-box; }
.shipment-progress-timeline li > div { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; }
.shipment-progress-timeline time { font-size:13px; color:#566675; font-variant-numeric:tabular-nums; }
.shipment-progress-timeline small { color:#76828c; font-size:12px; }
.shipment-progress-timeline .is-estimated { border-left-style:dashed; }
.shipment-progress-timeline .is-estimated::before { background:white; border-color:#b28053; }
.shipment-progress-timeline .is-historical { opacity:.75; }
/* Manual external-reference synchronization shares the employee confirmation surface. */
.ship-schedule-sync-button { gap: 8px; color: #245d87; }
.ship-schedule-sync-button > span { font-size: 20px; }
.schedule-sync-card { width: min(840px, calc(100vw - 40px)); max-width: 840px; max-height: calc(100dvh - 48px); display: flex; flex-direction: column; }
.schedule-sync-card .mail-confirm-body { overflow: auto; min-height: 0; }
.schedule-sync-card .mail-confirm-head, .schedule-sync-card .mail-confirm-actions { flex-shrink: 0; }
.schedule-sync-card .mail-confirm-actions { flex-wrap: wrap; }
.schedule-sync-results { width: 100%; border-collapse: collapse; font-size: 13px; }
.schedule-sync-results th, .schedule-sync-results td { padding: 12px 8px; border-bottom: 1px solid #dce5ed; text-align: left; }
.schedule-sync-results thead { background: #f2f7fb; }
.schedule-sync-results [data-sync-state="FAILED"], .schedule-sync-results [data-sync-state="PARTIAL"] { color: #ae442c; font-weight: 700; }
.schedule-sync-results [data-sync-state="RUNNING"] { color: #246ca0; font-weight: 700; }
.schedule-sync-note { color: #617588; font-size: 12px; margin-top: 16px; }
.schedule-sync-sites { margin-top: 18px; padding-top: 16px; border-top: 1px solid #dce5ed; font-size: 13px; line-height: 1.7; }
.schedule-sync-sites > strong { color: #245d87; }
.schedule-sync-sites p { margin: 6px 0; color: #617588; }
.schedule-sync-sites summary { cursor: pointer; color: #ae442c; font-weight: 700; }
.schedule-sync-sites ul { padding-left: 20px; margin: 8px 0; }
.schedule-sync-sites li { margin: 6px 0; overflow-wrap: anywhere; }
.schedule-sync-sites .schedule-sync-retry-sites { padding: 0; list-style: none; }
.schedule-sync-retry-sites > li { display: flex; align-items: start; gap: 16px; padding: 12px 0; border-bottom: 1px solid #e3eaf0; }
.schedule-sync-retry-sites > li > div { flex: 1; min-width: 0; }
.schedule-sync-retry-sites > li > div > span { display: block; color: #617588; }
.schedule-sync-retry-sites > li > div > a { margin-left: 12px; color: #286da0; font-size: 12px; }
.schedule-sync-retry-sites > li > button { position: static; flex: 0 0 104px; min-height: 34px; margin: 0; }
.schedule-sync-retry-sites > li > button:disabled { opacity: .5; filter: grayscale(1); cursor: not-allowed; transform: none; box-shadow: none; }

/* Order tracking only: readable shipment facts without changing schedule management. */
.order-tracking-container-overview{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;margin-bottom:16px;color:#334155;font-size:13px}
.order-tracking-container-overview h4{margin:0 0 8px;font-size:12px;font-weight:500;color:#64748b}
.order-tracking-container-route{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap;overflow-wrap:anywhere}
.order-tracking-container-route strong{font-size:15px;font-weight:600;color:#243e58}
.order-tracking-container-route span{font-size:13px;color:#334155}
.order-tracking-container-overview dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px;margin:10px 0}
.order-tracking-container-overview dl>div{display:flex;gap:10px;min-width:0}
.order-tracking-container-overview dt{min-width:52px}
.order-tracking-container-overview dt{font-size:13px;color:#64748b;flex-shrink:0;line-height:1.6}
.order-tracking-container-overview dd{margin:0;font-size:13px;font-weight:400;color:#334155;overflow-wrap:anywhere;line-height:1.6;min-width:0}
.order-tracking-container-boxes summary{cursor:pointer;color:#476780;font-size:13px;padding:3px 0}
.order-tracking-container-boxes ul{margin:6px 0;padding-left:20px;line-height:1.7;overflow-wrap:anywhere}
.order-tracking-container-overview footer{display:flex;flex-wrap:wrap;gap:3px 16px;margin-top:9px;font-size:12px;color:#64748b;line-height:1.5;overflow-wrap:anywhere}
@media(max-width:600px){.order-tracking-container-overview{padding:10px 12px}.order-tracking-container-overview dl{grid-template-columns:1fr}}


.ship-schedule-future-row > td{vertical-align:middle!important}
.ship-schedule-plan-button{display:block!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#2878a6!important;padding:4px 0!important;font:inherit;font-size:13px;cursor:pointer;text-align:left}
.ship-schedule-plan-dialog{width:min(1080px,calc(100vw - 32px));max-height:85vh;padding:0;border:0;border-radius:10px;color:#213c55;box-shadow:0 18px 70px #16365555}
.ship-schedule-plan-dialog::backdrop{background:#122b4b70}
.ship-schedule-plan-dialog > header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;background:#244d74;color:white}
.ship-schedule-plan-dialog h3{margin:0;color:white;font-size:18px}
.ship-schedule-plan-body{padding:18px 22px;overflow:auto;max-height:calc(85vh - 74px)}
.ship-schedule-plan-body section{margin-bottom:22px;overflow-x:auto}
.ship-schedule-plan-body table{border-collapse:collapse;width:100%;min-width:650px;font-size:13px}
.ship-schedule-plan-body th,.ship-schedule-plan-body td{padding:10px;border-bottom:1px solid #d8e4ed;text-align:left}
.ship-schedule-plan-body th{background:#edf5fc}.ship-schedule-plan-body small{display:block;color:#67819b}

/* Single-order synchronization controls; schedule management is unchanged. */
.order-tracking-navigation{display:flex;align-items:center;gap:12px;background:#e9f1f7;border-bottom:1px solid #bdd0df;padding-right:16px}
.order-tracking-navigation .order-tracking-pages{flex:1;min-width:0;border-bottom:0}
.order-tracking-navigation .order-tracking-sync-all,.order-tracking-toolbar [data-tracking-refresh]{border-radius:999px!important;padding:9px 20px!important;white-space:nowrap;font-size:13px}
.order-tracking-navigation .order-tracking-sync-all{flex-shrink:0;background:#245b85;color:white;border:1px solid #245b85;cursor:pointer}
.order-tracking-sync-status{margin:0;padding:10px 20px;background:#f5f8fb;color:#475569;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.order-tracking-sync-status[hidden]{display:none}
.order-tracking-sync-all:disabled{opacity:.55;cursor:wait}
@media(max-width:600px){.order-tracking-navigation{flex-wrap:wrap;padding:0 12px 8px;gap:6px}.order-tracking-navigation .order-tracking-pages{flex-basis:100%;padding-left:0}.order-tracking-navigation .order-tracking-sync-all{margin-left:auto}}

.ship-schedule-reference-table .container-identity-unverified, .container-identity-unverified { color: #c62828; font-weight: 700; }

.order-schedule-update { color: #000; }
.order-schedule-update.recent-update { color: #bc4939; font-weight: 900; }

/* Compact delivery-agent editor: summary above fees, mail remains below. */
@media (min-width: 761px) {
  #deliveryAgentFeeModal { padding: 10px; }
  #deliveryAgentFeeModal .delivery-agent-fee-edit-dialog { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  #deliveryAgentFeeModal .track-head { min-height: 0; padding: 7px 14px; }
  #deliveryAgentFeeModal .track-head h3 { margin: 0; font-size: 19px; }
  #deliveryAgentFeeModal .track-head .eyebrow { font-size: 9px; }
  #deliveryAgentFeeModal .delivery-agent-fee-form { min-height: 0; max-height: none; gap: 8px; padding: 8px 12px; align-content: start; }
  #deliveryAgentFeeModal .daf-edit-paper { padding: 8px; }
  #deliveryAgentFeeModal .daf-import-toolbar { margin: 0; gap: 8px; }
  #deliveryAgentFeeModal .daf-import-actions button { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 10px; }
  #deliveryAgentFeeModal .daf-live-profit { padding: 3px 8px; }
  #deliveryAgentFeeModal .daf-edit-order-grid { margin: 7px 0; }
  #deliveryAgentFeeModal .daf-edit-order-grid > div { display: flex; align-items: baseline; gap: 9px; padding: 5px 9px; line-height: 1.4; }
  #deliveryAgentFeeModal .daf-edit-order-grid span { flex: 0 0 64px; font-size: 11px; }
  #deliveryAgentFeeModal .daf-edit-order-grid strong { min-width: 0; margin: 0; font-size: 13px; }
  #deliveryAgentFeeModal .daf-edit-tools { margin: 6px 0; }
  #deliveryAgentFeeModal .daf-edit-tools strong { font-size: 13px; }
  #deliveryAgentFeeModal .daf-fee-table-spacer { display: none; }
  #deliveryAgentFeeModal .daf-detail-table th { padding: 5px; line-height: 1.4; }
  #deliveryAgentFeeModal .daf-detail-table td { padding: 3px 5px; }
  #deliveryAgentFeeModal .daf-detail-table input,
  #deliveryAgentFeeModal .daf-detail-table select { height: 28px; }
  #deliveryAgentFeeModal .daf-edit-totals { flex-wrap: wrap; min-height: 20px; padding: 4px 0; gap: 5px; }
  #deliveryAgentFeeModal .daf-edit-totals div { padding: 3px 8px; }
  #deliveryAgentFeeModal .daf-edit-meta { margin-top: 4px; gap: 10px; grid-template-columns: minmax(0,1fr) 190px; }
  #deliveryAgentFeeModal .daf-edit-meta label { min-width: 0; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 7px; }
  #deliveryAgentFeeModal .daf-edit-meta input { min-width: 0; height: 30px; padding: 3px 7px; }
  #deliveryAgentFeeModal .edit-actions { padding: 8px 16px; }
  #deliveryAgentFeeModal .edit-actions button { height: 32px; }
}

/* Factory bill: preserve all sections/columns, compact only desktop vertical spacing. */
@media (min-width: 761px) {
  #factoryFeeModal .factory-fee-edit-dialog { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  #factoryFeeModal .track-head { min-height: 0; padding-top: 7px; padding-bottom: 7px; }
  #factoryFeeModal .track-head h3 { margin-top: 0; font-size: 19px; }
  #factoryFeeModal .track-head .eyebrow { font-size: 9px; }
  #factoryFeeModal .factory-fee-form { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  #factoryFeeModal .factory-fee-paper { padding-top: 5px; padding-bottom: 6px; }
  #factoryFeeModal .factory-fee-control-row { padding-top: 3px; padding-bottom: 3px; row-gap: 4px; }
  #factoryFeeModal .factory-fee-import-status:empty { display: none; }
  #factoryFeeModal .factory-fee-big-title { margin-top: 3px; margin-bottom: 3px; font-size: 16px; line-height: 1.3; }
  #factoryFeeModal .factory-fee-invoice-line { margin-bottom: 2px; }
  #factoryFeeModal .factory-fee-taxpayer-field { min-height: 28px; }
  #factoryFeeModal .factory-fee-invoice-info { min-height: 18px; line-height: 1.35; }
  #factoryFeeModal .factory-fee-invoice-info strong { overflow-wrap: anywhere; min-width: 0; }
  #factoryFeeModal .factory-fee-invoice-info > span { flex-shrink: 0; }
  #factoryFeeModal .factory-fee-meta-grid { margin-top: 3px; row-gap: 3px; }
  #factoryFeeModal .factory-fee-meta-grid > div { min-height: 28px; }
  #factoryFeeModal .factory-fee-control-row input:not([type="checkbox"]),
  #factoryFeeModal .factory-fee-control-row select,
  #factoryFeeModal .factory-fee-invoice-line select,
  #factoryFeeModal .factory-fee-meta-grid input,
  #factoryFeeModal .factory-fee-meta-grid select,
  #factoryFeeModal .factory-fee-bank-line select,
  #factoryFeeModal .factory-fee-date-line input { min-height: 28px; height: 28px; padding-top: 0; padding-bottom: 0; }
  #factoryFeeModal .factory-fee-remark { margin-top: 3px; }
  #factoryFeeModal .factory-fee-remark textarea { min-height: 30px; height: 30px; padding-top: 3px; padding-bottom: 3px; resize: vertical; }
  #factoryFeeModal .fee-detail-mobile-scroll-hint { display: none; }
  #factoryFeeModal .factory-fee-detail-edit-table th { padding-top: 3px; padding-bottom: 3px; line-height: 1.4; }
  #factoryFeeModal .factory-fee-detail-edit-table td { padding-top: 2px; padding-bottom: 2px; }
  #factoryFeeModal .factory-fee-detail-edit-table input,
  #factoryFeeModal .factory-fee-detail-edit-table select { min-height: 28px; height: 28px; }
  #factoryFeeModal .factory-fee-subtotals { row-gap: 3px; margin-top: 6px; margin-bottom: 6px; }
  #factoryFeeModal .factory-fee-subtotals strong { font-size: 14px; }
  #factoryFeeModal .factory-fee-subtotals .total strong { font-size: 16px; }
  #factoryFeeModal .factory-fee-bank-line { padding-top: 5px; }
  #factoryFeeModal .factory-fee-date-line { margin-top: 5px; }
  #factoryFeeModal .edit-actions { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  #factoryFeeModal .edit-actions button { min-height: 32px; height: 32px; }
}

/* HBL editor only: keep document cells in place; mail is secondary below the document. */
#hblBillOfLadingModal { padding: 8px; }
#hblBillOfLadingModal .hbl-bill-card {
  /* Match the legacy HBL dialog width instead of stretching across the desktop. */
  width: min(900px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  display: flex;
  flex-direction: column;
}
#hblBillOfLadingModal .hbl-bill-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: 0;
}
#hblBillOfLadingModal .hbl-workbench-head {
  position: relative;
  flex: 0 0 auto;
  gap: 12px;
  padding: 7px 50px 7px 12px;
}
#hblBillOfLadingModal .hbl-workbench-head > strong { font-size: 19px; }
#hblBillOfLadingModal .hbl-header-type { margin-left: auto; min-width: 0; }
#hblBillOfLadingModal .hbl-header-type .booking-field {
  grid-template-columns: auto minmax(0, 210px);
  align-items: center;
  gap: 8px;
}
#hblBillOfLadingModal .hbl-header-type .booking-field > span { line-height: 1.3; white-space: nowrap; }
#hblBillOfLadingModal .hbl-header-type select { height: 30px; }
#hblBillOfLadingModal .mail-confirm-close { top: 8px; right: 10px; }
#hblBillOfLadingModal .hbl-workbench-layout {
  display: block;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 8px;
}
#hblBillOfLadingModal .booking-order-actions { flex: 0 0 auto; gap: 10px; padding: 7px 12px; }
#hblBillOfLadingModal .booking-order-actions button { height: 32px; min-height: 32px; }
#hblBillOfLadingModal .hbl-mail-fold { margin-top: 8px; border: 1px solid #b8d0e6; border-radius: 6px; background: #f4f8fc; }
#hblBillOfLadingModal .hbl-mail-fold > summary {
  cursor: pointer;
  padding: 8px 10px;
  color: #315b81;
  font-size: 13px;
}
#hblBillOfLadingModal .hbl-mail-fold > summary strong { margin: 0 16px 0 10px; color: #173b62; }
#hblBillOfLadingModal .hbl-mail-expand,
#hblBillOfLadingModal .hbl-mail-collapse { color: #17649a; text-decoration: underline; }
#hblBillOfLadingModal .hbl-mail-fold:not([open]) .hbl-mail-collapse,
#hblBillOfLadingModal .hbl-mail-fold[open] .hbl-mail-expand { display: none; }
#hblBillOfLadingModal .hbl-mail-dock.booking-mail-panel {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 0;
  border-top: 1px solid #cbdceb;
  border-radius: 0 0 6px 6px;
  box-shadow: none;
}
#hblBillOfLadingModal .hbl-mail-dock .booking-field.wide { grid-column: 1 / -1; }
#hblBillOfLadingModal .hbl-mail-summary { padding: 6px 8px; overflow-wrap: anywhere; }
#hblBillOfLadingModal .hbl-mail-summary strong { margin-top: 3px; font-size: 13px; }
@media (min-width: 901px) {
  #hblBillOfLadingModal .hbl-party-card,
  #hblBillOfLadingModal .hbl-title-card { min-height: 0; padding: 6px 8px; }
  #hblBillOfLadingModal .hbl-party-card .booking-field { grid-template-columns: 1fr; gap: 3px; }
  #hblBillOfLadingModal .hbl-party-card .booking-field > span { line-height: 16px; }
  #hblBillOfLadingModal .hbl-party-card textarea { height: 96px; min-height: 96px; padding: 4px 6px; font-size: 13px; line-height: 17px; }
  #hblBillOfLadingModal .hbl-title-card { gap: 8px; justify-content: flex-start; }
  #hblBillOfLadingModal .hbl-number-row { gap: 6px; }
  #hblBillOfLadingModal .hbl-number-row > label,
  #hblBillOfLadingModal .hbl-number-row > .booking-field { min-height: 0; padding: 6px 8px; gap: 4px; }
  #hblBillOfLadingModal .hbl-number-row > label > strong { margin-top: 4px; font-size: 16px; overflow-wrap: anywhere; }
  #hblBillOfLadingModal .hbl-logo-block { grid-template-columns: 48px minmax(0, 1fr); min-height: 0; gap: 8px; padding: 6px 8px; }
  #hblBillOfLadingModal .hbl-logo-block img { width: 46px; height: 46px; }
  #hblBillOfLadingModal .hbl-logo-block strong { font-size: 20px; }
  #hblBillOfLadingModal .hbl-logo-block span { font-size: 12px; }
  #hblBillOfLadingModal .hbl-logo-block small { margin-top: 4px; }
  #hblBillOfLadingModal .hbl-route-grid .booking-field { grid-template-columns: 112px minmax(0, 1fr); padding: 4px 6px; gap: 5px; align-items: center; }
  #hblBillOfLadingModal .hbl-route-grid .booking-field > span { line-height: 1.2; }
  #hblBillOfLadingModal .booking-field input,
  #hblBillOfLadingModal .booking-field select { height: 28px; }
  #hblBillOfLadingModal .hbl-route-grid .booking-field.static strong,
  #hblBillOfLadingModal .hbl-route-grid .hbl-readonly-port strong { min-height: 28px; padding: 4px 6px; overflow-wrap: anywhere; }
  #hblBillOfLadingModal .hbl-row-mid { margin-top: 6px; line-height: 24px; }
  #hblBillOfLadingModal .hbl-cargo-grid section,
  #hblBillOfLadingModal .hbl-cargo-grid aside { padding: 6px 8px; }
  #hblBillOfLadingModal .hbl-goods-head { width: min(300px, 100%); margin-bottom: 4px; }
  #hblBillOfLadingModal .hbl-goods-head .booking-field { align-items: center; }
  #hblBillOfLadingModal .hbl-goods-head .booking-field > span { line-height: 1.2; }
  #hblBillOfLadingModal .hbl-cargo-main-label { margin: 4px 0; }
  #hblBillOfLadingModal .hbl-section-title { margin: 5px 0 3px; }
  #hblBillOfLadingModal .hbl-repeat-panel { padding: 4px; }
  #hblBillOfLadingModal .hbl-repeat-row { gap: 5px; margin-bottom: 4px; }
  #hblBillOfLadingModal .hbl-repeat-row:last-child { margin-bottom: 0; }
  #hblBillOfLadingModal .hbl-repeat-row textarea { height: 48px; min-height: 48px; padding: 4px 6px; font-size: 13px; line-height: 17px; }
  #hblBillOfLadingModal .hbl-repeat-row input { height: 28px; min-height: 28px; font-size: 13px; }
  #hblBillOfLadingModal .hbl-section-title button,
  #hblBillOfLadingModal .hbl-repeat-row button { width: 28px; height: 25px; }
  #hblBillOfLadingModal .hbl-measure-card .booking-field span { min-height: 28px; }
  #hblBillOfLadingModal .hbl-issue-cell { min-height: 0; padding: 5px 8px; }
  #hblBillOfLadingModal .hbl-issue-cell input,
  #hblBillOfLadingModal .hbl-issue-cell select,
  #hblBillOfLadingModal .hbl-issue-cell > strong { margin-top: 3px; }
  #hblBillOfLadingModal .hbl-terms-text { min-height: 0; padding: 8px 10px; }
}
@media (max-width: 900px) {
  #hblBillOfLadingModal .hbl-mail-dock.booking-mail-panel { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  #hblBillOfLadingModal .hbl-workbench-head { flex-wrap: wrap; gap: 6px; padding-left: 8px; }
  #hblBillOfLadingModal .hbl-workbench-head > strong { font-size: 17px; }
  #hblBillOfLadingModal .hbl-header-type { width: 100%; }
  #hblBillOfLadingModal .hbl-header-type .booking-field { grid-template-columns: auto minmax(0, 1fr); }
  #hblBillOfLadingModal .booking-order-actions { gap: 6px; padding: 6px; }
  #hblBillOfLadingModal .booking-order-actions button { min-width: 76px; width: auto; }
}

/* Approved dense HBL editor: preserve fields and section positions at 900px width. */
@media (min-width: 901px) {
  #hblBillOfLadingModal .hbl-party-card,
  #hblBillOfLadingModal .hbl-title-card { padding: 3px 5px; }
  #hblBillOfLadingModal .hbl-party-card .booking-field { gap: 1px; }
  #hblBillOfLadingModal .hbl-party-card .booking-field > span { font-size: 12px; line-height: 14px; }
  #hblBillOfLadingModal .hbl-party-card textarea { height: 60px; min-height: 60px; padding: 2px 4px; font-size: 13px; line-height: 17px; }
  #hblBillOfLadingModal .hbl-title-card { gap: 5px; }
  #hblBillOfLadingModal .hbl-number-row > label,
  #hblBillOfLadingModal .hbl-number-row > .booking-field { padding: 3px 5px; gap: 2px; }
  #hblBillOfLadingModal .hbl-number-row > label > strong { margin-top: 2px; font-size: 14px; }
  #hblBillOfLadingModal .hbl-logo-block { padding: 3px 5px; }
  #hblBillOfLadingModal .hbl-logo-block strong { font-size: 18px; }
  #hblBillOfLadingModal .hbl-logo-block small { font-size: 10px; line-height: 12px; margin-top: 2px; }
  #hblBillOfLadingModal .hbl-route-grid .booking-field { padding: 2px 4px; gap: 3px; }
  #hblBillOfLadingModal .booking-field input,
  #hblBillOfLadingModal .booking-field select { height: 26px; padding: 0 5px; }
  #hblBillOfLadingModal .hbl-route-grid .booking-field.static strong,
  #hblBillOfLadingModal .hbl-route-grid .hbl-readonly-port strong { min-height: 26px; padding: 3px 5px; }
  #hblBillOfLadingModal .hbl-row-mid { margin-top: 3px; line-height: 20px; }
  #hblBillOfLadingModal .hbl-cargo-grid > section,
  #hblBillOfLadingModal .hbl-cargo-grid > aside { padding: 3px 5px; }
  #hblBillOfLadingModal .hbl-goods-head { margin-bottom: 2px; }
  #hblBillOfLadingModal .hbl-cargo-main-label { margin: 2px 0; font-size: 11px; line-height: 13px; }
  #hblBillOfLadingModal .hbl-section-title { margin: 2px 0; line-height: 18px; font-size: 12px; }
  #hblBillOfLadingModal .hbl-section-title button,
  #hblBillOfLadingModal .hbl-repeat-row button { width: 24px; height: 22px; padding: 0; min-height: 0; }
  #hblBillOfLadingModal .hbl-repeat-panel { padding: 2px; }
  #hblBillOfLadingModal .hbl-repeat-row textarea { height: 100px; min-height: 100px; padding: 1px 4px; line-height: 16px; }
  #hblBillOfLadingModal .hbl-repeat-row input { height: 26px; min-height: 26px; padding: 0 4px; }
  #hblBillOfLadingModal .hbl-container-panel { padding: 0; }
  #hblBillOfLadingModal .hbl-container-panel small { display: block; font-size: 11px; line-height: 14px; margin-top: 2px; }
  #hblBillOfLadingModal .hbl-shipper-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 72px; }
  #hblBillOfLadingModal .hbl-measure-card .booking-field span { min-height: 26px; }
  #hblBillOfLadingModal .hbl-issue-cell { padding: 3px 5px; }
  #hblBillOfLadingModal .hbl-issue-cell .booking-field > span,
  #hblBillOfLadingModal .hbl-issue-cell > span { font-size: 11px; line-height: 14px; }
  #hblBillOfLadingModal .hbl-issue-cell input,
  #hblBillOfLadingModal .hbl-issue-cell select,
  #hblBillOfLadingModal .hbl-issue-cell > strong { margin-top: 2px; }
  #hblBillOfLadingModal .hbl-terms-text { padding: 5px 7px; font-size: 11px; line-height: 1.3; }
}

/* Six cargo lines plus existing padding/borders on narrow screens. */
@media (max-width: 900px) {
  #hblBillOfLadingModal .hbl-repeat-row textarea {
    height: calc(6lh + 20px);
    min-height: calc(6lh + 20px);
  }
}

/* Parties display the same explicit nonblank lines as the fixed-size PDF. */
#hblBillOfLadingModal textarea[name="shipper"],
#hblBillOfLadingModal textarea[name="consignee"],
#hblBillOfLadingModal textarea[name="notifyParty"] {
  box-sizing: border-box; height: 74px; min-height: 74px; padding: 2px 4px;
  /* The global UI-font rule is important; only these PDF editors must override it. */
  font-family: "Courier New", "Microsoft YaHei", monospace !important; font-weight: bold;
  font-size: 13px; line-height: 17px; white-space: pre; overflow-wrap: normal;
}
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-party-print-status { font-size: 10px; line-height: 12px; color: #536b80; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-party-print-status.has-error { color: #b42318; }
:is(#hblBillOfLadingModal, #hblMakeModal) textarea[aria-invalid="true"] { border-color: #b42318; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-print-anchor { position: relative; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-print-layout { position: absolute; top: 1px; right: 5px; z-index: 1; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-print-layout[open] { z-index: 20; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-party-card .hbl-print-layout { left: 0; right: 4px; pointer-events: none; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-party-card .hbl-print-layout > summary { width: max-content; margin-left: auto; pointer-events: auto; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-party-card .hbl-print-lines { left: 0; right: auto; max-width: 100%; box-sizing: border-box; pointer-events: auto; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-section-title .hbl-print-layout { left: 0; right: 30px; pointer-events: none; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-section-title .hbl-print-layout > summary { width: max-content; margin-left: auto; pointer-events: auto; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-section-title .hbl-print-lines { left: 0; right: auto; max-width: 100%; box-sizing: border-box; pointer-events: auto; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-print-layout > summary {
  cursor: pointer; color: #286186; font-size: 11px; font-weight: normal;
  line-height: 14px; background: #fff; border-radius: 3px; padding: 0 2px;
}
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-print-layout.has-error > summary { color: #b42318; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-print-lines {
  position: absolute; right: 0; top: 18px; width: min(410px, 75vw);
  max-height: 300px; overflow: auto; padding: 8px; background: #fff;
  border: 1px solid #b9cfdf; border-radius: 5px; box-shadow: 0 4px 14px #173b6230;
  color: #182f43; font-size: 12px; line-height: 1.4; font-weight: normal;
}
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-print-lines p { margin: 0 0 6px; overflow-wrap: anywhere; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-print-lines button { width: auto; min-width: 65px; height: 24px; padding: 0 6px; margin: 0 0 6px; font-size: 12px; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-print-lines > strong { display: block; margin: 4px 0; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-print-lines svg { display: block; max-width: 100%; height: auto; overflow: visible; }
:is(#hblBillOfLadingModal, #hblMakeModal) .hbl-print-lines svg text { font-family: "Courier New", "Microsoft YaHei", monospace; font-weight: bold; white-space: pre; }
@media (max-width: 600px) {
  :is(#hblBillOfLadingModal, #hblMakeModal) .hbl-print-lines { width: min(320px, 72vw); }
  :is(#hblBillOfLadingModal, #hblMakeModal) .hbl-print-layout > summary { font-size: 10px; }
}

/* Delivery-agent editor: reference sheets keep the live bill form mounted. */
#deliveryAgentFeeModal [data-daf-bill-pane][hidden],
#deliveryAgentFeeModal .daf-reference-sheet[hidden],
#deliveryAgentFeeModal .daf-reference-table[hidden] { display: none !important; }
#deliveryAgentFeeModal .daf-import-toolbar { gap: 16px; padding: 3px 0 8px; align-items: center; flex-wrap: wrap; }
#deliveryAgentFeeModal .daf-import-actions { display: flex; gap: 7px; flex: 0 0 auto; }
#deliveryAgentFeeModal .daf-import-actions button { min-width: 0; min-height: 33px; padding: 6px 14px; border: 1px solid #c9d7e2; border-radius: 999px; background: linear-gradient(180deg, #fff, #f0f5f9); color: #3d607b; box-shadow: inset 0 1px 0 #fff, 0 1px 3px #243f5810; transform: none; white-space: nowrap; }
#deliveryAgentFeeModal .daf-import-actions button span { font-size: 12px; font-weight: 600; }
#deliveryAgentFeeModal .daf-import-actions button:hover { background: #f3f7fa; border-color: #91afc6; }
:is(#deliveryAgentFeeModal, #telexReleaseModal) .daf-reference-tabs { display: flex; gap: 3px; padding: 4px; border: 1px solid #dbe4ec; border-radius: 10px; background: #eef3f7; box-shadow: inset 0 1px 1px #fff; min-width: 0; max-width: 100%; overflow-x: auto; }
:is(#deliveryAgentFeeModal, #telexReleaseModal) .daf-reference-tabs button { flex: 0 0 auto; min-height: 32px; border: 0; border-radius: 7px; padding: 7px 13px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; color: #617587; background: transparent; box-shadow: none; cursor: pointer; }
:is(#deliveryAgentFeeModal, #telexReleaseModal) .daf-reference-tabs button:hover { background: #e2eaf1; color: #254b6a; }
:is(#deliveryAgentFeeModal, #telexReleaseModal) .daf-reference-tabs button[aria-selected="true"] { background: #2b526f; color: #fff; box-shadow: 0 2px 4px #243f581a,inset 0 1px 0 #ffffff12; }
:is(#deliveryAgentFeeModal, #telexReleaseModal) .daf-reference-tabs button:focus-visible,
#deliveryAgentFeeModal .daf-reference-factory-toggle:focus-visible { outline: 2px solid #74a2c5; outline-offset: 2px; }
#deliveryAgentFeeModal .daf-live-profit { margin-left: auto; border: 0; border-left: 1px solid #d8e2ea; border-radius: 0; background: transparent; box-shadow: none; padding: 4px 0 4px 15px; gap: 7px; }
#deliveryAgentFeeModal .daf-live-profit span { font-size: 11px; color: #8091a0; }
#deliveryAgentFeeModal .daf-live-profit strong { font-size: 16px; color: #294e6d; }
#deliveryAgentFeeModal .daf-live-profit button { border: 1px solid #d6e0e8; border-radius: 6px; background: #fff; box-shadow: none; height: 28px; min-width: 42px; color: #688197; font-size: 11px; }
#deliveryAgentFeeModal .daf-reference-sheet { border: 1px solid #cbd9e4; border-radius: 5px; background: #fff; margin-top: 8px; min-height: 300px; overflow: hidden; }
#deliveryAgentFeeModal .daf-reference-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid #dce5ec; background: #f6f9fc; }
#deliveryAgentFeeModal .daf-reference-heading h4 { font-size: 14px; color: #294e6a; margin: 0; }
#deliveryAgentFeeModal .daf-reference-heading span { font-size: 11px; color: #7c8f9f; }
#deliveryAgentFeeModal .daf-reference-content { padding: 14px 16px; }
#deliveryAgentFeeModal .daf-reference-remark { white-space: pre-wrap; overflow-wrap: anywhere; color: #354f65; font-size: 14px; line-height: 2; padding: 14px 18px; background: #fafcfd; border-left: 3px solid #8caec6; }
#deliveryAgentFeeModal .daf-reference-list { display: grid; gap: 10px; }
#deliveryAgentFeeModal .daf-reference-card { border: 1px solid #ccdae4; border-radius: 5px; overflow: hidden; min-width: 0; }
#deliveryAgentFeeModal .daf-reference-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; background: #f6f9fc; }
#deliveryAgentFeeModal .daf-reference-factory-toggle { border: 0; background: none; text-align: left; padding: 0; color: #2c5776; font-size: 14px; font-weight: 700; cursor: pointer; flex: 1; min-width: 140px; display: flex; align-items: center; gap: 9px; box-shadow: none; overflow-wrap: anywhere; }
#deliveryAgentFeeModal .daf-reference-factory-toggle small { font-size: 11px; color: #8294a2; font-weight: 400; display: block; margin-top: 4px; }
#deliveryAgentFeeModal .daf-reference-factory-toggle i { flex: 0 0 8px; height: 8px; border-right: 1.5px solid #60819b; border-bottom: 1.5px solid #60819b; transform: rotate(-45deg); margin-right: 3px; }
#deliveryAgentFeeModal .daf-reference-factory-toggle[aria-expanded="true"] i { transform: rotate(45deg); margin-top: -4px; }
#deliveryAgentFeeModal .daf-reference-supplier { flex: 1; min-width: 140px; overflow-wrap: anywhere; font-size: 14px; color: #2c5776; }
#deliveryAgentFeeModal .daf-reference-amount { font-size: 15px; font-weight: 700; color: #2d506c; overflow-wrap: anywhere; }
#deliveryAgentFeeModal .daf-reference-status { font-size: 11px; color: #987224; background: #fff6dd; border: 1px solid #efdfb6; padding: 3px 7px; border-radius: 4px; }
#deliveryAgentFeeModal .daf-reference-status.is-confirmed { background: #edf6f1; color: #468263; border-color: #c8dfd1; }
#deliveryAgentFeeModal .daf-reference-status.is-invalid { color: #a73f3f; background: #fff1f1; border-color: #ebcbcb; }
#deliveryAgentFeeModal .daf-reference-download { font-size: 12px; text-decoration: none; color: #2b6b97; border: 1px solid #bcd0df; border-radius: 4px; background: #fff; padding: 5px 9px; white-space: nowrap; }
#deliveryAgentFeeModal .daf-reference-table { overflow-x: auto; }
#deliveryAgentFeeModal .daf-reference-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
#deliveryAgentFeeModal .daf-reference-table th { font-weight: 600; background: #fcfdfe; color: #7a8b99; padding: 9px 14px; border-bottom: 1px solid #e6edf2; white-space: nowrap; }
#deliveryAgentFeeModal .daf-reference-table td { padding: 10px 14px; border-bottom: 1px solid #edf1f5; color: #3c5366; overflow-wrap: anywhere; min-width: 65px; }
#deliveryAgentFeeModal .daf-reference-table :is(th,td) { text-align: right; }
#deliveryAgentFeeModal .daf-reference-table :is(th,td):is(:first-child,:last-child) { text-align: left; min-width: 115px; }
#deliveryAgentFeeModal .daf-reference-files { padding: 10px 14px; display: grid; gap: 10px; font-size: 12px; color: #73899a; }
#deliveryAgentFeeModal .daf-reference-files > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#deliveryAgentFeeModal .daf-reference-files > div > span { min-width: 0; overflow-wrap: anywhere; }
#deliveryAgentFeeModal .daf-reference-empty { padding: 18px; color: #718394; font-size: 13px; }
@media (max-width: 900px) {
  #deliveryAgentFeeModal .daf-import-toolbar { flex-direction: row; gap: 8px; }
  :is(#deliveryAgentFeeModal, #telexReleaseModal) .daf-reference-tabs { order: 3; width: 100%; box-sizing: border-box; }
  :is(#deliveryAgentFeeModal, #telexReleaseModal) .daf-reference-tabs button { flex: 1 0 auto; padding: 7px 6px; }
  #deliveryAgentFeeModal .daf-live-profit { padding-left: 8px; }
  #deliveryAgentFeeModal .daf-reference-content { padding: 10px; }
  #deliveryAgentFeeModal .daf-reference-summary { gap: 8px; padding: 10px; }
}

/* Keep the bill shell/header stationary; only the sheet below the summary scrolls. */
#deliveryAgentFeeModal .delivery-agent-fee-edit-dialog {
  height: calc(100vh - 20px);
  height: calc(100dvh - 20px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
#deliveryAgentFeeModal .delivery-agent-fee-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#deliveryAgentFeeModal .daf-edit-paper,
#deliveryAgentFeeModal .daf-mobile-detail-section,
#deliveryAgentFeeModal .daf-mobile-detail-section > .mobile-bill-section-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}
#deliveryAgentFeeModal .daf-mobile-detail-section { margin-bottom: 0; }
#deliveryAgentFeeModal .daf-mobile-overview-section,
#deliveryAgentFeeModal .mobile-bill-section-header,
#deliveryAgentFeeModal .daf-import-toolbar,
#deliveryAgentFeeModal .daf-import-rule,
#deliveryAgentFeeModal .daf-edit-order-grid,
#deliveryAgentFeeModal .daf-form-error { flex-shrink: 0; }
#deliveryAgentFeeModal .daf-sheet-scroll {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  overflow-anchor: none;
}
#deliveryAgentFeeModal .daf-sheet-scroll > [role="tabpanel"] { min-width: 0; }
#deliveryAgentFeeModal .daf-edit-mail { margin-top: 10px; }
@media (max-width: 760px) {
  #deliveryAgentFeeModal .delivery-agent-fee-edit-dialog { height: calc(100vh - 16px); height: calc(100dvh - 16px); }
  #deliveryAgentFeeModal .daf-mobile-detail-section.is-collapsed { flex: 0 0 auto; }
  #deliveryAgentFeeModal .daf-mobile-detail-section.is-collapsed > .mobile-bill-section-body { display: none; }
  #deliveryAgentFeeModal .daf-mobile-detail-section > .mobile-bill-section-body { padding: 8px; }
  #deliveryAgentFeeModal .daf-import-toolbar { margin: 0; }
  #deliveryAgentFeeModal .daf-sheet-scroll { margin-top: 8px; }
}
@media (max-width: 760px) and (max-height: 650px) {
  #deliveryAgentFeeModal .track-head { padding: 6px 10px; }
  #deliveryAgentFeeModal .mobile-bill-section-header { min-height: 40px; padding: 5px 8px; gap: 6px; }
  #deliveryAgentFeeModal .mobile-bill-section-step { width: 24px; height: 24px; flex-basis: 24px; }
  #deliveryAgentFeeModal .mobile-bill-section-copy { gap: 1px; }
  #deliveryAgentFeeModal .mobile-bill-section-copy strong { font-size: 12px; }
  #deliveryAgentFeeModal .daf-mobile-overview-section { margin-bottom: 6px; }
  #deliveryAgentFeeModal .daf-import-toolbar { gap: 4px; padding-bottom: 0; }
  #deliveryAgentFeeModal .daf-live-profit { min-height: 0; padding-top: 0; padding-bottom: 0; }
  #deliveryAgentFeeModal .daf-sheet-scroll { margin-top: 4px; }
}

/* Booking supplier groups share the order result scope and wrap on narrow screens. */
#orderView .order-supplier-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}
#orderView .order-supplier-filters .order-flow-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
#orderView .order-supplier-filters .order-flow-label { overflow-wrap: anywhere; }

/* HBL cargo uses the exact PDF font files; never inherit general UI typography. */
@font-face { font-family: "Chamshine HBL Courier"; src: url("api/hbl-print-font?face=courier&v=20261013") format("truetype"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Chamshine HBL CJK"; src: url("api/hbl-print-font?face=cjk&v=20261013") format("truetype"); font-weight: 700; font-style: normal; font-display: block; }
#hblBillOfLadingModal textarea[name^="goods_"],
#hblBillOfLadingModal textarea[name^="marks_"],
#hblMakeModal #hblMakeGoods,
#hblMakeModal #hblMakeMarks,
:is(#hblBillOfLadingModal, #hblMakeModal) [data-print-field="goods"] svg text,
:is(#hblBillOfLadingModal, #hblMakeModal) [data-print-field="marks"] svg text {
  font-family: "Chamshine HBL Courier", "Chamshine HBL CJK", monospace !important;
  font-weight: 700;
  font-synthesis: none;
}
#hblBillOfLadingModal textarea[name^="goods_"],
#hblBillOfLadingModal textarea[name^="marks_"],
#hblMakeModal #hblMakeGoods,
#hblMakeModal #hblMakeMarks { font-size: 10pt; }

/* Container/seal controls share the fixed-size cargo PDF font in both HBL editors. */
#hblBillOfLadingModal .hbl-repeat-row input[name^="shipper"],
#hblMakeModal #hblMakeShipperRows input {
  font-family: "Chamshine HBL Courier", "Chamshine HBL CJK", monospace !important;
  font-weight: 700;
  font-size: 10pt;
  font-synthesis: none;
}

/* Time event creation keeps only the entry fields and validation. */
.order-specific-event-scope.hidden { display: none; }

/* Order detail: full original bill names use the metadata style, within the left column. */
.supplier-fee-ledger-with-filename .supplier-fee-ledger-summary-main { padding-right: 8px; }
.supplier-fee-ledger-with-filename .supplier-fee-ledger-line-meta {
  align-items: flex-start;
  flex-wrap: wrap;
  overflow: visible;
  white-space: normal;
  row-gap: 5px;
}
.supplier-fee-ledger-with-filename .supplier-fee-ledger-line-meta > span {
  flex: 0 0 auto;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  max-width: 100%;
}
.supplier-fee-ledger-with-filename .supplier-fee-ledger-line-meta > .supplier-fee-ledger-bill-name {
  flex: 1 1 0;
  min-width: min(150px, 100%);
  overflow-wrap: anywhere;
  line-height: 1.65;
}
@media (min-width: 821px) {
  .supplier-fee-ledger-with-filename .supplier-fee-ledger-summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(150px, auto);
  }
}

/* Supplier original attachment names must wrap without covering ledger actions. */
.supplier-fee-ledger-row .supplier-fee-file-download {
  max-width: 240px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

/* Order detail typography and table layout, scoped to the read-only bill reference. */
:is(#deliveryAgentFeeModal, #telexReleaseModal) .daf-order-overview { display: block; margin: 0; padding: 0; min-width: 0; }
:is(#deliveryAgentFeeModal, #telexReleaseModal) .daf-order-overview .legacy-order-board { overflow-x: auto; }
:is(#deliveryAgentFeeModal, #telexReleaseModal) .daf-order-overview .order-initial-schedule { margin-left: 7px; margin-right: 0; color: #aaa; font-size: 12px; font-style: italic; font-weight: 400; }

#deliveryAgentFeeModal .daf-reference-count { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; margin-left: 5px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #cf3d43; color: #fff; font: 700 11px/1 Arial, sans-serif; vertical-align: middle; box-shadow: inset 0 1px 0 #ffffff38; }
#deliveryAgentFeeModal .daf-reference-count[hidden] { display: none; }

/* Telex overview uses the same reference tabs and overview renderer as the agent bill. */
#telexReleaseModal .telex-release-card { width: min(1080px, calc(100vw - 44px)); }
#telexReleaseModal .booking-order-head { position: relative; }
#telexReleaseModal .booking-order-head .mail-confirm-close { position: absolute; right: 16px; top: 16px; }
#telexReleaseModal #telexReleaseForm { display: block; }
#telexReleaseModal .telex-order-reference-tabs { width: max-content; margin-bottom: 14px; }
#telexReleaseModal .telex-order-bill { display: grid; gap: 14px; }
#telexReleaseModal .telex-order-bill[hidden], #telexReleaseModal .telex-order-overview[hidden] { display: none; }
#telexReleaseModal .telex-order-bill > .booking-paper,
#telexReleaseModal .telex-order-bill > .booking-mail-panel { width: 100%; max-width: 860px; margin: 0 auto; box-sizing: border-box; }
#telexReleaseModal .telex-order-overview { min-width: 0; }
#telexReleaseModal .daf-reference-empty { padding: 24px 16px; color: #6f8395; text-align: center; }

/* Order-detail bill actions: self-contained pills also when the fallback
   floating host is outside .employee-billing-content. Business actions stay put. */
:is(.factory-fee-ledger-quick-actions, .supplier-fee-ledger-quick-actions, .delivery-agent-fee-ledger-quick-actions) > .table-action-link {
  min-height: 34px;
  border-radius: 999px;
  padding: 0 15px;
  font-size: 12px;
}
:is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more) > summary {
  min-width: 62px;
  height: 34px;
  border-radius: 999px;
  font-size: 12px;
}
:is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more) > .supplier-fee-ledger-more-menu {
  gap: 10px;
  padding: 14px;
  border: 1px solid #b8d0df;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #f4f9fc);
  box-shadow: 0 12px 28px #234d6f22, 0 2px 4px #234d6f0a;
}
.factory-fee-ledger-more > .supplier-fee-ledger-more-menu {
  width: min(376px, calc(100vw - 40px));
  min-width: 0;
}
:is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more) > .supplier-fee-ledger-more-menu > .table-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #b3ccdd;
  border-bottom-color: #89adc5;
  border-radius: 999px;
  background: linear-gradient(#fff, #eaf4fa);
  color: #285e84;
  box-shadow: inset 0 1px 0 #fff, 0 2px 2px #234d6f12;
  font-family: inherit;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease;
}
:is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more) > .supplier-fee-ledger-more-menu > a.table-action-link {
  border-color: #2b7eab;
  border-bottom-color: #1b608a;
  background: linear-gradient(#51a9d4, #2c89ba);
  color: #fff;
  box-shadow: inset 0 1px 0 #ffffff55, 0 2px 3px #245d7e20;
}
:is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more) > .supplier-fee-ledger-more-menu > .table-action-link.danger {
  border-color: #e1b7b7;
  border-bottom-color: #cb9696;
  background: linear-gradient(#fff, #fff1f1);
  color: #ae4848;
}
:is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more) > .supplier-fee-ledger-more-menu > .table-action-link:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
}
:is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more) > .supplier-fee-ledger-more-menu > .table-action-link:focus-visible {
  outline: 3px solid rgba(47, 126, 180, .22);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .factory-fee-ledger-more > .supplier-fee-ledger-more-menu { width: min(320px, calc(100vw - 40px)); }
}

/* Additional read-only status only in the employee telex queue. */
#orderView .telex-agent-bill-status-row { display: block; margin-top: 5px; white-space: normal; }
#orderView .telex-agent-bill-status { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 3px 7px; border-radius: 10px; font-size: 11px; font-weight: 500; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
#orderView .telex-agent-bill-status.created { color: #26724b; background: #eaf5ee; }
#orderView .telex-agent-bill-status.not_created { color: #a75b16; background: #fff3df; }
#orderView .telex-agent-bill-status.not_required { color: #697386; background: #eef0f3; }

/* Factory/supplier read-only reference sheets share the agent editor styling. */
.billing-reference-dialog .daf-reference-tabs { display: flex; gap: 3px; padding: 4px; border: 1px solid #dbe4ec; border-radius: 10px; background: #eef3f7; box-shadow: inset 0 1px 1px #fff; min-width: 0; max-width: 100%; overflow-x: auto; }
.billing-reference-dialog .daf-reference-tabs button { flex: 0 0 auto; min-height: 32px; border: 0; border-radius: 7px; padding: 7px 13px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; color: #617587; background: transparent; box-shadow: none; cursor: pointer; }
.billing-reference-dialog .daf-reference-tabs button:hover { background: #e2eaf1; color: #254b6a; }
.billing-reference-dialog .daf-reference-tabs button[aria-selected="true"] { background: #2b526f; color: #fff; box-shadow: 0 2px 4px #243f581a,inset 0 1px 0 #ffffff12; }
.billing-reference-dialog .daf-reference-tabs button:focus-visible,
.billing-reference-dialog .daf-reference-factory-toggle:focus-visible { outline: 2px solid #74a2c5; outline-offset: 2px; }
.billing-reference-dialog .daf-live-profit { margin-left: auto; border: 0; border-left: 1px solid #d8e2ea; border-radius: 0; background: transparent; box-shadow: none; padding: 4px 0 4px 15px; gap: 7px; }
.billing-reference-dialog .daf-live-profit span { font-size: 11px; color: #8091a0; }
.billing-reference-dialog .daf-live-profit strong { font-size: 16px; color: #294e6d; }
.billing-reference-dialog .daf-live-profit button { border: 1px solid #d6e0e8; border-radius: 6px; background: #fff; box-shadow: none; height: 28px; min-width: 42px; color: #688197; font-size: 11px; }
.billing-reference-dialog .daf-reference-sheet { border: 1px solid #cbd9e4; border-radius: 5px; background: #fff; margin-top: 8px; min-height: 300px; overflow: hidden; }
.billing-reference-dialog .daf-reference-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid #dce5ec; background: #f6f9fc; }
.billing-reference-dialog .daf-reference-heading h4 { font-size: 14px; color: #294e6a; margin: 0; }
.billing-reference-dialog .daf-reference-heading span { font-size: 11px; color: #7c8f9f; }
.billing-reference-dialog .daf-reference-content { padding: 14px 16px; }
.billing-reference-dialog .daf-reference-remark { white-space: pre-wrap; overflow-wrap: anywhere; color: #354f65; font-size: 14px; line-height: 2; padding: 14px 18px; background: #fafcfd; border-left: 3px solid #8caec6; }
.billing-reference-dialog .daf-reference-list { display: grid; gap: 10px; }
.billing-reference-dialog .daf-reference-card { border: 1px solid #ccdae4; border-radius: 5px; overflow: hidden; min-width: 0; }
.billing-reference-dialog .daf-reference-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; background: #f6f9fc; }
.billing-reference-dialog .daf-reference-factory-toggle { border: 0; background: none; text-align: left; padding: 0; color: #2c5776; font-size: 14px; font-weight: 700; cursor: pointer; flex: 1; min-width: 140px; display: flex; align-items: center; gap: 9px; box-shadow: none; overflow-wrap: anywhere; }
.billing-reference-dialog .daf-reference-factory-toggle small { font-size: 11px; color: #8294a2; font-weight: 400; display: block; margin-top: 4px; }
.billing-reference-dialog .daf-reference-factory-toggle i { flex: 0 0 8px; height: 8px; border-right: 1.5px solid #60819b; border-bottom: 1.5px solid #60819b; transform: rotate(-45deg); margin-right: 3px; }
.billing-reference-dialog .daf-reference-factory-toggle[aria-expanded="true"] i { transform: rotate(45deg); margin-top: -4px; }
.billing-reference-dialog .daf-reference-supplier { flex: 1; min-width: 140px; overflow-wrap: anywhere; font-size: 14px; color: #2c5776; }
.billing-reference-dialog .daf-reference-amount { font-size: 15px; font-weight: 700; color: #2d506c; overflow-wrap: anywhere; }
.billing-reference-dialog .daf-reference-status { font-size: 11px; color: #987224; background: #fff6dd; border: 1px solid #efdfb6; padding: 3px 7px; border-radius: 4px; }
.billing-reference-dialog .daf-reference-status.is-confirmed { background: #edf6f1; color: #468263; border-color: #c8dfd1; }
.billing-reference-dialog .daf-reference-status.is-invalid { color: #a73f3f; background: #fff1f1; border-color: #ebcbcb; }
.billing-reference-dialog .daf-reference-download { font-size: 12px; text-decoration: none; color: #2b6b97; border: 1px solid #bcd0df; border-radius: 4px; background: #fff; padding: 5px 9px; white-space: nowrap; }
.billing-reference-dialog .daf-reference-table { overflow-x: auto; }
.billing-reference-dialog .daf-reference-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.billing-reference-dialog .daf-reference-table th { font-weight: 600; background: #fcfdfe; color: #7a8b99; padding: 9px 14px; border-bottom: 1px solid #e6edf2; white-space: nowrap; }
.billing-reference-dialog .daf-reference-table td { padding: 10px 14px; border-bottom: 1px solid #edf1f5; color: #3c5366; overflow-wrap: anywhere; min-width: 65px; }
.billing-reference-dialog .daf-reference-table :is(th,td) { text-align: right; }
.billing-reference-dialog .daf-reference-table :is(th,td):is(:first-child,:last-child) { text-align: left; min-width: 115px; }
.billing-reference-dialog .daf-reference-files { padding: 10px 14px; display: grid; gap: 10px; font-size: 12px; color: #73899a; }
.billing-reference-dialog .daf-reference-files > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.billing-reference-dialog .daf-reference-files > div > span { min-width: 0; overflow-wrap: anywhere; }
.billing-reference-dialog .daf-reference-empty { padding: 18px; color: #718394; font-size: 13px; }
@media (max-width: 900px) {
  .billing-reference-dialog .daf-import-toolbar { flex-direction: row; gap: 8px; }
  .billing-reference-dialog .daf-reference-tabs { order: 3; width: 100%; box-sizing: border-box; }
  .billing-reference-dialog .daf-reference-tabs button { flex: 1 0 auto; padding: 7px 6px; }
  .billing-reference-dialog .daf-live-profit { padding-left: 8px; }
  .billing-reference-dialog .daf-reference-content { padding: 10px; }
  .billing-reference-dialog .daf-reference-summary { gap: 8px; padding: 10px; }
}


.billing-reference-dialog { height: calc(100dvh - 30px); max-height: calc(100dvh - 30px); display: flex; flex-direction: column; overflow: hidden; }
.billing-reference-dialog > .track-head { flex: 0 0 auto; flex-wrap: wrap; gap: 10px; }
.billing-reference-dialog .billing-reference-tabs { flex: 1 1 auto; flex-wrap: wrap; }
.billing-reference-dialog .billing-reference-tabs button { flex: 0 0 auto; }
.billing-reference-dialog > form { flex: 1 1 auto; min-height: 0; overflow: auto; }
.billing-reference-dialog > .edit-actions { flex: 0 0 auto; }
.billing-reference-dialog > .billing-reference-sheet { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 12px; }
.billing-reference-dialog [hidden] { display: none !important; }
.billing-reference-dialog .daf-reference-count { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; margin-left: 5px; padding: 0 4px; border-radius: 999px; background: #cf3d43; color: #fff; font: 700 11px/1 Arial,sans-serif; }
.billing-reference-dialog > .track-head > div:first-child { flex: 1 1 0; min-width: 0; }
@media (min-width: 901px) { .edit-dialog.supplier-fee-dialog.billing-reference-dialog { width: min(1180px, calc(100vw - 32px)); max-width: calc(100vw - 32px); } }

.billing-reference-dialog .daf-order-overview { display: block; margin: 0; padding: 0; min-width: 0; }
.billing-reference-dialog .daf-order-overview .legacy-order-board { overflow-x: auto; }
.billing-reference-dialog .daf-order-overview .order-initial-schedule { margin-left: 7px; margin-right: 0; color: #aaa; font-size: 12px; font-style: italic; font-weight: 400; }
.billing-reference-dialog > .track-head .daf-reference-count { color: #fff; font-size: 11px; font-weight: 700; }
.billing-reference-dialog > .track-head .billing-reference-tabs button { width: auto; height: auto; min-width: 0; }
.billing-reference-dialog > .track-head .billing-reference-tabs button[aria-selected="true"] { background: #2b526f; color: #fff; }

/* Single-invoice red selection must keep number, amount and state visible. */
.factory-fee-red-card .factory-fee-red-record-main {
  grid-template-columns: minmax(80px, .7fr) minmax(0, 1.4fr) minmax(90px, 1fr) 65px;
}
.factory-fee-red-card .factory-fee-red-record-main > * { min-width: 0; overflow-wrap: anywhere; }
.factory-fee-red-card [data-red-record] { width: auto; margin: 0 8px 0 0; vertical-align: middle; }
@media (max-width: 600px) {
  .factory-fee-red-card .factory-fee-red-record-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .factory-fee-red-card .mail-confirm-actions { flex-wrap: wrap; }
}

/* Compact bill capsules; preserve the shared floating-menu positioning. */
:is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more):is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more) > summary {
  min-width: 58px;
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #cbd9e5;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  box-shadow: none;
}
:is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more):is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more)[open] > summary { background: #edf3f8; }
:is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more):is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more) > .supplier-fee-ledger-more-menu {
  flex-direction: column;
  height: max-content;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  grid-template-columns: minmax(0, 1fr);
  width: min(204px, calc(100vw - 24px));
  min-width: 0;
  gap: 6px;
  padding: 10px;
  border: 1px solid #dce4ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 25px #213b581c;
}
:is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more):is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more) > .supplier-fee-ledger-more-menu > .table-action-link {
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  flex: 0 0 34px;
  padding: 7px 11px;
  border: 1px solid #d6e2ec;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #f2f7fb);
  box-shadow: none;
  color: #40586c;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
:is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more):is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more) > .supplier-fee-ledger-more-menu > .table-action-link.danger {
  border-color: #e1b7b7;
  background: linear-gradient(#fff, #fff1f1);
  color: #ae4848;
}
:is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more):is(.factory-fee-ledger-more, .supplier-fee-ledger-action-more, .delivery-agent-fee-ledger-more) > .supplier-fee-ledger-more-menu > .table-action-link:hover {
  background: #edf3f9;
  transform: none;
  filter: none;
}

/* Direct bill actions also stay compact when their row is stretched. */
:is(.factory-fee-ledger-quick-actions, .supplier-fee-ledger-quick-actions, .delivery-agent-fee-ledger-quick-actions) > .table-action-link {
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  box-sizing: border-box;
  align-self: center;
}